chore(styles): clean up button variables (#4702)

swisspost · Mar 4, 2025 · bb0296e · bb0296e
1 parent 02dffbf
commit bb0296e
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 62 deletions.
diff --git a/.changeset/three-elephants-sleep.md b/.changeset/three-elephants-sleep.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Cleaned up \_button.scss by moving button-specific variables to button.scss. Redefined cross-referenced variables in respective component files. Removed unused variables.
diff --git a/...s/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss b/...s/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss
@@ -5,7 +5,6 @@
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/functions';
 @use '@swisspost/design-system-styles/mixins/utilities';
-@use '@swisspost/design-system-styles/variables/components/button' as button-var;
 @use '../../utils/utils.scss';
 @use '../../utils/mixins.scss';
 
@@ -22,7 +21,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  min-height: button-var.$btn-height-md; // Avoid visual shift when buttons are hidden.
+  min-height: 3rem; // Avoid visual shift when buttons are hidden.
 
   @include mixins.max(rg) {
     font-size: functions.px-to-rem(14px);

diff --git a/packages/styles/src/components/timepicker.scss b/packages/styles/src/components/timepicker.scss
@@ -8,7 +8,7 @@
 @use './../variables/type';
 @use './../variables/color';
 @use './../variables/components/forms';
-@use './../variables/components/button';
+@use './../variables/components/timepicker';
 
 // Basic timepicker overrides
 .ngb-tp {
@@ -36,8 +36,8 @@
   .ngb-tp-chevron {
     &::before {
       @include icon-mixins.icon('2051');
-      width: map.get(button.$old-btn-icon-size-map, 'md');
-      height: map.get(button.$old-btn-icon-size-map, 'md');
+      width: map.get(timepicker.$timepicker-icon-size-map, 'md');
+      height: map.get(timepicker.$timepicker-icon-size-map, 'md');
       transform: none;
     }
 
@@ -48,8 +48,8 @@
 
   @each $size in sm, lg {
     .btn-#{$size} .ngb-tp-chevron::before {
-      width: map.get(button.$old-btn-icon-size-map, $size);
-      height: map.get(button.$old-btn-icon-size-map, $size);
+      width: map.get(timepicker.$timepicker-icon-size-map, $size);
+      height: map.get(timepicker.$timepicker-icon-size-map, $size);
     }
   }
 
@@ -67,8 +67,8 @@
 .timepicker-rg {
   .btn {
     .ngb-tp-chevron::before {
-      width: map.get(button.$old-btn-icon-size-map, 'rg');
-      height: map.get(button.$old-btn-icon-size-map, 'rg');
+      width: map.get(timepicker.$timepicker-icon-size-map, 'rg');
+      height: map.get(timepicker.$timepicker-icon-size-map, 'rg');
     }
   }
 

diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
@@ -29,8 +29,7 @@ $btn-height-map: (
   'lg': tokens.get('button-large-height'),
 );
 
-$input-btn-border-width: commons.$border-thick !default;
-$btn-border-width: $input-btn-border-width !default;
+$btn-border-width: commons.$border-thick !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius: tokens.get('button-border-radius-round') !default;
@@ -57,41 +56,3 @@ $btn-icon-size-map: (
   'md': tokens.get('button-medium-icon'),
   'lg': tokens.get('button-large-icon'),
 );
-
-// Old variables / Used elsewhere than on the v2 button component
-$input-btn-border-width-rem: sizing.px-to-rem($input-btn-border-width);
-
-$input-btn-padding-y: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors
-$input-btn-padding-x: sizing.px-to-rem(20) - $input-btn-border-width-rem !default; // px value to avoid build errors
-$input-btn-line-height: type.$line-height-copy !default;
-
-$input-btn-padding-y-sm: 4px !default; // px value to avoid build errors
-$input-btn-padding-x-sm: 16px !default; // px value to avoid build errors
-
-$input-btn-padding-y-rg: sizing.px-to-rem(12) - $input-btn-border-width-rem !default; // px value to avoid build errors
-$input-btn-padding-x-rg: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors
-
-$input-btn-padding-y-lg: 12px !default; // px value to avoid build errors
-$input-btn-padding-x-lg: 16px !default; // px value to avoid build errors
-
-$input-btn-focus-width: 0.125rem !default; // 2px
-$input-btn-focus-color: rgba(color.$gray-80, 0.25) !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
-
-$btn-height-sm: 2rem;
-$btn-icon-size-sm: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
-$btn-font-size-rg: type.$font-size-14 !default;
-$btn-icon-size-rg: 1.125rem !default;
-$btn-height-md: 3rem;
-$btn-icon-size-md: 1.25rem !default;
-$btn-icon-size-lg: 1.375rem !default;
-$old-btn-icon-size-map: (
-  'sm': $btn-icon-size-sm,
-  'rg': $btn-icon-size-rg,
-  'md': $btn-icon-size-md,
-  'lg': $btn-icon-size-lg,
-);
-
-$btn-focus-width: $input-btn-focus-width !default;
-$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity: 0.4 !default;
diff --git a/packages/styles/src/variables/components/_chip.scss b/packages/styles/src/variables/components/_chip.scss
@@ -33,7 +33,7 @@ $chip-transition:
   background-color animation.$transition-base-timing,
   border-color animation.$transition-base-timing;
 
-$chip-height-sm: button.$btn-height-sm;
+$chip-height-sm: 2rem;
 $chip-gap-sm: sizing.px-to-rem(6px);
 $chip-font-size-sm: type.$font-size-14;
 $chip-padding-x-sm: tokens.get('utility-gap-12');

diff --git a/packages/styles/src/variables/components/_datatable.scss b/packages/styles/src/variables/components/_datatable.scss
@@ -28,7 +28,7 @@ $datatable-flush-border-color: color.$gray-10;
 $datatable-flush-border: $datatable-flush-border-width solid $datatable-flush-border-color;
 
 $datatable-footer-padding-x: tokens.get('utility-gap-16');
-$datatable-footer-padding-y: button.$input-btn-focus-width;
+$datatable-footer-padding-y: 0.125rem !default; // 2px;
 $datatable-footer-padding: $datatable-footer-padding-y $datatable-footer-padding-x;
 
 $datatable-footer-separator-width: tokens.get('utility-gap-2');
@@ -37,10 +37,12 @@ $datatable-footer-separator: $datatable-flush-border-width solid $datatable-flus
 
 $datatable-row-count-input-width: 7rem;
 
-$datatable-button-margin: button.$btn-focus-width;
+$datatable-button-margin: 0.125rem !default;
 $datatable-button-width: calc(100% - 2 * #{$datatable-button-margin});
 $datatable-button-height: $datatable-button-width;
-$datatable-button-focus-shadow: button.$btn-focus-box-shadow;
+
+$datatable-button-focus-color: rgba(color.$gray-80, 0.25) !default;
+$datatable-button-focus-shadow: 0 0 0 0.125rem $datatable-button-focus-color !default;
 
 $datatable-progressbar-height: tokens.get('utility-gap-4');
 $datatable-progressbar-backgroundcolor: color.$gray-10;

diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
@@ -5,6 +5,7 @@
 @use './button';
 @use './../color';
 @use './../type';
+@use './../commons';
 @use './../spacing';
 @use './../../functions/sizing';
 
@@ -14,27 +15,43 @@
 // Forms
 
 // Used elsewhere than text input, textarea or select
+$form-border-width: commons.$border-thick !default;
+$form-border-width-rem: sizing.px-to-rem($form-border-width);
 
-$input-padding-y: button.$input-btn-padding-y !default;
-$input-padding-x: button.$input-btn-padding-x !default;
+$form-padding-y: sizing.px-to-rem(16) - $form-border-width-rem !default; // px value to avoid build errors
+$form-padding-x: sizing.px-to-rem(20) - $form-border-width-rem !default; // px value to avoid build errors
+$form-line-height: type.$line-height-copy !default;
+
+$form-padding-y-sm: 4px !default; // px value to avoid build errors
+$form-padding-x-sm: 16px !default; // px value to avoid build errors
+
+$form-padding-y-rg: sizing.px-to-rem(12) - $form-border-width-rem !default; // px value to avoid build errors
+$form-padding-x-rg: sizing.px-to-rem(16) - $form-border-width-rem !default; // px value to avoid build errors
+
+$form-padding-y-lg: 12px !default; // px value to avoid build errors
+$form-padding-x-lg: 16px !default; // px value to avoid build errors
+
+$input-padding-y: $form-padding-y !default;
+$input-padding-x: $form-padding-x !default;
 $input-line-height: type.$line-height-copy !default;
 
-$input-padding-y-sm: sizing.px-to-rem(button.$input-btn-padding-y-sm) !default;
+$input-padding-y-sm: sizing.px-to-rem($form-padding-y-sm) !default;
 $input-line-height-sm: type.$line-height-copy !default;
 
-$input-padding-y-rg: button.$input-btn-padding-y-rg !default;
-$input-padding-x-rg: button.$input-btn-padding-x-rg !default;
+$input-padding-y-rg: $form-padding-y-rg !default;
+$input-padding-x-rg: $form-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default;
+$input-padding-y-lg: sizing.px-to-rem($form-padding-y-lg) !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
 $input-disabled-border-color: color.$gray-40; // Design System only
 
 $input-border-color: color.$gray-80 !default;
-$input-border-width: button.$input-btn-border-width !default;
+$input-border-width: $form-border-width !default;
 
-$input-focus-width: button.$input-btn-focus-width !default;
+$form-focus-width: 0.125rem !default; // 2px
+$input-focus-width: $form-focus-width !default;
 $input-focus-box-shadow: none !default;
 $input-focus-outline-thickness: tokens.get('utility-gap-2', utilities.$post-spacing);
 

diff --git a/packages/styles/src/variables/components/_pagination.scss b/packages/styles/src/variables/components/_pagination.scss
@@ -23,7 +23,8 @@ $pagination-bg: color.$white !default;
 $pagination-border-width: 2px !default;
 $pagination-border-color: color.$gray-10 !default;
 
-$pagination-focus-box-shadow: button.$input-btn-focus-box-shadow !default;
+$pagination-focus-color: rgba(color.$gray-80, 0.25) !default;
+$pagination-focus-box-shadow: 0 0 0 0.125rem $pagination-focus-color !default;
 $pagination-focus-outline: 0 !default;
 
 $pagination-hover-color: color.$black !default;

diff --git a/packages/styles/src/variables/components/_timepicker.scss b/packages/styles/src/variables/components/_timepicker.scss
@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+$timepicker-icon-size-sm: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
+$timepicker-icon-size-rg: 1.125rem !default;
+$timepicker-icon-size-md: tokens.get('utility-gap-24', utilities.$post-spacing) !default;
+$timepicker-icon-size-lg: 1.375rem !default;
+
+$timepicker-icon-size-map: (
+  'sm': $timepicker-icon-size-sm,
+  'rg': $timepicker-icon-size-rg,
+  'md': $timepicker-icon-size-md,
+  'lg': $timepicker-icon-size-lg,
+);