From caeeabf43d5227e4d7d210e4f1fb10a2effd24e3 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 15 Jan 2025 17:04:16 +0100 Subject: [PATCH 01/14] fix(documentation, styles): replace broken css variables with hex values --- .changeset/cyan-days-kiss.md | 8 ++++++++ .../post-card-control/post-card-control.scss | 2 +- .../documentation/.storybook/styles/manager.scss | 12 ++++++------ .../documentation/.storybook/styles/preview.scss | 4 ++-- .../icons/search/search-icons.styles.scss | 10 +++++----- .../typography/typography.styles.scss | 6 +++--- .../misc/migration-guide/shared.component.scss | 4 ++-- .../src/lib/primeng-theme/_variables.scss | 2 +- packages/styles/src/components/button.scss | 1 - packages/styles/src/components/card-control.scss | 2 +- packages/styles/src/components/datepicker.scss | 4 ++-- packages/styles/src/components/dialog.scss | 2 +- .../styles/src/components/tabs/_tab-title.scss | 16 ++++++++-------- .../src/components/tabs/_tabs-wrapper.scss | 4 +++- packages/styles/src/components/tag.scss | 2 +- packages/styles/src/mixins/_form-checks.scss | 2 +- packages/styles/src/mixins/_forms.scss | 2 +- packages/styles/src/placeholders/_button.scss | 4 ++-- .../styles/src/variables/components/_close.scss | 2 +- .../src/variables/components/_dropdowns.scss | 2 +- .../styles/src/variables/components/_forms.scss | 2 +- .../styles/src/variables/components/_nav.scss | 6 +++--- .../src/variables/components/_stepper.scss | 8 ++++---- .../src/variables/components/_subnavigation.scss | 6 +++--- .../styles/src/variables/components/_tables.scss | 4 ++-- 25 files changed, 63 insertions(+), 54 deletions(-) create mode 100644 .changeset/cyan-days-kiss.md diff --git a/.changeset/cyan-days-kiss.md b/.changeset/cyan-days-kiss.md new file mode 100644 index 0000000000..5922e99ff1 --- /dev/null +++ b/.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 color values. diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss index 4922e020a0..a7464a9671 100644 --- a/packages/components/src/components/post-card-control/post-card-control.scss +++ b/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: #000; background-color: transparent; } diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss index 7090c0dc2c..75a7d705cc 100644 --- a/packages/documentation/.storybook/styles/manager.scss +++ b/packages/documentation/.storybook/styles/manager.scss @@ -57,7 +57,7 @@ &:hover, &:focus-visible { - background-color: var(--post-gray-10); + background-color: #e6e6e6; } } @@ -77,7 +77,7 @@ } &[data-nodetype='group'] svg { - color: var(--post-gray-60); + color: #666; } &[data-nodetype='component'] svg { color: #0076a8; @@ -90,8 +90,8 @@ } &[data-selected='true'] { - background-color: rgba(var(--post-yellow-rgb), 0.4); - color: var(--post-contrast-color); + background-color: rgba(#fc0, 0.4); + color: #000; } } @@ -137,7 +137,7 @@ .search-result-item--label { span { - color: var(--post-gray-60); + color: #666; } mark { @@ -147,7 +147,7 @@ &:hover, &:focus-visible { - background-color: var(--post-gray-10); + background-color: #e6e6e6; } } } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index a21d734600..6d6305b23e 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/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: #000; + color: #fff; } } diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss index c85c6fe719..73d6bbb2dd 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss +++ b/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 #ccc; 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: #fff; 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: #e6e6e6; + border-top: post.$border-width solid #ccc; 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: #666; hyphens: auto; } } diff --git a/packages/documentation/src/stories/foundations/typography/typography.styles.scss b/packages/documentation/src/stories/foundations/typography/typography.styles.scss index 2517952df0..2e1d74a219 100644 --- a/packages/documentation/src/stories/foundations/typography/typography.styles.scss +++ b/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: #666; 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: #333; > span { - color: var(--post-gray-60); + color: #666; } } } diff --git a/packages/documentation/src/stories/misc/migration-guide/shared.component.scss b/packages/documentation/src/stories/misc/migration-guide/shared.component.scss index 16d761c89e..e3ce8f89b8 100644 --- a/packages/documentation/src/stories/misc/migration-guide/shared.component.scss +++ b/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 #e6e6e6; + border-bottom: 1px solid #e6e6e6; > .row { --bs-gutter-y: 1.5rem; diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss index 7ca703a9fb..d4a0af857a 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss +++ b/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: #000 !default; //text color //global $borderRadius: post.$border-radius !default; diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index e19b8f19a2..086ce51b0a 100644 --- a/packages/styles/src/components/button.scss +++ b/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; diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss index 9f4cd95c18..5f8a989779 100644 --- a/packages/styles/src/components/card-control.scss +++ b/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: #000; background-color: transparent !important; } diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss index fc41252901..db5e0934ae 100644 --- a/packages/styles/src/components/datepicker.scss +++ b/packages/styles/src/components/datepicker.scss @@ -13,7 +13,7 @@ ngb-datepicker { // Conversion for compatibility - --bs-light: var(--post-light); + --bs-light: #faf9f8; } 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: rgba(0, 0, 0, 0.6) !important; font-size: 1rem; font-style: normal !important; line-height: type.$line-height-copy !important; diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss index b241eca883..9a7b9420b1 100644 --- a/packages/styles/src/components/dialog.scss +++ b/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 #000; // Ensures good contrast when bg is dark against dark backdrop &::backdrop { background-color: rgba(0, 0, 0, 0.8); diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss index e28d3be958..3893540a53 100644 --- a/packages/styles/src/components/tabs/_tab-title.scss +++ b/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: #000; text-decoration: none; background-color: transparent; &:focus { background-color: unset; - color: var(--post-contrast-color); + color: #000; } &:hover { opacity: 1; - background-color: rgba(var(--post-contrast-color-rgb), 0.6); - color: var(--post-contrast-color-inverted); + background-color: rgba(0, 0, 0, 0.6); + color: #fff; } // 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: rgba(0, 0, 0, 0.6); + color: #fff; 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: #fff; + color: #000; font-weight: 700; // Create a line that does not suffer from border corner mitering diff --git a/packages/styles/src/components/tabs/_tabs-wrapper.scss b/packages/styles/src/components/tabs/_tabs-wrapper.scss index 318bb7c0fe..e497721ac7 100644 --- a/packages/styles/src/components/tabs/_tabs-wrapper.scss +++ b/packages/styles/src/components/tabs/_tabs-wrapper.scss @@ -10,7 +10,9 @@ padding-top: spacing.$spacer; border: 0; background-color: rgba( - var(--post-contrast-color-rgb), + 0, + 0, + 0, 0.02 ); // 0.02 gets as close as possible to color.$light on white background diff --git a/packages/styles/src/components/tag.scss b/packages/styles/src/components/tag.scss index a5c7af1f0d..dc6ad1999a 100644 --- a/packages/styles/src/components/tag.scss +++ b/packages/styles/src/components/tag.scss @@ -63,7 +63,7 @@ } &.tag-white { - border-color: var(--post-contrast-color); + border-color: #000; } // Can be removed completely as soon as Firefox ESR v128 is released and rolled out diff --git a/packages/styles/src/mixins/_form-checks.scss b/packages/styles/src/mixins/_form-checks.scss index e756f1ee84..d68f0dad5f 100644 --- a/packages/styles/src/mixins/_form-checks.scss +++ b/packages/styles/src/mixins/_form-checks.scss @@ -6,7 +6,7 @@ border-color: $color; ~ .form-check-label { - color: var(--post-contrast-color); + color: #000; } } diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 2eb383457f..1e58a321d6 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -26,7 +26,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 #000; @content; } } diff --git a/packages/styles/src/placeholders/_button.scss b/packages/styles/src/placeholders/_button.scss index 00f5570878..f0974b6b44 100644 --- a/packages/styles/src/placeholders/_button.scss +++ b/packages/styles/src/placeholders/_button.scss @@ -4,11 +4,11 @@ %btn-transparent-background { @include utilities.not-disabled-focus-hover() { - color: var(--post-contrast-color); + color: #000; } // Invert icon on dark backgrounds @include color-mx.on-dark-background() { - color: var(--post-contrast-color); + color: #000; } } diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss index 05b9f2ea36..dfd6e3c0ba 100644 --- a/packages/styles/src/variables/components/_close.scss +++ b/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: #999 !default; $close-transition: button.$btn-transition !default; // DEPRECATED diff --git a/packages/styles/src/variables/components/_dropdowns.scss b/packages/styles/src/variables/components/_dropdowns.scss index 951d46251b..e2dfb7785c 100644 --- a/packages/styles/src/variables/components/_dropdowns.scss +++ b/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: rgba(255, 255, 255, 0.6) !default; $dropdown-box-shadow: 0 0.5rem 1rem rgba(color.$black, 0.175) !default; $dropdown-link-color: color.$gray-60 !default; diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 344296d172..5daf142f71 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/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: #999; // Design System only $input-border-color: color.$gray-80 !default; $input-border-width: button.$input-btn-border-width !default; diff --git a/packages/styles/src/variables/components/_nav.scss b/packages/styles/src/variables/components/_nav.scss index 8d4f2c7735..6effee884d 100644 --- a/packages/styles/src/variables/components/_nav.scss +++ b/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: rgba(255, 255, 255, 0.4) !default; +$nav-tabs-i-link-hover-bg: rgba(0, 0, 0, 0.1) !default; +$nav-tabs-i-link-hover-border-color: rgba(255, 255, 255, 0.8) !default; $nav-tabs-i-link-text-color: color.$white !default; $nav-tabs-i-link-active-color: color.$white !default; diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index e141e3df44..8d77a85483 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/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: #fff; +$stepper-indicator-hover-bg: #000; $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: #666; -$stepper-link-current-color: var(--post-gray-80); +$stepper-link-current-color: #333; $stepper-link-current-font-weight: type.$font-weight-bold; diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss index d40991e025..64d8a64e55 100644 --- a/packages/styles/src/variables/components/_subnavigation.scss +++ b/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: rgba(0, 0, 0, 0.6); +$subnavigation-link-color-hover: #000; $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: rgba(0, 0, 0, 0.4); $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'); diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss index 7c1aa688af..e67d20cd5d 100644 --- a/packages/styles/src/variables/components/_tables.scss +++ b/packages/styles/src/variables/components/_tables.scss @@ -15,7 +15,7 @@ $table-cell-padding-x: tokens.get('utility-gap-4') !default; $table-cell-padding-y-sm: tokens.get('utility-gap-8') !default; $table-cell-padding-x-sm: tokens.get('utility-gap-4') !default; $table-cell-vertical-align: top !default; -$table-color: var(--post-contrast-color) !default; +$table-color: #000 !default; $table-bg: transparent !default; $table-accent-bg: transparent !default; $table-th-font-weight: type.$font-weight-bold !default; @@ -34,7 +34,7 @@ $table-border-color: color.$gray-10 !default; $table-striped-order: odd !default; $table-striped-columns-order: even !default; $table-group-separator-color: color.$gray-10 !default; -$table-caption-color: var(--post-gray-60) !default; +$table-caption-color: #666 !default; $table-bg-scale: -80% !default; // Custom variables From 44c86636bd97e4fd62334ae8910ebd295dc577a3 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 21 Jan 2025 11:26:05 +0100 Subject: [PATCH 02/14] replace #fff and #000 with css variables --- packages/styles/src/components/card-control.scss | 2 +- packages/styles/src/components/dialog.scss | 2 +- packages/styles/src/components/tabs/_tab-title.scss | 12 ++++++------ .../styles/src/components/tabs/_tabs-wrapper.scss | 8 ++------ packages/styles/src/components/tag.scss | 2 +- packages/styles/src/mixins/_form-checks.scss | 2 +- packages/styles/src/mixins/_forms.scss | 2 +- packages/styles/src/placeholders/_button.scss | 4 ++-- .../styles/src/variables/components/_stepper.scss | 4 ++-- .../src/variables/components/_subnavigation.scss | 2 +- .../styles/src/variables/components/_tables.scss | 2 +- 11 files changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss index 5f8a989779..d5a4a8c8c4 100644 --- a/packages/styles/src/components/card-control.scss +++ b/packages/styles/src/components/card-control.scss @@ -57,7 +57,7 @@ fieldset { @include utilities-mx.focus-style-none(); &:hover:not([disabled]) ~ label { - color: #000; + color: var(--post-core-color-brand-black); background-color: transparent !important; } diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss index 9a7b9420b1..a5455c39c2 100644 --- a/packages/styles/src/components/dialog.scss +++ b/packages/styles/src/components/dialog.scss @@ -21,7 +21,7 @@ dialog { overflow: auto; margin: revert; overscroll-behavior: contain; - border: 2px solid #000; // Ensures good contrast when bg is dark against dark backdrop + border: 2px solid var(--post-core-color-brand-black); // Ensures good contrast when bg is dark against dark backdrop &::backdrop { background-color: rgba(0, 0, 0, 0.8); diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss index 3893540a53..e98d384e7c 100644 --- a/packages/styles/src/components/tabs/_tab-title.scss +++ b/packages/styles/src/components/tabs/_tab-title.scss @@ -22,19 +22,19 @@ tokens.$default-map: utilities.$post-spacing; border-left: 1px solid transparent; outline-color: currentColor; opacity: 0.7; - color: #000; + color: var(--post-core-color-brand-black); text-decoration: none; background-color: transparent; &:focus { background-color: unset; - color: #000; + color: var(--post-core-color-brand-black); } &:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.6); - color: #fff; + color: var(--post-core-color-brand-white); } // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition @@ -42,7 +42,7 @@ tokens.$default-map: utilities.$post-spacing; outline: transparent; opacity: 1; background-color: rgba(0, 0, 0, 0.6); - color: #fff; + color: var(--post-core-color-brand-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: #fff; - color: #000; + background-color: var(--post-core-color-brand-white); + color: var(--post-core-color-brand-black); font-weight: 700; // Create a line that does not suffer from border corner mitering diff --git a/packages/styles/src/components/tabs/_tabs-wrapper.scss b/packages/styles/src/components/tabs/_tabs-wrapper.scss index e497721ac7..bd68a86b52 100644 --- a/packages/styles/src/components/tabs/_tabs-wrapper.scss +++ b/packages/styles/src/components/tabs/_tabs-wrapper.scss @@ -9,12 +9,8 @@ position: relative; padding-top: spacing.$spacer; border: 0; - background-color: rgba( - 0, - 0, - 0, - 0.02 - ); // 0.02 gets as close as possible to color.$light on white background + // 0.02 gets as close as possible to color.$light on white background + background-color: rgba(0, 0, 0, 0.02); // Create a line that lies below the active but above the passive elements // This way hover works smoothly with the background color diff --git a/packages/styles/src/components/tag.scss b/packages/styles/src/components/tag.scss index dc6ad1999a..f277861247 100644 --- a/packages/styles/src/components/tag.scss +++ b/packages/styles/src/components/tag.scss @@ -63,7 +63,7 @@ } &.tag-white { - border-color: #000; + border-color: var(--post-core-color-brand-black); } // Can be removed completely as soon as Firefox ESR v128 is released and rolled out diff --git a/packages/styles/src/mixins/_form-checks.scss b/packages/styles/src/mixins/_form-checks.scss index d68f0dad5f..cefebaff29 100644 --- a/packages/styles/src/mixins/_form-checks.scss +++ b/packages/styles/src/mixins/_form-checks.scss @@ -6,7 +6,7 @@ border-color: $color; ~ .form-check-label { - color: #000; + color: var(--post-core-color-brand-black); } } diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 1e58a321d6..4dfc7bf88d 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -26,7 +26,7 @@ /* Compatibility with button-group */ &:is(:focus-visible, :focus-within, .pretend-focus) { - outline: forms.$input-focus-outline-thickness solid #000; + outline: forms.$input-focus-outline-thickness solid var(--post-core-color-brand-black); @content; } } diff --git a/packages/styles/src/placeholders/_button.scss b/packages/styles/src/placeholders/_button.scss index f0974b6b44..0c636ca319 100644 --- a/packages/styles/src/placeholders/_button.scss +++ b/packages/styles/src/placeholders/_button.scss @@ -4,11 +4,11 @@ %btn-transparent-background { @include utilities.not-disabled-focus-hover() { - color: #000; + color: var(--post-core-color-brand-black); } // Invert icon on dark backgrounds @include color-mx.on-dark-background() { - color: #000; + color: var(--post-core-color-brand-black); } } diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 8d77a85483..3b998038ec 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/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: #fff; -$stepper-indicator-hover-bg: #000; +$stepper-indicator-hover-color: var(--post-core-color-white-black); +$stepper-indicator-hover-bg: var(--post-core-color-brand-black); $stepper-indicator-future-bg: color.$gray-60; $stepper-indicator-future-color: color.$white; diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss index 64d8a64e55..2f6bbeb9c6 100644 --- a/packages/styles/src/variables/components/_subnavigation.scss +++ b/packages/styles/src/variables/components/_subnavigation.scss @@ -22,7 +22,7 @@ $subnavigation-height-lg: sizing.px-to-rem(64); $subnavigation-height-xl: sizing.px-to-rem(72); $subnavigation-link-color: rgba(0, 0, 0, 0.6); -$subnavigation-link-color-hover: #000; +$subnavigation-link-color-hover: var(--post-core-color-brand-black); $subnavigation-link-underscore-height: tokens.get('utility-gap-4'); $subnavigation-link-underscore-color-active: color.$yellow; diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss index e67d20cd5d..1e55f1cf9d 100644 --- a/packages/styles/src/variables/components/_tables.scss +++ b/packages/styles/src/variables/components/_tables.scss @@ -15,7 +15,7 @@ $table-cell-padding-x: tokens.get('utility-gap-4') !default; $table-cell-padding-y-sm: tokens.get('utility-gap-8') !default; $table-cell-padding-x-sm: tokens.get('utility-gap-4') !default; $table-cell-vertical-align: top !default; -$table-color: #000 !default; +$table-color: var(--post-core-color-brand-black) !default; $table-bg: transparent !default; $table-accent-bg: transparent !default; $table-th-font-weight: type.$font-weight-bold !default; From d903b54088c8614577b04112059fa5030c64eefb Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 21 Jan 2025 11:29:07 +0100 Subject: [PATCH 03/14] change hex to var --- .../src/components/post-card-control/post-card-control.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss index a7464a9671..76d112530c 100644 --- a/packages/components/src/components/post-card-control/post-card-control.scss +++ b/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: #000; + color: var(--post-core-color-brand-black); background-color: transparent; } From ef6dc2557fbe5541e4ab5e29214e2e0950d3220f Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 21 Jan 2025 11:40:20 +0100 Subject: [PATCH 04/14] change hex code to css vars for docs --- .../documentation/.storybook/styles/manager.scss | 13 +++++++------ .../documentation/.storybook/styles/preview.scss | 4 ++-- .../icons/search/search-icons.styles.scss | 10 +++++----- .../foundations/typography/typography.styles.scss | 6 +++--- .../misc/migration-guide/shared.component.scss | 4 ++-- 5 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss index 75a7d705cc..2367afb25d 100644 --- a/packages/documentation/.storybook/styles/manager.scss +++ b/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: #e6e6e6; + background-color: post.$gray-10; } } @@ -77,7 +78,7 @@ } &[data-nodetype='group'] svg { - color: #666; + color: post.$gray-60; } &[data-nodetype='component'] svg { color: #0076a8; @@ -90,8 +91,8 @@ } &[data-selected='true'] { - background-color: rgba(#fc0, 0.4); - color: #000; + background-color: rgba(post.$yellow, 0.4); + color: post.$black; } } @@ -137,7 +138,7 @@ .search-result-item--label { span { - color: #666; + color: post.$gray-60; } mark { @@ -147,7 +148,7 @@ &:hover, &:focus-visible { - background-color: #e6e6e6; + background-color: post.$gray-10; } } } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 6d6305b23e..39df45099b 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -131,8 +131,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier [data-color-scheme='dark'] { code { - background-color: rgba(#000, 0.75); - border-color: rgba(#fff, 0.3); + background-color: rgba(post.$black, 0.75); + border-color: rgba(post.$white, 0.3); } } diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss index 73d6bbb2dd..84cf7efc59 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss +++ b/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 #ccc; + 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: #fff; + 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: #e6e6e6; - border-top: post.$border-width solid #ccc; + 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: #666; + color: post.$gray-60; hyphens: auto; } } diff --git a/packages/documentation/src/stories/foundations/typography/typography.styles.scss b/packages/documentation/src/stories/foundations/typography/typography.styles.scss index 2e1d74a219..14e15e86c4 100644 --- a/packages/documentation/src/stories/foundations/typography/typography.styles.scss +++ b/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: #666; + 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: #333; + color: post.$gray-80; > span { - color: #666; + color: post.$gray-60; } } } diff --git a/packages/documentation/src/stories/misc/migration-guide/shared.component.scss b/packages/documentation/src/stories/misc/migration-guide/shared.component.scss index e3ce8f89b8..db963540a9 100644 --- a/packages/documentation/src/stories/misc/migration-guide/shared.component.scss +++ b/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 #e6e6e6; - border-bottom: 1px solid #e6e6e6; + border-top: 1px solid post.$gray-10; + border-bottom: 1px solid post.$gray-10; > .row { --bs-gutter-y: 1.5rem; From 503929ec559cbc8b5f5ad8ef95f3504deb30cca5 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 21 Jan 2025 11:42:05 +0100 Subject: [PATCH 05/14] quick fix --- packages/documentation/.storybook/styles/preview.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 39df45099b..9ab26ec2ef 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -124,15 +124,15 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier display: block; margin-top: 0.25rem; padding: 1rem; - background-color: #000; - color: #fff; + background-color: post.$black; + color: post.$white; } } [data-color-scheme='dark'] { code { - background-color: rgba(post.$black, 0.75); - border-color: rgba(post.$white, 0.3); + background-color: rgba(#000, 0.75); + border-color: rgba(#fff, 0.3); } } From 8073aace3885fae6be058474fc3d1a26f03efb7b Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:32:14 +0100 Subject: [PATCH 06/14] Update packages/styles/src/variables/components/_tables.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_tables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss index 1e55f1cf9d..508c9a541d 100644 --- a/packages/styles/src/variables/components/_tables.scss +++ b/packages/styles/src/variables/components/_tables.scss @@ -15,7 +15,7 @@ $table-cell-padding-x: tokens.get('utility-gap-4') !default; $table-cell-padding-y-sm: tokens.get('utility-gap-8') !default; $table-cell-padding-x-sm: tokens.get('utility-gap-4') !default; $table-cell-vertical-align: top !default; -$table-color: var(--post-core-color-brand-black) !default; +$table-color: color.$black !default; $table-bg: transparent !default; $table-accent-bg: transparent !default; $table-th-font-weight: type.$font-weight-bold !default; From 65b3855beffbb1c4ac4eca531aa20ecf66d0d97f Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:32:21 +0100 Subject: [PATCH 07/14] Update packages/styles/src/variables/components/_tables.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_tables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss index 508c9a541d..9c80f2eafd 100644 --- a/packages/styles/src/variables/components/_tables.scss +++ b/packages/styles/src/variables/components/_tables.scss @@ -34,7 +34,7 @@ $table-border-color: color.$gray-10 !default; $table-striped-order: odd !default; $table-striped-columns-order: even !default; $table-group-separator-color: color.$gray-10 !default; -$table-caption-color: #666 !default; +$table-caption-color: color.$gray-60 !default; $table-bg-scale: -80% !default; // Custom variables From 4617750b1b3e69dd24dc2e64a7c8a8ab11cd8f03 Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:32:28 +0100 Subject: [PATCH 08/14] Update packages/styles/src/variables/components/_subnavigation.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_subnavigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss index 2f6bbeb9c6..b2612b5663 100644 --- a/packages/styles/src/variables/components/_subnavigation.scss +++ b/packages/styles/src/variables/components/_subnavigation.scss @@ -26,7 +26,7 @@ $subnavigation-link-color-hover: var(--post-core-color-brand-black); $subnavigation-link-underscore-height: tokens.get('utility-gap-4'); $subnavigation-link-underscore-color-active: color.$yellow; -$subnavigation-link-underscore-color-hover: rgba(0, 0, 0, 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'); From 88f31210b60eab8ad6c2f90433be22b2fdca46aa Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:32:35 +0100 Subject: [PATCH 09/14] Update packages/styles/src/variables/components/_subnavigation.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_subnavigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss index b2612b5663..0e81405283 100644 --- a/packages/styles/src/variables/components/_subnavigation.scss +++ b/packages/styles/src/variables/components/_subnavigation.scss @@ -21,7 +21,7 @@ $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(0, 0, 0, 0.6); +$subnavigation-link-color: color.$black-alpha-60; $subnavigation-link-color-hover: var(--post-core-color-brand-black); $subnavigation-link-underscore-height: tokens.get('utility-gap-4'); From 264103667ec5f1c2b5188c4964a5fb277c51f69e Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:32:44 +0100 Subject: [PATCH 10/14] Update packages/styles/src/variables/components/_stepper.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_stepper.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 3b998038ec..47a1d0654a 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -38,5 +38,5 @@ $stepper-link-gap: tokens.get('utility-gap-8'); $stepper-link-spacing: tokens.get('utility-gap-16'); $stepper-link-color: #666; -$stepper-link-current-color: #333; +$stepper-link-current-color: color.$gray-80; $stepper-link-current-font-weight: type.$font-weight-bold; From a66d75c9388fcf131f504d388b48bdc5975d5730 Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:32:53 +0100 Subject: [PATCH 11/14] Update packages/styles/src/variables/components/_subnavigation.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_subnavigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss index 0e81405283..472873986e 100644 --- a/packages/styles/src/variables/components/_subnavigation.scss +++ b/packages/styles/src/variables/components/_subnavigation.scss @@ -22,7 +22,7 @@ $subnavigation-height-lg: sizing.px-to-rem(64); $subnavigation-height-xl: sizing.px-to-rem(72); $subnavigation-link-color: color.$black-alpha-60; -$subnavigation-link-color-hover: var(--post-core-color-brand-black); +$subnavigation-link-color-hover: color.$black; $subnavigation-link-underscore-height: tokens.get('utility-gap-4'); $subnavigation-link-underscore-color-active: color.$yellow; From 9bc08fbee73c52769f8a1f8f48b7bb1886b3258f Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 11:33:02 +0100 Subject: [PATCH 12/14] Update packages/styles/src/variables/components/_stepper.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/styles/src/variables/components/_stepper.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 47a1d0654a..40430ba305 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -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: #666; +$stepper-link-color: color.$gray-60; $stepper-link-current-color: color.$gray-80; $stepper-link-current-font-weight: type.$font-weight-bold; From dd04fbb2be9d448e0dcdaa685528528fb64786ba Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 22 Jan 2025 12:00:47 +0100 Subject: [PATCH 13/14] switch all to sass variables --- .changeset/cyan-days-kiss.md | 2 +- .../post-card-control/post-card-control.scss | 2 +- .../src/lib/primeng-theme/_variables.scss | 2 +- packages/styles/src/_svg-icon-map.scss | 16 ---------------- packages/styles/src/components/card-control.scss | 2 +- packages/styles/src/components/datepicker.scss | 4 ++-- packages/styles/src/components/dialog.scss | 2 +- .../styles/src/components/tabs/_tab-title.scss | 16 ++++++++-------- .../src/components/tabs/_tabs-wrapper.scss | 6 ++++-- packages/styles/src/components/tag.scss | 2 +- packages/styles/src/mixins/_form-checks.scss | 2 +- packages/styles/src/mixins/_forms.scss | 3 ++- packages/styles/src/placeholders/_button.scss | 5 +++-- .../styles/src/variables/components/_close.scss | 2 +- .../src/variables/components/_dropdowns.scss | 2 +- .../styles/src/variables/components/_forms.scss | 2 +- .../styles/src/variables/components/_nav.scss | 6 +++--- .../src/variables/components/_stepper.scss | 4 ++-- 18 files changed, 34 insertions(+), 46 deletions(-) diff --git a/.changeset/cyan-days-kiss.md b/.changeset/cyan-days-kiss.md index 5922e99ff1..25c13a0ebc 100644 --- a/.changeset/cyan-days-kiss.md +++ b/.changeset/cyan-days-kiss.md @@ -5,4 +5,4 @@ '@swisspost/design-system-styles': patch --- -Replaced previously deleted CSS variables with color values. +Replaced previously deleted CSS variables with SASS variables. diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss index 76d112530c..cb8dfdda7d 100644 --- a/packages/components/src/components/post-card-control/post-card-control.scss +++ b/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-core-color-brand-black); + color: post.$black; background-color: transparent; } diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss index d4a0af857a..88cc6a6a41 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss +++ b/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: #000 !default; //text color +$shade900: post.$black !default; //text color //global $borderRadius: post.$border-radius !default; diff --git a/packages/styles/src/_svg-icon-map.scss b/packages/styles/src/_svg-icon-map.scss index 68690d580b..e836b102ec 100644 --- a/packages/styles/src/_svg-icon-map.scss +++ b/packages/styles/src/_svg-icon-map.scss @@ -563,22 +563,6 @@ $svg-icon-map: ( "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E", '2642': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.05 8.97-7.24 7.24a3.167 3.167 0 0 1-4.46 0l-1.91-1.96.95-.93 1.9 1.95c.7.7 1.86.7 2.57 0l7.24-7.24c.71-.71.71-1.86 0-2.57l-1.83-1.88c-.7-.7-1.85-.7-2.57 0l-4.98 4.98-.94-.94 4.98-4.98a3.157 3.157 0 0 1 4.46 0l1.83 1.88c1.22 1.22 1.22 3.22 0 4.45M7.22 23.13c-.71.71-1.86.71-2.57 0l-1.83-1.88c-.34-.34-.53-.8-.53-1.29s.19-.94.53-1.29l7.24-7.24c.69-.69 1.89-.68 2.57 0l1.9 1.95.95-.93-1.91-1.95c-1.19-1.19-3.27-1.19-4.46 0l-7.24 7.24c-.6.6-.92 1.39-.92 2.23s.33 1.63.92 2.22l1.83 1.88a3.167 3.167 0 0 0 4.46 0l4.98-4.98-.94-.94zm22.77-.49h-6.01V16.7h-1.33v5.94h-5.99v1.33h5.99v6.01h1.33v-6.01h6.01z'/%3E%3C/svg%3E", - '2641': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.65 3.25 28.76.36a1.204 1.204 0 0 0-1.7 0L0 27.4l4.59 4.59L31.65 4.95c.47-.47.47-1.23 0-1.7M1.89 27.4 24.01 5.29l2.7 2.7L4.6 30.11l-2.7-2.7ZM29.2 5.52l-2.7-2.7 1.42-1.42 2.7 2.7zm-4.78 11.41-1.73 3.2-3.2 1.73 3.2 1.73 1.73 3.2 1.73-3.2 3.2-1.73-3.2-1.73zm.74 5.66-.74 1.37-.74-1.37-1.37-.74 1.37-.74.74-1.37.74 1.37 1.37.74zM7.73 17.64l1.73-3.2 3.2-1.73-3.2-1.73-1.73-3.2L6 10.98l-3.2 1.73L6 14.44zm-.74-5.67.74-1.37.74 1.37 1.37.74-1.37.74-.74 1.37-.74-1.37-1.37-.74zM13 9.84l1.73-3.2 3.2-1.73-3.2-1.73L13 0l-1.73 3.2-3.2 1.73 3.2 1.73L13 9.86Zm-.74-5.66L13 2.81l.74 1.37 1.37.74-1.37.74L13 7.03l-.74-1.37-1.37-.74z'/%3E%3C/svg%3E", - '2640': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.59 19.45h1.33v5.22h-1.33zm-8-10.7c0-2.25 1.83-4.08 4.08-4.08s4.08 1.83 4.08 4.08-1.83 4.08-4.08 4.08-4.08-1.83-4.08-4.08m1.33 0c0 1.51 1.23 2.75 2.75 2.75s2.75-1.23 2.75-2.75S24.19 6 22.67 6s-2.75 1.23-2.75 2.75m7.62 5.45h-8.42c-2.28 0-4.15 1.85-4.4 4.22H5.88A5.89 5.89 0 0 0 0 24.3v7.71h1.33V24.3c0-2.51 2.04-4.55 4.54-4.55h11.58c2.51 0 4.55 2.04 4.55 4.55v7.71h1.33V24.3a5.89 5.89 0 0 0-5.88-5.88h-1.4c.24-1.63 1.52-2.89 3.07-2.89h8.42c1.72 0 3.12 1.54 3.12 3.44v5.7h1.33v-5.7c0-2.63-2-4.77-4.46-4.77ZM5.18 32h1.33v-8H5.18zm11.64 0h1.33v-8h-1.33zM6.49 11.32a5.181 5.181 0 0 1 10.36 0 5.181 5.181 0 0 1-10.36 0m1.33 0a3.841 3.841 0 0 0 7.68 0 3.841 3.841 0 0 0-7.68 0'/%3E%3C/svg%3E", - '2639': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.37 21.37c0-2.59-2.11-4.7-4.7-4.7h-9.33c-2.59 0-4.7 2.11-4.7 4.7v5.96H5.31v-5.96c0-3.33 2.71-6.04 6.04-6.04h9.33c3.33 0 6.04 2.71 6.04 6.04v5.96h-1.33v-5.96Zm-14.74 5.96h1.33v-6.67h-1.33zm9.41 0h1.33v-6.67h-1.33zM10.67 8c0-2.95 2.39-5.33 5.33-5.33S21.33 5.06 21.33 8s-2.39 5.33-5.33 5.33-5.33-2.39-5.33-5.33M12 8c0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4-4 1.79-4 4M1.33 1.33h6V0H0v7.33h1.33zm0 23.34H0V32h7.33v-1.33h-6zM24.67 0v1.33h6v6H32V0zm6 30.67h-6V32H32v-7.33h-1.33z'/%3E%3C/svg%3E", - '2638': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h5.33v10.67H0v-1.33h4v-8H0v-1.33Zm30.58-7.95c0 5.55-4.25 10.09-9.68 10.57-.23-.51-.59-.95-1.05-1.29h.1c1.72 0 3.33-.48 4.71-1.3v-3.09l-2-2V11.8l1.64-2.46h4.53c-.09-.28-.19-.56-.3-.83l-3.87-.89-1.63-1.63-.31-2.79c-.87-.27-1.8-.42-2.76-.42-1.1 0-2.15.2-3.14.56l1.91 2.54-1.54 6.15h-3.04l.49 2.45 1.51 3.02-1.23 1.23c-.6-.14-1.22-.15-1.85-.04-.13.02-.26.03-.39.06l-.8.21c-1.58-1.86-2.55-4.26-2.55-6.89 0-5.87 4.76-10.62 10.62-10.62 4.18 0 7.78 2.42 9.51 5.92h.01v.02c.7 1.41 1.1 3 1.1 4.68ZM15.57 3.86c-2.91 1.57-4.9 4.65-4.9 8.18 0 2.49.99 4.75 2.59 6.42l1.26-1.26-1.18-2.4-.83-4.13h3.63l1.13-4.52-1.71-2.28ZM27.7 6.94a9.3 9.3 0 0 0-3.58-3.18l.18 1.6 1.03 1.03zm1.54 5.11c0-.47-.05-.93-.11-1.38h-4.1l-1.02 1.54v2.19l2 2v2.69a9.25 9.25 0 0 0 3.24-7.04ZM27.4 24.17c.55.95.22 2.18-.73 2.73l-8.06 4.65a3.26 3.26 0 0 1-2.53.33l-7.96-2.13a2 2 0 0 1-1.48-1.93v-4.57c0-.9.61-1.7 1.48-1.93L13.03 20c.29-.08.58-.11.87-.11.58 0 1.15.15 1.66.45l3.32 1.92c.95.55 1.28 1.78.73 2.73-.27.46-.7.79-1.21.93a1.98 1.98 0 0 1-1.52-.2l-2.19-1.27a.67.67 0 0 0-.91.24c-.06.1-.09.22-.09.33 0 .06 0 .12.02.17.05.17.16.32.31.4l3.11 1.79a.66.66 0 0 0 .66 0l6.88-3.97a1.97 1.97 0 0 1 1.51-.2c.52.14.95.47 1.21.93Zm-1.16.67a.62.62 0 0 0-.4-.31c-.06-.02-.12-.02-.18-.02a.6.6 0 0 0-.32.09l-6.88 3.97c-.31.18-.65.27-1 .27s-.69-.09-1-.26l-3.11-1.8a2.02 2.02 0 0 1-1-1.73c0-.35.09-.7.27-1a2.005 2.005 0 0 1 2.72-.74l2.2 1.27q.15.09.33.09c.06 0 .12 0 .18-.02a.62.62 0 0 0 .4-.31c.19-.32.08-.73-.24-.91l-3.32-1.91a1.97 1.97 0 0 0-1.52-.2l-4.9 1.31c-.29.08-.49.34-.49.64v4.57c0 .3.2.57.49.64l7.96 2.13a1.98 1.98 0 0 0 1.52-.2l8.06-4.65c.32-.18.43-.59.24-.91Z'/%3E%3C/svg%3E", - '2637': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.32 14.39h-.02c.02-.19.04-.37.04-.56l-.02-4.48h-.05c.02-.19.04-.39.04-.59 0-4.84-5.95-8.78-13.3-8.78S2.71 3.92 2.71 8.77c0 .15.02.31.04.46h-.07s.07 3.92.07 4.6c0 .15.02.29.03.43h-.1s.06 3.2.07 4.32h-.07s.07 3.92.07 4.6c0 4.86 5.95 8.79 13.3 8.79s13.3-3.94 13.3-8.79c0 0-.01-2.93-.02-4.05 0-.09.02-.18.02-.27l-.02-4.48ZM16.01 1.32c6.49 0 11.97 3.42 11.97 7.46s-5.48 7.46-11.97 7.46S4.04 12.82 4.04 8.78s5.48-7.46 11.97-7.46m0 16.25c5.3 0 9.86-2.05 12-5.02v1.29c0 4.04-5.48 7.46-11.97 7.46S4.07 17.88 4.07 13.84c0-.2 0-.67-.01-1.22 2.16 2.93 6.69 4.95 11.95 4.95m.03 5.06c5.27 0 9.82-2.03 11.97-4.98v1.22c0 4.04-5.48 7.46-11.97 7.46S4.07 22.91 4.07 18.87c0-.2 0-.68-.01-1.24 2.14 2.95 6.7 5 11.98 5m11.97.1v.46c0 4.04-5.48 7.46-11.97 7.46S4.07 27.23 4.07 23.19v-.51c2.15 2.95 6.69 4.99 11.97 4.99s9.82-2.04 11.97-4.98v.05ZM14.45 12.3l-3.6-3.61.94-.94 2.66 2.67 5.79-5.81.94.94z'/%3E%3C/svg%3E", - '2636': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.99 6.66c1.84 0 3.33-1.49 3.33-3.33S17.83-.01 15.99-.01s-3.33 1.49-3.33 3.33 1.49 3.33 3.33 3.33Zm0-5.34c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m13.24 1.17-.35-.55-9.3 5.68h-5.97l-9.95 9.89.44.47s1.01 1.06 2.44 1.07h.01c.98 0 1.92-.46 2.75-1.34.15-.14 1.73-1.37 3.49-2.74l.03 4.22-4.66 12.8h4.01l4.61-9.93 1.63-.56-2.72 10.49h3.65l4.89-14.33c.15-.45.06-.93-.24-1.29s-.75-.55-1.24-.48l-3.33.53.37-3.75c1.1-.74 5.45-3.67 7.86-5.21 1.71-1.09 2.06-2.37 2.05-3.26 0-.95-.42-1.63-.47-1.7Zm-2.3 3.84c-2.79 1.78-8.1 5.37-8.15 5.41l-.26.18-.6 6.09 5.04-.78-4.58 13.43h-.97l2.91-11.22-4.51 1.55-4.49 9.67h-1.25l4.09-11.24-.04-5.49c.56-.43 1.1-.86 1.6-1.24l-.82-1.05c-6.37 4.95-6.49 5.08-6.54 5.12-.6.63-1.2.95-1.8.95-.37 0-.7-.12-.95-.26l8.56-8.51h5.79l8.38-5.11c.12.62 0 1.6-1.4 2.49Z'/%3E%3C/svg%3E", - '2635': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.94 16.97h-16.4V2.19c0-1.19-.96-2.16-2.15-2.16H2.19C1.01.03.04 1 .04 2.19V24.5c0 1.19.97 2.16 2.16 2.16h9.14v5.33h20.6V16.98Zm-1.33 12.64-4.97-5.34 4.97-5.39zM20 26.83a2.185 2.185 0 0 0 3.28 0l1.46-1.58 5.03 5.4H13.52l5.03-5.4 1.46 1.58Zm9.33-8.52-7.05 7.65c-.22.25-.5.29-.64.29s-.42-.04-.66-.31l-5.43-5.89v-1.74h13.79ZM2.19 1.36h11.19c.46 0 .83.37.83.83V21H1.37V2.19c0-.46.37-.83.83-.83ZM1.37 24.5v-2.17h12.85v2.17c0 .46-.37.83-.83.83H2.19c-.46 0-.83-.37-.83-.83Zm11.29 2.16h.72c1.19 0 2.16-.97 2.16-2.16v-2.49l2.09 2.27-4.97 5.34zm-5.92-3.44h2.22v1.33H6.74zm-.06-8.94-3.13-3.13.94-.94 2.19 2.19 4.85-4.85.94.94-5.79 5.8Z'/%3E%3C/svg%3E", - '2634': - "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m29.04 19.13 1.5 1.17 1.43-2.71-.84-.96.6-2.64-1.4-1.28-1.84 1.55-1.29-1.34-2.02-.3L26.29 10l-4.57-2.77-1.74-.31-1.38-1.45-2.24 1.4.15.87-1.58.08-2.09.61-1.59-.22-2.12 1.28-.93-.62-2.34 1.4.76 1.49-.98 1.32-2.43 1.46.1 1.51L1.09 18l-.41 2.04.38.56-1.04.78v2.33h3.56l1.06-2.33.73-.65.66.03-.11 1.98 2.17 3.22 3.37-1.22 2.26.69 2.46-2.76-.48-1.09 1.2-1 .81 2.46 1.39.65-.22.95 1.57 1.92 2.15-1.18v-1.44l1.1-4.22.22.04.02 1.57 1.71.61 1.46.33 1.03 1 1.58-1.08v-1.86l-.8-.84.07-.32.07-.02Zm-.39-1.28-.07.02-.74.22-.17.75-.07.32-.16.7.49.52.43.46v.63l-.1.07-.25-.24-.27-.26-.37-.08-1.38-.31-.76-.27v-.65l-.03-1.12-1.11-.18-.22-.04-1.19-.19-.31 1.17-1.1 4.22-.04.17v.82l-.49.27-.45-.55.07-.3.25-1.05-.98-.46-.87-.41-.63-1.92-.61-1.87-1.51 1.26-1.2 1-.77.64.4.92.13.31-1.33 1.49-1.45-.44-.42-.13-.42.15-2.39.86-1.34-1.99.08-1.54.07-1.34-1.35-.06-.66-.03-.55-.02-.41.37-.73.65-.21.19-.12.25-.7 1.55H1.27v-.33l.51-.38 1.02-.76-.72-1.05-.07-.1.21-1.05 1.88-1.65.5-.44-.05-.66-.05-.69 1.73-1.04.23-.14.16-.21.98-1.32.49-.66-.37-.73-.19-.38.55-.33.23.15.7.47.72-.44 1.72-1.03 1.13.16.28.04.27-.08 1.94-.56 1.43-.07 1.5-.08-.25-1.47.56-.35.63.66.3.32.43.08 1.5.27 3.37 2.04-.66 1.55-.67 1.58 1.7.26 1.57.24.98 1.02.86.9.95-.8.89-.75-.41 1.8-.15.66.45.51.24.27-.26.49-.24-.19-.54-.43-.66.2Zm-9.67-6.22.94.94-4.65 4.65-2.56-2.56.94-.94 1.62 1.62z'/%3E%3C/svg%3E", '2633': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.35 2.67c3.18 0 8.44 2.49 11.16 4.25 2.45 1.59 6.62 5.07 7.82 7.51.69 1.4.33 2.27-1.03 4-3.65 4.68-10.88 9.13-16.44 10.14-.62.11-1.11.17-1.5.17-.86 0-1.43-.1-2.22-2.06C4.77 20.8 5.01 11.67 6.6 6.23c.88-3.01 1.71-3.46 2.02-3.51.22-.04.47-.06.74-.06m-.01-1.33c-.34 0-.66.02-.96.07-1.74.29-2.64 2.96-3.08 4.45-1.77 6.04-1.79 15.43.59 21.32.85 2.12 1.76 2.89 3.46 2.89.5 0 1.08-.07 1.74-.19 6.01-1.09 13.51-5.84 17.26-10.63 1.36-1.75 2.25-3.22 1.17-5.41-1.34-2.72-5.74-6.38-8.29-8.04-2.7-1.75-8.27-4.46-11.88-4.46Z'/%3E%3C/svg%3E", '2632': diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss index d5a4a8c8c4..f8a62b2710 100644 --- a/packages/styles/src/components/card-control.scss +++ b/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-core-color-brand-black); + color: color.$black; background-color: transparent !important; } diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss index db5e0934ae..8438384c30 100644 --- a/packages/styles/src/components/datepicker.scss +++ b/packages/styles/src/components/datepicker.scss @@ -13,7 +13,7 @@ ngb-datepicker { // Conversion for compatibility - --bs-light: #faf9f8; + --bs-light: color.$light; } ngb-datepicker.dropdown-menu { @@ -75,7 +75,7 @@ span.ngb-dp-navigation-chevron { } .ngb-dp-weekday { - color: rgba(0, 0, 0, 0.6) !important; + color: color.$black-alpha-60 !important; font-size: 1rem; font-style: normal !important; line-height: type.$line-height-copy !important; diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss index a5455c39c2..de101e49cd 100644 --- a/packages/styles/src/components/dialog.scss +++ b/packages/styles/src/components/dialog.scss @@ -21,7 +21,7 @@ dialog { overflow: auto; margin: revert; overscroll-behavior: contain; - border: 2px solid var(--post-core-color-brand-black); // 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); diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss index e98d384e7c..256a6e1053 100644 --- a/packages/styles/src/components/tabs/_tab-title.scss +++ b/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-core-color-brand-black); + color: color.$black; text-decoration: none; background-color: transparent; &:focus { background-color: unset; - color: var(--post-core-color-brand-black); + color: color.$black; } &:hover { opacity: 1; - background-color: rgba(0, 0, 0, 0.6); - color: var(--post-core-color-brand-white); + 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(0, 0, 0, 0.6); - color: var(--post-core-color-brand-white); + 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-core-color-brand-white); - color: var(--post-core-color-brand-black); + background-color: color.$white; + color: color.$black; font-weight: 700; // Create a line that does not suffer from border corner mitering diff --git a/packages/styles/src/components/tabs/_tabs-wrapper.scss b/packages/styles/src/components/tabs/_tabs-wrapper.scss index bd68a86b52..949277f293 100644 --- a/packages/styles/src/components/tabs/_tabs-wrapper.scss +++ b/packages/styles/src/components/tabs/_tabs-wrapper.scss @@ -9,8 +9,10 @@ position: relative; padding-top: spacing.$spacer; border: 0; - // 0.02 gets as close as possible to color.$light on white background - background-color: rgba(0, 0, 0, 0.02); + background-color: rgba( + color.$black, + 0.02 + ); // 0.02 gets as close as possible to color.$light on white background // Create a line that lies below the active but above the passive elements // This way hover works smoothly with the background color diff --git a/packages/styles/src/components/tag.scss b/packages/styles/src/components/tag.scss index f277861247..a981795dfd 100644 --- a/packages/styles/src/components/tag.scss +++ b/packages/styles/src/components/tag.scss @@ -63,7 +63,7 @@ } &.tag-white { - border-color: var(--post-core-color-brand-black); + border-color: color.$black; } // Can be removed completely as soon as Firefox ESR v128 is released and rolled out diff --git a/packages/styles/src/mixins/_form-checks.scss b/packages/styles/src/mixins/_form-checks.scss index cefebaff29..862930a2e0 100644 --- a/packages/styles/src/mixins/_form-checks.scss +++ b/packages/styles/src/mixins/_form-checks.scss @@ -6,7 +6,7 @@ border-color: $color; ~ .form-check-label { - color: var(--post-core-color-brand-black); + color: color.$black; } } diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 4dfc7bf88d..8be79122e3 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/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-core-color-brand-black); + outline: forms.$input-focus-outline-thickness solid color.$black; @content; } } diff --git a/packages/styles/src/placeholders/_button.scss b/packages/styles/src/placeholders/_button.scss index 0c636ca319..8410f136e4 100644 --- a/packages/styles/src/placeholders/_button.scss +++ b/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-core-color-brand-black); + color: color.$black; } // Invert icon on dark backgrounds @include color-mx.on-dark-background() { - color: var(--post-core-color-brand-black); + color: color.$black; } } diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss index dfd6e3c0ba..4ee8350d9d 100644 --- a/packages/styles/src/variables/components/_close.scss +++ b/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: #999 !default; +$close-disabled-color: color.$gray-40 !default; $close-transition: button.$btn-transition !default; // DEPRECATED diff --git a/packages/styles/src/variables/components/_dropdowns.scss b/packages/styles/src/variables/components/_dropdowns.scss index e2dfb7785c..de22703b11 100644 --- a/packages/styles/src/variables/components/_dropdowns.scss +++ b/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(255, 255, 255, 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; diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 5daf142f71..c1d8276a52 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/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: #999; // 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; diff --git a/packages/styles/src/variables/components/_nav.scss b/packages/styles/src/variables/components/_nav.scss index 6effee884d..c83512d242 100644 --- a/packages/styles/src/variables/components/_nav.scss +++ b/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(255, 255, 255, 0.4) !default; -$nav-tabs-i-link-hover-bg: rgba(0, 0, 0, 0.1) !default; -$nav-tabs-i-link-hover-border-color: rgba(255, 255, 255, 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; diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 40430ba305..3a1008f78f 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/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-core-color-white-black); -$stepper-indicator-hover-bg: var(--post-core-color-brand-black); +$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; From d754f0e39a011c8cf00e1e2c86ce3d56c529c5cb Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 22 Jan 2025 12:05:09 +0100 Subject: [PATCH 14/14] fix changes on svg-icon-map --- packages/styles/src/_svg-icon-map.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/styles/src/_svg-icon-map.scss b/packages/styles/src/_svg-icon-map.scss index e836b102ec..68690d580b 100644 --- a/packages/styles/src/_svg-icon-map.scss +++ b/packages/styles/src/_svg-icon-map.scss @@ -563,6 +563,22 @@ $svg-icon-map: ( "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E", '2642': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.05 8.97-7.24 7.24a3.167 3.167 0 0 1-4.46 0l-1.91-1.96.95-.93 1.9 1.95c.7.7 1.86.7 2.57 0l7.24-7.24c.71-.71.71-1.86 0-2.57l-1.83-1.88c-.7-.7-1.85-.7-2.57 0l-4.98 4.98-.94-.94 4.98-4.98a3.157 3.157 0 0 1 4.46 0l1.83 1.88c1.22 1.22 1.22 3.22 0 4.45M7.22 23.13c-.71.71-1.86.71-2.57 0l-1.83-1.88c-.34-.34-.53-.8-.53-1.29s.19-.94.53-1.29l7.24-7.24c.69-.69 1.89-.68 2.57 0l1.9 1.95.95-.93-1.91-1.95c-1.19-1.19-3.27-1.19-4.46 0l-7.24 7.24c-.6.6-.92 1.39-.92 2.23s.33 1.63.92 2.22l1.83 1.88a3.167 3.167 0 0 0 4.46 0l4.98-4.98-.94-.94zm22.77-.49h-6.01V16.7h-1.33v5.94h-5.99v1.33h5.99v6.01h1.33v-6.01h6.01z'/%3E%3C/svg%3E", + '2641': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.65 3.25 28.76.36a1.204 1.204 0 0 0-1.7 0L0 27.4l4.59 4.59L31.65 4.95c.47-.47.47-1.23 0-1.7M1.89 27.4 24.01 5.29l2.7 2.7L4.6 30.11l-2.7-2.7ZM29.2 5.52l-2.7-2.7 1.42-1.42 2.7 2.7zm-4.78 11.41-1.73 3.2-3.2 1.73 3.2 1.73 1.73 3.2 1.73-3.2 3.2-1.73-3.2-1.73zm.74 5.66-.74 1.37-.74-1.37-1.37-.74 1.37-.74.74-1.37.74 1.37 1.37.74zM7.73 17.64l1.73-3.2 3.2-1.73-3.2-1.73-1.73-3.2L6 10.98l-3.2 1.73L6 14.44zm-.74-5.67.74-1.37.74 1.37 1.37.74-1.37.74-.74 1.37-.74-1.37-1.37-.74zM13 9.84l1.73-3.2 3.2-1.73-3.2-1.73L13 0l-1.73 3.2-3.2 1.73 3.2 1.73L13 9.86Zm-.74-5.66L13 2.81l.74 1.37 1.37.74-1.37.74L13 7.03l-.74-1.37-1.37-.74z'/%3E%3C/svg%3E", + '2640': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.59 19.45h1.33v5.22h-1.33zm-8-10.7c0-2.25 1.83-4.08 4.08-4.08s4.08 1.83 4.08 4.08-1.83 4.08-4.08 4.08-4.08-1.83-4.08-4.08m1.33 0c0 1.51 1.23 2.75 2.75 2.75s2.75-1.23 2.75-2.75S24.19 6 22.67 6s-2.75 1.23-2.75 2.75m7.62 5.45h-8.42c-2.28 0-4.15 1.85-4.4 4.22H5.88A5.89 5.89 0 0 0 0 24.3v7.71h1.33V24.3c0-2.51 2.04-4.55 4.54-4.55h11.58c2.51 0 4.55 2.04 4.55 4.55v7.71h1.33V24.3a5.89 5.89 0 0 0-5.88-5.88h-1.4c.24-1.63 1.52-2.89 3.07-2.89h8.42c1.72 0 3.12 1.54 3.12 3.44v5.7h1.33v-5.7c0-2.63-2-4.77-4.46-4.77ZM5.18 32h1.33v-8H5.18zm11.64 0h1.33v-8h-1.33zM6.49 11.32a5.181 5.181 0 0 1 10.36 0 5.181 5.181 0 0 1-10.36 0m1.33 0a3.841 3.841 0 0 0 7.68 0 3.841 3.841 0 0 0-7.68 0'/%3E%3C/svg%3E", + '2639': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.37 21.37c0-2.59-2.11-4.7-4.7-4.7h-9.33c-2.59 0-4.7 2.11-4.7 4.7v5.96H5.31v-5.96c0-3.33 2.71-6.04 6.04-6.04h9.33c3.33 0 6.04 2.71 6.04 6.04v5.96h-1.33v-5.96Zm-14.74 5.96h1.33v-6.67h-1.33zm9.41 0h1.33v-6.67h-1.33zM10.67 8c0-2.95 2.39-5.33 5.33-5.33S21.33 5.06 21.33 8s-2.39 5.33-5.33 5.33-5.33-2.39-5.33-5.33M12 8c0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4-4 1.79-4 4M1.33 1.33h6V0H0v7.33h1.33zm0 23.34H0V32h7.33v-1.33h-6zM24.67 0v1.33h6v6H32V0zm6 30.67h-6V32H32v-7.33h-1.33z'/%3E%3C/svg%3E", + '2638': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h5.33v10.67H0v-1.33h4v-8H0v-1.33Zm30.58-7.95c0 5.55-4.25 10.09-9.68 10.57-.23-.51-.59-.95-1.05-1.29h.1c1.72 0 3.33-.48 4.71-1.3v-3.09l-2-2V11.8l1.64-2.46h4.53c-.09-.28-.19-.56-.3-.83l-3.87-.89-1.63-1.63-.31-2.79c-.87-.27-1.8-.42-2.76-.42-1.1 0-2.15.2-3.14.56l1.91 2.54-1.54 6.15h-3.04l.49 2.45 1.51 3.02-1.23 1.23c-.6-.14-1.22-.15-1.85-.04-.13.02-.26.03-.39.06l-.8.21c-1.58-1.86-2.55-4.26-2.55-6.89 0-5.87 4.76-10.62 10.62-10.62 4.18 0 7.78 2.42 9.51 5.92h.01v.02c.7 1.41 1.1 3 1.1 4.68ZM15.57 3.86c-2.91 1.57-4.9 4.65-4.9 8.18 0 2.49.99 4.75 2.59 6.42l1.26-1.26-1.18-2.4-.83-4.13h3.63l1.13-4.52-1.71-2.28ZM27.7 6.94a9.3 9.3 0 0 0-3.58-3.18l.18 1.6 1.03 1.03zm1.54 5.11c0-.47-.05-.93-.11-1.38h-4.1l-1.02 1.54v2.19l2 2v2.69a9.25 9.25 0 0 0 3.24-7.04ZM27.4 24.17c.55.95.22 2.18-.73 2.73l-8.06 4.65a3.26 3.26 0 0 1-2.53.33l-7.96-2.13a2 2 0 0 1-1.48-1.93v-4.57c0-.9.61-1.7 1.48-1.93L13.03 20c.29-.08.58-.11.87-.11.58 0 1.15.15 1.66.45l3.32 1.92c.95.55 1.28 1.78.73 2.73-.27.46-.7.79-1.21.93a1.98 1.98 0 0 1-1.52-.2l-2.19-1.27a.67.67 0 0 0-.91.24c-.06.1-.09.22-.09.33 0 .06 0 .12.02.17.05.17.16.32.31.4l3.11 1.79a.66.66 0 0 0 .66 0l6.88-3.97a1.97 1.97 0 0 1 1.51-.2c.52.14.95.47 1.21.93Zm-1.16.67a.62.62 0 0 0-.4-.31c-.06-.02-.12-.02-.18-.02a.6.6 0 0 0-.32.09l-6.88 3.97c-.31.18-.65.27-1 .27s-.69-.09-1-.26l-3.11-1.8a2.02 2.02 0 0 1-1-1.73c0-.35.09-.7.27-1a2.005 2.005 0 0 1 2.72-.74l2.2 1.27q.15.09.33.09c.06 0 .12 0 .18-.02a.62.62 0 0 0 .4-.31c.19-.32.08-.73-.24-.91l-3.32-1.91a1.97 1.97 0 0 0-1.52-.2l-4.9 1.31c-.29.08-.49.34-.49.64v4.57c0 .3.2.57.49.64l7.96 2.13a1.98 1.98 0 0 0 1.52-.2l8.06-4.65c.32-.18.43-.59.24-.91Z'/%3E%3C/svg%3E", + '2637': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.32 14.39h-.02c.02-.19.04-.37.04-.56l-.02-4.48h-.05c.02-.19.04-.39.04-.59 0-4.84-5.95-8.78-13.3-8.78S2.71 3.92 2.71 8.77c0 .15.02.31.04.46h-.07s.07 3.92.07 4.6c0 .15.02.29.03.43h-.1s.06 3.2.07 4.32h-.07s.07 3.92.07 4.6c0 4.86 5.95 8.79 13.3 8.79s13.3-3.94 13.3-8.79c0 0-.01-2.93-.02-4.05 0-.09.02-.18.02-.27l-.02-4.48ZM16.01 1.32c6.49 0 11.97 3.42 11.97 7.46s-5.48 7.46-11.97 7.46S4.04 12.82 4.04 8.78s5.48-7.46 11.97-7.46m0 16.25c5.3 0 9.86-2.05 12-5.02v1.29c0 4.04-5.48 7.46-11.97 7.46S4.07 17.88 4.07 13.84c0-.2 0-.67-.01-1.22 2.16 2.93 6.69 4.95 11.95 4.95m.03 5.06c5.27 0 9.82-2.03 11.97-4.98v1.22c0 4.04-5.48 7.46-11.97 7.46S4.07 22.91 4.07 18.87c0-.2 0-.68-.01-1.24 2.14 2.95 6.7 5 11.98 5m11.97.1v.46c0 4.04-5.48 7.46-11.97 7.46S4.07 27.23 4.07 23.19v-.51c2.15 2.95 6.69 4.99 11.97 4.99s9.82-2.04 11.97-4.98v.05ZM14.45 12.3l-3.6-3.61.94-.94 2.66 2.67 5.79-5.81.94.94z'/%3E%3C/svg%3E", + '2636': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.99 6.66c1.84 0 3.33-1.49 3.33-3.33S17.83-.01 15.99-.01s-3.33 1.49-3.33 3.33 1.49 3.33 3.33 3.33Zm0-5.34c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m13.24 1.17-.35-.55-9.3 5.68h-5.97l-9.95 9.89.44.47s1.01 1.06 2.44 1.07h.01c.98 0 1.92-.46 2.75-1.34.15-.14 1.73-1.37 3.49-2.74l.03 4.22-4.66 12.8h4.01l4.61-9.93 1.63-.56-2.72 10.49h3.65l4.89-14.33c.15-.45.06-.93-.24-1.29s-.75-.55-1.24-.48l-3.33.53.37-3.75c1.1-.74 5.45-3.67 7.86-5.21 1.71-1.09 2.06-2.37 2.05-3.26 0-.95-.42-1.63-.47-1.7Zm-2.3 3.84c-2.79 1.78-8.1 5.37-8.15 5.41l-.26.18-.6 6.09 5.04-.78-4.58 13.43h-.97l2.91-11.22-4.51 1.55-4.49 9.67h-1.25l4.09-11.24-.04-5.49c.56-.43 1.1-.86 1.6-1.24l-.82-1.05c-6.37 4.95-6.49 5.08-6.54 5.12-.6.63-1.2.95-1.8.95-.37 0-.7-.12-.95-.26l8.56-8.51h5.79l8.38-5.11c.12.62 0 1.6-1.4 2.49Z'/%3E%3C/svg%3E", + '2635': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.94 16.97h-16.4V2.19c0-1.19-.96-2.16-2.15-2.16H2.19C1.01.03.04 1 .04 2.19V24.5c0 1.19.97 2.16 2.16 2.16h9.14v5.33h20.6V16.98Zm-1.33 12.64-4.97-5.34 4.97-5.39zM20 26.83a2.185 2.185 0 0 0 3.28 0l1.46-1.58 5.03 5.4H13.52l5.03-5.4 1.46 1.58Zm9.33-8.52-7.05 7.65c-.22.25-.5.29-.64.29s-.42-.04-.66-.31l-5.43-5.89v-1.74h13.79ZM2.19 1.36h11.19c.46 0 .83.37.83.83V21H1.37V2.19c0-.46.37-.83.83-.83ZM1.37 24.5v-2.17h12.85v2.17c0 .46-.37.83-.83.83H2.19c-.46 0-.83-.37-.83-.83Zm11.29 2.16h.72c1.19 0 2.16-.97 2.16-2.16v-2.49l2.09 2.27-4.97 5.34zm-5.92-3.44h2.22v1.33H6.74zm-.06-8.94-3.13-3.13.94-.94 2.19 2.19 4.85-4.85.94.94-5.79 5.8Z'/%3E%3C/svg%3E", + '2634': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m29.04 19.13 1.5 1.17 1.43-2.71-.84-.96.6-2.64-1.4-1.28-1.84 1.55-1.29-1.34-2.02-.3L26.29 10l-4.57-2.77-1.74-.31-1.38-1.45-2.24 1.4.15.87-1.58.08-2.09.61-1.59-.22-2.12 1.28-.93-.62-2.34 1.4.76 1.49-.98 1.32-2.43 1.46.1 1.51L1.09 18l-.41 2.04.38.56-1.04.78v2.33h3.56l1.06-2.33.73-.65.66.03-.11 1.98 2.17 3.22 3.37-1.22 2.26.69 2.46-2.76-.48-1.09 1.2-1 .81 2.46 1.39.65-.22.95 1.57 1.92 2.15-1.18v-1.44l1.1-4.22.22.04.02 1.57 1.71.61 1.46.33 1.03 1 1.58-1.08v-1.86l-.8-.84.07-.32.07-.02Zm-.39-1.28-.07.02-.74.22-.17.75-.07.32-.16.7.49.52.43.46v.63l-.1.07-.25-.24-.27-.26-.37-.08-1.38-.31-.76-.27v-.65l-.03-1.12-1.11-.18-.22-.04-1.19-.19-.31 1.17-1.1 4.22-.04.17v.82l-.49.27-.45-.55.07-.3.25-1.05-.98-.46-.87-.41-.63-1.92-.61-1.87-1.51 1.26-1.2 1-.77.64.4.92.13.31-1.33 1.49-1.45-.44-.42-.13-.42.15-2.39.86-1.34-1.99.08-1.54.07-1.34-1.35-.06-.66-.03-.55-.02-.41.37-.73.65-.21.19-.12.25-.7 1.55H1.27v-.33l.51-.38 1.02-.76-.72-1.05-.07-.1.21-1.05 1.88-1.65.5-.44-.05-.66-.05-.69 1.73-1.04.23-.14.16-.21.98-1.32.49-.66-.37-.73-.19-.38.55-.33.23.15.7.47.72-.44 1.72-1.03 1.13.16.28.04.27-.08 1.94-.56 1.43-.07 1.5-.08-.25-1.47.56-.35.63.66.3.32.43.08 1.5.27 3.37 2.04-.66 1.55-.67 1.58 1.7.26 1.57.24.98 1.02.86.9.95-.8.89-.75-.41 1.8-.15.66.45.51.24.27-.26.49-.24-.19-.54-.43-.66.2Zm-9.67-6.22.94.94-4.65 4.65-2.56-2.56.94-.94 1.62 1.62z'/%3E%3C/svg%3E", '2633': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.35 2.67c3.18 0 8.44 2.49 11.16 4.25 2.45 1.59 6.62 5.07 7.82 7.51.69 1.4.33 2.27-1.03 4-3.65 4.68-10.88 9.13-16.44 10.14-.62.11-1.11.17-1.5.17-.86 0-1.43-.1-2.22-2.06C4.77 20.8 5.01 11.67 6.6 6.23c.88-3.01 1.71-3.46 2.02-3.51.22-.04.47-.06.74-.06m-.01-1.33c-.34 0-.66.02-.96.07-1.74.29-2.64 2.96-3.08 4.45-1.77 6.04-1.79 15.43.59 21.32.85 2.12 1.76 2.89 3.46 2.89.5 0 1.08-.07 1.74-.19 6.01-1.09 13.51-5.84 17.26-10.63 1.36-1.75 2.25-3.22 1.17-5.41-1.34-2.72-5.74-6.38-8.29-8.04-2.7-1.75-8.27-4.46-11.88-4.46Z'/%3E%3C/svg%3E", '2632':