diff --git a/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png index d11a1d27b7ad..bca6053cf870 100644 Binary files a/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png and b/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png differ diff --git a/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png index e8326513160b..a354371f2f8b 100644 Binary files a/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png and b/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png differ diff --git a/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png index 16802e49c9e9..5d3d9bb5e644 100644 Binary files a/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png and b/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png differ diff --git a/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png index e3c2896e935d..78ed6057f6a4 100644 Binary files a/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png and b/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png index fdcf6126dd69..607d1430f806 100644 Binary files a/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png index 5fa12b2214d7..57a04581b2f6 100644 Binary files a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png index f67a76d0202c..615566e0725b 100644 Binary files a/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png index 91eeab956f55..27044ed8bb75 100644 Binary files a/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png index babca87254f9..3d57ef700610 100644 Binary files a/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png index 1342200a5ca4..c601ee04a10a 100644 Binary files a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png index 6202a996b6e0..dfcc6dadb7d1 100644 Binary files a/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png index 254ece682ef5..16036e9aee81 100644 Binary files a/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png index 15b767786614..0b8ead7dadd7 100644 Binary files a/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png index 65e44ee319e3..db43ca208ab8 100644 Binary files a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png index 9beb12df9a8b..d277f960e40a 100644 Binary files a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png index f925a1758ac4..f2b6679b5c78 100644 Binary files a/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png index d55ddb7b4076..3e9fce71965a 100644 Binary files a/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png index 2ec7278b7a80..bbd0965eb8ce 100644 Binary files a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png index 2affec20aafa..3e96491e0a23 100644 Binary files a/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png index 19f7d7df567b..f22d18161cc3 100644 Binary files a/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png index 1be65e99b7a3..33fda26d64f8 100644 Binary files a/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png index cf82cfc4b0ac..be1ba90ca19a 100644 Binary files a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png index 931e7c3e7b37..df5c9d9b6d37 100644 Binary files a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png and b/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png index 7c4cf851a732..585bc2c957a4 100644 Binary files a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png and b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png index 1e89ab25d2b9..d9df155f4f0c 100644 Binary files a/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png index a8b13440cbab..8303663b640c 100644 Binary files a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png index b3232671f348..ecd2de804e42 100644 Binary files a/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png index 868b0b31361e..3502c235390f 100644 Binary files a/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/packages/components/src/components/alert/alert.scss b/packages/components/src/components/alert/alert.scss index b304f671d5fe..c802689a9233 100644 --- a/packages/components/src/components/alert/alert.scss +++ b/packages/components/src/components/alert/alert.scss @@ -54,7 +54,6 @@ } .db-alert { - @extend %db-bg-neutral-0; @extend %component-border; @extend %grid-layout; display: grid; diff --git a/packages/components/src/components/card/card.scss b/packages/components/src/components/card/card.scss index 4d0accaf855f..cbca14189b5e 100644 --- a/packages/components/src/components/card/card.scss +++ b/packages/components/src/components/card/card.scss @@ -10,10 +10,7 @@ @extend %color-variants; @extend %default-card; - background-color: var( - --db-current-background-color, - $db-colors-neutral-bg-0-enabled - ); + background-color: $db-colors-neutral-bg; display: flex; flex-direction: column; diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss index 81051ee08bb0..fd743efd2c66 100644 --- a/packages/components/src/components/checkbox/checkbox.scss +++ b/packages/components/src/components/checkbox/checkbox.scss @@ -10,7 +10,6 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height)); .db-checkbox { - @extend %default-color; @extend %bg-transparent-interactive; align-content: center; @@ -42,7 +41,7 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height)); } &:checked { - @extend %db-secondary-component-ia; + @extend %db-bg-inverted-ia; // Check icon @include icon(glyph(done), 24, "outline"); diff --git a/packages/components/src/components/code-docs/code-docs.scss b/packages/components/src/components/code-docs/code-docs.scss index 2dd85d4495fb..2b4178bb2b6e 100644 --- a/packages/components/src/components/code-docs/code-docs.scss +++ b/packages/components/src/components/code-docs/code-docs.scss @@ -5,6 +5,8 @@ @use "@db-ui/foundations/build/scss/color-placeholder" as *; @use "@db-ui/foundations/build/scss/tonality" as *; +/* TODO: Adapt this colors as well */ + %code-docs { @extend %db-bg-neutral-1; min-block-size: $db-sizing-3xl; @@ -38,7 +40,7 @@ } .code { - @extend %db-bg-secondary; + @extend %db-bg-neutral-4; overflow: auto; position: absolute; inset-inline-end: 0; diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss index 6a358f39ecb5..6dfb26a0cf16 100644 --- a/packages/components/src/components/drawer/drawer.scss +++ b/packages/components/src/components/drawer/drawer.scss @@ -108,7 +108,7 @@ $spacings: ( @extend %spacing-drawer; display: flex; flex-direction: column; - background-color: $db-colors-neutral-bg-0-enabled; + background-color: $db-colors-neutral-bg; block-size: 100%; inline-size: 100%; position: fixed; diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss index a34939e56f45..afd7e60f470a 100644 --- a/packages/components/src/components/header/header.scss +++ b/packages/components/src/components/header/header.scss @@ -3,7 +3,7 @@ @use "@db-ui/foundations/build/scss/helpers/functions" as *; .db-header { - background-color: $db-colors-neutral-bg-0-enabled; + background-color: $db-colors-neutral-bg; box-shadow: $db-elevation-4; display: flex; justify-content: space-between; diff --git a/packages/components/src/components/icon/icon-web-component.scss b/packages/components/src/components/icon/icon-web-component.scss index cedfd8cdf17f..2e86ed105921 100644 --- a/packages/components/src/components/icon/icon-web-component.scss +++ b/packages/components/src/components/icon/icon-web-component.scss @@ -1,2 +1 @@ -@forward "@db-ui/foundations/scss/icon/icons"; @forward "icon"; diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss index eef90d39c493..5e12a876461a 100644 --- a/packages/components/src/components/input/input.scss +++ b/packages/components/src/components/input/input.scss @@ -43,8 +43,9 @@ ( var(--db-input-padding-end-icon-after) + var(--db-input-padding-end-datalist) - ) * #{$db-sizing-md} + #{$db-spacing-fixed-sm} - - var(--db-input-padding-end-datalist) * #{$db-spacing-fixed-sm} - var( + ) * #{$db-sizing-md} + #{$db-spacing-fixed-sm} - var( + --db-input-padding-end-datalist + ) * #{$db-spacing-fixed-sm} - var( --db-input-padding-end-icon-after ) * #{$db-spacing-fixed-sm} ); @@ -68,6 +69,43 @@ } } +%input-color-variants { + @each $name, $colors in $component-variants { + @if ($name == "critical") { + &[data-variant="critical"] { + color: map.get($colors, "on-bg"); + } + } + + &[data-variant="#{$name}"] input { + --db-current-border-color: #{map.get($colors, "border")}; + @if ($name == "critical") { + @extend %adaptive-critical-component; + } @else if ($name == "informational") { + @extend %adaptive-informational-component; + } @else if ($name == "warning") { + @extend %adaptive-warning-component; + } @else if ($name == "successful") { + @extend %adaptive-successful-component; + } + + & + label { + color: map.get($colors, "on-bg"); + } + + & ~ .db-icon { + color: map.get($colors, "on-bg"); + } + + & ~ .description, + & ~ .icon-state, + & ~ .icon-state .db-icon { + color: map.get($colors, "element"); + } + } + } +} + .db-input { --db-input-padding-inline-start: #{$db-spacing-fixed-sm}; --db-input-padding-end-icon-after: 0; @@ -76,6 +114,8 @@ --icon-margin-after: 0; --db-input-label-max-width: 80%; + @extend %input-color-variants; + position: relative; // padding-inline-end according to current amount of icons @@ -157,8 +197,9 @@ .icon-after { margin-inline-end: calc( - #{$db-spacing-fixed-sm} + var(--db-input-padding-end-datalist) * #{$db-sizing-md} - - var(--db-input-padding-end-datalist) * #{$db-spacing-fixed-sm} + #{$db-spacing-fixed-sm} + var(--db-input-padding-end-datalist) * #{$db-sizing-md} - var( + --db-input-padding-end-datalist + ) * #{$db-spacing-fixed-sm} ); } @@ -172,7 +213,6 @@ } label { - @extend %default-color; position: absolute; display: flex; align-items: center; @@ -377,41 +417,6 @@ input[aria-invalid="true"] { @extend %adaptive-critical-component; } - - @each $name, $colors in $component-variants { - @if ($name == "critical") { - &[data-variant="critical"] { - color: nth($colors, 3); - } - } - - &[data-variant="#{$name}"] input { - --db-current-border-color: #{map.get($colors, "border")}; - @if ($name == "critical") { - @extend %adaptive-critical-component; - } @else if ($name == "informational") { - @extend %adaptive-informational-component; - } @else if ($name == "warning") { - @extend %adaptive-warning-component; - } @else if ($name == "successful") { - @extend %adaptive-successful-component; - } - - & + label { - color: map.get($colors, "on-bg"); - } - - & ~ .db-icon { - color: $db-colors-informational-on-bg-enabled; - } - - & ~ .description, - & ~ .icon-state, - & ~ .icon-state .db-icon { - color: map.get($colors, "element"); - } - } - } } .db-ui-regular, diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss index a226624434a9..df77ae28650b 100644 --- a/packages/components/src/components/link/link.scss +++ b/packages/components/src/components/link/link.scss @@ -15,7 +15,6 @@ } .db-link { - @extend %default-color; @extend %db-link-height; inline-size: fit-content; align-items: center; @@ -30,15 +29,19 @@ outline 0.06s, color $db-transition-color; + &:hover { + color: color-mix(in srgb, transparent 25%, $db-colors-neutral-on-bg); + } + + &:active { + color: color-mix(in srgb, transparent 50%, $db-colors-neutral-on-bg); + } + a { // Workaround for angular @extend %db-link-height; } - &:hover { - color: inherit; - } - // "disabled" links &[aria-disabled="true"] { // TODO: probably move these to the tokens as well @@ -62,7 +65,7 @@ &[data-content="internal"], &[data-content="external"] { - --icon-margin-before: var(--db-spacing-fixed-2xs); + --icon-margin-before: #{$db-spacing-fixed-2xs}; &:focus-visible { outline-offset: var(--db-focus-outline-offset, 1px); @@ -74,12 +77,20 @@ } &[data-variant="primary"] { - @extend %db-primary-text-ia; + color: $db-colors-primary; + + &:hover { + color: $db-colors-primary-hover; + } + + &:active { + color: $db-colors-primary-pressed; + } } &[data-size="small"] { --icon-font-size: var(--db-base-icon-font-size); - --icon-margin-before: var(--db-spacing-fixed-3xs); + --icon-margin-before: #{$db-spacing-fixed-3xs}; @extend %db-overwrite-font-size-sm; } } diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss index 1cb6942ea31f..aeee898b57cd 100644 --- a/packages/components/src/components/radio/radio.scss +++ b/packages/components/src/components/radio/radio.scss @@ -9,14 +9,13 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height)); .db-radio { - @extend %default-color; @extend %bg-transparent-interactive; appearance: none; aspect-ratio: 1; - border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid currentColor; + border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid #{$db-colors-neutral-on-bg}; // Full rounded border-radius: 100px; @@ -47,17 +46,10 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height)); &:is(:user-invalid), &[aria-invalid="true"] { @extend %db-bg-critical-transparent-semi; - @extend %db-bg-critical-transparent-semi-hover-state; - border-color: var( - --db-colors-critical-element-enabled, - $db-colors-critical-element-enabled - ); + border-color: $db-colors-critical-border-weak; & + label { - color: var( - --db-colors-critical-enabled, - $db-colors-critical-enabled - ); + color: $db-colors-critical; } } diff --git a/packages/components/src/styles/_dialog-init.scss b/packages/components/src/styles/_dialog-init.scss index f06455451f09..e1f81564f53a 100644 --- a/packages/components/src/styles/_dialog-init.scss +++ b/packages/components/src/styles/_dialog-init.scss @@ -1,6 +1,6 @@ -@use "@db-ui/foundations/build/scss/variables" as *; +@use "@db-ui/foundations/build/scss/variables.global" as *; -$backdrop-color: $db-colors-neutral-on-bg-enabled; +$backdrop-color: $db-colors-neutral-on-bg; %backdrop { background-color: $backdrop-color; diff --git a/packages/foundations/scripts/color-classes-generator.js b/packages/foundations/scripts/color-classes-generator.js index 4c9536f3b828..b936f6f9e8aa 100644 --- a/packages/foundations/scripts/color-classes-generator.js +++ b/packages/foundations/scripts/color-classes-generator.js @@ -16,6 +16,14 @@ const generateBGVariants = (value, variant) => { .${prefix}-bg-${value}${nameEnding} { @extend %${prefix}-bg-${value}${nameEnding}; + &-transparent-full { + @extend %${prefix}-bg-${value}${nameEnding}-transparent-full; + } + + &-transparent-semi { + @extend %${prefix}-bg-${value}${nameEnding}-transparent-semi; + } + &-ia, &[data-variant="interactive"] { @extend %${prefix}-bg-${value}${nameEnding}-ia; @@ -52,15 +60,6 @@ exports.generateColorUtilitityClasses = (colorToken) => { // Default text and background colors (former 'light' tone) output += generateBGVariants(value); } - - // Transparent tones - const transparentTones = ['full', 'semi']; - for (const transparentTone of transparentTones) { - output += generateBGVariants( - value, - `transparent-${transparentTone}` - ); - } } return output; diff --git a/packages/foundations/scripts/color-placeholders-generator.js b/packages/foundations/scripts/color-placeholders-generator.js index 5db97996f0db..285fe6e5a06f 100644 --- a/packages/foundations/scripts/color-placeholders-generator.js +++ b/packages/foundations/scripts/color-placeholders-generator.js @@ -12,40 +12,6 @@ const fileHeader = ` // ${new Date().toString()} `; -const getRBGA = (primaryColor, type) => ` - --db-current-background-color-red: #{color.red($${prefix}-${primaryColor[type]?.name})}; - --db-current-background-color-green: #{color.green($${prefix}-${primaryColor[type]?.name})}; - --db-current-background-color-blue: #{color.blue($${prefix}-${primaryColor[type]?.name})};`; - -const generateInteractiveVariants = ( - currentColorObject, - cssProp, - primaryColor, - noActive, - noHover -) => { - const hoverColor = `${prefix}-${currentColorObject.hover.name}`; - const pressedColor = `${prefix}-${currentColorObject.pressed.name}`; - const activeState = ` - &:active { - --db-current-${cssProp}: var(--${pressedColor}, #{$${pressedColor}}); - ${cssProp}: var(--db-current-${cssProp}, #{$${pressedColor}}); - ${primaryColor ? getRBGA(primaryColor, 'pressed') : ''} - }`; - const hoverState = ` - &:hover { - --db-current-${cssProp}: var(--${hoverColor}, #{$${hoverColor}}); - ${cssProp}: var(--db-current-${cssProp}, #{$${hoverColor}}); - ${primaryColor ? getRBGA(primaryColor, 'hover') : ''} - }`; - return ` - &:enabled { - ${noHover ? '' : hoverState} - ${noActive ? '' : activeState} - } - `; -}; - /** * Backgrounds have more than one variant with the same color for text (on-color) * e.g. neutral with variants 1-6 or transparent-full or transparent-semi @@ -56,7 +22,7 @@ const generateBGVariants = ( variant, currentColorObject, baseColorObject, - primaryColor + baseColor ) => { const placeholderName = `${prefix}-bg-${value}${ variant ? `-${variant}` : '' @@ -70,88 +36,94 @@ const generateBGVariants = ( } let elementColor; - if (primaryColor.element) { - elementColor = `${prefix}-${primaryColor.element.enabled.name}`; + if (baseColor.element) { + elementColor = `${prefix}-${baseColor.element.enabled.name}`; } let borderColor; let borderColorWeak; - if (primaryColor.border) { - borderColor = `${prefix}-${primaryColor.border.enabled.name}`; - if (primaryColor.border.weak) { - borderColorWeak = `${prefix}-${primaryColor.border.weak.enabled.name}`; + if (baseColor.border) { + borderColor = `${prefix}-${baseColor.border.enabled.name}`; + if (baseColor.border.weak) { + borderColorWeak = `${prefix}-${baseColor.border.weak.enabled.name}`; } } let result = ` -%${placeholderName}-hover-state { - ${generateInteractiveVariants( - currentColorObject, - 'background-color', - primaryColor, - true - )} -} -%${placeholderName}-active-state { - ${generateInteractiveVariants( - currentColorObject, - 'background-color', - primaryColor, - false, - true - )} -} - -%${placeholderName} { - --db-current-background-color: var(--${bgColor}, #{$${bgColor}}); - --db-current-color: var(--${fgColor}, #{$${fgColor}}); +%${placeholderName}-variables { + --db-current-base-color: var(--${prefix}-${value}-enabled, + #{$${prefix}-${baseColor.enabled.name}}); + --db-current-color: var(--${prefix}-${value}-on-bg-enabled, #{$${fgColor}}); + --db-current-bg-color: color-mix( + in srgb, + transparent var(--${prefix}-bg-transparent, 0%), + var(--${prefix}-${value}-bg-enabled, #{$${bgColor}}) + ); ${ elementColor - ? `--db-current-element-color: var(--${elementColor}, #{$${elementColor}});` + ? `--db-current-element-color: var(--${prefix}-${value}-element-enabled, #{$${elementColor}});` : '' } ${ borderColor - ? `--db-current-border-color: var(--${borderColor}, #{$${borderColor}});` + ? `--db-current-border-color: var(--${prefix}-${value}-border-enabled, #{$${borderColor}});` : '' } ${ borderColorWeak - ? `--db-current-border-weak-color: var(--${borderColorWeak}, #{$${borderColorWeak}});` + ? `--db-current-border-weak-color: var(--${prefix}-${value}-border-weak-enabled, #{$${borderColorWeak}});` : '' } - background-color: var(--db-current-background-color, #{$${bgColor}}); - color: var(--db-current-color, #{$${fgColor}}); - ${baseColorObject ? getRBGA(primaryColor, 'enabled') : ''} +} + +%${placeholderName} { + @extend %${placeholderName}-variables; + background-color: var(--${prefix}-current-bg-color); + color: var(--${prefix}-current-color); + ${ - currentColorObject === primaryColor - ? `--db-current-background-color-alpha: 1;` + currentColorObject === baseColor + ? `--${prefix}-current-base-color-alpha: 100%;` : '' } - &-ia, &[data-variant="interactive"] { - @extend %${placeholderName}; - @extend %${placeholderName}-hover-state; - @extend %${placeholderName}-active-state; - } + &-transparent { + &-full, &-semi{ + color: var(--${prefix}-${value}-bg-on-enabled, #{$${fgColor}}); + @extend %${placeholderName}-variables; + background-color: color-mix( + in srgb, + transparent var(--${prefix}-bg-transparent, 100%), + var(--${prefix}-current-base-color) + ); + } - button { - @extend %${placeholderName}-hover-state; - @extend %${placeholderName}-active-state; - } + &-semi{ + background-color: color-mix( + in srgb, + transparent var(--${prefix}-bg-transparent, 92%), + var(--${prefix}-current-base-color) + ); + } + } - a { - ${generateInteractiveVariants(baseColorObject, 'color')} + &-ia, &[data-variant="interactive"] { + @extend %${placeholderName}; + &:enabled{ + &:hover{ + --${prefix}-bg-transparent: 84%; + } + &:active{ + --${prefix}-bg-transparent: 68%; + } + } } `; if (weakFgColor) { result += ` %weak { - color: var(--${weakFgColor}, #{$${weakFgColor}}); - - a { - ${generateInteractiveVariants(baseColorObject.weak, 'color')} - } + --db-current-color: var(--${prefix}-${value}-on-bg-weak-enabled, #{$${weakFgColor}}); + color: var(--${prefix}-current-color); } `; } @@ -181,30 +153,22 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => { if (colorToken[value].enabled) { // Text & elements & border output += ` -%${prefix}-${value}-text-ia { - color: $${prefix}-${colorToken[value].enabled.name}; -${generateInteractiveVariants(colorToken[value], 'color')} -} - -%${prefix}-${value}-element-ia { - color: $${prefix}-${colorToken[value].element.enabled.name}; -${generateInteractiveVariants(colorToken[value].element, 'color')} -} - -%${prefix}-${value}-border-ia { - color: $${prefix}-${colorToken[value].border.enabled.name}; -${generateInteractiveVariants(colorToken[value].border, 'color')} -} - %${prefix}-${value}-component-ia { - background-color: $${prefix}-${colorToken[value].enabled.name}; - color: $${prefix}-${colorToken[value].on.enabled.name}; -${generateInteractiveVariants(colorToken[value], 'background-color')} + color: var(--${prefix}-${value}-on-enabled, #{$${prefix}-${colorToken[value].on.enabled.name}}); + background-color: var(--${prefix}-${value}-enabled, #{$${prefix}-${colorToken[value].enabled.name}}); + &:enabled { + &:hover{ + background-color: var(--${prefix}-${value}-hover, #{$${prefix}-${colorToken[value].hover.name}}); + } + &:active{ + background-color: var(--${prefix}-${value}-pressed, #{$${prefix}-${colorToken[value].pressed.name}}); + } + } } %${prefix}-${value}-component { - background-color: $${prefix}-${colorToken[value].enabled.name}; - color: $${prefix}-${colorToken[value].on.enabled.name}; + background-color: var(--${prefix}-${value}-enabled, #{$${prefix}-${colorToken[value].enabled.name}}); + color: var(--${prefix}-${value}-on-enabled, #{$${prefix}-${colorToken[value].on.enabled.name}}); } `; } @@ -231,18 +195,6 @@ ${generateInteractiveVariants(colorToken[value], 'background-color')} colorToken[value] ); } - - // Transparent tones - const transparentTones = ['full', 'semi']; - for (const transparentTone of transparentTones) { - output += generateBGVariants( - value, - `transparent-${transparentTone}`, - colorToken[value].bg.transparent[transparentTone], - colorToken[value].on.bg, - colorToken[value] - ); - } } return output; diff --git a/packages/foundations/scss/_init.scss b/packages/foundations/scss/_init.scss index 8b6059edf549..3cd271e49108 100644 --- a/packages/foundations/scss/_init.scss +++ b/packages/foundations/scss/_init.scss @@ -7,7 +7,7 @@ :root { // TODO: probably move these to the tokens as well --db-focus-outline-offset: 1px; - --db-focus-outline-color: #{$db-colors-informational-enabled}; + --db-focus-outline-color: #{$db-colors-informational}; --db-focus-outline-transition-duration: #{$db-transition-duration-ultra-fast}; --db-focus-outline-size: max(2px, 0.08em); --db-disabled-text-opacity: 0.5; @@ -33,7 +33,7 @@ html { // Make sure every elements has the current color from container above body { - color: var(--db-current-color, $db-colors-neutral-on-bg-enabled); + color: $db-colors-neutral-on-bg; } a { @@ -89,7 +89,7 @@ iframe { list-style-type: "\2022"+ "   "; li::marker { - color: #{$db-colors-primary-enabled}; + color: var (--db-primary-enabled, #{$db-colors-primary-enabled}); } } diff --git a/packages/foundations/scss/_variables.global.scss b/packages/foundations/scss/_variables.global.scss index e9bbc5944735..def3e65b458b 100644 --- a/packages/foundations/scss/_variables.global.scss +++ b/packages/foundations/scss/_variables.global.scss @@ -1,3 +1,5 @@ +@use "variables" as *; + /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height*/ $db-sizing-xs: var(--db-sizing-xs); $db-sizing-sm: var(--db-sizing-sm); @@ -23,3 +25,95 @@ $db-spacing-responsive-sm: var(--db-spacing-responsive-sm); $db-spacing-responsive-md: var(--db-spacing-responsive-md); $db-spacing-responsive-lg: var(--db-spacing-responsive-lg); $db-spacing-responsive-xl: var(--db-spacing-responsive-xl); + +// Variants for adaptive components like input, select, alert, ... + +// neutral +$db-colors-neutral-bg: var( + --db-neutral-bg-enabled, + $db-colors-neutral-bg-0-enabled +); + +$db-colors-neutral-on-bg: var( + --db-current-color, + --db-neutral-on-bg-enabled, + $db-colors-neutral-on-bg-enabled +); + +// primary + +$db-colors-primary: var(--db-primary-enabled, $db-colors-primary-enabled); + +$db-colors-primary-hover: var(--db-primary-hover, $db-colors-primary-hover); + +$db-colors-primary-pressed: var(--db-primary-pressed, $db-colors-primary-pressed); + +// critical +$db-colors-critical-border-weak: var( + --db-critical-border-weak-enabled, + $db-colors-critical-border-weak-enabled +); + +$db-colors-critical-element: var( + --db-critical-element-enabled, + $db-colors-critical-element-enabled +); + +$db-colors-critical-on-bg: var( + --db-critical-on-bg-enabled, + $db-colors-critical-on-bg-enabled +); +$db-colors-critical: var(--db-critical-enabled, $db-colors-critical-enabled); + +// informational +$db-colors-informational-border-weak: var( + --db-informational-border-weak-enabled, + $db-colors-informational-border-weak-enabled +); +$db-colors-informational-element: var( + --db-informational-element-enabled, + $db-colors-informational-element-enabled +); + +$db-colors-informational-on-bg: var( + --db-informational-on-bg-enabled, + $db-colors-informational-on-bg-enabled +); +$db-colors-informational: var( + --db-informational-enabled, + $db-colors-informational-enabled +); + +// warning +$db-colors-warning-border-weak: var( + --db-warning-border-weak-enabled, + $db-colors-warning-border-weak-enabled +); +$db-colors-warning-element: var( + --db-warning-element-enabled, + $db-colors-warning-element-enabled +); +$db-colors-warning-on-bg: var( + --db-warning-on-bg-enabled, + $db-colors-warning-on-bg-enabled +); +$db-colors-warning: var(--db-warning-enabled, $db-colors-warning-enabled); + + +// successful +$db-colors-successful-border-weak: var( + --db-successful-border-weak-enabled, + $db-colors-successful-border-weak-enabled +); +$db-colors-successful-element: var( + --db-successful-element-enabled, + $db-colors-successful-element-enabled +); +$db-colors-successful-on-bg: var( + --db-successful-on-bg-enabled, + $db-colors-successful-on-bg-enabled +); +$db-colors-successful: var( + --db-successful-enabled, + $db-colors-successful-enabled +); diff --git a/packages/foundations/scss/color/_code-colors.scss b/packages/foundations/scss/color/_code-colors.scss index 9272e627434a..0807977deb8e 100644 --- a/packages/foundations/scss/color/_code-colors.scss +++ b/packages/foundations/scss/color/_code-colors.scss @@ -2,31 +2,32 @@ @use "../variables" as *; %code-style { - --db-current-background-color: var( - --db-colors-secondary-bg-enabled, - #{$db-colors-secondary-enabled} + --db-current-base-color: var( + --db-neutral-enabled, + #{$db-colors-neutral-enabled} ); --db-current-color: var( - --db-colors-secondary-on-bg-enabled, - #{$db-colors-secondary-on-enabled} + --db-neutral-bg-enabled, + #{$db-colors-neutral-bg-0-enabled} + ); + --db-current-bg-color: color-mix( + in srgb, + transparent var(--db-bg-transparent, 0%), + var(--db-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled}) ); --db-current-element-color: var( - --db-colors-secondary-element-enabled, - #{$db-colors-secondary-element-enabled} + --db-neutral-element-enabled, + #{$db-colors-neutral-element-enabled} ); --db-current-border-color: var( - --db-colors-secondary-border-enabled, - #{$db-colors-secondary-border-enabled} + --db-neutral-border-enabled, + #{$db-colors-neutral-border-enabled} + ); + --db-current-border-weak-color: var( + --db-neutral-border-weak-enabled, + #{$db-colors-neutral-border-weak-enabled} ); - --db-current-background-color-red: #{color.red($db-colors-secondary-enabled)}; - --db-current-background-color-green: #{color.green( - $db-colors-secondary-enabled - )}; - --db-current-background-color-blue: #{color.blue( - $db-colors-secondary-enabled - )}; - - background-color: $db-colors-secondary-enabled; - color: $db-colors-secondary-on-enabled; + background-color: var(--db-current-bg-color); + color: var(--db-current-color); } diff --git a/packages/foundations/scss/color/_color-variants.scss b/packages/foundations/scss/color/_color-variants.scss index f98ca542756d..565eb36b07cd 100644 --- a/packages/foundations/scss/color/_color-variants.scss +++ b/packages/foundations/scss/color/_color-variants.scss @@ -1,5 +1,7 @@ +@use "sass:string"; @use "../color-placeholder" as *; @use "../variables" as *; +@use "../variables.global" as *; $color-variants: "neutral-0", "neutral-1", "neutral-3", "neutral-4", "primary", "secondary", "critical", "successful", "warning", "informational"; @@ -25,11 +27,14 @@ $color-variants: "neutral-0", "neutral-1", "neutral-3", "neutral-4", "primary", } @mixin get-variant-bg-color($alpha) { - background-color: rgba( - var(--db-current-background-color-red), - var(--db-current-background-color-green), - var(--db-current-background-color-blue), - var(--db-current-background-color-alpha, $alpha) + background-color: color-mix( + in srgb, + transparent + var( + --db-current-base-color-alpha, + string.unquote(calc((1 - $alpha) * 100) + "%") + ), + var(--db-current-base-color, #fff) ); } @@ -57,100 +62,50 @@ $color-variants: "neutral-0", "neutral-1", "neutral-3", "neutral-4", "primary", } } -// Variants for adaptive components like input, select, alert, ... +%db-bg-inverted-ia { + color: var(--db-current-bg-color); + background-color: var(--db-current-color); -$db-colors-critical-border: var( - --db-colors-critical-border-weak-enabled, - $db-colors-critical-border-weak-enabled -); - -$db-colors-critical-element: var( - --db-colors-critical-element-enabled, - $db-colors-critical-element-enabled -); - -$db-colors-critical-on-bg: var( - --db-colors-critical-on-bg-enabled, - $db-colors-critical-on-bg-enabled -); -$db-colors-critical: var( - --db-colors-critical-enabled, - $db-colors-critical-enabled -); - -$db-colors-informational-border: var( - --db-colors-informational-border-weak-enabled, - $db-colors-informational-border-weak-enabled -); -$db-colors-informational-element: var( - --db-colors-informational-element-enabled, - $db-colors-informational-element-enabled -); - -$db-colors-informational-on-bg: var( - --db-colors-informational-on-bg-enabled, - $db-colors-informational-on-bg-enabled -); -$db-colors-informational: var( - --db-colors-informational-enabled, - $db-colors-informational-enabled -); - -$db-colors-warning-border: var( - --db-colors-warning-border-weak-enabled, - $db-colors-warning-border-weak-enabled -); -$db-colors-warning-element: var( - --db-colors-warning-element-enabled, - $db-colors-warning-element-enabled -); -$db-colors-warning-on-bg: var( - --db-colors-warning-on-bg-enabled, - $db-colors-warning-on-bg-enabled -); -$db-colors-warning: var( - --db-colors-warning-enabled, - $db-colors-warning-enabled -); + &:enabled { + &:hover { + background-color: color-mix( + in srgb, + transparent 16%, + var(--db-current-color) + ); + } -$db-colors-successful-border: var( - --db-colors-successful-border-weak-enabled, - $db-colors-successful-border-weak-enabled -); -$db-colors-successful-element: var( - --db-colors-successful-element-enabled, - $db-colors-successful-element-enabled -); -$db-colors-successful-on-bg: var( - --db-colors-successful-on-bg-enabled, - $db-colors-successful-on-bg-enabled -); -$db-colors-successful: var( - --db-colors-successful-enabled, - $db-colors-successful-enabled -); + &:active { + background-color: color-mix( + in srgb, + transparent 24%, + var(--db-current-color) + ); + } + } +} $component-variants: ( "critical": ( - "border": $db-colors-critical-border, + "border": $db-colors-critical-border-weak, "element": $db-colors-critical-element, "on-bg": $db-colors-critical-on-bg, "primary": $db-colors-critical ), "informational": ( - "border": $db-colors-informational-border, + "border": $db-colors-informational-border-weak, "element": $db-colors-informational-element, "on-bg": $db-colors-informational-on-bg, "primary": $db-colors-informational ), "warning": ( - "border": $db-colors-warning-border, + "border": $db-colors-warning-border-weak, "element": $db-colors-warning-element, "on-bg": $db-colors-warning-on-bg, "primary": $db-colors-warning ), "successful": ( - "border": $db-colors-successful-border, + "border": $db-colors-successful-border-weak, "element": $db-colors-successful-element, "on-bg": $db-colors-successful-on-bg, "primary": $db-colors-successful diff --git a/packages/foundations/scss/helpers/_component.scss b/packages/foundations/scss/helpers/_component.scss index f7d62332a23f..419181179f7e 100644 --- a/packages/foundations/scss/helpers/_component.scss +++ b/packages/foundations/scss/helpers/_component.scss @@ -19,7 +19,7 @@ $default-opacity: 0.25; %component-border { border: solid 1px var( - --db-current-border-weak-color, + --db-current-border-weak-enabled, $db-colors-neutral-border-weak-enabled ); } @@ -29,13 +29,8 @@ $default-opacity: 0.25; border-radius: to-rem(4); } -%default-color { - color: var(--db-current-color, $db-colors-neutral-on-bg-enabled); -} - %default-interactive-component { @extend %default-adaptive-border; - @extend %default-color; @extend %default-border-radius; } @@ -52,20 +47,16 @@ $default-opacity: 0.25; %adaptive-critical-component { @extend %db-bg-critical-transparent-semi; - @extend %db-bg-critical-transparent-semi-hover-state; } %adaptive-warning-component { @extend %db-bg-warning-transparent-semi; - @extend %db-bg-warning-transparent-semi-hover-state; } %adaptive-informational-component { @extend %db-bg-informational-transparent-semi; - @extend %db-bg-informational-transparent-semi-hover-state; } %adaptive-successful-component { @extend %db-bg-successful-transparent-semi; - @extend %db-bg-successful-transparent-semi-hover-state; }