From 36c708a4de814af00056f018faf82f6152c09ca6 Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Fri, 19 Jan 2024 10:53:15 +0530 Subject: [PATCH] chore(blade): fix rebranded ts checks & tests (#1983) --- packages/blade/jest.native.config.js | 13 +- packages/blade/jest.web.config.js | 19 +- packages/blade/rebranded-components.js | 53 - .../src/components/Amount/Amount.stories.tsx | 2 +- .../Box/BaseBox/types/propsTypes.ts | 4 +- .../Box/__tests__/baseBoxStyles.test.ts | 2 +- .../CardInteractive.native.test.tsx.snap | 18 +- .../CardInteractive.web.test.tsx.snap | 10 +- .../CheckboxGroup.native.test.tsx.snap | 89 +- .../CheckboxGroup.ssr.test.tsx.snap | 62 +- .../CheckboxGroup.web.test.tsx.snap | 112 +- .../Chip/__tests__/Chip.native.test.tsx | 6 +- .../__tests__/Collapsible.native.test.tsx | 12 +- .../__tests__/Collapsible.ssr.test.tsx | 2 +- .../__tests__/Collapsible.web.test.tsx | 16 +- .../Collapsible.native.test.tsx.snap | 24 +- .../Collapsible.ssr.test.tsx.snap | 33 +- .../Collapsible.web.test.tsx.snap | 50 +- .../Icons/useIconProps/useIconProps.test.tsx | 16 +- .../Popover/__tests__/Popover.native.test.tsx | 2 +- .../Popover/__tests__/Popover.web.test.tsx | 2 +- .../components/ProgressBar/ProgressBar.tsx | 4 +- .../RadioGroup.native.test.tsx.snap | 89 +- .../RadioGroup.ssr.test.tsx.snap | 48 +- .../RadioGroup.web.test.tsx.snap | 88 +- .../__tests__/BaseSpinner.native.test.tsx | 28 +- .../__tests__/BaseSpinner.ssr.test.tsx | 7 +- .../__tests__/BaseSpinner.web.test.tsx | 30 +- .../BaseSpinner.native.test.tsx.snap | 452 +- .../BaseSpinner.ssr.test.tsx.snap | 10 +- .../BaseSpinner.web.test.tsx.snap | 304 +- .../Spinner/__tests__/Spinner.native.test.tsx | 2 +- .../Spinner/__tests__/Spinner.ssr.test.tsx | 4 +- .../Spinner/__tests__/Spinner.web.test.tsx | 2 +- .../Spinner.native.test.tsx.snap | 30 +- .../__snapshots__/Spinner.ssr.test.tsx.snap | 16 +- .../__snapshots__/Spinner.web.test.tsx.snap | 30 +- .../Table/__tests__/Table.web.test.tsx | 44 - .../__snapshots__/Table.web.test.tsx.snap | 853 -- .../Code/__tests__/Code.web.test.tsx | 2 +- .../__snapshots__/Code.web.test.tsx.snap | 1 + .../Text/__tests__/Text.native.test.tsx | 2 +- .../Text/__tests__/Text.web.test.tsx | 2 +- .../AccessibilityInteropDemo.native.tsx | 4 +- .../AccessibilityInteropDemo.web.tsx | 8 +- .../createTheme.native.test.tsx.snap | 7172 ++++------------ .../createTheme.web.test.tsx.snap | 7178 ++++------------- .../__tests__/createTheme.native.test.tsx | 8 +- .../theme/__tests__/createTheme.web.test.tsx | 8 +- .../theme/__tests__/overrideTheme.test.ts | 58 +- .../getFocusRingStyles.native.test.ts | 7 +- .../getFocusRingStyles.web.test.ts | 7 +- .../src/utils/lodashButBetter/get.test.ts | 6 + packages/blade/tsconfig.json | 8 +- 54 files changed, 3556 insertions(+), 13503 deletions(-) delete mode 100644 packages/blade/rebranded-components.js diff --git a/packages/blade/jest.native.config.js b/packages/blade/jest.native.config.js index ee53c449a03..64b0abfa7f0 100644 --- a/packages/blade/jest.native.config.js +++ b/packages/blade/jest.native.config.js @@ -1,14 +1,9 @@ -const { rebrandedComponents } = require('./rebranded-components'); - const ignores = ['/node_modules/']; module.exports = { preset: 'react-native', testPathIgnorePatterns: [...ignores, 'web.test', 'ssr.test'], - collectCoverageFrom: [ - ...rebrandedComponents.map((component) => `./src/**/${component}.native.{ts,tsx}`), - '**/Icons/*Icon/*.native.test.{ts,tsx}', - ], + collectCoverageFrom: ['./src/**/*.native.{ts,tsx}'], coverageThreshold: { global: { branches: 75, @@ -18,11 +13,7 @@ module.exports = { }, }, moduleFileExtensions: ['native.ts', 'native.tsx', 'ts', 'tsx', 'js', 'json', 'node'], - testMatch: [ - ...rebrandedComponents.map((component) => `**/${component}.native.test.{ts,tsx}`), - '**/Icons/*Icon/*.native.test.{ts,tsx}', - '**/utils/**/*.test.{ts,tsx}', - ], + testMatch: ['**/*.test.{ts,tsx}'], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', }, diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js index 0e9d4163056..35b701638a4 100644 --- a/packages/blade/jest.web.config.js +++ b/packages/blade/jest.web.config.js @@ -1,5 +1,3 @@ -const { rebrandedComponents } = require('./rebranded-components'); - const ignores = ['/node_modules/']; const baseConfig = { @@ -14,12 +12,7 @@ const baseConfig = { }, snapshotSerializers: ['/jestStyledComponentsSerializer.js'], moduleFileExtensions: ['web.ts', 'web.tsx', 'ts', 'tsx', 'js', 'json', 'node'], - testMatch: [ - ...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`), - '**/Icons/*Icon/*.web.test.{ts,tsx}', - '**/codemods/**/*.test.{ts,tsx}', - '**/utils/**/*.test.{ts,tsx}', - ], + testMatch: ['**/*.test.{ts,tsx}'], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', }, @@ -45,19 +38,15 @@ module.exports = { ...baseConfig, testEnvironment: 'node', testPathIgnorePatterns: [...baseConfig.testPathIgnorePatterns, 'web.test'], - collectCoverageFrom: rebrandedComponents.map( - (component) => `./src/**/${component}.ssr.{ts,tsx}`, - ), - testMatch: rebrandedComponents.map((component) => `**/${component}.ssr.test.{ts,tsx}`), + collectCoverageFrom: ['./src/**/*.ssr.{ts,tsx}'], + testMatch: ['**/*.ssr.test.{ts,tsx}'], }, { displayName: 'CSR Test', ...baseConfig, testEnvironment: 'jsdom', testPathIgnorePatterns: [...baseConfig.testPathIgnorePatterns, 'ssr.test'], - collectCoverageFrom: rebrandedComponents.map( - (component) => `./src/**/${component}.web.{ts,tsx}`, - ), + collectCoverageFrom: ['./src/**/*.web.{ts,tsx}'], }, ], }; diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js deleted file mode 100644 index 41d9372f4c1..00000000000 --- a/packages/blade/rebranded-components.js +++ /dev/null @@ -1,53 +0,0 @@ -const rebrandedComponents = [ - 'ActionList', - 'Alert', - 'Amount', - 'AutoComplete', - 'SelectInput', - 'BaseBox', - 'BaseText', - 'BaseLink', - 'BaseButton', - 'Dropdown', - 'Text', - 'Heading', - 'Display', - 'Code', - 'Button', - 'Link', - 'Popover', - 'Tour', - 'Counter', - 'Chip', - 'ChipGroup', - 'Badge', - 'Indicator', - 'IconButton', - 'Divider', - 'ProgressBar', - 'Card', - 'List', - 'Tabs', - 'Tag', - 'Table', - 'Box', - 'Accordion', - 'Collapsible', - 'Carousel', - 'BottomSheet', - 'Modal', - 'SkipNav', - 'VisuallyHidden', - 'Tooltip', - 'Skeleton', - 'Switch', - 'Radio', - 'Checkbox', - 'BaseInput', - 'TextInput', - 'PasswordInput', - 'OTPInput', - 'TextArea', -]; - -module.exports = { rebrandedComponents }; diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx index ddd4a80f7bf..83243ac3c01 100644 --- a/packages/blade/src/components/Amount/Amount.stories.tsx +++ b/packages/blade/src/components/Amount/Amount.stories.tsx @@ -134,7 +134,7 @@ const AmountTemplate: StoryFn = (args) => { flexDirection="column" > {color} - + ))} diff --git a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts index 5d5a70bec19..04e382d8e40 100644 --- a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts +++ b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts @@ -177,8 +177,8 @@ type BaseBoxVisualProps = MakeObjectResponsive< | BackgroundColorString<'interactive'> | BackgroundColorString<'overlay'> | BackgroundColorString<'popup'> - | 'transparent'; - // | (string & Record); + | 'transparent' + | (string & Record); lineHeight: SpacingValueType; touchAction: CSSObject['touchAction']; userSelect: CSSObject['userSelect']; diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts index cdc2ade50e8..53e57b2041d 100644 --- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts +++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts @@ -13,7 +13,7 @@ describe('getColorValue', () => { it('should return correct background color value', () => { expect( getColorValue('interactive.background.primary.default', bladeLightTheme, 'base'), - ).toMatchInlineSnapshot(`"hsla(230, 100%, 42%, 1)"`); + ).toMatchInlineSnapshot(`"hsla(227, 100%, 59%, 1)"`); expect(getColorValue('red', bladeLightTheme, 'base')).toBe('red'); expect(getColorValue('red', bladeLightTheme, 'm')).toBe(undefined); expect(getColorValue({ base: 'red', s: '#f30' }, bladeLightTheme, 's')).toBe('#f30'); diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap index b92c4812e81..9cb16af2dba 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap @@ -69,12 +69,14 @@ exports[` should render a clickable Card 1`] = ` } > should render a clickable Card 1`] = ` }, [ { - "backgroundColor": "hsla(0, 0%, 100%, 1)", "display": "flex", "flexDirection": "column", "width": "100%", @@ -102,7 +103,6 @@ exports[` should render a clickable Card 1`] = ` ], ] } - surfaceLevel={2} textAlign="left" > should render a interactive Card 1`] = ` "display": "block", }, { - "borderColor": "hsla(218, 89%, 51%, 1)", + "borderColor": "hsla(227, 100%, 59%, 1)", "borderStyle": "solid", "borderWidth": 2, }, @@ -190,12 +190,14 @@ exports[` should render a interactive Card 1`] = ` } > should render a interactive Card 1`] = ` }, [ { - "backgroundColor": "hsla(0, 0%, 100%, 1)", "display": "flex", "flexDirection": "column", "width": "100%", @@ -223,7 +224,6 @@ exports[` should render a interactive Card 1`] = ` ], ] } - surfaceLevel={2} textAlign="left" > should render a linkable Card 1`] = ` } > should render a linkable Card 1`] = ` }, [ { - "backgroundColor": "hsla(0, 0%, 100%, 1)", "display": "flex", "flexDirection": "column", "width": "100%", @@ -345,7 +346,6 @@ exports[` should render a linkable Card 1`] = ` ], ] } - surfaceLevel={2} textAlign="left" > should render a linkable Card with onClick 1`] = ` } > should render a linkable Card with onClick 1`] = ` }, [ { - "backgroundColor": "hsla(0, 0%, 100%, 1)", "display": "flex", "flexDirection": "column", "width": "100%", @@ -467,7 +468,6 @@ exports[` should render a linkable Card with onClick 1`] = ` ], ] } - surfaceLevel={2} textAlign="left" > should render a clickable Card 1`] = ` .c2.c2.c2.c2.c2 { text-align: left; padding: 24px; + background-color: hsla(0,0%,100%,1); border-radius: 4px; box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10); } @@ -23,7 +24,6 @@ exports[` should render a clickable Card 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: hsla(0,0%,100%,1); box-sizing: border-box; } @@ -106,6 +106,7 @@ exports[` should render a linkable Card 1`] = ` .c2.c2.c2.c2.c2 { text-align: left; padding: 24px; + background-color: hsla(0,0%,100%,1); border-radius: 4px; box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10); } @@ -120,7 +121,6 @@ exports[` should render a linkable Card 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: hsla(0,0%,100%,1); box-sizing: border-box; } @@ -205,6 +205,7 @@ exports[` should render a linkable Card with onClick 1`] = ` .c2.c2.c2.c2.c2 { text-align: left; padding: 24px; + background-color: hsla(0,0%,100%,1); border-radius: 4px; box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10); } @@ -219,7 +220,6 @@ exports[` should render a linkable Card with onClick 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: hsla(0,0%,100%,1); box-sizing: border-box; } @@ -304,6 +304,7 @@ exports[` should render an interactive Card 1`] = ` .c2.c2.c2.c2.c2 { text-align: left; padding: 24px; + background-color: hsla(0,0%,100%,1); border-radius: 4px; box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10); } @@ -318,7 +319,6 @@ exports[` should render an interactive Card 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: hsla(0,0%,100%,1); box-sizing: border-box; } @@ -346,7 +346,7 @@ exports[` should render an interactive Card 1`] = ` } .c1.c1.c1.c1.c1 { - box-shadow: 0px 0px 0px 2px hsla(218,89%,51%,1); + box-shadow: 0px 0px 0px 2px hsla(227,100%,59%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap index ad284e906a7..8497d2b2f86 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap @@ -65,7 +65,7 @@ exports[` should render with label 1`] = ` > should render with label 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -129,7 +129,7 @@ exports[` should render with label 1`] = ` > should render with label 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -284,8 +284,8 @@ exports[` should render with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -315,16 +315,17 @@ exports[` should render with label 1`] = ` /> should render with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -481,16 +482,17 @@ exports[` should render with label 1`] = ` /> should render with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -647,16 +649,17 @@ exports[` should render with label 1`] = ` /> should render with label 2`] = ` > should render with label 2`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -819,7 +822,7 @@ exports[` should render with label 2`] = ` > should render with label 2`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -974,8 +977,8 @@ exports[` should render with label 2`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -1005,16 +1008,17 @@ exports[` should render with label 2`] = ` /> should render with label 2`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -1171,16 +1175,17 @@ exports[` should render with label 2`] = ` /> should render with label 2`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -1337,16 +1342,17 @@ exports[` should render with label 2`] = ` /> should render with label 2`] = ` > should render errorText when validationState is set to error 1`] = `"

Select fruits

,Invalid selection

Invalid selection
"`; +exports[` should render errorText when validationState is set to error 1`] = `"

Select fruits

,Invalid selection

Invalid selection
"`; exports[` should render errorText when validationState is set to error 2`] = ` .c9.c9.c9.c9.c9 { @@ -26,8 +26,8 @@ exports[` should render errorText when validationState is set t border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(9,91%,56%,0.09); - border-color: hsla(8,73%,47%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(4,74%,49%,1); } .c10.c10.c10.c10.c10 { @@ -109,7 +109,7 @@ exports[` should render errorText when validationState is set t } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -131,7 +131,7 @@ exports[` should render errorText when validationState is set t } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -148,7 +148,7 @@ exports[` should render errorText when validationState is set t } .c12.c12.c12.c12.c12 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -165,7 +165,7 @@ exports[` should render errorText when validationState is set t } .c17.c17.c17.c17.c17 { - color: hsla(8,73%,47%,1); + color: hsla(4,74%,49%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -225,8 +225,14 @@ exports[` should render errorText when validationState is set t } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); }
should render errorText when validationState is set t clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -353,12 +359,12 @@ exports[` should render errorText when validationState is set t class="c11" data-blade-component="base-box" /> -
Apple -
+

@@ -416,9 +422,9 @@ exports[` should render errorText when validationState is set t clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -434,12 +440,12 @@ exports[` should render errorText when validationState is set t class="c11" data-blade-component="base-box" /> -
Mango -
+

@@ -497,9 +503,9 @@ exports[` should render errorText when validationState is set t clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -515,12 +521,12 @@ exports[` should render errorText when validationState is set t class="c11" data-blade-component="base-box" /> -
Orange -
+

@@ -548,18 +554,18 @@ exports[` should render errorText when validationState is set t @@ -569,7 +575,7 @@ exports[` should render errorText when validationState is set t /> Invalid selection diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap index e843899726d..b7fffc701a2 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap @@ -24,8 +24,8 @@ exports[` should render with help text 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); } .c10.c10.c10.c10.c10 { @@ -103,7 +103,7 @@ exports[` should render with help text 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -125,7 +125,7 @@ exports[` should render with help text 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -142,7 +142,7 @@ exports[` should render with help text 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -159,7 +159,7 @@ exports[` should render with help text 1`] = ` } .c16.c16.c16.c16.c16 { - color: hsla(216,16%,60%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -219,13 +219,19 @@ exports[` should render with help text 1`] = ` } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c8.c8.c8.c8.c8:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -335,9 +341,9 @@ exports[` should render with help text 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -353,12 +359,12 @@ exports[` should render with help text 1`] = ` class="c11" data-blade-component="base-box" /> -
Apple -
+

@@ -415,9 +421,9 @@ exports[` should render with help text 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -433,12 +439,12 @@ exports[` should render with help text 1`] = ` class="c11" data-blade-component="base-box" /> -
Mango -
+

@@ -495,9 +501,9 @@ exports[` should render with help text 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -513,12 +519,12 @@ exports[` should render with help text 1`] = ` class="c11" data-blade-component="base-box" /> -
Orange -
+

@@ -536,7 +542,7 @@ exports[` should render with help text 1`] = ` > Select one @@ -572,8 +578,8 @@ exports[` should render with label 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); } .c10.c10.c10.c10.c10 { @@ -633,7 +639,7 @@ exports[` should render with label 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -655,7 +661,7 @@ exports[` should render with label 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -672,7 +678,7 @@ exports[` should render with label 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -732,13 +738,19 @@ exports[` should render with label 1`] = ` } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c8.c8.c8.c8.c8:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -848,9 +860,9 @@ exports[` should render with label 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -866,12 +878,12 @@ exports[` should render with label 1`] = ` class="c11" data-blade-component="base-box" /> -
Apple -
+

@@ -928,9 +940,9 @@ exports[` should render with label 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -946,12 +958,12 @@ exports[` should render with label 1`] = ` class="c11" data-blade-component="base-box" /> -
Mango -
+

@@ -1008,9 +1020,9 @@ exports[` should render with label 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -1026,12 +1038,12 @@ exports[` should render with label 1`] = ` class="c11" data-blade-component="base-box" /> -
Orange -
+

diff --git a/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx b/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx index 427b28ddb6b..3e593b7a7f4 100644 --- a/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx +++ b/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx @@ -38,13 +38,13 @@ describe('', () => { expect(getByText('Mango')).toBeDefined(); }); - it('should render chip with intent', () => { + it('should render chip with color', () => { const { getByText } = renderWithTheme( - + Yes - + No , diff --git a/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx b/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx index 902017d43ff..6347df4d887 100644 --- a/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx +++ b/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx @@ -26,7 +26,7 @@ describe('', () => { Actual amount - + , @@ -42,7 +42,7 @@ describe('', () => { Actual amount - + , @@ -61,7 +61,7 @@ describe('', () => { {bodyText} - + , @@ -101,7 +101,7 @@ describe('', () => { {bodyText} - + @@ -140,7 +140,7 @@ describe('', () => { Actual amount - + , @@ -158,7 +158,7 @@ describe('', () => { Actual amount - + , diff --git a/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx b/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx index ce14a0035b7..40daedf21bb 100644 --- a/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx +++ b/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx @@ -21,7 +21,7 @@ describe('', () => { alignItems="baseline" > Actual amount - + ', () => { Actual amount - + , @@ -36,7 +36,7 @@ describe('', () => { Actual amount - + , @@ -55,7 +55,7 @@ describe('', () => { {bodyText} - + , @@ -95,7 +95,7 @@ describe('', () => { {bodyText} - + @@ -136,7 +136,7 @@ describe('', () => { Actual amount - + , @@ -154,7 +154,7 @@ describe('', () => { Actual amount - + , @@ -172,7 +172,7 @@ describe('', () => { Actual amount - + , @@ -192,7 +192,7 @@ describe('', () => { Actual amount - + , diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap index bbaa042e1a9..e0af5b7bb91 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap @@ -310,7 +310,7 @@ exports[` should render with CollapsibleButton 1`] = ` > should render with CollapsibleButton 1`] = ` style={ [ { - "color": "hsla(212, 39%, 16%, 1)", + "color": "hsla(150, 100%, 27%, 1)", "fontFamily": "Inter", "fontSize": 10, "fontStyle": "normal", @@ -374,7 +374,7 @@ exports[` should render with CollapsibleButton 1`] = ` > should render with CollapsibleButton 1`] = ` style={ [ { - "color": "hsla(212, 39%, 16%, 1)", + "color": "hsla(150, 100%, 27%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -408,7 +408,7 @@ exports[` should render with CollapsibleButton 1`] = ` should render with CollapsibleButton 1`] = ` style={ [ { - "color": "hsla(212, 39%, 16%, 1)", + "color": "hsla(150, 100%, 27%, 1)", "fontFamily": "Inter", "fontSize": 10, "fontStyle": "normal", @@ -804,7 +804,7 @@ exports[` should render with CollapsibleLink 1`] = ` > should render with CollapsibleLink 1`] = ` style={ [ { - "color": "hsla(212, 39%, 16%, 1)", + "color": "hsla(150, 100%, 27%, 1)", "fontFamily": "Inter", "fontSize": 10, "fontStyle": "normal", @@ -868,7 +868,7 @@ exports[` should render with CollapsibleLink 1`] = ` > should render with CollapsibleLink 1`] = ` style={ [ { - "color": "hsla(212, 39%, 16%, 1)", + "color": "hsla(150, 100%, 27%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -902,7 +902,7 @@ exports[` should render with CollapsibleLink 1`] = ` should render with CollapsibleLink 1`] = ` style={ [ { - "color": "hsla(212, 39%, 16%, 1)", + "color": "hsla(150, 100%, 27%, 1)", "fontFamily": "Inter", "fontSize": 10, "fontStyle": "normal", diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap index 66ba36e6d9f..ab18cb7f6a2 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; +exports[` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; exports[` should render Collapsible on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -194,7 +194,7 @@ exports[` should render Collapsible on server 2`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(212,39%,16%,1); + color: hsla(150,100%,27%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.625rem; font-weight: 400; @@ -212,7 +212,24 @@ exports[` should render Collapsible on server 2`] = ` } .c13.c13.c13.c13.c13 { - color: hsla(212,39%,16%,1); + color: hsla(150,100%,27%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c14.c14.c14.c14.c14 { + color: hsla(150,100%,27%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.625rem; font-weight: 400; @@ -229,7 +246,7 @@ exports[` should render Collapsible on server 2`] = ` margin-left: 2px; } -.c14.c14.c14.c14.c14 { +.c15.c15.c15.c15.c15 { color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; @@ -356,7 +373,7 @@ exports[` should render Collapsible on server 2`] = ` ₹ 1,000 @@ -364,7 +381,7 @@ exports[` should render Collapsible on server 2`] = ` . 00 @@ -377,7 +394,7 @@ exports[` should render Collapsible on server 2`] = ` data-blade-component="box" >

Razorpay Platform Fees @@ -394,7 +411,7 @@ exports[` should render Collapsible on server 2`] = ` data-blade-component="box" >

GST diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap index a4e5078536a..b6753cea86d 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap @@ -187,7 +187,7 @@ exports[` should render with CollapsibleButton 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(212,39%,16%,1); + color: hsla(150,100%,27%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.625rem; font-weight: 400; @@ -205,7 +205,24 @@ exports[` should render with CollapsibleButton 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(212,39%,16%,1); + color: hsla(150,100%,27%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c13.c13.c13.c13.c13 { + color: hsla(150,100%,27%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.625rem; font-weight: 400; @@ -312,14 +329,14 @@ exports[` should render with CollapsibleButton 1`] = ` ₹ 1,000 . 00 @@ -463,7 +480,7 @@ exports[` should render with CollapsibleLink 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(212,39%,16%,1); + color: hsla(150,100%,27%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.625rem; font-weight: 400; @@ -481,7 +498,24 @@ exports[` should render with CollapsibleLink 1`] = ` } .c13.c13.c13.c13.c13 { - color: hsla(212,39%,16%,1); + color: hsla(150,100%,27%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c14.c14.c14.c14.c14 { + color: hsla(150,100%,27%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.625rem; font-weight: 400; @@ -676,14 +710,14 @@ exports[` should render with CollapsibleLink 1`] = ` ₹ 1,000 . 00 diff --git a/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx b/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx index 4038181c3a9..cef5db3ea97 100644 --- a/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx +++ b/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx @@ -5,12 +5,12 @@ import themeWrapper from '~utils/testing/themeWrapper'; describe('useIconProps', () => { it('should return a xsmall icon with the correct color', () => { const { result } = renderHook( - () => useIconProps({ size: 'xsmall', color: 'action.icon.secondary.default' }), + () => useIconProps({ size: 'xsmall', color: 'interactive.icon.primary.normal' }), { wrapper: themeWrapper }, ); expect(result.current.height).toEqual('8px'); expect(result.current.width).toEqual('8px'); - expect(result.current.iconColor).toEqual('hsla(218, 89%, 51%, 1)'); + expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(227, 71%, 51%, 1)"`); }); it('should return a small icon with the correct color', () => { @@ -20,17 +20,17 @@ describe('useIconProps', () => { ); expect(result.current.height).toEqual('12px'); expect(result.current.width).toEqual('12px'); - expect(result.current.iconColor).toEqual('hsla(8, 73%, 47%, 1)'); + expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(4, 93%, 94%, 1)"`); }); it('should return a medium icon with the correct color', () => { const { result } = renderHook( - () => useIconProps({ size: 'medium', color: 'action.icon.primary.default' }), + () => useIconProps({ size: 'medium', color: 'interactive.icon.staticWhite.normal' }), { wrapper: themeWrapper }, ); expect(result.current.height).toEqual('16px'); expect(result.current.width).toEqual('16px'); - expect(result.current.iconColor).toEqual('hsla(0, 0%, 100%, 1)'); + expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(0, 0%, 100%, 1)"`); }); it('should return a large icon with the correct color', () => { @@ -40,7 +40,7 @@ describe('useIconProps', () => { ); expect(result.current.height).toEqual('20px'); expect(result.current.width).toEqual('20px'); - expect(result.current.iconColor).toEqual('hsla(193, 100%, 35%, 1)'); + expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(200, 88%, 90%, 1)"`); }); it('should return a xlarge icon with the correct color', () => { @@ -50,7 +50,7 @@ describe('useIconProps', () => { ); expect(result.current.height).toEqual('24px'); expect(result.current.width).toEqual('24px'); - expect(result.current.iconColor).toEqual('hsla(216, 27%, 36%, 1)'); + expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(211, 24%, 65%, 1)"`); }); it('should return a 2xlarge icon with the correct color', () => { @@ -60,7 +60,7 @@ describe('useIconProps', () => { ); expect(result.current.height).toEqual('32px'); expect(result.current.width).toEqual('32px'); - expect(result.current.iconColor).toEqual('hsla(216, 27%, 36%, 1)'); + expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(211, 24%, 65%, 1)"`); }); it('should set fill property to currentColor when color is set to currentColor', () => { diff --git a/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx b/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx index f440741fd15..9e424c78132 100644 --- a/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx +++ b/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx @@ -46,7 +46,7 @@ describe('', () => { const { toJSON, getByRole } = renderWithTheme( } + titleLeading={} content={{popoverContent}} footer={Footer} > diff --git a/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx b/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx index f42f4a966ae..963e1168319 100644 --- a/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx +++ b/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx @@ -257,7 +257,7 @@ describe('', () => { const { getByTestId, queryByRole } = renderWithTheme( - + , ); diff --git a/packages/blade/src/components/ProgressBar/ProgressBar.tsx b/packages/blade/src/components/ProgressBar/ProgressBar.tsx index f44073802e4..30f9f9253d5 100644 --- a/packages/blade/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/blade/src/components/ProgressBar/ProgressBar.tsx @@ -7,6 +7,7 @@ import { getStyledProps } from '~components/Box/styledProps'; import type { StyledPropsBlade } from '~components/Box/styledProps'; import { useId } from '~utils/useId'; import { useTheme } from '~components/BladeProvider'; +import type { BaseBoxProps } from '~components/Box/BaseBox'; import BaseBox from '~components/Box/BaseBox'; import type { FeedbackColors } from '~tokens/theme/theme'; import { size } from '~tokens/global'; @@ -123,7 +124,8 @@ const ProgressBar = ({ } } - const unfilledBackgroundColor = theme.colors.feedback.background.neutral.subtle; + const unfilledBackgroundColor = theme.colors.feedback.background.neutral + .subtle as BaseBoxProps['backgroundColor']; const filledBackgroundColor = color ? theme.colors.feedback.background[color].intense : theme.colors.surface.background.primary.intense; diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap index 72d717a8226..95694bda28d 100644 --- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap +++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap @@ -66,7 +66,7 @@ exports[` should render with help text 1`] = ` > should render with help text 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -130,7 +130,7 @@ exports[` should render with help text 1`] = ` > should render with help text 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -289,8 +289,8 @@ exports[` should render with help text 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -319,16 +319,17 @@ exports[` should render with help text 1`] = ` /> should render with help text 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -488,16 +489,17 @@ exports[` should render with help text 1`] = ` /> should render with help text 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -657,16 +659,17 @@ exports[` should render with help text 1`] = ` /> should render with help text 1`] = ` > should render with label 1`] = ` > should render with label 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -890,7 +894,7 @@ exports[` should render with label 1`] = ` > should render with label 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1047,8 +1051,8 @@ exports[` should render with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -1077,16 +1081,17 @@ exports[` should render with label 1`] = ` /> should render with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -1246,16 +1251,17 @@ exports[` should render with label 1`] = ` /> should render with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -1415,16 +1421,17 @@ exports[` should render with label 1`] = ` /> should render with help text 1`] = `"

Select fruit

,Select one

Select one
"`; +exports[` should render with help text 1`] = `"

Select fruit

,Select one

Select one
"`; exports[` should render with help text 2`] = ` .c9.c9.c9.c9.c9 { @@ -23,8 +23,8 @@ exports[` should render with help text 2`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -100,7 +100,7 @@ exports[` should render with help text 2`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -122,7 +122,7 @@ exports[` should render with help text 2`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -139,7 +139,7 @@ exports[` should render with help text 2`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -156,7 +156,7 @@ exports[` should render with help text 2`] = ` } .c14.c14.c14.c14.c14 { - color: hsla(216,16%,60%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -207,13 +207,19 @@ exports[` should render with help text 2`] = ` } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c8.c8.c8.c8.c8:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -314,12 +320,12 @@ exports[` should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Apple -
+

@@ -365,12 +371,12 @@ exports[` should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Mango -
+

@@ -416,12 +422,12 @@ exports[` should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Orange -
+

@@ -439,7 +445,7 @@ exports[` should render with help text 2`] = ` > Select one diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap index 023e51c8000..6acc521d6ef 100644 --- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap +++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap @@ -21,8 +21,8 @@ exports[` should render with help text 1`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -98,7 +98,7 @@ exports[` should render with help text 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -120,7 +120,7 @@ exports[` should render with help text 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -137,7 +137,7 @@ exports[` should render with help text 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -154,7 +154,7 @@ exports[` should render with help text 1`] = ` } .c14.c14.c14.c14.c14 { - color: hsla(216,16%,60%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -205,13 +205,19 @@ exports[` should render with help text 1`] = ` } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c8.c8.c8.c8.c8:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -310,12 +316,12 @@ exports[` should render with help text 1`] = ` class="c10" data-blade-component="base-box" /> -
Apple -
+

@@ -361,12 +367,12 @@ exports[` should render with help text 1`] = ` class="c10" data-blade-component="base-box" /> -
Mango -
+

@@ -412,12 +418,12 @@ exports[` should render with help text 1`] = ` class="c10" data-blade-component="base-box" /> -
Orange -
+

@@ -435,7 +441,7 @@ exports[` should render with help text 1`] = ` > Select one @@ -468,8 +474,8 @@ exports[` should render with label 1`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -541,7 +547,7 @@ exports[` should render with label 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -563,7 +569,7 @@ exports[` should render with label 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -580,7 +586,7 @@ exports[` should render with label 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -631,13 +637,19 @@ exports[` should render with label 1`] = ` } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c8.c8.c8.c8.c8:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -734,12 +746,12 @@ exports[` should render with label 1`] = ` class="c10" data-blade-component="base-box" /> -
Apple -
+

@@ -785,12 +797,12 @@ exports[` should render with label 1`] = ` class="c10" data-blade-component="base-box" /> -
Mango -
+

@@ -836,12 +848,12 @@ exports[` should render with label 1`] = ` class="c10" data-blade-component="base-box" /> -
Orange -
+

diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx index dcd76e27c4a..c456aabeca7 100644 --- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx +++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx @@ -3,7 +3,7 @@ import { BaseSpinner } from '../BaseSpinner'; import renderWithTheme from '~utils/testing/renderWithTheme.native'; const colors: BaseSpinnerProps['color'][] = [ - 'default', + 'primary', 'white', 'positive', 'negative', @@ -33,38 +33,16 @@ describe('', () => { expect(toJSON()).toMatchSnapshot(); }); - it('should render low contrast BaseSpinner', () => { - const { toJSON } = renderWithTheme(); - expect(toJSON()).toMatchSnapshot(); - }); - - it('should render high contrast BaseSpinner', () => { - const { toJSON } = renderWithTheme( - , - ); - expect(toJSON()).toMatchSnapshot(); - }); - it('should render low contrast BaseSpinner with right label', () => { const { toJSON } = renderWithTheme( - , + , ); expect(toJSON()).toMatchSnapshot(); }); it('should render high contrast BaseSpinner with bottom label', () => { const { toJSON } = renderWithTheme( - , + , ); expect(toJSON()).toMatchSnapshot(); }); diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx index ab9cde6dbb5..9ac2bf1fabc 100644 --- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx +++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx @@ -4,12 +4,7 @@ import renderWithSSR from '~utils/testing/renderWithSSR.web'; describe('', () => { it('should render low contrast BaseSpinner with right label', () => { const { container, getByText } = renderWithSSR( - , + , ); expect(getByText('Loading')).toBeInTheDocument(); expect(container).toMatchSnapshot(); diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx index 8793361b7f6..f6c66a1662a 100644 --- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx +++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx @@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web'; import assertAccessible from '~utils/testing/assertAccessible.web'; const colors: BaseSpinnerProps['color'][] = [ - 'default', + 'primary', 'white', 'positive', 'negative', @@ -40,40 +40,16 @@ describe('', () => { expect(container).toMatchSnapshot(); }); - it('should render low contrast BaseSpinner', () => { - const { container } = renderWithTheme( - , - ); - expect(container).toMatchSnapshot(); - }); - - it('should render high contrast BaseSpinner', () => { - const { container } = renderWithTheme( - , - ); - expect(container).toMatchSnapshot(); - }); - it('should render low contrast BaseSpinner with right label', () => { const { container } = renderWithTheme( - , + , ); expect(container).toMatchSnapshot(); }); it('should render high contrast BaseSpinner with bottom label', () => { const { container } = renderWithTheme( - , + , ); expect(container).toMatchSnapshot(); }); diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap index f4297b393a6..e35bb753d96 100644 --- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap +++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap @@ -99,7 +99,7 @@ exports[` should render BaseSpinner with default props 1`] = ` > should render BaseSpinner with default props 1`] = ` /> should render BaseSpinner with default props 1`] = ` /> - - - - - - - -`; - -exports[` should render default color BaseSpinner 1`] = ` - - - - - - - - - - - - - - - - - -`; - -exports[` should render high contrast BaseSpinner 1`] = ` - - - - - - - - - - should render high contrast BaseSpinner with bottom lab > should render high contrast BaseSpinner with bottom lab /> should render high contrast BaseSpinner with bottom lab /> should render high contrast BaseSpinner with bottom lab > should render high contrast BaseSpinner with bottom lab style={ [ { - "color": "hsla(216, 19%, 89%, 1)", + "color": "hsla(211, 22%, 56%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -685,7 +415,7 @@ exports[` should render information color BaseSpinner 1`] = ` > should render information color BaseSpinner 1`] = ` /> should render information color BaseSpinner 1`] = ` /> should render large size BaseSpinner 1`] = ` > should render large size BaseSpinner 1`] = ` /> should render large size BaseSpinner 1`] = ` /> should render large size BaseSpinner 1`] = ` `; -exports[` should render low contrast BaseSpinner 1`] = ` +exports[` should render low contrast BaseSpinner with right label 1`] = ` should render low contrast BaseSpinner 1`] = ` > should render low contrast BaseSpinner 1`] = ` /> should render low contrast BaseSpinner 1`] = ` /> should render low contrast BaseSpinner 1`] = ` + + + Loading + + `; -exports[` should render low contrast BaseSpinner with right label 1`] = ` +exports[` should render medium size BaseSpinner 1`] = ` should render low contrast BaseSpinner with right label > should render low contrast BaseSpinner with right label /> should render low contrast BaseSpinner with right label /> should render low contrast BaseSpinner with right label - - - Loading - - `; -exports[` should render medium size BaseSpinner 1`] = ` +exports[` should render negative color BaseSpinner 1`] = ` should render medium size BaseSpinner 1`] = ` > should render medium size BaseSpinner 1`] = ` /> should render medium size BaseSpinner 1`] = ` /> should render medium size BaseSpinner 1`] = ` `; -exports[` should render negative color BaseSpinner 1`] = ` +exports[` should render neutral color BaseSpinner 1`] = ` should render negative color BaseSpinner 1`] = ` > should render negative color BaseSpinner 1`] = ` /> should render negative color BaseSpinner 1`] = ` /> should render negative color BaseSpinner 1`] = ` `; -exports[` should render neutral color BaseSpinner 1`] = ` +exports[` should render notice color BaseSpinner 1`] = ` should render neutral color BaseSpinner 1`] = ` > should render neutral color BaseSpinner 1`] = ` /> should render neutral color BaseSpinner 1`] = ` /> should render neutral color BaseSpinner 1`] = ` `; -exports[` should render notice color BaseSpinner 1`] = ` +exports[` should render positive color BaseSpinner 1`] = ` should render notice color BaseSpinner 1`] = ` > should render notice color BaseSpinner 1`] = ` /> should render notice color BaseSpinner 1`] = ` /> should render notice color BaseSpinner 1`] = ` `; -exports[` should render positive color BaseSpinner 1`] = ` +exports[` should render primary color BaseSpinner 1`] = ` should render positive color BaseSpinner 1`] = ` > should render positive color BaseSpinner 1`] = ` /> should render positive color BaseSpinner 1`] = ` /> should render xlarge size BaseSpinner 1`] = ` > should render xlarge size BaseSpinner 1`] = ` /> should render xlarge size BaseSpinner 1`] = ` /> should render low contrast BaseSpinner with right label 1`] = `"

Loading

"`; +exports[` should render low contrast BaseSpinner with right label 1`] = `"

Loading

"`; exports[` should render low contrast BaseSpinner with right label 2`] = ` .c0.c0.c0.c0.c0 { @@ -36,7 +36,7 @@ exports[` should render low contrast BaseSpinner with right label } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 400; @@ -81,18 +81,18 @@ exports[` should render low contrast BaseSpinner with right label diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap index a0f1b3a135d..a96f98103b5 100644 --- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap +++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap @@ -55,168 +55,18 @@ exports[` should render BaseSpinner with default props 1`] = ` - - - - - -`; - -exports[` should render default color BaseSpinner 1`] = ` -.c0.c0.c0.c0.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1.c1.c1.c1.c1 { - padding: 1px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; - animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; -} - -
-
-
-
- -
-
-
-
-`; - -exports[` should render high contrast BaseSpinner 1`] = ` -.c0.c0.c0.c0.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1.c1.c1.c1.c1 { - padding: 1px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; - animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; -} - -
-
-
-
-
@@ -259,7 +109,7 @@ exports[` should render high contrast BaseSpinner with bottom lab } .c3.c3.c3.c3.c3 { - color: hsla(216,19%,89%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 400; @@ -302,18 +152,18 @@ exports[` should render high contrast BaseSpinner with bottom lab
@@ -388,18 +238,18 @@ exports[` should render information color BaseSpinner 1`] = `
@@ -463,18 +313,18 @@ exports[` should render large size BaseSpinner 1`] = `
@@ -483,7 +333,7 @@ exports[` should render large size BaseSpinner 1`] = ` `; -exports[` should render low contrast BaseSpinner 1`] = ` +exports[` should render low contrast BaseSpinner with right label 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -498,6 +348,11 @@ exports[` should render low contrast BaseSpinner 1`] = ` align-items: center; } +.c2.c2.c2.c2.c2 { + margin-top: 0px; + margin-left: 8px; +} + .c1.c1.c1.c1.c1 { padding: 1px; width: -webkit-max-content; @@ -511,6 +366,23 @@ exports[` should render low contrast BaseSpinner 1`] = ` animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; } +.c3.c3.c3.c3.c3 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.75rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.125rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} +
should render low contrast BaseSpinner 1`] = `
+
+

+ Loading +

+
`; -exports[` should render low contrast BaseSpinner with right label 1`] = ` +exports[` should render medium size BaseSpinner 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -573,11 +456,6 @@ exports[` should render low contrast BaseSpinner with right label align-items: center; } -.c2.c2.c2.c2.c2 { - margin-top: 0px; - margin-left: 8px; -} - .c1.c1.c1.c1.c1 { padding: 1px; width: -webkit-max-content; @@ -591,23 +469,6 @@ exports[` should render low contrast BaseSpinner with right label animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; } -.c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); - font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; - font-size: 0.75rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.125rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} -
should render low contrast BaseSpinner with right label
-
-

- Loading -

-
`; -exports[` should render medium size BaseSpinner 1`] = ` +exports[` should render negative color BaseSpinner 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -721,18 +571,18 @@ exports[` should render medium size BaseSpinner 1`] = ` @@ -741,7 +591,7 @@ exports[` should render medium size BaseSpinner 1`] = ` `; -exports[` should render negative color BaseSpinner 1`] = ` +exports[` should render neutral color BaseSpinner 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -796,18 +646,18 @@ exports[` should render negative color BaseSpinner 1`] = ` @@ -816,7 +666,7 @@ exports[` should render negative color BaseSpinner 1`] = ` `; -exports[` should render neutral color BaseSpinner 1`] = ` +exports[` should render notice color BaseSpinner 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -871,18 +721,18 @@ exports[` should render neutral color BaseSpinner 1`] = ` @@ -891,7 +741,7 @@ exports[` should render neutral color BaseSpinner 1`] = ` `; -exports[` should render notice color BaseSpinner 1`] = ` +exports[` should render positive color BaseSpinner 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -946,18 +796,18 @@ exports[` should render notice color BaseSpinner 1`] = ` @@ -966,7 +816,7 @@ exports[` should render notice color BaseSpinner 1`] = ` `; -exports[` should render positive color BaseSpinner 1`] = ` +exports[` should render primary color BaseSpinner 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -1021,18 +871,18 @@ exports[` should render positive color BaseSpinner 1`] = ` @@ -1171,18 +1021,18 @@ exports[` should render xlarge size BaseSpinner 1`] = ` diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx index ce6a21e96ea..45ecb6a6762 100644 --- a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx +++ b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx @@ -23,7 +23,7 @@ describe('', () => { }); it('should render default color Spinner', () => { - const { toJSON } = renderWithTheme(); + const { toJSON } = renderWithTheme(); expect(toJSON()).toMatchSnapshot(); }); diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx index a73392614b8..b7a40033a69 100644 --- a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx +++ b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx @@ -2,9 +2,9 @@ import { Spinner } from '../Spinner'; import renderWithSSR from '~utils/testing/renderWithSSR.web'; describe('', () => { - it('should render default color Spinner', () => { + it('should render primary color Spinner', () => { const { container, getByText } = renderWithSSR( - , + , ); expect(getByText('Loading')).toBeInTheDocument(); expect(container).toMatchSnapshot(); diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx index 1bacf0bb8b5..664448063b7 100644 --- a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx +++ b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx @@ -23,7 +23,7 @@ describe('', () => { }); it('should render default color Spinner', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); expect(container).toMatchSnapshot(); }); diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap index b4f66506784..cfe1374eeb5 100644 --- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap +++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap @@ -99,7 +99,7 @@ exports[` should render Spinner with default props 1`] = ` > should render Spinner with default props 1`] = ` /> should render Spinner with default props 1`] = ` /> should render default color Spinner 1`] = ` > should render default color Spinner 1`] = ` /> should render default color Spinner 1`] = ` /> should render large size Spinner 1`] = ` > should render large size Spinner 1`] = ` /> should render large size Spinner 1`] = ` /> should render medium size Spinner 1`] = ` > should render medium size Spinner 1`] = ` /> should render medium size Spinner 1`] = ` /> should render xlarge size Spinner 1`] = ` > should render xlarge size Spinner 1`] = ` /> should render xlarge size Spinner 1`] = ` /> should render default color Spinner 1`] = `"

Loading

"`; +exports[` should render primary color Spinner 1`] = `"

Loading

"`; -exports[` should render default color Spinner 2`] = ` +exports[` should render primary color Spinner 2`] = ` .c0.c0.c0.c0.c0 { display: -webkit-box; display: -webkit-flex; @@ -36,7 +36,7 @@ exports[` should render default color Spinner 2`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 400; @@ -81,18 +81,18 @@ exports[` should render default color Spinner 2`] = ` @@ -112,7 +112,7 @@ exports[` should render default color Spinner 2`] = ` `; -exports[` should render white color Spinner 1`] = `"

Loading

"`; +exports[` should render white color Spinner 1`] = `"

Loading

"`; exports[` should render white color Spinner 2`] = ` .c0.c0.c0.c0.c0 { @@ -148,7 +148,7 @@ exports[` should render white color Spinner 2`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 400; diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap index 5d7c7b697f3..5dc8619ccf8 100644 --- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap +++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap @@ -55,18 +55,18 @@ exports[` should render Spinner with default props 1`] = ` @@ -130,18 +130,18 @@ exports[` should render default color Spinner 1`] = ` @@ -205,18 +205,18 @@ exports[` should render large size Spinner 1`] = ` @@ -280,18 +280,18 @@ exports[` should render medium size Spinner 1`] = ` @@ -430,18 +430,18 @@ exports[` should render xlarge size Spinner 1`] = ` diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index de92f058182..2d6e61a7f43 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -387,50 +387,6 @@ describe('', () => { expect(container).toMatchSnapshot(); }); - it('should render table with backgroundColor', () => { - const { container } = renderWithTheme( -
- {(tableData) => ( - <> - - - Payment ID - Amount - Status - Type - Method - Name - - - - {tableData.map((tableItem, index) => ( - - {tableItem.paymentId} - {tableItem.amount} - {tableItem.status} - {tableItem.type} - {tableItem.method} - {tableItem.name} - - ))} - - - - - - - - - - - - - - - - - - - )} -
, - ); - expect(container).toMatchSnapshot(); - }); - it('should render table with isLoading', () => { const { container } = renderWithTheme( diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 2bf2a6eb92a..4e32a731b44 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -1427,859 +1427,6 @@ exports[`
should render table 1`] = ` `; -exports[`
should render table with backgroundColor 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; -} - -.c7.c7.c7.c7.c7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; -} - -.c8.c8.c8.c8.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - pointer-events: auto; -} - -.c3.c3.c3.c3.c3 { - color: hsla(212,39%,16%,1); - font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; - font-size: 0.875rem; - font-weight: 500; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c10.c10.c10.c10.c10 { - color: hsla(212,39%,16%,1); - font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; - font-size: 0.875rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 { - border: none; - -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); -} - -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected .cell-wrapper-base, -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { - height: 100%; - background-color: hsla(0,0%,100%,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 > div:first-child { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 70ms; - transition-duration: 70ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { - -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-top: 16px; - padding-bottom: 16px; - padding-left: 12px; - padding-right: 12px; - height: 100%; - border-bottom-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 { - background-color: transparent; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5:focus { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 70ms; - transition-duration: 70ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { - background-color: hsla(211,20%,52%,0.09); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child th { - border-bottom: none; -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div { - background-color: hsla(211,20%,52%,0.09); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - height: 100%; - padding-top: 16px; - padding-bottom: 16px; - padding-left: 12px; - padding-right: 12px; -} - -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { - border-top: none; -} - -.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; - cursor: auto; -} - -.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 > div { - background-color: hsla(211,20%,52%,0.09); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding-top: 16px; - padding-bottom: 16px; - padding-left: 12px; - padding-right: 12px; -} - -.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 70ms; - transition-duration: 70ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -@media screen and (min-width:320px) { - .c8.c8.c8.c8.c8 { - pointer-events: auto; - } -} - -@media screen and (min-width:480px) { - .c8.c8.c8.c8.c8 { - pointer-events: auto; - } -} - -@media screen and (min-width:768px) { - .c8.c8.c8.c8.c8 { - pointer-events: auto; - } -} - -@media screen and (min-width:1024px) { - .c8.c8.c8.c8.c8 { - pointer-events: auto; - } -} - -@media screen and (min-width:1200px) { - .c8.c8.c8.c8.c8 { - pointer-events: auto; - } -} - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Payment ID -

-
- 		-
-

- Amount -

-
- 		-
-

- Status -

-
- 		-
-

- Type -

-
- 		-
-

- Method -

-
- 		-
-

- Name -

-
-
-
-
-
-

- rzp01 -

-
-
-
- 		-
-
-
- 100 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- Netbanking -

-
-
-
- 		-
-
-
-

- John Doe -

-
-
-
-
-
-
-
-

- rzp02 -

-
-
-
- 		-
-
-
- 240 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- UPI -

-
-
-
- 		-
-
-
-

- Jane Doe -

-
-
-
-
-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
-
- - -`; - exports[` should render table with comfortable rowDensity 1`] = ` .c0.c0.c0.c0.c0 { -webkit-flex: 1; diff --git a/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx b/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx index 5ff95c7e7c5..22479296c22 100644 --- a/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx +++ b/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx @@ -19,7 +19,7 @@ describe('', () => { it('should render Code with color', () => { const { container } = renderWithTheme( - + TEST_TOKEN , ); diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap index 40127e1aa2e..4aea4de14f1 100644 --- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap +++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap @@ -2,6 +2,7 @@ exports[` should render Code with color 1`] = ` .c1.c1.c1.c1.c1 { + color: hsla(227,100%,59%,0.18); font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace; font-size: 0.625rem; font-weight: 400; diff --git a/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx b/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx index b0c65e19a50..b8d44c5631a 100644 --- a/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx +++ b/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx @@ -91,11 +91,11 @@ describe('', () => { const displayText = 'Displaying some text'; expect(() => renderWithTheme( - // @ts-expect-error testing failure case when size='medium' is passed with variant='caption' {displayText} diff --git a/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx b/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx index f590a301806..cefd15728bb 100644 --- a/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx +++ b/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx @@ -85,11 +85,11 @@ describe('', () => { const displayText = 'Displaying some text'; expect(() => renderWithTheme( - // @ts-expect-error testing failure case when size='medium' is passed with variant='caption' {displayText} diff --git a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx index 377c295fab9..08885414ab6 100644 --- a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx +++ b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx @@ -24,9 +24,9 @@ const CheckboxItem: React.FC<{ label: string; checked?: boolean; disabled?: bool return ( {isChecked ? ( - + ) : ( - + )} {label} diff --git a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx index ca974fb19f3..2cab35c7d18 100644 --- a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx +++ b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx @@ -31,9 +31,9 @@ const Checkbox: React.FC<{ label: string; checked?: boolean; disabled?: boolean return ( {isChecked ? ( - + ) : ( - + )} {label} diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap index 9460fe18fcd..7cf5644b4d3 100644 --- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap +++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap @@ -4,12 +4,15 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = ` { "border": { "radius": { + "2xlarge": 16, "large": 8, "max": 9999, "medium": 4, "none": 0, "round": "50%", "small": 2, + "xlarge": 12, + "xsmall": 1, }, "width": { "none": 0, @@ -29,3066 +32,904 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = ` }, "colors": { "onDark": { - "action": { + "feedback": { "background": { - "primary": { - "active": "hsl(332, 100%, 20%)", - "default": "hsl(332, 81%, 32%)", - "disabled": "hsla(220, 23%, 29%, 1)", - "focus": "hsl(332, 100%, 23%)", - "hover": "hsl(332, 100%, 26%)", - }, - "secondary": { - "active": "hsla(332, 100%, 26%, 0.32)", - "default": "hsla(332, 100%, 26%, 0)", - "disabled": "hsla(220, 11%, 84%, 0)", - "focus": "hsla(332, 100%, 26%, 0.18)", - "hover": "hsla(332, 100%, 26%, 0.09)", - }, - "tertiary": { - "active": "hsla(216, 15%, 54%, 0.32)", - "default": "hsla(220, 11%, 84%, 0.09)", - "disabled": "hsla(220, 11%, 84%, 0.09)", - "focus": "hsla(220, 11%, 84%, 0.32)", - "hover": "hsla(220, 11%, 84%, 0.18)", + "information": { + "intense": "hsla(200, 84%, 37%, 1)", + "subtle": "hsla(200, 84%, 44%, 0.18)", }, - }, - "border": { - "primary": { - "active": "hsl(332, 100%, 20%)", - "default": "hsl(332, 81%, 32%)", - "disabled": "hsla(220, 23%, 29%, 1)", - "focus": "hsl(332, 100%, 23%)", - "hover": "hsl(332, 100%, 26%)", - }, - "secondary": { - "active": "hsl(332, 69%, 37%)", - "default": "hsl(332, 69%, 37%)", - "disabled": "hsla(220, 16%, 37%, 1)", - "focus": "hsl(332, 69%, 37%)", - "hover": "hsl(332, 69%, 37%)", - }, - "tertiary": { - "active": "hsla(219, 12%, 45%, 1)", - "default": "hsla(220, 11%, 84%, 0)", - "disabled": "hsla(220, 23%, 29%, 1)", - "focus": "hsla(219, 12%, 45%, 1)", - "hover": "hsla(219, 12%, 45%, 1)", + "negative": { + "intense": "hsla(4, 77%, 40%, 1)", + "subtle": "hsla(4, 74%, 49%, 0.18)", }, - }, - "icon": { - "link": { - "active": "hsla(213, 89%, 56%, 1)", - "default": "hsla(215, 91%, 74%, 1)", - "disabled": "hsla(219, 12%, 45%, 1)", - "focus": "hsla(213, 89%, 56%, 1)", - "hover": "hsla(213, 91%, 66%, 1)", - "visited": "hsla(267, 100%, 83%, 1)", + "neutral": { + "intense": "hsla(214, 40%, 92%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, - "primary": { - "active": "hsl(0, 0%, 99%)", - "default": "hsl(0, 0%, 99%)", - "disabled": "hsla(219, 10%, 60%, 1)", - "focus": "hsl(0, 0%, 99%)", - "hover": "hsl(0, 0%, 99%)", - }, - "secondary": { - "active": "hsla(0, 0%, 99%, 1)", - "default": "hsla(0, 0%, 99%, 1)", - "disabled": "hsla(220, 16%, 37%, 1)", - "focus": "hsla(0, 0%, 99%, 1)", - "hover": "hsla(0, 0%, 99%, 1)", - }, - "tertiary": { - "active": "hsla(218, 11%, 84%, 1)", - "default": "hsla(218, 11%, 84%, 1)", - "disabled": "hsla(220, 16%, 37%, 1)", - "focus": "hsla(216, 33%, 29%, 1)", - "hover": "hsla(218, 11%, 84%, 1)", + "notice": { + "intense": "hsla(25, 85%, 42%, 1)", + "subtle": "hsla(25, 90%, 48%, 0.18)", + }, + "positive": { + "intense": "hsla(150, 100%, 27%, 1)", + "subtle": "hsla(150, 100%, 32%, 0.18)", }, }, - "text": { - "link": { - "active": "hsla(213, 89%, 56%, 1)", - "default": "hsla(215, 91%, 74%, 1)", - "disabled": "hsla(219, 12%, 45%, 1)", - "focus": "hsla(213, 89%, 56%, 1)", - "hover": "hsla(213, 91%, 66%, 1)", - "visited": "hsla(267, 100%, 83%, 1)", + "border": { + "information": { + "intense": "hsla(200, 84%, 29%, 1)", + "subtle": "hsla(200, 84%, 44%, 0.32)", }, - "primary": { - "active": "hsl(0, 0%, 99%)", - "default": "hsl(0, 0%, 99%)", - "disabled": "hsla(219, 10%, 60%, 1)", - "focus": "hsl(0, 0%, 99%)", - "hover": "hsl(0, 0%, 99%)", - }, - "secondary": { - "active": "hsla(0, 0%, 99%, 1)", - "default": "hsla(0, 0%, 99%, 1)", - "disabled": "hsla(220, 16%, 37%, 1)", - "focus": "hsla(0, 0%, 99%, 1)", - "hover": "hsla(0, 0%, 99%, 1)", - }, - "tertiary": { - "active": "hsla(218, 11%, 84%, 1)", - "default": "hsla(218, 11%, 84%, 1)", - "disabled": "hsla(220, 16%, 37%, 1)", - "focus": "hsla(218, 11%, 84%, 1)", - "hover": "hsla(218, 11%, 84%, 1)", + "negative": { + "intense": "hsla(0, 83%, 33%, 1)", + "subtle": "hsla(4, 74%, 49%, 0.32)", }, - }, - }, - "badge": { - "background": { - "blue": { - "highContrast": "hsla(218, 89%, 51%, 1)", - "lowContrast": "hsla(218, 89%, 51%, 0.18)", + "neutral": { + "intense": "hsla(214, 28%, 84%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, - }, - "border": { - "blue": { - "highContrast": "hsla(218, 89%, 51%, 1)", - "lowContrast": "hsla(218, 89%, 51%, 0.32)", + "notice": { + "intense": "hsla(25, 82%, 35%, 1)", + "subtle": "hsla(25, 90%, 48%, 0.32)", + }, + "positive": { + "intense": "hsla(150, 100%, 21%, 1)", + "subtle": "hsla(150, 100%, 32%, 0.32)", }, }, "icon": { - "blue": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(213, 91%, 66%, 1)", + "information": { + "intense": "hsla(200, 90%, 65%, 1)", + "subtle": "hsla(201, 92%, 95%, 1)", }, - }, - "text": { - "blue": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(213, 91%, 66%, 1)", + "negative": { + "intense": "hsla(4, 93%, 68%, 1)", + "subtle": "hsla(0, 100%, 98%, 1)", }, - }, - }, - "brand": { - "gray": { - "200": { - "highContrast": "hsla(220, 23%, 29%, 1)", - "lowContrast": "hsl(0, 0%, 99%)", + "neutral": { + "intense": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(211, 20%, 52%, 1)", }, - "300": { - "highContrast": "hsla(220, 16%, 37%, 1)", - "lowContrast": "hsla(220, 35%, 22%, 1)", + "notice": { + "intense": "hsla(25, 100%, 63%, 1)", + "subtle": "hsla(24, 100%, 96%, 1)", }, - "400": { - "highContrast": "hsla(219, 12%, 45%, 1)", - "lowContrast": "hsla(220, 23%, 29%, 1)", + "positive": { + "intense": "hsla(150, 59%, 55%, 1)", + "subtle": "hsla(152, 60%, 95%, 1)", }, - "500": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(220, 16%, 37%, 1)", + }, + "text": { + "information": { + "intense": "hsla(200, 90%, 65%, 1)", + "subtle": "hsla(201, 92%, 95%, 1)", }, - "600": { - "highContrast": "hsla(218, 11%, 76%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", + "negative": { + "intense": "hsla(4, 93%, 68%, 1)", + "subtle": "hsla(0, 100%, 98%, 1)", }, - "700": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", + "neutral": { + "intense": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(211, 20%, 52%, 1)", }, - "a100": { - "highContrast": "hsla(217, 11%, 76%, 0.18)", - "lowContrast": "hsla(220, 11%, 84%, 0.18)", + "notice": { + "intense": "hsla(25, 100%, 63%, 1)", + "subtle": "hsla(24, 100%, 96%, 1)", }, - "a50": { - "highContrast": "hsla(217, 11%, 76%, 0.09)", - "lowContrast": "hsla(220, 11%, 84%, 0.09)", + "positive": { + "intense": "hsla(150, 59%, 55%, 1)", + "subtle": "hsla(152, 60%, 95%, 1)", }, }, - "primary": { - "300": "hsla(332, 100%, 26%, 0.18)", - "400": "hsla(332, 100%, 26%, 0.32)", - "500": "hsl(332, 69%, 37%)", - "600": "hsl(332, 81%, 32%)", - "700": "hsl(332, 100%, 26%)", - "800": "hsl(332, 100%, 17%)", - }, - "secondary": { - "500": "hsla(149, 99%, 35%, 1)", - }, }, - "feedback": { + "interactive": { "background": { + "gray": { + "default": "hsla(214, 40%, 92%, 0.09)", + "disabled": "hsla(214, 40%, 92%, 0.09)", + "faded": "hsla(214, 40%, 92%, 0.12)", + "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)", + "highlighted": "hsla(214, 40%, 92%, 0.18)", + }, "information": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.18)", + "default": "hsla(200, 84%, 44%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.18)", + "faded": "hsla(200, 84%, 44%, 0.24)", + "fadedHighlighted": "hsla(200, 84%, 44%, 0.32)", + "highlighted": "hsla(200, 84%, 37%, 1)", }, "negative": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.18)", + "default": "hsla(4, 74%, 49%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.18)", + "faded": "hsla(4, 74%, 49%, 0.24)", + "fadedHighlighted": "hsla(4, 74%, 49%, 0.32)", + "highlighted": "hsla(4, 77%, 40%, 1)", }, "neutral": { - "highContrast": "hsla(220, 11%, 84%, 0.18)", - "lowContrast": "hsla(220, 11%, 84%, 0.18)", + "default": "hsla(210, 40%, 98%, 1)", + "disabled": "hsla(214, 40%, 92%, 0.18)", + "faded": "hsla(214, 40%, 92%, 0.12)", + "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)", + "highlighted": "hsla(214, 40%, 92%, 1)", }, "notice": { - "highContrast": "hsla(40, 90%, 32%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.18)", + "default": "hsla(25, 90%, 48%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.18)", + "faded": "hsla(25, 90%, 48%, 0.24)", + "fadedHighlighted": "hsla(25, 90%, 48%, 0.32)", + "highlighted": "hsla(25, 85%, 42%, 1)", }, "positive": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.18)", + "default": "hsla(150, 100%, 32%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.18)", + "faded": "hsla(150, 100%, 32%, 0.24)", + "fadedHighlighted": "hsla(150, 100%, 32%, 0.32)", + "highlighted": "hsla(150, 100%, 27%, 1)", + }, + "primary": { + "default": "hsl(332, 100%, 26%)", + "disabled": "hsla(332, 100%, 26%, 0.12)", + "faded": "hsla(332, 100%, 26%, 0.12)", + "fadedHighlighted": "hsla(332, 100%, 26%, 0.09)", + "highlighted": "hsl(332, 100%, 23%)", + }, + "staticBlack": { + "default": "hsla(0, 0%, 0%, 1)", + "disabled": "hsla(0, 0%, 0%, 0.56)", + "faded": "hsla(0, 0%, 0%, 0.18)", + "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)", + "highlighted": "hsla(0, 0%, 0%, 1)", + }, + "staticWhite": { + "default": "hsla(0, 0%, 100%, 1)", + "disabled": "hsla(0, 0%, 100%, 0.18)", + "faded": "hsla(0, 0%, 100%, 0.18)", + "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)", + "highlighted": "hsla(0, 0%, 100%, 0.8)", }, }, "border": { + "gray": { + "default": "hsla(211, 23%, 45%, 1)", + "disabled": "hsla(211, 29%, 26%, 1)", + "faded": "hsla(214, 40%, 92%, 0.18)", + "highlighted": "hsla(211, 23%, 45%, 1)", + }, "information": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", + "default": "hsla(200, 84%, 44%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.18)", + "faded": "hsla(200, 84%, 44%, 0.18)", + "highlighted": "hsla(200, 84%, 37%, 1)", }, "negative": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", + "default": "hsla(4, 74%, 49%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.18)", + "faded": "hsla(4, 74%, 49%, 0.18)", + "highlighted": "hsla(4, 77%, 40%, 1)", }, "neutral": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(220, 11%, 84%, 0.32)", + "default": "hsla(214, 40%, 92%, 1)", + "disabled": "hsla(211, 23%, 45%, 1)", + "faded": "hsla(214, 40%, 92%, 0.18)", + "highlighted": "hsla(214, 40%, 92%, 1)", }, "notice": { - "highContrast": "hsla(40, 90%, 32%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", + "default": "hsla(25, 90%, 48%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.18)", + "faded": "hsla(25, 90%, 48%, 0.18)", + "highlighted": "hsla(25, 85%, 42%, 1)", }, "positive": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", + "default": "hsla(150, 100%, 32%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.18)", + "faded": "hsla(150, 100%, 32%, 0.18)", + "highlighted": "hsla(150, 100%, 27%, 1)", + }, + "primary": { + "default": "hsl(332, 100%, 26%)", + "disabled": "hsla(332, 100%, 26%, 0.12)", + "faded": "hsla(332, 100%, 26%, 0.12)", + "highlighted": "hsl(332, 100%, 23%)", + }, + "staticBlack": { + "default": "hsla(0, 0%, 0%, 1)", + "disabled": "hsla(0, 0%, 0%, 0.32)", + "faded": "hsla(0, 0%, 0%, 0.32)", + "highlighted": "hsla(0, 0%, 0%, 1)", + }, + "staticWhite": { + "default": "hsla(0, 0%, 100%, 1)", + "disabled": "hsla(0, 0%, 100%, 0.32)", + "faded": "hsla(0, 0%, 100%, 0.18)", + "highlighted": "hsla(0, 0%, 100%, 0.8)", }, }, "icon": { + "gray": { + "disabled": "hsla(214, 40%, 92%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", + }, "information": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(187, 68%, 52%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.32)", + "muted": "hsla(200, 84%, 37%, 1)", + "normal": "hsla(200, 90%, 65%, 1)", + "subtle": "hsla(198, 90%, 52%, 1)", }, "negative": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.32)", + "muted": "hsla(4, 77%, 40%, 1)", + "normal": "hsla(4, 93%, 68%, 1)", + "subtle": "hsla(4, 86%, 58%, 1)", }, "neutral": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", + "disabled": "hsla(214, 40%, 92%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", }, "notice": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(34, 93%, 65%, 1)", - }, - "positive": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.32)", + "muted": "hsla(25, 85%, 42%, 1)", + "normal": "hsla(25, 100%, 63%, 1)", + "subtle": "hsla(25, 100%, 55%, 1)", }, - }, - "information": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(196, 100%, 27%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "default": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "focus": { - "highContrast": "hsla(196, 100%, 27%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "hover": { - "highContrast": "hsla(195, 100%, 31%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "default": { - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(193, 100%, 35%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "default": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "hover": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(187, 68%, 52%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "default": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "disabled": { - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "hover": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(187, 68%, 52%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "default": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "disabled": { - "lowContrast": "hsla(197, 100%, 23%, 1)", - }, - "focus": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - "hover": { - "lowContrast": "hsla(190, 100%, 39%, 1)", - }, - }, - }, + "onPrimary": { + "disabled": "hsl(0, 0%, 100%)", + "muted": "hsl(0, 0%, 100%)", + "normal": "hsl(0, 0%, 100%)", + "subtle": "hsl(0, 0%, 100%)", }, - }, - "negative": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(5, 69%, 32%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "default": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "focus": { - "highContrast": "hsla(5, 69%, 32%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "hover": { - "highContrast": "hsla(7, 72%, 40%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "default": { - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(9, 91%, 56%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(5, 69%, 32%, 1)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "default": { - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "disabled": { - "lowContrast": "hsla(5, 69%, 32%, 1)", - }, - "focus": { - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "hover": { - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(5, 69%, 32%, 1)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "default": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "disabled": { - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "focus": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "hover": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 99%, 65%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(5, 69%, 32%, 1)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "default": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "disabled": { - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "focus": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - "hover": { - "lowContrast": "hsla(6, 100%, 75%, 1)", - }, - }, - }, + "positive": { + "disabled": "hsla(150, 100%, 32%, 0.32)", + "muted": "hsla(150, 100%, 27%, 1)", + "normal": "hsla(150, 59%, 55%, 1)", + "subtle": "hsla(150, 100%, 37%, 1)", }, - }, - "neutral": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(218, 11%, 76%, 1)", - "lowContrast": "hsla(220, 11%, 84%, 0.32)", - }, - "default": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(220, 11%, 84%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(220, 11%, 84%, 0.09)", - }, - "focus": { - "highContrast": "hsla(218, 11%, 76%, 1)", - "lowContrast": "hsla(220, 11%, 84%, 0.32)", - }, - "hover": { - "highContrast": "hsla(218, 11%, 84%, 1)", - "lowContrast": "hsla(220, 11%, 84%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(220, 11%, 84%, 0.32)", - }, - "default": { - "lowContrast": "hsla(220, 11%, 84%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(220, 11%, 84%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(220, 11%, 84%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(220, 11%, 84%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "default": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "disabled": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "hover": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "default": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "disabled": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "hover": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 10%, 60%, 1)", - }, - "default": { - "highContrast": "hsla(218, 11%, 84%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "disabled": { - "highContrast": "hsla(219, 12%, 45%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 10%, 60%, 1)", - }, - "hover": { - "highContrast": "hsla(218, 11%, 76%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "default": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "disabled": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "hover": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "default": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "disabled": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "hover": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 10%, 60%, 1)", - }, - "default": { - "highContrast": "hsla(218, 11%, 84%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "disabled": { - "highContrast": "hsla(219, 12%, 45%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 10%, 60%, 1)", - }, - "hover": { - "highContrast": "hsla(218, 11%, 76%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "default": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "disabled": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "hover": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "default": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "disabled": { - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "focus": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - "hover": { - "lowContrast": "hsla(218, 11%, 84%, 1)", - }, - }, - }, + "primary": { + "disabled": "hsla(240, 20%, 99%, 1)", + "muted": "hsla(240, 20%, 99%, 1)", + "normal": "hsla(240, 20%, 99%, 1)", + "subtle": "hsla(240, 20%, 99%, 1)", }, - }, - "notice": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(42, 74%, 20%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "default": { - "highContrast": "hsla(40, 90%, 32%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(40, 90%, 32%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "focus": { - "highContrast": "hsla(42, 74%, 20%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "hover": { - "highContrast": "hsla(41, 82%, 26%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "default": { - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(36, 100%, 44%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "default": { - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "disabled": { - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "hover": { - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(34, 93%, 65%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "default": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "disabled": { - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "hover": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(34, 93%, 65%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "default": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "disabled": { - "lowContrast": "hsla(41, 82%, 26%, 1)", - }, - "focus": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - "hover": { - "lowContrast": "hsla(35, 84%, 54%, 1)", - }, - }, - }, + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.72)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.8)", }, - }, - "positive": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(164, 100%, 17%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "default": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "focus": { - "highContrast": "hsla(164, 100%, 17%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "hover": { - "highContrast": "hsla(163, 100%, 22%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "default": { - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(155, 100%, 31%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "highContrast": "hsla(149, 99%, 35%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "focus": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "focus": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "disabled": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "focus": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "disabled": { - "highContrast": "hsla(149, 99%, 35%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "focus": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "default": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "disabled": { - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "focus": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "hover": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "disabled": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "focus": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "disabled": { - "highContrast": "hsla(149, 99%, 35%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "focus": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "default": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "disabled": { - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "focus": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - "hover": { - "lowContrast": "hsla(149, 99%, 35%, 1)", - }, - }, - }, + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.64)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.8)", }, }, "text": { + "gray": { + "disabled": "hsla(214, 40%, 92%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", + }, "information": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(187, 68%, 52%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.32)", + "muted": "hsla(200, 84%, 37%, 1)", + "normal": "hsla(200, 90%, 65%, 1)", + "subtle": "hsla(198, 90%, 52%, 1)", }, "negative": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(6, 100%, 75%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.32)", + "muted": "hsla(4, 77%, 40%, 1)", + "normal": "hsla(4, 93%, 68%, 1)", + "subtle": "hsla(4, 86%, 58%, 1)", }, "neutral": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", + "disabled": "hsla(214, 40%, 92%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", }, "notice": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(34, 93%, 65%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.32)", + "muted": "hsla(25, 85%, 42%, 1)", + "normal": "hsla(25, 100%, 63%, 1)", + "subtle": "hsla(25, 100%, 55%, 1)", + }, + "onPrimary": { + "disabled": "hsl(0, 0%, 100%)", + "muted": "hsl(0, 0%, 100%)", + "normal": "hsl(0, 0%, 100%)", + "subtle": "hsl(0, 0%, 100%)", }, "positive": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(149, 99%, 35%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.32)", + "muted": "hsla(150, 100%, 27%, 1)", + "normal": "hsla(150, 59%, 55%, 1)", + "subtle": "hsla(150, 100%, 37%, 1)", + }, + "primary": { + "disabled": "hsla(240, 20%, 99%, 1)", + "muted": "hsla(240, 20%, 99%, 1)", + "normal": "hsla(240, 20%, 99%, 1)", + "subtle": "hsla(240, 20%, 99%, 1)", + }, + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.72)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.8)", + }, + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.64)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.8)", }, }, }, - "static": { - "white": "hsla(0, 0%, 100%, 1)", + "overlay": { + "background": { + "moderate": "hsla(214, 40%, 92%, 0.32)", + "subtle": "hsla(0, 0%, 0%, 0.8)", + }, }, - "surface": { - "action": { - "icon": { - "active": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", - }, - "default": { - "highContrast": "hsla(220, 11%, 84%, 0.32)", - "lowContrast": "hsla(219, 12%, 45%, 1)", - }, - "disabled": { - "highContrast": "hsla(220, 11%, 84%, 0.18)", - "lowContrast": "hsla(220, 11%, 84%, 0.18)", - }, - "focus": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", - }, - }, + "popup": { + "background": { + "intense": "hsla(211, 29%, 26%, 1)", + "subtle": "hsla(211, 29%, 26%, 1)", }, + "border": { + "intense": "hsla(214, 40%, 92%, 0.18)", + "subtle": "hsla(214, 40%, 92%, 0.18)", + }, + }, + "surface": { "background": { - "level1": { - "highContrast": "hsla(219, 41%, 19%, 1)", - "lowContrast": "hsla(218, 67%, 10%, 1)", + "cloud": { + "intense": "hsla(201, 39%, 93%, 1)", + "subtle": "hsla(200, 91%, 13%, 1)", + }, + "gray": { + "intense": "hsla(211, 33%, 21%, 1)", + "moderate": "hsla(212, 39%, 16%, 1)", + "subtle": "hsla(211, 53%, 10%, 1)", }, - "level2": { - "highContrast": "hsla(220, 35%, 22%, 1)", - "lowContrast": "hsla(218, 54%, 15%, 1)", + "primary": { + "intense": "hsl(332, 100%, 26%)", + "subtle": "hsl(332, 52%, 49%)", }, - "level3": { - "highContrast": "hsla(220, 23%, 29%, 1)", - "lowContrast": "hsla(218, 49%, 17%, 1)", + "sea": { + "intense": "hsla(180, 42%, 92%, 1)", + "subtle": "hsla(180, 91%, 13%, 1)", }, }, "border": { - "normal": { - "highContrast": "hsla(217, 11%, 76%, 0.18)", - "lowContrast": "hsla(220, 11%, 84%, 0.18)", + "gray": { + "muted": "hsla(214, 40%, 92%, 0.18)", + "normal": "hsla(211, 20%, 52%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, - "subtle": { - "highContrast": "hsla(217, 11%, 76%, 0.09)", - "lowContrast": "hsla(220, 11%, 84%, 0.09)", + "primary": { + "muted": "hsla(227, 100%, 59%, 0.32)", + "normal": "hsla(227, 100%, 59%, 1)", }, }, - "overlay": { - "background": { - "400": "hsla(221, 16%, 37%, 0.64)", - "800": "hsla(231, 11%, 12%, 0.72)", + "icon": { + "gray": { + "disabled": "hsla(214, 40%, 92%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", }, - }, - "popup": { - "background": "hsla(220, 35%, 22%, 1)", - }, - "text": { - "muted": { - "highContrast": "hsla(218, 11%, 76%, 1)", - "lowContrast": "hsla(218, 11%, 76%, 1)", + "onCloud": { + "onIntense": "hsla(223, 100%, 65%, 1)", + "onSubtle": "hsla(220, 100%, 73%, 1)", }, - "normal": { - "highContrast": "hsla(0, 0%, 99%, 1)", - "lowContrast": "hsla(0, 0%, 99%, 1)", + "onSea": { + "onIntense": "hsla(155, 100%, 31%, 1)", + "onSubtle": "hsla(150, 59%, 55%, 1)", }, - "placeholder": { - "highContrast": "hsla(219, 10%, 60%, 1)", - "lowContrast": "hsla(219, 10%, 60%, 1)", + "primary": { + "normal": "hsl(332, 100%, 26%)", }, - "subdued": { - "highContrast": "hsla(218, 11%, 84%, 1)", - "lowContrast": "hsla(218, 11%, 84%, 1)", + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.56)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.72)", }, - "subtle": { - "highContrast": "hsla(215, 12%, 92%, 1)", - "lowContrast": "hsla(215, 12%, 92%, 1)", + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.48)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.88)", }, }, - }, - "white": { - "action": { - "background": { - "primary": { - "active": "hsla(216, 4%, 89%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.18)", - "focus": "hsla(216, 4%, 89%, 1)", - "hover": "hsla(216, 6%, 94%, 1)", - }, - "secondary": { - "active": "hsla(210, 6%, 94%, 0.32)", - "default": "hsla(214, 15%, 18%, 0)", - "disabled": "hsla(214, 15%, 18%, 0)", - "focus": "hsla(210, 6%, 94%, 0.32)", - "hover": "hsla(210, 6%, 94%, 0.18)", - }, - "tertiary": { - "active": "hsla(210, 6%, 94%, 0.32)", - "default": "hsla(210, 6%, 94%, 0.09)", - "disabled": "hsla(210, 6%, 94%, 0.09)", - "focus": "hsla(210, 6%, 94%, 0.32)", - "hover": "hsla(210, 6%, 94%, 0.18)", - }, + "text": { + "gray": { + "disabled": "hsla(214, 40%, 92%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", }, - "border": { - "primary": { - "active": "hsla(216, 4%, 89%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.18)", - "focus": "hsla(216, 4%, 89%, 1)", - "hover": "hsla(216, 6%, 94%, 1)", - }, - "secondary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, - "tertiary": { - "active": "hsla(214, 15%, 18%, 0)", - "default": "hsla(214, 15%, 18%, 0)", - "disabled": "hsla(214, 15%, 18%, 0)", - "focus": "hsla(214, 15%, 18%, 0)", - "hover": "hsla(214, 15%, 18%, 0)", - }, + "onCloud": { + "onIntense": "hsla(227, 71%, 51%, 1)", + "onSubtle": "hsla(219, 95%, 85%, 1)", }, - "icon": { - "link": { - "active": "hsla(214, 7%, 81%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(214, 7%, 81%, 1)", - "hover": "hsla(216, 4%, 89%, 1)", - "visited": "hsla(267, 100%, 83%, 1)", - }, - "primary": { - "active": "hsla(213, 89%, 56%, 1)", - "default": "hsla(213, 89%, 56%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(213, 89%, 56%, 1)", - "hover": "hsla(213, 89%, 56%, 1)", - }, - "secondary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, - "tertiary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, + "onSea": { + "onIntense": "hsla(155, 100%, 21%, 1)", + "onSubtle": "hsla(150, 59%, 82%, 1)", }, - "text": { - "link": { - "active": "hsla(214, 7%, 81%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(214, 7%, 81%, 1)", - "hover": "hsla(216, 4%, 89%, 1)", - "visited": "hsla(267, 100%, 83%, 1)", - }, - "primary": { - "active": "hsla(213, 89%, 56%, 1)", - "default": "hsla(213, 89%, 56%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(213, 89%, 56%, 1)", - "hover": "hsla(213, 89%, 56%, 1)", - }, - "secondary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, - "tertiary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, + "primary": { + "normal": "hsla(220, 100%, 73%, 1)", + }, + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.56)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.72)", + }, + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.48)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.88)", }, }, }, + "transparent": "hsla(0, 0%, 100%, 0)", }, "onLight": { - "action": { + "feedback": { "background": { - "primary": { - "active": "hsl(332, 100%, 17%)", - "default": "hsl(332, 100%, 26%)", - "disabled": "hsla(216, 19%, 89%, 1)", - "focus": "hsl(332, 100%, 20%)", - "hover": "hsl(332, 100%, 23%)", - }, - "secondary": { - "active": "hsla(332, 100%, 26%, 0.32)", - "default": "hsla(332, 100%, 26%, 0)", - "disabled": "hsla(216, 44%, 23%, 0)", - "focus": "hsla(332, 100%, 26%, 0.18)", - "hover": "hsla(332, 100%, 26%, 0.09)", - }, - "tertiary": { - "active": "hsla(214, 21%, 94%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(216, 15%, 54%, 0.09)", - "focus": "hsla(220, 30%, 96%, 1)", - "hover": "hsla(220, 27%, 98%, 1)", - }, - }, - "border": { - "primary": { - "active": "hsl(332, 100%, 17%)", - "default": "hsl(332, 100%, 26%)", - "disabled": "hsla(216, 19%, 89%, 1)", - "focus": "hsl(332, 100%, 20%)", - "hover": "hsl(332, 100%, 23%)", - }, - "secondary": { - "active": "hsl(332, 100%, 26%)", - "default": "hsl(332, 100%, 26%)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsl(332, 100%, 26%)", - "hover": "hsl(332, 100%, 26%)", + "information": { + "intense": "hsla(200, 84%, 44%, 1)", + "subtle": "hsla(200, 84%, 44%, 0.09)", }, - "tertiary": { - "active": "hsla(216, 19%, 89%, 1)", - "default": "hsla(216, 19%, 89%, 1)", - "disabled": "hsla(216, 19%, 89%, 1)", - "focus": "hsla(216, 19%, 89%, 1)", - "hover": "hsla(216, 19%, 89%, 1)", + "negative": { + "intense": "hsla(4, 74%, 49%, 1)", + "subtle": "hsla(4, 74%, 49%, 0.09)", }, - }, - "icon": { - "link": { - "active": "hsla(227, 100%, 45%, 1)", - "default": "hsla(218, 89%, 51%, 1)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsla(227, 100%, 45%, 1)", - "hover": "hsla(223, 95%, 48%, 1)", - "visited": "hsla(268, 100%, 79%, 1)", + "neutral": { + "intense": "hsla(211, 29%, 26%, 1)", + "subtle": "hsla(211, 20%, 52%, 0.09)", }, - "primary": { - "active": "hsl(0, 0%, 100%)", - "default": "hsl(0, 0%, 100%)", - "disabled": "hsla(216, 16%, 60%, 1)", - "focus": "hsl(0, 0%, 100%)", - "hover": "hsl(0, 0%, 100%)", - }, - "secondary": { - "active": "hsl(332, 100%, 26%)", - "default": "hsl(332, 100%, 26%)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsl(332, 100%, 26%)", - "hover": "hsl(332, 100%, 26%)", + "notice": { + "intense": "hsla(25, 90%, 48%, 1)", + "subtle": "hsla(25, 90%, 48%, 0.09)", }, - "tertiary": { - "active": "hsla(216, 33%, 29%, 1)", - "default": "hsla(216, 33%, 29%, 1)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsla(216, 33%, 29%, 1)", - "hover": "hsla(216, 33%, 29%, 1)", + "positive": { + "intense": "hsla(150, 100%, 32%, 1)", + "subtle": "hsla(150, 100%, 32%, 0.09)", }, }, - "text": { - "link": { - "active": "hsla(227, 100%, 45%, 1)", - "default": "hsla(218, 89%, 51%, 1)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsla(227, 100%, 45%, 1)", - "hover": "hsla(223, 95%, 48%, 1)", - "visited": "hsla(268, 100%, 79%, 1)", + "border": { + "information": { + "intense": "hsla(200, 84%, 37%, 1)", + "subtle": "hsla(200, 84%, 44%, 0.18)", }, - "primary": { - "active": "hsl(0, 0%, 100%)", - "default": "hsl(0, 0%, 100%)", - "disabled": "hsla(216, 16%, 60%, 1)", - "focus": "hsl(0, 0%, 100%)", - "hover": "hsl(0, 0%, 100%)", - }, - "secondary": { - "active": "hsl(332, 100%, 26%)", - "default": "hsl(332, 100%, 26%)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsl(332, 100%, 26%)", - "hover": "hsl(332, 100%, 26%)", + "negative": { + "intense": "hsla(4, 77%, 40%, 1)", + "subtle": "hsla(4, 74%, 49%, 0.18)", }, - "tertiary": { - "active": "hsla(216, 33%, 29%, 1)", - "default": "hsla(216, 33%, 29%, 1)", - "disabled": "hsla(218, 19%, 81%, 1)", - "focus": "hsla(216, 33%, 29%, 1)", - "hover": "hsla(216, 33%, 29%, 1)", + "neutral": { + "intense": "hsla(211, 33%, 21%, 1)", + "subtle": "hsla(211, 20%, 52%, 0.18)", }, - }, - }, - "badge": { - "background": { - "blue": { - "highContrast": "hsla(218, 89%, 51%, 1)", - "lowContrast": "hsla(218, 89%, 51%, 0.09)", + "notice": { + "intense": "hsla(25, 85%, 42%, 1)", + "subtle": "hsla(25, 90%, 48%, 0.18)", }, - }, - "border": { - "blue": { - "highContrast": "hsla(218, 89%, 51%, 1)", - "lowContrast": "hsla(218, 89%, 51%, 0.32)", + "positive": { + "intense": "hsla(150, 100%, 27%, 1)", + "subtle": "hsla(150, 100%, 32%, 0.18)", }, }, "icon": { - "blue": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(218, 89%, 51%, 1)", + "information": { + "intense": "hsla(200, 84%, 37%, 1)", + "subtle": "hsla(200, 88%, 90%, 1)", }, - }, - "text": { - "blue": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(218, 89%, 51%, 1)", + "negative": { + "intense": "hsla(4, 74%, 49%, 1)", + "subtle": "hsla(4, 93%, 94%, 1)", }, - }, - }, - "brand": { - "gray": { - "200": { - "highContrast": "hsla(216, 33%, 29%, 1)", - "lowContrast": "hsl(0, 0%, 100%)", + "neutral": { + "intense": "hsla(211, 33%, 21%, 1)", + "subtle": "hsla(211, 24%, 65%, 1)", }, - "300": { - "highContrast": "hsla(216, 27%, 36%, 1)", - "lowContrast": "hsla(220, 30%, 96%, 1)", + "notice": { + "intense": "hsla(25, 85%, 42%, 1)", + "subtle": "hsla(25, 100%, 90%, 1)", }, - "400": { - "highContrast": "hsla(217, 18%, 45%, 1)", - "lowContrast": "hsla(216, 19%, 89%, 1)", + "positive": { + "intense": "hsla(150, 100%, 27%, 1)", + "subtle": "hsla(151, 57%, 91%, 1)", }, - "500": { - "highContrast": "hsla(216, 15%, 54%, 1)", - "lowContrast": "hsla(214, 18%, 69%, 1)", + }, + "text": { + "information": { + "intense": "hsla(200, 84%, 37%, 1)", + "subtle": "hsla(200, 88%, 90%, 1)", }, - "600": { - "highContrast": "hsla(214, 18%, 69%, 1)", - "lowContrast": "hsla(216, 16%, 60%, 1)", + "negative": { + "intense": "hsla(4, 74%, 49%, 1)", + "subtle": "hsla(4, 93%, 94%, 1)", }, - "700": { - "highContrast": "hsla(220, 30%, 96%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", + "neutral": { + "intense": "hsla(211, 33%, 21%, 1)", + "subtle": "hsla(211, 24%, 65%, 1)", }, - "a100": { - "highContrast": "hsla(214, 21%, 94%, 0.18)", - "lowContrast": "hsla(216, 15%, 54%, 0.18)", + "notice": { + "intense": "hsla(25, 85%, 42%, 1)", + "subtle": "hsla(25, 100%, 90%, 1)", }, - "a50": { - "highContrast": "hsla(214, 21%, 94%, 0.09)", - "lowContrast": "hsla(216, 15%, 54%, 0.09)", + "positive": { + "intense": "hsla(150, 100%, 27%, 1)", + "subtle": "hsla(151, 57%, 91%, 1)", }, }, - "primary": { - "300": "hsla(332, 100%, 26%, 0.09)", - "400": "hsla(332, 100%, 26%, 0.18)", - "500": "hsl(332, 100%, 26%)", - "600": "hsl(332, 100%, 23%)", - "700": "hsl(332, 100%, 20%)", - "800": "hsl(332, 100%, 14%)", - }, - "secondary": { - "500": "hsla(149, 99%, 35%, 1)", - }, }, - "feedback": { + "interactive": { "background": { + "gray": { + "default": "hsla(211, 20%, 52%, 0.09)", + "disabled": "hsla(211, 20%, 52%, 0.09)", + "faded": "hsla(211, 20%, 52%, 0.12)", + "fadedHighlighted": "hsla(211, 20%, 52%, 0.18)", + "highlighted": "hsla(211, 20%, 52%, 0.18)", + }, "information": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.09)", + "default": "hsla(200, 84%, 44%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.09)", + "faded": "hsla(200, 84%, 44%, 0.09)", + "fadedHighlighted": "hsla(200, 84%, 44%, 0.18)", + "highlighted": "hsla(200, 84%, 37%, 1)", }, "negative": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.09)", + "default": "hsla(4, 74%, 49%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.09)", + "faded": "hsla(4, 74%, 49%, 0.09)", + "fadedHighlighted": "hsla(4, 74%, 49%, 0.18)", + "highlighted": "hsla(4, 77%, 40%, 1)", }, "neutral": { - "highContrast": "hsla(216, 33%, 29%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.09)", + "default": "hsla(211, 29%, 26%, 1)", + "disabled": "hsla(211, 20%, 52%, 0.18)", + "faded": "hsla(211, 20%, 52%, 0.18)", + "fadedHighlighted": "hsla(211, 20%, 52%, 0.32)", + "highlighted": "hsla(211, 33%, 21%, 1)", }, "notice": { - "highContrast": "hsla(38, 97%, 38%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.09)", + "default": "hsla(25, 90%, 48%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.09)", + "faded": "hsla(25, 90%, 48%, 0.09)", + "fadedHighlighted": "hsla(25, 90%, 48%, 0.18)", + "highlighted": "hsla(25, 85%, 42%, 1)", }, "positive": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.09)", + "default": "hsla(150, 100%, 32%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.09)", + "faded": "hsla(150, 100%, 32%, 0.09)", + "fadedHighlighted": "hsla(150, 100%, 32%, 0.18)", + "highlighted": "hsla(150, 100%, 27%, 1)", + }, + "primary": { + "default": "hsl(332, 100%, 26%)", + "disabled": "hsla(332, 100%, 26%, 0.12)", + "faded": "hsla(332, 100%, 26%, 0.12)", + "fadedHighlighted": "hsla(332, 100%, 26%, 0.09)", + "highlighted": "hsl(332, 100%, 23%)", + }, + "staticBlack": { + "default": "hsla(0, 0%, 0%, 1)", + "disabled": "hsla(0, 0%, 0%, 0.56)", + "faded": "hsla(0, 0%, 0%, 0.18)", + "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)", + "highlighted": "hsla(0, 0%, 0%, 1)", + }, + "staticWhite": { + "default": "hsla(0, 0%, 100%, 1)", + "disabled": "hsla(0, 0%, 100%, 0.18)", + "faded": "hsla(0, 0%, 100%, 0.18)", + "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)", + "highlighted": "hsla(0, 0%, 100%, 0.8)", }, }, "border": { + "gray": { + "default": "hsla(211, 27%, 76%, 1)", + "disabled": "hsla(214, 40%, 92%, 1)", + "faded": "hsla(211, 20%, 52%, 0.18)", + "highlighted": "hsla(211, 27%, 76%, 1)", + }, "information": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", + "default": "hsla(200, 84%, 44%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.18)", + "faded": "hsla(200, 84%, 44%, 0.18)", + "highlighted": "hsla(200, 84%, 37%, 1)", }, "negative": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", + "default": "hsla(4, 74%, 49%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.18)", + "faded": "hsla(4, 74%, 49%, 0.18)", + "highlighted": "hsla(4, 77%, 40%, 1)", }, "neutral": { - "highContrast": "hsla(216, 33%, 29%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", + "default": "hsla(211, 20%, 52%, 1)", + "disabled": "hsla(214, 28%, 84%, 1)", + "faded": "hsla(211, 20%, 52%, 0.18)", + "highlighted": "hsla(211, 20%, 52%, 1)", }, "notice": { - "highContrast": "hsla(38, 97%, 38%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", + "default": "hsla(25, 90%, 48%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.18)", + "faded": "hsla(25, 90%, 48%, 0.18)", + "highlighted": "hsla(25, 85%, 42%, 1)", }, "positive": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", + "default": "hsla(150, 100%, 32%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.18)", + "faded": "hsla(150, 100%, 32%, 0.18)", + "highlighted": "hsla(150, 100%, 27%, 1)", + }, + "primary": { + "default": "hsl(332, 100%, 26%)", + "disabled": "hsla(332, 100%, 26%, 0.12)", + "faded": "hsla(332, 100%, 26%, 0.12)", + "highlighted": "hsl(332, 100%, 23%)", + }, + "staticBlack": { + "default": "hsla(0, 0%, 0%, 1)", + "disabled": "hsla(0, 0%, 0%, 0.32)", + "faded": "hsla(0, 0%, 0%, 0.32)", + "highlighted": "hsla(0, 0%, 0%, 1)", + }, + "staticWhite": { + "default": "hsla(0, 0%, 100%, 1)", + "disabled": "hsla(0, 0%, 100%, 0.32)", + "faded": "hsla(0, 0%, 100%, 0.18)", + "highlighted": "hsla(0, 0%, 100%, 0.8)", }, }, "icon": { + "gray": { + "disabled": "hsla(211, 20%, 52%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(212, 39%, 16%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", + }, "information": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.32)", + "muted": "hsla(200, 90%, 65%, 1)", + "normal": "hsla(200, 84%, 37%, 1)", + "subtle": "hsla(200, 84%, 44%, 1)", }, "negative": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.32)", + "muted": "hsla(4, 93%, 68%, 1)", + "normal": "hsla(4, 74%, 49%, 1)", + "subtle": "hsla(4, 86%, 58%, 1)", }, "neutral": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", + "disabled": "hsla(211, 20%, 52%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(211, 33%, 21%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, "notice": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.32)", + "muted": "hsla(25, 100%, 63%, 1)", + "normal": "hsla(25, 85%, 42%, 1)", + "subtle": "hsla(25, 90%, 48%, 1)", + }, + "onPrimary": { + "disabled": "hsl(0, 0%, 100%)", + "muted": "hsl(0, 0%, 100%)", + "normal": "hsl(0, 0%, 100%)", + "subtle": "hsl(0, 0%, 100%)", }, "positive": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.32)", + "muted": "hsla(150, 59%, 55%, 1)", + "normal": "hsla(150, 100%, 27%, 1)", + "subtle": "hsla(150, 100%, 32%, 1)", }, - }, - "information": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(196, 100%, 27%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "default": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(193, 100%, 35%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "focus": { - "highContrast": "hsla(196, 100%, 27%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "hover": { - "highContrast": "hsla(195, 100%, 31%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "default": { - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(193, 100%, 35%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(193, 100%, 35%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "default": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "disabled": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(196, 100%, 27%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(196, 100%, 27%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "default": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "hover": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(196, 100%, 27%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "highContrast": "hsla(181, 75%, 85%, 1)", - "lowContrast": "hsla(196, 100%, 27%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "default": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "highContrast": "hsla(187, 68%, 52%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "hover": { - "highContrast": "hsla(180, 100%, 97%, 1)", - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "default": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "disabled": { - "lowContrast": "hsla(193, 100%, 35%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - "hover": { - "lowContrast": "hsla(195, 100%, 31%, 1)", - }, - }, - }, + "primary": { + "disabled": "hsl(332, 100%, 26%)", + "muted": "hsl(332, 100%, 26%)", + "normal": "hsl(332, 100%, 26%)", + "subtle": "hsl(332, 100%, 26%)", }, - }, - "negative": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(5, 69%, 32%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "default": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(8, 73%, 47%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "focus": { - "highContrast": "hsla(5, 69%, 32%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "hover": { - "highContrast": "hsla(7, 72%, 40%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "default": { - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(9, 91%, 56%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(9, 91%, 56%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "default": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "disabled": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "default": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "disabled": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "hover": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 92%, 1)", - "lowContrast": "hsla(7, 72%, 40%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "default": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "disabled": { - "highContrast": "hsla(8, 99%, 65%, 1)", - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 100%, 97%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "default": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "disabled": { - "lowContrast": "hsla(9, 91%, 56%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - "hover": { - "lowContrast": "hsla(8, 73%, 47%, 1)", - }, - }, - }, + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.72)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.8)", }, - }, - "neutral": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(217, 56%, 17%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "default": { - "highContrast": "hsla(216, 33%, 29%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(216, 33%, 29%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.09)", - }, - "focus": { - "highContrast": "hsla(217, 56%, 17%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "hover": { - "highContrast": "hsla(216, 44%, 23%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "default": { - "lowContrast": "hsla(216, 15%, 54%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(216, 15%, 54%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(216, 15%, 54%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(214, 18%, 69%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "default": { - "highContrast": "hsla(214, 18%, 69%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "disabled": { - "highContrast": "hsla(216, 15%, 54%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "highContrast": "hsla(214, 18%, 69%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "hover": { - "highContrast": "hsla(214, 18%, 69%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "default": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "disabled": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(218, 19%, 81%, 1)", - "lowContrast": "hsla(216, 33%, 29%, 1)", - }, - "default": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "disabled": { - "highContrast": "hsla(216, 15%, 54%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "highContrast": "hsla(218, 19%, 81%, 1)", - "lowContrast": "hsla(216, 33%, 29%, 1)", - }, - "hover": { - "highContrast": "hsla(214, 21%, 94%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "default": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "disabled": { - "highContrast": "hsla(216, 15%, 54%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "hover": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "default": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "disabled": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "hover": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(218, 19%, 81%, 1)", - "lowContrast": "hsla(216, 33%, 29%, 1)", - }, - "default": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "disabled": { - "highContrast": "hsla(216, 15%, 54%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "highContrast": "hsla(218, 19%, 81%, 1)", - "lowContrast": "hsla(216, 33%, 29%, 1)", - }, - "hover": { - "highContrast": "hsla(214, 21%, 94%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "default": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "disabled": { - "highContrast": "hsla(216, 15%, 54%, 1)", - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "hover": { - "highContrast": "hsla(220, 27%, 98%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "default": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "disabled": { - "lowContrast": "hsla(216, 15%, 54%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - "hover": { - "lowContrast": "hsla(216, 27%, 36%, 1)", - }, - }, - }, - }, - }, - "notice": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(41, 82%, 26%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "default": { - "highContrast": "hsla(38, 97%, 38%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(38, 97%, 38%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "focus": { - "highContrast": "hsla(41, 82%, 26%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "hover": { - "highContrast": "hsla(40, 90%, 32%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "default": { - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(36, 100%, 44%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(36, 100%, 44%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "default": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "disabled": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "default": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "disabled": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "hover": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "highContrast": "hsla(32, 97%, 86%, 1)", - "lowContrast": "hsla(40, 90%, 32%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "default": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "disabled": { - "highContrast": "hsla(35, 84%, 54%, 1)", - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "hover": { - "highContrast": "hsla(32, 100%, 94%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "default": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "disabled": { - "lowContrast": "hsla(36, 100%, 44%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - "hover": { - "lowContrast": "hsla(38, 97%, 38%, 1)", - }, - }, - }, - }, - }, - "positive": { - "action": { - "background": { - "primary": { - "active": { - "highContrast": "hsla(164, 100%, 17%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "default": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "disabled": { - "highContrast": "hsla(160, 100%, 26%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "focus": { - "highContrast": "hsla(164, 100%, 17%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "hover": { - "highContrast": "hsla(163, 100%, 22%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.18)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "default": { - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "disabled": { - "lowContrast": "hsla(155, 100%, 31%, 0.09)", - }, - "focus": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(155, 100%, 31%, 0.18)", - }, - }, - }, - "border": { - "primary": { - "active": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "disabled": { - "highContrast": "hsla(149, 99%, 35%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "focus": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "default": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "disabled": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "hover": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - }, - }, - "icon": { - "link": { - "active": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(121, 65%, 71%, 1)", - }, - "focus": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "highContrast": "hsla(149, 99%, 35%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "focus": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - }, - }, - "text": { - "link": { - "active": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(121, 65%, 71%, 1)", - }, - "focus": { - "highContrast": "hsla(113, 69%, 83%, 1)", - "lowContrast": "hsla(163, 100%, 22%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 1)", - }, - }, - "primary": { - "active": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "highContrast": "hsla(149, 99%, 35%, 1)", - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "focus": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "highContrast": "hsla(107, 100%, 96%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - }, - "secondary": { - "active": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "default": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "disabled": { - "lowContrast": "hsla(155, 100%, 31%, 0.32)", - }, - "focus": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - "hover": { - "lowContrast": "hsla(160, 100%, 26%, 1)", - }, - }, - }, + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.64)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.8)", }, }, "text": { + "gray": { + "disabled": "hsla(211, 20%, 52%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(212, 39%, 16%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", + }, "information": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(193, 100%, 35%, 1)", + "disabled": "hsla(200, 84%, 44%, 0.32)", + "muted": "hsla(200, 90%, 65%, 1)", + "normal": "hsla(200, 84%, 37%, 1)", + "subtle": "hsla(200, 84%, 44%, 1)", }, "negative": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(8, 73%, 47%, 1)", + "disabled": "hsla(4, 74%, 49%, 0.32)", + "muted": "hsla(4, 93%, 68%, 1)", + "normal": "hsla(4, 74%, 49%, 1)", + "subtle": "hsla(4, 86%, 58%, 1)", }, "neutral": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", + "disabled": "hsla(211, 20%, 52%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(211, 33%, 21%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, "notice": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(38, 97%, 38%, 1)", + "disabled": "hsla(25, 90%, 48%, 0.32)", + "muted": "hsla(25, 100%, 63%, 1)", + "normal": "hsla(25, 85%, 42%, 1)", + "subtle": "hsla(25, 90%, 48%, 1)", + }, + "onPrimary": { + "disabled": "hsl(0, 0%, 100%)", + "muted": "hsl(0, 0%, 100%)", + "normal": "hsl(0, 0%, 100%)", + "subtle": "hsl(0, 0%, 100%)", }, "positive": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(160, 100%, 26%, 1)", + "disabled": "hsla(150, 100%, 32%, 0.32)", + "muted": "hsla(150, 59%, 55%, 1)", + "normal": "hsla(150, 100%, 27%, 1)", + "subtle": "hsla(150, 100%, 32%, 1)", + }, + "primary": { + "disabled": "hsl(332, 100%, 26%)", + "muted": "hsl(332, 100%, 26%)", + "normal": "hsl(332, 100%, 26%)", + "subtle": "hsl(332, 100%, 26%)", + }, + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.72)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.8)", + }, + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.64)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.8)", }, }, }, - "static": { - "white": "hsla(0, 0%, 100%, 1)", + "overlay": { + "background": { + "moderate": "hsla(211, 20%, 52%, 0.32)", + "subtle": "hsla(0, 0%, 0%, 0.56)", + }, }, - "surface": { - "action": { - "icon": { - "active": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", - }, - "default": { - "highContrast": "hsla(214, 21%, 94%, 0.32)", - "lowContrast": "hsla(214, 18%, 69%, 1)", - }, - "disabled": { - "highContrast": "hsla(216, 15%, 54%, 0.18)", - "lowContrast": "hsla(216, 15%, 54%, 0.18)", - }, - "focus": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", - }, - "hover": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", - }, - }, + "popup": { + "background": { + "intense": "hsla(211, 29%, 26%, 1)", + "subtle": "hsla(0, 0%, 100%, 1)", }, + "border": { + "intense": "hsla(211, 26%, 34%, 1)", + "subtle": "hsla(211, 20%, 52%, 0.18)", + }, + }, + "surface": { "background": { - "level1": { - "highContrast": "hsla(217, 56%, 17%, 1)", - "lowContrast": "hsla(220, 30%, 96%, 1)", + "cloud": { + "intense": "hsla(200, 61%, 20%, 1)", + "subtle": "hsla(198, 39%, 95%, 1)", + }, + "gray": { + "intense": "hsla(0, 0%, 100%, 1)", + "moderate": "hsla(210, 40%, 98%, 1)", + "subtle": "hsla(213, 47%, 96%, 1)", }, - "level2": { - "highContrast": "hsla(216, 44%, 23%, 1)", - "lowContrast": "hsla(0, 0%, 100%, 1)", + "primary": { + "intense": "hsl(332, 100%, 26%)", + "subtle": "hsl(332, 52%, 49%)", }, - "level3": { - "highContrast": "hsla(216, 33%, 29%, 1)", - "lowContrast": "hsla(220, 27%, 98%, 1)", + "sea": { + "intense": "hsla(180, 61%, 20%, 1)", + "subtle": "hsla(180, 39%, 95%, 1)", }, }, "border": { - "normal": { - "highContrast": "hsla(214, 21%, 94%, 0.18)", - "lowContrast": "hsla(216, 15%, 54%, 0.18)", + "gray": { + "muted": "hsla(211, 20%, 52%, 0.18)", + "normal": "hsla(211, 24%, 65%, 1)", + "subtle": "hsla(214, 28%, 84%, 1)", }, - "subtle": { - "highContrast": "hsla(214, 21%, 94%, 0.09)", - "lowContrast": "hsla(216, 15%, 54%, 0.09)", + "primary": { + "muted": "hsla(227, 100%, 59%, 0.18)", + "normal": "hsla(227, 100%, 59%, 1)", }, }, - "overlay": { - "background": { - "400": "hsla(214, 18%, 69%, 0.64)", - "800": "hsla(214, 15%, 18%, 0.64)", + "icon": { + "gray": { + "disabled": "hsla(211, 20%, 52%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(212, 39%, 16%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, - }, - "popup": { - "background": "hsla(0, 0%, 100%, 1)", - }, - "text": { - "muted": { - "highContrast": "hsla(218, 19%, 81%, 1)", - "lowContrast": "hsla(216, 16%, 60%, 1)", + "onCloud": { + "onIntense": "hsla(220, 100%, 73%, 1)", + "onSubtle": "hsla(223, 100%, 65%, 1)", }, - "normal": { - "highContrast": "hsla(0, 0%, 100%, 1)", - "lowContrast": "hsla(217, 56%, 17%, 1)", + "onSea": { + "onIntense": "hsla(150, 59%, 55%, 1)", + "onSubtle": "hsla(155, 100%, 31%, 1)", }, - "placeholder": { - "highContrast": "hsla(214, 18%, 69%, 1)", - "lowContrast": "hsla(214, 18%, 69%, 1)", + "primary": { + "normal": "hsl(332, 100%, 26%)", }, - "subdued": { - "highContrast": "hsla(216, 19%, 89%, 1)", - "lowContrast": "hsla(217, 18%, 45%, 1)", + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.56)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.72)", }, - "subtle": { - "highContrast": "hsla(220, 30%, 96%, 1)", - "lowContrast": "hsla(216, 27%, 36%, 1)", + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.48)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.88)", }, }, - }, - "white": { - "action": { - "background": { - "primary": { - "active": "hsla(216, 4%, 89%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.18)", - "focus": "hsla(216, 4%, 89%, 1)", - "hover": "hsla(216, 6%, 94%, 1)", - }, - "secondary": { - "active": "hsla(210, 6%, 94%, 0.32)", - "default": "hsla(214, 15%, 18%, 0)", - "disabled": "hsla(214, 15%, 18%, 0)", - "focus": "hsla(210, 6%, 94%, 0.32)", - "hover": "hsla(210, 6%, 94%, 0.18)", - }, - "tertiary": { - "active": "hsla(210, 6%, 94%, 0.32)", - "default": "hsla(210, 6%, 94%, 0.09)", - "disabled": "hsla(210, 6%, 94%, 0.09)", - "focus": "hsla(210, 6%, 94%, 0.32)", - "hover": "hsla(210, 6%, 94%, 0.18)", - }, + "text": { + "gray": { + "disabled": "hsla(211, 20%, 52%, 0.32)", + "muted": "hsla(211, 22%, 56%, 1)", + "normal": "hsla(212, 39%, 16%, 1)", + "subtle": "hsla(211, 26%, 34%, 1)", }, - "border": { - "primary": { - "active": "hsla(216, 4%, 89%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.18)", - "focus": "hsla(216, 4%, 89%, 1)", - "hover": "hsla(216, 6%, 94%, 1)", - }, - "secondary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, - "tertiary": { - "active": "hsla(214, 15%, 18%, 0)", - "default": "hsla(214, 15%, 18%, 0)", - "disabled": "hsla(214, 15%, 18%, 0)", - "focus": "hsla(214, 15%, 18%, 0)", - "hover": "hsla(214, 15%, 18%, 0)", - }, + "onCloud": { + "onIntense": "hsla(219, 95%, 85%, 1)", + "onSubtle": "hsla(227, 71%, 51%, 1)", }, - "icon": { - "link": { - "active": "hsla(214, 7%, 81%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(214, 7%, 81%, 1)", - "hover": "hsla(216, 4%, 89%, 1)", - "visited": "hsla(268, 100%, 79%, 1)", - }, - "primary": { - "active": "hsla(218, 89%, 51%, 1)", - "default": "hsla(218, 89%, 51%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(218, 89%, 51%, 1)", - "hover": "hsla(218, 89%, 51%, 1)", - }, - "secondary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, - "tertiary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, + "onSea": { + "onIntense": "hsla(150, 59%, 82%, 1)", + "onSubtle": "hsla(155, 100%, 21%, 1)", }, - "text": { - "link": { - "active": "hsla(214, 7%, 81%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(214, 7%, 81%, 1)", - "hover": "hsla(216, 4%, 89%, 1)", - "visited": "hsla(268, 100%, 79%, 1)", - }, - "primary": { - "active": "hsla(218, 89%, 51%, 1)", - "default": "hsla(218, 89%, 51%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(218, 89%, 51%, 1)", - "hover": "hsla(218, 89%, 51%, 1)", - }, - "secondary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, - "tertiary": { - "active": "hsla(0, 0%, 100%, 1)", - "default": "hsla(0, 0%, 100%, 1)", - "disabled": "hsla(210, 6%, 94%, 0.32)", - "focus": "hsla(0, 0%, 100%, 1)", - "hover": "hsla(0, 0%, 100%, 1)", - }, + "primary": { + "normal": "hsla(227, 100%, 59%, 1)", + }, + "staticBlack": { + "disabled": "hsla(0, 0%, 0%, 0.32)", + "muted": "hsla(0, 0%, 0%, 0.56)", + "normal": "hsla(0, 0%, 0%, 1)", + "subtle": "hsla(0, 0%, 0%, 0.72)", + }, + "staticWhite": { + "disabled": "hsla(0, 0%, 100%, 0.32)", + "muted": "hsla(0, 0%, 100%, 0.48)", + "normal": "hsla(0, 0%, 100%, 1)", + "subtle": "hsla(0, 0%, 100%, 0.88)", }, }, }, + "transparent": "hsla(0, 0%, 100%, 0)", }, }, "elevation": { @@ -3366,10 +1207,8 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = ` } } accessible={true} - activeBackgroundColor="hsl(332, 100%, 17%)" - activeBorderColor="hsl(332, 100%, 17%)" - borderRadius="2px" - borderWidth="1px" + borderRadius="4px" + borderWidth="0px" buttonPaddingBottom="0px" buttonPaddingLeft="20px" buttonPaddingRight="20px" @@ -3378,9 +1217,9 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = ` data-blade-component="button" defaultBackgroundColor="hsl(332, 100%, 26%)" defaultBorderColor="hsl(332, 100%, 26%)" - focusBackgroundColor="hsl(332, 100%, 20%)" - focusBorderColor="hsl(332, 100%, 20%)" - focusRingColor="hsla(332, 100%, 26%, 0.18)" + focusBackgroundColor="hsl(332, 100%, 23%)" + focusBorderColor="hsl(332, 100%, 23%)" + focusRingColor="hsla(227, 100%, 59%, 0.18)" focusable={true} hoverBackgroundColor="hsl(332, 100%, 23%)" hoverBorderColor="hsl(332, 100%, 23%)" @@ -3406,13 +1245,14 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = ` "alignSelf": "center", "backgroundColor": "hsl(332, 100%, 26%)", "borderColor": "hsl(332, 100%, 26%)", - "borderRadius": 2, + "borderRadius": 4, "borderStyle": "solid", - "borderWidth": 1, + "borderWidth": 0, "cursor": "pointer", "display": "flex", "justifyContent": "center", "minHeight": 36, + "overflow": "hidden", "paddingBottom": 0, "paddingLeft": 20, "paddingRight": 20, @@ -3447,19 +1287,21 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = ` "flexGrow": 1, "flexShrink": 1, "justifyContent": "center", + "zIndex": 1, }, { "opacity": 1, }, ] } + zIndex={1} > { expect( tinycolor.isReadable( - theme.colors.onLight.action.background.primary.default, - theme.colors.onLight.action.text.primary.default, + theme.colors.onLight.interactive.background.primary.default, + theme.colors.onLight.interactive.text.onPrimary.normal, { level: 'AAA', size: 'large', @@ -38,8 +38,8 @@ describe('createTheme', () => { ); expect( tinycolor.isReadable( - theme.colors.onLight.action.background.primary.default, - theme.colors.onLight.action.text.primary.default, + theme.colors.onLight.interactive.background.primary.default, + theme.colors.onLight.interactive.text.onPrimary.normal, { level: 'AAA', size: 'large', diff --git a/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx b/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx index e1211a9928e..5a88893c530 100644 --- a/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx +++ b/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx @@ -16,8 +16,8 @@ describe('createTheme', () => { expect( tinycolor.isReadable( - theme.colors.onLight.action.background.primary.default, - theme.colors.onLight.action.text.primary.default, + theme.colors.onLight.interactive.background.primary.default, + theme.colors.onLight.interactive.text.onPrimary.normal, { level: 'AAA', size: 'large', @@ -38,8 +38,8 @@ describe('createTheme', () => { ); expect( tinycolor.isReadable( - theme.colors.onLight.action.background.primary.default, - theme.colors.onLight.action.text.primary.default, + theme.colors.onLight.interactive.background.primary.default, + theme.colors.onLight.interactive.text.onPrimary.normal, { level: 'AAA', size: 'large', diff --git a/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts b/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts index 305b4729f53..98c9fcc4581 100644 --- a/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts +++ b/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts @@ -12,15 +12,17 @@ describe('overrideTheme', () => { const overrides = { colors: { onLight: { - brand: { - primary: { - 300: 'someothercolor', + surface: { + background: { + primary: { + intense: 'someothercolor', + }, }, }, feedback: { background: { positive: { - highContrast: 'someothercolor', + intense: 'someothercolor', }, }, }, @@ -29,9 +31,10 @@ describe('overrideTheme', () => { }; const overridenTheme: ThemeTokens = cloneDeep(bladeTheme); - overridenTheme.colors.onLight.brand.primary[300] = overrides.colors.onLight.brand.primary[300]; - overridenTheme.colors.onLight.feedback.background.positive.highContrast = - overrides.colors.onLight.feedback.background.positive.highContrast; + overridenTheme.colors.onLight.surface.background.primary.intense = + overrides.colors.onLight.surface.background.primary.intense; + overridenTheme.colors.onLight.feedback.background.positive.intense = + overrides.colors.onLight.feedback.background.positive.intense; const overrideThemeResult = overrideTheme({ baseThemeTokens: bladeTheme, overrides }); expect(overrideThemeResult).toEqual(overridenTheme); @@ -41,15 +44,17 @@ describe('overrideTheme', () => { const overrides = { colors: { onLight: { - brand: { - primary: { - 300: 'someothercolor', + surface: { + background: { + primary: { + intense: 'someothercolor', + }, }, }, feedback: { background: { positive: { - highContrast: 'someothercolor', + intense: 'someothercolor', }, }, }, @@ -58,9 +63,10 @@ describe('overrideTheme', () => { }; const overridenTheme: ThemeTokens = cloneDeep(bladeTheme); - overridenTheme.colors.onLight.brand.primary[300] = overrides.colors.onLight.brand.primary[300]; - overridenTheme.colors.onLight.feedback.background.positive.highContrast = - overrides.colors.onLight.feedback.background.positive.highContrast; + overridenTheme.colors.onLight.surface.background.primary.intense = + overrides.colors.onLight.surface.background.primary.intense; + overridenTheme.colors.onLight.feedback.background.positive.intense = + overrides.colors.onLight.feedback.background.positive.intense; const overrideThemeResult = overrideTheme({ baseThemeTokens: bladeTheme, overrides }); expect(overrideThemeResult).toEqual(overridenTheme); @@ -71,16 +77,18 @@ describe('overrideTheme', () => { const overrides = { colors: { onLight: { - brand: { - primary: { - // this will fail the test since empty value is not allowed - 300: '', + surface: { + background: { + primary: { + // this will fail test since empty values are not allowed + intense: '', + }, }, }, feedback: { background: { positive: { - highContrast: 'someothercolor', + intense: 'someothercolor', }, }, }, @@ -102,16 +110,18 @@ describe('overrideTheme', () => { const invalidBaseTheme = { colors: { onLight: { - brand: { - primary: { - // this will fail the test since empty value is not allowed - 300: '', + surface: { + background: { + primary: { + // this will fail test since empty values are not allowed + intense: '', + }, }, }, feedback: { background: { positive: { - highContrast: 'someothercolor', + intense: 'someothercolor', }, }, }, diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts index 7485bfbeafb..ff2ceae5cc1 100644 --- a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts @@ -4,7 +4,12 @@ import { getFocusRingStyles } from './getFocusRingStyles'; describe('getFocusRingStyles', () => { it('should return correct styles when called with valid parameters', () => { const result = getFocusRingStyles({ - theme: { ...bladeTheme, colors: bladeTheme.colors.onLight }, + theme: { + ...bladeTheme, + colors: bladeTheme.colors.onLight, + elevation: bladeTheme.elevation.onLight, + typography: bladeTheme.typography.onDesktop, + }, }); expect(result).toMatchObject({}); }); diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts index 178fca68b3d..76a9f63dd7d 100644 --- a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts @@ -4,7 +4,12 @@ import { getFocusRingStyles } from './getFocusRingStyles'; describe('getFocusRingStyles', () => { it('should return correct styles when called with valid parameters', () => { const result = getFocusRingStyles({ - theme: { ...bladeTheme, colors: bladeTheme.colors.onLight }, + theme: { + ...bladeTheme, + colors: bladeTheme.colors.onLight, + elevation: bladeTheme.elevation.onLight, + typography: bladeTheme.typography.onDesktop, + }, }); expect(result).toMatchObject({ outline: '4px solid hsla(227, 100%, 59%, 0.18)', diff --git a/packages/blade/src/utils/lodashButBetter/get.test.ts b/packages/blade/src/utils/lodashButBetter/get.test.ts index b1cb6e3d2ea..7facdddc29e 100644 --- a/packages/blade/src/utils/lodashButBetter/get.test.ts +++ b/packages/blade/src/utils/lodashButBetter/get.test.ts @@ -6,26 +6,32 @@ describe('lodashButBetter/get', () => { }); it('should fallback to default value', () => { + // @ts-expect-error expect(get({ a: { b: 2 } }, 'a.c', 3)).toBe(3); }); it('should return undefined if no default value', () => { + // @ts-expect-error expect(get({ a: { b: 2 } }, 'a.c')).toBe(undefined); }); it('should return objects', () => { + // @ts-expect-error expect(get({ a: { b: 2 } }, 'a')).toEqual({ b: 2 }); }); it('should return arrays', () => { + // @ts-expect-error expect(get({ a: { b: [2] } }, 'a')).toEqual({ b: [2] }); }); it('should return undefined if no object', () => { + // @ts-expect-error expect(get({}, 'a.c')).toBe(undefined); }); it('should return undefined if no path', () => { + // @ts-expect-error expect(get({ a: { b: 2 } }, '')).toBe(undefined); }); diff --git a/packages/blade/tsconfig.json b/packages/blade/tsconfig.json index 88b8f87efde..07b5193f090 100644 --- a/packages/blade/tsconfig.json +++ b/packages/blade/tsconfig.json @@ -1,12 +1,6 @@ { "extends": "../../tsconfig.json", - "include": [ - "src/components/index.ts", - "src/tokens/index.ts", - "src/utils/index.ts", - "src/@types/globals.d.ts" - ], - // "include": ["src"], + "include": ["src"], "compilerOptions": { "baseUrl": ".", "paths": {