Feat(web): Switch Flex component to v3 design tokens #DS-1444

lmc-eu · Aug 31, 2024 · f4aae11 · f4aae11
1 parent 3d7a0e7
commit f4aae11
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/packages/web/src/scss/components/Flex/_theme.scss b/packages/web/src/scss/components/Flex/_theme.scss
@@ -1,8 +1,8 @@
 @use 'sass:list';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/dictionaries';
 
 $alignment-x-dictionary: list.join(dictionaries.$alignments-x-extended, space-between);
 $alignment-y-dictionary: list.join(dictionaries.$alignments-y-extended, baseline);
-$breakpoints: tokens.$breakpoints;
-$gap: tokens.$space-600;
+$breakpoints: global-tokens.$breakpoints;
+$gap: global-tokens.$space-700;
diff --git a/packages/web/src/scss/components/Flex/index.html b/packages/web/src/scss/components/Flex/index.html
@@ -121,7 +121,7 @@ <h2 class="docs-Heading">Vertical Alignment</h2>
     <div class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYBaseline">
       <div class="docs-Box docs-Box--small">Item 1</div>
       <div class="docs-Box docs-Box--small">Item 2<br />is taller</div>
-      <div class="docs-Box typography-heading-small-text">Item 3 has bigger font size</div>
+      <div class="docs-Box typography-headline-4-bold">Item 3 has bigger font size</div>
     </div>
 
   </div>
@@ -156,7 +156,7 @@ <h2 class="docs-Heading">Custom Spacing</h2>
 
     <div
       class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch"
-      style="--flex-spacing: var(--spirit-space-1200)"
+      style="--flex-spacing: var(--spirit-space-1600)"
     >
       <div class="docs-Box docs-Box--small">Item 1</div>
       <div class="docs-Box docs-Box--small">Item 2</div>
@@ -172,7 +172,7 @@ <h2 class="docs-Heading">Responsive Spacing</h2>
 
     <div
       class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch"
-      style="--flex-spacing: var(--spirit-space-800); --flex-spacing-tablet: var(--spirit-space-1000); --flex-spacing-desktop: var(--spirit-space-1200)"
+      style="--flex-spacing: var(--spirit-space-1000); --flex-spacing-tablet: var(--spirit-space-1200); --flex-spacing-desktop: var(--spirit-space-1600)"
     >
       <div class="docs-Box docs-Box--small">Item 1</div>
       <div class="docs-Box docs-Box--small">Item 2</div>

diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -12,7 +12,7 @@
 // @forward 'Dropdown';
 // @forward 'FieldGroup';
 // @forward 'FileUploader';
-// @forward 'Flex';
+@forward 'Flex';
 @forward 'Grid';
 
 // @forward 'Header';

diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
@@ -15,7 +15,6 @@ const IGNORED_TESTS: string[] = [
   'Dropdown',
   'FieldGroup',
   'FileUploader',
-  'Flex',
   'Header',
   'Heading',
   'Icon',