Feat(web): Switch Container, Divider, Stack, ActionLayout & EmptyStat…

…e to v3 design tokens #DS-1444
lmc-eu · Aug 29, 2024 · cbca08d · cbca08d
1 parent 79d45be
commit cbca08d
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 24 deletions.
diff --git a/packages/web/src/scss/components/Collapse/_theme.scss b/packages/web/src/scss/components/Collapse/_theme.scss
@@ -1,6 +1,6 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/transitions';
 
-$breakpoints: tokens.$breakpoints;
+$breakpoints: global-tokens.$breakpoints;
 $collapse-transition-timing: transitions.$timing-eased-in-out-fast;
 $collapse-transition-duration: transitions.$duration-200;
diff --git a/packages/web/src/scss/components/Divider/_theme.scss b/packages/web/src/scss/components/Divider/_theme.scss
@@ -1,5 +1,6 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$border-width: tokens.$border-width-100;
-$border-style: tokens.$border-style-100;
-$border-color: tokens.$border-secondary-default;
+$border-width: global-tokens.$border-width-100;
+$border-style: solid;
+$border-color: var(--#{globals.$prefix}color-border-secondary-default);
diff --git a/packages/web/src/scss/components/Stack/_theme.scss b/packages/web/src/scss/components/Stack/_theme.scss
@@ -1,5 +1,6 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$breakpoints: tokens.$breakpoints;
-$border: tokens.$border-width-100 tokens.$border-style-100 tokens.$border-secondary-default;
-$spacing-fallback: tokens.$space-600;
+$breakpoints: global-tokens.$breakpoints;
+$border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-border-secondary-default);
+$spacing-fallback: global-tokens.$space-600;
diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss
@@ -1,4 +1,4 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 
-$breakpoints: tokens.$breakpoints;
-$root-gap: tokens.$space-600;
+$breakpoints: global-tokens.$breakpoints;
+$root-gap: global-tokens.$space-700;
diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss b/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss
@@ -1,6 +1,6 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 
-$breakpoints: tokens.$breakpoints;
-$root-padding: tokens.$space-1000 tokens.$space-700;
-$root-padding-desktop: tokens.$space-1000 tokens.$space-800;
-$buttons-gap: tokens.$space-600;
+$breakpoints: global-tokens.$breakpoints;
+$root-padding: global-tokens.$space-1200 global-tokens.$space-900;
+$root-padding-desktop: global-tokens.$space-1200 global-tokens.$space-1000;
+$buttons-gap: global-tokens.$space-700;
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -4,10 +4,10 @@
 // @forward 'Breadcrumbs';
 // @forward 'Button';
 // @forward 'Checkbox';
-// @forward 'Collapse';
+@forward 'Collapse';
 @forward 'Container';
+@forward 'Divider';
 
-// @forward 'Divider';
 // @forward 'Dropdown';
 // @forward 'FieldGroup';
 // @forward 'FileUploader';
@@ -22,16 +22,19 @@
 // @forward 'Radio';
 // @forward 'ScrollView';
 // @forward 'Select';
-// @forward 'Stack';
+@forward 'Stack';
+
 // @forward 'Tabs';
 // @forward 'Tag';
 // @forward 'TextArea';
 // @forward 'TextField';
 // @forward 'Toast';
 // @forward 'Tooltip';
-// @forward 'UNSTABLE_ActionLayout';
+@forward 'UNSTABLE_ActionLayout';
+
 // @forward 'UNSTABLE_Avatar';
-// @forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_EmptyState';
+
 // @forward 'UNSTABLE_PartnerLogo';
 // @forward 'UNSTABLE_ProductLogo';
 @forward 'UNSTABLE_Section';

diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
@@ -13,7 +13,6 @@ const IGNORED_TESTS: string[] = [
   'ButtonLink',
   'Checkbox',
   'Collapse',
-  'Divider',
   'Dropdown',
   'FieldGroup',
   'FileUploader',