From 1707d02995510130870dc59c756246070e34c1d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?=
 <48533432+mariannuar@users.noreply.github.com>
Date: Fri, 20 Dec 2024 11:04:20 -0600
Subject: [PATCH 1/3] Fix color contrast in pager

---
 src/tokens/figma.tokens.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
index c5f45f2..6db38f6 100644
--- a/src/tokens/figma.tokens.json
+++ b/src/tokens/figma.tokens.json
@@ -2217,13 +2217,13 @@
             "type": "color"
           },
           "focus": {
-            "value": "{color.primary.dark}",
+            "value": "{color.primary.darker}",
             "type": "color"
           }
         },
         "fill": {
           "hover": {
-            "value": "{color.primary.dark}",
+            "value": "{color.primary.darker}",
             "type": "color"
           }
         }

From 8fe1d0f20b433ca8dbb65069a9edf886e5fb8815 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 20 Dec 2024 11:30:09 -0600
Subject: [PATCH 2/3] fix(emulsif--441-fix-color-contrast-in-pager): update
 token for pager to fix color contrast

---
 src/tokens/tokens.scss             | 66 +++++++++++++++---------------
 src/tokens/transformed.tokens.json |  4 +-
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index b3b6602..3a37724 100644
--- 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,9 +59,9 @@
   --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;
@@ -69,11 +69,11 @@
   --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
index f8f0eb7..c273c62 100644
--- 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"
         }
       }

From 306f332f637a23767bf24037306568ec62e90995 Mon Sep 17 00:00:00 2001
From: mariannuar <mariannuar@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:31:37 +0000
Subject: [PATCH 3/3] feat: create tokens

---
 src/tokens/tokens.scss | 62 +++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 3a37724..9b3407d 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,47 +3,47 @@
  */
 
 :root {
-  --colors-sb-background: #fff;
+  --colors-sb-background: #ffffff;
   --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: #fff;
+  --tooltip-icon-color: #ffffff;
   --tooltip-icon-background: #0080b7;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #fff;
-  --tabs-color-bg-active: #fff;
-  --tabs-color-bg-hover: #fff;
+  --tabs-color-bg-default: #ffffff;
+  --tabs-color-bg-active: #ffffff;
+  --tabs-color-bg-hover: #ffffff;
   --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: #fff;
+  --table-color-cell-bg: #ffffff;
   --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: #fff;
+  --table-color-header-text: #ffffff;
   --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: #fff;
+  --status-color-danger-label: #ffffff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #fff;
+  --status-color-success-label: #ffffff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333;
+  --status-color-warning-label: #333333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #fff;
+  --selectdropdown-color-button-fill: #ffffff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #fff;
+  --selectdropdown-color-button-fill-disabled: #ffffff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -59,7 +59,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #fff;
+  --pager-color-text-hover: #ffffff;
   --pager-color-text-focus: #006089;
   --pager-color-fill-hover: #006089;
   --pager-default: [object Object];
@@ -69,11 +69,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #fff;
+  --utility-menu-color-bg: #ffffff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #fff;
-  --main-menu-color-link-bg: #fff;
+  --main-menu-color-bg: #ffffff;
+  --main-menu-color-link-bg: #ffffff;
   --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: #fff;
+  --link-color-inverse: #ffffff;
   --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: #fff;
+  --input-bkg: #ffffff;
   --header-search-background: #006089;
-  --header-search-text-icon: #fff;
+  --header-search-text-icon: #ffffff;
   --footer-background-default: #006089;
-  --footer-background-light: #fff;
+  --footer-background-light: #ffffff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #fff;
+  --fieldset-color-bg: #ffffff;
   --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: #fff;
+  --cta-color-button: #ffffff;
   --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: #fff;
+  --button-color-label: #ffffff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #fff;
-  --button-color-label-focus: #fff;
+  --button-color-label-hover: #ffffff;
+  --button-color-label-focus: #ffffff;
   --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: #fff;
+  --banner-button-border: #ffffff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #fff;
+  --banner-text: #ffffff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #fff;
+  --announcement-background-default: #ffffff;
   --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: #fff;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000;
-  --color-white: #fff;
+  --color-black: #000000;
+  --color-white: #ffffff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;