Feat(web): Switch Item component to v3 design tokens #DS-1451

lmc-eu · Sep 17, 2024 · 7d9c721 · 7d9c721
1 parent 072a0e7
commit 7d9c721
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 11 deletions.
diff --git a/packages/web/src/scss/components/Item/_Item.scss b/packages/web/src/scss/components/Item/_Item.scss
@@ -31,7 +31,7 @@
 }
 
 .Item__label {
-    @include form-fields.inline-field-label();
+    @include form-fields.item-label();
 
     grid-column: 2;
 }
@@ -60,10 +60,6 @@
     margin-inline-start: theme.$gap;
 }
 
-.Item--selected .Item__label {
-    @include form-fields.item-label-checked();
-}
-
 .Item--disabled {
     @include form-fields.item-disabled();
 

diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss
@@ -1,5 +1,6 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$gap: tokens.$space-400;
-$icon-color-default: tokens.$action-selected-default;
-$icon-color-disabled: tokens.$action-selected-disabled;
+$gap: global-tokens.$space-500;
+$icon-color-default: var(--#{globals.$prefix}color-selected-content-basic);
+$icon-color-disabled: var(--#{globals.$prefix}color-disabled-content);
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -15,7 +15,7 @@
 @forward 'Grid';
 
 // @forward 'Header';
-// @forward 'Item';
+@forward 'Item';
 @forward 'Modal';
 @forward 'Pagination';
 @forward 'PartnerLogo';

diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss
@@ -232,6 +232,8 @@
 
 @mixin item-label() {
     @include typography.generate(form-fields-theme.$item-label-typography);
+
+    color: form-fields-theme.$label-color-default;
 }
 
 @mixin helper-text() {

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[] = [
   'Header',
   'Heading',
   'Icon',
-  'Item',
   'Link',
   'Spinner',
   'Stack',

diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png