From e79e382bbc140b5f3e01d4f3a1c3a572e795c0a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 3 Sep 2024 08:25:02 +0200 Subject: [PATCH] Feat(web): Switch Accordion component to v3 design tokens #DS-1451 --- .../src/scss/components/Accordion/_theme.scss | 31 ++++++++++--------- packages/web/src/scss/components/index.scss | 3 +- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/web/src/scss/components/Accordion/_theme.scss b/packages/web/src/scss/components/Accordion/_theme.scss index 3c59c7918e..d738936af6 100644 --- a/packages/web/src/scss/components/Accordion/_theme.scss +++ b/packages/web/src/scss/components/Accordion/_theme.scss @@ -1,16 +1,17 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; +@use '../../settings/globals'; -$accordion-item-background-color-default: tokens.$background-interactive-default; -$accordion-item-background-color-hover: tokens.$background-interactive-hover; -$accordion-item-background-color-active: tokens.$background-interactive-active; -$accordion-header-typography: tokens.$body-medium-text-regular; -$accordion-header-typography-active: tokens.$body-medium-text-bold; -$accordion-header-typography-color: tokens.$text-primary-default; -$accordion-header-gap: tokens.$space-500; -$accordion-header-padding-y: tokens.$space-700; -$accordion-header-padding-x: tokens.$space-600; -$accordion-border-radius: tokens.$radius-100; -$accordion-divider-color: tokens.$action-tertiary-default; -$accordion-divider-width: tokens.$border-width-100; -$accordion-divider-style: tokens.$border-style-100; -$accordion-content-padding-bottom: tokens.$space-600; +$accordion-item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default); +$accordion-item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover); +$accordion-item-background-color-active: var(--#{globals.$prefix}color-background-interactive-active); +$accordion-header-typography: global-tokens.$body-3-regular; +$accordion-header-typography-active: global-tokens.$body-3-bold; +$accordion-header-typography-color: var(--#{globals.$prefix}color-text-primary); +$accordion-header-gap: global-tokens.$space-600; +$accordion-header-padding-y: global-tokens.$space-900; +$accordion-header-padding-x: global-tokens.$space-700; +$accordion-border-radius: global-tokens.$radius-200; +$accordion-divider-color: var(--#{globals.$prefix}color-border-secondary-default); +$accordion-divider-width: global-tokens.$border-width-100; +$accordion-divider-style: solid; +$accordion-content-padding-bottom: global-tokens.$space-700; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 179a601299..77b6e6c40d 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -1,5 +1,6 @@ // This code is commented out until we switch it to the new token system -// @forward 'Accordion'; +@forward 'Accordion'; + // @forward 'Alert'; @forward 'Breadcrumbs';