fix(documentation, styles): replace broken css variables with hex values (#4446)

Co-authored-by: Oliver Schürch <[email protected]>

Author: leagrdv

.changeset/cyan-days-kiss.md

@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-styles-primeng': patch
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Replaced previously deleted CSS variables with SASS variables.

packages/components/src/components/post-card-control/post-card-control.scss

@@ -64,7 +64,7 @@ tokens.$default-map: utilities.$post-spacing;
 
     &:hover:not([disabled]),
     &:hover:not([disabled]) ~ label.form-check-label {
-      color: var(--post-contrast-color);
+      color: post.$black;
       background-color: transparent;
     }
 

packages/documentation/.storybook/styles/manager.scss

@@ -1,3 +1,4 @@
+@use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/mixins/utilities';
 @use './components';
 @use '../addons/addons';
@@ -57,7 +58,7 @@
 
     &:hover,
     &:focus-visible {
-      background-color: var(--post-gray-10);
+      background-color: post.$gray-10;
     }
   }
 
@@ -77,7 +78,7 @@
     }
 
     &[data-nodetype='group'] svg {
-      color: var(--post-gray-60);
+      color: post.$gray-60;
     }
     &[data-nodetype='component'] svg {
       color: #0076a8;
@@ -90,8 +91,8 @@
     }
 
     &[data-selected='true'] {
-      background-color: rgba(var(--post-yellow-rgb), 0.4);
-      color: var(--post-contrast-color);
+      background-color: rgba(post.$yellow, 0.4);
+      color: post.$black;
     }
   }
 
@@ -137,7 +138,7 @@
 
     .search-result-item--label {
       span {
-        color: var(--post-gray-60);
+        color: post.$gray-60;
       }
 
       mark {
@@ -147,7 +148,7 @@
 
     &:hover,
     &:focus-visible {
-      background-color: var(--post-gray-10);
+      background-color: post.$gray-10;
     }
   }
 }

packages/documentation/.storybook/styles/preview.scss

@@ -124,8 +124,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
       display: block;
       margin-top: 0.25rem;
       padding: 1rem;
-      background-color: var(--post-contrast-color);
-      color: var(--post-contrast-color-inverted);
+      background-color: post.$black;
+      color: post.$white;
     }
   }
 

packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss

@@ -57,7 +57,7 @@ tokens.$default-map: utilities.$post-spacing;
 .icon {
   display: flex;
   flex-direction: column;
-  border: post.$border-width solid var(--post-gray-20);
+  border: post.$border-width solid post.$gray-20;
   border-radius: post.$border-radius;
 
   .icon--tile {
@@ -68,7 +68,7 @@ tokens.$default-map: utilities.$post-spacing;
     padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16');
     width: 100%;
     height: 80px;
-    background-color: var(--post-contrast-color-inverted);
+    background-color: post.$white;
     border-top-left-radius: post.$border-radius;
     border-top-right-radius: post.$border-radius;
 
@@ -85,8 +85,8 @@ tokens.$default-map: utilities.$post-spacing;
     flex-direction: column;
     justify-content: center;
     padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16');
-    background-color: var(--post-gray-10);
-    border-top: post.$border-width solid var(--post-gray-20);
+    background-color: post.$gray-10;
+    border-top: post.$border-width solid post.$gray-20;
     border-bottom-left-radius: post.$border-radius;
     border-bottom-right-radius: post.$border-radius;
     font-size: post.$font-size-tiny;
@@ -98,7 +98,7 @@ tokens.$default-map: utilities.$post-spacing;
 
     .info--keywords {
       font-size: post.$font-size-tiny;
-      color: var(--post-gray-60);
+      color: post.$gray-60;
       hyphens: auto;
     }
   }

packages/documentation/src/stories/foundations/typography/typography.styles.scss

@@ -21,7 +21,7 @@ tokens.$default-map: utilities.$post-spacing;
 
   .sb-fontface__typo {
     font-size: post.$font-size-huge;
-    color: var(--post-gray-60);
+    color: post.$gray-60;
     line-height: 1;
   }
 
@@ -38,10 +38,10 @@ tokens.$default-map: utilities.$post-spacing;
     .settings__weight,
     .settings__style {
       font-size: post.$font-size-tiny;
-      color: var(--post-gray-80);
+      color: post.$gray-80;
 
       > span {
-        color: var(--post-gray-60);
+        color: post.$gray-60;
       }
     }
   }

packages/documentation/src/stories/misc/migration-guide/shared.component.scss

@@ -93,8 +93,8 @@ migration-setup {
   .migration-options {
     margin: 1rem 0;
     padding: 1.5rem 0;
-    border-top: 1px solid var(--post-gray-10);
-    border-bottom: 1px solid var(--post-gray-10);
+    border-top: 1px solid post.$gray-10;
+    border-bottom: 1px solid post.$gray-10;
 
     > .row {
       --bs-gutter-y: 1.5rem;

packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss

@@ -24,7 +24,7 @@ $shade500: post.$error !default; //unused
 $shade600: post.$text-muted !default; //text secondary color
 $shade700: post.$black !default; //input text color
 $shade800: post.$error !default; //unused
-$shade900: var(--post-contrast-color) !default; //text color
+$shade900: post.$black !default; //text color
 
 //global
 $borderRadius: post.$border-radius !default;

packages/styles/src/components/button.scss

@@ -37,7 +37,6 @@ tokens.$default-map: components.$post-button;
   border-radius: tokens.get('button-border-radius-round');
   background-color: transparent;
   box-shadow: none;
-  color: var(--post-gray-80);
   font-family: inherit;
   font-weight: tokens.get('button-label-font-weight');
   text-decoration: none;

packages/styles/src/components/card-control.scss

@@ -57,7 +57,7 @@ fieldset {
     @include utilities-mx.focus-style-none();
 
     &:hover:not([disabled]) ~ label {
-      color: var(--post-contrast-color);
+      color: color.$black;
       background-color: transparent !important;
     }
 

packages/styles/src/components/datepicker.scss

@@ -13,7 +13,7 @@
 
 ngb-datepicker {
   // Conversion for compatibility
-  --bs-light: var(--post-light);
+  --bs-light: color.$light;
 }
 
 ngb-datepicker.dropdown-menu {
@@ -75,7 +75,7 @@ span.ngb-dp-navigation-chevron {
 }
 
 .ngb-dp-weekday {
-  color: rgba(var(--post-contrast-color-rgb), 0.6) !important;
+  color: color.$black-alpha-60 !important;
   font-size: 1rem;
   font-style: normal !important;
   line-height: type.$line-height-copy !important;

packages/styles/src/components/dialog.scss

@@ -21,7 +21,7 @@ dialog {
   overflow: auto;
   margin: revert;
   overscroll-behavior: contain;
-  border: 2px solid var(--post-contrast-color); // Ensures good contrast when bg is dark against dark backdrop
+  border: 2px solid color.$black; // Ensures good contrast when bg is dark against dark backdrop
 
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.8);

packages/styles/src/components/tabs/_tab-title.scss

@@ -22,27 +22,27 @@ tokens.$default-map: utilities.$post-spacing;
   border-left: 1px solid transparent;
   outline-color: currentColor;
   opacity: 0.7;
-  color: var(--post-contrast-color);
+  color: color.$black;
   text-decoration: none;
   background-color: transparent;
 
   &:focus {
     background-color: unset;
-    color: var(--post-contrast-color);
+    color: color.$black;
   }
 
   &:hover {
     opacity: 1;
-    background-color: rgba(var(--post-contrast-color-rgb), 0.6);
-    color: var(--post-contrast-color-inverted);
+    background-color: color.$black-alpha-60;
+    color: color.$white;
   }
 
   // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
   &:focus-visible {
     outline: transparent;
     opacity: 1;
-    background-color: rgba(var(--post-contrast-color-rgb), 0.6);
-    color: var(--post-contrast-color-inverted);
+    background-color: color.$black-alpha-60;
+    color: color.$white;
     box-shadow: none;
 
     &::after {
@@ -62,8 +62,8 @@ tokens.$default-map: utilities.$post-spacing;
     border-right-color: nav.$nav-tabs-border-color;
     border-left-color: nav.$nav-tabs-border-color;
     opacity: 1;
-    background-color: var(--post-contrast-color-inverted);
-    color: var(--post-contrast-color);
+    background-color: color.$white;
+    color: color.$black;
     font-weight: 700;
 
     // Create a line that does not suffer from border corner mitering

packages/styles/src/components/tabs/_tabs-wrapper.scss

@@ -10,7 +10,7 @@
   padding-top: spacing.$spacer;
   border: 0;
   background-color: rgba(
-    var(--post-contrast-color-rgb),
+    color.$black,
     0.02
   ); // 0.02 gets as close as possible to color.$light on white background
 

packages/styles/src/components/tag.scss

@@ -63,7 +63,7 @@
   }
 
   &.tag-white {
-    border-color: var(--post-contrast-color);
+    border-color: color.$black;
   }
 
   // Can be removed completely as soon as Firefox ESR v128 is released and rolled out

packages/styles/src/mixins/_form-checks.scss

@@ -6,7 +6,7 @@
   border-color: $color;
 
   ~ .form-check-label {
-    color: var(--post-contrast-color);
+    color: color.$black;
   }
 }
 

packages/styles/src/mixins/_forms.scss

@@ -4,6 +4,7 @@
 @use './../functions/icons';
 @use './../functions/forms' as forms-fx;
 @use './../functions/utilities' as utilities-fx;
+@use './../variables/color';
 
 // Placeholder in input fields
 @mixin placeholder() {
@@ -26,7 +27,7 @@
 
   /* Compatibility with button-group */
   &:is(:focus-visible, :focus-within, .pretend-focus) {
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+    outline: forms.$input-focus-outline-thickness solid color.$black;
     @content;
   }
 }

packages/styles/src/placeholders/_button.scss

@@ -1,14 +1,15 @@
 @use './../mixins/utilities';
 @use './../mixins/color' as color-mx;
+@use './../variables/color';
 @use './../variables/components/button';
 
 %btn-transparent-background {
   @include utilities.not-disabled-focus-hover() {
-    color: var(--post-contrast-color);
+    color: color.$black;
   }
 
   // Invert icon on dark backgrounds
   @include color-mx.on-dark-background() {
-    color: var(--post-contrast-color);
+    color: color.$black;
   }
 }

packages/styles/src/variables/components/_close.scss

@@ -11,7 +11,7 @@ $close-size: tokens.get('utility-gap-24') !default;
 $close-border-radius: button.$btn-border-radius !default;
 $close-color: color.$black !default;
 $close-hover-color: color.$black !default;
-$close-disabled-color: var(--post-gray-40) !default;
+$close-disabled-color: color.$gray-40 !default;
 $close-transition: button.$btn-transition !default;
 
 // DEPRECATED

packages/styles/src/variables/components/_dropdowns.scss

@@ -12,7 +12,7 @@ $dropdown-bg: color.$white !default;
 $dropdown-border-color: rgba(color.$black, 0.15) !default;
 $dropdown-border-radius: commons.$border-radius !default;
 $dropdown-border-width: commons.$border-width !default;
-$dropdown-divider-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
+$dropdown-divider-bg: color.$white-alpha-60 !default;
 $dropdown-box-shadow: 0 0.5rem 1rem rgba(color.$black, 0.175) !default;
 
 $dropdown-link-color: color.$gray-60 !default;

packages/styles/src/variables/components/_forms.scss

@@ -29,7 +29,7 @@ $input-line-height-rg: type.$line-height-copy !default;
 $input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
-$input-disabled-border-color: var(--post-gray-40); // Design System only
+$input-disabled-border-color: color.$gray-40; // Design System only
 
 $input-border-color: color.$gray-80 !default;
 $input-border-width: button.$input-btn-border-width !default;

packages/styles/src/variables/components/_nav.scss

@@ -41,9 +41,9 @@ $nav-tabs-focus-box-shadow:
   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-border-color: color.$white-alpha-40 !default;
+$nav-tabs-i-link-hover-bg: color.$black-alpha-10 !default;
+$nav-tabs-i-link-hover-border-color: color.$white-alpha-80 !default;
 $nav-tabs-i-link-text-color: color.$white !default;
 $nav-tabs-i-link-active-color: color.$white !default;
 

packages/styles/src/variables/components/_stepper.scss

@@ -25,8 +25,8 @@ $stepper-indicator-transition:
   color animation.$transition-base-timing,
   background-color animation.$transition-base-timing;
 
-$stepper-indicator-hover-color: var(--post-contrast-color-inverted);
-$stepper-indicator-hover-bg: var(--post-contrast-color);
+$stepper-indicator-hover-color: color.$white;
+$stepper-indicator-hover-bg: color.$black;
 
 $stepper-indicator-future-bg: color.$gray-60;
 $stepper-indicator-future-color: color.$white;
@@ -36,7 +36,7 @@ $stepper-indicator-check-icon-size: $stepper-indicator-check-size;
 $stepper-link-line-height: type.$line-height-sm;
 $stepper-link-gap: tokens.get('utility-gap-8');
 $stepper-link-spacing: tokens.get('utility-gap-16');
-$stepper-link-color: var(--post-gray-60);
+$stepper-link-color: color.$gray-60;
 
-$stepper-link-current-color: var(--post-gray-80);
+$stepper-link-current-color: color.$gray-80;
 $stepper-link-current-font-weight: type.$font-weight-bold;

packages/styles/src/variables/components/_subnavigation.scss

@@ -21,12 +21,12 @@ $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-color: color.$black-alpha-60;
+$subnavigation-link-color-hover: color.$black;
 
 $subnavigation-link-underscore-height: tokens.get('utility-gap-4');
 $subnavigation-link-underscore-color-active: color.$yellow;
-$subnavigation-link-underscore-color-hover: rgba(var(--post-contrast-color-rgb), 0.4);
+$subnavigation-link-underscore-color-hover: color.$black-alpha-40;
 
 $subnavigation-link-padding-xs: tokens.get('utility-gap-16') tokens.get('utility-gap-12');
 $subnavigation-link-padding-lg: tokens.get('utility-gap-20') tokens.get('utility-gap-16');