fix(ButtonLink): fix incorrect hover backgroud color on primary

kiwicom · Sep 15, 2023 · fdc4c32 · fdc4c32
1 parent 34fe19c
commit fdc4c32
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 80 deletions.
diff --git a/packages/orbit-components/src/ButtonLink/helpers/getButtonLinkTypeToken.ts b/packages/orbit-components/src/ButtonLink/helpers/getButtonLinkTypeToken.ts
@@ -5,34 +5,34 @@ import type { Theme } from "../../defaultTheme";
 const getButtonLinkTypeToken = (name: string, type: Type, theme: Theme): string => {
   const tokens = {
     [TOKENS.background]: {
-      [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimary,
-      [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondary,
-      [TYPES.CRITICAL]: theme.orbit.backgroundButtonLinkCritical,
+      [TYPES.PRIMARY]: theme.orbit.buttonLinkPrimaryBackground,
+      [TYPES.SECONDARY]: theme.orbit.buttonLinkSecondaryBackground,
+      [TYPES.CRITICAL]: theme.orbit.buttonLinkCriticalBackground,
     },
     [TOKENS.backgroundHover]: {
-      [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimaryHover,
-      [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryHover,
-      [TYPES.CRITICAL]: theme.orbit.backgroundButtonLinkCriticalHover,
+      [TYPES.PRIMARY]: theme.orbit.buttonLinkPrimaryBackgroundHover,
+      [TYPES.SECONDARY]: theme.orbit.buttonLinkSecondaryBackgroundHover,
+      [TYPES.CRITICAL]: theme.orbit.buttonLinkCriticalBackgroundHover,
     },
     [TOKENS.backgroundActive]: {
-      [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimaryActive,
-      [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryActive,
-      [TYPES.CRITICAL]: theme.orbit.backgroundButtonLinkCriticalActive,
+      [TYPES.PRIMARY]: theme.orbit.buttonLinkPrimaryBackgroundActive,
+      [TYPES.SECONDARY]: theme.orbit.buttonLinkSecondaryBackgroundActive,
+      [TYPES.CRITICAL]: theme.orbit.buttonLinkCriticalBackgroundActive,
     },
     [TOKENS.foreground]: {
-      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimary,
-      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondary,
-      [TYPES.CRITICAL]: theme.orbit.colorTextButtonLinkCritical,
+      [TYPES.PRIMARY]: theme.orbit.buttonLinkPrimaryForeground,
+      [TYPES.SECONDARY]: theme.orbit.buttonLinkSecondaryForeground,
+      [TYPES.CRITICAL]: theme.orbit.buttonLinkCriticalForeground,
     },
     [TOKENS.foregroundHover]: {
-      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryHover,
-      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryHover,
-      [TYPES.CRITICAL]: theme.orbit.colorTextButtonLinkCriticalHover,
+      [TYPES.PRIMARY]: theme.orbit.buttonLinkPrimaryForegroundHover,
+      [TYPES.SECONDARY]: theme.orbit.buttonLinkSecondaryForegroundHover,
+      [TYPES.CRITICAL]: theme.orbit.buttonLinkCriticalForegroundHover,
     },
     [TOKENS.foregroundActive]: {
-      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryActive,
-      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryActive,
-      [TYPES.CRITICAL]: theme.orbit.colorTextButtonLinkCriticalActive,
+      [TYPES.PRIMARY]: theme.orbit.buttonLinkPrimaryForegroundActive,
+      [TYPES.SECONDARY]: theme.orbit.buttonLinkSecondaryForegroundActive,
+      [TYPES.CRITICAL]: theme.orbit.buttonLinkCriticalForegroundActive,
     },
   };
   return tokens[name][type];

diff --git a/packages/orbit-design-tokens/output/docs-tokens.json b/packages/orbit-design-tokens/output/docs-tokens.json
@@ -1103,15 +1103,15 @@
     },
     "javascript": {
       "name": "backgroundButtonLinkPrimaryHover",
-      "value": "#E5EAEF"
+      "value": "#D6F0EC"
     },
     "foundation": {
       "name": "backgroundButtonLinkPrimaryHover",
-      "value": "foundation.palette.cloud.lightHover"
+      "value": "foundation.palette.product.lightHover"
     },
     "scss": {
       "name": "backgroundButtonLinkPrimaryHover",
-      "value": "rgb(229, 234, 239)"
+      "value": "rgb(214, 240, 236)"
     }
   },
   "backgroundButtonLinkPrimaryActive": {
@@ -1126,15 +1126,15 @@
     },
     "javascript": {
       "name": "backgroundButtonLinkPrimaryActive",
-      "value": "#D6DEE6"
+      "value": "#BFE8E2"
     },
     "foundation": {
       "name": "backgroundButtonLinkPrimaryActive",
-      "value": "foundation.palette.cloud.lightActive"
+      "value": "foundation.palette.product.lightActive"
     },
     "scss": {
       "name": "backgroundButtonLinkPrimaryActive",
-      "value": "rgb(214, 222, 230)"
+      "value": "rgb(191, 232, 226)"
     }
   },
   "backgroundButtonLinkSecondary": {

diff --git a/packages/orbit-design-tokens/output/tokens.css b/packages/orbit-design-tokens/output/tokens.css
@@ -46,8 +46,8 @@
   --background-button-link-critical-hover: rgb(248, 226, 226);
   --background-button-link-critical-active: rgb(243, 206, 206);
   --background-button-link-primary: transparent;
-  --background-button-link-primary-hover: rgb(229, 234, 239);
-  --background-button-link-primary-active: rgb(214, 222, 230);
+  --background-button-link-primary-hover: rgb(214, 240, 236);
+  --background-button-link-primary-active: rgb(191, 232, 226);
   --background-button-link-secondary: transparent;
   --background-button-link-secondary-hover: rgb(229, 234, 239);
   --background-button-link-secondary-active: rgb(214, 222, 230);

diff --git a/packages/orbit-design-tokens/output/tokens.less b/packages/orbit-design-tokens/output/tokens.less
@@ -45,8 +45,8 @@
 @background-button-link-critical-hover: rgb(248, 226, 226);
 @background-button-link-critical-active: rgb(243, 206, 206);
 @background-button-link-primary: transparent;
-@background-button-link-primary-hover: rgb(229, 234, 239);
-@background-button-link-primary-active: rgb(214, 222, 230);
+@background-button-link-primary-hover: rgb(214, 240, 236);
+@background-button-link-primary-active: rgb(191, 232, 226);
 @background-button-link-secondary: transparent;
 @background-button-link-secondary-hover: rgb(229, 234, 239);
 @background-button-link-secondary-active: rgb(214, 222, 230);

diff --git a/packages/orbit-design-tokens/output/tokens.scss b/packages/orbit-design-tokens/output/tokens.scss
@@ -56,8 +56,8 @@ $background-button-link-critical: transparent;
 $background-button-link-critical-hover: rgb(248, 226, 226);
 $background-button-link-critical-active: rgb(243, 206, 206);
 $background-button-link-primary: transparent;
-$background-button-link-primary-hover: rgb(229, 234, 239);
-$background-button-link-primary-active: rgb(214, 222, 230);
+$background-button-link-primary-hover: rgb(214, 240, 236);
+$background-button-link-primary-active: rgb(191, 232, 226);
 $background-button-link-secondary: transparent;
 $background-button-link-secondary-hover: rgb(229, 234, 239);
 $background-button-link-secondary-active: rgb(214, 222, 230);

diff --git a/packages/orbit-design-tokens/output/tokens.styl b/packages/orbit-design-tokens/output/tokens.styl
@@ -45,8 +45,8 @@ $background-button-link-critical= transparent;
 $background-button-link-critical-hover= rgb(248, 226, 226);
 $background-button-link-critical-active= rgb(243, 206, 206);
 $background-button-link-primary= transparent;
-$background-button-link-primary-hover= rgb(229, 234, 239);
-$background-button-link-primary-active= rgb(214, 222, 230);
+$background-button-link-primary-hover= rgb(214, 240, 236);
+$background-button-link-primary-active= rgb(191, 232, 226);
 $background-button-link-secondary= transparent;
 $background-button-link-secondary-hover= rgb(229, 234, 239);
 $background-button-link-secondary-active= rgb(214, 222, 230);

diff --git a/packages/orbit-design-tokens/output/tokens.xml b/packages/orbit-design-tokens/output/tokens.xml
@@ -189,11 +189,11 @@
   </token>
   <token>
     <name>backgroundButtonLinkPrimaryHover</name>
-    <value>#E5EAEF</value>
+    <value>#D6F0EC</value>
   </token>
   <token>
     <name>backgroundButtonLinkPrimaryActive</name>
-    <value>#D6DEE6</value>
+    <value>#BFE8E2</value>
   </token>
   <token>
     <name>backgroundButtonLinkSecondary</name>

diff --git a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap
@@ -63,8 +63,8 @@ exports[`defaultTokens should match snapshot 1`] = `
   "backgroundButtonLinkCriticalActive": "#F3CECE",
   "backgroundButtonLinkCriticalHover": "#F8E2E2",
   "backgroundButtonLinkPrimary": "transparent",
-  "backgroundButtonLinkPrimaryActive": "#D6DEE6",
-  "backgroundButtonLinkPrimaryHover": "#E5EAEF",
+  "backgroundButtonLinkPrimaryActive": "#BFE8E2",
+  "backgroundButtonLinkPrimaryHover": "#D6F0EC",
   "backgroundButtonLinkSecondary": "transparent",
   "backgroundButtonLinkSecondaryActive": "#D6DEE6",
   "backgroundButtonLinkSecondaryHover": "#E5EAEF",

diff --git a/...t-design-tokens/src/dictionary/definitions/component/button-link/button-link-primary.json b/...t-design-tokens/src/dictionary/definitions/component/button-link/button-link-primary.json
@@ -48,15 +48,15 @@
         },
         "primary-hover": {
           "type": "color",
-          "value": "{foundation.palette.cloud.light-hover}",
+          "value": "{foundation.palette.product.light-hover}",
           "deprecated": true,
           "deprecated-replace": "{component.button-link.primary.background-hover}",
           "deprecated-different": true,
           "deprecated-version": "6.0.0"
         },
         "primary-active": {
           "type": "color",
-          "value": "{foundation.palette.cloud.light-active}",
+          "value": "{foundation.palette.product.light-active}",
           "deprecated": true,
           "deprecated-replace": "{component.button-link.primary.background-active}",
           "deprecated-different": true,

diff --git a/packages/orbit-design-tokens/src/js/boxShadow.ts b/packages/orbit-design-tokens/src/js/boxShadow.ts
@@ -1,8 +1,8 @@
-type BoxShadowDefinition = {
+interface BoxShadowDefinition {
   def: [string, string, string?, string?];
   color: string;
   inset?: boolean;
-};
+}
 
 const boxShadow = (definitions: Array<BoxShadowDefinition> | BoxShadowDefinition): string =>
   (Array.isArray(definitions) ? definitions : [definitions])

diff --git a/packages/orbit-design-tokens/src/js/createTokens.ts b/packages/orbit-design-tokens/src/js/createTokens.ts
@@ -13,7 +13,7 @@ import transparentColor from "./transparentColor";
 import boxShadow from "./boxShadow";
 import type { Foundation } from "./defaultFoundation";
 
-export type Tokens = {
+export interface Tokens {
   paddingAlert: string;
   paddingAlertWithIcon: string;
   paddingBadge: string;
@@ -833,7 +833,7 @@ export type Tokens = {
   zIndexDrawer: number;
   zIndexModal: number;
   zIndexOnTheTop: number;
-};
+}
 export type CreateTokens = (foundation: Foundation) => Tokens;
 const createTokens: CreateTokens = foundation => ({
   paddingAlert: foundation.space.medium,
@@ -883,8 +883,8 @@ const createTokens: CreateTokens = foundation => ({
   backgroundButtonLinkCriticalHover: foundation.palette.red.lightHover,
   backgroundButtonLinkCriticalActive: foundation.palette.red.lightActive,
   backgroundButtonLinkPrimary: "transparent",
-  backgroundButtonLinkPrimaryHover: foundation.palette.cloud.lightHover,
-  backgroundButtonLinkPrimaryActive: foundation.palette.cloud.lightActive,
+  backgroundButtonLinkPrimaryHover: foundation.palette.product.lightHover,
+  backgroundButtonLinkPrimaryActive: foundation.palette.product.lightActive,
   backgroundButtonLinkSecondary: "transparent",
   backgroundButtonLinkSecondaryHover: foundation.palette.cloud.lightHover,
   backgroundButtonLinkSecondaryActive: foundation.palette.cloud.lightActive,