diff --git a/README.md b/README.md index 1cbd2eff6a05..062e65366616 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ Check our migration docs for breaking changes: 6. [v0.6 ➡ v0.7](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.6.x-to-v0.7.x.md) 7. [v0.7 ➡ v1.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.7.x-to-v1.0.0.md) 8. [v1.x ➡ v2.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v1.x.x-to-v2.0.0.md) +9. [v2.x ➡ v3.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v2.x.x-to-v3.0.0.md) ## FAQ diff --git a/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png index e5daddbd254e..de59b7344d62 100644 Binary files a/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png and b/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index d3b3666216dc..8024671c86c0 100644 Binary files a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/docs/migration/v2.x.x-to-v3.0.0.md b/docs/migration/v2.x.x-to-v3.0.0.md index 5f7b4d9ac46e..cfa64dc95e56 100644 --- a/docs/migration/v2.x.x-to-v3.0.0.md +++ b/docs/migration/v2.x.x-to-v3.0.0.md @@ -1,5 +1,19 @@ ## Migration Beta (1.x.x) ➡ 2.0.0 +## transparent-hovered/-pressed + +We aligned some variables with design. + +`db-adaptive-bg-basic-transparent-hovered` becomes: + +- `db-adaptive-bg-basic-transparent-full-hovered` +- `db-adaptive-bg-basic-transparent-semi-hovered` + +`db-adaptive-bg-basic-transparent-pressed` becomes: + +- `db-adaptive-bg-basic-transparent-full-pressed` +- `db-adaptive-bg-basic-transparent-semi-pressed` + ## db-button/DBButton type ### `type` property @@ -51,7 +65,7 @@ We updated some breakpoints to align with design: We renamed the `data-icon-after` and `data-icon-before` properties to `data-icon-trailing` and `data-icon-leading`, as well the properties in components to `iconTrailing` and/or `iconLeading`. -Furthermore, we added the possibility to set a a trailing icon on the `db-button`/`DBButton` component. +Furthermore, we added the possibility to set a trailing icon on the `db-button`/`DBButton` component. You can still use `db-icon`/`icon` in most elements/components, which results in showing the default icon. Most of the time this will be the leading icon, but in some cases it might be the trailing icon, depending on the component. diff --git a/packages/components/src/README.md b/packages/components/src/README.md index 9fc6df72356e..42b20cf57552 100644 --- a/packages/components/src/README.md +++ b/packages/components/src/README.md @@ -52,11 +52,11 @@ Main use-case to overwrite a color or change colors by `data-variant`. Example: .db-xxx { @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; } @each $name in colors.$variant-colors { diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss index 55a8bf2d1009..859fa9ad4bd5 100644 --- a/packages/components/src/components/button/button.scss +++ b/packages/components/src/components/button/button.scss @@ -21,14 +21,6 @@ // disable text-decoration if someone wants to use the button for an tag text-decoration: none; - @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; - } - - @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; - } - // Square icon only buttons &[data-no-text="true"] { @include icons.is-icon-text-replace(); @@ -92,10 +84,26 @@ &[data-variant=""], &[data-variant="ghost"] { background-color: colors.$db-adaptive-bg-basic-transparent-full-default; + + @include helpers.hover { + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; + } } &[data-variant="filled"] { background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; + + @include helpers.hover { + background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-basic-transparent-semi-pressed; + } } &:disabled { diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss index d9e13d4f0a31..890b609cfc87 100644 --- a/packages/components/src/components/checkbox/checkbox.scss +++ b/packages/components/src/components/checkbox/checkbox.scss @@ -48,14 +48,14 @@ input { &:not(:checked) { - --db-adaptive-bg-basic-transparent-default: var( - --db-#{$variant}-bg-basic-transparent-default + --db-adaptive-bg-basic-transparent-full-default: var( + --db-#{$variant}-bg-basic-transparent-full-default ); - --db-adaptive-bg-basic-transparent-hovered: var( - --db-#{$variant}-bg-basic-transparent-hovered + --db-adaptive-bg-basic-transparent-full-hovered: var( + --db-#{$variant}-bg-basic-transparent-full-hovered ); - --db-adaptive-bg-basic-transparent-pressed: var( - --db-#{$variant}-bg-basic-transparent-pressed + --db-adaptive-bg-basic-transparent-full-pressed: var( + --db-#{$variant}-bg-basic-transparent-full-pressed ); } @@ -64,10 +64,10 @@ --db-adaptive-bg-basic-transparent-full-default: var( --db-#{$variant}-bg-inverted-contrast-high-default ); - --db-adaptive-bg-basic-transparent-hovered: var( + --db-adaptive-bg-basic-transparent-full-hovered: var( --db-#{$variant}-bg-inverted-contrast-high-hovered ); - --db-adaptive-bg-basic-transparent-pressed: var( + --db-adaptive-bg-basic-transparent-full-pressed: var( --db-#{$variant}-bg-inverted-contrast-high-pressed ); } @@ -106,10 +106,10 @@ --db-adaptive-bg-basic-transparent-full-default: var( --db-adaptive-bg-inverted-contrast-max-default ); - --db-adaptive-bg-basic-transparent-hovered: var( + --db-adaptive-bg-basic-transparent-full-hovered: var( --db-adaptive-bg-inverted-contrast-max-hovered ); - --db-adaptive-bg-basic-transparent-pressed: var( + --db-adaptive-bg-basic-transparent-full-pressed: var( --db-adaptive-bg-inverted-contrast-max-pressed ); diff --git a/packages/components/src/components/custom-select-list-item/custom-select-list-item.scss b/packages/components/src/components/custom-select-list-item/custom-select-list-item.scss index ba32ca7ecebd..cadeae1887ca 100644 --- a/packages/components/src/components/custom-select-list-item/custom-select-list-item.scss +++ b/packages/components/src/components/custom-select-list-item/custom-select-list-item.scss @@ -25,11 +25,11 @@ db-custom-select-list-item:not(:last-of-type) { &:has(> label) { &:not(:has(input[type="radio"]:checked)) { @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; } } } @@ -71,8 +71,8 @@ db-custom-select-list-item:not(:last-of-type) { > input { // We revert interaction states for checkbox - --db-adaptive-bg-basic-transparent-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default}; - --db-adaptive-bg-basic-transparent-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default}; + --db-adaptive-bg-basic-transparent-full-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default}; + --db-adaptive-bg-basic-transparent-full-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default}; &::after { position: absolute; diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss index 2878c39bfc03..2f963ab6a684 100644 --- a/packages/components/src/components/input/input.scss +++ b/packages/components/src/components/input/input.scss @@ -162,11 +162,11 @@ $icon-padding: calc( &:hover, &:focus { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } &:active { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; } } } diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index 53eea709c818..56f1b16a94bf 100644 --- a/packages/components/src/components/navigation-item/navigation-item.scss +++ b/packages/components/src/components/navigation-item/navigation-item.scss @@ -65,15 +65,15 @@ justify-content: space-between; @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; } &:has(~ .db-sub-navigation:is(:hover, :focus)) { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } } diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss index 2901f7880bb7..c18b9025b7c8 100644 --- a/packages/components/src/components/radio/radio.scss +++ b/packages/components/src/components/radio/radio.scss @@ -16,14 +16,14 @@ --db-adaptive-on-bg-basic-emphasis-100-pressed: var( --db-#{$variant}-on-bg-basic-emphasis-80-pressed ); - --db-adaptive-bg-basic-transparent-default: var( - --db-#{$variant}-bg-basic-transparent-default + --db-adaptive-bg-basic-transparent-full-default: var( + --db-#{$variant}-bg-basic-transparent-full-default ); - --db-adaptive-bg-basic-transparent-hovered: var( - --db-#{$variant}-bg-basic-transparent-hovered + --db-adaptive-bg-basic-transparent-full-hovered: var( + --db-#{$variant}-bg-basic-transparent-full-hovered ); - --db-adaptive-bg-basic-transparent-pressed: var( - --db-#{$variant}-bg-basic-transparent-pressed + --db-adaptive-bg-basic-transparent-full-pressed: var( + --db-#{$variant}-bg-basic-transparent-full-pressed ); } diff --git a/packages/components/src/components/tab-item/tab-item.scss b/packages/components/src/components/tab-item/tab-item.scss index 93d036b185c4..99d542b106d1 100644 --- a/packages/components/src/components/tab-item/tab-item.scss +++ b/packages/components/src/components/tab-item/tab-item.scss @@ -34,7 +34,7 @@ $with-icon-padding-calc: calc( @include helpers.hover { &:has(:not(input:disabled)) { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } &:has(input:disabled) { @@ -44,7 +44,7 @@ $with-icon-padding-calc: calc( @include helpers.hover { &:has(:not(input:disabled)) { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } &:has(input:disabled) { diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss index 220c095eee55..5b340f514df9 100644 --- a/packages/components/src/components/textarea/textarea.scss +++ b/packages/components/src/components/textarea/textarea.scss @@ -86,7 +86,7 @@ &:has(textarea:not(:disabled):is(:hover, :focus)) { &::after { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered; } } } diff --git a/packages/components/src/styles/internal/_form-components.scss b/packages/components/src/styles/internal/_form-components.scss index 3d87639ef42a..aa8c57ee75e7 100644 --- a/packages/components/src/styles/internal/_form-components.scss +++ b/packages/components/src/styles/internal/_form-components.scss @@ -195,11 +195,17 @@ $db-min-inline-size: var( --db-adaptive-bg-basic-transparent-semi-default: var( --db-#{$variant}-bg-basic-transparent-semi-default ); - --db-adaptive-bg-basic-transparent-hovered: var( - --db-#{$variant}-bg-basic-transparent-hovered + --db-adaptive-bg-basic-transparent-full-hovered: var( + --db-#{$variant}-bg-basic-transparent-full-hovered ); - --db-adaptive-bg-basic-transparent-pressed: var( - --db-#{$variant}-bg-basic-transparent-pressed + --db-adaptive-bg-basic-transparent-full-pressed: var( + --db-#{$variant}-bg-basic-transparent-full-pressed + ); + --db-adaptive-bg-basic-transparent-semi-hovered: var( + --db-#{$variant}-bg-basic-transparent-semi-hovered + ); + --db-adaptive-bg-basic-transparent-semi-pressed: var( + --db-#{$variant}-bg-basic-transparent-semi-pressed ); --db-adaptive-on-bg-basic-emphasis-100-default: var( --db-#{$variant}-on-bg-basic-emphasis-100-default @@ -363,7 +369,7 @@ $input-valid-types: ); @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered; } &:is(input, textarea) { @@ -485,7 +491,7 @@ $input-valid-types: input { cursor: helpers.$cursor-pointer; background-color: var( - --db-adaptive-bg-basic-transparent-#{$variant} + --db-adaptive-bg-basic-transparent-full-#{$variant} ); @content; } diff --git a/packages/components/src/styles/internal/_scrollbar.scss b/packages/components/src/styles/internal/_scrollbar.scss index be63ac4d55f1..3fa46218610e 100644 --- a/packages/components/src/styles/internal/_scrollbar.scss +++ b/packages/components/src/styles/internal/_scrollbar.scss @@ -29,7 +29,7 @@ $scrollbar-width: helpers.px-to-rem(8); &:is(:hover, :focus) { &::-webkit-scrollbar-track, &::-webkit-scrollbar-button:single-button { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } } @@ -45,7 +45,7 @@ $scrollbar-width: helpers.px-to-rem(8); } &::-webkit-scrollbar-thumb { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; } /* Buttons */ @@ -57,11 +57,11 @@ $scrollbar-width: helpers.px-to-rem(8); block-size: form-components.$floating-label-size-calc; &:is(:hover, :focus) { - background-color: colors.$db-adaptive-bg-basic-transparent-hovered; + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; } &:active { - background-color: colors.$db-adaptive-bg-basic-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; } } diff --git a/packages/foundations/scss/colors/_default-color-mappings.scss b/packages/foundations/scss/colors/_default-color-mappings.scss index 5be3c7fe41d5..a0311940f7e5 100644 --- a/packages/foundations/scss/colors/_default-color-mappings.scss +++ b/packages/foundations/scss/colors/_default-color-mappings.scss @@ -140,11 +140,19 @@ color-mix(in srgb, transparent 92%, var(--db-neutral-6)), color-mix(in srgb, transparent 84%, var(--db-neutral-9)) ); - --db-neutral-bg-basic-transparent-hovered: light-dark( + --db-neutral-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-neutral-6)), color-mix(in srgb, transparent 76%, var(--db-neutral-9)) ); - --db-neutral-bg-basic-transparent-pressed: light-dark( + --db-neutral-bg-basic-transparent-semi-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-neutral-6)), + color-mix(in srgb, transparent 68%, var(--db-neutral-9)) + ); + --db-neutral-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-neutral-6)), + color-mix(in srgb, transparent 76%, var(--db-neutral-9)) + ); + --db-neutral-bg-basic-transparent-full-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-neutral-6)), color-mix(in srgb, transparent 68%, var(--db-neutral-9)) ); @@ -336,11 +344,19 @@ color-mix(in srgb, transparent 92%, var(--db-brand-6)), color-mix(in srgb, transparent 84%, var(--db-brand-9)) ); - --db-brand-bg-basic-transparent-hovered: light-dark( + --db-brand-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-brand-6)), color-mix(in srgb, transparent 76%, var(--db-brand-9)) ); - --db-brand-bg-basic-transparent-pressed: light-dark( + --db-brand-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-brand-6)), + color-mix(in srgb, transparent 68%, var(--db-brand-9)) + ); + --db-brand-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-brand-6)), + color-mix(in srgb, transparent 76%, var(--db-brand-9)) + ); + --db-brand-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-brand-6)), color-mix(in srgb, transparent 68%, var(--db-brand-9)) ); @@ -532,11 +548,19 @@ color-mix(in srgb, transparent 92%, var(--db-informational-6)), color-mix(in srgb, transparent 84%, var(--db-informational-9)) ); - --db-informational-bg-basic-transparent-hovered: light-dark( + --db-informational-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-informational-6)), + color-mix(in srgb, transparent 76%, var(--db-informational-9)) + ); + --db-informational-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-informational-6)), + color-mix(in srgb, transparent 68%, var(--db-informational-9)) + ); + --db-informational-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-informational-6)), color-mix(in srgb, transparent 76%, var(--db-informational-9)) ); - --db-informational-bg-basic-transparent-pressed: light-dark( + --db-informational-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-informational-6)), color-mix(in srgb, transparent 68%, var(--db-informational-9)) ); @@ -728,11 +752,19 @@ color-mix(in srgb, transparent 92%, var(--db-warning-6)), color-mix(in srgb, transparent 84%, var(--db-warning-9)) ); - --db-warning-bg-basic-transparent-hovered: light-dark( + --db-warning-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-warning-6)), color-mix(in srgb, transparent 76%, var(--db-warning-9)) ); - --db-warning-bg-basic-transparent-pressed: light-dark( + --db-warning-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-warning-6)), + color-mix(in srgb, transparent 68%, var(--db-warning-9)) + ); + --db-warning-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-warning-6)), + color-mix(in srgb, transparent 76%, var(--db-warning-9)) + ); + --db-warning-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-warning-6)), color-mix(in srgb, transparent 68%, var(--db-warning-9)) ); @@ -924,11 +956,19 @@ color-mix(in srgb, transparent 92%, var(--db-successful-6)), color-mix(in srgb, transparent 84%, var(--db-successful-9)) ); - --db-successful-bg-basic-transparent-hovered: light-dark( + --db-successful-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-successful-6)), color-mix(in srgb, transparent 76%, var(--db-successful-9)) ); - --db-successful-bg-basic-transparent-pressed: light-dark( + --db-successful-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-successful-6)), + color-mix(in srgb, transparent 68%, var(--db-successful-9)) + ); + --db-successful-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-successful-6)), + color-mix(in srgb, transparent 76%, var(--db-successful-9)) + ); + --db-successful-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-successful-6)), color-mix(in srgb, transparent 68%, var(--db-successful-9)) ); @@ -1120,11 +1160,19 @@ color-mix(in srgb, transparent 92%, var(--db-critical-6)), color-mix(in srgb, transparent 84%, var(--db-critical-9)) ); - --db-critical-bg-basic-transparent-hovered: light-dark( + --db-critical-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-critical-6)), color-mix(in srgb, transparent 76%, var(--db-critical-9)) ); - --db-critical-bg-basic-transparent-pressed: light-dark( + --db-critical-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-critical-6)), + color-mix(in srgb, transparent 68%, var(--db-critical-9)) + ); + --db-critical-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-critical-6)), + color-mix(in srgb, transparent 76%, var(--db-critical-9)) + ); + --db-critical-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-critical-6)), color-mix(in srgb, transparent 68%, var(--db-critical-9)) ); @@ -1316,11 +1364,19 @@ color-mix(in srgb, transparent 92%, var(--db-yellow-6)), color-mix(in srgb, transparent 84%, var(--db-yellow-9)) ); - --db-yellow-bg-basic-transparent-hovered: light-dark( + --db-yellow-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-yellow-6)), color-mix(in srgb, transparent 76%, var(--db-yellow-9)) ); - --db-yellow-bg-basic-transparent-pressed: light-dark( + --db-yellow-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-yellow-6)), + color-mix(in srgb, transparent 68%, var(--db-yellow-9)) + ); + --db-yellow-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-yellow-6)), + color-mix(in srgb, transparent 76%, var(--db-yellow-9)) + ); + --db-yellow-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-yellow-6)), color-mix(in srgb, transparent 68%, var(--db-yellow-9)) ); @@ -1512,11 +1568,19 @@ color-mix(in srgb, transparent 92%, var(--db-orange-6)), color-mix(in srgb, transparent 84%, var(--db-orange-9)) ); - --db-orange-bg-basic-transparent-hovered: light-dark( + --db-orange-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-orange-6)), + color-mix(in srgb, transparent 76%, var(--db-orange-9)) + ); + --db-orange-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-orange-6)), + color-mix(in srgb, transparent 68%, var(--db-orange-9)) + ); + --db-orange-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-orange-6)), color-mix(in srgb, transparent 76%, var(--db-orange-9)) ); - --db-orange-bg-basic-transparent-pressed: light-dark( + --db-orange-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-orange-6)), color-mix(in srgb, transparent 68%, var(--db-orange-9)) ); @@ -1708,11 +1772,19 @@ color-mix(in srgb, transparent 92%, var(--db-red-6)), color-mix(in srgb, transparent 84%, var(--db-red-9)) ); - --db-red-bg-basic-transparent-hovered: light-dark( + --db-red-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-red-6)), + color-mix(in srgb, transparent 76%, var(--db-red-9)) + ); + --db-red-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-red-6)), + color-mix(in srgb, transparent 68%, var(--db-red-9)) + ); + --db-red-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-red-6)), color-mix(in srgb, transparent 76%, var(--db-red-9)) ); - --db-red-bg-basic-transparent-pressed: light-dark( + --db-red-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-red-6)), color-mix(in srgb, transparent 68%, var(--db-red-9)) ); @@ -1904,11 +1976,19 @@ color-mix(in srgb, transparent 92%, var(--db-pink-6)), color-mix(in srgb, transparent 84%, var(--db-pink-9)) ); - --db-pink-bg-basic-transparent-hovered: light-dark( + --db-pink-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-pink-6)), color-mix(in srgb, transparent 76%, var(--db-pink-9)) ); - --db-pink-bg-basic-transparent-pressed: light-dark( + --db-pink-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-pink-6)), + color-mix(in srgb, transparent 68%, var(--db-pink-9)) + ); + --db-pink-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-pink-6)), + color-mix(in srgb, transparent 76%, var(--db-pink-9)) + ); + --db-pink-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-pink-6)), color-mix(in srgb, transparent 68%, var(--db-pink-9)) ); @@ -2100,11 +2180,19 @@ color-mix(in srgb, transparent 92%, var(--db-violet-6)), color-mix(in srgb, transparent 84%, var(--db-violet-9)) ); - --db-violet-bg-basic-transparent-hovered: light-dark( + --db-violet-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-violet-6)), + color-mix(in srgb, transparent 76%, var(--db-violet-9)) + ); + --db-violet-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-violet-6)), + color-mix(in srgb, transparent 68%, var(--db-violet-9)) + ); + --db-violet-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-violet-6)), color-mix(in srgb, transparent 76%, var(--db-violet-9)) ); - --db-violet-bg-basic-transparent-pressed: light-dark( + --db-violet-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-violet-6)), color-mix(in srgb, transparent 68%, var(--db-violet-9)) ); @@ -2296,11 +2384,19 @@ color-mix(in srgb, transparent 92%, var(--db-blue-6)), color-mix(in srgb, transparent 84%, var(--db-blue-9)) ); - --db-blue-bg-basic-transparent-hovered: light-dark( + --db-blue-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-blue-6)), color-mix(in srgb, transparent 76%, var(--db-blue-9)) ); - --db-blue-bg-basic-transparent-pressed: light-dark( + --db-blue-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-blue-6)), + color-mix(in srgb, transparent 68%, var(--db-blue-9)) + ); + --db-blue-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-blue-6)), + color-mix(in srgb, transparent 76%, var(--db-blue-9)) + ); + --db-blue-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-blue-6)), color-mix(in srgb, transparent 68%, var(--db-blue-9)) ); @@ -2492,11 +2588,19 @@ color-mix(in srgb, transparent 92%, var(--db-cyan-6)), color-mix(in srgb, transparent 84%, var(--db-cyan-9)) ); - --db-cyan-bg-basic-transparent-hovered: light-dark( + --db-cyan-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-cyan-6)), color-mix(in srgb, transparent 76%, var(--db-cyan-9)) ); - --db-cyan-bg-basic-transparent-pressed: light-dark( + --db-cyan-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-cyan-6)), + color-mix(in srgb, transparent 68%, var(--db-cyan-9)) + ); + --db-cyan-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-cyan-6)), + color-mix(in srgb, transparent 76%, var(--db-cyan-9)) + ); + --db-cyan-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-cyan-6)), color-mix(in srgb, transparent 68%, var(--db-cyan-9)) ); @@ -2688,11 +2792,19 @@ color-mix(in srgb, transparent 92%, var(--db-turquoise-6)), color-mix(in srgb, transparent 84%, var(--db-turquoise-9)) ); - --db-turquoise-bg-basic-transparent-hovered: light-dark( + --db-turquoise-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-turquoise-6)), + color-mix(in srgb, transparent 76%, var(--db-turquoise-9)) + ); + --db-turquoise-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-turquoise-6)), + color-mix(in srgb, transparent 68%, var(--db-turquoise-9)) + ); + --db-turquoise-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-turquoise-6)), color-mix(in srgb, transparent 76%, var(--db-turquoise-9)) ); - --db-turquoise-bg-basic-transparent-pressed: light-dark( + --db-turquoise-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-turquoise-6)), color-mix(in srgb, transparent 68%, var(--db-turquoise-9)) ); @@ -2884,11 +2996,19 @@ color-mix(in srgb, transparent 92%, var(--db-green-6)), color-mix(in srgb, transparent 84%, var(--db-green-9)) ); - --db-green-bg-basic-transparent-hovered: light-dark( + --db-green-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-green-6)), + color-mix(in srgb, transparent 76%, var(--db-green-9)) + ); + --db-green-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-green-6)), + color-mix(in srgb, transparent 68%, var(--db-green-9)) + ); + --db-green-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-green-6)), color-mix(in srgb, transparent 76%, var(--db-green-9)) ); - --db-green-bg-basic-transparent-pressed: light-dark( + --db-green-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-green-6)), color-mix(in srgb, transparent 68%, var(--db-green-9)) ); @@ -3080,11 +3200,19 @@ color-mix(in srgb, transparent 92%, var(--db-light-green-6)), color-mix(in srgb, transparent 84%, var(--db-light-green-9)) ); - --db-light-green-bg-basic-transparent-hovered: light-dark( + --db-light-green-bg-basic-transparent-full-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-light-green-6)), color-mix(in srgb, transparent 76%, var(--db-light-green-9)) ); - --db-light-green-bg-basic-transparent-pressed: light-dark( + --db-light-green-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-light-green-6)), + color-mix(in srgb, transparent 68%, var(--db-light-green-9)) + ); + --db-light-green-bg-basic-transparent-semi-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-light-green-6)), + color-mix(in srgb, transparent 76%, var(--db-light-green-9)) + ); + --db-light-green-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-light-green-6)), color-mix(in srgb, transparent 68%, var(--db-light-green-9)) ); @@ -3276,11 +3404,19 @@ color-mix(in srgb, transparent 92%, var(--db-burgundy-6)), color-mix(in srgb, transparent 84%, var(--db-burgundy-9)) ); - --db-burgundy-bg-basic-transparent-hovered: light-dark( + --db-burgundy-bg-basic-transparent-full-hovered: light-dark( + color-mix(in srgb, transparent 76%, var(--db-burgundy-6)), + color-mix(in srgb, transparent 76%, var(--db-burgundy-9)) + ); + --db-burgundy-bg-basic-transparent-full-pressed: light-dark( + color-mix(in srgb, transparent 68%, var(--db-burgundy-6)), + color-mix(in srgb, transparent 68%, var(--db-burgundy-9)) + ); + --db-burgundy-bg-basic-transparent-semi-hovered: light-dark( color-mix(in srgb, transparent 76%, var(--db-burgundy-6)), color-mix(in srgb, transparent 76%, var(--db-burgundy-9)) ); - --db-burgundy-bg-basic-transparent-pressed: light-dark( + --db-burgundy-bg-basic-transparent-semi-pressed: light-dark( color-mix(in srgb, transparent 68%, var(--db-burgundy-6)), color-mix(in srgb, transparent 68%, var(--db-burgundy-9)) ); diff --git a/packages/foundations/scss/colors/_placeholder.scss b/packages/foundations/scss/colors/_placeholder.scss index 58f253b7333f..b1a605abb277 100644 --- a/packages/foundations/scss/colors/_placeholder.scss +++ b/packages/foundations/scss/colors/_placeholder.scss @@ -64,11 +64,17 @@ --db-adaptive-bg-basic-transparent-semi-default: var( --db-#{$variant}-bg-basic-transparent-semi-default ); - --db-adaptive-bg-basic-transparent-hovered: var( - --db-#{$variant}-bg-basic-transparent-hovered + --db-adaptive-bg-basic-transparent-full-hovered: var( + --db-#{$variant}-bg-basic-transparent-full-hovered ); - --db-adaptive-bg-basic-transparent-pressed: var( - --db-#{$variant}-bg-basic-transparent-pressed + --db-adaptive-bg-basic-transparent-full-pressed: var( + --db-#{$variant}-bg-basic-transparent-full-pressed + ); + --db-adaptive-bg-basic-transparent-semi-hovered: var( + --db-#{$variant}-bg-basic-transparent-semi-hovered + ); + --db-adaptive-bg-basic-transparent-semi-pressed: var( + --db-#{$variant}-bg-basic-transparent-semi-pressed ); // on-bg basic diff --git a/packages/foundations/scss/colors/_variables.scss b/packages/foundations/scss/colors/_variables.scss index 2d141e2c5689..c1de32bf2ba7 100644 --- a/packages/foundations/scss/colors/_variables.scss +++ b/packages/foundations/scss/colors/_variables.scss @@ -50,11 +50,17 @@ $db-adaptive-bg-basic-transparent-full-default: var( $db-adaptive-bg-basic-transparent-semi-default: var( --db-adaptive-bg-basic-transparent-semi-default ); -$db-adaptive-bg-basic-transparent-hovered: var( - --db-adaptive-bg-basic-transparent-hovered +$db-adaptive-bg-basic-transparent-full-hovered: var( + --db-adaptive-bg-basic-transparent-full-hovered ); -$db-adaptive-bg-basic-transparent-pressed: var( - --db-adaptive-bg-basic-transparent-pressed +$db-adaptive-bg-basic-transparent-full-pressed: var( + --db-adaptive-bg-basic-transparent-full-pressed +); +$db-adaptive-bg-basic-transparent-semi-hovered: var( + --db-adaptive-bg-basic-transparent-semi-hovered +); +$db-adaptive-bg-basic-transparent-semi-pressed: var( + --db-adaptive-bg-basic-transparent-semi-pressed ); // on-bg basic diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss index 54031cfaa61c..b389225c10f9 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss @@ -14,11 +14,17 @@ $db-blue-bg-basic-transparent-full-default: var( $db-blue-bg-basic-transparent-semi-default: var( --db-blue-bg-basic-transparent-semi-default ); -$db-blue-bg-basic-transparent-hovered: var( - --db-blue-bg-basic-transparent-hovered +$db-blue-bg-basic-transparent-full-hovered: var( + --db-blue-bg-basic-transparent-full-hovered ); -$db-blue-bg-basic-transparent-pressed: var( - --db-blue-bg-basic-transparent-pressed +$db-blue-bg-basic-transparent-full-pressed: var( + --db-blue-bg-basic-transparent-full-pressed +); +$db-blue-bg-basic-transparent-semi-hovered: var( + --db-blue-bg-basic-transparent-semi-hovered +); +$db-blue-bg-basic-transparent-semi-pressed: var( + --db-blue-bg-basic-transparent-semi-pressed ); $db-blue-on-bg-basic-emphasis-100-default: var( --db-blue-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_burgundy.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_burgundy.speaking-colors.scss index 80442eaf119c..f8cdc02b48bc 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_burgundy.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_burgundy.speaking-colors.scss @@ -32,11 +32,17 @@ $db-burgundy-bg-basic-transparent-full-default: var( $db-burgundy-bg-basic-transparent-semi-default: var( --db-burgundy-bg-basic-transparent-semi-default ); -$db-burgundy-bg-basic-transparent-hovered: var( - --db-burgundy-bg-basic-transparent-hovered +$db-burgundy-bg-basic-transparent-full-hovered: var( + --db-burgundy-bg-basic-transparent-full-hovered ); -$db-burgundy-bg-basic-transparent-pressed: var( - --db-burgundy-bg-basic-transparent-pressed +$db-burgundy-bg-basic-transparent-full-pressed: var( + --db-burgundy-bg-basic-transparent-full-pressed +); +$db-burgundy-bg-basic-transparent-semi-hovered: var( + --db-burgundy-bg-basic-transparent-semi-hovered +); +$db-burgundy-bg-basic-transparent-semi-pressed: var( + --db-burgundy-bg-basic-transparent-semi-pressed ); $db-burgundy-on-bg-basic-emphasis-100-default: var( --db-burgundy-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss index 451221def7ef..cd9948918b4f 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss @@ -14,11 +14,17 @@ $db-cyan-bg-basic-transparent-full-default: var( $db-cyan-bg-basic-transparent-semi-default: var( --db-cyan-bg-basic-transparent-semi-default ); -$db-cyan-bg-basic-transparent-hovered: var( - --db-cyan-bg-basic-transparent-hovered +$db-cyan-bg-basic-transparent-full-hovered: var( + --db-cyan-bg-basic-transparent-full-hovered ); -$db-cyan-bg-basic-transparent-pressed: var( - --db-cyan-bg-basic-transparent-pressed +$db-cyan-bg-basic-transparent-full-pressed: var( + --db-cyan-bg-basic-transparent-full-pressed +); +$db-cyan-bg-basic-transparent-semi-hovered: var( + --db-cyan-bg-basic-transparent-semi-hovered +); +$db-cyan-bg-basic-transparent-semi-pressed: var( + --db-cyan-bg-basic-transparent-semi-pressed ); $db-cyan-on-bg-basic-emphasis-100-default: var( --db-cyan-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss index d70d9e66f3c1..b9b59df03105 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss @@ -14,11 +14,17 @@ $db-green-bg-basic-transparent-full-default: var( $db-green-bg-basic-transparent-semi-default: var( --db-green-bg-basic-transparent-semi-default ); -$db-green-bg-basic-transparent-hovered: var( - --db-green-bg-basic-transparent-hovered +$db-green-bg-basic-transparent-full-hovered: var( + --db-green-bg-basic-transparent-full-hovered ); -$db-green-bg-basic-transparent-pressed: var( - --db-green-bg-basic-transparent-pressed +$db-green-bg-basic-transparent-full-pressed: var( + --db-green-bg-basic-transparent-full-pressed +); +$db-green-bg-basic-transparent-semi-hovered: var( + --db-green-bg-basic-transparent-semi-hovered +); +$db-green-bg-basic-transparent-semi-pressed: var( + --db-green-bg-basic-transparent-semi-pressed ); $db-green-on-bg-basic-emphasis-100-default: var( --db-green-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_light-green.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_light-green.speaking-colors.scss index 99b6daddbc5b..722dcad3c0ab 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_light-green.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_light-green.speaking-colors.scss @@ -32,11 +32,17 @@ $db-light-green-bg-basic-transparent-full-default: var( $db-light-green-bg-basic-transparent-semi-default: var( --db-light-green-bg-basic-transparent-semi-default ); -$db-light-green-bg-basic-transparent-hovered: var( - --db-light-green-bg-basic-transparent-hovered +$db-light-green-bg-basic-transparent-full-hovered: var( + --db-light-green-bg-basic-transparent-full-hovered ); -$db-light-green-bg-basic-transparent-pressed: var( - --db-light-green-bg-basic-transparent-pressed +$db-light-green-bg-basic-transparent-full-pressed: var( + --db-light-green-bg-basic-transparent-full-pressed +); +$db-light-green-bg-basic-transparent-semi-hovered: var( + --db-light-green-bg-basic-transparent-semi-hovered +); +$db-light-green-bg-basic-transparent-semi-pressed: var( + --db-light-green-bg-basic-transparent-semi-pressed ); $db-light-green-on-bg-basic-emphasis-100-default: var( --db-light-green-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss index 6a6155f1cfe4..c7746fc99b75 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss @@ -14,11 +14,17 @@ $db-orange-bg-basic-transparent-full-default: var( $db-orange-bg-basic-transparent-semi-default: var( --db-orange-bg-basic-transparent-semi-default ); -$db-orange-bg-basic-transparent-hovered: var( - --db-orange-bg-basic-transparent-hovered +$db-orange-bg-basic-transparent-full-hovered: var( + --db-orange-bg-basic-transparent-full-hovered ); -$db-orange-bg-basic-transparent-pressed: var( - --db-orange-bg-basic-transparent-pressed +$db-orange-bg-basic-transparent-full-pressed: var( + --db-orange-bg-basic-transparent-full-pressed +); +$db-orange-bg-basic-transparent-semi-hovered: var( + --db-orange-bg-basic-transparent-semi-hovered +); +$db-orange-bg-basic-transparent-semi-pressed: var( + --db-orange-bg-basic-transparent-semi-pressed ); $db-orange-on-bg-basic-emphasis-100-default: var( --db-orange-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss index db6dfd7c07cf..ca82038ce294 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss @@ -14,11 +14,17 @@ $db-pink-bg-basic-transparent-full-default: var( $db-pink-bg-basic-transparent-semi-default: var( --db-pink-bg-basic-transparent-semi-default ); -$db-pink-bg-basic-transparent-hovered: var( - --db-pink-bg-basic-transparent-hovered +$db-pink-bg-basic-transparent-full-hovered: var( + --db-pink-bg-basic-transparent-full-hovered ); -$db-pink-bg-basic-transparent-pressed: var( - --db-pink-bg-basic-transparent-pressed +$db-pink-bg-basic-transparent-full-pressed: var( + --db-pink-bg-basic-transparent-full-pressed +); +$db-pink-bg-basic-transparent-semi-hovered: var( + --db-pink-bg-basic-transparent-semi-hovered +); +$db-pink-bg-basic-transparent-semi-pressed: var( + --db-pink-bg-basic-transparent-semi-pressed ); $db-pink-on-bg-basic-emphasis-100-default: var( --db-pink-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss index f8d5b5f5bed5..2fa73eebad4f 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss @@ -14,11 +14,17 @@ $db-red-bg-basic-transparent-full-default: var( $db-red-bg-basic-transparent-semi-default: var( --db-red-bg-basic-transparent-semi-default ); -$db-red-bg-basic-transparent-hovered: var( - --db-red-bg-basic-transparent-hovered +$db-red-bg-basic-transparent-full-hovered: var( + --db-red-bg-basic-transparent-full-hovered ); -$db-red-bg-basic-transparent-pressed: var( - --db-red-bg-basic-transparent-pressed +$db-red-bg-basic-transparent-full-pressed: var( + --db-red-bg-basic-transparent-full-pressed +); +$db-red-bg-basic-transparent-semi-hovered: var( + --db-red-bg-basic-transparent-semi-hovered +); +$db-red-bg-basic-transparent-semi-pressed: var( + --db-red-bg-basic-transparent-semi-pressed ); $db-red-on-bg-basic-emphasis-100-default: var( --db-red-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss index 071d8ace435a..17309730daee 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss @@ -32,11 +32,17 @@ $db-turquoise-bg-basic-transparent-full-default: var( $db-turquoise-bg-basic-transparent-semi-default: var( --db-turquoise-bg-basic-transparent-semi-default ); -$db-turquoise-bg-basic-transparent-hovered: var( - --db-turquoise-bg-basic-transparent-hovered +$db-turquoise-bg-basic-transparent-full-hovered: var( + --db-turquoise-bg-basic-transparent-full-hovered ); -$db-turquoise-bg-basic-transparent-pressed: var( - --db-turquoise-bg-basic-transparent-pressed +$db-turquoise-bg-basic-transparent-full-pressed: var( + --db-turquoise-bg-basic-transparent-full-pressed +); +$db-turquoise-bg-basic-transparent-semi-hovered: var( + --db-turquoise-bg-basic-transparent-semi-hovered +); +$db-turquoise-bg-basic-transparent-semi-pressed: var( + --db-turquoise-bg-basic-transparent-semi-pressed ); $db-turquoise-on-bg-basic-emphasis-100-default: var( --db-turquoise-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss index cbd24488503d..1c4d2c18321f 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss @@ -14,11 +14,17 @@ $db-violet-bg-basic-transparent-full-default: var( $db-violet-bg-basic-transparent-semi-default: var( --db-violet-bg-basic-transparent-semi-default ); -$db-violet-bg-basic-transparent-hovered: var( - --db-violet-bg-basic-transparent-hovered +$db-violet-bg-basic-transparent-full-hovered: var( + --db-violet-bg-basic-transparent-full-hovered ); -$db-violet-bg-basic-transparent-pressed: var( - --db-violet-bg-basic-transparent-pressed +$db-violet-bg-basic-transparent-full-pressed: var( + --db-violet-bg-basic-transparent-full-pressed +); +$db-violet-bg-basic-transparent-semi-hovered: var( + --db-violet-bg-basic-transparent-semi-hovered +); +$db-violet-bg-basic-transparent-semi-pressed: var( + --db-violet-bg-basic-transparent-semi-pressed ); $db-violet-on-bg-basic-emphasis-100-default: var( --db-violet-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss index a3db53f395f7..f2183d670771 100644 --- a/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss @@ -14,11 +14,17 @@ $db-yellow-bg-basic-transparent-full-default: var( $db-yellow-bg-basic-transparent-semi-default: var( --db-yellow-bg-basic-transparent-semi-default ); -$db-yellow-bg-basic-transparent-hovered: var( - --db-yellow-bg-basic-transparent-hovered +$db-yellow-bg-basic-transparent-full-hovered: var( + --db-yellow-bg-basic-transparent-full-hovered ); -$db-yellow-bg-basic-transparent-pressed: var( - --db-yellow-bg-basic-transparent-pressed +$db-yellow-bg-basic-transparent-full-pressed: var( + --db-yellow-bg-basic-transparent-full-pressed +); +$db-yellow-bg-basic-transparent-semi-hovered: var( + --db-yellow-bg-basic-transparent-semi-hovered +); +$db-yellow-bg-basic-transparent-semi-pressed: var( + --db-yellow-bg-basic-transparent-semi-pressed ); $db-yellow-on-bg-basic-emphasis-100-default: var( --db-yellow-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss index c33d5152ad62..162bd7e392e0 100644 --- a/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss @@ -14,11 +14,17 @@ $db-brand-bg-basic-transparent-full-default: var( $db-brand-bg-basic-transparent-semi-default: var( --db-brand-bg-basic-transparent-semi-default ); -$db-brand-bg-basic-transparent-hovered: var( - --db-brand-bg-basic-transparent-hovered +$db-brand-bg-basic-transparent-full-hovered: var( + --db-brand-bg-basic-transparent-full-hovered ); -$db-brand-bg-basic-transparent-pressed: var( - --db-brand-bg-basic-transparent-pressed +$db-brand-bg-basic-transparent-full-pressed: var( + --db-brand-bg-basic-transparent-full-pressed +); +$db-brand-bg-basic-transparent-semi-hovered: var( + --db-brand-bg-basic-transparent-semi-hovered +); +$db-brand-bg-basic-transparent-semi-pressed: var( + --db-brand-bg-basic-transparent-semi-pressed ); $db-brand-on-bg-basic-emphasis-100-default: var( --db-brand-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss index b7b8d45770e9..9dd65ad08a5c 100644 --- a/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss @@ -32,11 +32,17 @@ $db-critical-bg-basic-transparent-full-default: var( $db-critical-bg-basic-transparent-semi-default: var( --db-critical-bg-basic-transparent-semi-default ); -$db-critical-bg-basic-transparent-hovered: var( - --db-critical-bg-basic-transparent-hovered +$db-critical-bg-basic-transparent-full-hovered: var( + --db-critical-bg-basic-transparent-full-hovered ); -$db-critical-bg-basic-transparent-pressed: var( - --db-critical-bg-basic-transparent-pressed +$db-critical-bg-basic-transparent-full-pressed: var( + --db-critical-bg-basic-transparent-full-pressed +); +$db-critical-bg-basic-transparent-semi-hovered: var( + --db-critical-bg-basic-transparent-semi-hovered +); +$db-critical-bg-basic-transparent-semi-pressed: var( + --db-critical-bg-basic-transparent-semi-pressed ); $db-critical-on-bg-basic-emphasis-100-default: var( --db-critical-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss index 8df7f7f1df8a..de998b95b1a7 100644 --- a/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss @@ -32,11 +32,17 @@ $db-informational-bg-basic-transparent-full-default: var( $db-informational-bg-basic-transparent-semi-default: var( --db-informational-bg-basic-transparent-semi-default ); -$db-informational-bg-basic-transparent-hovered: var( - --db-informational-bg-basic-transparent-hovered +$db-informational-bg-basic-transparent-full-hovered: var( + --db-informational-bg-basic-transparent-full-hovered ); -$db-informational-bg-basic-transparent-pressed: var( - --db-informational-bg-basic-transparent-pressed +$db-informational-bg-basic-transparent-full-pressed: var( + --db-informational-bg-basic-transparent-full-pressed +); +$db-informational-bg-basic-transparent-semi-hovered: var( + --db-informational-bg-basic-transparent-semi-hovered +); +$db-informational-bg-basic-transparent-semi-pressed: var( + --db-informational-bg-basic-transparent-semi-pressed ); $db-informational-on-bg-basic-emphasis-100-default: var( --db-informational-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss index f4bcc8efe72a..de9939f41e6f 100644 --- a/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss @@ -32,11 +32,17 @@ $db-neutral-bg-basic-transparent-full-default: var( $db-neutral-bg-basic-transparent-semi-default: var( --db-neutral-bg-basic-transparent-semi-default ); -$db-neutral-bg-basic-transparent-hovered: var( - --db-neutral-bg-basic-transparent-hovered +$db-neutral-bg-basic-transparent-full-hovered: var( + --db-neutral-bg-basic-transparent-full-hovered ); -$db-neutral-bg-basic-transparent-pressed: var( - --db-neutral-bg-basic-transparent-pressed +$db-neutral-bg-basic-transparent-full-pressed: var( + --db-neutral-bg-basic-transparent-full-pressed +); +$db-neutral-bg-basic-transparent-semi-hovered: var( + --db-neutral-bg-basic-transparent-semi-hovered +); +$db-neutral-bg-basic-transparent-semi-pressed: var( + --db-neutral-bg-basic-transparent-semi-pressed ); $db-neutral-on-bg-basic-emphasis-100-default: var( --db-neutral-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss index efc63a8cfb2c..33dfd7180799 100644 --- a/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss @@ -32,11 +32,17 @@ $db-successful-bg-basic-transparent-full-default: var( $db-successful-bg-basic-transparent-semi-default: var( --db-successful-bg-basic-transparent-semi-default ); -$db-successful-bg-basic-transparent-hovered: var( - --db-successful-bg-basic-transparent-hovered +$db-successful-bg-basic-transparent-full-hovered: var( + --db-successful-bg-basic-transparent-full-hovered ); -$db-successful-bg-basic-transparent-pressed: var( - --db-successful-bg-basic-transparent-pressed +$db-successful-bg-basic-transparent-full-pressed: var( + --db-successful-bg-basic-transparent-full-pressed +); +$db-successful-bg-basic-transparent-semi-hovered: var( + --db-successful-bg-basic-transparent-semi-hovered +); +$db-successful-bg-basic-transparent-semi-pressed: var( + --db-successful-bg-basic-transparent-semi-pressed ); $db-successful-on-bg-basic-emphasis-100-default: var( --db-successful-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss index 03423e6f9edb..805166a88eb8 100644 --- a/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss @@ -32,11 +32,17 @@ $db-warning-bg-basic-transparent-full-default: var( $db-warning-bg-basic-transparent-semi-default: var( --db-warning-bg-basic-transparent-semi-default ); -$db-warning-bg-basic-transparent-hovered: var( - --db-warning-bg-basic-transparent-hovered +$db-warning-bg-basic-transparent-full-hovered: var( + --db-warning-bg-basic-transparent-full-hovered ); -$db-warning-bg-basic-transparent-pressed: var( - --db-warning-bg-basic-transparent-pressed +$db-warning-bg-basic-transparent-full-pressed: var( + --db-warning-bg-basic-transparent-full-pressed +); +$db-warning-bg-basic-transparent-semi-hovered: var( + --db-warning-bg-basic-transparent-semi-hovered +); +$db-warning-bg-basic-transparent-semi-pressed: var( + --db-warning-bg-basic-transparent-semi-pressed ); $db-warning-on-bg-basic-emphasis-100-default: var( --db-warning-on-bg-basic-emphasis-100-default diff --git a/packages/foundations/tailwind/tailwind-tokens.json b/packages/foundations/tailwind/tailwind-tokens.json index 0b53695e95be..2c5e46efb4f2 100644 --- a/packages/foundations/tailwind/tailwind-tokens.json +++ b/packages/foundations/tailwind/tailwind-tokens.json @@ -19,10 +19,16 @@ "pressed": "var(--db-adaptive-bg-basic-level-3-pressed)" }, "transparent": { - "full-default": "var(--db-adaptive-bg-basic-transparent-full-default)", - "semi-default": "var(--db-adaptive-bg-basic-transparent-semi-default)", - "hovered": "var(--db-adaptive-bg-basic-transparent-hovered)", - "pressed": "var(--db-adaptive-bg-basic-transparent-pressed)" + "full": { + "default": "var(--db-adaptive-bg-basic-transparent-full-default)", + "hovered": "var(--db-adaptive-bg-basic-transparent-full-hovered)", + "pressed": "var(--db-adaptive-bg-basic-transparent-full-pressed)" + }, + "semi": { + "default": "var(--db-adaptive-bg-basic-transparent-semi-default)", + "hovered": "var(--db-adaptive-bg-basic-transparent-semi-hovered)", + "pressed": "var(--db-adaptive-bg-basic-transparent-semi-pressed)" + } } }, "inverted": { diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index 1d59f969f573..ff510d0277dc 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -40,11 +40,17 @@ --color-adaptive-bg-basic-transparent-semi-default: var( --db-adaptive-bg-basic-transparent-semi-default ); - --color-adaptive-bg-basic-transparent-hovered: var( - --db-adaptive-bg-basic-transparent-hovered + --color-adaptive-bg-basic-transparent-full-hovered: var( + --db-adaptive-bg-basic-transparent-full-hovered ); - --color-adaptive-bg-basic-transparent-pressed: var( - --db-adaptive-bg-basic-transparent-pressed + --color-adaptive-bg-basic-transparent-full-pressed: var( + --db-adaptive-bg-basic-transparent-full-pressed + ); + --color-adaptive-bg-basic-transparent-semi-hovered: var( + --db-adaptive-bg-basic-transparent-semi-hovered + ); + --color-adaptive-bg-basic-transparent-semi-pressed: var( + --db-adaptive-bg-basic-transparent-semi-pressed ); /* Inverted */ diff --git a/packages/migration/src/migration/v2.0.0-v3.0.0.ts b/packages/migration/src/migration/v2.0.0-v3.0.0.ts index fdacbed5e9f1..c19f891a4864 100644 --- a/packages/migration/src/migration/v2.0.0-v3.0.0.ts +++ b/packages/migration/src/migration/v2.0.0-v3.0.0.ts @@ -50,5 +50,15 @@ export const v200_v300: ReplaceInFileConfig[] = [ files: '', from: /ariapressed/g, to: 'aria-pressed' + }, + { + files: '', + from: /transparent-hovered/g, + to: 'transparent-full-hovered' + }, + { + files: '', + from: /transparent-pressed/g, + to: 'transparent-full-pressed' } ];