Merge pull request #3284 from kiwicom/fix/buttonlink-colors

fix(ButtonLink): use dark shades for colour on hover and active
kiwicom · Feb 15, 2022 · 72e4620 · 72e4620
1 parent 11b921e
commit 72e4620
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 36 deletions.
diff --git a/packages/orbit-components/src/ButtonLink/helpers/getButtonLinkTypeToken.js b/packages/orbit-components/src/ButtonLink/helpers/getButtonLinkTypeToken.js
@@ -27,12 +27,12 @@ const getButtonLinkTypeToken: GetButtonLinkTypeToken = (name, type, theme) => {
     [TOKENS.foregroundHover]: {
       [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryHover,
       [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryHover,
-      [TYPES.CRITICAL]: theme.orbit.paletteRedNormalHover,
+      [TYPES.CRITICAL]: theme.orbit.paletteRedDarkHover,
     },
     [TOKENS.foregroundActive]: {
       [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryActive,
       [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryActive,
-      [TYPES.CRITICAL]: theme.orbit.paletteRedNormalActive,
+      [TYPES.CRITICAL]: theme.orbit.paletteRedDarkActive,
     },
   };
   return tokens[name][type];

diff --git a/packages/orbit-design-tokens/output/theo-spec.android.xml b/packages/orbit-design-tokens/output/theo-spec.android.xml
@@ -197,7 +197,7 @@
   <dimen name="FONTSIZEHEADINGTITLE2" category="Font size">22dp</dimen>
   <string name="BACKGROUNDBUTTONBUNDLEBASIC" category="Background colors">linear-gradient(to top right, #E13E3B 0, #E87E09 1)</string>
   <string name="FONTWEIGHTBOLD" category="Font weight">700</string>
-  <color name="COLORTEXTBUTTONLINKPRIMARYACTIVE" category="Colors">#ff008f7b</color>
+  <color name="COLORTEXTBUTTONLINKPRIMARYACTIVE" category="Colors">#ff006657</color>
   <color name="BACKGROUNDTAG" category="Background colors">#fff5f7f9</color>
   <color name="BACKGROUNDBUTTONFACEBOOKACTIVE" category="Background colors">#ff354f88</color>
   <color name="COLORTEXTLOADING" category="Colors">#ffbac7d5</color>
@@ -351,7 +351,7 @@
   <color name="BACKGROUNDTAGSELECTEDHOVER" category="Background colors">#ff181b20</color>
   <color name="BACKGROUNDALERTSUCCESS" category="Background colors">#ffebf4ec</color>
   <dimen name="PADDINGINPUTFILE" category="Spacing">0 0 0 6dp</dimen>
-  <color name="COLORTEXTBUTTONLINKPRIMARYHOVER" category="Colors">#ff009882</color>
+  <color name="COLORTEXTBUTTONLINKPRIMARYHOVER" category="Colors">#ff007060</color>
   <color name="COLORPLACEHOLDERINPUTFILE" category="Colors">#ff4f5e71</color>
   <string name="FONTWEIGHTHEADINGTITLE3" category="Font weight">500</string>
   <color name="COLORTEXTBUTTONINFOACTIVE" category="Colors">#ffffffff</color>

diff --git a/packages/orbit-design-tokens/output/theo-spec.common.js b/packages/orbit-design-tokens/output/theo-spec.common.js
@@ -198,7 +198,7 @@ module.exports = {
   fontSizeHeadingTitle2: "22px",
   backgroundButtonBundleBasic: "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)",
   fontWeightBold: "700",
-  colorTextButtonLinkPrimaryActive: "rgb(0, 143, 123)",
+  colorTextButtonLinkPrimaryActive: "rgb(0, 102, 87)",
   backgroundTag: "rgb(245, 247, 249)",
   backgroundButtonFacebookActive: "rgb(53, 79, 136)",
   colorTextLoading: "rgb(186, 199, 213)",
@@ -353,7 +353,7 @@ module.exports = {
   backgroundTagSelectedHover: "rgb(24, 27, 32)",
   backgroundAlertSuccess: "rgb(235, 244, 236)",
   paddingInputFile: "0 0 0 6px",
-  colorTextButtonLinkPrimaryHover: "rgb(0, 152, 130)",
+  colorTextButtonLinkPrimaryHover: "rgb(0, 112, 96)",
   colorPlaceholderInputFile: "rgb(79, 94, 113)",
   fontWeightHeadingTitle3: "500",
   colorTextButtonInfoActive: "rgb(255, 255, 255)",

diff --git a/packages/orbit-design-tokens/output/theo-spec.cssmodules.css b/packages/orbit-design-tokens/output/theo-spec.cssmodules.css
@@ -198,7 +198,7 @@
 @value font-size-heading-title2: 22px;
 @value background-button-bundle-basic: "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)";
 @value font-weight-bold: "700";
-@value color-text-button-link-primary-active: rgb(0, 143, 123);
+@value color-text-button-link-primary-active: rgb(0, 102, 87);
 @value background-tag: rgb(245, 247, 249);
 @value background-button-facebook-active: rgb(53, 79, 136);
 @value color-text-loading: rgb(186, 199, 213);
@@ -353,7 +353,7 @@
 @value background-tag-selected-hover: rgb(24, 27, 32);
 @value background-alert-success: rgb(235, 244, 236);
 @value padding-input-file: 0 0 0 6px;
-@value color-text-button-link-primary-hover: rgb(0, 152, 130);
+@value color-text-button-link-primary-hover: rgb(0, 112, 96);
 @value color-placeholder-input-file: rgb(79, 94, 113);
 @value font-weight-heading-title3: "500";
 @value color-text-button-info-active: rgb(255, 255, 255);

diff --git a/packages/orbit-design-tokens/output/theo-spec.ios.json b/packages/orbit-design-tokens/output/theo-spec.ios.json
@@ -1185,7 +1185,7 @@
       "name": "fontWeightBold"
     },
     {
-      "value": "rgb(0, 143, 123)",
+      "value": "rgb(0, 102, 87)",
       "type": "color",
       "category": "Colors",
       "name": "colorTextButtonLinkPrimaryActive"
@@ -2110,7 +2110,7 @@
       "name": "paddingInputFile"
     },
     {
-      "value": "rgb(0, 152, 130)",
+      "value": "rgb(0, 112, 96)",
       "type": "color",
       "category": "Colors",
       "name": "colorTextButtonLinkPrimaryHover"

diff --git a/packages/orbit-design-tokens/output/theo-spec.json b/packages/orbit-design-tokens/output/theo-spec.json
@@ -196,7 +196,7 @@
   "fontSizeHeadingTitle2": "22px",
   "backgroundButtonBundleBasic": "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)",
   "fontWeightBold": "700",
-  "colorTextButtonLinkPrimaryActive": "rgb(0, 143, 123)",
+  "colorTextButtonLinkPrimaryActive": "rgb(0, 102, 87)",
   "backgroundTag": "rgb(245, 247, 249)",
   "backgroundButtonFacebookActive": "rgb(53, 79, 136)",
   "colorTextLoading": "rgb(186, 199, 213)",
@@ -350,7 +350,7 @@
   "backgroundTagSelectedHover": "rgb(24, 27, 32)",
   "backgroundAlertSuccess": "rgb(235, 244, 236)",
   "paddingInputFile": "0 0 0 6px",
-  "colorTextButtonLinkPrimaryHover": "rgb(0, 152, 130)",
+  "colorTextButtonLinkPrimaryHover": "rgb(0, 112, 96)",
   "colorPlaceholderInputFile": "rgb(79, 94, 113)",
   "fontWeightHeadingTitle3": "500",
   "colorTextButtonInfoActive": "rgb(255, 255, 255)",

diff --git a/packages/orbit-design-tokens/output/theo-spec.less b/packages/orbit-design-tokens/output/theo-spec.less
@@ -198,7 +198,7 @@
 @font-size-heading-title2: 22px;
 @background-button-bundle-basic: "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)";
 @font-weight-bold: "700";
-@color-text-button-link-primary-active: rgb(0, 143, 123);
+@color-text-button-link-primary-active: rgb(0, 102, 87);
 @background-tag: rgb(245, 247, 249);
 @background-button-facebook-active: rgb(53, 79, 136);
 @color-text-loading: rgb(186, 199, 213);
@@ -353,7 +353,7 @@
 @background-tag-selected-hover: rgb(24, 27, 32);
 @background-alert-success: rgb(235, 244, 236);
 @padding-input-file: 0 0 0 6px;
-@color-text-button-link-primary-hover: rgb(0, 152, 130);
+@color-text-button-link-primary-hover: rgb(0, 112, 96);
 @color-placeholder-input-file: rgb(79, 94, 113);
 @font-weight-heading-title3: "500";
 @color-text-button-info-active: rgb(255, 255, 255);

diff --git a/packages/orbit-design-tokens/output/theo-spec.sass b/packages/orbit-design-tokens/output/theo-spec.sass
@@ -198,7 +198,7 @@ $height-illustration-medium: 200px
 $font-size-heading-title2: 22px
 $background-button-bundle-basic: "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)"
 $font-weight-bold: "700"
-$color-text-button-link-primary-active: rgb(0, 143, 123)
+$color-text-button-link-primary-active: rgb(0, 102, 87)
 $background-tag: rgb(245, 247, 249)
 $background-button-facebook-active: rgb(53, 79, 136)
 $color-text-loading: rgb(186, 199, 213)
@@ -353,7 +353,7 @@ $background-tooltip: rgb(255, 255, 255)
 $background-tag-selected-hover: rgb(24, 27, 32)
 $background-alert-success: rgb(235, 244, 236)
 $padding-input-file: 0 0 0 6px
-$color-text-button-link-primary-hover: rgb(0, 152, 130)
+$color-text-button-link-primary-hover: rgb(0, 112, 96)
 $color-placeholder-input-file: rgb(79, 94, 113)
 $font-weight-heading-title3: "500"
 $color-text-button-info-active: rgb(255, 255, 255)

diff --git a/packages/orbit-design-tokens/output/theo-spec.scss b/packages/orbit-design-tokens/output/theo-spec.scss
@@ -198,7 +198,7 @@ $height-illustration-medium: 200px;
 $font-size-heading-title2: 22px;
 $background-button-bundle-basic: "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)";
 $font-weight-bold: "700";
-$color-text-button-link-primary-active: rgb(0, 143, 123);
+$color-text-button-link-primary-active: rgb(0, 102, 87);
 $background-tag: rgb(245, 247, 249);
 $background-button-facebook-active: rgb(53, 79, 136);
 $color-text-loading: rgb(186, 199, 213);
@@ -353,7 +353,7 @@ $background-tooltip: rgb(255, 255, 255);
 $background-tag-selected-hover: rgb(24, 27, 32);
 $background-alert-success: rgb(235, 244, 236);
 $padding-input-file: 0 0 0 6px;
-$color-text-button-link-primary-hover: rgb(0, 152, 130);
+$color-text-button-link-primary-hover: rgb(0, 112, 96);
 $color-placeholder-input-file: rgb(79, 94, 113);
 $font-weight-heading-title3: "500";
 $color-text-button-info-active: rgb(255, 255, 255);

diff --git a/packages/orbit-design-tokens/output/theo-spec.styl b/packages/orbit-design-tokens/output/theo-spec.styl
@@ -198,7 +198,7 @@ $height-illustration-medium = 200px
 $font-size-heading-title2 = 22px
 $background-button-bundle-basic = "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)"
 $font-weight-bold = "700"
-$color-text-button-link-primary-active = rgb(0, 143, 123)
+$color-text-button-link-primary-active = rgb(0, 102, 87)
 $background-tag = rgb(245, 247, 249)
 $background-button-facebook-active = rgb(53, 79, 136)
 $color-text-loading = rgb(186, 199, 213)
@@ -353,7 +353,7 @@ $background-tooltip = rgb(255, 255, 255)
 $background-tag-selected-hover = rgb(24, 27, 32)
 $background-alert-success = rgb(235, 244, 236)
 $padding-input-file = 0 0 0 6px
-$color-text-button-link-primary-hover = rgb(0, 152, 130)
+$color-text-button-link-primary-hover = rgb(0, 112, 96)
 $color-placeholder-input-file = rgb(79, 94, 113)
 $font-weight-heading-title3 = "500"
 $color-text-button-info-active = rgb(255, 255, 255)

diff --git a/packages/orbit-design-tokens/pages/theo-spec.kiwi.html b/packages/orbit-design-tokens/pages/theo-spec.kiwi.html
@@ -867,10 +867,10 @@ <h1>Orbit Design Tokens</h1>
           <code>colorTextButtonLinkPrimaryActive</code>
         </th>
         <td>
-          <code>#008F7B</code>
+          <code>#006657</code>
         </td>
 
-        <td style="background-color: #f6f6f6; color: #008F7B;">
+        <td style="background-color: #f6f6f6; color: #006657;">
           The quick brown fox jumps over the lazy dog.
         </td>
 
@@ -1407,10 +1407,10 @@ <h1>Orbit Design Tokens</h1>
           <code>colorTextButtonLinkPrimaryHover</code>
         </th>
         <td>
-          <code>#009882</code>
+          <code>#007060</code>
         </td>
 
-        <td style="background-color: #f6f6f6; color: #009882;">
+        <td style="background-color: #f6f6f6; color: #007060;">
           The quick brown fox jumps over the lazy dog.
         </td>
 

diff --git a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.js.snap b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.js.snap
@@ -217,8 +217,8 @@ Object {
   "colorTextButtonInfoBorderedHover": "#0161AC",
   "colorTextButtonInfoHover": "#FFFFFF",
   "colorTextButtonLinkPrimary": "#00A991",
-  "colorTextButtonLinkPrimaryActive": "#008F7B",
-  "colorTextButtonLinkPrimaryHover": "#009882",
+  "colorTextButtonLinkPrimaryActive": "#006657",
+  "colorTextButtonLinkPrimaryHover": "#007060",
   "colorTextButtonLinkSecondary": "#252A31",
   "colorTextButtonLinkSecondaryActive": "#0B0C0F",
   "colorTextButtonLinkSecondaryHover": "#181B20",
@@ -713,8 +713,8 @@ Object {
   "colorTextButtonInfoBorderedHover": "#0161AC",
   "colorTextButtonInfoHover": "#FFFFFF",
   "colorTextButtonLinkPrimary": "#ff0000",
-  "colorTextButtonLinkPrimaryActive": "#cc0000",
-  "colorTextButtonLinkPrimaryHover": "#e50000",
+  "colorTextButtonLinkPrimaryActive": "#006657",
+  "colorTextButtonLinkPrimaryHover": "#007060",
   "colorTextButtonLinkSecondary": "#252A31",
   "colorTextButtonLinkSecondaryActive": "#0B0C0F",
   "colorTextButtonLinkSecondaryHover": "#181B20",
@@ -1209,8 +1209,8 @@ Object {
   "colorTextButtonInfoBorderedHover": "#0161AC",
   "colorTextButtonInfoHover": "#FFFFFF",
   "colorTextButtonLinkPrimary": "#00A991",
-  "colorTextButtonLinkPrimaryActive": "#008F7B",
-  "colorTextButtonLinkPrimaryHover": "#009882",
+  "colorTextButtonLinkPrimaryActive": "#006657",
+  "colorTextButtonLinkPrimaryHover": "#007060",
   "colorTextButtonLinkSecondary": "#252A31",
   "colorTextButtonLinkSecondaryActive": "#0B0C0F",
   "colorTextButtonLinkSecondaryHover": "#181B20",
@@ -1705,8 +1705,8 @@ Object {
   "colorTextButtonInfoBorderedHover": "#0161AC",
   "colorTextButtonInfoHover": "#FFFFFF",
   "colorTextButtonLinkPrimary": "#444",
-  "colorTextButtonLinkPrimaryActive": "#666",
-  "colorTextButtonLinkPrimaryHover": "#555",
+  "colorTextButtonLinkPrimaryActive": "#999",
+  "colorTextButtonLinkPrimaryHover": "#888",
   "colorTextButtonLinkSecondary": "#252A31",
   "colorTextButtonLinkSecondaryActive": "#0B0C0F",
   "colorTextButtonLinkSecondaryHover": "#181B20",

diff --git a/packages/orbit-design-tokens/src/index.js b/packages/orbit-design-tokens/src/index.js
@@ -102,8 +102,8 @@ export const getTokens: GetTokens = customFoundation => {
     colorTextButtonWhiteBorderedHover: theme.palette.white.normal,
     colorTextButtonWhiteBorderedActive: theme.palette.white.normal,
     colorTextButtonLinkPrimary: theme.palette.product.normal,
-    colorTextButtonLinkPrimaryHover: theme.palette.product.normalHover,
-    colorTextButtonLinkPrimaryActive: theme.palette.product.normalActive,
+    colorTextButtonLinkPrimaryHover: theme.palette.product.darkHover,
+    colorTextButtonLinkPrimaryActive: theme.palette.product.darkActive,
     colorTextButtonLinkSecondary: theme.palette.ink.normal,
     colorTextButtonLinkSecondaryHover: theme.palette.ink.normalHover,
     colorTextButtonLinkSecondaryActive: theme.palette.ink.normalActive,

diff --git a/packages/orbit-design-tokens/src/theo/theo-spec.json b/packages/orbit-design-tokens/src/theo/theo-spec.json
@@ -705,15 +705,15 @@
       }
     },
     "colorTextButtonLinkPrimaryHover": {
-      "value": "#009882",
+      "value": "#007060",
       "type": "color",
       "category": "Colors",
       "meta": {
         "categoryDescription": "Use these tokens for text or icon colors. Don't use these for borders and background colors."
       }
     },
     "colorTextButtonLinkPrimaryActive": {
-      "value": "#008F7B",
+      "value": "#006657",
       "type": "color",
       "category": "Colors",
       "meta": {