From cbca08df269b90d71a0b7294e6f9c06c2cd575ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Tue, 27 Aug 2024 14:48:22 +0200
Subject: [PATCH] Feat(web): Switch Container, Divider, Stack, ActionLayout &
 EmptyState to v3 design tokens #DS-1444

---
 .../web/src/scss/components/Collapse/_theme.scss    |  4 ++--
 .../web/src/scss/components/Divider/_theme.scss     |  9 +++++----
 packages/web/src/scss/components/Stack/_theme.scss  |  9 +++++----
 .../components/UNSTABLE_ActionLayout/_theme.scss    |  6 +++---
 .../scss/components/UNSTABLE_EmptyState/_theme.scss | 10 +++++-----
 packages/web/src/scss/components/index.scss         | 13 ++++++++-----
 tests/e2e/demo-components-compare.spec.ts           |  1 -
 7 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/scss/components/Collapse/_theme.scss b/packages/web/src/scss/components/Collapse/_theme.scss
index 6c95cf50ce..c3d43aea16 100644
--- 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
index 1255a99ae4..acfeed32a1 100644
--- 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
index 11e9eac68a..ebd076669b 100644
--- 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
index 207541aafd..d2ad4bd3c6 100644
--- 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
index 7b259e65fc..3221892e9e 100644
--- 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
index 72a6188849..a25c9de2be 100644
--- 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
index d8c24744ee..08d15a7751 100644
--- 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',