@ch-post-common/common-web-frontend 0.0.1-security → 6.939.0

package/variables/_color.scss

@@ -0,0 +1,240 @@
+@use "sass:map";
+
+//
+// Color system
+//
+
+$white: #fff !default;
+$gray-50: #f4f4f4 !default;
+$gray-100: #e5e5e5 !default;
+$gray-200: #cbcbcb !default;
+$gray-400: #999999 !default;
+$gray-600: #666666 !default;
+$gray-800: #333333 !default;
+$black: #000 !default;
+
+$grays: (
+  "50": $gray-50,
+  "100": $gray-100,
+  "200": $gray-200,
+  "400": $gray-400,
+  "600": $gray-600,
+  "800": $gray-800
+) !default;
+
+$white-alpha-10: rgba($white, .1) !default;
+$white-alpha-20: rgba($white, .2) !default;
+$white-alpha-40: rgba($white, .4) !default;
+$white-alpha-60: rgba($white, .6) !default;
+$white-alpha-80: rgba($white, .8) !default;
+
+$white-alphas: (
+  "10": $white-alpha-10,
+  "20": $white-alpha-20,
+  "40": $white-alpha-40,
+  "60": $white-alpha-60,
+  "80": $white-alpha-80
+) !default;
+
+$black-alpha-10: rgba($black, .1) !default;
+$black-alpha-20: rgba($black, .2) !default;
+$black-alpha-40: rgba($black, .4) !default;
+$black-alpha-60: rgba($black, .6) !default;
+$black-alpha-80: rgba($black, .8) !default;
+
+$black-alphas: (
+  "10": $black-alpha-10,
+  "20": $black-alpha-20,
+  "40": $black-alpha-40,
+  "60": $black-alpha-60,
+  "80": $black-alpha-80
+) !default;
+
+// Functional
+// Colour names via: http://chir.ag/projects/name-that-color/
+$red: #a51728 !default;
+$orange: #f49e00 !default;
+$yellow: #ffcc00 !default;
+$orange: #f49e00 !default;
+$green: #2c871d !default;
+$gray-pampas: #faf9f8 !default;
+$gray-cararra: #f4f3f1 !default;
+
+// Accent (implement names from branding module)
+$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;
+
+$colors: () !default;
+$colors: map.merge(
+  (
+    "white": $white,
+    "black": $black,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "green": $green,
+    "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
+  ),
+  $colors
+);
+
+$primary: $gray-800 !default;
+$primary-color: $primary;
+$secondary: $gray-600 !default; // In the old CWF it was $nightblue-dark - where is the secondary color defined by K?
+$secondary-color: $secondary;
+$success: $green !default;
+$info: $yellow !default;
+$warning: $orange !default;
+$danger: $red !default;
+$dark: $primary !default;
+$light: $gray-cararra !default;
+
+$theme-colors: () !default;
+$theme-colors: map.merge(
+  (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "active": $yellow,
+    "white": $white,
+    "light": $light,
+    "dark": $dark,
+    "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
+  ),
+  $theme-colors
+);
+
+$highlight-colors: () !default;
+$highlight-colors: map.merge(
+  (
+    "nightblue": $nightblue-dark,
+    "nightblue-bright": $nightblue-bright,
+    "purple": $purple-dark,
+    "petrol": $petrol-dark,
+    "olive": $olive-dark,
+    "aubergine": $aubergine-dark,
+    "coral": $coral-dark,
+    "coral-bright": $coral-bright
+  ),
+  $highlight-colors
+);
+
+// Brand colors from https://brandcolors.net/
+$facebook: #3b5998;
+$instagram: #405de6;
+$youtube: #ff0000;
+$snapchat: #fffc00;
+$twitter: #1da1f2;
+$xing: #026466;
+$linkedin: #0077b5;
+$kununu: #394b54;
+$email: #333333;
+
+$brand-colors: () !default;
+$brand-colors: map.merge(
+  (
+    "facebook": $facebook,
+    "instagram": $instagram,
+    "youtube": $youtube,
+    "snapchat": $snapchat,
+    "twitter": $twitter,
+    "xing": $xing,
+    "linkedin": $linkedin,
+    "kununu": $kununu,
+    "email": $email
+  ),
+  $brand-colors
+);
+
+// Custom background-colours
+// TODO: Is it possible to work with existing bootstrap classes? (They loop over $theme-colors to create bg-* classes)
+$background-colors: () !default;
+$background-colors: map.merge(
+  (
+    "dark": $gray-cararra,
+    "light": $gray-pampas,
+    "white": $white,
+    "nightblue-bright": $nightblue-bright
+  ),
+  $background-colors
+);
+
+$icon-colors: () !default;
+$icon-colors: map.merge(
+  (
+    "primary": $primary,
+    "white": $white,
+    "danger": $danger,
+    "warning": $warning,
+    "success": $success,
+  ),
+  $icon-colors
+);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: $black !default; // This still needs to be talked about with K
+$yiq-text-light: $white !default;
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg: $white !default;
+$body-color: $black !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: $black !default;
+$link-decoration: underline !default;
+$link-hover-color: $gray-600 !default;
+$link-hover-decoration: underline !default;
+
+// Components
+//
+// General component colors
+
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;

package/variables/_commons.scss

@@ -0,0 +1,57 @@
+@use "./color";
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-thick: 2px !default;
+$border-color: color.$gray-200 !default;
+
+$border-radius-sm: 2px !default;
+$border-radius: 3px !default;
+$border-radius-rg: $border-radius !default;
+$border-radius-lg: $border-radius !default;
+
+$box-shadow-sm: 0 0 4px 0 rgba(color.$black, .4) !default;
+$box-shadow: 0 0 5px 0px rgba(color.$black, .3) !default;
+$box-shadow-lg: 0 0 8px 0 rgba(color.$black, .4) !default;
+$box-shadow-hover: 0 0 1rem 0 rgba(color.$black, .08) !default;
+
+$caret-width: .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; // CWF only
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-alert: 1080 !default; // CWF 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;