@swisspost/design-system-styles 5.0.0-alpha.7

package/variables/components/_nav.scss

@@ -0,0 +1,55 @@
+@use '../color';
+@use '../commons';
+@use '../type';
+@use '../spacing';
+
+// Bootstrap variables
+$nav-link-padding-y: spacing.$spacer !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: color.$gray-60 !default;
+$nav-link-hover-color: color.$black !default;
+$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out !default;
+$nav-link-disabled-color: color.$gray-20 !default;
+
+$nav-tabs-border-color: color.$gray-20 !default;
+$nav-tabs-border-width: 4px !default;
+$nav-tabs-border-radius: 0 !default;
+$nav-tabs-link-hover-border-color: color.$gray-40 !default;
+$nav-tabs-link-active-color: color.$black !default;
+$nav-tabs-link-active-bg: color.$white !default;
+$nav-tabs-link-active-border-color: color.$yellow !default;
+
+$nav-pills-border-radius: commons.$border-radius !default;
+$nav-pills-link-active-color: color.$white !default;
+$nav-pills-link-active-bg: color.$gray-80 !default;
+
+// Design System custom variables
+$nav-link-padding: spacing.$spacer !default;
+
+$nav-tabs-link-hover-bg: lighten(color.$gray-10, 5%) !default;
+$nav-tabs-link-text-color: color.$gray-60 !default;
+$nav-tabs-link-active-font-weight: bold !default;
+
+$nav-tabs-focus-box-shadow: 0 0 0 1px color.$white, 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-link-text-color: color.$white !default;
+$nav-tabs-i-link-active-color: color.$white !default;
+
+$nav-tabs-alternate-link-hover-bg: color.$white !default;
+
+$nav-pills-outline-border-width: commons.$border-width !default;
+
+$nav-divider-color: color.$gray-20 !default;
+$nav-divider-margin-y: (spacing.$spacer * 0.5) !default;
+
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: (
+  type.$font-size-base * type.$line-height-base + $nav-link-padding-y * 2
+) !default;

package/variables/components/_navbar.scss

@@ -0,0 +1,44 @@
+@use '../color';
+@use '../spacing';
+@use '../type';
+@use '../components/button';
+@use '../components/nav';
+@use '../../functions/utilities';
+
+// 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-brand-font-size: type.$font-size-bigger-regular !default;
+$navbar-brand-height: $navbar-brand-font-size * type.$line-height-base !default;
+$navbar-brand-padding-y: (nav.$nav-link-height - $navbar-brand-height) * 0.5 !default;
+
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
+$navbar-toggler-font-size: type.$font-size-bigger-regular !default;
+$navbar-toggler-border-radius: button.$btn-border-radius !default;
+
+$navbar-dark-color: rgba(color.$white, 0.5) !default;
+$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(
+  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'
+) !default;
+$navbar-dark-toggler-border-color: rgba(color.$white, 0.1) !default;
+
+$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(
+  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'
+) !default;
+$navbar-light-toggler-border-color: rgba(color.$black, 0.1) !default;

package/variables/components/_pagination.scss

@@ -0,0 +1,42 @@
+@use '../color';
+@use '../spacing';
+@use '../type';
+@use '../commons';
+@use './button';
+
+// Pagination
+
+$pagination-padding-y: spacing.$size-mini !default;
+$pagination-padding-x: 0 !default;
+$pagination-padding-y-sm: spacing.$size-micro !default;
+$pagination-padding-x-sm: 0 !default;
+$pagination-padding-y-lg: spacing.$size-small-regular !default;
+$pagination-padding-x-lg: 0 !default;
+$pagination-line-height: 1.25 !default;
+
+$pagination-color: color.$gray-60 !default;
+$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-outline: 0 !default;
+
+$pagination-hover-color: color.$black !default;
+$pagination-hover-bg: color.$gray-background-light !default;
+$pagination-hover-border-color: color.$gray-10 !default;
+
+$pagination-active-color: color.$black !default;
+$pagination-active-bg: color.$yellow !default;
+$pagination-active-border-color: color.$yellow !default;
+
+$pagination-disabled-color: color.$gray-40 !default;
+$pagination-disabled-bg: color.$gray-background-light !default;
+$pagination-disabled-border-color: color.$gray-10 !default;
+
+$pagination-height-border: $pagination-border-width * 2 !default;
+$pagination-height-inner: (type.$font-size-base * $pagination-line-height) +
+  ($pagination-padding-y * 2) !default;
+$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !default;
+
+$pagination-width: $pagination-height !default;

package/variables/components/_paragraph.scss

@@ -0,0 +1,6 @@
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 0.8em !default;
+$text-bottom-space: 0.8em !default;

package/variables/components/_popovers.scss

@@ -0,0 +1,28 @@
+@use '../type';
+@use '../color';
+@use '../commons';
+
+// Popovers
+
+$popover-font-size: type.$font-size-tiny !default;
+$popover-bg: color.$yellow !default;
+$popover-max-width: 310px !default;
+$popover-border-width: commons.$border-width !default;
+$popover-border-color: $popover-bg !default;
+$popover-border-radius: commons.$border-radius-lg !default;
+$popover-box-shadow: none !default;
+
+$popover-header-bg: $popover-bg !default;
+$popover-header-color: type.$headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: 0.5rem !default;
+
+$popover-body-color: color.$black !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: $popover-bg !default;

package/variables/components/_progress-bars.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use '../color';
+@use '../type';
+@use '../commons';
+
+// Progress bars
+
+$progress-height: 1rem !default;
+$progress-font-size: type.$font-size-base * 0.75 !default;
+$progress-bg: color.$gray-20 !default;
+$progress-border-radius: commons.$border-radius !default;
+$progress-box-shadow: inset 0 0.1rem 0.1rem rgba(color.$black, 0.1) !default;
+$progress-bar-color: color.$white !default;
+$progress-bar-bg: map.get(color.$background-colors, 'primary') !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;

package/variables/components/_spinners.scss

@@ -0,0 +1,16 @@
+@use '../color';
+@use '../spacing';
+
+// Spinners
+
+$spinner-color-primary: color.$yellow !default;
+$spinner-color-secondary: color.$gray-10 !default;
+
+$spinner-size: spacing.$size-huge !default;
+$spinner-border-width: 6px !default;
+
+$spinner-size-sm: spacing.$size-big !default;
+$spinner-border-width-sm: spacing.$size-micro !default;
+
+$spinner-size-xs: spacing.$size-small-regular !default;
+$spinner-border-width-xs: spacing.$size-line !default;

package/variables/components/_stepper.scss

@@ -0,0 +1,36 @@
+@use './forms';
+@use '../type';
+@use '../color';
+@use '../spacing';
+
+@use '../../functions/icons' as icon-fn;
+
+$stepper-bar-height: spacing.$size-micro;
+
+$stepper-indicator-height: spacing.$size-bigger-big;
+$stepper-indicator-border-width: spacing.$size-micro;
+$stepper-indicator-border-color: color.$white;
+$stepper-indicator-font-size: type.$font-size-bigger-regular;
+$stepper-indicator-font-weight: type.$font-weight-bold;
+$stepper-indicator-bg: color.$yellow;
+$stepper-indicator-color: color.$black;
+$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color);
+$stepper-indicator-check-icon: url($_stepper-indicator-check-icon);
+$stepper-indicator-hover-color: color.$white;
+$stepper-indicator-hover-bg: color.$black;
+$stepper-indicator-hover-outline: forms.$input-focus-outline-thickness solid
+  var(--post-contrast-color);
+$_stepper-indicator-hover-check-icon: icon-fn.get-colored-svg-url(
+  '2105',
+  $stepper-indicator-hover-color
+);
+$stepper-indicator-hover-check-icon: url($_stepper-indicator-hover-check-icon);
+$stepper-indicator-future-bg: color.$gray-60;
+$stepper-indicator-future-color: color.$white;
+
+$stepper-link-gap: spacing.$size-mini;
+$stepper-link-color: color.$gray-60;
+$stepper-link-hover-color: color.$black;
+$stepper-link-current-color: color.$black;
+$stepper-link-current-font-size: type.$font-size-bigger-regular;
+$stepper-link-current-font-weight: type.$font-weight-bold;

package/variables/components/_subnavigation.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '../color';
+@use '../commons';
+@use '../spacing';
+@use '../../functions/sizing';
+
+// Subnavigation
+
+$subnavigation-background-color: color.$white;
+$subnavigation-background-color-alternate: color.$gray-background-light;
+
+$subnavigation-border-bottom-width: commons.$border-width;
+$subnavigation-border-bottom-color: color.$gray-10;
+
+// These heights have to be synchronous to main navigation heights
+$subnavigation-height-xs: sizing.px-to-rem(56);
+$subnavigation-height-lg: sizing.px-to-rem(64);
+$subnavigation-height-xl: sizing.px-to-rem(72);
+
+$subnavigation-link-color: rgba(var(--post-contrast-color-rgb), 0.6);
+$subnavigation-link-color-hover: var(--post-contrast-color);
+
+$subnavigation-link-underscore-height: map.get(spacing.$post-sizes, 'micro');
+$subnavigation-link-underscore-color-active: color.$yellow;
+$subnavigation-link-underscore-color-hover: rgba(var(--post-contrast-color-rgb), 0.4);
+
+$subnavigation-link-padding-xs: map.get(spacing.$post-sizes, 'regular')
+  map.get(spacing.$post-sizes, 'small-regular');
+$subnavigation-link-padding-lg: map.get(spacing.$post-sizes, 'small-large')
+  map.get(spacing.$post-sizes, 'regular');
+
+$subnavigation-result-margin-left: map.get(spacing.$post-sizes, 'mini');

package/variables/components/_tables.scss

@@ -0,0 +1,39 @@
+@use '../color';
+@use '../commons';
+@use '../spacing';
+@use '../type';
+
+$table-cell-padding-y: spacing.$size-small-regular !default;
+$table-cell-padding-x: $table-cell-padding-y !default;
+$table-cell-padding: $table-cell-padding-y $table-cell-padding-x !default;
+
+$table-cell-padding-y-sm: spacing.$size-micro !default;
+$table-cell-padding-x-sm: $table-cell-padding-y-sm !default;
+$table-cell-padding-sm: $table-cell-padding-y-sm $table-cell-padding-x-sm !default;
+
+$table-border-width: spacing.$size-line !default;
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-bg: transparent !default;
+$table-accent-bg: transparent !default;
+$table-hover-bg: rgba(color.$black, 0.075) !default;
+$table-active-bg: $table-hover-bg !default;
+
+$table-border-width: commons.$border-width !default;
+$table-border-color: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
+
+$table-head-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
+$table-head-color: color.$gray-40 !default;
+
+$table-dark-bg: color.$gray-80 !default;
+$table-dark-accent-bg: rgba(color.$white, 0.05) !default;
+$table-dark-hover-bg: rgba(color.$white, 0.075) !default;
+$table-dark-border-color: lighten(color.$gray-80, 7.5%) !default;
+$table-dark-color: color.$black !default;
+
+$table-striped-order: odd !default;
+
+$table-caption-color: type.$text-muted !default;

package/variables/components/_thumbnails.scss

@@ -0,0 +1,11 @@
+@use '../color';
+@use '../commons';
+
+// Image thumbnails
+
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: color.$black !default;
+$thumbnail-border-width: commons.$border-width !default;
+$thumbnail-border-color: color.$gray-20 !default;
+$thumbnail-border-radius: commons.$border-radius !default;
+$thumbnail-box-shadow: 0 1px 2px rgba(color.$black, 0.075) !default;

package/variables/components/_toasts.scss

@@ -0,0 +1,18 @@
+@use '../color';
+
+// Toasts
+
+$toast-max-width: 350px !default;
+$toast-padding-x: 0.75rem !default;
+$toast-padding-y: 0.25rem !default;
+$toast-font-size: 0.875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba(color.$white, 0.85) !default;
+$toast-border-width: 1px !default;
+$toast-border-color: rgba(color.$black, 0.1) !default;
+$toast-border-radius: 0.25rem !default;
+$toast-box-shadow: 0 0.25rem 0.75rem rgba(color.$black, 0.1) !default;
+
+$toast-header-color: color.$gray-60 !default;
+$toast-header-background-color: rgba(color.$white, 0.85) !default;
+$toast-header-border-color: rgba(color.$black, 0.05) !default;

package/variables/components/_tooltips.scss

@@ -0,0 +1,18 @@
+@use '../type';
+@use '../color';
+
+// Tooltips
+
+$tooltip-font-size: type.$font-size-regular !default;
+$tooltip-max-width: 310px !default;
+$tooltip-color: color.$black !default;
+$tooltip-bg: color.$yellow !default;
+$tooltip-border-radius: 0 !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: 0.25rem !default;
+$tooltip-padding-x: 0.5rem !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;

package/variables/components/_topic-teaser.scss

@@ -0,0 +1,27 @@
+@use 'sass:list';
+
+$grid-breakpoints-lower: (xs, sm, rg, md);
+$grid-breakpoints-upper: (lg, xl, xxl);
+
+$content-cols: (
+  xs: 12,
+  lg: 8,
+  xl: 7,
+);
+
+$image-cols: (
+  xs: 10,
+  rg: 8,
+  lg: 4,
+  xl: 5,
+);
+
+$image-aspectratio: (
+  xs: list.slash(1, 0.7),
+  sm: list.slash(1, 0.7),
+  rg: list.slash(1, 0.7),
+  md: list.slash(1, 0.7),
+  lg: list.slash(0.66, 1),
+  xl: list.slash(0.9, 1),
+  xxl: list.slash(0.9, 1),
+);