From c15c5d9365885550b298ef10efbe3de6236c3c8c Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 5 Sep 2023 15:23:21 -0700 Subject: [PATCH] update token names for demo --- demo/index.html | 2 +- src/style.scss | 87 ++++---- themeDemo/CSSCustomProperties.css | 340 ++++++++++++++++++++++++++++++ themeDemo/SCSSVariables.scss | 340 ++++++++++++++++++++++++++++++ 4 files changed, 725 insertions(+), 44 deletions(-) create mode 100644 themeDemo/CSSCustomProperties.css create mode 100644 themeDemo/SCSSVariables.scss diff --git a/demo/index.html b/demo/index.html index b1d43b5..5343a7c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -9,7 +9,7 @@ type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@latest/themes/prism.css" /> - + diff --git a/src/style.scss b/src/style.scss index 9a11a17..78acdac 100644 --- a/src/style.scss +++ b/src/style.scss @@ -22,7 +22,8 @@ no-duplicate-selectors */ // Import Auro Sass variables -@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables"; +// @import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables"; +@import "./../themeDemo/SCSSVariables.scss"; // general WCSS imports @import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; @@ -51,15 +52,15 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03); &[variant='secondary'], &--secondary { background-color: var(--ds-color-background-lighter); - box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-on-light); + box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-default); } // auro-button--tertiary &[variant='tertiary'], &--tertiary { background-color: var(--ds-color-background-lighter); - border-color: var(--ds-color-ui-default-on-light); - box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-on-light); + border-color: var(--ds-color-ui-default-default); + box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-default); } // auro-buttonOndark @@ -118,8 +119,8 @@ slot { color: var(--ds-color-text-primary-on-dark); cursor: pointer; - background-color: var(--ds-color-ui-default-on-light); - border: 1px solid var(--ds-color-ui-default-on-light); + background-color: var(--ds-color-ui-default-default); + border: 1px solid var(--ds-color-ui-default-default); border-radius: var(--ds-border-radius); font-family: var(--ds-font-family-default); font-size: var(--ds-text-body-size-default); @@ -150,15 +151,15 @@ slot { @media (hover: hover) { &:active, &:hover { - background-color: var(--ds-color-ui-hover-on-light); - border: 1px solid var(--ds-color-ui-hover-on-light); + background-color: var(--ds-color-ui-hover-default); + border: 1px solid var(--ds-color-ui-hover-default); } } // handle active state &:active { - background-color: var(--ds-color-ui-active-on-light); - border: 1px solid var(--ds-color-ui-active-on-light); + background-color: var(--ds-color-ui-active-default); + border: 1px solid var(--ds-color-ui-active-default); transform: scale(0.95); } @@ -189,13 +190,13 @@ slot { cursor: not-allowed; transform: unset; - background-color: rgba($auro-color-ui-default-on-light, $disabledOPacity); - border: 1px solid rgba($auro-color-ui-default-on-light, 0); + background-color: rgba($ds-color-ui-default-default, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-default, 0); @media (hover: hover) { &:hover { - background-color: rgba($auro-color-ui-default-on-light, $disabledOPacity); - border: 1px solid rgba($auro-color-ui-default-on-light, 0); + background-color: rgba($ds-color-ui-default-default, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-default, 0); } } } @@ -204,35 +205,35 @@ slot { &[variant='secondary'], &--secondary { background-color: var(--ds-color-background-lightest); - border: 1px solid var(--ds-color-ui-default-on-light); - color: var(--ds-color-text-link-on-light); + border: 1px solid var(--ds-color-ui-default-default); + color: var(--ds-color-text-link-default); @media (hover: hover) { &:active, &:hover { - background-color: var(--ds-color-ui-bkg-hover-on-light); - border: 1px solid var(--ds-color-ui-default-on-light); + background-color: var(--ds-color-ui-bkg-hover-default); + border: 1px solid var(--ds-color-ui-default-default); } } &:active { - background-color: var(--ds-color-ui-bkg-hover-on-light); - border: 1px solid var(--ds-color-ui-default-on-light); + background-color: var(--ds-color-ui-bkg-hover-default); + border: 1px solid var(--ds-color-ui-default-default); } &:disabled { cursor: not-allowed; transform: unset; - color: rgba($auro-color-text-link-on-light, $disabledOPacity); - background-color: rgba($auro-color-background-lightest, $disabledOPacity); - border: 1px solid rgba($auro-color-ui-default-on-light, $disabledOPacity); + color: rgba($ds-color-text-link-default, $disabledOPacity); + background-color: rgba($ds-color-background-lightest, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity); @media (hover: hover) { &:hover { - color: rgba($auro-color-text-link-on-light, $disabledOPacity); - background-color: rgba($auro-color-background-lightest, $disabledOPacity); - border: 1px solid rgba($auro-color-ui-default-on-light, $disabledOPacity); + color: rgba($ds-color-text-link-default, $disabledOPacity); + background-color: rgba($ds-color-background-lightest, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity); } } } @@ -243,18 +244,18 @@ slot { &--tertiary { background-color: $auro-rgb-color-base-black-03; border-color: transparent; - color: var(--ds-color-text-link-on-light); + color: var(--ds-color-text-link-default); @media (hover: hover) { &:active, &:hover { - background-color: var(--ds-color-ui-bkg-hover-on-light); + background-color: var(--ds-color-ui-bkg-hover-default); border-color: transparent; } } &:active { - background-color: var(--ds-color-ui-bkg-hover-on-light); + background-color: var(--ds-color-ui-bkg-hover-default); border-color: transparent; } @@ -262,7 +263,7 @@ slot { cursor: not-allowed; transform: unset; - color: rgba($auro-color-text-link-on-light, $disabledOPacity); + color: rgba($ds-color-text-link-default, $disabledOPacity); background-color: $auro-rgb-color-base-black-03; border: 1px solid transparent; @@ -278,7 +279,7 @@ slot { &Ondark { background-color: var(--ds-color-ui-default-on-dark); border: 1px solid var(--ds-color-ui-default-on-dark); - color: var(--ds-color-text-primary-on-light); + color: var(--ds-color-text-primary-default); // auro-buttonOndark hover @media (hover: hover) { @@ -298,15 +299,15 @@ slot { cursor: not-allowed; transform: unset; - color: rgba($auro-color-text-primary-on-light, $disabledOPacity); - background-color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); - border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity); + color: rgba($ds-color-text-primary-default, $disabledOPacity); + background-color: rgba($ds-color-ui-default-on-dark, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-on-dark, $disabledOPacity); @media (hover: hover) { &:hover { - color: rgba($auro-color-text-primary-on-light, $disabledOPacity); - background-color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); - border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity); + color: rgba($ds-color-text-primary-default, $disabledOPacity); + background-color: rgba($ds-color-ui-default-on-dark, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-on-dark, $disabledOPacity); } } } @@ -343,15 +344,15 @@ slot { cursor: not-allowed; transform: unset; - color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); + color: rgba($ds-color-ui-default-on-dark, $disabledOPacity); background-color: var(--ds-color-background-darker); - border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-on-dark, $disabledOPacity); @media (hover: hover) { &:hover { - color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); + color: rgba($ds-color-ui-default-on-dark, $disabledOPacity); background-color: var(--ds-color-background-darker); - border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity); + border: 1px solid rgba($ds-color-ui-default-on-dark, $disabledOPacity); } } } @@ -384,12 +385,12 @@ slot { transform: unset; background-color: $auro-rgb-color-base-white-03; border: transparent; - color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); + color: rgba($ds-color-ui-default-on-dark, $disabledOPacity); @media (hover: hover) { &:hover { background-color: $auro-rgb-color-base-white-03; - color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); + color: rgba($ds-color-ui-default-on-dark, $disabledOPacity); border: transparent; } } diff --git a/themeDemo/CSSCustomProperties.css b/themeDemo/CSSCustomProperties.css new file mode 100644 index 0000000..21216b8 --- /dev/null +++ b/themeDemo/CSSCustomProperties.css @@ -0,0 +1,340 @@ +/** + * Do not edit directly + * Generated on Tue, 05 Sep 2023 18:02:32 GMT + */ + + :root { + --ds-asset-font-circular-family-name: "AS Circular"; + --ds-asset-font-circular-filename: "ASCircularWeb"; + --ds-asset-font-circular-weight-light: "-Light"; + --ds-asset-font-circular-weight-medium: "-Medium"; + --ds-asset-font-circular-weight-book: "-Book"; + --ds-border-radius: 0.375rem; + --ds-size-25: 0.125rem; /* 2px */ + --ds-size-50: 0.25rem; /* 4px */ + --ds-size-100: 0.5rem; /* 8px */ + --ds-size-150: 0.75rem; /* 12px */ + --ds-size-200: 1rem; /* 16px */ + --ds-size-300: 1.5rem; /* 24px */ + --ds-size-400: 2rem; /* 32px */ + --ds-size-500: 2.5rem; /* 40px */ + --ds-size-600: 3rem; /* 48px */ + --ds-size-700: 3.5rem; /* 56px */ + --ds-size-800: 4rem; /* 64px */ + --ds-size-900: 4.5rem; /* 72px */ + --ds-size-1000: 5rem; /* 80px */ + --ds-size-none: 0rem; /* Deprecated token, use 0 value */ + --ds-size-xxxs: 0.125rem; /* + // New token, see auro-size-25 */ + --ds-size-xxs: 0.25rem; /* + // New token, see auro-size-50 */ + --ds-size-xs: 0.5rem; /* + // New token, see auro-size-100 */ + --ds-size-sm: 0.75rem; /* + // New token, see auro-size-150 */ + --ds-size-md: 1rem; /* + // New token, see auro-size-200 */ + --ds-size-lg: 1.5rem; /* + // New token, see auro-size-300 */ + --ds-size-xl: 2rem; /* + // New token, see auro-size-400 */ + --ds-size-xxl: 3rem; /* + // New token, see auro-size-600 */ + --ds-size-xxxl: 4rem; /* + // New token, see auro-size-800 */ + --ds-unitless-scale-20: 0.25; + --ds-unitless-scale-50: 0.5; + --ds-unitless-scale-100: 1; + --ds-unitless-scale-140: 1.4; + --ds-unitless-scale-150: 1.5; + --ds-unitless-scale-200: 2; + --ds-unitless-scale-300: 3; + --ds-unitless-scale-350: 3.5; + --ds-animation-default-property: all; + --ds-animation-default-duration: 0.3s; + --ds-animation-default-timing: ease-out; + --ds-depth-overlay: 200; + --ds-depth-modal: 400; + --ds-depth-tooltip: 300; + --ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15); /* for the least amount of emphasis */ + --ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15); /* for more emphasis than low elevation */ + --ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2); /* for maximum emphasis or differentiation */ + --ds-grid-breakpoint-xs: 320px; + --ds-grid-breakpoint-sm: 576px; + --ds-grid-breakpoint-md: 768px; + --ds-grid-breakpoint-lg: 1024px; + --ds-grid-breakpoint-xl: 1232px; + --ds-grid-column-xs: 6; + --ds-grid-column-sm: 12; + --ds-grid-column-md: 12; + --ds-grid-column-lg: 12; + --ds-grid-column-xl: 12; + --ds-grid-gutter-xs: 0.5rem; + --ds-grid-gutter-sm: 1rem; + --ds-grid-gutter-md: 1.5rem; + --ds-grid-gutter-lg: 1.5rem; + --ds-grid-gutter-xl: 2rem; + --ds-grid-margin-xs: 1rem; + --ds-grid-margin-sm: 1rem; + --ds-grid-margin-md: 1.5rem; + --ds-grid-margin-lg: 2rem; + --ds-grid-margin-xl: 2rem; + --ds-font-family-default: 'AS Circular', Helvetica Neue, Arial, sans-serif; + --ds-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace; + --ds-text-heading-300-weight: 300; + --ds-text-heading-300-px: 18px; + --ds-text-heading-300-size: 1.125rem; + --ds-text-heading-300-height: 1.625rem; + --ds-text-heading-300-height-px: 26px; + --ds-text-heading-400-weight: 300; + --ds-text-heading-400-px: 20px; + --ds-text-heading-400-size: 1.25rem; + --ds-text-heading-400-height: 1.625rem; + --ds-text-heading-400-height-px: 26px; + --ds-text-heading-500-weight: 300; + --ds-text-heading-500-px-breakpoint-sm: 22px; + --ds-text-heading-500-px-breakpoint-md: 24px; + --ds-text-heading-500-px-breakpoint-lg: 24px; + --ds-text-heading-500-size-breakpoint-sm: 1.375rem; + --ds-text-heading-500-size-breakpoint-md: 1.5rem; + --ds-text-heading-500-size-breakpoint-lg: 1.5rem; + --ds-text-heading-500-height-breakpoint-sm: 1.625rem; + --ds-text-heading-500-height-breakpoint-px-sm: 26px; + --ds-text-heading-500-height-breakpoint-md: 1.875rem; + --ds-text-heading-500-height-breakpoint-px-md: 30px; + --ds-text-heading-500-height-breakpoint-lg: 2rem; + --ds-text-heading-500-height-breakpoint-px-lg: 32px; + --ds-text-heading-600-weight: 300; + --ds-text-heading-600-px-breakpoint-sm: 26px; + --ds-text-heading-600-px-breakpoint-md: 28px; + --ds-text-heading-600-px-breakpoint-lg: 28px; + --ds-text-heading-600-size-breakpoint-sm: 1.625rem; + --ds-text-heading-600-size-breakpoint-md: 1.75rem; + --ds-text-heading-600-size-breakpoint-lg: 1.75rem; + --ds-text-heading-600-height-breakpoint-sm: 1.875rem; + --ds-text-heading-600-height-breakpoint-px-sm: 30px; + --ds-text-heading-600-height-breakpoint-md: 2.125rem; + --ds-text-heading-600-height-breakpoint-px-md: 34px; + --ds-text-heading-600-height-breakpoint-lg: 2.25rem; + --ds-text-heading-600-height-breakpoint-px-lg: 36px; + --ds-text-heading-700-weight: 500; + --ds-text-heading-700-px-breakpoint-sm: 28px; + --ds-text-heading-700-px-breakpoint-md: 32px; + --ds-text-heading-700-px-breakpoint-lg: 36px; + --ds-text-heading-700-size-breakpoint-sm: 1.75rem; + --ds-text-heading-700-size-breakpoint-md: 2rem; + --ds-text-heading-700-size-breakpoint-lg: 2.25rem; + --ds-text-heading-700-height-breakpoint-sm: 2.125rem; + --ds-text-heading-700-height-breakpoint-px-sm: 34px; + --ds-text-heading-700-height-breakpoint-md: 2.375rem; + --ds-text-heading-700-height-breakpoint-px-md: 38px; + --ds-text-heading-700-height-breakpoint-lg: 2.75rem; + --ds-text-heading-700-height-breakpoint-px-lg: 44px; + --ds-text-heading-800-weight: 500; + --ds-text-heading-800-px-breakpoint-sm: 32px; + --ds-text-heading-800-px-breakpoint-md: 36px; + --ds-text-heading-800-px-breakpoint-lg: 40px; + --ds-text-heading-800-size-breakpoint-sm: 2rem; + --ds-text-heading-800-size-breakpoint-md: 2.25rem; + --ds-text-heading-800-size-breakpoint-lg: 2.5rem; + --ds-text-heading-800-height-breakpoint-sm: 2.375rem; + --ds-text-heading-800-height-breakpoint-px-sm: 38px; + --ds-text-heading-800-height-breakpoint-md: 2.625rem; + --ds-text-heading-800-height-breakpoint-px-md: 42px; + --ds-text-heading-800-height-breakpoint-lg: 3rem; + --ds-text-heading-800-height-breakpoint-px-lg: 48px; + --ds-text-heading-default-weight: 500; + --ds-text-heading-default-margin: 0; + --ds-text-heading-default-spacing: -0.2px; + --ds-text-heading-medium-weight: 300; + --ds-text-heading-display-weight: 100; + --ds-text-heading-display-px-breakpoint-sm: 44px; + --ds-text-heading-display-px-breakpoint-md: 48px; + --ds-text-heading-display-px-breakpoint-lg: 56px; + --ds-text-heading-display-size-breakpoint-sm: 2.75rem; + --ds-text-heading-display-size-breakpoint-md: 3rem; + --ds-text-heading-display-size-breakpoint-lg: 3.5rem; + --ds-text-heading-display-height-breakpoint-sm: 3.375rem; + --ds-text-heading-display-height-breakpoint-px-sm: 54px; + --ds-text-heading-display-height-breakpoint-md: 3.75rem; + --ds-text-heading-display-height-breakpoint-px-md: 60px; + --ds-text-heading-display-height-breakpoint-lg: 4.25rem; + --ds-text-heading-display-height-breakpoint-px-lg: 68px; + --ds-text-body-default-weight: 500; + --ds-text-body-size-xxs: 0.625rem; + --ds-text-body-size-xs: 0.75rem; + --ds-text-body-size-sm: 0.875rem; + --ds-text-body-size-default: 1rem; + --ds-text-body-size-lg: 1.125rem; + --ds-text-body-height-xs: 1rem; + --ds-text-body-height-sm: 1.25rem; + --ds-text-body-height-default: 1.5rem; + --ds-text-body-height-lg: 1.625rem; + --ds-color-alert-notification-default: #0074c8; + --ds-color-alert-warning-default: #de750c; + --ds-color-alert-error-default: #df0b37; + --ds-color-alert-success-default: #00805d; + --ds-color-alert-advisory-default: #fff0cd; + --ds-color-alert-bkg-success-default: #ddf6e8; + --ds-color-alert-bkg-error-default: #ffedf1; + --ds-color-background-lightest: #ffffff; + --ds-color-background-lighter: #f8f8f8; + --ds-color-background-darker: #01426a; + --ds-color-background-darkest: #00274a; + --ds-color-base-white: #ffffff; /* + // Base value for token support; should not use in code! */ + --ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); /* white @ 40% */ + --ds-color-base-black: #000000; /* + // Base value for token support; should not use in code! */ + --ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); /* black @ 15% */ + --ds-color-state-error-100: #ff999b; + --ds-color-state-error-500: #df0b37; + --ds-color-state-success-100: #69cf96; + --ds-color-state-success-500: #00805d; + --ds-color-state-warning-500: #de750c; + --ds-color-border-primary-default: #626b79; + --ds-color-border-primary-inverse: #9fabbb; + --ds-color-border-active-default: #0074c8; + --ds-color-border-error-default: #df0b37; + --ds-color-border-disabled-default: #dbdbdb; + --ds-color-border-focus-default: #222222; + --ds-color-border-focus-on-dark: #ffffff; + --ds-color-border-divider-default: rgba(0, 0, 0, 0.15); + --ds-color-border-divider-inverse: #ffffff; + --ds-color-brand-midnight-100: #c1daf0; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-midnight-200: #569ed7; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-midnight-300: #156fad; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-midnight-400: #01426a; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-midnight-500: #00274a; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-atlas-100: #cde6ff; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-atlas-200: #6bb7fb; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-atlas-300: #2492eb; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-atlas-400: #0074c8; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-atlas-500: #054687; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-breeze-100: #c0f7ff; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-breeze-200: #5de3f7; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-breeze-300: #00cff0; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-breeze-400: #099dc5; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-breeze-500: #0b5575; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-tropical-100: #e2ffcd; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-tropical-200: #d0fba6; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-tropical-300: #c0e585; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-tropical-400: #91be62; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-tropical-500: #5e8741; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-alpine-100: #bcaae6; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-alpine-200: #9e73ea; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-alpine-300: #8439ef; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-alpine-400: #631db8; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-alpine-500: #39115c; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-flamingo-100: #ffebee; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-flamingo-200: #ffc0ca; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-flamingo-300: #ff94a7; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-flamingo-400: #f65b7b; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-flamingo-500: #b82b47; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-canyon-100: #ffcab6; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-canyon-200: #f99574; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-canyon-300: #f26135; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-canyon-400: #de3e09; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-canyon-500: #b83302; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-goldcoast-100: #fff0cd; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-goldcoast-200: #ffdb67; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-goldcoast-300: #ffd200; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-goldcoast-400: #e5ad07; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-goldcoast-500: #b88624; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-neutral-100: #f9fbfc; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-neutral-200: #e2eaef; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-neutral-300: #cbd8e2; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-neutral-400: #9fabbb; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-neutral-500: #626b79; /* + // Please consider descriptive token prior to using brand token */ + --ds-color-brand-gray-100: #f8f8f8; + --ds-color-brand-gray-200: #dbdbdb; + --ds-color-brand-gray-300: #b2b2b2; + --ds-color-brand-gray-400: #767676; + --ds-color-brand-gray-500: #222222; + --ds-color-brand-goldgray-100: #c5c1bf; + --ds-color-brand-goldgray-200: #726e6c; + --ds-color-brand-gold-100: #ccbc94; + --ds-color-brand-gold-200: #7f682e; + --ds-color-brand-emerald: #139142; + --ds-color-brand-sapphire: #015daa; + --ds-color-brand-ruby: #a41d4a; + --ds-color-icon-primary-default: #626b79; + --ds-color-icon-primary-inverse: #9fabbb; + --ds-color-icon-emphasis-default: #222222; + --ds-color-icon-emphasis-inverse: #ffffff; + --ds-color-icon-accent-default: #0074c8; + --ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15); + --ds-color-text-primary-default: #222222; + --ds-color-text-primary-inverse: #ffffff; + --ds-color-text-secondary-default: #626b79; + --ds-color-text-secondary-inverse: #9fabbb; + --ds-color-text-link-default: #0074c8; + --ds-color-text-link-on-dark: #00cff0; + --ds-color-text-link-inverse: #00cff0; + --ds-color-text-error-default: #df0b37; + --ds-color-text-error-inverse: #ff999b; + --ds-color-text-disabled-default: #dbdbdb; + --ds-color-text-emphasis-default: #01426a; + --ds-color-text-emphasis-inverse: #c1daf0; + --ds-color-tier-alaska-mvp-default: #726e6c; + --ds-color-tier-alaska-mvp-inverse: #c5c1bf; + --ds-color-tier-alaska-mvpgold-default: #7f682e; + --ds-color-tier-alaska-mvpgold-inverse: #ccbc94; + --ds-color-tier-oneworld-emerald: #139142; + --ds-color-tier-oneworld-sapphire: #015daa; + --ds-color-tier-oneworld-ruby: #a41d4a; + --ds-color-ui-default-default: #0074c8; + --ds-color-ui-hover-default: #054687; + --ds-color-ui-active-default: #054687; + --ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2); + --ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06); + --ds-color-ui-default-on-dark: #00cff0; + --ds-color-ui-active-on-dark: #5de3f7; + --ds-color-ui-hover-on-dark: #5de3f7; + --ds-color-text-primary-on-dark: #ffffff; +} diff --git a/themeDemo/SCSSVariables.scss b/themeDemo/SCSSVariables.scss new file mode 100644 index 0000000..3b2b463 --- /dev/null +++ b/themeDemo/SCSSVariables.scss @@ -0,0 +1,340 @@ + +// Do not edit directly +// Generated on Tue, 05 Sep 2023 18:02:32 GMT + +$ds-asset-font-circular-family-name: "AS Circular"; +$ds-asset-font-circular-filename: "ASCircularWeb"; +$ds-asset-font-circular-weight-light: "-Light"; +$ds-asset-font-circular-weight-medium: "-Medium"; +$ds-asset-font-circular-weight-book: "-Book"; +$ds-border-radius: 0.375rem; +$ds-size-25: 0.125rem; // 2px +$ds-size-50: 0.25rem; // 4px +$ds-size-100: 0.5rem; // 8px +$ds-size-150: 0.75rem; // 12px +$ds-size-200: 1rem; // 16px +$ds-size-300: 1.5rem; // 24px +$ds-size-400: 2rem; // 32px +$ds-size-500: 2.5rem; // 40px +$ds-size-600: 3rem; // 48px +$ds-size-700: 3.5rem; // 56px +$ds-size-800: 4rem; // 64px +$ds-size-900: 4.5rem; // 72px +$ds-size-1000: 5rem; // 80px +$ds-size-none: 0rem; // Deprecated token, use 0 value +$ds-size-xxxs: 0.125rem; // + // New token, see auro-size-25 +$ds-size-xxs: 0.25rem; // + // New token, see auro-size-50 +$ds-size-xs: 0.5rem; // + // New token, see auro-size-100 +$ds-size-sm: 0.75rem; // + // New token, see auro-size-150 +$ds-size-md: 1rem; // + // New token, see auro-size-200 +$ds-size-lg: 1.5rem; // + // New token, see auro-size-300 +$ds-size-xl: 2rem; // + // New token, see auro-size-400 +$ds-size-xxl: 3rem; // + // New token, see auro-size-600 +$ds-size-xxxl: 4rem; // + // New token, see auro-size-800 +$ds-unitless-scale-20: 0.25; +$ds-unitless-scale-50: 0.5; +$ds-unitless-scale-100: 1; +$ds-unitless-scale-140: 1.4; +$ds-unitless-scale-150: 1.5; +$ds-unitless-scale-200: 2; +$ds-unitless-scale-300: 3; +$ds-unitless-scale-350: 3.5; +$ds-animation-default-property: all; +$ds-animation-default-duration: 0.3s; +$ds-animation-default-timing: ease-out; +$ds-depth-overlay: 200; +$ds-depth-modal: 400; +$ds-depth-tooltip: 300; +$ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15); // for the least amount of emphasis +$ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15); // for more emphasis than low elevation +$ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2); // for maximum emphasis or differentiation +$ds-grid-breakpoint-xs: 320px; +$ds-grid-breakpoint-sm: 576px; +$ds-grid-breakpoint-md: 768px; +$ds-grid-breakpoint-lg: 1024px; +$ds-grid-breakpoint-xl: 1232px; +$ds-grid-column-xs: 6; +$ds-grid-column-sm: 12; +$ds-grid-column-md: 12; +$ds-grid-column-lg: 12; +$ds-grid-column-xl: 12; +$ds-grid-gutter-xs: 0.5rem; +$ds-grid-gutter-sm: 1rem; +$ds-grid-gutter-md: 1.5rem; +$ds-grid-gutter-lg: 1.5rem; +$ds-grid-gutter-xl: 2rem; +$ds-grid-margin-xs: 1rem; +$ds-grid-margin-sm: 1rem; +$ds-grid-margin-md: 1.5rem; +$ds-grid-margin-lg: 2rem; +$ds-grid-margin-xl: 2rem; +$ds-font-family-default: 'AS Circular', Helvetica Neue, Arial, sans-serif; +$ds-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace; +$ds-text-heading-300-weight: 300; +$ds-text-heading-300-px: 18px; +$ds-text-heading-300-size: 1.125rem; +$ds-text-heading-300-height: 1.625rem; +$ds-text-heading-300-height-px: 26px; +$ds-text-heading-400-weight: 300; +$ds-text-heading-400-px: 20px; +$ds-text-heading-400-size: 1.25rem; +$ds-text-heading-400-height: 1.625rem; +$ds-text-heading-400-height-px: 26px; +$ds-text-heading-500-weight: 300; +$ds-text-heading-500-px-breakpoint-sm: 22px; +$ds-text-heading-500-px-breakpoint-md: 24px; +$ds-text-heading-500-px-breakpoint-lg: 24px; +$ds-text-heading-500-size-breakpoint-sm: 1.375rem; +$ds-text-heading-500-size-breakpoint-md: 1.5rem; +$ds-text-heading-500-size-breakpoint-lg: 1.5rem; +$ds-text-heading-500-height-breakpoint-sm: 1.625rem; +$ds-text-heading-500-height-breakpoint-px-sm: 26px; +$ds-text-heading-500-height-breakpoint-md: 1.875rem; +$ds-text-heading-500-height-breakpoint-px-md: 30px; +$ds-text-heading-500-height-breakpoint-lg: 2rem; +$ds-text-heading-500-height-breakpoint-px-lg: 32px; +$ds-text-heading-600-weight: 300; +$ds-text-heading-600-px-breakpoint-sm: 26px; +$ds-text-heading-600-px-breakpoint-md: 28px; +$ds-text-heading-600-px-breakpoint-lg: 28px; +$ds-text-heading-600-size-breakpoint-sm: 1.625rem; +$ds-text-heading-600-size-breakpoint-md: 1.75rem; +$ds-text-heading-600-size-breakpoint-lg: 1.75rem; +$ds-text-heading-600-height-breakpoint-sm: 1.875rem; +$ds-text-heading-600-height-breakpoint-px-sm: 30px; +$ds-text-heading-600-height-breakpoint-md: 2.125rem; +$ds-text-heading-600-height-breakpoint-px-md: 34px; +$ds-text-heading-600-height-breakpoint-lg: 2.25rem; +$ds-text-heading-600-height-breakpoint-px-lg: 36px; +$ds-text-heading-700-weight: 500; +$ds-text-heading-700-px-breakpoint-sm: 28px; +$ds-text-heading-700-px-breakpoint-md: 32px; +$ds-text-heading-700-px-breakpoint-lg: 36px; +$ds-text-heading-700-size-breakpoint-sm: 1.75rem; +$ds-text-heading-700-size-breakpoint-md: 2rem; +$ds-text-heading-700-size-breakpoint-lg: 2.25rem; +$ds-text-heading-700-height-breakpoint-sm: 2.125rem; +$ds-text-heading-700-height-breakpoint-px-sm: 34px; +$ds-text-heading-700-height-breakpoint-md: 2.375rem; +$ds-text-heading-700-height-breakpoint-px-md: 38px; +$ds-text-heading-700-height-breakpoint-lg: 2.75rem; +$ds-text-heading-700-height-breakpoint-px-lg: 44px; +$ds-text-heading-800-weight: 500; +$ds-text-heading-800-px-breakpoint-sm: 32px; +$ds-text-heading-800-px-breakpoint-md: 36px; +$ds-text-heading-800-px-breakpoint-lg: 40px; +$ds-text-heading-800-size-breakpoint-sm: 2rem; +$ds-text-heading-800-size-breakpoint-md: 2.25rem; +$ds-text-heading-800-size-breakpoint-lg: 2.5rem; +$ds-text-heading-800-height-breakpoint-sm: 2.375rem; +$ds-text-heading-800-height-breakpoint-px-sm: 38px; +$ds-text-heading-800-height-breakpoint-md: 2.625rem; +$ds-text-heading-800-height-breakpoint-px-md: 42px; +$ds-text-heading-800-height-breakpoint-lg: 3rem; +$ds-text-heading-800-height-breakpoint-px-lg: 48px; +$ds-text-heading-default-weight: 500; +$ds-text-heading-default-margin: 0; +$ds-text-heading-default-spacing: -0.2px; +$ds-text-heading-medium-weight: 300; +$ds-text-heading-display-weight: 100; +$ds-text-heading-display-px-breakpoint-sm: 44px; +$ds-text-heading-display-px-breakpoint-md: 48px; +$ds-text-heading-display-px-breakpoint-lg: 56px; +$ds-text-heading-display-size-breakpoint-sm: 2.75rem; +$ds-text-heading-display-size-breakpoint-md: 3rem; +$ds-text-heading-display-size-breakpoint-lg: 3.5rem; +$ds-text-heading-display-height-breakpoint-sm: 3.375rem; +$ds-text-heading-display-height-breakpoint-px-sm: 54px; +$ds-text-heading-display-height-breakpoint-md: 3.75rem; +$ds-text-heading-display-height-breakpoint-px-md: 60px; +$ds-text-heading-display-height-breakpoint-lg: 4.25rem; +$ds-text-heading-display-height-breakpoint-px-lg: 68px; +$ds-text-body-default-weight: 500; +$ds-text-body-size-xxs: 0.625rem; +$ds-text-body-size-xs: 0.75rem; +$ds-text-body-size-sm: 0.875rem; +$ds-text-body-size-default: 1rem; +$ds-text-body-size-lg: 1.125rem; +$ds-text-body-height-xs: 1rem; +$ds-text-body-height-sm: 1.25rem; +$ds-text-body-height-default: 1.5rem; +$ds-text-body-height-lg: 1.625rem; +$ds-color-alert-notification-default: #0074c8; +$ds-color-alert-warning-default: #de750c; +$ds-color-alert-error-default: #df0b37; +$ds-color-alert-success-default: #00805d; +$ds-color-alert-advisory-default: #fff0cd; +$ds-color-alert-bkg-success-default: #ddf6e8; +$ds-color-alert-bkg-error-default: #ffedf1; +$ds-color-background-lightest: #ffffff; +$ds-color-background-lighter: #f8f8f8; +$ds-color-background-darker: #01426a; +$ds-color-background-darkest: #00274a; +$ds-color-base-white: #ffffff; // + // Base value for token support; should not use in code! +$ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); // white @ 40% +$ds-color-base-black: #000000; // + // Base value for token support; should not use in code! +$ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); // black @ 15% +$ds-color-state-error-100: #ff999b; +$ds-color-state-error-500: #df0b37; +$ds-color-state-success-100: #69cf96; +$ds-color-state-success-500: #00805d; +$ds-color-state-warning-500: #de750c; +$ds-color-border-primary-default: #626b79; +$ds-color-border-primary-inverse: #9fabbb; +$ds-color-border-active-default: #0074c8; +$ds-color-border-error-default: #df0b37; +$ds-color-border-disabled-default: #dbdbdb; +$ds-color-border-focus-default: #222222; +$ds-color-border-divider-default: rgba(0, 0, 0, 0.15); +$ds-color-border-divider-inverse: #ffffff; +$ds-color-brand-midnight-100: #c1daf0; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-midnight-200: #569ed7; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-midnight-300: #156fad; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-midnight-400: #01426a; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-midnight-500: #00274a; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-atlas-100: #cde6ff; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-atlas-200: #6bb7fb; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-atlas-300: #2492eb; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-atlas-400: #0074c8; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-atlas-500: #054687; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-breeze-100: #c0f7ff; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-breeze-200: #5de3f7; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-breeze-300: #00cff0; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-breeze-400: #099dc5; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-breeze-500: #0b5575; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-tropical-100: #e2ffcd; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-tropical-200: #d0fba6; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-tropical-300: #c0e585; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-tropical-400: #91be62; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-tropical-500: #5e8741; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-alpine-100: #bcaae6; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-alpine-200: #9e73ea; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-alpine-300: #8439ef; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-alpine-400: #631db8; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-alpine-500: #39115c; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-flamingo-100: #ffebee; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-flamingo-200: #ffc0ca; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-flamingo-300: #ff94a7; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-flamingo-400: #f65b7b; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-flamingo-500: #b82b47; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-canyon-100: #ffcab6; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-canyon-200: #f99574; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-canyon-300: #f26135; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-canyon-400: #de3e09; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-canyon-500: #b83302; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-goldcoast-100: #fff0cd; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-goldcoast-200: #ffdb67; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-goldcoast-300: #ffd200; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-goldcoast-400: #e5ad07; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-goldcoast-500: #b88624; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-neutral-100: #f9fbfc; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-neutral-200: #e2eaef; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-neutral-300: #cbd8e2; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-neutral-400: #9fabbb; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-neutral-500: #626b79; // + // Please consider descriptive token prior to using brand token +$ds-color-brand-gray-100: #f8f8f8; +$ds-color-brand-gray-200: #dbdbdb; +$ds-color-brand-gray-300: #b2b2b2; +$ds-color-brand-gray-400: #767676; +$ds-color-brand-gray-500: #222222; +$ds-color-brand-goldgray-100: #c5c1bf; +$ds-color-brand-goldgray-200: #726e6c; +$ds-color-brand-gold-100: #ccbc94; +$ds-color-brand-gold-200: #7f682e; +$ds-color-brand-emerald: #139142; +$ds-color-brand-sapphire: #015daa; +$ds-color-brand-ruby: #a41d4a; +$ds-color-icon-primary-default: #626b79; +$ds-color-icon-primary-inverse: #9fabbb; +$ds-color-icon-emphasis-default: #222222; +$ds-color-icon-emphasis-inverse: #ffffff; +$ds-color-icon-accent-default: #0074c8; +$ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15); +$ds-color-text-primary-default: #222222; +$ds-color-text-primary-inverse: #ffffff; +$ds-color-text-secondary-default: #626b79; +$ds-color-text-secondary-inverse: #9fabbb; +$ds-color-text-link-default: #0074c8; +$ds-color-text-link-on-dark: #00cff0; +$ds-color-text-link-inverse: #00cff0; +$ds-color-text-error-default: #df0b37; +$ds-color-text-error-inverse: #ff999b; +$ds-color-text-disabled-default: #dbdbdb; +$ds-color-text-emphasis-default: #01426a; +$ds-color-text-emphasis-inverse: #c1daf0; +$ds-color-tier-alaska-mvp-default: #726e6c; +$ds-color-tier-alaska-mvp-inverse: #c5c1bf; +$ds-color-tier-alaska-mvpgold-default: #7f682e; +$ds-color-tier-alaska-mvpgold-inverse: #ccbc94; +$ds-color-tier-oneworld-emerald: #139142; +$ds-color-tier-oneworld-sapphire: #015daa; +$ds-color-tier-oneworld-ruby: #a41d4a; +$ds-color-ui-default-default: #0074c8; +$ds-color-ui-default-on-dark: #00cff0; +$ds-color-ui-hover-default: #054687; +$ds-color-ui-active-default: #054687; +$ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2); +$ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06); + +$auro-breakpoint-sm: 660px; // + // New token, see grid-breakpoint-sm +$auro-breakpoint-md: 1024px; // + // New token, see grid-breakpoint-md +$auro-breakpoint-lg: 1232px; // + // New token, see grid-breakpoint-lg