fix(SecondaryButton, IconButton): background colors (#2713)

* fix: background color tokens for buttons

* test: vrts

test: use 1 image

revert: label change

chore: change var name

Revert "chore: change var name"

This reverts commit d55a83f.

Revert "revert: label change"

This reverts commit 5b31338.

Revert "test: use 1 image"

This reverts commit 2cc975f.

Revert "test: vrts"

This reverts commit 6c79514.

.changeset/nervous-goats-judge.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/design-system': patch
+---
+
+Fix background color tokens for `<SecondaryButton>` and `<IconButton>` components

design-system/materials/custom-properties.css

@@ -184,8 +184,8 @@
   --break-point-giantdesktop: 1680px;
   --break-point-jumbodesktop: 1920px;
   --align-items-for-select-input-tag: center;
-  --background-color-for-button-when-active: hsl(0deg 0% 10% / 10%);
-  --background-color-for-button-when-hovered: hsl(0deg 0% 10% / 5%);
+  --background-color-for-button-when-active: hsl(232, 18%, 95%);
+  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
   --background-color-for-button-as-primary-when-active: #15a390;
   --background-color-for-button-as-primary-when-hovered: #17ab97;
   --background-color-for-button-as-icon-as-primary-when-active: #15a390;

design-system/materials/custom-properties.json

@@ -172,8 +172,8 @@
   "--break-point-giantdesktop": "1680px",
   "--break-point-jumbodesktop": "1920px",
   "--align-items-for-select-input-tag": "center",
-  "--background-color-for-button-when-active": "hsl(0deg 0% 10% / 10%)",
-  "--background-color-for-button-when-hovered": "hsl(0deg 0% 10% / 5%)",
+  "--background-color-for-button-when-active": "hsl(232, 18%, 95%)",
+  "--background-color-for-button-when-hovered": "hsl(232, 18%, 98%)",
   "--background-color-for-button-as-primary-when-active": "#15A390",
   "--background-color-for-button-as-primary-when-hovered": "#17AB97",
   "--background-color-for-button-as-icon-as-primary-when-active": "#15A390",

design-system/materials/internals/definition.yaml

@@ -514,9 +514,9 @@ decisionGroupsByTheme:
       prefix: background-color
       decisions:
         background-color-for-button-when-active:
-          choice: color-solid-10
+          choice: color-neutral-95
         background-color-for-button-when-hovered:
-          choice: color-solid-05
+          choice: color-neutral-98
         background-color-for-button-as-primary-when-active:
           choice: '#15A390' # color-primary with 10% black opacity
         background-color-for-button-as-primary-when-hovered:

design-system/src/design-tokens.ts

@@ -183,8 +183,8 @@ export const themes = {
     breakPointGiantdesktop: '1680px',
     breakPointJumbodesktop: '1920px',
     alignItemsForSelectInputTag: 'center',
-    backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
-    backgroundColorForButtonWhenHovered: 'hsl(0deg 0% 10% / 5%)',
+    backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)',
+    backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)',
     backgroundColorForButtonAsPrimaryWhenActive: '#15A390',
     backgroundColorForButtonAsPrimaryWhenHovered: '#17AB97',
     backgroundColorForButtonAsIconAsPrimaryWhenActive: '#15A390',
@@ -763,9 +763,9 @@ const designTokens = {
   alignItemsForSelectInputTag:
     'var(--align-items-for-select-input-tag, center)',
   backgroundColorForButtonWhenActive:
-    'var(--background-color-for-button-when-active, hsl(0deg 0% 10% / 10%))',
+    'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))',
   backgroundColorForButtonWhenHovered:
-    'var(--background-color-for-button-when-hovered, hsl(0deg 0% 10% / 5%))',
+    'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))',
   backgroundColorForButtonAsPrimaryWhenActive:
     'var(--background-color-for-button-as-primary-when-active, #15A390)',
   backgroundColorForButtonAsPrimaryWhenHovered: