@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/variables/_index.scss

@@ -9,7 +9,7 @@
 @forward 'elevation';
 @forward 'grid';
 @forward 'icons';
-@forward 'options';
 @forward 'spacing';
+@forward 'sizing';
 @forward 'type';
 @forward 'components';

package/variables/_sizing.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+// Sizing
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$post-percentage-sizes: () !default;
+$post-percentage-sizes: map.merge(
+  (
+    'quarter': 25%,
+    'third': 33%,
+    'half': 50%,
+    'two-thirds': 66%,
+    'three-quarters': 75%,
+    'full': 100%,
+  ),
+  $post-percentage-sizes
+);

package/variables/_spacing.scss

@@ -16,158 +16,6 @@ $spacers: (
   5: $spacer * 3,
 ) !default;
 
-// Post-Sizes
-$size-hair: 1px !default;
-$size-line: 2px !default;
-$size-micro: 0.25rem !default; //   ~4px
-$size-mini: 0.5rem !default; //   ~8px
-$size-small-regular: 0.75rem !default; //  ~12px
-$size-regular: 1rem !default; //  ~16px
-$size-small-large: 1.25rem !default; //  ~20px
-$size-large: 1.5rem !default; //  ~24px
-$size-big: 2rem !default; //  ~32px
-$size-bigger-big: 2.5rem !default; //  ~40px
-$size-small-huge: 3rem !default; //  ~48px
-$size-huge: 3.5rem !default; //  ~56px
-$size-small-giant: 4.5rem !default; //  ~72px
-$size-giant: 5rem !default; //  ~80px
-$size-bigger-giant: 7rem !default; // ~112px
-
-$post-sizes: () !default;
-$post-sizes: map.merge(
-  (
-    'hair': $size-hair,
-    'line': $size-line,
-    'micro': $size-micro,
-    'mini': $size-mini,
-    'small-regular': $size-small-regular,
-    'regular': $size-regular,
-    'small-large': $size-small-large,
-    'large': $size-large,
-    'big': $size-big,
-    'bigger-big': $size-bigger-big,
-    'small-huge': $size-small-huge,
-    'huge': $size-huge,
-    'small-giant': $size-small-giant,
-    'giant': $size-giant,
-    'bigger-giant': $size-bigger-giant,
-  ),
-  $post-sizes
-);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map.merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto,
-  ),
-  $sizes
-);
-
-// Abstand Gross, Section
-$size-curve-giant: (
-  'xs': $size-huge,
-  'sm': $size-huge,
-  'rg': $size-huge,
-  'md': $size-giant,
-  'lg': $size-giant,
-  'xl': $size-giant,
-  'xxl': $size-giant,
-) !default;
-
-// Abstand standard
-$size-curve-huge: (
-  'xs': $size-big,
-  'sm': $size-big,
-  'rg': $size-big,
-  'md': $size-bigger-big,
-  'lg': $size-bigger-big,
-  'xl': $size-huge,
-  'xxl': $size-huge,
-) !default;
-
-// Abstand Section halb
-$size-curve-bigger-big: (
-  'xs': $size-large,
-  'sm': $size-large,
-  'rg': $size-large,
-  'md': $size-small-huge,
-  'lg': $size-small-huge,
-  'xl': $size-small-huge,
-  'xxl': $size-small-huge,
-) !default;
-
-// Abstand Breadcrumb, Stepper
-$size-curve-big: (
-  'xs': $size-small-large,
-  'sm': $size-small-large,
-  'rg': $size-small-large,
-  'md': $size-big,
-  'lg': $size-big,
-  'xl': $size-bigger-big,
-  'xxl': $size-bigger-big,
-) !default;
-
-// H2
-$size-curve-large: (
-  'xs': $size-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-small-large,
-  'lg': $size-small-large,
-  'xl': $size-big,
-  'xxl': $size-big,
-) !default;
-
-// Button
-$size-curve-regular: (
-  'xs': $size-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-large,
-  'lg': $size-large,
-  'xl': $size-large,
-  'xxl': $size-large,
-) !default;
-
-// Teaser
-$size-curve-small: (
-  'xs': $size-small-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-regular,
-  'lg': $size-regular,
-  'xl': $size-regular,
-  'xxl': $size-regular,
-) !default;
-
-// Eingabefelder, p, h3, h4
-$size-curve-tiny: (
-  'xs': $size-small-regular,
-  'sm': $size-small-regular,
-  'rg': $size-small-regular,
-  'md': $size-regular,
-  'lg': $size-regular,
-  'xl': $size-regular,
-  'xxl': $size-regular,
-) !default;
-
-// List of all adaptive size curves
-$size-curves: (
-  'giant': $size-curve-giant,
-  'huge': $size-curve-huge,
-  'bigger-big': $size-curve-bigger-big,
-  'big': $size-curve-big,
-  'large': $size-curve-large,
-  'regular': $size-curve-regular,
-  'small': $size-curve-small,
-  'tiny': $size-curve-tiny,
-) !default;
-
 $responsive-spacing-properties: (
   'm': 'margin',
   'mt': 'margin-top',

package/variables/_type.scss

@@ -6,12 +6,18 @@
 @use './components/paragraph';
 @use './../functions/sizing';
 
+@use './../functions/tokens';
+@use './../tokens/utilities';
+@use './../tokens/elements' as element-tokens;
+
+tokens.$default-map: utilities.$post-typo;
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
 $font-family-sans-serif:
-  'Frutiger Neue For Post',
+  tokens.get('body-font-family', element-tokens.$post-body),
   -apple-system,
   BlinkMacSystemFont,
   'Segoe UI',
@@ -21,7 +27,6 @@ $font-family-sans-serif:
   sans-serif !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
   monospace !default;
-$font-family-base: $font-family-sans-serif !default;
 
 // Deprecated
 $font-size-tiny: sizing.px-to-rem(13px);
@@ -49,13 +54,12 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
-$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 
-$font-weight-light: 300 !default; // Design System -> Frutiger Neue Light
-$font-weight-normal: 400 !default; // Design System -> Frutiger Neue Roman
-$font-weight-bold: 700 !default; // Design System -> Frutiger Neue Bold
+$font-weight-normal: tokens.get('utility-font-weight-regular') !default;
+$font-weight-bold: tokens.get('utility-font-weight-bold') !default;
+$font-weight-black: tokens.get('utility-font-weight-black') !default;
 
 // Deprecated
 $font-sizes: (
@@ -94,7 +98,6 @@ $font-curve-tiny: (
   'md': $font-size-small,
   'lg': $font-size-regular,
   'xl': $font-size-regular,
-  'xxl': $font-size-bigger-regular,
 );
 $font-curve-small: (
   'xs': $font-size-small,
@@ -103,7 +106,6 @@ $font-curve-small: (
   'md': $font-size-regular,
   'lg': $font-size-bigger-regular,
   'xl': $font-size-bigger-regular,
-  'xxl': $font-size-bigger-regular,
 );
 $font-curve-regular: (
   'xs': $font-size-bigger-regular,
@@ -112,7 +114,6 @@ $font-curve-regular: (
   'md': $font-size-bigger-regular,
   'lg': $font-size-medium,
   'xl': $font-size-medium,
-  'xxl': $font-size-medium,
 );
 $font-curve-bigger-regular: (
   'xs': $font-size-bigger-regular,
@@ -121,7 +122,6 @@ $font-curve-bigger-regular: (
   'md': $font-size-medium,
   'lg': $font-size-large,
   'xl': $font-size-large,
-  'xxl': $font-size-large,
 );
 $font-curve-medium: (
   'xs': $font-size-medium,
@@ -130,7 +130,6 @@ $font-curve-medium: (
   'md': $font-size-medium,
   'lg': $font-size-large,
   'xl': $font-size-large,
-  'xxl': $font-size-small-big,
 );
 $font-curve-large: (
   'xs': $font-size-large,
@@ -139,7 +138,6 @@ $font-curve-large: (
   'md': $font-size-small-big,
   'lg': $font-size-big,
   'xl': $font-size-big,
-  'xxl': $font-size-bigger-big,
 );
 $font-curve-big: (
   'xs': $font-size-small-big,
@@ -148,7 +146,6 @@ $font-curve-big: (
   'md': $font-size-big,
   'lg': $font-size-bigger-big,
   'xl': $font-size-bigger-big,
-  'xxl': $font-size-small-huge,
 );
 
 // Deprecated
@@ -165,8 +162,9 @@ $font-curves: (
 $font-size-base: $font-size-regular !default;
 $font-weight-base: $font-weight-normal !default;
 $line-height-base: $line-height-copy;
-$line-height-sm: $line-height-heading;
-$line-height-lg: $line-height-copy;
+$line-height-1: tokens.get('utility-line-height-1');
+$line-height-sm: tokens.get('utility-line-height-sm');
+$line-height-lg: tokens.get('utility-line-height-lg');
 
 $headings-margin-bottom: (spacing.$spacer * 0.5) !default;
 $headings-font-family: inherit !default;
@@ -174,24 +172,16 @@ $headings-font-weight: 700 !default;
 $headings-line-height: $line-height-heading;
 $headings-color: inherit !default;
 
-// Deprecated because unused
-$display1-weight: 300 !default;
-$display2-weight: 300 !default;
-$display3-weight: 300 !default;
-$display4-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
-
 $small-font-size: 80% !default;
 
 $text-muted: color.$gray-60;
 
 $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
-$blockquote-border-left-width-md: spacing.$size-micro !default;
-$blockquote-padding-left: spacing.$size-small-regular !default;
-$blockquote-padding-left-xxl: spacing.$size-big !default;
-$blockquote-margin-top: spacing.$size-large !default;
-$blockquote-margin-y: spacing.$size-regular !default;
+$blockquote-border-left-width-md: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
+$blockquote-padding-left: tokens.get('utility-gap-12', utilities.$post-spacing) !default;
+$blockquote-margin-top: tokens.get('utility-gap-24', utilities.$post-spacing) !default;
+$blockquote-margin-y: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;
 

package/variables/components/_accordion.scss

@@ -8,53 +8,6 @@
 
 @use './button';
 
-$accordion-padding: spacing.$spacer !default;
-$accordion-gap: spacing.$size-mini !default;
-$accordion-border-width: commons.$border-thick !default;
-$accordion-border-color: color.$gray-60 !default;
-
-$accordion-header-color: color.$gray-80 !default;
-$accordion-header-font-size: type.$font-size-16 !default;
-$accordion-header-font-weight: type.$font-weight-bold !default;
-$accordion-header-line-height: type.$line-height-copy !default;
-
 $accordion-button-transition: button.$btn-transition !default;
-$accordion-button-padding: $accordion-padding !default;
-$accordion-button-gap: $accordion-gap !default;
-$accordion-button-disabled-opacity: button.$btn-disabled-opacity !default;
-$accordion-button-focus-box-shadow: button.$btn-focus-box-shadow !default;
-$accordion-button-hover-color: color.$black !default;
-$accordion-button-hover-bg: color.$gray-10 !default;
-
-$accordion-icon-name: 2112 !default;
-$accordion-icon-size: spacing.$size-large !default;
 $accordion-icon-transition: transform animation.$transition-base-timing !default;
 $accordion-icon-transform: rotate(-180deg) !default;
-
-$accordion-body-padding: $accordion-gap $accordion-padding $accordion-padding !default;
-$accordion-body-font-weight: type.$font-weight-normal !default;
-
-// Deprecated
-$accordion-padding-x: spacing.$size-regular !default;
-$accordion-border-radius: 0 !default;
-$accordion-font-curve: 'regular';
-$accordion-body-padding-top: spacing.$size-small-regular !default;
-$accordion-body-padding-bottom: spacing.$size-bigger-big !default;
-$accordion-body-heading-margin-top: spacing.$size-bigger-big;
-$accordion-body-heading-font-weight: type.$font-weight-bold;
-$accordion-button-padding-y: spacing.$size-regular !default;
-$accordion-button-color: color.$black !default;
-$accordion-button-active-bg: transparent !default;
-$accordion-button-active-color: color.$black !default;
-$accordion-button-hover-color: color.$black !default;
-$accordion-button-font-weight: type.$font-weight-bold !default;
-$accordion-button-line-height: type.$line-height-copy !default;
-$accordion-icon-width: spacing.$size-large !default;
-$accordion-button-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-color)}');
-$accordion-button-active-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-active-color)}');
-$accordion-hcm-icon: url('#{icons.get-colored-svg-url(2113, color.$white)}');
-$accordion-header-font-curve: 'regular' !default;
-$accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
-$accordion-heading-font-curve: $accordion-header-font-curve !default;
-$accordion-heading-font-weight: $accordion-header-font-weight !default;
-$accordion-button-cursor: pointer !default;

package/variables/components/_badge.scss

@@ -5,6 +5,10 @@
 
 @use './button';
 @use './../../functions/sizing';
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $badge-border-radius: 50rem;
 $badge-line-height: type.$line-height-copy;
@@ -12,12 +16,12 @@ $badge-color: color.$white;
 $badge-bg: color.$error;
 $badge-border: color.$white solid commons.$border-thick;
 
-$badge-height: spacing.$size-large;
-$badge-height-sm: spacing.$size-regular;
-$badge-height-empty: spacing.$size-mini;
+$badge-height: tokens.get('utility-gap-24');
+$badge-height-sm: tokens.get('utility-gap-16');
+$badge-height-empty: tokens.get('utility-gap-8');
 
-$badge-padding-x: spacing.$size-mini;
-$badge-padding-x-sm: spacing.$size-micro;
+$badge-padding-x: tokens.get('utility-gap-8');
+$badge-padding-x-sm: tokens.get('utility-gap-4');
 $badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
 
 $badge-font-size: type.$font-size-12;

package/variables/components/_button.scss

@@ -8,142 +8,90 @@
 
 @use './../../functions/sizing';
 
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+@use '../../functions/tokens';
+@use '../../tokens/components';
+@use '../../tokens/utilities';
+
+tokens.$default-map: components.$post-button;
+
+// Available button sizes except the default, which is md
+$btn-non-default-sizes: sm, lg !default;
+
+$btn-padding-x-map: (
+  'sm': tokens.get('button-small-padding-inline'),
+  'md': tokens.get('button-medium-padding-inline'),
+  'lg': tokens.get('button-large-padding-inline'),
+);
+
+$btn-height-map: (
+  'sm': tokens.get('button-small-height'),
+  'md': tokens.get('button-medium-height'),
+  'lg': tokens.get('button-large-height'),
+);
+
 $input-btn-border-width: commons.$border-thick !default;
+$btn-border-width: $input-btn-border-width !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: tokens.get('button-border-radius-round') !default;
+
+$btn-transition-duration: animation.$transition-time-default;
+$btn-transition: (
+  opacity $btn-transition-duration,
+  border-color $btn-transition-duration,
+  background-color $btn-transition-duration,
+  color $btn-transition-duration
+) !default;
+
+$btn-variants: primary, default, secondary, tertiary, link !default;
+
+// For sizes
+$btn-gap-x-map: (
+  'sm': tokens.get('button-small-gap-inline'),
+  'md': tokens.get('button-medium-gap-inline'),
+  'lg': tokens.get('button-large-gap-inline'),
+);
+
+$btn-icon-size-map: (
+  'sm': tokens.get('button-small-icon'),
+  '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: spacing.$size-regular - $input-btn-border-width-rem !default;
-$input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default;
+$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: spacing.$size-micro !default;
-$input-btn-padding-x-sm: spacing.$size-regular !default;
-$input-btn-line-height-sm: 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: spacing.$size-small-regular - $input-btn-border-width-rem !default;
-$input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default;
-$input-btn-line-height-rg: type.$line-height-copy !default;
+$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: spacing.$size-small-regular !default;
-$input-btn-padding-x-lg: spacing.$size-regular !default;
-$input-btn-line-height-lg: type.$line-height-copy !default;
+$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;
 
-// Buttons
-$btn-animation-distance-factor: 0.5 !default;
-
-// sm
-$btn-padding-y-sm: spacing.$size-mini !default;
-$btn-padding-x-sm: sizing.px-to-rem(12) !default;
-$btn-gap-x-sm: sizing.px-to-rem(6) !default;
-$btn-animation-distance-sm: spacing.$size-mini !default;
-// Design System only
 $btn-height-sm: 2rem;
-$btn-font-size-sm: type.$font-size-12 !default;
-$btn-icon-size-sm: spacing.$size-regular !default;
-
-// rg
-$btn-padding-y-rg: spacing.$size-small-regular !default;
-$btn-padding-x-rg: sizing.px-to-rem(14) !default;
-$btn-gap-x-rg: sizing.px-to-rem(8) !default;
-$btn-animation-distance-rg: spacing.$size-mini !default;
-// Design System only
-$btn-height-rg: 2.5rem;
+$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;
-
-// md
-$btn-padding-y-md: spacing.$size-regular !default;
-$btn-padding-x-md: sizing.px-to-rem(16) !default;
-$btn-gap-x-md: sizing.px-to-rem(10) !default;
-$btn-animation-distance-md: spacing.$size-mini !default;
-// Design System only
 $btn-height-md: 3rem;
-$btn-font-size-md: type.$font-size-16 !default;
-$btn-icon-size-md: spacing.$size-small-large !default;
-
-// lg
-$btn-padding-y-lg: spacing.$size-small-large !default;
-$btn-padding-x-lg: sizing.px-to-rem(18) !default;
-$btn-gap-x-lg: sizing.px-to-rem(12) !default;
-$btn-animation-distance-lg: spacing.$size-mini !default;
-// Design System only
-$btn-height-lg: 3.5rem;
-$btn-font-size-lg: type.$font-size-18 !default;
+$btn-icon-size-md: 1.25rem !default;
 $btn-icon-size-lg: 1.375rem !default;
-
-// Available button sizes except the default, which is md
-$btn-non-default-sizes: sm, rg, lg !default;
-
-$btn-animation-distance-map: (
-  'sm': $btn-animation-distance-sm,
-  'rg': $btn-animation-distance-rg,
-  'md': $btn-animation-distance-md,
-  'lg': $btn-animation-distance-lg,
-);
-$btn-padding-y-map: (
-  'sm': $btn-padding-y-sm,
-  'rg': $btn-padding-y-rg,
-  'md': $btn-padding-y-md,
-  'lg': $btn-padding-y-lg,
-);
-$btn-padding-x-map: (
-  'sm': $btn-padding-x-sm,
-  'rg': $btn-padding-x-rg,
-  'md': $btn-padding-x-md,
-  'lg': $btn-padding-x-lg,
-);
-$btn-gap-x-map: (
-  'sm': $btn-gap-x-sm,
-  'rg': $btn-gap-x-rg,
-  'md': $btn-gap-x-md,
-  'lg': $btn-gap-x-lg,
-);
-$btn-height-map: (
-  'sm': $btn-height-sm,
-  'rg': $btn-height-rg,
-  'md': $btn-height-md,
-  'lg': $btn-height-lg,
-);
-$btn-font-size-map: (
-  'sm': $btn-font-size-sm,
-  'rg': $btn-font-size-rg,
-  'md': $btn-font-size-md,
-  'lg': $btn-font-size-lg,
-);
-$btn-icon-size-map: (
+$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-border-width: $input-btn-border-width !default;
-
-$btn-font-weight: type.$font-weight-normal !default;
-$btn-box-shadow: none !default;
 $btn-focus-width: $input-btn-focus-width !default;
 $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity: 0.4 !default;
-$btn-disabled-background: rgba(color.$black, 0.4) !default;
-$btn-active-box-shadow: none !default;
-
-$btn-link-disabled-color: color.$gray-20 !default;
-
-$btn-block-spacing-y: 0.5rem !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius: commons.$border-radius !default;
-
-$btn-transition-duration: animation.$transition-time-default;
-$btn-transition: (
-  opacity $btn-transition-duration,
-  border-color $btn-transition-duration,
-  background-color $btn-transition-duration,
-  color $btn-transition-duration
-) !default;

package/variables/components/_card.scss

@@ -4,6 +4,10 @@
 @use './../type';
 @use './../spacing';
 @use './../../functions/sizing';
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Cards
 $card-font-size: type.$font-size-small !default; // Design System only
@@ -14,8 +18,9 @@ $card-margin-top: sizing.calculate-single-box-shadow-size(
   commons.$box-shadow
 ) !default; // ensures the shadow is visible
 
-$card-spacer-y: spacing.$size-small-large !default; // Design System 20px
-$card-spacer-x: spacing.$size-regular !default; // Design System 16px
+$card-spacer-y: 20px !default; // px value to avoid bootstrap build errors
+$card-spacer-x: tokens.get('utility-gap-16') !default;
+
 $card-border-width: commons.$border-width !default;
 $card-border-radius: commons.$border-width * 2 !default; // Design System
 $card-border-color: color.$gray-20 !default; // Design System
@@ -27,5 +32,3 @@ $card-bg: color.$white !default;
 $card-color: color.$black !default;
 
 $card-img-overlay-padding: $card-spacer-x !default;
-
-$card-group-margin: (grid.$grid-gutter-width * 0.5) !default;