From c3a8ec82b41b0a17c0f961d062b3af2931227ab9 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Thu, 3 Oct 2024 10:21:12 -0600 Subject: [PATCH] feat(#2162): replace design tokens for container --- .../src/components/container/Container.svelte | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/libs/web-components/src/components/container/Container.svelte b/libs/web-components/src/components/container/Container.svelte index 34047cd63..7e7eefcd7 100644 --- a/libs/web-components/src/components/container/Container.svelte +++ b/libs/web-components/src/components/container/Container.svelte @@ -118,16 +118,16 @@ font: var(--goa-typography-heading-s); border-width: 1px; border-style: solid; - border-top-left-radius: var(--goa-border-radius-m); - border-top-right-radius: var(--goa-border-radius-m); + border-top-left-radius: var(--goa-container-border-radius); + border-top-right-radius: var(--goa-container-border-radius); } .content { - border-bottom: 1px solid var(--goa-color-greyscale-200); - border-left: 1px solid var(--goa-color-greyscale-200); - border-right: 1px solid var(--goa-color-greyscale-200); - border-bottom-left-radius: var(--goa-border-radius-m); - border-bottom-right-radius: var(--goa-border-radius-m); + border-bottom: var(--goa-container-border); + border-left: var(--goa-container-border); + border-right: var(--goa-container-border); + border-bottom-left-radius: var(--goa-container-border-radius); + border-bottom-right-radius: var(--goa-container-border-radius); display: flex; flex: 1 1 auto; flex-direction: column; @@ -174,11 +174,11 @@ /* Padding variants */ .padding--relaxed header { - padding: 0 1.5rem; + padding: 0 var(--goa-container-padding); } .padding--relaxed .content { - padding: 1.5rem; + padding: var(--goa-container-padding); } .padding--compact header, @@ -258,9 +258,9 @@ display: none; } .heading--filled ~ .content { - border-top: 1px solid var(--goa-color-greyscale-200); - border-top-left-radius: var(--goa-border-radius-m); - border-top-right-radius: var(--goa-border-radius-m); + border-top: var(--goa-container-border); + border-top-left-radius: var(--goa-container-border-radius); + border-top-right-radius: var(--goa-container-border-radius); } .heading--thin .title,