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

package/variables/components/_chip.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use './button';
 @use './../animation';
 @use './../color';
@@ -6,6 +8,10 @@
 @use './../type';
 
 @use './../../functions/sizing';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $chip-color: color.$gray-80;
 $chip-bg: color.$white;
@@ -13,10 +19,10 @@ $chip-border-color: color.$gray-60;
 $chip-border-width: commons.$border-thick;
 $chip-border-radius: commons.$border-radius-pill;
 
-$chip-height: button.$btn-height-rg;
+$chip-height: map.get(button.$btn-height-map, 'md');
 $chip-max-width: 100%;
-$chip-padding-x: spacing.$size-regular;
-$chip-gap: spacing.$size-mini;
+$chip-padding-x: tokens.get('utility-gap-16');
+$chip-gap: tokens.get('utility-gap-8');
 
 $chip-font-size: type.$font-size-16;
 $chip-font-weight: type.$font-weight-normal;
@@ -30,7 +36,7 @@ $chip-transition:
 $chip-height-sm: button.$btn-height-sm;
 $chip-gap-sm: sizing.px-to-rem(6px);
 $chip-font-size-sm: type.$font-size-14;
-$chip-padding-x-sm: spacing.$size-small-regular;
+$chip-padding-x-sm: tokens.get('utility-gap-12');
 
 $chip-hover-color: color.$black;
 $chip-hover-bg: color.$gray-20;
@@ -51,7 +57,7 @@ $chip-close-button-icon: 2043;
 $chip-close-button-border-width: commons.$border-width;
 $chip-close-button-border-radius: commons.$border-radius-round;
 $chip-close-button-border: $chip-close-button-border-width solid $chip-border-color;
-$chip-close-button-height: spacing.$size-large;
-$chip-close-button-height-sm: spacing.$size-regular;
+$chip-close-button-height: tokens.get('utility-gap-24');
+$chip-close-button-height-sm: tokens.get('utility-gap-16');
 
-$chip-dismissable-padding-start: spacing.$size-mini;
+$chip-dismissable-padding-start: tokens.get('utility-gap-8');

package/variables/components/_close.scss

@@ -2,20 +2,26 @@
 @use './../color';
 @use './../spacing';
 @use './../../functions/icons';
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
-$close-size: spacing.$size-large !default;
+tokens.$default-map: utilities.$post-spacing;
+
+$close-size: tokens.get('utility-gap-24') !default;
 $close-border-radius: button.$btn-border-radius !default;
-$close-color: var(--post-gray-80) !default;
-$close-hover-color: var(--post-contrast-color) !default;
-$close-disabled-color: var(--post-gray-40) !default;
+$close-color: color.$black !default;
+$close-hover-color: color.$black !default;
+$close-disabled-color: color.$gray-40 !default;
 $close-transition: button.$btn-transition !default;
 
 // DEPRECATED
-$btn-close-width: spacing.$size-large !default;
+$btn-close-width: tokens.get('utility-gap-24') !default;
 $btn-close-height: $btn-close-width !default;
-$btn-close-padding-x: spacing.$size-regular !default;
+$btn-close-padding-x: tokens.get('utility-gap-16') !default;
 $btn-close-color: color.$black !default;
-$btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default;
-$btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default;
+$_btn-close-bg: icons.get-colored-svg-url(2043, $btn-close-color);
+$_btn-close-hcm-bg: icons.get-colored-svg-url(2043, color.$white);
+$btn-close-bg: url('#{$_btn-close-bg}') !default;
+$btn-close-hcm-bg: url('#{$_btn-close-hcm-bg}') !default;
 $btn-close-opacity: 0.5 !default;
 $btn-close-hover-opacity: 0.75 !default;

package/variables/components/_code.scss

@@ -3,7 +3,7 @@
 // Code
 
 $code-font-size: 1rem !default;
-$code-color: color.$purple-bright !default;
+$code-color: #004976 !default;
 
 $kbd-padding-y: 0.2rem !default;
 $kbd-padding-x: 0.4rem !default;

package/variables/components/_datatable.scss

@@ -7,37 +7,41 @@
 @use './../type';
 @use './button';
 @use './../../functions/icons';
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $datatable-header-font-weight: type.$font-weight-bold;
 $datatable-header-unsorted-color: color.$gray-60;
 
 $datatable-cell-bg: color.$light;
-$datatable-cell-padding-x: spacing.$size-regular;
-$datatable-cell-padding-y: spacing.$size-mini;
+$datatable-cell-padding-x: tokens.get('utility-gap-16');
+$datatable-cell-padding-y: tokens.get('utility-gap-8');
 $datatable-cell-padding: $datatable-cell-padding-y $datatable-cell-padding-x;
-$datatable-cell-margin: spacing.$size-line;
+$datatable-cell-margin: tokens.get('utility-gap-2');
 
 $datatable-inverted-cell-bg: color.$white;
 
-$datatable-flush-border-width: spacing.$size-line;
+$datatable-flush-border-width: tokens.get('utility-gap-2');
 $datatable-flush-border-color: color.$gray-10;
 $datatable-flush-border: $datatable-flush-border-width solid $datatable-flush-border-color;
 
-$datatable-footer-padding-x: spacing.$size-regular;
+$datatable-footer-padding-x: tokens.get('utility-gap-16');
 $datatable-footer-padding-y: button.$input-btn-focus-width;
 $datatable-footer-padding: $datatable-footer-padding-y $datatable-footer-padding-x;
 
-$datatable-footer-separator-width: spacing.$size-line;
+$datatable-footer-separator-width: tokens.get('utility-gap-2');
 $datatable-footer-separator-color: color.$gray-10;
 $datatable-footer-separator: $datatable-flush-border-width solid $datatable-flush-border-color;
 
-$datatable-row-count-input-width: spacing.$size-bigger-giant;
+$datatable-row-count-input-width: 7rem;
 
 $datatable-button-margin: button.$btn-focus-width;
 $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-progressbar-height: spacing.$size-micro;
+$datatable-progressbar-height: tokens.get('utility-gap-4');
 $datatable-progressbar-backgroundcolor: color.$gray-10;
 $datatable-progressbar-activecolor: color.$yellow;

package/variables/components/_dropdowns.scss

@@ -12,7 +12,7 @@ $dropdown-bg: color.$white !default;
 $dropdown-border-color: rgba(color.$black, 0.15) !default;
 $dropdown-border-radius: commons.$border-radius !default;
 $dropdown-border-width: commons.$border-width !default;
-$dropdown-divider-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
+$dropdown-divider-bg: color.$white-alpha-60 !default;
 $dropdown-box-shadow: 0 0.5rem 1rem rgba(color.$black, 0.175) !default;
 
 $dropdown-link-color: color.$gray-60 !default;

package/variables/components/_form-check.scss

@@ -6,13 +6,17 @@
 @use './../../functions/icons';
 @use './../../functions/sizing';
 @use './../../functions/forms' as forms-fn;
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
-$form-check-row-gap: spacing.$size-small-regular !default;
-$form-check-column-gap: spacing.$size-mini !default;
-$form-check-margin-bottom: spacing.$size-regular !default;
-$form-check-inline-margin-right: spacing.$size-large !default;
+tokens.$default-map: utilities.$post-spacing;
+
+$form-check-row-gap: tokens.get('utility-gap-12') !default;
+$form-check-column-gap: tokens.get('utility-gap-8') !default;
+$form-check-margin-bottom: tokens.get('utility-gap-16') !default;
+$form-check-inline-margin-right: tokens.get('utility-gap-24') !default;
 $form-check-input-size: 1.375rem !default;
-$form-check-input-size-sm: spacing.$size-regular !default;
+$form-check-input-size-sm: tokens.get('utility-gap-16') !default;
 $form-check-input-border-width: forms.$input-border-width !default;
 $form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default;
 $form-check-input-disabled-svg-border-width: $form-check-input-border-width * 2;
@@ -88,44 +92,3 @@ $form-check-input-radio-disabled-background-url-hcm: forms-fn.get-background-svg
   initial,
   $form-check-input-disabled-svg-border-width
 );
-
-$form-switch-column-gap: spacing.$size-regular !default;
-$form-switch-height: spacing.$size-big !default;
-$form-switch-width: 2 * spacing.$size-big !default;
-$form-switch-bg: rgba(var(--post-contrast-color-rgb), 0.3) !default;
-$form-switch-checked-bg: var(--post-success) !default;
-$form-switch-disabled-bg: color.$gray-20 !default;
-$form-switch-background-image: linear-gradient(
-  to right,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-) !default;
-$form-switch-color: color.$white !default;
-$form-switch-border-color: color.$gray-60 !default;
-$form-switch-checked-border-color: color.$black !default;
-$form-switch-disabled-border-color: color.$gray-40 !default;
-$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default;
-
-// DEPRECATED
-
-$form-switch-padding-start: 0 !default;
-$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-border-color}' stroke-width='2' fill='#{$form-switch-color}'/></svg>") !default;
-$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition:
-  background-position animation.$transition-base-timing,
-  background-color animation.$transition-time-default !default;
-$form-switch-checked-color: color.$white !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-checked-border-color}' stroke-width='2' fill='#{$form-switch-checked-color}'/></svg>") !default;
-$form-switch-focus-bg-image: $form-switch-checked-bg-image;
-$form-switch-checked-bg-image-size: $form-switch-height;
-$form-switch-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default;
-$form-switch-linear-gradient: linear-gradient(
-  to right,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-);
-$form-switch-linear-gradient-size: (2 * $form-switch-width - $form-switch-height)
-  $form-switch-height;
-$form-switch-label-padding-x: spacing.$size-regular !default;
-$form-switch-label-padding-start: $form-switch-label-padding-top 0 0 $form-switch-label-padding-x !default;
-$form-switch-label-padding-end: $form-switch-label-padding-top $form-switch-label-padding-x 0 0 !default;

package/variables/components/_forms.scss

@@ -6,60 +6,37 @@
 @use './../color';
 @use './../type';
 @use './../spacing';
-@use './../animation';
-@use './../../functions/utilities';
 @use './../../functions/sizing';
 
-// Forms
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
-$form-bg-size: 32px !default;
-$form-bg-size-sm: 24px !default;
+// Forms
 
-$form-label-margin-bottom: spacing.$size-mini !default;
-$form-label-color: var(--post-contrast-color) !default;
-$form-label-font-size-sm: type.$font-size-14;
+// Used elsewhere than text input, textarea or select
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
 $input-line-height: type.$line-height-copy !default;
 
-$input-padding-y-sm: button.$input-btn-padding-y-sm !default;
-$input-padding-x-sm: button.$input-btn-padding-x-sm !default;
+$input-padding-y-sm: sizing.px-to-rem(button.$input-btn-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-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: button.$input-btn-padding-y-lg !default;
-$input-padding-x-lg: button.$input-btn-padding-x-lg !default;
+$input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
-$input-bg: color.$white !default;
-$input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
-$input-disabled-color: var(--post-gray-60); // Design System only
-$input-disabled-border-color: var(--post-gray-40); // Design System only
-$input-disabled-border-style: spacing.$size-line dashed;
+$input-disabled-border-color: color.$gray-40; // Design System only
 
-$input-color: color.$black !default;
 $input-border-color: color.$gray-80 !default;
 $input-border-width: button.$input-btn-border-width !default;
-$input-box-shadow: none !default;
-
-$input-border-radius: 0 !default;
-$input-border-radius-lg: 0 !default;
-$input-border-radius-rg: 0 !default;
-$input-border-radius-sm: 0 !default;
 
-$input-focus-bg: inherit !default;
-$input-focus-border-color: inherit !default;
-$input-focus-color: inherit !default;
 $input-focus-width: button.$input-btn-focus-width !default;
 $input-focus-box-shadow: none !default;
-$input-focus-outline-thickness: spacing.$size-line;
-
-$input-placeholder-color: color.$gray-60 !default;
-$input-plaintext-color: var(--post-contrast-color) !default;
+$input-focus-outline-thickness: tokens.get('utility-gap-2', utilities.$post-spacing);
 
 $input-height-border: $input-border-width * 2 !default;
 
@@ -71,12 +48,6 @@ $input-height-content-sm: type.$font-size-14 * 1 !default;
 $input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup
 $input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default;
 
-$form-floating-input-height-content-sm: type.$font-size-14 * 1 !default;
-$form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
-  (spacing.$size-regular * 2) - sizing.px-to-rem(2) !default; // - 2px approximation from Figma mockup
-$form-floating-input-height-sm: $form-floating-input-height-inner-sm +
-  sizing.px-to-rem($input-height-border) !default;
-
 $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
 $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
 $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
@@ -85,20 +56,6 @@ $input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing.
 $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default;
 $input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default;
 
-$input-transition:
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
-
-$form-text-color: var(--post-contrast-color);
-$form-text-font-size: type.$font-size-tiny;
-$form-text-margin-top: spacing.$size-micro !default;
-
-$form-group-margin-bottom: 1rem !default;
-
-$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
-$input-group-addon-border-color: $input-border-color !default;
-
 $form-range-track-height: 0.2rem !default;
 $form-range-track-bg: color.$gray-20 !default;
 $form-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba(color.$black, 0.1) !default;
@@ -118,54 +75,4 @@ $form-range-thumb-disabled-border-color: $input-disabled-border-color !default;
 $form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shadow-width * 2;
 $form-range-input-height-ie: 6rem !default;
 
-$form-file-button-hover-bg: $input-bg;
-
 $form-floating-height: $input-height-lg * $input-line-height-lg;
-$form-floating-padding-x: $input-padding-x-lg;
-$form-floating-padding-y: $input-padding-y-lg;
-$form-floating-line-height: type.$line-height-copy;
-$form-floating-input-padding-t: spacing.$size-large;
-$form-floating-input-padding-b: 0;
-$form-floating-label-opacity: 1;
-$form-floating-label-height: $form-floating-height;
-$form-floating-label-color: color.$gray-80;
-$form-floating-label-font-size: type.$font-size-16;
-$form-floating-label-font-size-small: type.$font-size-12;
-$form-floating-label-scale: math.div(
-  $form-floating-label-font-size-small,
-  $form-floating-label-font-size
-);
-$form-floating-label-upscale: math.div(1, $form-floating-label-scale);
-$form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floating-label-font-size *
-  type.$line-height-copy * 0.5;
-$form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
-$form-floating-label-transform: scale($form-floating-label-scale);
-$form-floating-transition: animation.$transition-base;
-$form-floating-transition-in:
-  $form-floating-transition,
-  width 0ms list.nth(animation.$transition-base, 2);
-$form-floating-transition-out:
-  $form-floating-transition,
-  width 0ms linear;
-$form-floating-select-bg-size: 32px 32px;
-
-$form-floating-label-font-size-sm: type.$font-size-12;
-$form-floating-label-font-size-placeholder-sm: type.$font-size-14;
-$form-floating-label-scale-sm: math.div(
-  $form-floating-label-font-size-sm,
-  $form-floating-label-font-size-placeholder-sm
-);
-$form-floating-label-upscale-sm: math.div(1, $form-floating-label-scale-sm);
-$form-floating-padding-x-sm: spacing.$size-regular;
-$form-floating-padding-y-sm: $input-padding-y-sm;
-$form-floating-label-translate-x-sm: $form-floating-padding-x-sm *
-  (1 - $form-floating-label-scale-sm);
-$form-floating-label-height-sm: $form-floating-input-height-sm;
-$form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
-  $form-floating-label-font-size-sm;
-
-$form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size *
-  $form-floating-line-height * $form-floating-label-scale; // The Space needed for the label on focus
-$form-floating-textarea-padding-t-sm: spacing.$size-mini +
-  $form-floating-label-font-size-placeholder-sm * $input-line-height-sm *
-  $form-floating-label-scale-sm;

package/variables/components/_index.scss

@@ -3,17 +3,12 @@
 @forward 'breadcrumbs';
 @forward 'button';
 @forward 'card';
-@forward 'carousel';
 @forward 'chip';
 @forward 'close';
 @forward 'datepicker';
 @forward 'dropdowns';
-@forward 'figures';
 @forward 'form-check';
-@forward 'form-validation';
-@forward 'form-select';
 @forward 'forms';
-@forward 'list-group';
 @forward 'modal';
 @forward 'nav';
 @forward 'navbar';

package/variables/components/_modal.scss

@@ -7,21 +7,26 @@
 
 @use './button';
 
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Modals
 
 // Padding applied to the modal footer
-$modal-inner-padding: spacing.$size-regular !default;
+$modal-inner-padding: tokens.get('utility-gap-16') !default;
 
 // Padding applied to the modal body
-$modal-body-padding-y: spacing.$size-mini !default;
-$modal-body-padding-x: spacing.$size-big !default;
+$modal-body-padding-y: tokens.get('utility-gap-8') !default;
+$modal-body-padding-x: tokens.get('utility-gap-32') !default;
 $modal-body-padding: $modal-body-padding-y $modal-body-padding-x !default;
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
 $modal-footer-margin-between: 0.5rem !default;
 
-$modal-dialog-margin: spacing.$size-small-regular !default;
-$modal-dialog-margin-y-sm-up: spacing.$size-big !default;
+$modal-dialog-margin: tokens.get('utility-gap-12') !default;
+$modal-dialog-margin-y-sm-up: tokens.get('utility-gap-32') !default;
 
 $modal-title-line-height: type.$line-height-copy !default;
 
@@ -43,7 +48,7 @@ $modal-header-border-color: commons.$border-color !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: $modal-content-border-width !default;
 $modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding-y: spacing.$size-large !default;
+$modal-header-padding-y: tokens.get('utility-gap-24') !default;
 $modal-header-padding-x: $modal-body-padding-x !default;
 $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
@@ -52,10 +57,10 @@ $modal-dialog-width-lg: 800px !default;
 $modal-dialog-width-md: 500px !default;
 $modal-dialog-width-sm: 300px !default;
 
-$modal-xl: sizing.px-to-rem($modal-dialog-width-xl) - 2 * $modal-dialog-margin !default;
-$modal-lg: sizing.px-to-rem($modal-dialog-width-lg) - 2 * $modal-dialog-margin !default;
-$modal-md: sizing.px-to-rem($modal-dialog-width-md) - 2 * $modal-dialog-margin !default;
-$modal-sm: sizing.px-to-rem($modal-dialog-width-sm) - 2 * $modal-dialog-margin !default;
+$modal-xl: calc(sizing.px-to-rem($modal-dialog-width-xl) - 2 * #{$modal-dialog-margin}) !default;
+$modal-lg: calc(sizing.px-to-rem($modal-dialog-width-lg) - 2 * #{$modal-dialog-margin}) !default;
+$modal-md: calc(sizing.px-to-rem($modal-dialog-width-md) - 2 * #{$modal-dialog-margin}) !default;
+$modal-sm: calc(sizing.px-to-rem($modal-dialog-width-sm) - 2 * #{$modal-dialog-margin}) !default;
 
 $modal-fade-transform: translate(0, -50px) !default;
 $modal-show-transform: none !default;
@@ -63,6 +68,6 @@ $modal-transition: transform 0.3s ease-out !default;
 $modal-scale-transform: scale(1.02) !default;
 
 // Padding applied to the close button
-$modal-btn-close-margin-y: spacing.$size-mini !default;
-$modal-btn-close-margin-x: spacing.$size-regular !default;
+$modal-btn-close-margin-y: tokens.get('utility-gap-8') !default;
+$modal-btn-close-margin-x: tokens.get('utility-gap-16') !default;
 $modal-btn-close-margin: $modal-btn-close-margin-y $modal-btn-close-margin-x !default;

package/variables/components/_nav.scss

@@ -41,9 +41,9 @@ $nav-tabs-focus-box-shadow:
   0 0 0 2px color.$gray-80 !default;
 $nav-tabs-focus-box-shadow-width: 2px !default;
 
-$nav-tabs-i-border-color: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
-$nav-tabs-i-link-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default;
-$nav-tabs-i-link-hover-border-color: rgba(var(--post-contrast-color-inverted-rgb), 0.8) !default;
+$nav-tabs-i-border-color: color.$white-alpha-40 !default;
+$nav-tabs-i-link-hover-bg: color.$black-alpha-10 !default;
+$nav-tabs-i-link-hover-border-color: color.$white-alpha-80 !default;
 $nav-tabs-i-link-text-color: color.$white !default;
 $nav-tabs-i-link-active-color: color.$white !default;
 

package/variables/components/_navbar.scss

@@ -3,13 +3,16 @@
 @use './../type';
 @use './../components/button';
 @use './../components/nav';
-@use './../../functions/utilities';
+@use './../../functions/utilities' as utilities-fx;
+
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
 // Bootstrap variables
 $navbar-padding-y: (spacing.$spacer * 0.5) !default;
 $navbar-padding-x: spacing.$spacer !default;
 
-$navbar-nav-link-padding-x: spacing.$size-small-huge !default;
+$navbar-nav-link-padding-x: tokens.get('utility-gap-48', utilities.$post-spacing) !default;
 
 $navbar-brand-font-size: type.$font-size-bigger-regular !default;
 $navbar-brand-height: $navbar-brand-font-size * type.$line-height-copy !default;
@@ -25,7 +28,7 @@ $navbar-dark-hover-color: rgba(color.$white, 0.75) !default;
 $navbar-dark-active-color: color.$white !default;
 $navbar-dark-disabled-color: rgba(color.$white, 0.25) !default;
 
-$navbar-dark-toggler-icon-bg: utilities.replace(
+$navbar-dark-toggler-icon-bg: utilities-fx.replace(
   url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
   '#',
   '%23'
@@ -36,7 +39,7 @@ $navbar-light-color: rgba(color.$black, 0.5) !default;
 $navbar-light-hover-color: rgba(color.$black, 0.7) !default;
 $navbar-light-active-color: rgba(color.$black, 0.9) !default;
 $navbar-light-disabled-color: rgba(color.$black, 0.3) !default;
-$navbar-light-toggler-icon-bg: utilities.replace(
+$navbar-light-toggler-icon-bg: utilities-fx.replace(
   url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
   '#',
   '%23'

package/variables/components/_notification.scss

@@ -4,23 +4,31 @@
 @use './../commons';
 @use './../spacing';
 @use './../type';
+@use '../../tokens/components';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
-$notification-margin-bottom: spacing.$spacer !default;
-$notification-box-shadow: 0 2px 4px 0 rgba(color.$black, 0.2) !default;
-$notification-border-radius: commons.$border-radius !default;
-$notification-gap: spacing.$size-small-large !default;
-$notification-body-gap: spacing.$size-micro !default;
+tokens.$default-map: components.$post-banner;
+
+$notification-body-gap: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
 $notification-font-weight: type.$font-weight-normal !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
-$notification-heading-font-weight: type.$headings-font-weight !default;
-$notification-buttons-gap: spacing.$size-mini !default;
+
+$notification-gap-map: () !default;
+$notification-gap-map: map.merge(
+  $notification-gap-map,
+  (
+    'banner': tokens.get('banner-gap'),
+    'toast': tokens.get('toast-spacing-gap-outer', components.$post-toast),
+  )
+);
 
 $notification-padding-x-map: () !default;
 $notification-padding-x-map: map.merge(
   $notification-padding-x-map,
   (
-    'alert': spacing.$size-small-large,
-    'toast': spacing.$size-regular,
+    'banner': tokens.get('banner-padding'),
+    'toast': tokens.get('toast-spacing-padding-inline', components.$post-toast),
   )
 );
 
@@ -28,8 +36,8 @@ $notification-padding-y-map: () !default;
 $notification-padding-y-map: map.merge(
   $notification-padding-y-map,
   (
-    'alert': spacing.$size-regular,
-    'toast': spacing.$size-small-regular,
+    'banner': tokens.get('banner-padding'),
+    'toast': tokens.get('toast-spacing-padding-block', components.$post-toast),
   )
 );
 
@@ -37,26 +45,28 @@ $notification-font-size-map: () !default;
 $notification-font-size-map: map.merge(
   $notification-font-size-map,
   (
-    'alert': type.$font-size-base,
+    'banner': type.$font-size-base,
     'toast': type.$font-size-tiny,
   )
 );
 
-$notification-heading-font-size-map: () !default;
-$notification-heading-font-size-map: map.merge(
-  $notification-heading-font-size-map,
+$notification-hr-margin-block-map: () !default;
+$notification-hr-margin-block-map: map.merge(
+  $notification-hr-margin-block-map,
   (
-    'alert': type.$font-size-bigger-regular,
-    'toast': type.$font-size-small,
+    'banner': tokens.get('utility-gap-8', utilities.$post-spacing)
+      tokens.get('utility-gap-12', utilities.$post-spacing),
+    'toast': tokens.get('utility-gap-4', utilities.$post-spacing)
+      tokens.get('utility-gap-12', utilities.$post-spacing),
   )
 );
 
-$notification-hr-margin-block-map: () !default;
-$notification-hr-margin-block-map: map.merge(
-  $notification-hr-margin-block-map,
+$notification-elevation-map: () !default;
+$notification-elevation-map: map.merge(
+  $notification-elevation-map,
   (
-    'alert': spacing.$size-mini spacing.$size-small-regular,
-    'toast': spacing.$size-micro spacing.$size-small-regular,
+    'banner': tokens.get('banner-elevation'),
+    'toast': tokens.get('toast-elevation', components.$post-toast),
   )
 );
 
@@ -64,27 +74,28 @@ $notification-icon-size-map: () !default;
 $notification-icon-size-map: map.merge(
   $notification-icon-size-map,
   (
-    'alert': spacing.$size-small-huge,
-    'toast': spacing.$size-big,
+    'banner': tokens.get('banner-icon-size'),
+    'toast': tokens.get('toast-sizing-icon', components.$post-toast),
   )
 );
 
+//TODO: Note that primary, and gray have been deleted (.banner by default is now neutral) and that danger is back to error
 $notification-variants: () !default;
 $notification-variants: list.join(
   $notification-variants,
   (
-    // When changed, check $notification-variants as well in packages/styles/src/variables/_color.scss
-    'primary' color.$primary 3134,
-    'success' color.$success 2105,
-    'warning' color.$warning 2104,
-    'danger' color.$error 2104,
-    'info' color.$info 2106,
-    'gray' color.$gray 2201,
-    // deprecated
-    'notification' color.$gray-80 3134,
-    'error' color.$error 2104
+    'neutral' tokens.get('banner-neutral-bg') 2201 tokens.get('banner-neutral-border-color')
+      tokens.get('banner-neutral-icon-color') tokens.get('post-banner-neutral-bg-scheme'),
+    'success' tokens.get('banner-success-bg') 2105 tokens.get('banner-success-border-color')
+      tokens.get('banner-success-icon-color') tokens.get('post-banner-success-bg-scheme'),
+    'warning' tokens.get('banner-warning-bg') 2104 tokens.get('banner-warning-border-color')
+      tokens.get('banner-warning-icon-color') tokens.get('post-banner-warning-bg-scheme'),
+    'error' tokens.get('banner-error-bg') 2104 tokens.get('banner-error-border-color')
+      tokens.get('banner-error-icon-color') tokens.get('post-banner-error-bg-scheme'),
+    'info' tokens.get('banner-info-bg') 2106 tokens.get('banner-info-border-color')
+      tokens.get('banner-info-icon-color') tokens.get('post-banner-info-bg-scheme'),
+    // duplicate
+    'danger' tokens.get('banner-error-bg') 2104 tokens.get('banner-error-border-color')
+      tokens.get('banner-error-icon-color') tokens.get('post-banner-error-bg-scheme')
   )
 );
-
-// deprecated
-$notification-buttons-margin-start: $notification-buttons-gap !default;