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

package/themes/bootstrap/_carousel.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/carousel';

package/themes/bootstrap/_close.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/close';

package/themes/bootstrap/_containers.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/containers';

package/themes/bootstrap/_dropdown.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/dropdown';

package/themes/bootstrap/_forms.scss

@@ -0,0 +1,9 @@
+@forward './forms/labels';
+@forward './forms/form-text';
+@forward './forms/form-control';
+@forward './forms/form-select';
+@forward './forms/form-check';
+@forward './forms/form-range';
+@forward './forms/floating-labels';
+@forward './forms/input-group';
+@forward './forms/validation';

package/themes/bootstrap/_grid.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/grid';

package/themes/bootstrap/_images.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/images';

package/themes/bootstrap/_list-group.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/list-group';

package/themes/bootstrap/_modal.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/modal';

package/themes/bootstrap/_nav.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/nav';

package/themes/bootstrap/_navbar.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/navbar';

package/themes/bootstrap/_offcanvas.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/offcanvas';

package/themes/bootstrap/_overrides-color.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use '../../variables/color';
+
+/**
+ * Override the necessary bootstrap
+ * colors and maps using colors from
+ * the post style guide only.
+ *
+ * Other bootstrap colors
+ * will be available as sass-variables
+ * but should not be used.
+*/
+
+// $grays are defined in post colors
+// $colors are defined in post colors
+
+$primary: color.$gray-80;
+$secondary: color.$gray-60;
+// $success: color.$success; // Is already defined as $sucess in post-colors
+$info: color.$yellow;
+// $warning: color.$warning; // Is already defined as $warning in post-colors
+$danger: color.$error;
+
+// Colors that can be used as a background
+$colors: () !default;
+
+$theme-colors: () !default;
+$theme-colors: map.merge(
+  $theme-colors,
+  (
+    'primary': $primary,
+    'secondary': $secondary,
+    'light': color.$light,
+    'dark': color.$dark,
+  )
+);
+$theme-colors: map.merge($theme-colors, color.$contextual-colors);
+
+// Contrast colors are ok
+
+$body-bg: color.$white;
+$body-color: color.$black;
+
+$component-active-color: color.$white !default;
+$component-active-bg: $primary !default;

package/themes/bootstrap/_overrides-features.scss

@@ -0,0 +1,18 @@
+// Features
+//
+// Note: This variables have almost no influence on how the UI is shown,
+// because they have not been used in the custom swisspost styling.
+// Nevertheless, they have to be defined, for bootstrap to work as expected.
+
+$enable-caret: true;
+$enable-rounded: true;
+$enable-shadows: false;
+$enable-gradients: false;
+$enable-transitions: true;
+$enable-hover-media-query: false;
+$enable-grid-classes: true;
+
+// Prefix for :root CSS variables
+// TODO: this variable will change from "$variable-prefix" to "$prefix" in bootstrap@5.2
+// https://getbootstrap.com/docs/5.2/customize/css-variables/#prefix
+$variable-prefix: 'bs-' !default;

package/themes/bootstrap/_overrides-variables.scss

@@ -0,0 +1,40 @@
+@forward '../../variables/animation';
+@forward '../../variables/breakpoints';
+@forward '../../variables/color';
+@forward './overrides-features';
+@forward './overrides-color';
+@forward '../../variables/commons';
+@forward '../../variables/grid';
+@forward '../../variables/icons';
+@forward '../../variables/spacing';
+@forward '../../variables/options';
+@forward '../../variables/type';
+@forward '../../variables/components/accordion';
+@forward '../../variables/components/alert';
+@forward '../../variables/components/badge';
+@forward '../../variables/components/breadcrumbs';
+@forward '../../variables/components/button';
+@forward '../../variables/components/card';
+@forward '../../variables/components/carousel';
+@forward '../../variables/components/close';
+@forward '../../variables/components/dropdowns';
+@forward '../../variables/components/figures';
+@forward '../../variables/components/form-check';
+@forward '../../variables/components/form-feedback';
+@forward '../../variables/components/form-select';
+@forward '../../variables/components/form-switch';
+@forward '../../variables/components/forms';
+@forward '../../variables/components/list-group';
+@forward '../../variables/components/modals';
+@forward '../../variables/components/nav';
+@forward '../../variables/components/navbar';
+@forward '../../variables/components/pagination';
+@forward '../../variables/components/paragraph';
+@forward '../../variables/components/popovers';
+@forward '../../variables/components/progress-bars';
+@forward '../../variables/components/spinners';
+@forward '../../variables/components/subnavigation';
+@forward '../../variables/components/tables';
+@forward '../../variables/components/thumbnails';
+@forward '../../variables/components/toasts';
+@forward '../../variables/components/tooltips';

package/themes/bootstrap/_overrides.scss

@@ -0,0 +1,5 @@
+@import './overrides-variables';
+
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';

package/themes/bootstrap/_pagination.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/pagination';

package/themes/bootstrap/_popover.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/popover';

package/themes/bootstrap/_progress.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/progress';

package/themes/bootstrap/_reboot.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/reboot';

package/themes/bootstrap/_root.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/root';

package/themes/bootstrap/_spinners.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/spinners';

package/themes/bootstrap/_tables.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/tables';

package/themes/bootstrap/_toasts.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/toasts';

package/themes/bootstrap/_tooltip.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/tooltip';

package/themes/bootstrap/_transitions.scss

@@ -0,0 +1,2 @@
+@use './overrides' as *;
+@import 'bootstrap/scss/transitions';

package/themes/bootstrap/_type.scss

@@ -0,0 +1,6 @@
+@use './overrides' as *;
+
+// Reboot is needed here because type.scss is extending the h1/2/... selectors
+@use './reboot' as *;
+
+@import 'bootstrap/scss/type';

package/themes/bootstrap/_utilities.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use './overrides' as *;
+@import 'bootstrap/scss/helpers';
+@import 'bootstrap/scss/utilities';
+
+// manipulate $utilities before you import utilities/api
+$utilities: map.remove($utilities, 'background-color');
+
+@import 'bootstrap/scss/utilities/api';

package/themes/bootstrap/forms/_floating-labels.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/floating-labels';

package/themes/bootstrap/forms/_form-check.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/form-check';

package/themes/bootstrap/forms/_form-control.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/form-control';

package/themes/bootstrap/forms/_form-range.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/form-range';

package/themes/bootstrap/forms/_form-select.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/form-select';

package/themes/bootstrap/forms/_form-text.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/form-text';

package/themes/bootstrap/forms/_input-group.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/input-group';

package/themes/bootstrap/forms/_labels.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/labels';

package/themes/bootstrap/forms/_validation.scss

@@ -0,0 +1,2 @@
+@use '../overrides' as *;
+@import 'bootstrap/scss/forms/validation';

package/variables/_animation.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use './spacing';
+
+// Material Design - Motion Guidelines implementation
+// https://material.io/design/motion/
+// The // Original flag simple means, that this variable is not yet tweaked for Post
+
+// Complexity
+$transition-time-simple: 150ms !default;
+$transition-time-default: 250ms !default;
+$transition-time-morph: 500ms !default; // Original
+$transition-time-fade-in: 200ms !default;
+$transition-time-fade-out: 125ms !default;
+
+// Area
+$transition-time-area-small: $transition-time-simple !default;
+$transition-time-area-medium: 350ms !default;
+$transition-time-area-large: 500ms !default;
+
+// Easings
+$transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$transition-easing-decelerate: cubic-bezier(0, 0, 0.2, 1) !default;
+$transition-easing-accelerate: cubic-bezier(0.4, 0, 1, 1) !default;
+
+// Distances
+$transition-distance-xsmall: map.get(spacing.$post-sizes, 'micro') !default;
+$transition-distance-small: map.get(spacing.$post-sizes, 'small-regular') !default;
+$transition-distance-medium: map.get(spacing.$post-sizes, 'regular') !default;
+$transition-distance-medium-md: map.get(spacing.$post-sizes, 'big') !default;
+$transition-distance-large: map.get(spacing.$post-sizes, 'huge') !default;
+$transition-distance-large-md: map.get(spacing.$post-sizes, 'giant') !default;
+
+$transition-base-timing: $transition-time-default $transition-easing-default !default;
+$transition-base: all $transition-base-timing !default;
+$transition-fade: opacity $transition-time-fade-in linear !default;
+$transition-collapse: height $transition-base-timing, padding $transition-base-timing !default;

package/variables/_breakpoints.scss

@@ -0,0 +1,9 @@
+$grid-breakpoints: (
+  xs: 0,
+  sm: 400px,
+  rg: 600px,
+  md: 780px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1441px,
+) !default;

package/variables/_color.scss

@@ -0,0 +1,119 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../functions/color' as color-fn;
+
+/**
+ * Colors used by the post style guide
+ */
+
+// The one and only
+$yellow: #fc0;
+
+// Grayscale
+$gray-background: #f4f3f1;
+$gray-background-light: #faf9f8;
+
+$white: #fff;
+$gray-10: hsl(0, 0%, 90%);
+$gray-20: hsl(0, 0%, 80%);
+$gray-40: hsl(0, 0%, 60%);
+$gray-60: hsl(0, 0%, 40%);
+$gray-80: hsl(0, 0%, 20%);
+$black: #000;
+
+$dark: $gray-80;
+$light: $gray-background-light;
+
+// 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;
+
+// Contextual colors
+$success: #2c911c;
+$success-text: #255e1c;
+$error: #a51728;
+$error-text: #8f0d1c;
+$warning: #f49e00;
+
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+
+$post-grays: () !default;
+$post-grays: map.merge(
+  $post-grays,
+  (
+    'gray-10': $gray-10,
+    'gray-20': $gray-20,
+    'gray-40': $gray-40,
+    'gray-60': $gray-60,
+    'gray-80': $gray-80,
+  )
+);
+
+$contextual-colors: () !default;
+$contextual-colors: map.merge(
+  $contextual-colors,
+  (
+    'success': $success,
+    'info': $yellow,
+    'warning': $warning,
+    'danger': $error,
+  )
+);
+
+$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(
+  $background-colors,
+  (
+    'yellow': $yellow,
+    'light': $light,
+    'gray': $gray-background,
+    'dark': $dark,
+    'primary': $gray-80,
+    'white': $white,
+  )
+);
+
+// Merge with the other lists
+$background-colors: map.merge($background-colors, $contextual-colors);
+$background-colors: map.merge($background-colors, $accent-colors);
+
+// Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
+$dark-backgrounds: () !default;
+@each $colorname, $color in $background-colors {
+  @if (color-fn.get-contrast-color($color) != #000) {
+    $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$colorname}', $separator: comma);
+  }
+}

package/variables/_commons.scss

@@ -0,0 +1,56 @@
+@use './color';
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-thick: 2px !default;
+$border-color: color.$gray-20 !default;
+
+$border-radius: 3px !default;
+$border-radius-sm: $border-radius !default;
+$border-radius-rg: $border-radius !default;
+$border-radius-lg: $border-radius !default;
+
+$box-shadow-sm: 0 0 4px 0 rgba(color.$black, 0.4) !default;
+$box-shadow: 0 0 5px 0 rgba(color.$black, 0.3) !default;
+$box-shadow-lg: 0 0 8px 0 rgba(color.$black, 0.4) !default;
+$box-shadow-hover: 0 0 1rem 0 rgba(color.$black, 0.08) !default;
+
+$caret-width: 0.3em !default;
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-spinner: 990 !default; // Design System only
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-alert: 1080 !default; // Design System only
+
+// Z-index
+
+$z-indexes: (
+  hero: (
+    img,
+    brandframe,
+  ),
+  productcard: (
+    card,
+  ),
+  subnavigation: (
+    underscore-root,
+    underscore-link,
+  ),
+) !default;
+
+// Utilities
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;

package/variables/_grid.scss

@@ -0,0 +1,27 @@
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  xs: 1440px,
+) !default;
+
+// list of breakpoint giving the possibility to loop over them
+$grid-breakpoints-list: xs sm rg md lg xl xxl;
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+$grid-container-padding: (
+  xs: 12px,
+  sm: 16px,
+  rg: 32px,
+  md: 32px,
+  lg: 40px,
+  xl: 128px,
+  xxl: 128px,
+) !default;