feat: size vars (xs/s/m/l/xl → 32/48/56/64/72)

core-ds · Mar 4, 2021 · d7254d2 · d7254d2
1 parent d2bb796
commit d7254d2
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 27 deletions.
diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -97,57 +97,57 @@ a.loading {
 
 .xs {
     min-width: 80px;
-    min-height: 32px;
+    min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
     font-size: 14px;
     font-weight: 400;
 
     &.iconOnly {
-        min-width: 32px;
+        min-width: var(--size-xs-height);
     }
 }
 
 .s {
     min-width: 104px;
-    min-height: 48px;
+    min-height: var(--size-s-height);
     font-size: 16px;
 
     &.iconOnly {
-        min-width: 48px;
+        min-width: var(--size-s-height);
     }
 }
 
 .m {
     min-width: 128px;
-    min-height: 56px;
+    min-height: var(--size-m-height);
     font-size: 16px;
 
     &.iconOnly {
-        min-width: 56px;
+        min-width: var(--size-m-height);
     }
 }
 
 .l {
     min-width: 160px;
-    min-height: 64px;
+    min-height: var(--size-l-height);
     padding: 0 var(--gap-2xl);
     font-size: 18px;
     line-height: 24px;
 
     &.iconOnly {
-        min-width: 64px;
+        min-width: var(--size-l-height);
     }
 }
 
 .xl {
     min-width: 160px;
-    min-height: 72px;
+    min-height: var(--size-xl-height);
     padding: 0 var(--gap-2xl);
     font-size: 18px;
     line-height: 24px;
 
     &.iconOnly {
-        min-width: 72px;
+        min-width: var(--size-xl-height);
     }
 }
 

diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/index.module.css
@@ -1,10 +1,10 @@
 @import '../../themes/src/default.css';
 
 :root {
-    --form-control-s-min-height: 48px;
-    --form-control-m-min-height: 56px;
-    --form-control-l-min-height: 64px;
-    --form-control-xl-min-height: 72px;
+    --form-control-s-min-height: var(--size-s-height);
+    --form-control-m-min-height: var(--size-m-height);
+    --form-control-l-min-height: var(--size-l-height);
+    --form-control-xl-min-height: var(--size-xl-height);
     --form-control-border-radius: 4px 4px 0 0;
     --form-control-border-bottom: 1px solid var(--color-light-border-secondary-inverted);
     --form-control-bg-color: color-mod(var(--color-light-bg-primary-inverted) alpha(7%));

diff --git a/packages/select/src/components/option/index.module.css b/packages/select/src/components/option/index.module.css
@@ -38,19 +38,19 @@
 }
 
 .s {
-    min-height: 48px;
+    min-height: var(--size-s-height);
 }
 
 .m {
-    min-height: 56px;
+    min-height: var(--size-m-height);
 }
 
 .l {
-    min-height: 64px;
+    min-height: var(--size-l-height);
 }
 
 .xl {
-    min-height: 72px;
+    min-height: var(--size-xl-height);
 }
 
 .l,

diff --git a/packages/tabs/src/components/secondary-tablist/index.module.css b/packages/tabs/src/components/secondary-tablist/index.module.css
@@ -18,31 +18,31 @@
 /* sizes */
 
 .s {
-    height: 48px;
+    height: var(--size-s-height);
 
     & .title + .title {
         margin-left: var(--secondary-tablist-s-gaps);
     }
 }
 
 .m {
-    height: 56px;
+    height: var(--size-m-height);
 
     & .title + .title {
         margin-left: var(--secondary-tablist-m-gaps);
     }
 }
 
 .l {
-    height: 64px;
+    height: var(--size-l-height);
 
     & .title + .title {
         margin-left: var(--secondary-tablist-l-gaps);
     }
 }
 
 .xl {
-    height: 72px;
+    height: var(--size-xl-height);
 
     & .title + .title {
         margin-left: var(--secondary-tablist-xl-gaps);

diff --git a/packages/tag/src/index.module.css b/packages/tag/src/index.module.css
@@ -97,7 +97,7 @@
 
 .xs {
     min-width: 60px;
-    min-height: 32px;
+    min-height: var(--size-xs-height);
     padding: var(--gap-2xs) var(--gap-m);
     font-size: 14px;
     line-height: 20px;
@@ -112,7 +112,7 @@
 
 .s {
     min-width: 80px;
-    min-height: 48px;
+    min-height: var(--size-s-height);
     padding: var(--gap-2xs) var(--gap-m);
     font-size: 16px;
     line-height: 20px;
@@ -128,7 +128,7 @@
 .m {
     @mixin action_component;
     min-width: 96px;
-    min-height: 56px;
+    min-height: var(--size-m-height);
     padding: var(--gap-2xs) var(--gap-xl);
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -141,7 +141,7 @@
 .l {
     @mixin action_primary_large;
     min-width: 120px;
-    min-height: 64px;
+    min-height: var(--size-l-height);
     padding: var(--gap-2xs) var(--gap-2xl);
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -154,7 +154,7 @@
 .xl {
     @mixin action_primary_large;
     min-width: 120px;
-    min-height: 72px;
+    min-height: var(--size-xl-height);
     padding: var(--gap-2xs) var(--gap-2xl);
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

diff --git a/packages/themes/src/default.css b/packages/themes/src/default.css
@@ -15,4 +15,9 @@
         sans-serif;
     --disabled-cursor: not-allowed;
     --arrow-transform: rotate(180deg);
+    --size-xs-height: 32px;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
 }