feat: create tokens

src/tokens/tokens.scss

@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #fff;
+  --colors-sb-background: #ffffff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --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;
@@ -55,7 +55,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: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,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;
@@ -79,7 +79,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;
@@ -91,16 +91,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;
@@ -115,7 +115,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;
@@ -132,10 +132,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;
@@ -161,12 +161,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;
@@ -189,13 +189,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;