From 3425f6c371e2b386d60aa04c97ca8ffbf43f6cb1 Mon Sep 17 00:00:00 2001
From: Kacper Krzywiec <49066275+kark@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:47:05 +0100
Subject: [PATCH] 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 d55a83f027f00e6a4a3cf03c2c8a5038c89326cd.

Revert "revert: label change"

This reverts commit 5b31338c24b4b8906f382d5b1e5c124315122504.

Revert "test: use 1 image"

This reverts commit 2cc975fdea468e782037d0aed5c1e486699f1d78.

Revert "test: vrts"

This reverts commit 6c79514e963b310ab6348557f47e006e723486b7.
---
 .changeset/nervous-goats-judge.md                 | 5 +++++
 design-system/materials/custom-properties.css     | 4 ++--
 design-system/materials/custom-properties.json    | 4 ++--
 design-system/materials/internals/definition.yaml | 4 ++--
 design-system/src/design-tokens.ts                | 8 ++++----
 5 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/nervous-goats-judge.md

diff --git a/.changeset/nervous-goats-judge.md b/.changeset/nervous-goats-judge.md
new file mode 100644
index 0000000000..da72217bb1
--- /dev/null
+++ b/.changeset/nervous-goats-judge.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/design-system': patch
+---
+
+Fix background color tokens for `<SecondaryButton>` and `<IconButton>` components
\ No newline at end of file
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
index dad9f4a2dd..4ed9d1875f 100644
--- a/design-system/materials/custom-properties.css
+++ b/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;
diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
index 2bc8094f92..8a21d62bbf 100644
--- a/design-system/materials/custom-properties.json
+++ b/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",
diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
index 71c88cf96c..e9082717cf 100644
--- a/design-system/materials/internals/definition.yaml
+++ b/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:
diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
index 56db26355a..3d7a59dcd9 100644
--- a/design-system/src/design-tokens.ts
+++ b/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: