From 0c16340d8e57fca26542b5bac1ea41ebd1f8bf34 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Tue, 30 Jul 2024 09:12:56 -0500 Subject: [PATCH] feat!(rebrand): mercury-rising rebrand effort ci: update rebrand mercury workflow for deployments revert(font-weight): combine font-weights back to *00 based fix: DSS-752 style(letter-spacing): updates to letter spacing for medium and smaller (#1922) fix: DSS-747 Co-authored-by: Julian Skinner style: update body-xs to 12px (#1926) refactor: removes page scope empty state and updates styles style: adds styles for Icon Card for default and compact variants style: adds gradient to icon card and empty state docs: removes unneeded examples and adds new props refactor: removes gradient refactor: renames scope prop to size chore: fixes Story name refactor: adds background color to icon docs: updates Empty States docs pages for Rails and React docs: updates React component description with better clarity chore: fixes linting issues chore: removes unneeded gradient references style(alert): adjust small variant icon alignment (#1930) style(checkbox): adjust checkbox margin for alignment (#1931) style(dropdown): add display flex to dropdown trigger (#1934) * style(dropdown): add display flex to dropdown trigger * style(dropdown): reorder css property style(badge): correct interactive icon size (#1935) style(line-height): update line-height to have rem units (#1933) fix(p): remove adjacent p tag spacing (#1936) fix: add white background color to box-like elements * fix(box-shadow): update box shadow token value * fix(box like components): add white background and md box shadow * fix(container): remove color and shadow from container * fix(css): updated order * fix(frame): update to fix background color with nested frames * fix(frame): add white background to bordered variant chore: adds scope prop to address spec failures chore: fixes syntax error fix: add panel box-shadow (#1944) * fix: add box-shadow to panel * fix: remove box-shadow from inner card and panels fix: updates placeholder assets & styles (#1947) * fix: add new image assets * style: adjust page heading image bg color * fix: add new image assets for storybook * fix: convert unsplash images to placeholders * fix: convert unsplash images to small placeholder * fix: hello linter my old friend * fix: update image in empty state fix: update line-height tokens (#1951) fix: update box shadows (#1952) * fix: update box shadows * fix: add space after comma ci: revert rebrand-mercury-rising back to original workflow this is done since release-deploy has been fixed. We hopes this solves this branch from not deploying properly in staging style(pagination): remove background color (#1956) style(choice): correct icon alignment (#1957) * style(choice): remove incorrect margin styles * docs(choice): add additional example without subtext fix(sortable): update template columns (#1960) fix(frame): add box shadow to bordered frame (#1958) style(tab): adjust tab underline variable value (#1959) chore: update pine-ds/icons to latets version fix: updates conditionals to make image optional (#1965) style: remove border from box like elements with box shadows (#1967) * style: add shadow to frame * style: remove border from box-like elements * chore: remove white space for linter style: change the active tab color to mercury 50 (#1969) Co-authored-by: Julian Skinner style: focus state updates (#1970) * style: update sage-focus-ring mixin * style: update focus-outline colors * fix: removes duplicate focus ring * style: update focus colors and sizing * style: adjust tab focus * fix: replace named color for linter style(alert): add borders (#1972) style(progress): update the default fill color to mercury-50 (#1971) Co-authored-by: Julian Skinner style(button): change border radius to 9999px (#1973) Co-authored-by: Julian Skinner style: update spacer to use logical properties (#1968) style(button): change the colors for the accent variant to be purple (#1974) Co-authored-by: Julian Skinner feature(loader): change loader to new behavior and colors (#1975) * feat(loader-rails): change the loader animation and fill color * feat(loader-react): change the loader animation and fill color * style(loader): change timing to 1.5s per convo with design team --------- Co-authored-by: Julian Skinner style: updates button font family style: add Faire Spring font family (#1980) Co-authored-by: Julian Skinner style(button): change button font-weight to med (500) (#1984) Co-authored-by: Julian Skinner fix(button): loading button wasn't animating, updated svg in button-spinner.js (#1987) Co-authored-by: Julian Skinner --- .../app/sage_tokens/sage_dictionary.rb | 240 +++++++ lerna.json | 2 +- .../lib/stylesheets/components/_alert.scss | 13 + .../stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/dictionary/_tokens.scss | 672 ++++++++++++++++++ .../lib/configs/dictionary/tokens.js | 240 +++++++ 6 files changed, 1167 insertions(+), 2 deletions(-) diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb index 89be719d7e..02d0d9c9b1 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -609,6 +609,66 @@ module SageDictionary }, }, "YELLOW": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE, @@ -671,6 +731,66 @@ module SageDictionary }, }, "RED": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_RED_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_RED_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_RED_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_RED_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_RED_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_RED_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_RED_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_RED_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_RED_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_RED_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_RED_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, @@ -760,6 +880,66 @@ module SageDictionary }, }, "PURPLE": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE, @@ -849,6 +1029,66 @@ module SageDictionary }, }, "GREY": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_GREY_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_GREY_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_GREY_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_GREY_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_GREY_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_GREY_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_GREY_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_GREY_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_GREY_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_GREY_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_GREY_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE, diff --git a/lerna.json b/lerna.json index 61bb73671f..5bdfc79df0 100644 --- a/lerna.json +++ b/lerna.json @@ -11,7 +11,7 @@ "conventionalCommits": true, "message": "chore(release): publish [skip ci]", "registry": "https://npm.pkg.github.com", - "allowBranch": ["main", "develop"] + "allowBranch": ["main", "develop", "mercury-rising"] } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index f22894dc2d..fb9436d490 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -47,6 +47,19 @@ $-alert-border-colors: ( danger: sage-color(red, 300), ); +$-alert-border-colors: ( + default: sage-color(grey, 30), + draft: sage-color(grey, 30), + info: sage-color(blue, 30), + published: sage-color(green, 30), + success: sage-color(green, 30), + warning: sage-color(yellow, 30), + approaching: sage-color(yellow, 30), + reached: sage-color(mercury, 30), + exceeded: sage-color(red, 30), + danger: sage-color(red, 30), +); + .sage-alert { display: grid; grid-template-columns: auto 1fr; diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 2042aa956c..e8c4686b96 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 300); + background: sage-color(grey, 30); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index f7a726fbb0..423cdbfa1d 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -574,6 +574,150 @@ $sd-sage-color-base-sage-500-code: "sage-500"; /// $sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; /// +/// color color-base-yellow-5-hex +/// +$sd-sage-color-base-yellow-5-hex: #fffefa; +/// +/// color color-base-yellow-5-code +/// +$sd-sage-color-base-yellow-5-code: "yellow-5"; +/// +/// color color-base-yellow-5-classname +/// +$sd-sage-color-base-yellow-5-classname: "t-sage--color-yellow-5"; +/// +/// color color-base-yellow-10-hex +/// +$sd-sage-color-base-yellow-10-hex: #fffbeb; +/// +/// color color-base-yellow-10-code +/// +$sd-sage-color-base-yellow-10-code: "yellow-10"; +/// +/// color color-base-yellow-10-classname +/// +$sd-sage-color-base-yellow-10-classname: "t-sage--color-yellow-10"; +/// +/// color color-base-yellow-15-hex +/// +$sd-sage-color-base-yellow-15-hex: #fff3c6; +/// +/// color color-base-yellow-15-code +/// +$sd-sage-color-base-yellow-15-code: "yellow-15"; +/// +/// color color-base-yellow-15-classname +/// +$sd-sage-color-base-yellow-15-classname: "t-sage--color-yellow-15"; +/// +/// color color-base-yellow-20-hex +/// +$sd-sage-color-base-yellow-20-hex: #fee589; +/// +/// color color-base-yellow-20-code +/// +$sd-sage-color-base-yellow-20-code: "yellow-20"; +/// +/// color color-base-yellow-20-classname +/// +$sd-sage-color-base-yellow-20-classname: "t-sage--color-yellow-20"; +/// +/// color color-base-yellow-30-hex +/// +$sd-sage-color-base-yellow-30-hex: #fed04b; +/// +/// color color-base-yellow-30-code +/// +$sd-sage-color-base-yellow-30-code: "yellow-30"; +/// +/// color color-base-yellow-30-classname +/// +$sd-sage-color-base-yellow-30-classname: "t-sage--color-yellow-30"; +/// +/// color color-base-yellow-40-hex +/// +$sd-sage-color-base-yellow-40-hex: #fdbb21; +/// +/// color color-base-yellow-40-code +/// +$sd-sage-color-base-yellow-40-code: "yellow-40"; +/// +/// color color-base-yellow-40-classname +/// +$sd-sage-color-base-yellow-40-classname: "t-sage--color-yellow-40"; +/// +/// color color-base-yellow-50-hex +/// +$sd-sage-color-base-yellow-50-hex: #f79a0b; +/// +/// color color-base-yellow-50-code +/// +$sd-sage-color-base-yellow-50-code: "yellow-50"; +/// +/// color color-base-yellow-50-classname +/// +$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; +/// +/// color color-base-yellow-60-hex +/// +$sd-sage-color-base-yellow-60-hex: #db7303; +/// +/// color color-base-yellow-60-code +/// +$sd-sage-color-base-yellow-60-code: "yellow-60"; +/// +/// color color-base-yellow-60-classname +/// +$sd-sage-color-base-yellow-60-classname: "t-sage--color-yellow-60"; +/// +/// color color-base-yellow-70-hex +/// +$sd-sage-color-base-yellow-70-hex: #b64f06; +/// +/// color color-base-yellow-70-code +/// +$sd-sage-color-base-yellow-70-code: "yellow-70"; +/// +/// color color-base-yellow-70-classname +/// +$sd-sage-color-base-yellow-70-classname: "t-sage--color-yellow-70"; +/// +/// color color-base-yellow-80-hex +/// +$sd-sage-color-base-yellow-80-hex: #943d0e; +/// +/// color color-base-yellow-80-code +/// +$sd-sage-color-base-yellow-80-code: "yellow-80"; +/// +/// color color-base-yellow-80-classname +/// +$sd-sage-color-base-yellow-80-classname: "t-sage--color-yellow-80"; +/// +/// color color-base-yellow-90-hex +/// +$sd-sage-color-base-yellow-90-hex: #79330e; +/// +/// color color-base-yellow-90-code +/// +$sd-sage-color-base-yellow-90-code: "yellow-90"; +/// +/// color color-base-yellow-90-classname +/// +$sd-sage-color-base-yellow-90-classname: "t-sage--color-yellow-90"; +/// +/// color color-base-yellow-95-hex +/// +$sd-sage-color-base-yellow-95-hex: #451902; +/// +/// color color-base-yellow-95-code +/// +$sd-sage-color-base-yellow-95-code: "yellow-95"; +/// +/// color color-base-yellow-95-classname +/// +$sd-sage-color-base-yellow-95-classname: "t-sage--color-yellow-95"; +/// /// color color-base-yellow-100-hex /// $sd-sage-color-base-yellow-100-hex: #fffbeb; @@ -922,6 +1066,150 @@ $sd-sage-color-base-orange-500-code: "orange-500"; /// $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500"; /// +/// color color-base-purple-5-hex +/// +$sd-sage-color-base-purple-5-hex: #fafbff; +/// +/// color color-base-purple-5-code +/// +$sd-sage-color-base-purple-5-code: "purple-5"; +/// +/// color color-base-purple-5-classname +/// +$sd-sage-color-base-purple-5-classname: "t-sage--color-purple-5"; +/// +/// color color-base-purple-10-hex +/// +$sd-sage-color-base-purple-10-hex: #edf1ff; +/// +/// color color-base-purple-10-code +/// +$sd-sage-color-base-purple-10-code: "purple-10"; +/// +/// color color-base-purple-10-classname +/// +$sd-sage-color-base-purple-10-classname: "t-sage--color-purple-10"; +/// +/// color color-base-purple-15-hex +/// +$sd-sage-color-base-purple-15-hex: #e0e4ff; +/// +/// color color-base-purple-15-code +/// +$sd-sage-color-base-purple-15-code: "purple-15"; +/// +/// color color-base-purple-15-classname +/// +$sd-sage-color-base-purple-15-classname: "t-sage--color-purple-15"; +/// +/// color color-base-purple-20-hex +/// +$sd-sage-color-base-purple-20-hex: #c7cdfe; +/// +/// color color-base-purple-20-code +/// +$sd-sage-color-base-purple-20-code: "purple-20"; +/// +/// color color-base-purple-20-classname +/// +$sd-sage-color-base-purple-20-classname: "t-sage--color-purple-20"; +/// +/// color color-base-purple-30-hex +/// +$sd-sage-color-base-purple-30-hex: #a3acfd; +/// +/// color color-base-purple-30-code +/// +$sd-sage-color-base-purple-30-code: "purple-30"; +/// +/// color color-base-purple-30-classname +/// +$sd-sage-color-base-purple-30-classname: "t-sage--color-purple-30"; +/// +/// color color-base-purple-40-hex +/// +$sd-sage-color-base-purple-40-hex: #8081f9; +/// +/// color color-base-purple-40-code +/// +$sd-sage-color-base-purple-40-code: "purple-40"; +/// +/// color color-base-purple-40-classname +/// +$sd-sage-color-base-purple-40-classname: "t-sage--color-purple-40"; +/// +/// color color-base-purple-50-hex +/// +$sd-sage-color-base-purple-50-hex: #6a62f2; +/// +/// color color-base-purple-50-code +/// +$sd-sage-color-base-purple-50-code: "purple-50"; +/// +/// color color-base-purple-50-classname +/// +$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; +/// +/// color color-base-purple-60-hex +/// +$sd-sage-color-base-purple-60-hex: #533be5; +/// +/// color color-base-purple-60-code +/// +$sd-sage-color-base-purple-60-code: "purple-60"; +/// +/// color color-base-purple-60-classname +/// +$sd-sage-color-base-purple-60-classname: "t-sage--color-purple-60"; +/// +/// color color-base-purple-70-hex +/// +$sd-sage-color-base-purple-70-hex: #4f37cb; +/// +/// color color-base-purple-70-code +/// +$sd-sage-color-base-purple-70-code: "purple-70"; +/// +/// color color-base-purple-70-classname +/// +$sd-sage-color-base-purple-70-classname: "t-sage--color-purple-70"; +/// +/// color color-base-purple-80-hex +/// +$sd-sage-color-base-purple-80-hex: #402fa4; +/// +/// color color-base-purple-80-code +/// +$sd-sage-color-base-purple-80-code: "purple-80"; +/// +/// color color-base-purple-80-classname +/// +$sd-sage-color-base-purple-80-classname: "t-sage--color-purple-80"; +/// +/// color color-base-purple-90-hex +/// +$sd-sage-color-base-purple-90-hex: #372d82; +/// +/// color color-base-purple-90-code +/// +$sd-sage-color-base-purple-90-code: "purple-90"; +/// +/// color color-base-purple-90-classname +/// +$sd-sage-color-base-purple-90-classname: "t-sage--color-purple-90"; +/// +/// color color-base-purple-95-hex +/// +$sd-sage-color-base-purple-95-hex: #221b4b; +/// +/// color color-base-purple-95-code +/// +$sd-sage-color-base-purple-95-code: "purple-95"; +/// +/// color color-base-purple-95-classname +/// +$sd-sage-color-base-purple-95-classname: "t-sage--color-purple-95"; +/// /// color color-base-purple-100-hex /// $sd-sage-color-base-purple-100-hex: #edf1ff; @@ -1126,6 +1414,150 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500"; /// $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500"; /// +/// color color-base-grey-5-hex +/// +$sd-sage-color-base-grey-5-hex: #fcfcfc; +/// +/// color color-base-grey-5-code +/// +$sd-sage-color-base-grey-5-code: "grey-5"; +/// +/// color color-base-grey-5-classname +/// +$sd-sage-color-base-grey-5-classname: "t-sage--color-grey-5"; +/// +/// color color-base-grey-10-hex +/// +$sd-sage-color-base-grey-10-hex: #f8f8f8; +/// +/// color color-base-grey-10-code +/// +$sd-sage-color-base-grey-10-code: "grey-10"; +/// +/// color color-base-grey-10-classname +/// +$sd-sage-color-base-grey-10-classname: "t-sage--color-grey-10"; +/// +/// color color-base-grey-15-hex +/// +$sd-sage-color-base-grey-15-hex: #f0f0f0; +/// +/// color color-base-grey-15-code +/// +$sd-sage-color-base-grey-15-code: "grey-15"; +/// +/// color color-base-grey-15-classname +/// +$sd-sage-color-base-grey-15-classname: "t-sage--color-grey-15"; +/// +/// color color-base-grey-20-hex +/// +$sd-sage-color-base-grey-20-hex: #e4e4e4; +/// +/// color color-base-grey-20-code +/// +$sd-sage-color-base-grey-20-code: "grey-20"; +/// +/// color color-base-grey-20-classname +/// +$sd-sage-color-base-grey-20-classname: "t-sage--color-grey-20"; +/// +/// color color-base-grey-30-hex +/// +$sd-sage-color-base-grey-30-hex: #d2d1d1; +/// +/// color color-base-grey-30-code +/// +$sd-sage-color-base-grey-30-code: "grey-30"; +/// +/// color color-base-grey-30-classname +/// +$sd-sage-color-base-grey-30-classname: "t-sage--color-grey-30"; +/// +/// color color-base-grey-40-hex +/// +$sd-sage-color-base-grey-40-hex: #bbbab9; +/// +/// color color-base-grey-40-code +/// +$sd-sage-color-base-grey-40-code: "grey-40"; +/// +/// color color-base-grey-40-classname +/// +$sd-sage-color-base-grey-40-classname: "t-sage--color-grey-40"; +/// +/// color color-base-grey-50-hex +/// +$sd-sage-color-base-grey-50-hex: #9b9a98; +/// +/// color color-base-grey-50-code +/// +$sd-sage-color-base-grey-50-code: "grey-50"; +/// +/// color color-base-grey-50-classname +/// +$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; +/// +/// color color-base-grey-60-hex +/// +$sd-sage-color-base-grey-60-hex: #828180; +/// +/// color color-base-grey-60-code +/// +$sd-sage-color-base-grey-60-code: "grey-60"; +/// +/// color color-base-grey-60-classname +/// +$sd-sage-color-base-grey-60-classname: "t-sage--color-grey-60"; +/// +/// color color-base-grey-70-hex +/// +$sd-sage-color-base-grey-70-hex: #6c6a69; +/// +/// color color-base-grey-70-code +/// +$sd-sage-color-base-grey-70-code: "grey-70"; +/// +/// color color-base-grey-70-classname +/// +$sd-sage-color-base-grey-70-classname: "t-sage--color-grey-70"; +/// +/// color color-base-grey-80-hex +/// +$sd-sage-color-base-grey-80-hex: #4d4d4c; +/// +/// color color-base-grey-80-code +/// +$sd-sage-color-base-grey-80-code: "grey-80"; +/// +/// color color-base-grey-80-classname +/// +$sd-sage-color-base-grey-80-classname: "t-sage--color-grey-80"; +/// +/// color color-base-grey-90-hex +/// +$sd-sage-color-base-grey-90-hex: #343332; +/// +/// color color-base-grey-90-code +/// +$sd-sage-color-base-grey-90-code: "grey-90"; +/// +/// color color-base-grey-90-classname +/// +$sd-sage-color-base-grey-90-classname: "t-sage--color-grey-90"; +/// +/// color color-base-grey-95-hex +/// +$sd-sage-color-base-grey-95-hex: #1a1a19; +/// +/// color color-base-grey-95-code +/// +$sd-sage-color-base-grey-95-code: "grey-95"; +/// +/// color color-base-grey-95-classname +/// +$sd-sage-color-base-grey-95-classname: "t-sage--color-grey-95"; +/// /// color color-base-grey-100-hex /// $sd-sage-color-base-grey-100-hex: #f8f8f8; @@ -1635,6 +2067,66 @@ $sd-sage-color: ( ), ), yellow: ( + 5: ( + hex: $sd-sage-color-base-yellow-5-hex, + code: $sd-sage-color-base-yellow-5-code, + classname: $sd-sage-color-base-yellow-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-yellow-10-hex, + code: $sd-sage-color-base-yellow-10-code, + classname: $sd-sage-color-base-yellow-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-yellow-15-hex, + code: $sd-sage-color-base-yellow-15-code, + classname: $sd-sage-color-base-yellow-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-yellow-20-hex, + code: $sd-sage-color-base-yellow-20-code, + classname: $sd-sage-color-base-yellow-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-yellow-30-hex, + code: $sd-sage-color-base-yellow-30-code, + classname: $sd-sage-color-base-yellow-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-yellow-40-hex, + code: $sd-sage-color-base-yellow-40-code, + classname: $sd-sage-color-base-yellow-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-yellow-50-hex, + code: $sd-sage-color-base-yellow-50-code, + classname: $sd-sage-color-base-yellow-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-yellow-60-hex, + code: $sd-sage-color-base-yellow-60-code, + classname: $sd-sage-color-base-yellow-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-yellow-70-hex, + code: $sd-sage-color-base-yellow-70-code, + classname: $sd-sage-color-base-yellow-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-yellow-80-hex, + code: $sd-sage-color-base-yellow-80-code, + classname: $sd-sage-color-base-yellow-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-yellow-90-hex, + code: $sd-sage-color-base-yellow-90-code, + classname: $sd-sage-color-base-yellow-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-yellow-95-hex, + code: $sd-sage-color-base-yellow-95-code, + classname: $sd-sage-color-base-yellow-95-classname, + ), 100: ( hex: $sd-sage-color-base-yellow-100-hex, code: $sd-sage-color-base-yellow-100-code, @@ -1697,6 +2189,66 @@ $sd-sage-color: ( ), ), red: ( + 5: ( + hex: $sd-sage-color-base-red-5-hex, + code: $sd-sage-color-base-red-5-code, + classname: $sd-sage-color-base-red-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-red-10-hex, + code: $sd-sage-color-base-red-10-code, + classname: $sd-sage-color-base-red-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-red-15-hex, + code: $sd-sage-color-base-red-15-code, + classname: $sd-sage-color-base-red-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-red-20-hex, + code: $sd-sage-color-base-red-20-code, + classname: $sd-sage-color-base-red-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-red-30-hex, + code: $sd-sage-color-base-red-30-code, + classname: $sd-sage-color-base-red-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-red-40-hex, + code: $sd-sage-color-base-red-40-code, + classname: $sd-sage-color-base-red-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-red-50-hex, + code: $sd-sage-color-base-red-50-code, + classname: $sd-sage-color-base-red-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-red-60-hex, + code: $sd-sage-color-base-red-60-code, + classname: $sd-sage-color-base-red-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-red-70-hex, + code: $sd-sage-color-base-red-70-code, + classname: $sd-sage-color-base-red-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-red-80-hex, + code: $sd-sage-color-base-red-80-code, + classname: $sd-sage-color-base-red-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-red-90-hex, + code: $sd-sage-color-base-red-90-code, + classname: $sd-sage-color-base-red-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-red-95-hex, + code: $sd-sage-color-base-red-95-code, + classname: $sd-sage-color-base-red-95-classname, + ), 100: ( hex: $sd-sage-color-base-red-100-hex, code: $sd-sage-color-base-red-100-code, @@ -1786,6 +2338,66 @@ $sd-sage-color: ( ), ), purple: ( + 5: ( + hex: $sd-sage-color-base-purple-5-hex, + code: $sd-sage-color-base-purple-5-code, + classname: $sd-sage-color-base-purple-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-purple-10-hex, + code: $sd-sage-color-base-purple-10-code, + classname: $sd-sage-color-base-purple-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-purple-15-hex, + code: $sd-sage-color-base-purple-15-code, + classname: $sd-sage-color-base-purple-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-purple-20-hex, + code: $sd-sage-color-base-purple-20-code, + classname: $sd-sage-color-base-purple-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-purple-30-hex, + code: $sd-sage-color-base-purple-30-code, + classname: $sd-sage-color-base-purple-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-purple-40-hex, + code: $sd-sage-color-base-purple-40-code, + classname: $sd-sage-color-base-purple-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-purple-50-hex, + code: $sd-sage-color-base-purple-50-code, + classname: $sd-sage-color-base-purple-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-purple-60-hex, + code: $sd-sage-color-base-purple-60-code, + classname: $sd-sage-color-base-purple-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-purple-70-hex, + code: $sd-sage-color-base-purple-70-code, + classname: $sd-sage-color-base-purple-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-purple-80-hex, + code: $sd-sage-color-base-purple-80-code, + classname: $sd-sage-color-base-purple-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-purple-90-hex, + code: $sd-sage-color-base-purple-90-code, + classname: $sd-sage-color-base-purple-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-purple-95-hex, + code: $sd-sage-color-base-purple-95-code, + classname: $sd-sage-color-base-purple-95-classname, + ), 100: ( hex: $sd-sage-color-base-purple-100-hex, code: $sd-sage-color-base-purple-100-code, @@ -1875,6 +2487,66 @@ $sd-sage-color: ( ), ), grey: ( + 5: ( + hex: $sd-sage-color-base-grey-5-hex, + code: $sd-sage-color-base-grey-5-code, + classname: $sd-sage-color-base-grey-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-grey-10-hex, + code: $sd-sage-color-base-grey-10-code, + classname: $sd-sage-color-base-grey-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-grey-15-hex, + code: $sd-sage-color-base-grey-15-code, + classname: $sd-sage-color-base-grey-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-grey-20-hex, + code: $sd-sage-color-base-grey-20-code, + classname: $sd-sage-color-base-grey-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-grey-30-hex, + code: $sd-sage-color-base-grey-30-code, + classname: $sd-sage-color-base-grey-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-grey-40-hex, + code: $sd-sage-color-base-grey-40-code, + classname: $sd-sage-color-base-grey-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-grey-50-hex, + code: $sd-sage-color-base-grey-50-code, + classname: $sd-sage-color-base-grey-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-grey-60-hex, + code: $sd-sage-color-base-grey-60-code, + classname: $sd-sage-color-base-grey-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-grey-70-hex, + code: $sd-sage-color-base-grey-70-code, + classname: $sd-sage-color-base-grey-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-grey-80-hex, + code: $sd-sage-color-base-grey-80-code, + classname: $sd-sage-color-base-grey-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-grey-90-hex, + code: $sd-sage-color-base-grey-90-code, + classname: $sd-sage-color-base-grey-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-grey-95-hex, + code: $sd-sage-color-base-grey-95-code, + classname: $sd-sage-color-base-grey-95-classname, + ), 100: ( hex: $sd-sage-color-base-grey-100-hex, code: $sd-sage-color-base-grey-100-code, diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index af0c112b98..2933dcd0d0 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -607,6 +607,66 @@ export const COLOR = { }, }, YELLOW: { + 5: { + HEX: COLOR_BASE_YELLOW_5_HEX, + CODE: COLOR_BASE_YELLOW_5_CODE, + CLASSNAME: COLOR_BASE_YELLOW_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_YELLOW_10_HEX, + CODE: COLOR_BASE_YELLOW_10_CODE, + CLASSNAME: COLOR_BASE_YELLOW_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_YELLOW_15_HEX, + CODE: COLOR_BASE_YELLOW_15_CODE, + CLASSNAME: COLOR_BASE_YELLOW_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_YELLOW_20_HEX, + CODE: COLOR_BASE_YELLOW_20_CODE, + CLASSNAME: COLOR_BASE_YELLOW_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_YELLOW_30_HEX, + CODE: COLOR_BASE_YELLOW_30_CODE, + CLASSNAME: COLOR_BASE_YELLOW_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_YELLOW_40_HEX, + CODE: COLOR_BASE_YELLOW_40_CODE, + CLASSNAME: COLOR_BASE_YELLOW_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_YELLOW_50_HEX, + CODE: COLOR_BASE_YELLOW_50_CODE, + CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_YELLOW_60_HEX, + CODE: COLOR_BASE_YELLOW_60_CODE, + CLASSNAME: COLOR_BASE_YELLOW_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_YELLOW_70_HEX, + CODE: COLOR_BASE_YELLOW_70_CODE, + CLASSNAME: COLOR_BASE_YELLOW_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_YELLOW_80_HEX, + CODE: COLOR_BASE_YELLOW_80_CODE, + CLASSNAME: COLOR_BASE_YELLOW_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_YELLOW_90_HEX, + CODE: COLOR_BASE_YELLOW_90_CODE, + CLASSNAME: COLOR_BASE_YELLOW_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_YELLOW_95_HEX, + CODE: COLOR_BASE_YELLOW_95_CODE, + CLASSNAME: COLOR_BASE_YELLOW_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_YELLOW_100_HEX, CODE: COLOR_BASE_YELLOW_100_CODE, @@ -669,6 +729,66 @@ export const COLOR = { }, }, RED: { + 5: { + HEX: COLOR_BASE_RED_5_HEX, + CODE: COLOR_BASE_RED_5_CODE, + CLASSNAME: COLOR_BASE_RED_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_RED_10_HEX, + CODE: COLOR_BASE_RED_10_CODE, + CLASSNAME: COLOR_BASE_RED_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_RED_15_HEX, + CODE: COLOR_BASE_RED_15_CODE, + CLASSNAME: COLOR_BASE_RED_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_RED_20_HEX, + CODE: COLOR_BASE_RED_20_CODE, + CLASSNAME: COLOR_BASE_RED_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_RED_30_HEX, + CODE: COLOR_BASE_RED_30_CODE, + CLASSNAME: COLOR_BASE_RED_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_RED_40_HEX, + CODE: COLOR_BASE_RED_40_CODE, + CLASSNAME: COLOR_BASE_RED_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_RED_50_HEX, + CODE: COLOR_BASE_RED_50_CODE, + CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_RED_60_HEX, + CODE: COLOR_BASE_RED_60_CODE, + CLASSNAME: COLOR_BASE_RED_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_RED_70_HEX, + CODE: COLOR_BASE_RED_70_CODE, + CLASSNAME: COLOR_BASE_RED_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_RED_80_HEX, + CODE: COLOR_BASE_RED_80_CODE, + CLASSNAME: COLOR_BASE_RED_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_RED_90_HEX, + CODE: COLOR_BASE_RED_90_CODE, + CLASSNAME: COLOR_BASE_RED_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_RED_95_HEX, + CODE: COLOR_BASE_RED_95_CODE, + CLASSNAME: COLOR_BASE_RED_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_RED_100_HEX, CODE: COLOR_BASE_RED_100_CODE, @@ -758,6 +878,66 @@ export const COLOR = { }, }, PURPLE: { + 5: { + HEX: COLOR_BASE_PURPLE_5_HEX, + CODE: COLOR_BASE_PURPLE_5_CODE, + CLASSNAME: COLOR_BASE_PURPLE_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_PURPLE_10_HEX, + CODE: COLOR_BASE_PURPLE_10_CODE, + CLASSNAME: COLOR_BASE_PURPLE_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_PURPLE_15_HEX, + CODE: COLOR_BASE_PURPLE_15_CODE, + CLASSNAME: COLOR_BASE_PURPLE_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_PURPLE_20_HEX, + CODE: COLOR_BASE_PURPLE_20_CODE, + CLASSNAME: COLOR_BASE_PURPLE_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_PURPLE_30_HEX, + CODE: COLOR_BASE_PURPLE_30_CODE, + CLASSNAME: COLOR_BASE_PURPLE_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_PURPLE_40_HEX, + CODE: COLOR_BASE_PURPLE_40_CODE, + CLASSNAME: COLOR_BASE_PURPLE_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_PURPLE_50_HEX, + CODE: COLOR_BASE_PURPLE_50_CODE, + CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_PURPLE_60_HEX, + CODE: COLOR_BASE_PURPLE_60_CODE, + CLASSNAME: COLOR_BASE_PURPLE_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_PURPLE_70_HEX, + CODE: COLOR_BASE_PURPLE_70_CODE, + CLASSNAME: COLOR_BASE_PURPLE_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_PURPLE_80_HEX, + CODE: COLOR_BASE_PURPLE_80_CODE, + CLASSNAME: COLOR_BASE_PURPLE_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_PURPLE_90_HEX, + CODE: COLOR_BASE_PURPLE_90_CODE, + CLASSNAME: COLOR_BASE_PURPLE_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_PURPLE_95_HEX, + CODE: COLOR_BASE_PURPLE_95_CODE, + CLASSNAME: COLOR_BASE_PURPLE_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_PURPLE_100_HEX, CODE: COLOR_BASE_PURPLE_100_CODE, @@ -847,6 +1027,66 @@ export const COLOR = { }, }, GREY: { + 5: { + HEX: COLOR_BASE_GREY_5_HEX, + CODE: COLOR_BASE_GREY_5_CODE, + CLASSNAME: COLOR_BASE_GREY_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_GREY_10_HEX, + CODE: COLOR_BASE_GREY_10_CODE, + CLASSNAME: COLOR_BASE_GREY_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_GREY_15_HEX, + CODE: COLOR_BASE_GREY_15_CODE, + CLASSNAME: COLOR_BASE_GREY_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_GREY_20_HEX, + CODE: COLOR_BASE_GREY_20_CODE, + CLASSNAME: COLOR_BASE_GREY_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_GREY_30_HEX, + CODE: COLOR_BASE_GREY_30_CODE, + CLASSNAME: COLOR_BASE_GREY_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_GREY_40_HEX, + CODE: COLOR_BASE_GREY_40_CODE, + CLASSNAME: COLOR_BASE_GREY_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_GREY_50_HEX, + CODE: COLOR_BASE_GREY_50_CODE, + CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_GREY_60_HEX, + CODE: COLOR_BASE_GREY_60_CODE, + CLASSNAME: COLOR_BASE_GREY_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_GREY_70_HEX, + CODE: COLOR_BASE_GREY_70_CODE, + CLASSNAME: COLOR_BASE_GREY_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_GREY_80_HEX, + CODE: COLOR_BASE_GREY_80_CODE, + CLASSNAME: COLOR_BASE_GREY_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_GREY_90_HEX, + CODE: COLOR_BASE_GREY_90_CODE, + CLASSNAME: COLOR_BASE_GREY_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_GREY_95_HEX, + CODE: COLOR_BASE_GREY_95_CODE, + CLASSNAME: COLOR_BASE_GREY_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_GREY_100_HEX, CODE: COLOR_BASE_GREY_100_CODE,