diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts index e6d3c5b4c91..d47dc56660a 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts @@ -9,6 +9,12 @@ it('should migrate the Amount component', async () => { <> + + + + + + @@ -27,6 +33,14 @@ it('should migrate the Amount component', async () => { + + + + + + + + @@ -57,7 +71,13 @@ it('should migrate the Amount component', async () => { expect(result).toMatchInlineSnapshot(` "const App = () => ( <> - + + + + + + + @@ -77,6 +97,14 @@ it('should migrate the Amount component', async () => { + + + + + + + + diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts index 60c73d19a1d..03bc95e15da 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts @@ -76,7 +76,9 @@ it('should migrate the Card component', async () => { prefix={} suffix={} /> - } /> + } + /> Hello World @@ -91,7 +93,7 @@ it('should migrate the Card component', async () => { expect(result).toMatchInlineSnapshot(` "const App = () => ( <> - + Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more. @@ -99,7 +101,7 @@ it('should migrate the Card component', async () => { - + Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more. @@ -160,7 +162,13 @@ it('should migrate the Card component', async () => { prefix={} suffix={} /> - } /> + } + /> Hello World diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts index 2ac6136a093..408623f3a94 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts @@ -120,8 +120,8 @@ it('should update the theme in BladeProvider', async () => { ); expect(result).toMatchInlineSnapshot(` - "import { BladeProvider } from "@razorpay/blade-rebranded/components"; - import { bladeTheme } from "@razorpay/blade-rebranded/tokens"; + "import { BladeProvider } from '@razorpay/blade/components'; + import { bladeTheme } from '@razorpay/blade/tokens'; const AppWrapper = () => { return ( @@ -156,8 +156,8 @@ it('should update the theme in BladeProvider', async () => { ); expect(result).toMatchInlineSnapshot(` - "import { BladeProvider } from "@razorpay/blade-rebranded/components"; - import { bladeTheme } from "@razorpay/blade-rebranded/tokens"; + "import { BladeProvider } from '@razorpay/blade/components'; + import { bladeTheme } from '@razorpay/blade/tokens'; const AppWrapper = () => { return ( diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts index d270d39bdb2..c3a8ebc9d7d 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts @@ -121,6 +121,10 @@ it('should remove variant/intent prop in favor of color prop', async () => { + + + + ); `, @@ -185,13 +189,17 @@ it('should remove variant/intent prop in favor of color prop', async () => { No - + - + + + + + );" `); diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts new file mode 100644 index 00000000000..91638cebcb6 --- /dev/null +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts @@ -0,0 +1,182 @@ +import { applyTransform } from '@hypermod/utils'; +import * as transformer from '..'; + +it('should migrate the ActionList component', async () => { + const result = await applyTransform( + transformer, + ` + const App = () => ( + <> + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + ); + `, + { parser: 'tsx' }, + ); + + expect(result).toMatchInlineSnapshot(` + "const App = () => ( + <> + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + );" + `); +}); diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts index 68d2f8898cb..c0129b1a246 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts @@ -333,7 +333,7 @@ it('should correctly convert Title to Heading component', async () => { ); expect(result).toMatchInlineSnapshot(` - "import { Heading } from "@razorpay/blade-rebranded/components"; + "import { Heading } from '@razorpay/blade/components'; const App = () => ( <> Lorem ipsum diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts index dbe368f984e..4b810997526 100644 --- a/packages/blade/codemods/brand-refresh/transformers/index.ts +++ b/packages/blade/codemods/brand-refresh/transformers/index.ts @@ -5,7 +5,7 @@ import migrateCardComponent from './migrate-card'; import migrateBadgeComponent from './migrate-badge'; import migrateContrastIntentAndColorProps from './migrate-contrast-intent-color-props'; import migrateTypographyComponents from './migrate-typography'; -import migrateActionListComponent from './migrate-actionlist'; +import migrateActionListAndTable from './migrate-actionlist-and-table'; import { red, isExpression } from './utils'; // eslint-disable-next-line import/extensions import colorTokensMapping from './colorTokensMapping.json'; @@ -92,14 +92,22 @@ const transformer: Transform = (file, api, options) => { // Update the themeTokens prop in BladeProvider try { root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'BladeProvider') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'themeTokens') - .replaceWith((path) => { - path.node.value.expression.name = 'bladeTheme'; + .find(j.JSXElement, { + openingElement: { + name: { + name: 'BladeProvider', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'themeTokens', + }, + }) + .replaceWith(({ node }) => { + node.value.expression.name = 'bladeTheme'; - return path.node; + return node; }); } catch (error) { console.error( @@ -113,13 +121,19 @@ const transformer: Transform = (file, api, options) => { // Update color token value based on the context try { root - .find(j.JSXElement) - .filter((path) => - /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(path.value.openingElement.name.name), - ) + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(name), + }, + }, + }) // Find all color props - .find(j.JSXAttribute) - .filter((path) => path.node.name.name.toLowerCase().includes('color')) + .find(j.JSXAttribute, { + name: { + name: (name) => name.toLowerCase().includes('color'), + }, + }) .replaceWith((path) => { const { node, parent } = path; @@ -174,27 +188,22 @@ const transformer: Transform = (file, api, options) => { migrateCardComponent({ root, j, file }); migrateAmountComponent({ root, j, file }); migrateDividerComponent({ root, j, file }); - migrateActionListComponent({ root, j, file }); + migrateActionListAndTable({ root, j, file }); migrateDropdownComponent({ root, j, file }); - // Update ImportDeclaration from "@razorpay/blade/components" to "@razorpay/blade-rebranded/components" // Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme" try { root - .find(j.ImportDeclaration) - .filter((path) => - /@razorpay\/blade\/(components|utils|tokens)/i.test(path.value.source.value as string), - ) - .replaceWith((path) => { - path.value.source.value = (path.value.source.value as string).replace( - 'blade', - 'blade-rebranded', - ); - - return path.node; + .find(j.ImportDeclaration, { + source: { + value: '@razorpay/blade/tokens', + }, + }) + .find(j.ImportSpecifier, { + imported: { + name: (name) => ['paymentTheme', 'bankingTheme'].includes(name), + }, }) - .find(j.ImportSpecifier) - .filter((path) => ['paymentTheme', 'bankingTheme'].includes(path.value.imported.name)) .replaceWith((path) => { path.value.imported.name = 'bladeTheme'; @@ -203,7 +212,7 @@ const transformer: Transform = (file, api, options) => { } catch (error) { console.error( red( - `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportDeclaration from "@razorpay/blade" to "@razorpay/blade-rebranded".`, + `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme".`, ), `\n${red(error.stack)}\n`, ); diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts new file mode 100644 index 00000000000..f4e2ae0c257 --- /dev/null +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts @@ -0,0 +1,32 @@ +import { red } from './utils'; + +function migrateActionListAndTable({ root, j, file }): void { + // ActionList & Table components: Remove the `surfaceLevel` prop + // -> + // ->
+ try { + root + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['ActionList', 'Table'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'surfaceLevel', + }, + }) + .remove(); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while removing the "surfaceLevel" prop from "ActionList"/"Table".`, + ), + `\n${red(error.stack)}\n`, + ); + } +} + +export default migrateActionListAndTable; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts deleted file mode 100644 index c0e6e7bc8d8..00000000000 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { red } from './utils'; - -function migrateActionListComponent({ root, j, file }): void { - // ActionList component: Remove surfaceLevel prop - // -> - try { - root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'ActionList') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'surfaceLevel') - .remove(); - } catch (error) { - console.error( - red( - `⛔️ ${file.path}: Oops! Ran into an issue while removing the "surfaceLevel" prop from "ActionList".`, - ), - `\n${red(error.stack)}\n`, - ); - } -} - -export default migrateActionListComponent; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts index d7b0800ee51..fe3244cecf0 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts @@ -1,13 +1,17 @@ import { red, isExpression } from './utils'; -// Amount component -> +// Amount component: changes to intent & size props function migrateAmountComponent({ root, j, file }): void { try { + // -> root - .find(j.JSXElement) - .filter((path) => - ['Amount', 'CardHeaderAmount'].includes(path.value.openingElement.name.name), - ) + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Amount', 'CardHeaderAmount'].includes(name), + }, + }, + }) .replaceWith((path) => { const { node } = path; @@ -95,7 +99,41 @@ function migrateAmountComponent({ root, j, file }): void { }); } catch (error) { console.error( - red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Amount component.`), + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "size" prop in "Amount" component.`, + ), + `\n${red(error.stack)}\n`, + ); + } + + // -> + try { + root + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Amount', 'CardHeaderAmount'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: (name) => name === 'intent', + }, + }) + .replaceWith((path) => { + const { node } = path; + + node.name.name = 'color'; + node.value.value = `feedback.text.${node.value.value}.intense`; + + return node; + }); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "intent" prop in "Amount" component.`, + ), `\n${red(error.stack)}\n`, ); } diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts index 847fd30fa06..6820da24da5 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts @@ -4,14 +4,18 @@ import { red } from './utils'; function migrateBadgeComponent({ root, j, file }): void { try { root - .find(j.JSXElement) - .filter( - (path) => - path.value.openingElement.name.name === 'Badge' || - path.value.openingElement.name.name === 'CardHeaderBadge', - ) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'fontWeight') + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Badge', 'CardHeaderBadge'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'fontWeight', + }, + }) .remove(); } catch (error) { console.error( diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts index cdb6c29021b..e2e7baa1e0d 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts @@ -1,28 +1,35 @@ import { red } from './utils'; -// Card component Migration -// -> -function migrateCardComponent({ root, j, file }): void { +// Card components Migration +// -> +function migrateCardAndTable({ root, j, file }): void { try { root - .find(j.JSXElement) - .filter((path) => ['Card'].includes(path.value.openingElement.name.name)) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'surfaceLevel') + .find(j.JSXElement, { + openingElement: { + name: { + name: 'Card', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'surfaceLevel', + }, + }) .replaceWith((path) => { const { node } = path; const surfaceLevelMap = { - 2: 'surface.background.gray.intense', - 3: 'surface.background.gray.moderate', + 1: 'surface.background.subtle', + 2: 'surface.background.gray.moderate', + 3: 'surface.background.gray.intense', }; node.name.name = 'backgroundColor'; node.value = j.literal(surfaceLevelMap[node.value.expression.value]); - delete node.value.expression; - return node; }); } catch (error) { @@ -33,4 +40,4 @@ function migrateCardComponent({ root, j, file }): void { } } -export default migrateCardComponent; +export default migrateCardAndTable; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts index fb80ce75038..576e7973b70 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts @@ -4,13 +4,17 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Break `contrast="high"` prop from Typography & ProgressBar Components try { root - .find(j.JSXElement) - .filter((path) => - ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes( - path.value.openingElement.name.name, - ), - ) - .find(j.JSXAttribute) // Find all props + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => + ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes( + name, + ), + }, + }, + }) + .find(j.JSXAttribute) .filter( (path, index, self) => ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes( @@ -36,19 +40,26 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis` try { root - .find(j.JSXElement) - .filter((path) => - [ - 'Badge', - 'Counter', - 'IconButton', - 'Alert', - 'CardHeaderBadge', - 'CardHeaderCounter', - ].includes(path.value.openingElement.name.name), - ) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'contrast') + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => + [ + 'Badge', + 'Counter', + 'IconButton', + 'Alert', + 'CardHeaderBadge', + 'CardHeaderCounter', + ].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'contrast', + }, + }) .replaceWith((path) => { path.node.name.name = 'emphasis'; @@ -85,13 +96,58 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { ); } + // Spinner: Change `contrast` prop to `color` + // -> + try { + root + .find(j.JSXElement, { + openingElement: { + name: { + name: 'Spinner', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'contrast', + }, + }) + .replaceWith((path) => { + path.node.name.name = 'color'; + + const contrastToColorMap = { + high: 'white', + low: 'primary', + }; + + path.node.value.value = contrastToColorMap[path.node.value.value]; + + return path.node; + }); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "contrast" prop in Spinner.`, + ), + `\n${red(error.stack)}\n`, + ); + } + // Remove 'contrast' prop from the Skeleton Component try { root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'Skeleton') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'contrast') + .find(j.JSXElement, { + openingElement: { + name: { + name: 'Skeleton', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'contrast', + }, + }) .remove(); } catch (error) { console.error( @@ -105,22 +161,24 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Remove deprecated 'intent'/'variant' props in favor of color try { root - .find(j.JSXElement) - .filter((path) => - [ - 'Alert', - 'Badge', - 'Counter', - 'Chip', - 'ChipGroup', - 'Indicator', - 'ProgressBar', - 'Amount', - 'CardHeaderBadge', - 'CardHeaderCounter', - 'CardHeaderAmount', - ].includes(path.value.openingElement.name.name), - ) + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => + [ + 'Alert', + 'Badge', + 'Counter', + 'Chip', + 'ChipGroup', + 'Indicator', + 'ProgressBar', + 'CardHeaderBadge', + 'CardHeaderCounter', + ].includes(name), + }, + }, + }) .replaceWith((path) => { const { node } = path; @@ -165,11 +223,14 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { return node; }) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'intent' || path.node.name.name === 'variant') + .find(j.JSXAttribute, { + name: { + name: (name) => name === 'intent' || name === 'variant', + }, + }) + // Remove duplicate intent/variant props .filter( (path, index, self) => - (path.node.name.name === 'intent' || path.node.name.name === 'variant') && index === self.findIndex((obj) => path.node.start === obj.node.start), ) .replaceWith((path) => { @@ -189,27 +250,38 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { ); } - // Change color="default" to color="primary" in Button/Link/Badge/Counter/Chip/ChipGroup + // Change color="default" to color="primary" in Button/Link/Badge/Counter/Chip/ChipGroup/Spinner //

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/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 22998a74a89..637a1dc5994 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -14,6 +14,7 @@ import { checkboxCellWidth, firstColumnStickyHeaderFooterZIndex, refreshWrapperZIndex, + tableBackgroundColor, tablePagination, } from './tokens'; import type { TableProps, TableNode, Identifier } from './types'; @@ -124,7 +125,6 @@ const _Table = ({ gridTemplateColumns, isLoading = false, isRefreshing = false, - backgroundColor = 'surface.background.gray.intense', ...styledProps }: TableProps): React.ReactElement => { const { theme } = useTheme(); @@ -133,6 +133,7 @@ const _Table = ({ const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0); // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; + const backgroundColor = tableBackgroundColor; const { isEntering: isRefreshSpinnerEntering, 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/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts index fb8458173a9..aaed2dc6950 100644 --- a/packages/blade/src/components/Table/tokens.ts +++ b/packages/blade/src/components/Table/tokens.ts @@ -6,6 +6,7 @@ const refreshWrapperZIndex = 3; const checkboxCellWidth = size['44']; +const tableBackgroundColor = 'surface.background.gray.intense'; const tableHeader = { paddingTop: 'spacing.5', paddingBottom: 'spacing.5', @@ -126,6 +127,7 @@ export { tableToolbar, tablePagination, refreshWrapperZIndex, + tableBackgroundColor, firstColumnStickyHeaderFooterZIndex, checkboxCellWidth, }; diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 05b56cf56d9..50965363e4d 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -140,10 +140,6 @@ type TableProps = { * The default value is `repeat(${columnCount},minmax(100px, 1fr))`. **/ gridTemplateColumns?: string; - /** - * background color of the table - **/ - backgroundColor?: TableBackgroundColors; /** * The isLoading prop determines whether the table is loading or not. * The default value is `false`. 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/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts index 82c9e420d45..e9331fdf3b4 100644 --- a/packages/blade/src/tokens/theme/theme.ts +++ b/packages/blade/src/tokens/theme/theme.ts @@ -10,7 +10,6 @@ import type { export type ColorSchemeNames = 'dark' | 'light'; export type ColorSchemeNamesInput = ColorSchemeNames | 'system'; -export type SurfaceLevels = 1 | 2 | 3; export type ColorSchemeModes = 'onDark' | 'onLight'; 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": { diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index ff1f2f4c8fb..b19cf622848 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -12,41 +12,7 @@ All the rebranding upgrade activity starts at the design end and is then followe **Step 2:** Install new fonts (Inter & Tasa) by following [this file](https://blade.razorpay.com/?path=/docs/guides-installation--docs#-installing-fonts). -**Step 3:** The migration should be done page by page. Wrap your page that needs to be migrated under `BladeProvider` imported from `@razorpay/blade-rebranded`. Till the time the migration is not complete, you will have to maintain two versions of Blade in your project. To do that, you can use the `BladeProvider` component from different versions of Blade in different parts of your app. - -```jsx -// HomePage.tsx -import { BladeProvider } from '@razorpay/blade-rebranded'; // <-- v11 -import { bladeTheme } from '@razorpay/blade-rebranded/tokens'; - -const HomePage = () => { - return ( - -
- Hello World -
- - ); -}; -``` - -```jsx -// OldPage.tsx (v10) -import { BladeProvider } from '@razorpay/blade'; // <-- v10 -import { paymentTheme } from '@razorpay/blade/tokens'; - -const OldPage = () => { - return ( - -
- Hello World -
- - ); -}; -``` - -**Step 4:** The codemod will update the components to the new version of Blade. Execute the codemod on the file/directory that needs to be migrated for the page via the following command: +**Step 3:** The codemod will update the components to the new version of Blade. Execute the codemod on the file/directory that needs to be migrated for the page via the following command: > Need help? Check out [jscodeshift docs](https://github.com/facebook/jscodeshift) for CLI usage tips. @@ -158,6 +124,22 @@ Only use this if you're unable to run the codemod described above. + ``` +- **The `intent` prop has been removed in favor of the `color` prop.** + + ```diff + - + + + + - + + + + - + + + + - + + + ``` + ### Alert - **The `contrast` prop has been removed in favor of the new `emphasis` prop.** @@ -322,10 +304,10 @@ Only use this if you're unable to run the codemod described above. ```diff - Hello - + Hello + + Hello - Hello - + Hello + + Hello ``` - The `CardHeaderBadge`, `CardHeaderCounter`, `CardHeaderAmount`, `CardHeaderText`, `CardHeaderLink`, and `CardHeaderIconButton` components have the same changes as `Badge`, `Counter`, `Amount`, `Text`, `Link`, and `Button` components respectively. @@ -465,3 +447,31 @@ Only use this if you're unable to run the codemod described above. - + ``` + +### Spinner + +- **The `contrast` prop has been removed in favor of the `color` prop.** + + ```diff + - + + + + - + + + ``` + +- **The `"default"` value for the `color` prop has been removed in favor of the new `"primary"` value.** + + ```diff + - + + + ``` + +### Table + +- **The `surfaceLevel` prop has been removed without replacement.** + + ```diff + -
+ +
+ ```