fix(emulsif--441-fix-color-contrast-in-pager): update token for pager…

… to fix color contrast
emulsify-ds · Dec 20, 2024 · 8fe1d0f · 8fe1d0f
1 parent 1707d02
commit 8fe1d0f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 35 deletions.
diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
@@ -3,47 +3,47 @@
  */
 
 :root {
-  --colors-sb-background: #ffffff;
+  --colors-sb-background: #fff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --tooltip-background-dark: #101618;
   --tooltip-background-light: #d4d7d8;
-  --tooltip-icon-color: #ffffff;
+  --tooltip-icon-color: #fff;
   --tooltip-icon-background: #0080b7;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #ffffff;
-  --tabs-color-bg-active: #ffffff;
-  --tabs-color-bg-hover: #ffffff;
+  --tabs-color-bg-default: #fff;
+  --tabs-color-bg-active: #fff;
+  --tabs-color-bg-hover: #fff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #ffffff;
+  --table-color-cell-bg: #fff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #ffffff;
+  --table-color-header-text: #fff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #ffffff;
+  --status-color-danger-label: #fff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #ffffff;
+  --status-color-success-label: #fff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333333;
+  --status-color-warning-label: #333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #ffffff;
+  --selectdropdown-color-button-fill: #fff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #ffffff;
+  --selectdropdown-color-button-fill-disabled: #fff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -59,21 +59,21 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #ffffff;
-  --pager-color-text-focus: #0080b7;
-  --pager-color-fill-hover: #0080b7;
+  --pager-color-text-hover: #fff;
+  --pager-color-text-focus: #006089;
+  --pager-color-fill-hover: #006089;
   --pager-default: [object Object];
   --pager-padding-x: 1rem;
   --pager-padding-x-hover: 1rem;
   --pager-padding-x-focus: 1rem;
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #ffffff;
+  --utility-menu-color-bg: #fff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #ffffff;
-  --main-menu-color-link-bg: #ffffff;
+  --main-menu-color-bg: #fff;
+  --main-menu-color-link-bg: #fff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -83,7 +83,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #ffffff;
+  --link-color-inverse: #fff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -95,16 +95,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #ffffff;
+  --input-bkg: #fff;
   --header-search-background: #006089;
-  --header-search-text-icon: #ffffff;
+  --header-search-text-icon: #fff;
   --footer-background-default: #006089;
-  --footer-background-light: #ffffff;
+  --footer-background-light: #fff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #ffffff;
+  --fieldset-color-bg: #fff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -119,7 +119,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #ffffff;
+  --cta-color-button: #fff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -136,10 +136,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #ffffff;
+  --button-color-label: #fff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #ffffff;
-  --button-color-label-focus: #ffffff;
+  --button-color-label-hover: #fff;
+  --button-color-label-focus: #fff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -165,12 +165,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #ffffff;
+  --banner-button-border: #fff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #ffffff;
+  --banner-text: #fff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #ffffff;
+  --announcement-background-default: #fff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -193,13 +193,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #ffffff;
+  --color-text-white: #fff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000000;
-  --color-white: #ffffff;
+  --color-black: #000;
+  --color-white: #fff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -297,13 +297,13 @@
           "type": "color"
         },
         "focus": {
-          "value": "#0080b7",
+          "value": "#006089",
           "type": "color"
         }
       },
       "fill": {
         "hover": {
-          "value": "#0080b7",
+          "value": "#006089",
           "type": "color"
         }
       }