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

package/tokens/temp/_utilities.scss

@@ -1,111 +1,69 @@
-// Do not edit manually!
-// This file was generated on:
-// Mon, 14 Oct 2024 18:07:38 GMT by the @swisspost/design-system-tokens package build command
+
+// Do not edit manually
+// This file was generated by the swisspost/design-system-tokens package
+// Mon, 24 Feb 2025 16:19:02 GMT
 
 $post-spacing: (
   post-utility-margin-0: var(--post-core-dimension-0),
   post-utility-margin-1: var(--post-core-dimension-1),
   post-utility-margin-2: var(--post-core-dimension-2),
-  post-utility-margin-3: var(--post-core-dimension-3),
   post-utility-margin-4: var(--post-core-dimension-4),
-  post-utility-margin-5: var(--post-core-dimension-5),
   post-utility-margin-6: var(--post-core-dimension-6),
   post-utility-margin-8: var(--post-core-dimension-8),
-  post-utility-margin-10: var(--post-core-dimension-10),
-  post-utility-margin-11: var(--post-core-dimension-11),
   post-utility-margin-12: var(--post-core-dimension-12),
-  post-utility-margin-14: var(--post-core-dimension-14),
-  post-utility-margin-15: var(--post-core-dimension-15),
   post-utility-margin-16: var(--post-core-dimension-16),
-  post-utility-margin-18: var(--post-core-dimension-18),
-  post-utility-margin-19: var(--post-core-dimension-19),
-  post-utility-margin-20: var(--post-core-dimension-20),
-  post-utility-margin-22: var(--post-core-dimension-22),
   post-utility-margin-24: var(--post-core-dimension-24),
-  post-utility-margin-26: var(--post-core-dimension-26),
-  post-utility-margin-28: var(--post-core-dimension-28),
-  post-utility-margin-30: var(--post-core-dimension-30),
   post-utility-margin-32: var(--post-core-dimension-32),
-  post-utility-margin-34: var(--post-core-dimension-34),
-  post-utility-margin-36: var(--post-core-dimension-36),
   post-utility-margin-40: var(--post-core-dimension-40),
   post-utility-margin-48: var(--post-core-dimension-48),
   post-utility-margin-56: var(--post-core-dimension-56),
   post-utility-margin-64: var(--post-core-dimension-64),
-  post-utility-margin-78: var(--post-core-dimension-78),
+  post-utility-margin-72: var(--post-core-dimension-72),
   post-utility-margin-80: var(--post-core-dimension-80),
+  post-utility-margin-88: var(--post-core-dimension-88),
   post-utility-margin-96: var(--post-core-dimension-96),
-  post-utility-margin-100: var(--post-core-dimension-100),
-  post-utility-margin-112: var(--post-core-dimension-112),
-  post-utility-margin-auto: "auto",
+  post-utility-margin-104: var(--post-core-dimension-104),
+  post-utility-margin-auto: auto,
   post-utility-padding-0: var(--post-core-dimension-0),
   post-utility-padding-1: var(--post-core-dimension-1),
   post-utility-padding-2: var(--post-core-dimension-2),
-  post-utility-padding-3: var(--post-core-dimension-3),
   post-utility-padding-4: var(--post-core-dimension-4),
-  post-utility-padding-5: var(--post-core-dimension-5),
   post-utility-padding-6: var(--post-core-dimension-6),
   post-utility-padding-8: var(--post-core-dimension-8),
-  post-utility-padding-10: var(--post-core-dimension-10),
-  post-utility-padding-11: var(--post-core-dimension-11),
   post-utility-padding-12: var(--post-core-dimension-12),
-  post-utility-padding-14: var(--post-core-dimension-14),
-  post-utility-padding-15: var(--post-core-dimension-15),
   post-utility-padding-16: var(--post-core-dimension-16),
-  post-utility-padding-18: var(--post-core-dimension-18),
-  post-utility-padding-19: var(--post-core-dimension-19),
-  post-utility-padding-20: var(--post-core-dimension-20),
-  post-utility-padding-22: var(--post-core-dimension-22),
   post-utility-padding-24: var(--post-core-dimension-24),
-  post-utility-padding-26: var(--post-core-dimension-26),
-  post-utility-padding-28: var(--post-core-dimension-28),
-  post-utility-padding-30: var(--post-core-dimension-30),
   post-utility-padding-32: var(--post-core-dimension-32),
-  post-utility-padding-34: var(--post-core-dimension-34),
-  post-utility-padding-36: var(--post-core-dimension-36),
   post-utility-padding-40: var(--post-core-dimension-40),
   post-utility-padding-48: var(--post-core-dimension-48),
   post-utility-padding-56: var(--post-core-dimension-56),
   post-utility-padding-64: var(--post-core-dimension-64),
-  post-utility-padding-78: var(--post-core-dimension-78),
+  post-utility-padding-72: var(--post-core-dimension-72),
   post-utility-padding-80: var(--post-core-dimension-80),
+  post-utility-padding-88: var(--post-core-dimension-88),
   post-utility-padding-96: var(--post-core-dimension-96),
-  post-utility-padding-100: var(--post-core-dimension-100),
-  post-utility-padding-112: var(--post-core-dimension-112),
+  post-utility-padding-104: var(--post-core-dimension-104),
+  post-utility-padding-auto: auto,
   post-utility-gap-0: var(--post-core-dimension-0),
   post-utility-gap-1: var(--post-core-dimension-1),
   post-utility-gap-2: var(--post-core-dimension-2),
-  post-utility-gap-3: var(--post-core-dimension-3),
   post-utility-gap-4: var(--post-core-dimension-4),
-  post-utility-gap-5: var(--post-core-dimension-5),
   post-utility-gap-6: var(--post-core-dimension-6),
   post-utility-gap-8: var(--post-core-dimension-8),
-  post-utility-gap-10: var(--post-core-dimension-10),
-  post-utility-gap-11: var(--post-core-dimension-11),
   post-utility-gap-12: var(--post-core-dimension-12),
-  post-utility-gap-14: var(--post-core-dimension-14),
-  post-utility-gap-15: var(--post-core-dimension-15),
   post-utility-gap-16: var(--post-core-dimension-16),
-  post-utility-gap-18: var(--post-core-dimension-18),
-  post-utility-gap-19: var(--post-core-dimension-19),
-  post-utility-gap-20: var(--post-core-dimension-20),
-  post-utility-gap-22: var(--post-core-dimension-22),
   post-utility-gap-24: var(--post-core-dimension-24),
-  post-utility-gap-26: var(--post-core-dimension-26),
-  post-utility-gap-28: var(--post-core-dimension-28),
-  post-utility-gap-30: var(--post-core-dimension-30),
   post-utility-gap-32: var(--post-core-dimension-32),
-  post-utility-gap-34: var(--post-core-dimension-34),
-  post-utility-gap-36: var(--post-core-dimension-36),
   post-utility-gap-40: var(--post-core-dimension-40),
   post-utility-gap-48: var(--post-core-dimension-48),
   post-utility-gap-56: var(--post-core-dimension-56),
   post-utility-gap-64: var(--post-core-dimension-64),
-  post-utility-gap-78: var(--post-core-dimension-78),
+  post-utility-gap-72: var(--post-core-dimension-72),
   post-utility-gap-80: var(--post-core-dimension-80),
+  post-utility-gap-88: var(--post-core-dimension-88),
   post-utility-gap-96: var(--post-core-dimension-96),
-  post-utility-gap-100: var(--post-core-dimension-100),
-  post-utility-gap-112: var(--post-core-dimension-112),
+  post-utility-gap-104: var(--post-core-dimension-104),
+  post-utility-gap-auto: auto,
 );
 
 $post-color: (
@@ -116,6 +74,24 @@ $post-color: (
   post-utility-surface-accent4: var(--post-core-color-sandgrey-080),
 );
 
+$post-elevation: (
+  post-utility-elevation-100: var(--post-device-elevation-100),
+  post-utility-elevation-200: var(--post-device-elevation-200),
+  post-utility-elevation-300: var(--post-device-elevation-300),
+  post-utility-elevation-400: var(--post-device-elevation-400),
+  post-utility-elevation-500: var(--post-device-elevation-500),
+);
+
+$post-border: (
+  post-utility-border-width-1: var(--post-core-dimension-1),
+  post-utility-border-width-2: var(--post-core-dimension-2),
+  post-utility-border-radius-4: var(--post-core-dimension-4),
+  post-utility-border-radius-8: var(--post-core-dimension-8),
+  post-utility-border-default-width: var(--post-core-dimension-1),
+  post-utility-border-default-radius: var(--post-core-dimension-4),
+  post-utility-border-default-color: var(--post-scheme-color-surface-default-stroke),
+);
+
 $post-typo: (
   post-utility-font-size-sm: var(--post-device-font-size-7),
   post-utility-font-size-md: var(--post-device-font-size-6),

package/tokens/temp/palettes/_cargo-dark.scss

@@ -0,0 +1,19 @@
+
+// Do not edit manually
+// This file was generated by the swisspost/design-system-tokens package
+// Mon, 24 Feb 2025 16:19:02 GMT
+
+$post-palettes: (
+  post-palettes-color-default-bg: #373632,
+  post-palettes-color-default-fg: #ffffff,
+  post-palettes-color-default-bg-scheme: dark,
+  post-palettes-color-alternate-bg: #050400,
+  post-palettes-color-alternate-fg: #ffffff,
+  post-palettes-color-alternate-bg-scheme: dark,
+  post-palettes-color-brand-bg: #00411c,
+  post-palettes-color-brand-fg: #aadcff,
+  post-palettes-color-brand-bg-scheme: dark,
+  post-palettes-color-accent-bg: #aadcff,
+  post-palettes-color-accent-fg: #00411c,
+  post-palettes-color-accent-bg-scheme: light,
+);

package/tokens/temp/palettes/_cargo-light.scss

@@ -0,0 +1,19 @@
+
+// Do not edit manually
+// This file was generated by the swisspost/design-system-tokens package
+// Mon, 24 Feb 2025 16:19:02 GMT
+
+$post-palettes: (
+  post-palettes-color-default-bg: #fafafa,
+  post-palettes-color-default-fg: #050400,
+  post-palettes-color-default-bg-scheme: light,
+  post-palettes-color-alternate-bg: #f0efed,
+  post-palettes-color-alternate-fg: #050400,
+  post-palettes-color-alternate-bg-scheme: light,
+  post-palettes-color-brand-bg: #00411c,
+  post-palettes-color-brand-fg: #aadcff,
+  post-palettes-color-brand-bg-scheme: dark,
+  post-palettes-color-accent-bg: #aadcff,
+  post-palettes-color-accent-fg: #00411c,
+  post-palettes-color-accent-bg-scheme: light,
+);

package/tokens/temp/palettes/_post-dark.scss

@@ -0,0 +1,19 @@
+
+// Do not edit manually
+// This file was generated by the swisspost/design-system-tokens package
+// Mon, 24 Feb 2025 16:19:02 GMT
+
+$post-palettes: (
+  post-palettes-color-default-bg: #373632,
+  post-palettes-color-default-fg: #ffffff,
+  post-palettes-color-default-bg-scheme: dark,
+  post-palettes-color-alternate-bg: #050400,
+  post-palettes-color-alternate-fg: #ffffff,
+  post-palettes-color-alternate-bg-scheme: dark,
+  post-palettes-color-brand-bg: #ffcc00,
+  post-palettes-color-brand-fg: #050400,
+  post-palettes-color-brand-bg-scheme: light,
+  post-palettes-color-accent-bg: #fafafa,
+  post-palettes-color-accent-fg: #050400,
+  post-palettes-color-accent-bg-scheme: light,
+);

package/tokens/temp/palettes/_post-light.scss

@@ -0,0 +1,19 @@
+
+// Do not edit manually
+// This file was generated by the swisspost/design-system-tokens package
+// Mon, 24 Feb 2025 16:19:02 GMT
+
+$post-palettes: (
+  post-palettes-color-default-bg: #fafafa,
+  post-palettes-color-default-fg: #050400,
+  post-palettes-color-default-bg-scheme: light,
+  post-palettes-color-alternate-bg: #f0efed,
+  post-palettes-color-alternate-fg: #050400,
+  post-palettes-color-alternate-bg-scheme: light,
+  post-palettes-color-brand-bg: #ffcc00,
+  post-palettes-color-brand-fg: #050400,
+  post-palettes-color-brand-bg-scheme: light,
+  post-palettes-color-accent-bg: #373632,
+  post-palettes-color-accent-fg: #ffffff,
+  post-palettes-color-accent-bg-scheme: dark,
+);

package/utilities/_not-defined.scss

@@ -0,0 +1,44 @@
+/*
+  Initial visibility of the components is set to hidden to prevent 'flickering' effect due to stencil js/scss delay.
+*/
+
+:where(
+    post-accordion,
+    post-accordion-item,
+    post-alert,
+    post-avatar,
+    post-back-to-top,
+    post-banner,
+    post-breadcrumb,
+    post-breadcrumb-item,
+    post-card-control,
+    post-closebutton,
+    post-collapsible,
+    post-collapsible-trigger,
+    post-footer,
+    post-header,
+    post-icon,
+    post-language-option,
+    post-language-switch,
+    post-linkarea,
+    post-list,
+    post-list-item,
+    post-logo,
+    post-mainnavigation,
+    post-megadropdown,
+    post-megadropdown-trigger,
+    post-menu,
+    post-menu-item,
+    post-menu-trigger,
+    post-popover,
+    post-popovercontainer,
+    post-rating,
+    post-tab-header,
+    post-tab-panel,
+    post-tabs,
+    post-tag,
+    post-togglebutton,
+    post-tooltip
+  ):not(:defined) {
+  visibility: hidden;
+}

package/utilities/_variables.scss

@@ -1,6 +1,8 @@
-@use '../tokens/utilities' as tokens;
+@use 'sass:map';
+@use '../tokens/utilities_formatted';
 
-@use './functions' as *;
+@use '../variables/sizing' as *;
+@use '../variables/type';
 
 /*
   Utilities are generated with our utility API using bellow $utilities map.
@@ -21,110 +23,276 @@
   Our API is based on bootstrap utility API, more information is available here: https://getbootstrap.com/docs/5.3/utilities/api/
 */
 
+$position-values: (
+  0: 0,
+  50: 50%,
+  100: 100%,
+);
+
 $utilities: (
+  'grid-gutter': (
+    responsive: true,
+    property: --post-grid-gutter-x --post-grid-gutter-y,
+    class: g,
+    values: utilities_formatted.$gap,
+  ),
+  'grid-gutter-x': (
+    responsive: true,
+    property: --post-grid-gutter-x,
+    class: gx,
+    values: utilities_formatted.$gap,
+  ),
+  'grid-gutter-y': (
+    responsive: true,
+    property: --post-grid-gutter-y,
+    class: gy,
+    values: utilities_formatted.$gap,
+  ),
+  'width': (
+    responsive: true,
+    property: width,
+    class: w,
+    values: map.merge(utilities_formatted.$gap, $post-percentage-sizes),
+  ),
+  'height': (
+    responsive: true,
+    property: height,
+    class: h,
+    values: map.merge(utilities_formatted.$gap, $post-percentage-sizes),
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: max-w,
+    values: map.merge(utilities_formatted.$gap, $post-percentage-sizes),
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: max-h,
+    values: map.merge(utilities_formatted.$gap, $post-percentage-sizes),
+  ),
+  'min-width': (
+    responsive: true,
+    property: min-width,
+    class: min-w,
+    values: map.merge(utilities_formatted.$gap, $post-percentage-sizes),
+  ),
+  'min-height': (
+    responsive: true,
+    property: min-height,
+    class: min-h,
+    values: map.merge(utilities_formatted.$gap, $post-percentage-sizes),
+  ),
+  'viewport-width': (
+    responsive: true,
+    property: width,
+    class: vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'viewport-height': (
+    responsive: true,
+    property: height,
+    class: vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-width': (
+    responsive: true,
+    property: min-width,
+    class: min-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-height': (
+    responsive: true,
+    property: min-height,
+    class: min-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'max-viewport-width': (
+    responsive: true,
+    property: max-width,
+    class: max-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'max-viewport-height': (
+    responsive: true,
+    property: max-height,
+    class: max-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'align': (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
+  'float': (
+    responsive: true,
+    property: float,
+    values: (
+      start: inline-start,
+      end: inline-end,
+      none: none,
+    ),
+  ),
+  'opacity': (
+    property: opacity,
+    values: (
+      0: 0,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
   'margin': (
     responsive: true,
     property: margin,
     class: m,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
   'margin-x': (
     responsive: true,
     property: margin-right margin-left,
     class: mx,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
   'margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
   'margin-top': (
     responsive: true,
     property: margin-top,
     class: mt,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
   'margin-end': (
     responsive: true,
     property: margin-right,
     class: me,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
   'margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: mb,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
   'margin-start': (
     responsive: true,
     property: margin-left,
     class: ms,
-    values: from-tokens('spacing', 'margin'),
+    values: utilities_formatted.$margin,
   ),
-
   'padding': (
     responsive: true,
     property: padding,
     class: p,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
   'padding-x': (
     responsive: true,
     property: padding-right padding-left,
     class: px,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
   'padding-y': (
     responsive: true,
     property: padding-top padding-bottom,
     class: py,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
   'padding-top': (
     responsive: true,
     property: padding-top,
     class: pt,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
   'padding-end': (
     responsive: true,
     property: padding-right,
     class: pe,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
   'padding-bottom': (
     responsive: true,
     property: padding-bottom,
     class: pb,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
   'padding-start': (
     responsive: true,
     property: padding-left,
     class: ps,
-    values: from-tokens('spacing', 'padding'),
+    values: utilities_formatted.$padding,
   ),
-
   'gap': (
     responsive: true,
     property: gap,
     class: gap,
-    values: from-tokens('spacing', 'gap'),
+    values: utilities_formatted.$gap,
   ),
   'row-gap': (
     responsive: true,
     property: row-gap,
     class: row-gap,
-    values: from-tokens('spacing', 'gap'),
+    values: utilities_formatted.$gap,
   ),
   'column-gap': (
     responsive: true,
     property: column-gap,
     class: column-gap,
-    values: from-tokens('spacing', 'gap'),
+    values: utilities_formatted.$gap,
   ),
   'flex': (
     responsive: true,
@@ -232,5 +400,119 @@ $utilities: (
     values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
       none,
   ),
-  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
+  'position': (
+    property: position,
+    values: static relative absolute fixed sticky,
+  ),
+  'top': (
+    property: top,
+    values: $position-values,
+  ),
+  'bottom': (
+    property: bottom,
+    values: $position-values,
+  ),
+  'start': (
+    property: left,
+    class: start,
+    values: $position-values,
+  ),
+  'end': (
+    property: right,
+    class: end,
+    values: $position-values,
+  ),
+  'translate-middle': (
+    property: transform,
+    class: translate-middle,
+    values: (
+      null: translate(-50%, -50%),
+      x: translateX(-50%),
+      y: translateY(-50%),
+    ),
+  ),
+  'overflow': (
+    property: overflow,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-x': (
+    property: overflow-x,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-y': (
+    property: overflow-y,
+    values: auto hidden visible scroll,
+  ),
+  'font-family': (
+    property: font-family,
+    class: font,
+    values: (
+      'sans-serif': type.$font-family-sans-serif,
+    ),
+  ),
+  'font-style': (
+    property: font-style,
+    class: fst,
+    values: italic normal,
+  ),
+  'font-weight': (
+    property: font-weight,
+    class: fw,
+    values: (
+      black: type.$font-weight-black,
+      bold: type.$font-weight-bold,
+      normal: type.$font-weight-normal,
+    ),
+  ),
+  'line-height': (
+    property: line-height,
+    class: lh,
+    values: (
+      1: type.$line-height-1,
+      sm: type.$line-height-sm,
+      lg: type.$line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
+  ),
+  'elevation': (
+    property: box-shadow,
+    values: utilities_formatted.$elevation,
+    class: elevation,
+  ),
 );
+
+/* IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`. */