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

package/variables/_color.scss

@@ -51,20 +51,6 @@ $success-background: #c0debb;
 $error-background: #ffdade;
 $warning-background: #fce2b2;
 
-// Accent colors
-$nightblue-dark: #004976;
-$nightblue-bright: #0076a8;
-$petrol-dark: #006d68;
-$petrol-bright: #00968f;
-$coral-dark: #9e2a2f;
-$coral-bright: #e03c31;
-$purple-dark: #80276c;
-$purple-bright: #c5299b;
-$olive-dark: #716135;
-$olive-bright: #aa9d2e;
-$aubergine-dark: #523178;
-$aubergine-bright: #7566a0;
-
 /**
  * Maps. Allow maps to have custom colors from the project
  * by always merging into a default empty map
@@ -127,25 +113,6 @@ $signal-background-colors: map.merge(
   )
 );
 
-$accent-colors: () !default;
-$accent-colors: map.merge(
-  $accent-colors,
-  (
-    'nightblue': $nightblue-dark,
-    'nightblue-bright': $nightblue-bright,
-    'petrol': $petrol-dark,
-    'petrol-bright': $petrol-bright,
-    'coral': $coral-dark,
-    'coral-bright': $coral-bright,
-    'olive': $olive-dark,
-    'olive-bright': $olive-bright,
-    'purple': $purple-dark,
-    'purple-bright': $purple-bright,
-    'aubergine': $aubergine-dark,
-    'aubergine-bright': $aubergine-bright,
-  )
-);
-
 // List of possible background colors with some synonyms for easier usage
 $background-colors: () !default;
 $background-colors: map.merge(
@@ -162,27 +129,9 @@ $background-colors: map.merge(
   )
 );
 
-$notification-colors: () !default;
-$notification-colors: list.join(
-  $notification-colors,
-  (
-    // When changed, check $notification-variants as well in packages/styles/src/variables/components/_notification.scss
-    'primary' $gray-80,
-    'success' $success,
-    'danger' $error,
-    'warning' $warning,
-    'info' $info,
-    'gray' $gray,
-    // deprecated
-    'notification' $gray-80,
-    'error' $error
-  )
-);
-
 // Merge with the other color maps
 $background-colors: map.merge($background-colors, $signal-colors);
 $background-colors: map.merge($background-colors, $signal-background-colors);
-$background-colors: map.merge($background-colors, $accent-colors);
 
 // Compile a list of light and dark backgrounds, used in the :is selector mixin at mixins/color
 $_backgrounds: (
@@ -196,16 +145,6 @@ $_backgrounds: (
   $_backgrounds: map.set($_backgrounds, $key, $values);
 }
 
-@each $color-name, $color in $notification-colors {
-  $key: contrast-fn.light-or-dark($color);
-  $values: list.join(
-    map.get($_backgrounds, $key),
-    '.alert-#{$color-name}' 'post-alert[type=#{$color-name}]',
-    $separator: comma
-  );
-  $_backgrounds: map.set($_backgrounds, $key, $values);
-}
-
 $backgrounds: list.join(
   map.get($_backgrounds, light),
   map.get($_backgrounds, dark),

package/variables/_commons.scss

@@ -38,6 +38,7 @@ $zindex-modal: 1055 !default;
 $zindex-popover: 1060 !default;
 $zindex-tooltip: 1070 !default;
 $zindex-alert: 1080 !default; // Design System only
+$zindex-header: 1090 !default;
 
 // Z-index
 

package/variables/_elevation.scss

@@ -1,31 +1,25 @@
 @use 'sass:map';
+@use './../tokens/utilities';
+@use './../functions/tokens';
 
-// Values are kept in PX for easier copy-ability from figma and better overview
-// rems would provide little value added
-$elevation-1:
-  0.25px 1px 1px rgba(0, 0, 0, 0.1),
-  1px 2px 2.5px 1px rgba(0, 0, 0, 0.1);
-$elevation-2:
-  0.25px 1.5px 2px rgba(0, 0, 0, 0.1),
-  2px 2px 5px 2px rgba(0, 0, 0, 0.11);
-$elevation-3:
-  0.5px 3px 4px rgba(0, 0, 0, 0.1),
-  2px 4px 10px 4px rgba(0, 0, 0, 0.12);
-$elevation-4:
-  0.75px 4.5px 6px rgba(0, 0, 0, 0.1),
-  2px 6px 15px 6px rgba(0, 0, 0, 0.13);
-$elevation-5:
-  1px 6px 8px rgba(0, 0, 0, 0.1),
-  2px 8px 20px 8px rgba(0, 0, 0, 0.14);
+tokens.$default-map: utilities.$post-elevation;
+
+$elevation-none: none;
+$elevation-100: tokens.get('utility-elevation-100');
+$elevation-200: tokens.get('utility-elevation-200');
+$elevation-300: tokens.get('utility-elevation-300');
+$elevation-400: tokens.get('utility-elevation-400');
+$elevation-500: tokens.get('utility-elevation-500');
 
 $elevation-map: () !default;
 $elevation-map: map.merge(
   $elevation-map,
   (
-    'elevation-1': $elevation-1,
-    'elevation-2': $elevation-2,
-    'elevation-3': $elevation-3,
-    'elevation-4': $elevation-4,
-    'elevation-5': $elevation-5,
+    'elevation-none': $elevation-none,
+    'elevation-100': $elevation-100,
+    'elevation-200': $elevation-200,
+    'elevation-300': $elevation-300,
+    'elevation-400': $elevation-400,
+    'elevation-500': $elevation-500,
   )
 );

package/variables/_grid.scss

@@ -1,35 +1,28 @@
 @use 'sass:map';
+@use './breakpoints';
 
-/* Deprecated: "rg" breakpoint */
 // list of breakpoint giving the possibility to loop over them
-$grid-breakpoints-list: xs sm rg md lg xl xxl;
+$grid-breakpoints-list: map.keys(breakpoints.$grid-breakpoints);
 
 // Grid containers
 $container-max-widths: (
   xl: 1280px,
-  xxl: 1440px,
 ) !default;
 
-/* Deprecated: "rg" breakpoint */
 $grid-container-padding: (
   xs: 12px,
   sm: 16px,
-  rg: 16px,
   md: 32px,
   lg: 32px,
   xl: 40px,
-  xxl: 120px,
 ) !default;
 
-/* Deprecated: "rg" breakpoint */
 $grid-container-fluid-padding: (
   xs: map.get($grid-container-padding, xs),
   sm: map.get($grid-container-padding, sm),
-  rg: map.get($grid-container-padding, rg),
   md: map.get($grid-container-padding, md),
   lg: map.get($grid-container-padding, lg),
   xl: map.get($grid-container-padding, lg),
-  xxl: map.get($grid-container-padding, lg),
 ) !default;
 
 // Grid columns
@@ -38,13 +31,10 @@ $grid-columns: 12 !default;
 /* Deprecated: $grid-gutter-width */
 $grid-gutter-width: 30px !default;
 
-/* Deprecated: "rg" breakpoint */
 $grid-gutter-x: (
   xs: 12px,
   sm: 16px,
-  rg: 16px,
   md: 16px,
   lg: 16px,
   xl: 16px,
-  xxl: 16px,
 ) !default;