Feat(web): Switch PartnerLogo component to v3 design tokens #DS-1450

lmc-eu · Aug 29, 2024 · cf92f94 · cf92f94
1 parent 687ade6
commit cf92f94
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 212 deletions.
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
@@ -1,21 +1,28 @@
 @use 'theme' as theme;
-@use 'tools';
+@use '../../settings/globals';
+@use '../../tools/dictionaries';
 
 .UNSTABLE_PartnerLogo {
     display: inline-block;
     max-width: 100%;
     height: fit-content;
+    padding: var(--#{globals.$prefix}partner-logo-padding);
     border-radius: theme.$border-radius;
     background: theme.$background-color;
 }
 
 .UNSTABLE_PartnerLogo > img,
 .UNSTABLE_PartnerLogo > svg {
     width: fit-content;
+    height: var(--#{globals.$prefix}partner-logo-image-height);
 }
 
-@include tools.generate-logo-sizes('UNSTABLE_PartnerLogo', theme.$sizes);
+@include dictionaries.generate-sizes(
+    $class-name: 'UNSTABLE_PartnerLogo',
+    $sizes: theme.$sizes,
+    $custom-variable-component-name: 'partner-logo'
+);
 
 .UNSTABLE_PartnerLogo--hasSafeAreaDisabled {
-    padding: 0;
+    --#{globals.$prefix}partner-logo-padding: 0;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
@@ -1,18 +1,19 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$background-color: tokens.$background-basic;
-$border-radius: tokens.$space-300;
+$background-color: var(--#{globals.$prefix}color-background-primary);
+$border-radius: global-tokens.$radius-200;
 $sizes: (
     small: (
-        height: tokens.$space-800,
-        padding: tokens.$space-400,
+        image-height: 32px,
+        padding: global-tokens.$space-500,
     ),
     medium: (
-        height: tokens.$space-1000,
-        padding: tokens.$space-400,
+        image-height: 48px,
+        padding: global-tokens.$space-500,
     ),
     large: (
-        height: 60px,
-        padding: tokens.$space-500,
+        image-height: 60px,
+        padding: global-tokens.$space-600,
     ),
 );
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -34,8 +34,8 @@
 
 // @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_PartnerLogo';
 
-// @forward 'UNSTABLE_PartnerLogo';
 // @forward 'UNSTABLE_ProductLogo';
 @forward 'UNSTABLE_Section';