From 39b0d45ebd0269843ff5c657e3ab4865f149bbec Mon Sep 17 00:00:00 2001 From: Brian Alfaro Date: Tue, 6 Feb 2024 13:36:25 -0500 Subject: [PATCH] feat: new dark mode colors and tokens (#554) --- .storybook/preview.js | 6 +- ui/carousel/src/play.stories.jsx | 14 +- ui/theme/build/transform.js | 26 +- ui/theme/src/play.stories.tsx | 4 +- ui/theme/src/stitches.config.ts | 2 +- ui/theme/src/tokens.ts | 11 +- ui/theme/src/wpds.tokens.json | 2223 +++++++++++++++++++++--------- 7 files changed, 1628 insertions(+), 658 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 74b46cbd0..5f5b55a41 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -56,7 +56,7 @@ const Panel = styled("div", { function GlobalStyles(props) { globalStyles(); - return {props.children}; + return {props.children}; } function DarkPanel(props) { @@ -73,8 +73,8 @@ export const decorators = [ (Story, Context) => { if (Context.story.includes("Interactions")) { return ( - - ; + + ); } diff --git a/ui/carousel/src/play.stories.jsx b/ui/carousel/src/play.stories.jsx index 027071cea..dec64c7d0 100644 --- a/ui/carousel/src/play.stories.jsx +++ b/ui/carousel/src/play.stories.jsx @@ -700,6 +700,14 @@ const InternalFocusTemplate = () => { export const InternalFocusInteractions = InternalFocusTemplate.bind({}); +function hasClassContaining(el, str) { + return Array.from(el.classList).findIndex((cls) => + cls.toLowerCase().includes(str) + ) !== -1 + ? true + : false; +} + InternalFocusInteractions.play = async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.tab(); @@ -712,14 +720,14 @@ InternalFocusInteractions.play = async ({ canvasElement }) => { const button1 = canvas.getByText("Action 1"); await userEvent.click(button1); await waitFor(() => - expect(button1).toHaveClass("wpds-c-kSOqLF-bywHgD-variant-primary") + expect(hasClassContaining(button1, "variant-primary")).toBe(true) ); const button2 = canvas.getByText("Action 2"); await userEvent.click(button2); await waitFor(() => - expect(button2).toHaveClass("wpds-c-kSOqLF-bywHgD-variant-primary") + expect(hasClassContaining(button2, "variant-primary")).toBe(true) ); await userEvent.click(canvas.getAllByRole("main")[0]); const item2 = canvas.getByLabelText("3 of 10"); - expect(item2).not.toHaveClass("wpds-c-lnwwct-jEMdsi-focused-true"); + expect(hasClassContaining(item2, "focused-true")).not.toBe(true); }; diff --git a/ui/theme/build/transform.js b/ui/theme/build/transform.js index cf1aac92d..c74a09325 100644 --- a/ui/theme/build/transform.js +++ b/ui/theme/build/transform.js @@ -8,6 +8,7 @@ const dark = {}; const light = {}; const staticColors = {}; const theme = {}; +const themeDark = {}; const sizes = {}; const spaces = {}; const radii = {}; @@ -80,7 +81,7 @@ function handleColor() { loopAndAdd(Tokens.color[colorGroup], staticColors, "-static"); break; case "theme": - loopAndAdd(Tokens.color[colorGroup], theme); + loopAndAddTheme(Tokens.color[colorGroup]); break; default: break; @@ -109,6 +110,28 @@ function loopAndAdd(tokens, ToObject, hyphen) { } } + +/** Sets up theme tokens */ +function loopAndAddTheme(tokens) { + for (var token in tokens) { + //Must contain both a dark and light value. In a future update we should avoid this + if (tokens[token].hasOwnProperty("value") && tokens[token].hasOwnProperty("valueDark")) { + let value = tokens[token].value; + let darkValue = tokens[token].valueDark; + //Checks to see if it is a reference to another token + if (value[0] == "{") { + value = value.substring(1, value.length - 1); + darkValue = darkValue.substring(1, darkValue.length - 1); + theme[`${token}`] = `$${value}`; + themeDark[`${token}`] = `$${darkValue}`; + + } else { + //Should have a reference token and not a tier 1 token + return; + } + } + } +} /** Looks up the value of a token alias path depth supported up to 3 token[1][2][3]*/ function lookupValue(lookUpToken) { const path = lookUpToken.split("."); @@ -142,6 +165,7 @@ function createTransformTokens() { export const dark=${JSON.stringify(dark)} export const staticColors=${JSON.stringify(staticColors)} export const defaultTheme=${JSON.stringify(theme)} + export const darkTheme=${JSON.stringify(themeDark)} export const sizes=${JSON.stringify(sizes)} export const spaces=${JSON.stringify(spaces)} export const radii=${JSON.stringify(radii)} diff --git a/ui/theme/src/play.stories.tsx b/ui/theme/src/play.stories.tsx index f82850fa5..4316216e6 100644 --- a/ui/theme/src/play.stories.tsx +++ b/ui/theme/src/play.stories.tsx @@ -242,8 +242,8 @@ function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } -const activeStyle = `background-color: ${theme.colors.green100.value}`; -const inactiveStyle = `background-color: ${theme.colors.gray300.value}`; +const activeStyle = `background-color: ${theme.colors.green80.value}`; +const inactiveStyle = `background-color: ${theme.colors.alpha400.value}`; const allModes = { sm: { diff --git a/ui/theme/src/stitches.config.ts b/ui/theme/src/stitches.config.ts index d904bba52..3391da700 100644 --- a/ui/theme/src/stitches.config.ts +++ b/ui/theme/src/stitches.config.ts @@ -117,7 +117,7 @@ export const darkTheme = createTheme(`${prefix}-dark`, { colors: { ...tokens.dark, ...tokens.staticColors, - ...tokens.defaultTheme, + ...tokens.darkTheme, }, }); diff --git a/ui/theme/src/tokens.ts b/ui/theme/src/tokens.ts index 7356cf57d..333ef857c 100644 --- a/ui/theme/src/tokens.ts +++ b/ui/theme/src/tokens.ts @@ -1,9 +1,10 @@ export const base="16px" - export const light={"alpha25":"rgba(0,0,0,.05)","alpha50":"rgba(102,102,102,.5)","gray0":"rgba(0,0,0,1)","gray20":"rgba(17,17,17,1)","gray40":"rgba(42,42,42,1)","gray60":"rgba(73,73,73,1)","gray80":"rgba(102,102,102,1)","gray100":"rgba(115,115,115,1)","gray200":"rgba(170,170,170,1)","gray300":"rgba(212,212,212,1)","gray400":"rgba(233,233,233,1)","gray500":"rgba(240,240,240,1)","gray600":"rgba(247,247,247,1)","gray700":"rgba(255,255,255,1)","blue40":"rgba(10,50,88,1)","blue60":"rgba(15,75,132,1)","blue80":"rgba(19,102,179,1)","blue100":"rgba(22,109,252,1)","blue200":"rgba(87,132,197,1)","blue300":"rgba(132,164,214,1)","blue400":"rgba(172,197,231,1)","blue500":"rgba(211,231,250,1)","blue600":"rgba(231,240,254,1)","red40":"rgba(99,16,14,1)","red60":"rgba(142,31,27,1)","red80":"rgba(190,44,37,1)","red100":"rgba(234,0,23,1)","red200":"rgba(211,95,79,1)","red300":"rgba(229,138,124,1)","red400":"rgba(242,180,171,1)","red500":"rgba(249,221,219,1)","red600":"rgba(253,231,231,1)","pink40":"rgba(105,11,44,1)","pink60":"rgba(149,25,64,1)","pink80":"rgba(195,39,85,1)","pink100":"rgba(255,79,131,1)","pink200":"rgba(213,94,119,1)","pink300":"rgba(228,138,155,1)","pink400":"rgba(239,180,191,1)","pink500":"rgba(249,222,231,1)","pink600":"rgba(254,234,240,1)","purple40":"rgba(93,18,84,1)","purple60":"rgba(136,27,121,1)","purple80":"rgba(182,35,161,1)","purple100":"rgba(209,56,191,1)","purple200":"rgba(201,92,182,1)","purple300":"rgba(217,137,201,1)","purple400":"rgba(234,179,223,1)","purple500":"rgba(248,221,244,1)","purple600":"rgba(250,238,249,1)","teal40":"rgba(11,57,64,1)","teal60":"rgba(15,84,95,1)","teal80":"rgba(15,113,128,1)","teal100":"rgba(3,175,202,1)","teal200":"rgba(74,142,155,1)","teal300":"rgba(118,172,182,1)","teal400":"rgba(159,203,211,1)","teal500":"rgba(199,234,239,1)","teal600":"rgba(234,251,254,1)","orange40":"rgba(118,53,1,1)","orange60":"rgba(166,74,0,1)","orange80":"rgba(216,97,0,1)","orange100":"rgba(243,117,14,1)","orange200":"rgba(230,130,61,1)","orange300":"rgba(241,162,106,1)","orange400":"rgba(249,194,150,1)","orange500":"rgba(251,225,195,1)","orange600":"rgba(255,239,224,1)","green40":"rgba(40,81,21,1)","green60":"rgba(56,113,30,1)","green80":"rgba(73,147,39,1)","green100":"rgba(54,167,92,1)","green200":"rgba(110,169,81,1)","green300":"rgba(145,192,120,1)","green400":"rgba(178,214,160,1)","green500":"rgba(213,237,202,1)","green600":"rgba(238,249,234,1)","gold40":"rgba(109,69,8,1)","gold60":"rgba(158,97,5,1)","gold80":"rgba(194,136,47,1)","gold100":"rgba(229,160,55,1)","gold200":"rgba(211,158,76,1)","gold300":"rgba(222,181,126,1)","gold400":"rgba(233,203,164,1)","gold500":"rgba(243,228,205,1)","gold600":"rgba(250,240,226,1)","yellow100":"rgba(255,236,68,1)","yellow600":"rgba(253,249,216,1)","mustard40":"rgba(100,72,1,1)","mustard60":"rgba(145,104,1,1)","mustard80":"rgba(193,139,0,1)","mustard100":"rgba(226,163,31,1)","mustard200":"rgba(217,158,32,1)","mustard300":"rgba(235,179,71,1)","mustard400":"rgba(247,202,111,1)","mustard500":"rgba(254,227,156,1)","mustard600":"rgba(251,241,221,1)"} - export const dark={"alpha25":"rgba(42,42,42,.5)","alpha50":"rgba(255,255,255,.25)","gray0":"rgba(255,255,255,1)","gray20":"rgba(242,242,242,1)","gray40":"rgba(214,214,214,1)","gray60":"rgba(169,169,169,1)","gray80":"rgba(133,133,133,1)","gray100":"rgba(119,119,119,1)","gray200":"rgba(73,73,73,1)","gray300":"rgba(43,43,43,1)","gray400":"rgba(26,26,26,1)","gray500":"rgba(20,20,20,1)","gray600":"rgba(12,12,12,1)","gray700":"rgba(2,2,2,1)","blue40":"rgba(196,205,214,1)","blue60":"rgba(144,172,198,1)","blue80":"rgba(77,140,198,1)","blue100":"rgba(22,108,249,1)","blue200":"rgba(70,106,158,1)","blue300":"rgba(64,79,104,1)","blue400":"rgba(49,56,66,1)","blue500":"rgba(28,31,34,1)","blue600":"rgba(20,20,22,1)","red40":"rgba(219,199,199,1)","red60":"rgba(205,157,155,1)","red80":"rgba(209,104,99,1)","red100":"rgba(235,18,40,1)","red200":"rgba(170,76,63,1)","red300":"rgba(111,67,60,1)","red400":"rgba(69,51,49,1)","red500":"rgba(33,30,29,1)","red600":"rgba(24,22,22,1)","pink40":"rgba(217,193,202,1)","pink60":"rgba(206,148,167,1)","pink80":"rgba(210,93,128,1)","pink100":"rgba(163,50,84,1)","pink200":"rgba(164,73,92,1)","pink300":"rgba(108,65,74,1)","pink400":"rgba(67,50,53,1)","pink500":"rgba(33,30,31,1)","pink600":"rgba(21,20,20,1)","purple40":"rgba(213,194,211,1)","purple60":"rgba(199,148,192,1)","purple80":"rgba(200,90,185,1)","purple100":"rgba(188,50,172,1)","purple200":"rgba(156,71,141,1)","purple300":"rgba(104,65,96,1)","purple400":"rgba(66,50,63,1)","purple500":"rgba(33,29,32,1)","purple600":"rgba(19,18,19,1)","teal40":"rgba(190,202,204,1)","teal60":"rgba(137,171,177,1)","teal80":"rgba(67,143,155,1)","teal100":"rgba(2,89,103,1)","teal200":"rgba(58,111,122,1)","teal300":"rgba(56,82,87,1)","teal400":"rgba(45,57,59,1)","teal500":"rgba(27,32,32,1)","teal600":"rgba(11,12,12,1)","orange40":"rgba(195,166,143,1)","orange60":"rgba(188,118,63,1)","orange80":"rgba(170,76,0,1)","orange100":"rgba(137,66,8,1)","orange200":"rgba(124,70,33,1)","orange300":"rgba(89,59,39,1)","orange400":"rgba(59,46,35,1)","orange500":"rgba(32,29,25,1)","orange600":"rgba(19,18,17,1)","green40":"rgba(159,177,151,1)","green60":"rgba(104,147,85,1)","green80":"rgba(59,119,31,1)","green100":"rgba(33,103,57,1)","green200":"rgba(61,93,45,1)","green300":"rgba(54,71,45,1)","green400":"rgba(43,52,39,1)","green500":"rgba(27,30,25,1)","green600":"rgba(12,12,12,1)","gold40":"rgba(181,161,130,1)","gold60":"rgba(168,113,31,1)","gold80":"rgba(119,84,29,1)","gold100":"rgba(93,65,22,1)","gold200":"rgba(95,71,34,1)","gold300":"rgba(72,58,41,1)","gold400":"rgba(51,45,36,1)","gold500":"rgba(32,30,27,1)","gold600":"rgba(21,20,19,1)","yellow100":"rgba(29,27,8,1)","yellow600":"rgba(8,8,7,1)","mustard40":"rgba(178,164,128,1)","mustard60":"rgba(156,118,24,1)","mustard80":"rgba(117,84,0,1)","mustard100":"rgba(91,65,12,1)","mustard200":"rgba(96,70,14,1)","mustard300":"rgba(75,57,23,1)","mustard400":"rgba(54,44,24,1)","mustard500":"rgba(34,30,21,1)","mustard600":"rgba(19,18,17,1)"} - export const staticColors={"alpha25-static":"rgba(0,0,0,.05)","alpha50-static":"rgba(102,102,102,.5)","gray0-static":"rgba(0,0,0,1)","gray20-static":"rgba(17,17,17,1)","gray40-static":"rgba(42,42,42,1)","gray60-static":"rgba(73,73,73,1)","gray80-static":"rgba(102,102,102,1)","gray100-static":"rgba(115,115,115,1)","gray200-static":"rgba(170,170,170,1)","gray300-static":"rgba(212,212,212,1)","gray400-static":"rgba(233,233,233,1)","gray500-static":"rgba(240,240,240,1)","gray600-static":"rgba(247,247,247,1)","gray700-static":"rgba(255,255,255,1)","blue40-static":"rgba(10,50,88,1)","blue60-static":"rgba(15,75,132,1)","blue80-static":"rgba(19,102,179,1)","blue100-static":"rgba(22,109,252,1)","blue200-static":"rgba(87,132,197,1)","blue300-static":"rgba(132,164,214,1)","blue400-static":"rgba(172,197,231,1)","blue500-static":"rgba(211,231,250,1)","blue600-static":"rgba(231,240,254,1)","red40-static":"rgba(99,16,14,1)","red60-static":"rgba(142,31,27,1)","red80-static":"rgba(190,44,37,1)","red100-static":"rgba(234,0,23,1)","red200-static":"rgba(211,95,79,1)","red300-static":"rgba(229,138,124,1)","red400-static":"rgba(242,180,171,1)","red500-static":"rgba(249,221,219,1)","red600-static":"rgba(253,231,231,1)","pink40-static":"rgba(105,11,44,1)","pink60-static":"rgba(149,25,64,1)","pink80-static":"rgba(195,39,85,1)","pink100-static":"rgba(255,79,131,1)","pink200-static":"rgba(213,94,119,1)","pink300-static":"rgba(228,138,155,1)","pink400-static":"rgba(239,180,191,1)","pink500-static":"rgba(249,222,231,1)","pink600-static":"rgba(254,234,240,1)","purple40-static":"rgba(93,18,84,1)","purple60-static":"rgba(136,27,121,1)","purple80-static":"rgba(182,35,161,1)","purple100-static":"rgba(209,56,191,1)","purple200-static":"rgba(201,92,182,1)","purple300-static":"rgba(217,137,201,1)","purple400-static":"rgba(234,179,223,1)","purple500-static":"rgba(248,221,244,1)","purple600-static":"rgba(250,238,249,1)","teal40-static":"rgba(11,57,64,1)","teal60-static":"rgba(15,84,95,1)","teal80-static":"rgba(15,113,128,1)","teal100-static":"rgba(3,175,202,1)","teal200-static":"rgba(74,142,155,1)","teal300-static":"rgba(118,172,182,1)","teal400-static":"rgba(159,203,211,1)","teal500-static":"rgba(199,234,239,1)","teal600-static":"rgba(234,251,254,1)","orange40-static":"rgba(118,53,1,1)","orange60-static":"rgba(166,74,0,1)","orange80-static":"rgba(216,97,0,1)","orange100-static":"rgba(243,117,14,1)","orange200-static":"rgba(230,130,61,1)","orange300-static":"rgba(241,162,106,1)","orange400-static":"rgba(249,194,150,1)","orange500-static":"rgba(251,225,195,1)","orange600-static":"rgba(255,239,224,1)","green40-static":"rgba(40,81,21,1)","green60-static":"rgba(56,113,30,1)","green80-static":"rgba(73,147,39,1)","green100-static":"rgba(54,167,92,1)","green200-static":"rgba(110,169,81,1)","green300-static":"rgba(145,192,120,1)","green400-static":"rgba(178,214,160,1)","green500-static":"rgba(213,237,202,1)","green600-static":"rgba(238,249,234,1)","gold40-static":"rgba(109,69,8,1)","gold60-static":"rgba(158,97,5,1)","gold80-static":"rgba(194,136,47,1)","gold100-static":"rgba(229,160,55,1)","gold200-static":"rgba(211,158,76,1)","gold300-static":"rgba(222,181,126,1)","gold400-static":"rgba(233,203,164,1)","gold500-static":"rgba(243,228,205,1)","gold600-static":"rgba(250,240,226,1)","yellow100-static":"rgba(255,236,68,1)","yellow600-static":"rgba(253,249,216,1)","mustard40-static":"rgba(100,72,1,1)","mustard60-static":"rgba(145,104,1,1)","mustard80-static":"rgba(193,139,0,1)","mustard100-static":"rgba(226,163,31,1)","mustard200-static":"rgba(217,158,32,1)","mustard300-static":"rgba(235,179,71,1)","mustard400-static":"rgba(247,202,111,1)","mustard500-static":"rgba(254,227,156,1)","mustard600-static":"rgba(251,241,221,1)"} - export const defaultTheme={"primary":"$gray20","secondary":"$gray700","cta":"$blue100","disabled":"$alpha25","accessible":"$gray80","subtle":"$gray300","faint":"$gray400","error":"$red100","success":"$green100","warning":"$orange100","signal":"$blue200","onPrimary":"$gray700","onSecondary":"$gray20","onCta":"$gray700-static","onDisabled":"$alpha50","onMessage":"$gray700-static"} + export const light={"alpha0":"rgba(0, 0, 0, .65)","alpha20":"rgba(0, 0, 0, .45)","alpha40":"rgba(0, 0, 0, .40)","alpha60":"rgba(0, 0, 0, .35)","alpha80":"rgba(0, 0, 0, .30)","alpha100":"rgba(0, 0, 0, .25)","alpha200":"rgba(0, 0, 0, .20)","alpha300":"rgba(0, 0, 0, .15)","alpha400":"rgba(0, 0, 0, .10)","alpha500":"rgba(0, 0, 0, .05)","alpha50":"rgba(0, 0, 0, .50)","alpha25":"rgba(0, 0, 0, .05)","mustard600":"rgba(251, 241, 221, 1)","mustard500":"rgba(254, 227, 156, 1)","mustard400":"rgba(247, 202, 111, 1)","mustard300":"rgba(235, 179, 71, 1)","mustard200":"rgba(217, 158, 32, 1)","mustard100":"rgba(226, 163, 31, 1)","mustard80":"rgba(193, 139, 0, 1)","mustard60":"rgba(145, 104, 2, 1)","mustard40":"rgba(100, 72, 1, 1)","yellow600":"rgba(253, 250, 219, 1)","yellow100":"rgba(255, 236, 68, 1)","gold600":"rgba(250, 240, 227, 1)","gold500":"rgba(243, 228, 205, 1)","gold400":"rgba(232, 203, 164, 1)","gold300":"rgba(222, 181, 126, 1)","gold200":"rgba(211, 158, 76, 1)","gold100":"rgba(229, 160, 56, 1)","gold80":"rgba(194, 136, 47, 1)","gold60":"rgba(158, 97, 5, 1)","gold40":"rgba(109, 69, 8, 1)","green600":"rgba(238, 249, 234, 1)","green500":"rgba(213, 237, 202, 1)","green400":"rgba(178, 214, 160, 1)","green300":"rgba(145, 192, 120, 1)","green200":"rgba(110, 169, 81, 1)","green100":"rgba(54, 167, 92, 1)","green80":"rgba(73, 147, 39, 1)","green60":"rgba(56, 113, 30, 1)","green40":"rgba(40, 81, 21, 1)","orange600":"rgba(255, 239, 224, 1)","orange500":"rgba(251, 225, 195, 1)","orange400":"rgba(249, 194, 150, 1)","orange300":"rgba(241, 162, 106, 1)","orange200":"rgba(230, 130, 61, 1)","orange100":"rgba(243, 117, 14, 1)","orange80":"rgba(216, 97, 0, 1)","orange60":"rgba(166, 74, 0, 1)","orange40":"rgba(118, 53, 2, 1)","teal600":"rgba(234, 251, 254, 1)","teal500":"rgba(199, 234, 239, 1)","teal400":"rgba(159, 203, 211, 1)","teal300":"rgba(118, 172, 182, 1)","teal200":"rgba(74, 142, 155, 1)","teal100":"rgba(3, 175, 202, 1)","teal80":"rgba(15, 113, 128, 1)","teal60":"rgba(15, 84, 95, 1)","teal40":"rgba(11, 57, 64, 1)","purple600":"rgba(250, 238, 249, 1)","purple500":"rgba(248, 221, 244, 1)","purple400":"rgba(234, 179, 223, 1)","purple300":"rgba(217, 137, 201, 1)","purple200":"rgba(201, 92, 182, 1)","purple100":"rgba(209, 56, 191, 1)","purple80":"rgba(182, 35, 161, 1)","purple60":"rgba(136, 27, 121, 1)","purple40":"rgba(93, 18, 84, 1)","pink600":"rgba(252, 233, 239, 1)","pink500":"rgba(249, 222, 231, 1)","pink400":"rgba(239, 180, 191, 1)","pink300":"rgba(228, 138, 155, 1)","pink200":"rgba(213, 94, 119, 1)","pink100":"rgba(255, 79, 131, 1)","pink80":"rgba(195, 39, 85, 1)","pink60":"rgba(149, 25, 64, 1)","pink40":"rgba(105, 11, 44, 1)","red600":"rgba(253, 231, 231, 1)","red500":"rgba(249, 221, 219, 1)","red400":"rgba(242, 180, 171, 1)","red300":"rgba(229, 138, 124, 1)","red200":"rgba(211, 95, 79, 1)","red100":"rgba(234, 0, 23, 1)","red80":"rgba(190, 44, 37, 1)","red60":"rgba(142, 31, 27, 1)","red40":"rgba(99, 16, 14, 1)","blue600":"rgba(231, 240, 254, 1)","blue500":"rgba(211, 231, 250, 1)","blue400":"rgba(172, 197, 231, 1)","blue300":"rgba(132, 164, 214, 1)","blue200":"rgba(87, 132, 197, 1)","blue100":"rgba(22, 109, 252, 1)","blue80":"rgba(19, 102, 179, 1)","blue60":"rgba(15, 75, 132, 1)","blue40":"rgba(10, 50, 88, 1)","gray700":"rgba(255, 255, 255, 1)","gray600":"rgba(247, 247, 247, 1)","gray500":"rgba(240, 240, 240, 1)","gray400":"rgba(233, 233, 233, 1)","gray300":"rgba(212, 212, 212, 1)","gray200":"rgba(170, 170, 170, 1)","gray100":"rgba(115, 115, 115, 1)","gray80":"rgba(89, 89, 89, 1)","gray60":"rgba(73, 73, 73, 1)","gray40":"rgba(42, 42, 42, 1)","gray20":"rgba(17, 17, 17, 1)","gray0":"rgba(0, 0, 0, 1)"} + export const dark={"alpha0":"rgba(255, 255, 255, .65)","alpha20":"rgba(255, 255, 255, .45)","alpha40":"rgba(255, 255, 255, .40)","alpha60":"rgba(255, 255, 255, .35)","alpha80":"rgba(255, 255, 255, .30)","alpha100":"rgba(255, 255, 255, .25)","alpha200":"rgba(255, 255, 255, .20)","alpha300":"rgba(255, 255, 255, .15)","alpha400":"rgba(255, 255, 255, .10)","alpha500":"rgba(255, 255, 255, .05)","alpha50":"rgba(255, 255, 255, .20)","alpha25":"rgba(255, 255, 255, .05)","mustard600":"rgba(33, 32, 30, 1)","mustard500":"rgba(44, 39, 27, 1)","mustard400":"rgba(64, 52, 29, 1)","mustard300":"rgba(83, 64, 25, 1)","mustard200":"rgba(104, 75, 15, 1)","mustard100":"rgba(102, 76, 6, 1)","mustard80":"rgba(124, 90, 0, 1)","mustard60":"rgba(161, 125, 37, 1)","mustard40":"rgba(184, 171, 139, 1)","yellow600":"rgba(27, 26, 23, 1)","yellow100":"rgba(40, 37, 11, 1)","gold600":"rgba(31, 30, 28, 1)","gold500":"rgba(42, 39, 35, 1)","gold400":"rgba(60, 53, 43, 1)","gold300":"rgba(79, 65, 45, 1)","gold200":"rgba(102, 77, 37, 1)","gold100":"rgba(105, 70, 19, 1)","gold80":"rgba(128, 89, 31, 1)","gold60":"rgba(172, 121, 42, 1)","gold40":"rgba(187, 168, 140, 1)","green600":"rgba(30, 33, 30, 1)","green500":"rgba(36, 40, 34, 1)","green400":"rgba(49, 59, 44, 1)","green300":"rgba(59, 78, 48, 1)","green200":"rgba(65, 101, 48, 1)","green100":"rgba(34, 112, 60, 1)","green80":"rgba(62, 125, 33, 1)","green60":"rgba(113, 153, 94, 1)","green40":"rgba(168, 184, 160, 1)","orange600":"rgba(36, 31, 27, 1)","orange500":"rgba(43, 39, 34, 1)","orange400":"rgba(68, 53, 41, 1)","orange300":"rgba(97, 65, 43, 1)","orange200":"rgba(133, 75, 35, 1)","orange100":"rgba(150, 76, 15, 1)","orange80":"rgba(179, 81, 0, 1)","orange60":"rgba(192, 127, 74, 1)","orange40":"rgba(200, 174, 154, 1)","teal600":"rgba(29, 33, 33, 1)","teal500":"rgba(36, 42, 43, 1)","teal400":"rgba(50, 64, 67, 1)","teal300":"rgba(61, 89, 94, 1)","teal200":"rgba(61, 118, 129, 1)","teal100":"rgba(2, 106, 122, 1)","teal80":"rgba(78, 150, 162, 1)","teal60":"rgba(148, 178, 183, 1)","teal40":"rgba(200, 210, 212, 1)","purple600":"rgba(33, 29, 33, 1)","purple500":"rgba(43, 38, 42, 1)","purple400":"rgba(74, 56, 70, 1)","purple300":"rgba(112, 71, 103, 1)","purple200":"rgba(165, 75, 149, 1)","purple100":"rgba(198, 53, 181, 1)","purple80":"rgba(204, 100, 189, 1)","purple60":"rgba(204, 157, 198, 1)","purple40":"rgba(220, 204, 218, 1)","pink600":"rgba(36, 32, 33, 1)","pink500":"rgba(44, 39, 41, 1)","pink400":"rgba(76, 57, 61, 1)","pink300":"rgba(117, 71, 79, 1)","pink200":"rgba(175, 77, 98, 1)","pink100":"rgba(173, 54, 89, 1)","pink80":"rgba(213, 103, 136, 1)","pink60":"rgba(210, 157, 174, 1)","pink40":"rgba(223, 203, 210, 1)","red600":"rgba(38, 31, 31, 1)","red500":"rgba(45, 39, 39, 1)","red400":"rgba(77, 58, 55, 1)","red300":"rgba(120, 72, 65, 1)","red200":"rgba(184, 83, 69, 1)","red100":"rgba(240, 46, 65, 1)","red80":"rgba(212, 114, 109, 1)","red60":"rgba(210, 165, 164, 1)","red40":"rgba(225, 208, 208, 1)","blue600":"rgba(31, 34, 38, 1)","blue500":"rgba(37, 41, 44, 1)","blue400":"rgba(55, 63, 73, 1)","blue300":"rgba(69, 86, 112, 1)","blue200":"rgba(74, 112, 168, 1)","blue100":"rgba(22, 109, 252, 1)","blue80":"rgba(88, 146, 201, 1)","blue60":"rgba(154, 179, 203, 1)","blue40":"rgba(205, 213, 221, 1)","gray700":"rgba(20, 20, 20, 1)","gray600":"rgba(26, 26, 26, 1)","gray500":"rgba(32, 32, 32, 1)","gray400":"rgba(37, 37, 37, 1)","gray300":"rgba(51, 51, 51, 1)","gray200":"rgba(79, 79, 79, 1)","gray100":"rgba(127, 127, 127, 1)","gray80":"rgba(161, 161, 161, 1)","gray60":"rgba(177, 177, 177, 1)","gray40":"rgba(222, 222, 222, 1)","gray20":"rgba(242, 242, 242, 1)","gray0":"rgba(255, 255, 255, 1)"} + export const staticColors={"alpha0-static":"rgba(0, 0, 0, .65)","alpha20-static":"rgba(0, 0, 0, .45)","alpha40-static":"rgba(0, 0, 0, .40)","alpha60-static":"rgba(0, 0, 0, .35)","alpha80-static":"rgba(0, 0, 0, .30)","alpha100-static":"rgba(0, 0, 0, .25)","alpha200-static":"rgba(0, 0, 0, .20)","alpha300-static":"rgba(0, 0, 0, .15)","alpha400-static":"rgba(0, 0, 0, .10)","alpha500-static":"rgba(0, 0, 0, .05)","alpha50-static":"rgba(0, 0, 0, .50)","alpha25-static":"rgba(0, 0, 0, .05)","mustard600-static":"rgba(251, 241, 221, 1)","mustard500-static":"rgba(254, 227, 156, 1)","mustard400-static":"rgba(247, 202, 111, 1)","mustard300-static":"rgba(235, 179, 71, 1)","mustard200-static":"rgba(217, 158, 32, 1)","mustard100-static":"rgba(226, 163, 31, 1)","mustard80-static":"rgba(193, 139, 0, 1)","mustard60-static":"rgba(145, 104, 2, 1)","mustard40-static":"rgba(100, 72, 1, 1)","yellow600-static":"rgba(253, 250, 219, 1)","yellow100-static":"rgba(255, 236, 68, 1)","gold600-static":"rgba(250, 240, 227, 1)","gold500-static":"rgba(243, 228, 205, 1)","gold400-static":"rgba(232, 203, 164, 1)","gold300-static":"rgba(222, 181, 126, 1)","gold200-static":"rgba(211, 158, 76, 1)","gold100-static":"rgba(229, 160, 56, 1)","gold80-static":"rgba(194, 136, 47, 1)","gold60-static":"rgba(158, 97, 5, 1)","gold40-static":"rgba(109, 69, 8, 1)","green600-static":"rgba(238, 249, 234, 1)","green500-static":"rgba(213, 237, 202, 1)","green400-static":"rgba(178, 214, 160, 1)","green300-static":"rgba(145, 192, 120, 1)","green200-static":"rgba(110, 169, 81, 1)","green100-static":"rgba(54, 167, 92, 1)","green80-static":"rgba(73, 147, 39, 1)","green60-static":"rgba(56, 113, 30, 1)","green40-static":"rgba(40, 81, 21, 1)","orange600-static":"rgba(255, 239, 224, 1)","orange500-static":"rgba(251, 225, 195, 1)","orange400-static":"rgba(249, 194, 150, 1)","orange300-static":"rgba(241, 162, 106, 1)","orange200-static":"rgba(230, 130, 61, 1)","orange100-static":"rgba(243, 117, 14, 1)","orange80-static":"rgba(216, 97, 0, 1)","orange60-static":"rgba(166, 74, 0, 1)","orange40-static":"rgba(118, 53, 2, 1)","teal600-static":"rgba(234, 251, 254, 1)","teal500-static":"rgba(199, 234, 239, 1)","teal400-static":"rgba(159, 203, 211, 1)","teal300-static":"rgba(118, 172, 182, 1)","teal200-static":"rgba(74, 142, 155, 1)","teal100-static":"rgba(3, 175, 202, 1)","teal80-static":"rgba(15, 113, 128, 1)","teal60-static":"rgba(15, 84, 95, 1)","teal40-static":"rgba(11, 57, 64, 1)","purple600-static":"rgba(250, 238, 249, 1)","purple500-static":"rgba(248, 221, 244, 1)","purple400-static":"rgba(234, 179, 223, 1)","purple300-static":"rgba(217, 137, 201, 1)","purple200-static":"rgba(201, 92, 182, 1)","purple100-static":"rgba(209, 56, 191, 1)","purple80-static":"rgba(182, 35, 161, 1)","purple60-static":"rgba(136, 27, 121, 1)","purple40-static":"rgba(93, 18, 84, 1)","pink600-static":"rgba(252, 233, 239, 1)","pink500-static":"rgba(249, 222, 231, 1)","pink400-static":"rgba(239, 180, 191, 1)","pink300-static":"rgba(228, 138, 155, 1)","pink200-static":"rgba(213, 94, 119, 1)","pink100-static":"rgba(255, 79, 131, 1)","pink80-static":"rgba(195, 39, 85, 1)","pink60-static":"rgba(149, 25, 64, 1)","pink40-static":"rgba(105, 11, 44, 1)","red600-static":"rgba(253, 231, 231, 1)","red500-static":"rgba(249, 221, 219, 1)","red400-static":"rgba(242, 180, 171, 1)","red300-static":"rgba(229, 138, 124, 1)","red200-static":"rgba(211, 95, 79, 1)","red100-static":"rgba(234, 0, 23, 1)","red80-static":"rgba(190, 44, 37, 1)","red60-static":"rgba(142, 31, 27, 1)","red40-static":"rgba(99, 16, 14, 1)","blue600-static":"rgba(231, 240, 254, 1)","blue500-static":"rgba(211, 231, 250, 1)","blue400-static":"rgba(172, 197, 231, 1)","blue300-static":"rgba(132, 164, 214, 1)","blue200-static":"rgba(87, 132, 197, 1)","blue100-static":"rgba(22, 109, 252, 1)","blue80-static":"rgba(19, 102, 179, 1)","blue60-static":"rgba(15, 75, 132, 1)","blue40-static":"rgba(10, 50, 88, 1)","gray700-static":"rgba(255, 255, 255, 1)","gray600-static":"rgba(247, 247, 247, 1)","gray500-static":"rgba(240, 240, 240, 1)","gray400-static":"rgba(233, 233, 233, 1)","gray300-static":"rgba(212, 212, 212, 1)","gray200-static":"rgba(170, 170, 170, 1)","gray100-static":"rgba(115, 115, 115, 1)","gray80-static":"rgba(89, 89, 89, 1)","gray60-static":"rgba(73, 73, 73, 1)","gray40-static":"rgba(42, 42, 42, 1)","gray20-static":"rgba(17, 17, 17, 1)","gray0-static":"rgba(0, 0, 0, 1)"} + export const defaultTheme={"errorContainer":"$red600","error":"$red200","warningContainer":"$orange600","warning":"$orange200","successContainer":"$green600","success":"$green80","signalContainer":"$blue600","signal":"$blue200","onMessage-subtle-hover":"$gray80","onMessage-subtle":"$gray60","onMessage-hover":"$gray80","onMessage":"$gray20","portal":"$gray700","onPortal-subtle-hover":"$gray100","onPortal-subtle":"$gray80","onPortal-hover":"$gray100","onPortal":"$gray20","OnSurface-subtle-hover":"$gray100","OnSurface-subtle":"$gray80","onSurface-hover":"$gray100","OnSurface":"$gray20","surface-highest":"$gray700","surface":"$gray700","onBackground-subtle-hover":"$gray100","onBackground-subtle":"$gray80","onBackground-hover":"$gray100","onBackground":"$gray20","background-forCards":"$gray600","background":"$gray700","accessible":"$gray80","outline":"$alpha400","subtle":"$alpha400","faint":"$alpha500","onDisabled":"$alpha80","disabled":"$alpha500","onCtaContainer-subtle-hover":"$gray80","onCtaContainer-subtle":"$gray60","onCtaContainer-hover":"$gray80","onCtaContainer":"$gray20","ctaContainer":"$blue600","onCta-hover":"$gray600-static","onCta":"$gray700-static","cta-hover":"$blue80","cta":"$blue100","onSecondary-subtle-hover":"$gray100","onSecondary-subtle":"$gray80","onSecondary-hover":"$gray100","onSecondary":"$gray20","secondary-hover":"$gray500","secondary":"$gray700","onPrimary-subtle-hover":"$gray200","onPrimary-subtle":"$gray300","onPrimary-hover":"$gray200","onPrimary":"$gray700","primary-hover":"$gray40","primary":"$gray20"} + export const darkTheme={"errorContainer":"$red600","error":"$red200","warningContainer":"$orange600","warning":"$orange200","successContainer":"$green600","success":"$green80","signalContainer":"$blue600","signal":"$blue200","onMessage-subtle-hover":"$gray80","onMessage-subtle":"$gray60","onMessage-hover":"$gray80","onMessage":"$gray20","portal":"$gray200","onPortal-subtle-hover":"$gray40","onPortal-subtle":"$gray20","onPortal-hover":"$gray40","onPortal":"$gray0","OnSurface-subtle-hover":"$gray80","OnSurface-subtle":"$gray60","onSurface-hover":"$gray80","OnSurface":"$gray0","surface-highest":"$gray300","surface":"$gray500","onBackground-subtle-hover":"$gray100","onBackground-subtle":"$gray80","onBackground-hover":"$gray100","onBackground":"$gray0","background-forCards":"$gray700","background":"$gray700","accessible":"$gray80","outline":"$alpha400","subtle":"$alpha400","faint":"$alpha500","onDisabled":"$alpha80","disabled":"$alpha500","onCtaContainer-subtle-hover":"$gray80","onCtaContainer-subtle":"$gray60","onCtaContainer-hover":"$gray80","onCtaContainer":"$gray0","ctaContainer":"$blue600","onCta-hover":"$gray600-static","onCta":"$gray700-static","cta-hover":"$blue300","cta":"$blue100","onSecondary-subtle-hover":"$gray100","onSecondary-subtle":"$gray80","onSecondary-hover":"$gray100","onSecondary":"$gray0","secondary-hover":"$gray500","secondary":"$gray700","onPrimary-subtle-hover":"$gray200","onPrimary-subtle":"$gray300","onPrimary-hover":"$gray200","onPrimary":"$gray700","primary-hover":"$gray40","primary":"$gray0"} export const sizes={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","087":"0.875rem"} export const spaces={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem"} export const radii={"100":"1rem","125":"1.25rem","150":"1.5rem","012":"0.125rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","round":"9999px"} @@ -11,6 +12,6 @@ export const fontSizes={"100":"1rem","112":"1.125rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","075":"0.75rem","087":"0.875rem"} export const fontWeights={"light":300,"regular":400,"bold":700,"ultra":800} export const lineHeights={"100":1,"110":1.1,"125":1.25,"150":1.5,"160":1.6,"175":1.75,"200":2,"240":2.4} - export const shadows={"50":"0px 2px 0px 0px #D5D5D5","100":"0px 1px 2px 0px rgba(102, 102, 102, 0.25)","200":"0px 2px 4px 0px rgba(102, 102, 102, 0.25)","300":"0px 4px 8px 0px rgba(102, 102, 102, 0.25)","400":"0px 8px 16px 0px rgba(102, 102, 102, 0.25)","500":"0px 16px 32px 0px rgba(102, 102, 102, 0.25)"} + export const shadows={"50":"0px 2px 0px 0px #D5D5D5","100":"0px 1px 2px 0px rgba(0, 0, 0, 0.15)","200":"0px 2px 4px 0px rgba(0, 0, 0, 0.15)","300":"0px 4px 8px 0px rgba(0, 0, 0, 0.15)","400":"0px 8px 16px 0px rgba(0, 0, 0, 0.15)","500":"0px 16px 32px 0px rgba(0, 0, 0, 0.15)"} export const zIndices={"offer":400,"shell":300,"ads":200,"page":100} \ No newline at end of file diff --git a/ui/theme/src/wpds.tokens.json b/ui/theme/src/wpds.tokens.json index eb5d0eaaf..de0324cbb 100644 --- a/ui/theme/src/wpds.tokens.json +++ b/ui/theme/src/wpds.tokens.json @@ -1,974 +1,1911 @@ { "color": { "light": { - "description": "The default color scheme", - "alpha25": { - "value": "rgba(0,0,0,.05)" + "alpha0": { + "type": "color", + "value": "rgba(0, 0, 0, .65)", + "hex": "#000000a6" + }, + "alpha20": { + "type": "color", + "value": "rgba(0, 0, 0, .45)", + "hex": "#00000073" + }, + "alpha40": { + "type": "color", + "value": "rgba(0, 0, 0, .40)", + "hex": "#00000066" + }, + "alpha60": { + "type": "color", + "value": "rgba(0, 0, 0, .35)", + "hex": "#00000059" + }, + "alpha80": { + "type": "color", + "value": "rgba(0, 0, 0, .30)", + "hex": "#0000004f" + }, + "alpha100": { + "type": "color", + "value": "rgba(0, 0, 0, .25)", + "hex": "#00000040" + }, + "alpha200": { + "type": "color", + "value": "rgba(0, 0, 0, .20)", + "hex": "#00000033" + }, + "alpha300": { + "type": "color", + "value": "rgba(0, 0, 0, .15)", + "hex": "#00000026" + }, + "alpha400": { + "type": "color", + "value": "rgba(0, 0, 0, .10)", + "hex": "#0000001a" + }, + "alpha500": { + "type": "color", + "value": "rgba(0, 0, 0, .05)", + "hex": "#0000000d" }, "alpha50": { - "value": "rgba(102,102,102,.5)" + "type": "color", + "value": "rgba(0, 0, 0, .50)", + "hex": "#00000080", + "description": "Legacy-Token subject to be deprecated use our new alpha tokens" }, - "gray0": { - "value": "rgba(0,0,0,1)" + "alpha25": { + "type": "color", + "value": "rgba(0, 0, 0, .05)", + "hex": "#0000000d", + "description": "Legacy-Token subject to be deprecated use our new alpha tokens" }, - "gray20": { - "value": "rgba(17,17,17,1)" + "mustard600": { + "type": "color", + "hex": "#fbf1dd", + "value": "rgba(251, 241, 221, 1)" }, - "gray40": { - "value": "rgba(42,42,42,1)" + "mustard500": { + "type": "color", + "hex": "#fee39c", + "value": "rgba(254, 227, 156, 1)" }, - "gray60": { - "value": "rgba(73,73,73,1)" + "mustard400": { + "type": "color", + "hex": "#f7ca6f", + "value": "rgba(247, 202, 111, 1)" }, - "gray80": { - "value": "rgba(102,102,102,1)" + "mustard300": { + "type": "color", + "hex": "#ebb347", + "value": "rgba(235, 179, 71, 1)" }, - "gray100": { - "value": "rgba(115,115,115,1)" + "mustard200": { + "type": "color", + "hex": "#d99e20", + "value": "rgba(217, 158, 32, 1)" }, - "gray200": { - "value": "rgba(170,170,170,1)" + "mustard100": { + "type": "color", + "hex": "#e2a31f", + "value": "rgba(226, 163, 31, 1)" }, - "gray300": { - "value": "rgba(212,212,212,1)" + "mustard80": { + "type": "color", + "hex": "#c18b00", + "value": "rgba(193, 139, 0, 1)" }, - "gray400": { - "value": "rgba(233,233,233,1)" + "mustard60": { + "type": "color", + "hex": "#916802", + "value": "rgba(145, 104, 2, 1)" }, - "gray500": { - "value": "rgba(240,240,240,1)" + "mustard40": { + "type": "color", + "hex": "#644801", + "value": "rgba(100, 72, 1, 1)" }, - "gray600": { - "value": "rgba(247,247,247,1)" + "yellow600": { + "type": "color", + "hex": "#fdfadb", + "value": "rgba(253, 250, 219, 1)" }, - "gray700": { - "value": "rgba(255,255,255,1)" + "yellow100": { + "type": "color", + "hex": "#ffec44", + "value": "rgba(255, 236, 68, 1)" }, - "blue40": { - "value": "rgba(10,50,88,1)" + "gold600": { + "type": "color", + "hex": "#faf0e3", + "value": "rgba(250, 240, 227, 1)" }, - "blue60": { - "value": "rgba(15,75,132,1)" + "gold500": { + "type": "color", + "hex": "#f3e4cd", + "value": "rgba(243, 228, 205, 1)" }, - "blue80": { - "value": "rgba(19,102,179,1)" + "gold400": { + "type": "color", + "hex": "#e8cba4", + "value": "rgba(232, 203, 164, 1)" }, - "blue100": { - "value": "rgba(22,109,252,1)" + "gold300": { + "type": "color", + "hex": "#deb57e", + "value": "rgba(222, 181, 126, 1)" }, - "blue200": { - "value": "rgba(87,132,197,1)" + "gold200": { + "type": "color", + "hex": "#d39e4c", + "value": "rgba(211, 158, 76, 1)" }, - "blue300": { - "value": "rgba(132,164,214,1)" + "gold100": { + "type": "color", + "hex": "#e5a038", + "value": "rgba(229, 160, 56, 1)" }, - "blue400": { - "value": "rgba(172,197,231,1)" + "gold80": { + "type": "color", + "hex": "#c2882f", + "value": "rgba(194, 136, 47, 1)" }, - "blue500": { - "value": "rgba(211,231,250,1)" + "gold60": { + "type": "color", + "hex": "#9e6105", + "value": "rgba(158, 97, 5, 1)" }, - "blue600": { - "value": "rgba(231,240,254,1)" + "gold40": { + "type": "color", + "hex": "#6d4508", + "value": "rgba(109, 69, 8, 1)" }, - "red40": { - "value": "rgba(99,16,14,1)" + "green600": { + "type": "color", + "hex": "#eef9ea", + "value": "rgba(238, 249, 234, 1)" }, - "red60": { - "value": "rgba(142,31,27,1)" + "green500": { + "type": "color", + "hex": "#d5edca", + "value": "rgba(213, 237, 202, 1)" }, - "red80": { - "value": "rgba(190,44,37,1)" + "green400": { + "type": "color", + "hex": "#b2d6a0", + "value": "rgba(178, 214, 160, 1)" }, - "red100": { - "value": "rgba(234,0,23,1)" + "green300": { + "type": "color", + "hex": "#91c078", + "value": "rgba(145, 192, 120, 1)" }, - "red200": { - "value": "rgba(211,95,79,1)" + "green200": { + "type": "color", + "hex": "#6ea951", + "value": "rgba(110, 169, 81, 1)" }, - "red300": { - "value": "rgba(229,138,124,1)" + "green100": { + "type": "color", + "hex": "#36a75c", + "value": "rgba(54, 167, 92, 1)" }, - "red400": { - "value": "rgba(242,180,171,1)" + "green80": { + "type": "color", + "hex": "#499327", + "value": "rgba(73, 147, 39, 1)" }, - "red500": { - "value": "rgba(249,221,219,1)" + "green60": { + "type": "color", + "hex": "#38711e", + "value": "rgba(56, 113, 30, 1)" }, - "red600": { - "value": "rgba(253,231,231,1)" + "green40": { + "type": "color", + "hex": "#285115", + "value": "rgba(40, 81, 21, 1)" }, - "pink40": { - "value": "rgba(105,11,44,1)" + "orange600": { + "type": "color", + "hex": "#ffefe0", + "value": "rgba(255, 239, 224, 1)" }, - "pink60": { - "value": "rgba(149,25,64,1)" + "orange500": { + "type": "color", + "hex": "#fbe1c3", + "value": "rgba(251, 225, 195, 1)" }, - "pink80": { - "value": "rgba(195,39,85,1)" + "orange400": { + "type": "color", + "hex": "#f9c296", + "value": "rgba(249, 194, 150, 1)" }, - "pink100": { - "value": "rgba(255,79,131,1)" + "orange300": { + "type": "color", + "hex": "#f1a26a", + "value": "rgba(241, 162, 106, 1)" }, - "pink200": { - "value": "rgba(213,94,119,1)" + "orange200": { + "type": "color", + "hex": "#e6823d", + "value": "rgba(230, 130, 61, 1)" }, - "pink300": { - "value": "rgba(228,138,155,1)" + "orange100": { + "type": "color", + "hex": "#f3750e", + "value": "rgba(243, 117, 14, 1)" }, - "pink400": { - "value": "rgba(239,180,191,1)" + "orange80": { + "type": "color", + "hex": "#d86100", + "value": "rgba(216, 97, 0, 1)" }, - "pink500": { - "value": "rgba(249,222,231,1)" + "orange60": { + "type": "color", + "hex": "#a64a00", + "value": "rgba(166, 74, 0, 1)" }, - "pink600": { - "value": "rgba(254,234,240,1)" + "orange40": { + "type": "color", + "hex": "#763502", + "value": "rgba(118, 53, 2, 1)" }, - "purple40": { - "value": "rgba(93,18,84,1)" + "teal600": { + "type": "color", + "hex": "#eafbfe", + "value": "rgba(234, 251, 254, 1)" }, - "purple60": { - "value": "rgba(136,27,121,1)" + "teal500": { + "type": "color", + "hex": "#c7eaef", + "value": "rgba(199, 234, 239, 1)" }, - "purple80": { - "value": "rgba(182,35,161,1)" + "teal400": { + "type": "color", + "hex": "#9fcbd3", + "value": "rgba(159, 203, 211, 1)" }, - "purple100": { - "value": "rgba(209,56,191,1)" + "teal300": { + "type": "color", + "hex": "#76acb6", + "value": "rgba(118, 172, 182, 1)" }, - "purple200": { - "value": "rgba(201,92,182,1)" + "teal200": { + "type": "color", + "hex": "#4a8e9b", + "value": "rgba(74, 142, 155, 1)" }, - "purple300": { - "value": "rgba(217,137,201,1)" + "teal100": { + "type": "color", + "hex": "#03afca", + "value": "rgba(3, 175, 202, 1)" }, - "purple400": { - "value": "rgba(234,179,223,1)" + "teal80": { + "type": "color", + "hex": "#0f7180", + "value": "rgba(15, 113, 128, 1)" }, - "purple500": { - "value": "rgba(248,221,244,1)" + "teal60": { + "type": "color", + "hex": "#0f545f", + "value": "rgba(15, 84, 95, 1)" + }, + "teal40": { + "type": "color", + "hex": "#0b3940", + "value": "rgba(11, 57, 64, 1)" }, "purple600": { - "value": "rgba(250,238,249,1)" + "type": "color", + "hex": "#faeef9", + "value": "rgba(250, 238, 249, 1)" }, - "teal40": { - "value": "rgba(11,57,64,1)" + "purple500": { + "type": "color", + "hex": "#f8ddf4", + "value": "rgba(248, 221, 244, 1)" }, - "teal60": { - "value": "rgba(15,84,95,1)" + "purple400": { + "type": "color", + "hex": "#eab3df", + "value": "rgba(234, 179, 223, 1)" }, - "teal80": { - "value": "rgba(15,113,128,1)" + "purple300": { + "type": "color", + "hex": "#d989c9", + "value": "rgba(217, 137, 201, 1)" }, - "teal100": { - "value": "rgba(3,175,202,1)" + "purple200": { + "type": "color", + "hex": "#c95cb6", + "value": "rgba(201, 92, 182, 1)" }, - "teal200": { - "value": "rgba(74,142,155,1)" + "purple100": { + "type": "color", + "hex": "#d138bf", + "value": "rgba(209, 56, 191, 1)" }, - "teal300": { - "value": "rgba(118,172,182,1)" + "purple80": { + "type": "color", + "hex": "#b623a1", + "value": "rgba(182, 35, 161, 1)" }, - "teal400": { - "value": "rgba(159,203,211,1)" + "purple60": { + "type": "color", + "hex": "#881b79", + "value": "rgba(136, 27, 121, 1)" }, - "teal500": { - "value": "rgba(199,234,239,1)" + "purple40": { + "type": "color", + "hex": "#5d1254", + "value": "rgba(93, 18, 84, 1)" }, - "teal600": { - "value": "rgba(234,251,254,1)" + "pink600": { + "type": "color", + "hex": "#fce9ef", + "value": "rgba(252, 233, 239, 1)" }, - "orange40": { - "value": "rgba(118,53,1,1)" + "pink500": { + "type": "color", + "hex": "#f9dee7", + "value": "rgba(249, 222, 231, 1)" }, - "orange60": { - "value": "rgba(166,74,0,1)" + "pink400": { + "type": "color", + "hex": "#efb4bf", + "value": "rgba(239, 180, 191, 1)" }, - "orange80": { - "value": "rgba(216,97,0,1)" + "pink300": { + "type": "color", + "hex": "#e48a9b", + "value": "rgba(228, 138, 155, 1)" }, - "orange100": { - "value": "rgba(243,117,14,1)" + "pink200": { + "type": "color", + "hex": "#d55e77", + "value": "rgba(213, 94, 119, 1)" }, - "orange200": { - "value": "rgba(230,130,61,1)" + "pink100": { + "type": "color", + "hex": "#ff4f83", + "value": "rgba(255, 79, 131, 1)" }, - "orange300": { - "value": "rgba(241,162,106,1)" + "pink80": { + "type": "color", + "hex": "#c32755", + "value": "rgba(195, 39, 85, 1)" }, - "orange400": { - "value": "rgba(249,194,150,1)" + "pink60": { + "type": "color", + "hex": "#951940", + "value": "rgba(149, 25, 64, 1)" }, - "orange500": { - "value": "rgba(251,225,195,1)" + "pink40": { + "type": "color", + "hex": "#690b2c", + "value": "rgba(105, 11, 44, 1)" }, - "orange600": { - "value": "rgba(255,239,224,1)" + "red600": { + "type": "color", + "hex": "#fde7e7", + "value": "rgba(253, 231, 231, 1)" }, - "green40": { - "value": "rgba(40,81,21,1)" + "red500": { + "type": "color", + "hex": "#f9dddb", + "value": "rgba(249, 221, 219, 1)" }, - "green60": { - "value": "rgba(56,113,30,1)" + "red400": { + "type": "color", + "hex": "#f2b4ab", + "value": "rgba(242, 180, 171, 1)" }, - "green80": { - "value": "rgba(73,147,39,1)" + "red300": { + "type": "color", + "hex": "#e58a7c", + "value": "rgba(229, 138, 124, 1)" }, - "green100": { - "value": "rgba(54,167,92,1)" + "red200": { + "type": "color", + "hex": "#d35f4f", + "value": "rgba(211, 95, 79, 1)" }, - "green200": { - "value": "rgba(110,169,81,1)" + "red100": { + "type": "color", + "hex": "#ea0017", + "value": "rgba(234, 0, 23, 1)" }, - "green300": { - "value": "rgba(145,192,120,1)" + "red80": { + "type": "color", + "hex": "#be2c25", + "value": "rgba(190, 44, 37, 1)" }, - "green400": { - "value": "rgba(178,214,160,1)" + "red60": { + "type": "color", + "hex": "#8e1f1b", + "value": "rgba(142, 31, 27, 1)" }, - "green500": { - "value": "rgba(213,237,202,1)" + "red40": { + "type": "color", + "hex": "#63100e", + "value": "rgba(99, 16, 14, 1)" }, - "green600": { - "value": "rgba(238,249,234,1)" + "blue600": { + "type": "color", + "hex": "#e7f0fe", + "value": "rgba(231, 240, 254, 1)" }, - "gold40": { - "value": "rgba(109,69,8,1)" + "blue500": { + "type": "color", + "hex": "#d3e7fa", + "value": "rgba(211, 231, 250, 1)" }, - "gold60": { - "value": "rgba(158,97,5,1)" + "blue400": { + "type": "color", + "hex": "#acc5e7", + "value": "rgba(172, 197, 231, 1)" }, - "gold80": { - "value": "rgba(194,136,47,1)" + "blue300": { + "type": "color", + "hex": "#84a4d6", + "value": "rgba(132, 164, 214, 1)" }, - "gold100": { - "value": "rgba(229,160,55,1)" + "blue200": { + "type": "color", + "hex": "#5784c5", + "value": "rgba(87, 132, 197, 1)" }, - "gold200": { - "value": "rgba(211,158,76,1)" + "blue100": { + "type": "color", + "hex": "#166dfc", + "value": "rgba(22, 109, 252, 1)" }, - "gold300": { - "value": "rgba(222,181,126,1)" + "blue80": { + "type": "color", + "hex": "#1366b3", + "value": "rgba(19, 102, 179, 1)" }, - "gold400": { - "value": "rgba(233,203,164,1)" + "blue60": { + "type": "color", + "hex": "#0f4b84", + "value": "rgba(15, 75, 132, 1)" }, - "gold500": { - "value": "rgba(243,228,205,1)" + "blue40": { + "type": "color", + "hex": "#0a3258", + "value": "rgba(10, 50, 88, 1)" }, - "gold600": { - "value": "rgba(250,240,226,1)" + "gray700": { + "type": "color", + "hex": "#ffffff", + "value": "rgba(255, 255, 255, 1)" }, - "yellow100": { - "value": "rgba(255,236,68,1)" + "gray600": { + "type": "color", + "hex": "#f7f7f7", + "value": "rgba(247, 247, 247, 1)" }, - "yellow600": { - "value": "rgba(253,249,216,1)" + "gray500": { + "type": "color", + "hex": "#f0f0f0", + "value": "rgba(240, 240, 240, 1)" }, - "mustard40": { - "value": "rgba(100,72,1,1)" + "gray400": { + "type": "color", + "hex": "#e9e9e9", + "value": "rgba(233, 233, 233, 1)" }, - "mustard60": { - "value": "rgba(145,104,1,1)" + "gray300": { + "type": "color", + "hex": "#d4d4d4", + "value": "rgba(212, 212, 212, 1)" }, - "mustard80": { - "value": "rgba(193,139,0,1)" + "gray200": { + "type": "color", + "hex": "#aaaaaa", + "value": "rgba(170, 170, 170, 1)" }, - "mustard100": { - "value": "rgba(226,163,31,1)" + "gray100": { + "type": "color", + "hex": "#737373", + "value": "rgba(115, 115, 115, 1)" }, - "mustard200": { - "value": "rgba(217,158,32,1)" + "gray80": { + "type": "color", + "hex": "#595959", + "description": "Previously #66666 updated to aim for AAA contrast on target background", + "value": "rgba(89, 89, 89, 1)" }, - "mustard300": { - "value": "rgba(235,179,71,1)" + "gray60": { + "type": "color", + "hex": "#494949", + "value": "rgba(73, 73, 73, 1)" }, - "mustard400": { - "value": "rgba(247,202,111,1)" + "gray40": { + "type": "color", + "hex": "#2a2a2a", + "value": "rgba(42, 42, 42, 1)" }, - "mustard500": { - "value": "rgba(254,227,156,1)" + "gray20": { + "type": "color", + "hex": "#111111", + "value": "rgba(17, 17, 17, 1)" }, - "mustard600": { - "value": "rgba(251,241,221,1)" + "gray0": { + "type": "color", + "hex": "#000000", + "value": "rgba(0, 0, 0, 1)" } }, "dark": { - "description": "The default color scheme in a dark version", - "alpha25": { - "value": "rgba(42,42,42,.5)" + "alpha0": { + "type": "color", + "value": "rgba(255, 255, 255, .65)", + "hex": "#ffffffa6" + }, + "alpha20": { + "type": "color", + "value": "rgba(255, 255, 255, .45)", + "hex": "#ffffff73" + }, + "alpha40": { + "type": "color", + "value": "rgba(255, 255, 255, .40)", + "hex": "#ffffff66" + }, + "alpha60": { + "type": "color", + "value": "rgba(255, 255, 255, .35)", + "hex": "#ffffff59" + }, + "alpha80": { + "type": "color", + "value": "rgba(255, 255, 255, .30)", + "hex": "#ffffff4d" + }, + "alpha100": { + "type": "color", + "value": "rgba(255, 255, 255, .25)", + "hex": "#ffffff40" + }, + "alpha200": { + "type": "color", + "value": "rgba(255, 255, 255, .20)", + "hex": "#ffffff33" + }, + "alpha300": { + "type": "color", + "value": "rgba(255, 255, 255, .15)", + "hex": "#ffffff26" + }, + "alpha400": { + "type": "color", + "value": "rgba(255, 255, 255, .10)", + "hex": "#ffffff1a" + }, + "alpha500": { + "type": "color", + "value": "rgba(255, 255, 255, .05)", + "hex": "#ffffff0d" }, "alpha50": { - "value": "rgba(255,255,255,.25)" + "type": "color", + "value": "rgba(255, 255, 255, .20)", + "hex": "#ffffff33", + "description": "Legacy-Token subject to be deprecated use our new alpha tokens" }, - "gray0": { - "value": "rgba(255,255,255,1)" + "alpha25": { + "type": "color", + "value": "rgba(255, 255, 255, .05)", + "hex": "#ffffff33", + "description": "Legacy-Token subject to be deprecated use our new alpha tokens" }, - "gray20": { - "value": "rgba(242,242,242,1)" + "mustard600": { + "type": "color", + "hex": "#21201e", + "value": "rgba(33, 32, 30, 1)" }, - "gray40": { - "value": "rgba(214,214,214,1)" + "mustard500": { + "type": "color", + "hex": "#2c271b", + "value": "rgba(44, 39, 27, 1)" }, - "gray60": { - "value": "rgba(169,169,169,1)" + "mustard400": { + "type": "color", + "hex": "#40341d", + "value": "rgba(64, 52, 29, 1)" }, - "gray80": { - "value": "rgba(133,133,133,1)" + "mustard300": { + "type": "color", + "hex": "#534019", + "value": "rgba(83, 64, 25, 1)" }, - "gray100": { - "value": "rgba(119,119,119,1)" + "mustard200": { + "type": "color", + "hex": "#684b0f", + "value": "rgba(104, 75, 15, 1)" }, - "gray200": { - "value": "rgba(73,73,73,1)" + "mustard100": { + "type": "color", + "hex": "#664c06", + "value": "rgba(102, 76, 6, 1)" }, - "gray300": { - "value": "rgba(43,43,43,1)" + "mustard80": { + "type": "color", + "hex": "#7c5a00", + "value": "rgba(124, 90, 0, 1)" }, - "gray400": { - "value": "rgba(26,26,26,1)" + "mustard60": { + "type": "color", + "hex": "#a17d25", + "value": "rgba(161, 125, 37, 1)" }, - "gray500": { - "value": "rgba(20,20,20,1)" + "mustard40": { + "type": "color", + "hex": "#b8ab8b", + "value": "rgba(184, 171, 139, 1)" }, - "gray600": { - "value": "rgba(12,12,12,1)" + "yellow600": { + "type": "color", + "hex": "#1b1a17", + "value": "rgba(27, 26, 23, 1)" }, - "gray700": { - "value": "rgba(2,2,2,1)" + "yellow100": { + "type": "color", + "hex": "#28250b", + "value": "rgba(40, 37, 11, 1)" }, - "blue40": { - "value": "rgba(196,205,214,1)" + "gold600": { + "type": "color", + "hex": "#1f1e1c", + "value": "rgba(31, 30, 28, 1)" }, - "blue60": { - "value": "rgba(144,172,198,1)" + "gold500": { + "type": "color", + "hex": "#2a2723", + "value": "rgba(42, 39, 35, 1)" }, - "blue80": { - "value": "rgba(77,140,198,1)" + "gold400": { + "type": "color", + "hex": "#3c352b", + "value": "rgba(60, 53, 43, 1)" }, - "blue100": { - "value": "rgba(22,108,249,1)" + "gold300": { + "type": "color", + "hex": "#4f412d", + "value": "rgba(79, 65, 45, 1)" }, - "blue200": { - "value": "rgba(70,106,158,1)" + "gold200": { + "type": "color", + "hex": "#664d25", + "value": "rgba(102, 77, 37, 1)" }, - "blue300": { - "value": "rgba(64,79,104,1)" + "gold100": { + "type": "color", + "hex": "#694613", + "value": "rgba(105, 70, 19, 1)" }, - "blue400": { - "value": "rgba(49,56,66,1)" + "gold80": { + "type": "color", + "hex": "#80591f", + "value": "rgba(128, 89, 31, 1)" }, - "blue500": { - "value": "rgba(28,31,34,1)" + "gold60": { + "type": "color", + "hex": "#ac792a", + "value": "rgba(172, 121, 42, 1)" }, - "blue600": { - "value": "rgba(20,20,22,1)" + "gold40": { + "type": "color", + "hex": "#bba88c", + "value": "rgba(187, 168, 140, 1)" }, - "red40": { - "value": "rgba(219,199,199,1)" + "green600": { + "type": "color", + "hex": "#1e211e", + "value": "rgba(30, 33, 30, 1)" }, - "red60": { - "value": "rgba(205,157,155,1)" + "green500": { + "type": "color", + "hex": "#242822", + "value": "rgba(36, 40, 34, 1)" }, - "red80": { - "value": "rgba(209,104,99,1)" + "green400": { + "type": "color", + "hex": "#313b2c", + "value": "rgba(49, 59, 44, 1)" }, - "red100": { - "value": "rgba(235,18,40,1)" + "green300": { + "type": "color", + "hex": "#3b4e30", + "value": "rgba(59, 78, 48, 1)" }, - "red200": { - "value": "rgba(170,76,63,1)" + "green200": { + "type": "color", + "hex": "#416530", + "value": "rgba(65, 101, 48, 1)" }, - "red300": { - "value": "rgba(111,67,60,1)" + "green100": { + "type": "color", + "hex": "#22703c", + "value": "rgba(34, 112, 60, 1)" }, - "red400": { - "value": "rgba(69,51,49,1)" + "green80": { + "type": "color", + "hex": "#3e7d21", + "value": "rgba(62, 125, 33, 1)" }, - "red500": { - "value": "rgba(33,30,29,1)" + "green60": { + "type": "color", + "hex": "#71995e", + "value": "rgba(113, 153, 94, 1)" }, - "red600": { - "value": "rgba(24,22,22,1)" + "green40": { + "type": "color", + "hex": "#a8b8a0", + "value": "rgba(168, 184, 160, 1)" }, - "pink40": { - "value": "rgba(217,193,202,1)" + "orange600": { + "type": "color", + "hex": "#241f1b", + "value": "rgba(36, 31, 27, 1)" }, - "pink60": { - "value": "rgba(206,148,167,1)" + "orange500": { + "type": "color", + "hex": "#2b2722", + "value": "rgba(43, 39, 34, 1)" }, - "pink80": { - "value": "rgba(210,93,128,1)" + "orange400": { + "type": "color", + "hex": "#443529", + "value": "rgba(68, 53, 41, 1)" }, - "pink100": { - "value": "rgba(163,50,84,1)" + "orange300": { + "type": "color", + "hex": "#61412b", + "value": "rgba(97, 65, 43, 1)" }, - "pink200": { - "value": "rgba(164,73,92,1)" + "orange200": { + "type": "color", + "hex": "#854b23", + "value": "rgba(133, 75, 35, 1)" }, - "pink300": { - "value": "rgba(108,65,74,1)" + "orange100": { + "type": "color", + "hex": "#964c0f", + "value": "rgba(150, 76, 15, 1)" }, - "pink400": { - "value": "rgba(67,50,53,1)" + "orange80": { + "type": "color", + "hex": "#b35100", + "value": "rgba(179, 81, 0, 1)" }, - "pink500": { - "value": "rgba(33,30,31,1)" + "orange60": { + "type": "color", + "hex": "#c07f4a", + "value": "rgba(192, 127, 74, 1)" }, - "pink600": { - "value": "rgba(21,20,20,1)" + "orange40": { + "type": "color", + "hex": "#c8ae9a", + "value": "rgba(200, 174, 154, 1)" }, - "purple40": { - "value": "rgba(213,194,211,1)" + "teal600": { + "type": "color", + "hex": "#1d2121", + "value": "rgba(29, 33, 33, 1)" }, - "purple60": { - "value": "rgba(199,148,192,1)" + "teal500": { + "type": "color", + "hex": "#242a2b", + "value": "rgba(36, 42, 43, 1)" }, - "purple80": { - "value": "rgba(200,90,185,1)" + "teal400": { + "type": "color", + "hex": "#324043", + "value": "rgba(50, 64, 67, 1)" }, - "purple100": { - "value": "rgba(188,50,172,1)" + "teal300": { + "type": "color", + "hex": "#3d595e", + "value": "rgba(61, 89, 94, 1)" }, - "purple200": { - "value": "rgba(156,71,141,1)" + "teal200": { + "type": "color", + "hex": "#3d7681", + "value": "rgba(61, 118, 129, 1)" }, - "purple300": { - "value": "rgba(104,65,96,1)" + "teal100": { + "type": "color", + "hex": "#026a7a", + "value": "rgba(2, 106, 122, 1)" }, - "purple400": { - "value": "rgba(66,50,63,1)" + "teal80": { + "type": "color", + "hex": "#4e96a2", + "value": "rgba(78, 150, 162, 1)" }, - "purple500": { - "value": "rgba(33,29,32,1)" + "teal60": { + "type": "color", + "hex": "#94b2b7", + "value": "rgba(148, 178, 183, 1)" + }, + "teal40": { + "type": "color", + "hex": "#c8d2d4", + "value": "rgba(200, 210, 212, 1)" }, "purple600": { - "value": "rgba(19,18,19,1)" + "type": "color", + "hex": "#211d21", + "value": "rgba(33, 29, 33, 1)" }, - "teal40": { - "value": "rgba(190,202,204,1)" + "purple500": { + "type": "color", + "hex": "#2b262a", + "value": "rgba(43, 38, 42, 1)" }, - "teal60": { - "value": "rgba(137,171,177,1)" + "purple400": { + "type": "color", + "hex": "#4a3846", + "value": "rgba(74, 56, 70, 1)" }, - "teal80": { - "value": "rgba(67,143,155,1)" + "purple300": { + "type": "color", + "hex": "#704767", + "value": "rgba(112, 71, 103, 1)" }, - "teal100": { - "value": "rgba(2,89,103,1)" + "purple200": { + "type": "color", + "hex": "#a54b95", + "value": "rgba(165, 75, 149, 1)" }, - "teal200": { - "value": "rgba(58,111,122,1)" + "purple100": { + "type": "color", + "hex": "#c635b5", + "value": "rgba(198, 53, 181, 1)" }, - "teal300": { - "value": "rgba(56,82,87,1)" + "purple80": { + "type": "color", + "hex": "#cc64bd", + "value": "rgba(204, 100, 189, 1)" }, - "teal400": { - "value": "rgba(45,57,59,1)" + "purple60": { + "type": "color", + "hex": "#cc9dc6", + "value": "rgba(204, 157, 198, 1)" }, - "teal500": { - "value": "rgba(27,32,32,1)" + "purple40": { + "type": "color", + "hex": "#dcccda", + "value": "rgba(220, 204, 218, 1)" }, - "teal600": { - "value": "rgba(11,12,12,1)" + "pink600": { + "type": "color", + "hex": "#242021", + "value": "rgba(36, 32, 33, 1)" }, - "orange40": { - "value": "rgba(195,166,143,1)" + "pink500": { + "type": "color", + "hex": "#2c2729", + "value": "rgba(44, 39, 41, 1)" }, - "orange60": { - "value": "rgba(188,118,63,1)" + "pink400": { + "type": "color", + "hex": "#4c393d", + "value": "rgba(76, 57, 61, 1)" }, - "orange80": { - "value": "rgba(170,76,0,1)" + "pink300": { + "type": "color", + "hex": "#75474f", + "value": "rgba(117, 71, 79, 1)" }, - "orange100": { - "value": "rgba(137,66,8,1)" + "pink200": { + "type": "color", + "hex": "#af4d62", + "value": "rgba(175, 77, 98, 1)" }, - "orange200": { - "value": "rgba(124,70,33,1)" + "pink100": { + "type": "color", + "hex": "#ad3659", + "value": "rgba(173, 54, 89, 1)" }, - "orange300": { - "value": "rgba(89,59,39,1)" + "pink80": { + "type": "color", + "hex": "#d56788", + "value": "rgba(213, 103, 136, 1)" }, - "orange400": { - "value": "rgba(59,46,35,1)" + "pink60": { + "type": "color", + "hex": "#d29dae", + "value": "rgba(210, 157, 174, 1)" }, - "orange500": { - "value": "rgba(32,29,25,1)" + "pink40": { + "type": "color", + "hex": "#dfcbd2", + "value": "rgba(223, 203, 210, 1)" }, - "orange600": { - "value": "rgba(19,18,17,1)" + "red600": { + "type": "color", + "hex": "#261f1f", + "value": "rgba(38, 31, 31, 1)" }, - "green40": { - "value": "rgba(159,177,151,1)" + "red500": { + "type": "color", + "hex": "#2d2727", + "value": "rgba(45, 39, 39, 1)" }, - "green60": { - "value": "rgba(104,147,85,1)" + "red400": { + "type": "color", + "hex": "#4d3a37", + "value": "rgba(77, 58, 55, 1)" }, - "green80": { - "value": "rgba(59,119,31,1)" + "red300": { + "type": "color", + "hex": "#784841", + "value": "rgba(120, 72, 65, 1)" }, - "green100": { - "value": "rgba(33,103,57,1)" + "red200": { + "type": "color", + "hex": "#b85345", + "value": "rgba(184, 83, 69, 1)" }, - "green200": { - "value": "rgba(61,93,45,1)" + "red100": { + "type": "color", + "hex": "#f02e41", + "value": "rgba(240, 46, 65, 1)" }, - "green300": { - "value": "rgba(54,71,45,1)" + "red80": { + "type": "color", + "hex": "#d4726d", + "value": "rgba(212, 114, 109, 1)" }, - "green400": { - "value": "rgba(43,52,39,1)" + "red60": { + "type": "color", + "hex": "#d2a5a4", + "value": "rgba(210, 165, 164, 1)" }, - "green500": { - "value": "rgba(27,30,25,1)" + "red40": { + "type": "color", + "hex": "#e1d0d0", + "value": "rgba(225, 208, 208, 1)" }, - "green600": { - "value": "rgba(12,12,12,1)" + "blue600": { + "type": "color", + "hex": "#1f2226", + "value": "rgba(31, 34, 38, 1)" }, - "gold40": { - "value": "rgba(181,161,130,1)" + "blue500": { + "type": "color", + "hex": "#25292c", + "value": "rgba(37, 41, 44, 1)" }, - "gold60": { - "value": "rgba(168,113,31,1)" + "blue400": { + "type": "color", + "hex": "#373f49", + "value": "rgba(55, 63, 73, 1)" }, - "gold80": { - "value": "rgba(119,84,29,1)" + "blue300": { + "type": "color", + "hex": "#455670", + "value": "rgba(69, 86, 112, 1)" }, - "gold100": { - "value": "rgba(93,65,22,1)" + "blue200": { + "type": "color", + "hex": "#4a70a8", + "value": "rgba(74, 112, 168, 1)" }, - "gold200": { - "value": "rgba(95,71,34,1)" + "blue100": { + "type": "color", + "hex": "#166dfc", + "value": "rgba(22, 109, 252, 1)" }, - "gold300": { - "value": "rgba(72,58,41,1)" + "blue80": { + "type": "color", + "hex": "#5892c9", + "value": "rgba(88, 146, 201, 1)" }, - "gold400": { - "value": "rgba(51,45,36,1)" + "blue60": { + "type": "color", + "hex": "#9ab3cb", + "value": "rgba(154, 179, 203, 1)" }, - "gold500": { - "value": "rgba(32,30,27,1)" + "blue40": { + "type": "color", + "hex": "#cdd5dd", + "value": "rgba(205, 213, 221, 1)" }, - "gold600": { - "value": "rgba(21,20,19,1)" + "gray700": { + "type": "color", + "hex": "#141414", + "value": "rgba(20, 20, 20, 1)" }, - "yellow100": { - "value": "rgba(29,27,8,1)" + "gray600": { + "type": "color", + "hex": "#1a1a1a", + "value": "rgba(26, 26, 26, 1)" }, - "yellow600": { - "value": "rgba(8,8,7,1)" + "gray500": { + "type": "color", + "hex": "#202020", + "value": "rgba(32, 32, 32, 1)" }, - "mustard40": { - "value": "rgba(178,164,128,1)" + "gray400": { + "type": "color", + "hex": "#252525", + "value": "rgba(37, 37, 37, 1)" }, - "mustard60": { - "value": "rgba(156,118,24,1)" + "gray300": { + "type": "color", + "hex": "#333333", + "value": "rgba(51, 51, 51, 1)" }, - "mustard80": { - "value": "rgba(117,84,0,1)" + "gray200": { + "type": "color", + "hex": "#4f4f4f", + "value": "rgba(79, 79, 79, 1)" }, - "mustard100": { - "value": "rgba(91,65,12,1)" + "gray100": { + "type": "color", + "hex": "#7f7f7f", + "value": "rgba(127, 127, 127, 1)" }, - "mustard200": { - "value": "rgba(96,70,14,1)" + "gray80": { + "type": "color", + "hex": "#a1a1a1", + "value": "rgba(161, 161, 161, 1)" }, - "mustard300": { - "value": "rgba(75,57,23,1)" + "gray60": { + "type": "color", + "hex": "#b1b1b1", + "value": "rgba(177, 177, 177, 1)" }, - "mustard400": { - "value": "rgba(54,44,24,1)" + "gray40": { + "type": "color", + "hex": "#dedede", + "value": "rgba(222, 222, 222, 1)" }, - "mustard500": { - "value": "rgba(34,30,21,1)" + "gray20": { + "type": "color", + "hex": "#f2f2f2", + "value": "rgba(242, 242, 242, 1)" }, - "mustard600": { - "value": "rgba(19,18,17,1)" + "gray0": { + "type": "color", + "hex": "#ffffff", + "value": "rgba(255, 255, 255, 1)" } }, "static": { "description": "The default color scheme independent if in light or dark mode", - "alpha25": { - "value": "rgba(0,0,0,.05)" + "alpha0": { + "type": "color", + "value": "rgba(0, 0, 0, .65)", + "hex": "#000000a6" + }, + "alpha20": { + "type": "color", + "value": "rgba(0, 0, 0, .45)", + "hex": "#00000073" + }, + "alpha40": { + "type": "color", + "value": "rgba(0, 0, 0, .40)", + "hex": "#00000066" + }, + "alpha60": { + "type": "color", + "value": "rgba(0, 0, 0, .35)", + "hex": "#00000059" + }, + "alpha80": { + "type": "color", + "value": "rgba(0, 0, 0, .30)", + "hex": "#0000004f" + }, + "alpha100": { + "type": "color", + "value": "rgba(0, 0, 0, .25)", + "hex": "#00000040" + }, + "alpha200": { + "type": "color", + "value": "rgba(0, 0, 0, .20)", + "hex": "#00000033" + }, + "alpha300": { + "type": "color", + "value": "rgba(0, 0, 0, .15)", + "hex": "#00000026" + }, + "alpha400": { + "type": "color", + "value": "rgba(0, 0, 0, .10)", + "hex": "#0000001a" + }, + "alpha500": { + "type": "color", + "value": "rgba(0, 0, 0, .05)", + "hex": "#0000000d" }, "alpha50": { - "value": "rgba(102,102,102,.5)" + "type": "color", + "value": "rgba(0, 0, 0, .50)", + "hex": "#00000080", + "description": "Legacy-Token subject to be deprecated use our new alpha tokens" }, "alpha25": { - "value": "rgba(0,0,0,.05)" + "type": "color", + "value": "rgba(0, 0, 0, .05)", + "hex": "#0000000d", + "description": "Legacy-Token subject to be deprecated use our new alpha tokens" }, - "alpha50": { - "value": "rgba(102,102,102,.5)" - }, - "gray0": { - "value": "rgba(0,0,0,1)" + "mustard600": { + "type": "color", + "hex": "#fbf1dd", + "value": "rgba(251, 241, 221, 1)" }, - "gray20": { - "value": "rgba(17,17,17,1)" + "mustard500": { + "type": "color", + "hex": "#fee39c", + "value": "rgba(254, 227, 156, 1)" }, - "gray40": { - "value": "rgba(42,42,42,1)" + "mustard400": { + "type": "color", + "hex": "#f7ca6f", + "value": "rgba(247, 202, 111, 1)" }, - "gray60": { - "value": "rgba(73,73,73,1)" + "mustard300": { + "type": "color", + "hex": "#ebb347", + "value": "rgba(235, 179, 71, 1)" }, - "gray80": { - "value": "rgba(102,102,102,1)" + "mustard200": { + "type": "color", + "hex": "#d99e20", + "value": "rgba(217, 158, 32, 1)" }, - "gray100": { - "value": "rgba(115,115,115,1)" + "mustard100": { + "type": "color", + "hex": "#e2a31f", + "value": "rgba(226, 163, 31, 1)" }, - "gray200": { - "value": "rgba(170,170,170,1)" + "mustard80": { + "type": "color", + "hex": "#c18b00", + "value": "rgba(193, 139, 0, 1)" }, - "gray300": { - "value": "rgba(212,212,212,1)" + "mustard60": { + "type": "color", + "hex": "#916802", + "value": "rgba(145, 104, 2, 1)" }, - "gray400": { - "value": "rgba(233,233,233,1)" + "mustard40": { + "type": "color", + "hex": "#644801", + "value": "rgba(100, 72, 1, 1)" }, - "gray500": { - "value": "rgba(240,240,240,1)" + "yellow600": { + "type": "color", + "hex": "#fdfadb", + "value": "rgba(253, 250, 219, 1)" }, - "gray600": { - "value": "rgba(247,247,247,1)" + "yellow100": { + "type": "color", + "hex": "#ffec44", + "value": "rgba(255, 236, 68, 1)" }, - "gray700": { - "value": "rgba(255,255,255,1)" + "gold600": { + "type": "color", + "hex": "#faf0e3", + "value": "rgba(250, 240, 227, 1)" }, - "blue40": { - "value": "rgba(10,50,88,1)" + "gold500": { + "type": "color", + "hex": "#f3e4cd", + "value": "rgba(243, 228, 205, 1)" }, - "blue60": { - "value": "rgba(15,75,132,1)" + "gold400": { + "type": "color", + "hex": "#e8cba4", + "value": "rgba(232, 203, 164, 1)" }, - "blue80": { - "value": "rgba(19,102,179,1)" + "gold300": { + "type": "color", + "hex": "#deb57e", + "value": "rgba(222, 181, 126, 1)" }, - "blue100": { - "value": "rgba(22,109,252,1)" + "gold200": { + "type": "color", + "hex": "#d39e4c", + "value": "rgba(211, 158, 76, 1)" }, - "blue200": { - "value": "rgba(87,132,197,1)" + "gold100": { + "type": "color", + "hex": "#e5a038", + "value": "rgba(229, 160, 56, 1)" }, - "blue300": { - "value": "rgba(132,164,214,1)" + "gold80": { + "type": "color", + "hex": "#c2882f", + "value": "rgba(194, 136, 47, 1)" }, - "blue400": { - "value": "rgba(172,197,231,1)" + "gold60": { + "type": "color", + "hex": "#9e6105", + "value": "rgba(158, 97, 5, 1)" }, - "blue500": { - "value": "rgba(211,231,250,1)" + "gold40": { + "type": "color", + "hex": "#6d4508", + "value": "rgba(109, 69, 8, 1)" }, - "blue600": { - "value": "rgba(231,240,254,1)" + "green600": { + "type": "color", + "hex": "#eef9ea", + "value": "rgba(238, 249, 234, 1)" }, - "red40": { - "value": "rgba(99,16,14,1)" + "green500": { + "type": "color", + "hex": "#d5edca", + "value": "rgba(213, 237, 202, 1)" }, - "red60": { - "value": "rgba(142,31,27,1)" + "green400": { + "type": "color", + "hex": "#b2d6a0", + "value": "rgba(178, 214, 160, 1)" }, - "red80": { - "value": "rgba(190,44,37,1)" + "green300": { + "type": "color", + "hex": "#91c078", + "value": "rgba(145, 192, 120, 1)" }, - "red100": { - "value": "rgba(234,0,23,1)" + "green200": { + "type": "color", + "hex": "#6ea951", + "value": "rgba(110, 169, 81, 1)" }, - "red200": { - "value": "rgba(211,95,79,1)" + "green100": { + "type": "color", + "hex": "#36a75c", + "value": "rgba(54, 167, 92, 1)" }, - "red300": { - "value": "rgba(229,138,124,1)" + "green80": { + "type": "color", + "hex": "#499327", + "value": "rgba(73, 147, 39, 1)" }, - "red400": { - "value": "rgba(242,180,171,1)" + "green60": { + "type": "color", + "hex": "#38711e", + "value": "rgba(56, 113, 30, 1)" }, - "red500": { - "value": "rgba(249,221,219,1)" + "green40": { + "type": "color", + "hex": "#285115", + "value": "rgba(40, 81, 21, 1)" }, - "red600": { - "value": "rgba(253,231,231,1)" + "orange600": { + "type": "color", + "hex": "#ffefe0", + "value": "rgba(255, 239, 224, 1)" }, - "pink40": { - "value": "rgba(105,11,44,1)" + "orange500": { + "type": "color", + "hex": "#fbe1c3", + "value": "rgba(251, 225, 195, 1)" }, - "pink60": { - "value": "rgba(149,25,64,1)" + "orange400": { + "type": "color", + "hex": "#f9c296", + "value": "rgba(249, 194, 150, 1)" }, - "pink80": { - "value": "rgba(195,39,85,1)" + "orange300": { + "type": "color", + "hex": "#f1a26a", + "value": "rgba(241, 162, 106, 1)" }, - "pink100": { - "value": "rgba(255,79,131,1)" + "orange200": { + "type": "color", + "hex": "#e6823d", + "value": "rgba(230, 130, 61, 1)" }, - "pink200": { - "value": "rgba(213,94,119,1)" + "orange100": { + "type": "color", + "hex": "#f3750e", + "value": "rgba(243, 117, 14, 1)" }, - "pink300": { - "value": "rgba(228,138,155,1)" + "orange80": { + "type": "color", + "hex": "#d86100", + "value": "rgba(216, 97, 0, 1)" }, - "pink400": { - "value": "rgba(239,180,191,1)" + "orange60": { + "type": "color", + "hex": "#a64a00", + "value": "rgba(166, 74, 0, 1)" }, - "pink500": { - "value": "rgba(249,222,231,1)" + "orange40": { + "type": "color", + "hex": "#763502", + "value": "rgba(118, 53, 2, 1)" }, - "pink600": { - "value": "rgba(254,234,240,1)" + "teal600": { + "type": "color", + "hex": "#eafbfe", + "value": "rgba(234, 251, 254, 1)" }, - "purple40": { - "value": "rgba(93,18,84,1)" + "teal500": { + "type": "color", + "hex": "#c7eaef", + "value": "rgba(199, 234, 239, 1)" }, - "purple60": { - "value": "rgba(136,27,121,1)" + "teal400": { + "type": "color", + "hex": "#9fcbd3", + "value": "rgba(159, 203, 211, 1)" }, - "purple80": { - "value": "rgba(182,35,161,1)" + "teal300": { + "type": "color", + "hex": "#76acb6", + "value": "rgba(118, 172, 182, 1)" }, - "purple100": { - "value": "rgba(209,56,191,1)" + "teal200": { + "type": "color", + "hex": "#4a8e9b", + "value": "rgba(74, 142, 155, 1)" }, - "purple200": { - "value": "rgba(201,92,182,1)" + "teal100": { + "type": "color", + "hex": "#03afca", + "value": "rgba(3, 175, 202, 1)" }, - "purple300": { - "value": "rgba(217,137,201,1)" + "teal80": { + "type": "color", + "hex": "#0f7180", + "value": "rgba(15, 113, 128, 1)" }, - "purple400": { - "value": "rgba(234,179,223,1)" + "teal60": { + "type": "color", + "hex": "#0f545f", + "value": "rgba(15, 84, 95, 1)" }, - "purple500": { - "value": "rgba(248,221,244,1)" + "teal40": { + "type": "color", + "hex": "#0b3940", + "value": "rgba(11, 57, 64, 1)" }, "purple600": { - "value": "rgba(250,238,249,1)" + "type": "color", + "hex": "#faeef9", + "value": "rgba(250, 238, 249, 1)" }, - "teal40": { - "value": "rgba(11,57,64,1)" + "purple500": { + "type": "color", + "hex": "#f8ddf4", + "value": "rgba(248, 221, 244, 1)" }, - "teal60": { - "value": "rgba(15,84,95,1)" + "purple400": { + "type": "color", + "hex": "#eab3df", + "value": "rgba(234, 179, 223, 1)" }, - "teal80": { - "value": "rgba(15,113,128,1)" + "purple300": { + "type": "color", + "hex": "#d989c9", + "value": "rgba(217, 137, 201, 1)" }, - "teal100": { - "value": "rgba(3,175,202,1)" + "purple200": { + "type": "color", + "hex": "#c95cb6", + "value": "rgba(201, 92, 182, 1)" }, - "teal200": { - "value": "rgba(74,142,155,1)" + "purple100": { + "type": "color", + "hex": "#d138bf", + "value": "rgba(209, 56, 191, 1)" }, - "teal300": { - "value": "rgba(118,172,182,1)" + "purple80": { + "type": "color", + "hex": "#b623a1", + "value": "rgba(182, 35, 161, 1)" }, - "teal400": { - "value": "rgba(159,203,211,1)" + "purple60": { + "type": "color", + "hex": "#881b79", + "value": "rgba(136, 27, 121, 1)" }, - "teal500": { - "value": "rgba(199,234,239,1)" + "purple40": { + "type": "color", + "hex": "#5d1254", + "value": "rgba(93, 18, 84, 1)" }, - "teal600": { - "value": "rgba(234,251,254,1)" + "pink600": { + "type": "color", + "hex": "#fce9ef", + "value": "rgba(252, 233, 239, 1)" }, - "orange40": { - "value": "rgba(118,53,1,1)" + "pink500": { + "type": "color", + "hex": "#f9dee7", + "value": "rgba(249, 222, 231, 1)" }, - "orange60": { - "value": "rgba(166,74,0,1)" + "pink400": { + "type": "color", + "hex": "#efb4bf", + "value": "rgba(239, 180, 191, 1)" }, - "orange80": { - "value": "rgba(216,97,0,1)" + "pink300": { + "type": "color", + "hex": "#e48a9b", + "value": "rgba(228, 138, 155, 1)" }, - "orange100": { - "value": "rgba(243,117,14,1)" + "pink200": { + "type": "color", + "hex": "#d55e77", + "value": "rgba(213, 94, 119, 1)" }, - "orange200": { - "value": "rgba(230,130,61,1)" + "pink100": { + "type": "color", + "hex": "#ff4f83", + "value": "rgba(255, 79, 131, 1)" }, - "orange300": { - "value": "rgba(241,162,106,1)" + "pink80": { + "type": "color", + "hex": "#c32755", + "value": "rgba(195, 39, 85, 1)" }, - "orange400": { - "value": "rgba(249,194,150,1)" + "pink60": { + "type": "color", + "hex": "#951940", + "value": "rgba(149, 25, 64, 1)" }, - "orange500": { - "value": "rgba(251,225,195,1)" + "pink40": { + "type": "color", + "hex": "#690b2c", + "value": "rgba(105, 11, 44, 1)" }, - "orange600": { - "value": "rgba(255,239,224,1)" + "red600": { + "type": "color", + "hex": "#fde7e7", + "value": "rgba(253, 231, 231, 1)" }, - "green40": { - "value": "rgba(40,81,21,1)" + "red500": { + "type": "color", + "hex": "#f9dddb", + "value": "rgba(249, 221, 219, 1)" }, - "green60": { - "value": "rgba(56,113,30,1)" + "red400": { + "type": "color", + "hex": "#f2b4ab", + "value": "rgba(242, 180, 171, 1)" }, - "green80": { - "value": "rgba(73,147,39,1)" + "red300": { + "type": "color", + "hex": "#e58a7c", + "value": "rgba(229, 138, 124, 1)" }, - "green100": { - "value": "rgba(54,167,92,1)" + "red200": { + "type": "color", + "hex": "#d35f4f", + "value": "rgba(211, 95, 79, 1)" }, - "green200": { - "value": "rgba(110,169,81,1)" + "red100": { + "type": "color", + "hex": "#ea0017", + "value": "rgba(234, 0, 23, 1)" }, - "green300": { - "value": "rgba(145,192,120,1)" + "red80": { + "type": "color", + "hex": "#be2c25", + "value": "rgba(190, 44, 37, 1)" }, - "green400": { - "value": "rgba(178,214,160,1)" + "red60": { + "type": "color", + "hex": "#8e1f1b", + "value": "rgba(142, 31, 27, 1)" }, - "green500": { - "value": "rgba(213,237,202,1)" + "red40": { + "type": "color", + "hex": "#63100e", + "value": "rgba(99, 16, 14, 1)" }, - "green600": { - "value": "rgba(238,249,234,1)" + "blue600": { + "type": "color", + "hex": "#e7f0fe", + "value": "rgba(231, 240, 254, 1)" }, - "gold40": { - "value": "rgba(109,69,8,1)" + "blue500": { + "type": "color", + "hex": "#d3e7fa", + "value": "rgba(211, 231, 250, 1)" }, - "gold60": { - "value": "rgba(158,97,5,1)" + "blue400": { + "type": "color", + "hex": "#acc5e7", + "value": "rgba(172, 197, 231, 1)" }, - "gold80": { - "value": "rgba(194,136,47,1)" + "blue300": { + "type": "color", + "hex": "#84a4d6", + "value": "rgba(132, 164, 214, 1)" }, - "gold100": { - "value": "rgba(229,160,55,1)" + "blue200": { + "type": "color", + "hex": "#5784c5", + "value": "rgba(87, 132, 197, 1)" }, - "gold200": { - "value": "rgba(211,158,76,1)" + "blue100": { + "type": "color", + "hex": "#166dfc", + "value": "rgba(22, 109, 252, 1)" }, - "gold300": { - "value": "rgba(222,181,126,1)" + "blue80": { + "type": "color", + "hex": "#1366b3", + "value": "rgba(19, 102, 179, 1)" }, - "gold400": { - "value": "rgba(233,203,164,1)" + "blue60": { + "type": "color", + "hex": "#0f4b84", + "value": "rgba(15, 75, 132, 1)" }, - "gold500": { - "value": "rgba(243,228,205,1)" + "blue40": { + "type": "color", + "hex": "#0a3258", + "value": "rgba(10, 50, 88, 1)" }, - "gold600": { - "value": "rgba(250,240,226,1)" + "gray700": { + "type": "color", + "hex": "#ffffff", + "value": "rgba(255, 255, 255, 1)" }, - "yellow100": { - "value": "rgba(255,236,68,1)" + "gray600": { + "type": "color", + "hex": "#f7f7f7", + "value": "rgba(247, 247, 247, 1)" }, - "yellow600": { - "value": "rgba(253,249,216,1)" + "gray500": { + "type": "color", + "hex": "#f0f0f0", + "value": "rgba(240, 240, 240, 1)" }, - "mustard40": { - "value": "rgba(100,72,1,1)" + "gray400": { + "type": "color", + "hex": "#e9e9e9", + "value": "rgba(233, 233, 233, 1)" }, - "mustard60": { - "value": "rgba(145,104,1,1)" + "gray300": { + "type": "color", + "hex": "#d4d4d4", + "value": "rgba(212, 212, 212, 1)" }, - "mustard80": { - "value": "rgba(193,139,0,1)" + "gray200": { + "type": "color", + "hex": "#aaaaaa", + "value": "rgba(170, 170, 170, 1)" }, - "mustard100": { - "value": "rgba(226,163,31,1)" + "gray100": { + "type": "color", + "hex": "#737373", + "value": "rgba(115, 115, 115, 1)" }, - "mustard200": { - "value": "rgba(217,158,32,1)" + "gray80": { + "type": "color", + "hex": "#595959", + "description": "Previously #66666 updated to aim for AAA contrast on target background", + "value": "rgba(89, 89, 89, 1)" }, - "mustard300": { - "value": "rgba(235,179,71,1)" + "gray60": { + "type": "color", + "hex": "#494949", + "value": "rgba(73, 73, 73, 1)" }, - "mustard400": { - "value": "rgba(247,202,111,1)" + "gray40": { + "type": "color", + "hex": "#2a2a2a", + "value": "rgba(42, 42, 42, 1)" }, - "mustard500": { - "value": "rgba(254,227,156,1)" + "gray20": { + "type": "color", + "hex": "#111111", + "value": "rgba(17, 17, 17, 1)" }, - "mustard600": { - "value": "rgba(251,241,221,1)" + "gray0": { + "type": "color", + "hex": "#000000", + "value": "rgba(0, 0, 0, 1)" } }, "theme": { - "description": "The following are aliases to define intention of color in the app", - "primary": { + "errorContainer": { + "type": "color", + "value": "{red600}", + "valueDark": "{red600}" + }, + "error": { + "type": "color", + "value": "{red200}", + "valueDark": "{red200}" + }, + "warningContainer": { + "type": "color", + "value": "{orange600}", + "valueDark": "{orange600}" + }, + "warning": { + "type": "color", + "value": "{orange200}", + "valueDark": "{orange200}" + }, + "successContainer": { + "type": "color", + "value": "{green600}", + "valueDark": "{green600}" + }, + "success": { + "type": "color", + "value": "{green80}", + "valueDark": "{green80}" + }, + "signalContainer": { + "type": "color", + "value": "{blue600}", + "valueDark": "{blue600}" + }, + "signal": { + "type": "color", + "value": "{blue200}", + "valueDark": "{blue200}" + }, + "onMessage-subtle-hover": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray80}" + }, + "onMessage-subtle": { + "type": "color", + "value": "{gray60}", + "valueDark": "{gray60}" + }, + "onMessage-hover": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray80}" + }, + "onMessage": { + "type": "color", "value": "{gray20}", - "description": "The primary ui color", - "stitches": "$gray20" + "valueDark": "{gray20}" }, - "secondary": { + "portal": { + "type": "color", "value": "{gray700}", - "description": "The color when its not needed to be primary", - "stitches": "$gray700" + "valueDark": "{gray200}" }, - "cta": { - "value": "{blue100}", - "description": "The color for call to action", - "stitches": "$blue100" + "onPortal-subtle-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray40}" }, - "disabled": { - "value": "{alpha25}", - "description": "The color when element is disabled", - "stitches": "$alpha25" + "onPortal-subtle": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray20}" + }, + "onPortal-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray40}" + }, + "onPortal": { + "type": "color", + "value": "{gray20}", + "valueDark": "{gray0}" + }, + "OnSurface-subtle-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray80}" + }, + "OnSurface-subtle": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray60}" + }, + "onSurface-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray80}" + }, + "OnSurface": { + "type": "color", + "value": "{gray20}", + "valueDark": "{gray0}" + }, + "surface-highest": { + "type": "color", + "value": "{gray700}", + "valueDark": "{gray300}" + }, + "surface": { + "type": "color", + "value": "{gray700}", + "valueDark": "{gray500}" + }, + "onBackground-subtle-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray100}" + }, + "onBackground-subtle": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray80}" + }, + "onBackground-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray100}" + }, + "onBackground": { + "type": "color", + "value": "{gray20}", + "valueDark": "{gray0}" + }, + "background-forCards": { + "type": "color", + "value": "{gray600}", + "valueDark": "{gray700}" + }, + "background": { + "type": "color", + "value": "{gray700}", + "valueDark": "{gray700}" }, "accessible": { + "type": "color", "value": "{gray80}", - "description": "The color when element is accessbile against the dark or light background", - "stitches": "$gray80" + "valueDark": "{gray80}", + "description": "Legacy-Token subject to be deprecated use the appropriate -subtle token" + }, + "outline-subtle": { + "type": "color", + "value": "{alpha500}" + }, + "outline": { + "type": "color", + "value": "{alpha400}", + "valueDark": "{alpha400}" }, "subtle": { - "value": "{gray300}", - "description": "The color that is used to have a subtle sepration between elements", - "stitches": "$gray300" + "type": "color", + "value": "{alpha400}", + "valueDark": "{alpha400}" }, "faint": { - "value": "{gray400}", - "description": "The color that is used to have a subtle sepration between elements", - "stitches": "$gray400" + "type": "color", + "value": "{alpha500}", + "valueDark": "{alpha500}", + "description": "Legacy-Token subject to be deprecated use the appropriate -subtle token" }, - "error": { - "value": "{red100}", - "description": "The color for error status", - "stitches": "$red100" + "onDisabled": { + "type": "color", + "value": "{alpha80}", + "valueDark": "{alpha80}" }, - "success": { - "value": "{green100}", - "description": "The color for success status", - "stitches": "$green100" + "disabled": { + "type": "color", + "value": "{alpha500}", + "valueDark": "{alpha500}" }, - "warning": { - "value": "{orange100}", - "description": "The color for warning status", - "stitches": "$orange100" + "onCtaContainer-subtle-hover": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray80}" }, - "signal": { - "value": "{blue200}", - "description": "The color to signal or focus the user attention", - "stitches": "$blue200" + "onCtaContainer-subtle": { + "type": "color", + "value": "{gray60}", + "valueDark": "{gray60}" }, - "onPrimary": { - "value": "{gray700}", - "description": "When elements are applied to Primary", - "stitches": "$gray700" + "onCtaContainer-hover": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray80}" }, - "onSecondary": { + "onCtaContainer": { + "type": "color", "value": "{gray20}", - "description": "When elements are applied to Secondary", - "stitches": "$gray20" + "valueDark": "{gray0}" + }, + "ctaContainer": { + "type": "color", + "value": "{blue600}", + "valueDark": "{blue600}" + }, + "onCta-hover": { + "type": "color", + "value": "{gray600-static}", + "valueDark": "{gray600-static}" }, "onCta": { + "type": "color", "value": "{gray700-static}", - "description": "When elements applied on CTA", - "stitches": "$gray700-static" + "valueDark": "{gray700-static}" }, - "onDisabled": { - "value": "{alpha50}", - "description": "The color when element is on disabled", - "stitches": "$alpha50" + "cta-hover": { + "type": "color", + "value": "{blue80}", + "valueDark": "{blue300}" }, - "onMessage": { - "value": "{gray700-static}", - "description": "Used on signal, warning, error and success colors", - "stitches": "$gray700-static" + "cta": { + "type": "color", + "value": "{blue100}", + "valueDark": "{blue100}" + }, + "onSecondary-subtle-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray100}" + }, + "onSecondary-subtle": { + "type": "color", + "value": "{gray80}", + "valueDark": "{gray80}" + }, + "onSecondary-hover": { + "type": "color", + "value": "{gray100}", + "valueDark": "{gray100}" + }, + "onSecondary": { + "type": "color", + "value": "{gray20}", + "valueDark": "{gray0}" + }, + "secondary-hover": { + "type": "color", + "value": "{gray500}", + "valueDark": "{gray500}" + }, + "secondary": { + "type": "color", + "value": "{gray700}", + "valueDark": "{gray700}" + }, + "onPrimary-subtle-hover": { + "type": "color", + "value": "{gray200}", + "valueDark": "{gray200}" + }, + "onPrimary-subtle": { + "type": "color", + "value": "{gray300}", + "valueDark": "{gray300}" + }, + "onPrimary-hover": { + "type": "color", + "value": "{gray200}", + "valueDark": "{gray200}" + }, + "onPrimary": { + "type": "color", + "value": "{gray700}", + "valueDark": "{gray700}" + }, + "primary-hover": { + "type": "color", + "value": "{gray40}", + "valueDark": "{gray40}" + }, + "primary": { + "type": "color", + "value": "{gray20}", + "valueDark": "{gray0}" } } }, @@ -1242,23 +2179,23 @@ "description": "Shadow 1 - Card shadow" }, "100": { - "value": "0px 1px 2px 0px rgba(102, 102, 102, 0.25)", + "value": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)", "description": "Shadow 2 - Extra small base shadow" }, "200": { - "value": "0px 2px 4px 0px rgba(102, 102, 102, 0.25)", + "value": "0px 2px 4px 0px rgba(0, 0, 0, 0.15)", "description": "Shadows 3 - Small" }, "300": { - "value": "0px 4px 8px 0px rgba(102, 102, 102, 0.25)", + "value": "0px 4px 8px 0px rgba(0, 0, 0, 0.15)", "description": "Shadows 4 - Medium" }, "400": { - "value": "0px 8px 16px 0px rgba(102, 102, 102, 0.25)", + "value": "0px 8px 16px 0px rgba(0, 0, 0, 0.15)", "description": "Shadows 5 - Large" }, "500": { - "value": "0px 16px 32px 0px rgba(102, 102, 102, 0.25)", + "value": "0px 16px 32px 0px rgba(0, 0, 0, 0.15)", "description": "Shadows 6 - Extra large" } },