From 306f332f637a23767bf24037306568ec62e90995 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Fri, 20 Dec 2024 17:31:37 +0000 Subject: [PATCH] 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;