From a9ca50d85f89e62500eb3b10fa7a791bdf88e196 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 29 Nov 2023 14:06:37 +0530 Subject: [PATCH 01/98] feat(Rebranding / Typography): font-family changes (#1804) * feat: add fonts file and css * feat: add fonts to files * feat: add fonts export * feat: add lighter font * add display swap for tasa * feat: change font family tokens * feat: add heading font family for native * feat: change font for storybook * feat: add fonts from csb * feat: use inter variable font * feat: generate razorpay's latin fonts * fix: unicode range * refactor: remove unused fonts * fix: standardise font file names * fix: blade-extra name --- .../blade/.storybook/react/manager-head.html | 4 +- packages/blade/.storybook/react/manager.js | 9 +- .../blade/.storybook/react/preview-head.html | 5 +- packages/blade/fonts.css | 82 ++++++++++++++++++ .../inter-variable/inter-cyrillic-extra.woff2 | Bin 0 -> 27284 bytes .../fonts/inter-variable/inter-cyrillic.woff2 | Bin 0 -> 17600 bytes .../inter-variable/inter-greek-extra.woff2 | Bin 0 -> 12732 bytes .../fonts/inter-variable/inter-greek.woff2 | Bin 0 -> 22480 bytes .../inter-latin-blade-extra.woff2 | Bin 0 -> 107068 bytes .../inter-variable/inter-latin-blade.woff2 | Bin 0 -> 80320 bytes .../inter-variable/inter-vietnamese.woff2 | Bin 0 -> 10540 bytes packages/blade/fonts/tasa-orbiter.woff2 | Bin 0 -> 33684 bytes packages/blade/package.json | 7 +- .../global/fontFamily/fontFamily.native.ts | 3 +- .../global/fontFamily/fontFamily.web.ts | 6 +- .../src/tokens/global/fontFamily/types.ts | 4 +- .../src/utils/storybook/Sandbox/baseCode.ts | 7 +- 17 files changed, 106 insertions(+), 21 deletions(-) create mode 100644 packages/blade/fonts.css create mode 100644 packages/blade/fonts/inter-variable/inter-cyrillic-extra.woff2 create mode 100644 packages/blade/fonts/inter-variable/inter-cyrillic.woff2 create mode 100644 packages/blade/fonts/inter-variable/inter-greek-extra.woff2 create mode 100644 packages/blade/fonts/inter-variable/inter-greek.woff2 create mode 100644 packages/blade/fonts/inter-variable/inter-latin-blade-extra.woff2 create mode 100644 packages/blade/fonts/inter-variable/inter-latin-blade.woff2 create mode 100644 packages/blade/fonts/inter-variable/inter-vietnamese.woff2 create mode 100644 packages/blade/fonts/tasa-orbiter.woff2 diff --git a/packages/blade/.storybook/react/manager-head.html b/packages/blade/.storybook/react/manager-head.html index 54f0f21b83a..9a048367f18 100644 --- a/packages/blade/.storybook/react/manager-head.html +++ b/packages/blade/.storybook/react/manager-head.html @@ -1,6 +1,4 @@ - - - + - - + + \ No newline at end of file diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx index 13d35f7f9b8..f328d05855d 100644 --- a/packages/blade/.storybook/react/preview.tsx +++ b/packages/blade/.storybook/react/preview.tsx @@ -92,6 +92,23 @@ export const parameters = { font-size: 14px; cursor: pointer; `, + a: styled.a` + color: ${theme.colorPrimary}; + font-weight: 500; + `, + // Setting font-weight back to 600 in headings since storybook tries to override it + ...(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce>( + (headingOverride, headingLevel) => { + headingOverride[headingLevel] = styled[headingLevel]` + & a { + font-weight: 600; + } + `; + + return headingOverride; + }, + {}, + ), }, }, }; diff --git a/packages/blade/docs/guides/Intro.stories.mdx b/packages/blade/docs/guides/Intro.stories.mdx index 92b22c58c90..54c3849eda8 100644 --- a/packages/blade/docs/guides/Intro.stories.mdx +++ b/packages/blade/docs/guides/Intro.stories.mdx @@ -11,21 +11,20 @@ import { Meta } from '@storybook/addon-docs'; />


-

+

Blade Latest Version -    Open for Contributions -

+

Blade is the Design System that powers [Razorpay](https://razorpay.com/) @@ -36,7 +35,7 @@ Blade is the Design System that powers [Razorpay](https://razorpay.com/) - We are currently working on migrating all the components from the old version of Blade to this new rebranded version. - Read more about the [rebranding & migration steps here](https://docs.google.com/document/d/1PLwUqx8LyfMeDW4u9CjwKHtSCpT1_sYUYtW_jwpLyDA/edit) - Check the current [availability status of rebranded components here](http://localhost:9009/?path=/docs/guides-component-status--docs) -- Refer the older [documentation of Blade (before v11.0.0) here](https://61c19ee8d3d282003ac1d81c-sxbagrtiwq.chromatic.com/) +- Refer the older [documentation of Blade (before v11.0.0) here](https://v10--61c19ee8d3d282003ac1d81c.chromatic.com/) ## 🔗 Links From 5a4ca060194a982df5f11d5e4ff688ab67570603 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Thu, 4 Jan 2024 11:33:37 +0530 Subject: [PATCH 66/98] chore: change text caption size to `small` instead of `medium` (#1928) --- packages/blade/src/components/Form/FormLabel.tsx | 2 +- packages/blade/src/components/Typography/Text/Text.tsx | 4 ++-- .../Typography/Text/__tests__/Text.native.test.tsx | 8 ++++---- .../Typography/Text/__tests__/Text.web.test.tsx | 8 ++++---- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/blade/src/components/Form/FormLabel.tsx b/packages/blade/src/components/Form/FormLabel.tsx index d14554c6ee5..e00886eb0b0 100644 --- a/packages/blade/src/components/Form/FormLabel.tsx +++ b/packages/blade/src/components/Form/FormLabel.tsx @@ -69,7 +69,7 @@ const FormLabel = ({ if (necessityIndicator === 'optional') { necessityLabel = ( - + (optional) ); diff --git a/packages/blade/src/components/Typography/Text/Text.tsx b/packages/blade/src/components/Typography/Text/Text.tsx index b6a7e068f70..6913092290b 100644 --- a/packages/blade/src/components/Typography/Text/Text.tsx +++ b/packages/blade/src/components/Typography/Text/Text.tsx @@ -37,7 +37,7 @@ type TextBodyVariant = TextCommonProps & { type TextCaptionVariant = TextCommonProps & { variant?: Extract; - size?: Extract; + size?: Extract; }; /** @@ -101,7 +101,7 @@ const getTextProps = ({ } } if (variant === 'caption') { - if (size === 'medium') { + if (size === 'small') { props.fontSize = 50; props.lineHeight = 50; props.fontWeight = 'regular'; 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 1a61d3a0d51..b0c65e19a50 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 @@ -86,22 +86,22 @@ describe('', () => { expect(toJSON()).toMatchSnapshot(); }); - it('should throw error when variant is "caption" and size "small" is passed', () => { + it('should throw error when variant is "caption" and size "medium" is passed', () => { const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); const displayText = 'Displaying some text'; expect(() => renderWithTheme( - // @ts-expect-error testing failure case when size='small' is passed with variant='caption' + // @ts-expect-error testing failure case when size='medium' is passed with variant='caption' {displayText} , ), - ).toThrow(`[Blade: Text]: size cannot be 'small' when variant is 'caption'`); + ).toThrow(`[Blade: Text]: size cannot be 'medium' when variant is 'caption'`); mockConsoleError.mockRestore(); }); 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 51b7ad62203..f590a301806 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 @@ -80,22 +80,22 @@ describe('', () => { expect(container).toMatchSnapshot(); }); - it('should throw error when variant is "caption" and size "small" is passed', () => { + it('should throw error when variant is "caption" and size "medium" is passed', () => { const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); const displayText = 'Displaying some text'; expect(() => renderWithTheme( - // @ts-expect-error testing failure case when size='small' is passed with variant='caption' + // @ts-expect-error testing failure case when size='medium' is passed with variant='caption' {displayText} , ), - ).toThrow(`[Blade: Text]: size cannot be 'small' when variant is 'caption'`); + ).toThrow(`[Blade: Text]: size cannot be 'medium' when variant is 'caption'`); mockConsoleError.mockRestore(); }); From 29f10974c6049bf32b021b93f47eeb93caedac64 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 4 Jan 2024 11:35:02 +0530 Subject: [PATCH 67/98] feat: add codemod for Text component migration (#1926) --- .../__tests__/migrate-colors.test.ts | 2 +- .../__tests__/migrate-typography.test.ts | 30 +++++++++++++++++++ .../brand-refresh/transformers/index.ts | 24 +++++++++++++++ packages/blade/jest.web.config.js | 1 + packages/blade/upgrade-v11.md | 7 +++++ 5 files changed, 63 insertions(+), 1 deletion(-) 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 faf4bf96cd4..9611987ff30 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 @@ -61,7 +61,7 @@ it('should update token values contextually', async () => { - + );" `); 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 5101574700a..a0a9086a0e5 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 @@ -216,6 +216,36 @@ it('should update to ', async `); }); +it('should update to ', async () => { + const result = await applyTransform( + transformer, + ` + const App = () => ( + <> + // size="medium" should not be changed if variant is not "caption" + Lorem ipsum + Lorem ipsum + Lorem ipsum + Lorem ipsum Lorem ipsum + + ); + `, + { parser: 'tsx' }, + ); + + expect(result).toMatchInlineSnapshot(` + "const App = () => ( + <> + // size="medium" should not be changed if variant is not "caption" + Lorem ipsum + Lorem ipsum + Lorem ipsum + Lorem ipsum Lorem ipsum + + );" + `); +}); + it('should update to ', async () => { const result = await applyTransform( transformer, diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts index 0007b3836a1..fe71c8737c0 100644 --- a/packages/blade/codemods/brand-refresh/transformers/index.ts +++ b/packages/blade/codemods/brand-refresh/transformers/index.ts @@ -179,6 +179,30 @@ const transformer: Transform = (file, api, options) => { ['Text', 'Title', 'Code', 'Display', 'Heading'].includes(path.value.openingElement.name.name), ); + // Update to + try { + typographyJSXElements + .filter( + (path) => + path.value.openingElement.name.name === 'Text' && + path.value.openingElement.attributes.some( + (attribute) => + attribute.name?.name === 'variant' && attribute.value?.value === 'caption', + ), + ) + .find(j.JSXAttribute) + .filter((path) => path.node.name.name === 'size' && path.node.value.value === 'medium') + .replaceWith((path) => { + path.node.value.value = 'small'; + return path.node; + }); + } catch (error) { + console.error( + red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Text size prop.`), + `\n${red(error.stack)}\n`, + ); + } + // Update to , // , to , and // to diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js index 95671da7aab..4e8c3ad99ed 100644 --- a/packages/blade/jest.web.config.js +++ b/packages/blade/jest.web.config.js @@ -17,6 +17,7 @@ const baseConfig = { testMatch: [ ...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`), '**/Icons/*Icon/*.web.test.{ts,tsx}', + '**/codemods/**/*.test.{ts,tsx}', ], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index 7a25c984892..866c21276e9 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -218,6 +218,13 @@ Only use this if you're unable to run the codemod described above. + Hello ``` +- **The `caption` variant of the `Text` component now accepts only `size="small"`.** + + ```diff + - Hello + + Hello + ``` + - **The `weight` prop now accepts `"semibold"` instead of `"bold"` in the ` Text`, `Heading` , & `Display` components. The `Code` component continues to accept `"bold"`.** ```diff From 89f115937e594742ab4471257b33013c42fbd2bc Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Tue, 9 Jan 2024 14:37:46 +0530 Subject: [PATCH 68/98] feat(Card): add support for CardHeaderAmount (#1940) * feat: add support for CardHeaderAmount in Card * fix: tests --- .../src/components/Card/Card.stories.tsx | 2 ++ .../blade/src/components/Card/CardHeader.tsx | 20 +++++++++++-------- .../Card/__tests__/Card.native.test.tsx | 2 +- .../Card/__tests__/Card.web.test.tsx | 2 +- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/blade/src/components/Card/Card.stories.tsx b/packages/blade/src/components/Card/Card.stories.tsx index 3bf46ede3f4..d2a48720765 100644 --- a/packages/blade/src/components/Card/Card.stories.tsx +++ b/packages/blade/src/components/Card/Card.stories.tsx @@ -17,6 +17,7 @@ import { CardHeaderBadge, CardHeaderIconButton, CardHeaderLink, + CardHeaderAmount, CardHeaderText, } from './'; import { Sandbox } from '~utils/storybook/Sandbox'; @@ -151,6 +152,7 @@ const visual = { Text: $100, IconButton: , Badge: NEW, + Amount: , }; export default { diff --git a/packages/blade/src/components/Card/CardHeader.tsx b/packages/blade/src/components/Card/CardHeader.tsx index 55745d97d31..25f1f5a0851 100644 --- a/packages/blade/src/components/Card/CardHeader.tsx +++ b/packages/blade/src/components/Card/CardHeader.tsx @@ -24,6 +24,8 @@ import { makeSpace } from '~utils/makeSpace'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; import { throwBladeError } from '~utils/logger'; import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren'; +import type { AmountProps } from '~components/Amount'; +import { Amount } from '~components/Amount'; const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => { useVerifyInsideCard('CardHeaderIcon'); @@ -52,15 +54,15 @@ const CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, { componentId: ComponentIds.CardHeaderBadge, }); -// @TODO: uncomment and export this when Amount component is migrated -// const _CardHeaderAmount = (props: AmountProps): React.ReactElement => { -// useVerifyInsideCard('CardHeaderAmount'); +const _CardHeaderAmount = (props: AmountProps): React.ReactElement => { + useVerifyInsideCard('CardHeaderAmount'); -// return ; -// }; -// const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, { -// componentId: ComponentIds.CardHeaderAmount, -// }); + return ; +}; + +const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, { + componentId: ComponentIds.CardHeaderAmount, +}); const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => { useVerifyInsideCard('CardHeaderText'); @@ -228,6 +230,7 @@ const headerTrailingAllowedComponents = [ ComponentIds.CardHeaderText, ComponentIds.CardHeaderIconButton, ComponentIds.CardHeaderBadge, + ComponentIds.CardHeaderAmount, ]; const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => { @@ -259,5 +262,6 @@ export { CardHeaderCounter, CardHeaderText, CardHeaderLink, + CardHeaderAmount, CardHeaderIconButton, }; diff --git a/packages/blade/src/components/Card/__tests__/Card.native.test.tsx b/packages/blade/src/components/Card/__tests__/Card.native.test.tsx index 25914c93c16..b40f416fd3f 100644 --- a/packages/blade/src/components/Card/__tests__/Card.native.test.tsx +++ b/packages/blade/src/components/Card/__tests__/Card.native.test.tsx @@ -163,7 +163,7 @@ describe('', () => { , ), ).toThrow( - '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual', + '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual', ); mockConsoleError.mockRestore(); }); diff --git a/packages/blade/src/components/Card/__tests__/Card.web.test.tsx b/packages/blade/src/components/Card/__tests__/Card.web.test.tsx index db2c8d90d68..43e463fb159 100644 --- a/packages/blade/src/components/Card/__tests__/Card.web.test.tsx +++ b/packages/blade/src/components/Card/__tests__/Card.web.test.tsx @@ -160,7 +160,7 @@ describe('', () => { , ), ).toThrow( - '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual', + '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual', ); mockConsoleError.mockRestore(); }); From 5baa06b3c4a46642154a38de53a566bc053d3d0c Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Wed, 10 Jan 2024 08:12:22 +0530 Subject: [PATCH 69/98] refactor: rebrand Radio, Checkbox & related common form components (#1930) * refactor: rebrand radio & radio group * update FormHint and SelectorSupportText to use Text component * update form label and hint text sizes * fix color * fix colors * Update tsconfig.json * Update tsconfig.json * update SelectorInput * add getFocusRingStyles util * update focus ring styles * use getFocusRingStyles in SelectorInput * use proper border token for radio hover state * refactor: rebrand Checkbox (#1936) * update rebranded components * update snapshots * fix tokens & import * use transparent token and update tests * reexport checkbox * fix lint issue --- packages/blade/.storybook/react/main.ts | 2 + packages/blade/jest.native.config.js | 1 + packages/blade/jest.web.config.js | 1 + packages/blade/rebranded-components.js | 2 + .../Checkbox/CheckboxIcon/CheckboxIcon.tsx | 5 +- .../CheckboxIcon/CheckboxIconWrapperStyles.ts | 4 +- .../Checkbox.native.test.tsx.snap | 46 +++--- .../__snapshots__/Checkbox.ssr.test.tsx.snap | 44 +++--- .../__snapshots__/Checkbox.web.test.tsx.snap | 134 +++++++++++------- .../src/components/Checkbox/checkboxTokens.ts | 36 ++--- .../blade/src/components/Form/FormHint.tsx | 34 ++--- .../blade/src/components/Form/FormLabel.tsx | 22 +-- .../Form/Selector/SelectorInput.web.tsx | 5 +- .../Form/Selector/SelectorSupportText.tsx | 28 ++-- .../Form/Selector/SelectorTitle.tsx | 24 +--- .../src/components/Form/Selector/types.ts | 5 +- packages/blade/src/components/Radio/Radio.tsx | 4 +- .../components/Radio/RadioIcon/RadioIcon.tsx | 3 +- .../Radio/RadioIcon/RadioIconWrapperStyles.ts | 4 +- .../__snapshots__/Radio.native.test.tsx.snap | 38 ++--- .../__snapshots__/Radio.ssr.test.tsx.snap | 88 ++++++++---- .../__snapshots__/Radio.web.test.tsx.snap | 56 +++++--- .../blade/src/components/Radio/radioTokens.ts | 48 +++---- packages/blade/src/components/index.ts | 4 +- .../getFocusRingStyles.d.ts | 1 + .../getFocusRingStyles.native.test.ts | 9 ++ .../getFocusRingStyles.native.ts | 10 ++ .../getFocusRingStyles.web.test.ts | 15 ++ .../getFocusRingStyles.web.ts | 15 ++ .../src/utils/getFocusRingStyles/index.ts | 1 + 30 files changed, 400 insertions(+), 289 deletions(-) create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/index.ts diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 0943487b659..2f1f262bcc1 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -40,7 +40,9 @@ const config: StorybookConfig = { '../../src/components/Accordion/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)', '../../docs/**/*.stories.mdx', '../../docs/**/*.stories.@(ts|tsx|js|jsx)', // '../../src/**/*.stories.mdx', diff --git a/packages/blade/jest.native.config.js b/packages/blade/jest.native.config.js index ba066d68032..ee53c449a03 100644 --- a/packages/blade/jest.native.config.js +++ b/packages/blade/jest.native.config.js @@ -21,6 +21,7 @@ module.exports = { testMatch: [ ...rebrandedComponents.map((component) => `**/${component}.native.test.{ts,tsx}`), '**/Icons/*Icon/*.native.test.{ts,tsx}', + '**/utils/**/*.test.{ts,tsx}', ], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js index 4e8c3ad99ed..0e9d4163056 100644 --- a/packages/blade/jest.web.config.js +++ b/packages/blade/jest.web.config.js @@ -18,6 +18,7 @@ const baseConfig = { ...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`), '**/Icons/*Icon/*.web.test.{ts,tsx}', '**/codemods/**/*.test.{ts,tsx}', + '**/utils/**/*.test.{ts,tsx}', ], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index 9323a34ba8f..637672247fc 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -30,6 +30,8 @@ const rebrandedComponents = [ 'SkipNav', 'VisuallyHidden', 'Tooltip', + 'Radio', + 'Checkbox', ]; module.exports = { rebrandedComponents }; diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx index 69386c21ef5..680b076ca0d 100644 --- a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx +++ b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx @@ -78,10 +78,7 @@ const CheckboxIcon = ({ size, }: CheckboxIconProps) => { const { theme } = useTheme(); - const defaultIconColor = getIn(theme, 'colors.brand.gray.200.lowContrast'); - const disabledIconColor = getIn(theme, 'colors.brand.gray.500.lowContrast'); - const iconColor = isDisabled ? disabledIconColor : defaultIconColor; - + const iconColor = getIn(theme, 'colors.interactive.icon.staticWhite.normal'); return ( should render checkbox with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -126,16 +126,17 @@ exports[` should render checkbox with label 1`] = ` /> should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -291,16 +292,17 @@ exports[` should set disabled state with isDisabled 1`] = ` /> should set error state with validationState 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(9, 91%, 56%, 0.09)", - "borderColor": "hsla(8, 73%, 47%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(4, 74%, 49%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -456,16 +458,17 @@ exports[` should set error state with validationState 1`] = ` /> should set error state with validationState 1`] = ` > should set error state with validationState 1`] = ` /> should set error state with validationState 1`] = ` should set error state with validationState 1`] = ` /> should render checkbox with error validationState 1`] = `"
This has to be checked
"`; +exports[` should render checkbox with error validationState 1`] = `"
This has to be checked
"`; exports[` should render checkbox with error validationState 2`] = ` .c4.c4.c4.c4.c4 { @@ -26,8 +26,8 @@ exports[` should render checkbox with error validationState 2`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(8,73%,47%,1); - border-color: hsla(8,73%,47%,1); + background-color: hsla(4,74%,49%,1); + border-color: hsla(4,74%,49%,1); } .c5.c5.c5.c5.c5 { @@ -82,7 +82,7 @@ exports[` should render checkbox with error validationState 2`] = ` } .c7.c7.c7.c7.c7 { - 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; @@ -99,7 +99,7 @@ exports[` should render checkbox with error validationState 2`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(8,73%,47%,1); + color: hsla(0,83%,33%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -142,8 +142,14 @@ exports[` should render checkbox with error validationState 2`] = ` } .c3.c3.c3.c3.c3:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); }
should render checkbox with error validationState 2`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -224,9 +230,9 @@ exports[` should render checkbox with error validationState 2`] = ` clip-rule="evenodd" d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -238,18 +244,19 @@ exports[` should render checkbox with error validationState 2`] = ` class="c6" data-blade-component="base-box" /> -
Remember password -
+

should render checkbox with error validationState 2`] = ` @@ -289,8 +296,7 @@ exports[` should render checkbox with error validationState 2`] = ` /> This has to be checked diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap index b9cbf29b5b8..109fbd1cdb4 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap @@ -24,8 +24,8 @@ exports[` should render checkbox with label 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); } .c5.c5.c5.c5.c5 { @@ -72,7 +72,7 @@ exports[` should render checkbox with label 1`] = ` } .c7.c7.c7.c7.c7 { - 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; @@ -89,10 +89,10 @@ exports[` should render checkbox with label 1`] = ` } .c10.c10.c10.c10.c10 { - color: hsla(218,89%,51%,1); + color: hsla(227,71%,51%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; - font-weight: 700; + font-weight: 500; font-style: normal; -webkit-text-decoration-line: none; text-decoration-line: none; @@ -133,13 +133,19 @@ exports[` should render checkbox with label 1`] = ` } .c3.c3.c3.c3.c3: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); } .c3.c3.c3.c3.c3: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; @@ -172,7 +178,7 @@ exports[` should render checkbox with label 1`] = ` } .c8.c8.c8.c8.c8:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); } .c8.c8.c8.c8.c8 * { @@ -232,9 +238,9 @@ exports[` should render checkbox with label 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -250,9 +256,9 @@ exports[` should render checkbox with label 1`] = ` class="c6" data-blade-component="base-box" /> -
I accept should render checkbox with label 1`] = ` -
+

@@ -306,8 +312,8 @@ exports[` should set disabled state with isDisabled 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: transparent; - border-color: hsla(216,15%,54%,0.18); + background-color: hsla(0,0%,100%,0); + border-color: hsla(214,40%,92%,1); } .c5.c5.c5.c5.c5 { @@ -340,7 +346,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c7.c7.c7.c7.c7 { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -383,8 +389,14 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c3.c3.c3.c3.c3: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); }
@@ -436,9 +448,9 @@ exports[` should set disabled state with isDisabled 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(214, 18%, 69%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(214, 18%, 69%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -454,12 +466,12 @@ exports[` should set disabled state with isDisabled 1`] = ` class="c6" data-blade-component="base-box" /> -
Remember password -
+

@@ -491,8 +503,8 @@ exports[` should set error state with validationState 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(9,91%,56%,0.09); - border-color: hsla(8,73%,47%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(4,74%,49%,1); } .c5.c5.c5.c5.c5 { @@ -547,7 +559,7 @@ exports[` should set error state with validationState 1`] = ` } .c7.c7.c7.c7.c7 { - 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; @@ -564,7 +576,7 @@ exports[` should set error state with validationState 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(8,73%,47%,1); + color: hsla(0,83%,33%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -607,8 +619,14 @@ exports[` should set error state with validationState 1`] = ` } .c3.c3.c3.c3.c3: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); }
@@ -660,9 +678,9 @@ exports[` should set error state with validationState 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -678,18 +696,19 @@ exports[` should set error state with validationState 1`] = ` class="c6" data-blade-component="base-box" /> -
Remember password -
+

should set error state with validationState 1`] = ` @@ -729,8 +748,7 @@ exports[` should set error state with validationState 1`] = ` /> This has to be checked @@ -764,8 +782,8 @@ exports[` should set to indeterminate state of checkbox 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(218,89%,51%,1); - border-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); + border-color: hsla(227,100%,59%,1); } .c5.c5.c5.c5.c5 { @@ -803,7 +821,7 @@ exports[` should set to indeterminate state of checkbox 1`] = ` } .c8.c8.c8.c8.c8 { - 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; @@ -846,13 +864,19 @@ exports[` should set to indeterminate state of checkbox 1`] = ` } .c3.c3.c3.c3.c3: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); } .c3.c3.c3.c3.c3:hover + div { - border-color: hsla(223,95%,48%,1); - background-color: hsla(223,95%,48%,1); + border-color: hsla(227,71%,51%,1); + background-color: hsla(227,71%,51%,1); -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; @@ -908,9 +932,9 @@ exports[` should set to indeterminate state of checkbox 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -934,9 +958,9 @@ exports[` should set to indeterminate state of checkbox 1`] = ` clip-rule="evenodd" d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -948,12 +972,12 @@ exports[` should set to indeterminate state of checkbox 1`] = ` class="c7" data-blade-component="base-box" /> -
Remember password -
+

diff --git a/packages/blade/src/components/Checkbox/checkboxTokens.ts b/packages/blade/src/components/Checkbox/checkboxTokens.ts index b8c0d6142ad..f5ad3f966db 100644 --- a/packages/blade/src/components/Checkbox/checkboxTokens.ts +++ b/packages/blade/src/components/Checkbox/checkboxTokens.ts @@ -1,5 +1,5 @@ +import type { DotNotationToken } from '../../utils/lodashButBetter/get'; import type { Theme } from '~components/BladeProvider'; -import type { DotNotationColorStringToken } from '~utils/types'; import type { SelectorInputHoverTokens } from '~components/Form/Selector/types'; import { size } from '~tokens/global'; @@ -28,7 +28,7 @@ const checkboxSizes = { }, } as const; -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; +type ColorTokens = `colors.${DotNotationToken}`; type Variant = { border: { checked: ColorTokens; @@ -52,32 +52,32 @@ const checkboxIconColors: CheckboxIconColors = { variants: { default: { border: { - checked: 'colors.brand.primary.500', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.border.primary.default', + unchecked: 'colors.interactive.border.gray.default', }, background: { - checked: 'colors.brand.primary.500', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.default', + unchecked: 'colors.transparent', }, }, disabled: { border: { - checked: 'transparent', - unchecked: 'colors.brand.gray.a100.lowContrast', + checked: 'colors.interactive.border.primary.disabled', + unchecked: 'colors.interactive.border.gray.disabled', }, background: { - checked: 'colors.brand.gray.a100.lowContrast', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.disabled', + unchecked: 'colors.transparent', }, }, negative: { border: { - checked: 'colors.feedback.border.negative.highContrast', - unchecked: 'colors.feedback.border.negative.highContrast', + checked: 'colors.interactive.border.negative.default', + unchecked: 'colors.interactive.border.negative.default', }, background: { - checked: 'colors.feedback.background.negative.highContrast', - unchecked: 'colors.feedback.background.negative.lowContrast', + checked: 'colors.interactive.background.negative.default', + unchecked: 'colors.transparent', }, }, }, @@ -86,12 +86,12 @@ const checkboxIconColors: CheckboxIconColors = { const checkboxHoverTokens: SelectorInputHoverTokens = { default: { background: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.a50.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', + unchecked: 'colors.interactive.background.gray.faded', }, border: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color + unchecked: 'colors.interactive.border.gray.default', }, }, }; diff --git a/packages/blade/src/components/Form/FormHint.tsx b/packages/blade/src/components/Form/FormHint.tsx index d6a4d5afd6d..64e12f7343c 100644 --- a/packages/blade/src/components/Form/FormHint.tsx +++ b/packages/blade/src/components/Form/FormHint.tsx @@ -2,37 +2,29 @@ import type { ReactElement } from 'react'; import React from 'react'; import { FormHintWrapper } from './FormHintWrapper'; -import { BaseText } from '~components/Typography/BaseText'; +import type { TextProps } from '~components/Typography/Text'; +import { Text } from '~components/Typography/Text'; import BaseBox from '~components/Box/BaseBox'; import { CheckIcon, InfoIcon } from '~components/Icons'; -import type { BaseTextProps } from '~components/Typography/BaseText/types'; import { getPlatformType } from '~utils/getPlatformType'; type HintTextProps = { icon?: React.ElementType; children: string; id?: string; - color: BaseTextProps['color']; + color: TextProps<{ variant: 'caption' }>['color']; }; const HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => { const isReactNative = getPlatformType() === 'react-native'; return ( - + {Icon ? : null} - + {children} - + ); @@ -76,13 +68,13 @@ export type FormHintProps = { const Icons = { error: (): ReactElement => ( <> - + ), success: (): ReactElement => ( <> - + ), @@ -97,11 +89,11 @@ const FormHint = ({ errorTextId, successTextId, }: FormHintProps): React.ReactElement => { - const colors = { - help: 'surface.text.muted.lowContrast', - error: 'feedback.text.negative.lowContrast', - success: 'feedback.text.positive.lowContrast', - } as const; + const colors: Record['color']> = { + help: 'surface.text.gray.muted', + error: 'feedback.text.negative.intense', + success: 'feedback.text.positive.intense', + }; const showError = type === 'error' && errorText; const showSuccess = type === 'success' && successText; diff --git a/packages/blade/src/components/Form/FormLabel.tsx b/packages/blade/src/components/Form/FormLabel.tsx index e00886eb0b0..8adfe4e0aa1 100644 --- a/packages/blade/src/components/Form/FormLabel.tsx +++ b/packages/blade/src/components/Form/FormLabel.tsx @@ -1,12 +1,10 @@ import React from 'react'; import { VisuallyHidden } from '~components/VisuallyHidden'; import { Text } from '~components/Typography'; -import { BaseText } from '~components/Typography/BaseText'; import { getPlatformType, useBreakpoint } from '~utils'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; import BaseBox from '~components/Box/BaseBox'; import { useTheme } from '~components/BladeProvider'; -import type { ColorContrastTypes } from '~tokens/theme/theme'; import { makeSpace } from '~utils/makeSpace'; import { makeSize } from '~utils/makeSize'; import { size } from '~tokens/global'; @@ -18,7 +16,6 @@ type CommonProps = { accessibilityText?: string; children: string | undefined; id?: string; - contrast?: ColorContrastTypes; }; type LabelProps = CommonProps & { @@ -56,7 +53,6 @@ const FormLabel = ({ children, id, htmlFor, - contrast = 'low', }: FormLabelProps): React.ReactElement => { const { theme } = useTheme(); const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints }); @@ -69,23 +65,20 @@ const FormLabel = ({ if (necessityIndicator === 'optional') { necessityLabel = ( - + (optional) ); } if (necessityIndicator === 'required') { necessityLabel = ( - * - + ); } @@ -106,10 +99,9 @@ const FormLabel = ({ maxHeight={makeSpace(size[36])} > ( ({ theme, isChecked, isDisabled, hasError, hoverTokens }) => ({ ...screenReaderStyles, '&:focus-visible + div': { - // TODO: Replace with focus outline token - // outline: `1px solid ${theme.colors.surface.background.level1.lowContrast}`, - // boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`, + ...getFocusRingStyles(theme), }, '&:hover + div': { ...getHoverStyles({ theme, isChecked, isDisabled, hasError, hoverTokens }), diff --git a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx index 05fc41e1a16..f83fb44b337 100644 --- a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx +++ b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx @@ -1,27 +1,29 @@ -import { BaseText } from '~components/Typography/BaseText'; -import { getPlatformType } from '~utils'; +import { Box } from '~components/Box'; +import { Text } from '~components/Typography/Text'; +import { castWebType, getPlatformType } from '~utils'; const SelectorSupportText = ({ children, id, + isNegative, }: { children: React.ReactNode; id?: string; + isNegative?: boolean; }): React.ReactElement => { const isReactNative = getPlatformType() === 'react-native'; return ( - - {children} - + + + {children} + + ); }; diff --git a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx index 9716458865b..b06cf55c6c9 100644 --- a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx +++ b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx @@ -1,5 +1,5 @@ import BaseBox from '~components/Box/BaseBox'; -import { BaseText } from '~components/Typography/BaseText'; +import { Text } from '~components/Typography/Text'; const SelectorTitle = ({ children, @@ -10,29 +10,15 @@ const SelectorTitle = ({ isDisabled?: boolean; size: 'small' | 'medium'; }): React.ReactElement => { - const lineHeight = { - small: 75, - medium: 100, - } as const; - const fontSize = { - small: 50, - medium: 100, - } as const; - return ( <> - {children} - + ); }; diff --git a/packages/blade/src/components/Form/Selector/types.ts b/packages/blade/src/components/Form/Selector/types.ts index 83843176fb6..6f82e8bd2ae 100644 --- a/packages/blade/src/components/Form/Selector/types.ts +++ b/packages/blade/src/components/Form/Selector/types.ts @@ -1,6 +1,7 @@ import type React from 'react'; -import type { DotNotationColorStringToken, TestID } from '~utils/types'; +import type { TestID } from '~utils/types'; import type { Theme } from '~components/BladeProvider'; +import type { DotNotationToken } from '~utils/lodashButBetter/get'; /* eslint-disable @typescript-eslint/no-explicit-any */ type SelectorLabelProps = { @@ -29,7 +30,7 @@ type SelectorInputProps = HoverProps & { accessibilityLabel?: string; }; -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; +type ColorTokens = `colors.${DotNotationToken}`; type SelectorInputHoverTokens = { default: { background: { diff --git a/packages/blade/src/components/Radio/Radio.tsx b/packages/blade/src/components/Radio/Radio.tsx index 699ce1d09f3..f88daada639 100644 --- a/packages/blade/src/components/Radio/Radio.tsx +++ b/packages/blade/src/components/Radio/Radio.tsx @@ -127,7 +127,9 @@ const _Radio: React.ForwardRefRenderFunction = ( {showHelpText && ( - {helpText} + + {helpText} + )} diff --git a/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx b/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx index 82e2579d72f..a00546b176d 100644 --- a/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx +++ b/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx @@ -41,7 +41,8 @@ const RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps) let variant: 'default' | 'disabled' | 'negative' = 'default'; if (isDisabled) variant = 'disabled'; if (isNegative) variant = 'negative'; - const dotColor = getIn(theme, radioIconColors.variants[variant].dot[state]); + const dotColorToken = radioIconColors.variants[variant].dot[state]; + const dotColor = getIn(theme, dotColorToken); return ( should render radio with label 1`] = ` > should render radio with label 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 radio with label 1`] = ` > should render radio with label 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -287,8 +287,8 @@ exports[` should render radio 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, @@ -317,16 +317,17 @@ exports[` should render radio with label 1`] = ` /> should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -490,7 +491,7 @@ exports[` should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -647,8 +648,8 @@ exports[` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -677,16 +678,17 @@ exports[` should set disabled state with isDisabled 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); @@ -95,16 +95,20 @@ exports[` should render with help text 2`] = ` margin-left: 24px; } -.c14.c14.c14.c14.c14 { - margin-bottom: 0px; +.c13.c13.c13.c13.c13 { + display: contents; } .c15.c15.c15.c15.c15 { + margin-bottom: 0px; +} + +.c16.c16.c16.c16.c16 { margin-top: 4px; } .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; @@ -126,7 +130,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; @@ -143,7 +147,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; @@ -159,8 +163,25 @@ exports[` should render with help text 2`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { - color: hsla(216,16%,60%,1); +.c14.c14.c14.c14.c14 { + color: hsla(0,83%,33%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.6875rem; + font-weight: 400; + font-style: italic; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c17.c17.c17.c17.c17 { + 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; @@ -211,13 +232,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; @@ -318,31 +345,36 @@ exports[` should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Apple -
+

- - Apple Help - + + Apple Help + +
should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Mango -
+

@@ -394,7 +426,7 @@ exports[` should render with help text 2`] = `
should render with help text 2`] = ` style="word-break:break-all" > Select One diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap index 2450cee73a2..c260916e5c8 100644 --- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap +++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap @@ -21,8 +21,8 @@ exports[` should render radio 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); @@ -94,7 +94,7 @@ exports[` should render radio 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; @@ -116,7 +116,7 @@ exports[` should render radio 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; @@ -133,7 +133,7 @@ exports[` should render radio with label 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -184,13 +184,19 @@ exports[` should render radio with label 1`] = ` } .c9.c9.c9.c9.c9: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); } .c9.c9.c9.c9.c9: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; @@ -287,12 +293,12 @@ exports[` should render radio with label 1`] = ` class="c11" data-blade-component="base-box" /> -
Apple -
+

@@ -326,8 +332,8 @@ exports[` should set disabled state with isDisabled 1`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(216,15%,54%,0.18); + background-color: hsla(0,0%,100%,0); + border-color: hsla(214,40%,92%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -399,7 +405,7 @@ exports[` should set disabled state with isDisabled 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; @@ -421,7 +427,7 @@ exports[` should set disabled state with isDisabled 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; @@ -438,7 +444,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -489,8 +495,14 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c9.c9.c9.c9.c9: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); }
@@ -584,12 +596,12 @@ exports[` should set disabled state with isDisabled 1`] = ` class="c11" data-blade-component="base-box" /> -
Apple -
+

diff --git a/packages/blade/src/components/Radio/radioTokens.ts b/packages/blade/src/components/Radio/radioTokens.ts index 1e31853ef2b..7b3ffaf2e79 100644 --- a/packages/blade/src/components/Radio/radioTokens.ts +++ b/packages/blade/src/components/Radio/radioTokens.ts @@ -1,6 +1,6 @@ import type { Theme } from '~components/BladeProvider'; -import type { DotNotationColorStringToken } from '~utils/types'; import type { SelectorInputHoverTokens } from '~components/Form/Selector/types'; +import type { DotNotationToken } from '~utils/lodashButBetter/get'; import { size } from '~tokens/global'; const radioSizes = { @@ -30,7 +30,7 @@ const radioSizes = { }, } as const; -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; +type ColorTokens = `colors.${DotNotationToken}`; type Variant = { dot: { checked: ColorTokens; @@ -58,44 +58,44 @@ const radioIconColors: RadioIconColors = { variants: { default: { dot: { - checked: 'colors.brand.gray.200.lowContrast', - unchecked: 'colors.brand.gray.200.lowContrast', + checked: 'colors.interactive.icon.staticWhite.normal', + unchecked: 'colors.transparent', }, border: { - checked: 'colors.brand.primary.500', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.border.primary.default', + unchecked: 'colors.interactive.border.gray.default', }, background: { - checked: 'colors.brand.primary.500', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.default', + unchecked: 'colors.transparent', }, }, disabled: { dot: { - checked: 'colors.brand.gray.200.lowContrast', - unchecked: 'colors.brand.gray.200.lowContrast', + checked: 'colors.interactive.icon.staticWhite.normal', + unchecked: 'colors.interactive.icon.staticWhite.normal', }, border: { - checked: 'transparent', - unchecked: 'colors.brand.gray.a100.lowContrast', + checked: 'colors.transparent', + unchecked: 'colors.interactive.border.gray.disabled', }, background: { - checked: 'colors.brand.gray.a100.lowContrast', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.disabled', + unchecked: 'colors.transparent', }, }, negative: { dot: { - checked: 'colors.brand.gray.200.lowContrast', - unchecked: 'colors.brand.gray.200.lowContrast', + checked: 'colors.interactive.icon.staticWhite.normal', + unchecked: 'colors.transparent', }, border: { - checked: 'colors.feedback.border.negative.highContrast', - unchecked: 'colors.feedback.border.negative.highContrast', + checked: 'colors.interactive.border.negative.default', + unchecked: 'colors.interactive.border.negative.default', }, background: { - checked: 'colors.feedback.background.negative.highContrast', - unchecked: 'colors.feedback.background.negative.lowContrast', + checked: 'colors.interactive.background.negative.default', + unchecked: 'colors.transparent', }, }, }, @@ -104,12 +104,12 @@ const radioIconColors: RadioIconColors = { const radioHoverTokens: SelectorInputHoverTokens = { default: { background: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.a50.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', + unchecked: 'colors.interactive.background.gray.faded', }, border: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color + unchecked: 'colors.interactive.border.gray.default', }, }, }; diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index c7b26bca876..f6654dcd9dd 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -10,16 +10,18 @@ export * from './Card'; export * from './Counter'; export * from './Collapsible'; export * from './Carousel'; +export * from './Checkbox'; export * from './Divider'; export * from './Icons'; export * from './Indicator'; export * from './Link'; export * from './List'; export * from './Modal'; +export * from './Radio'; +export * from './Spinner'; export * from './Tabs'; export * from './Tag'; export * from './Tooltip'; -export * from './Spinner'; export * from './Typography'; export * from './SkipNav'; export * from './VisuallyHidden'; diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts new file mode 100644 index 00000000000..0d33942962b --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts @@ -0,0 +1 @@ +export * from './getFocusRingStyles.web'; diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts new file mode 100644 index 00000000000..55ab644395e --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts @@ -0,0 +1,9 @@ +import { bladeTheme } from '../../tokens'; +import { getFocusRingStyles } from './getFocusRingStyles'; + +describe('getFocusRingStyles', () => { + it('should return correct styles when called with valid parameters', () => { + const result = getFocusRingStyles({ ...bladeTheme, colors: bladeTheme.colors.onLight }); + expect(result).toMatchObject({}); + }); +}); diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts new file mode 100644 index 00000000000..7f4295cbf28 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts @@ -0,0 +1,10 @@ +import type { CSSProperties } from 'styled-components'; +import type { Theme } from '../../components/BladeProvider'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function getFocusRingStyles(theme: Theme): CSSProperties { + // React Native does not need focus rings + return {}; +} + +export { getFocusRingStyles }; diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts new file mode 100644 index 00000000000..df2b4e53cf7 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts @@ -0,0 +1,15 @@ +import { bladeTheme } from '../../tokens'; +import { getFocusRingStyles } from './getFocusRingStyles'; + +describe('getFocusRingStyles', () => { + it('should return correct styles when called with valid parameters', () => { + const result = getFocusRingStyles({ ...bladeTheme, colors: bladeTheme.colors.onLight }); + expect(result).toMatchObject({ + outline: '4px solid hsla(227, 100%, 59%, 0.18)', + outlineOffset: '1px', + transitionDuration: '70ms', + transitionProperty: 'outline-width', + transitionTimingFunction: 'cubic-bezier(0.3, 0, 0.2, 1)', + }); + }); +}); diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts new file mode 100644 index 00000000000..ec3fcdeff83 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts @@ -0,0 +1,15 @@ +import type { CSSProperties } from 'styled-components'; +import type { Theme } from '../../components/BladeProvider'; +import { castWebType, makeMotionTime } from '~utils'; + +function getFocusRingStyles(theme: Theme): CSSProperties { + return { + outline: `4px solid ${theme.colors.surface.border.primary.muted}`, + outlineOffset: '1px', + transitionProperty: 'outline-width', + transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])), + transitionTimingFunction: castWebType(theme.motion.easing.standard.effective), + }; +} + +export { getFocusRingStyles }; diff --git a/packages/blade/src/utils/getFocusRingStyles/index.ts b/packages/blade/src/utils/getFocusRingStyles/index.ts new file mode 100644 index 00000000000..066c6cac225 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/index.ts @@ -0,0 +1 @@ +export * from './getFocusRingStyles'; From 6194eb1fe766cc1ef971bebb36f3f9a261296168 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 10 Jan 2024 08:14:33 +0530 Subject: [PATCH 70/98] chore: add PR template (#1937) --- .github/pull_request_template.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .github/pull_request_template.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000000..e0aea699366 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,21 @@ +## Description + + + +## Changes + + + +## Additional Information + + + +## Component Checklist + + + +- [ ] Update Component Status Page +- [ ] Perform Manual Testing in Other Browsers +- [ ] Add KitchenSink Story +- [ ] Add Interaction Tests (if applicable) +- [ ] Add changeset From bc8425b4960813b15e3dc7a1df0c9d7e138e80d2 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 10 Jan 2024 12:53:50 +0530 Subject: [PATCH 71/98] feat(Rebranding / Storybook): add version in toolbar (#1924) --- packages/blade/.storybook/react/preview.tsx | 31 +++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx index f328d05855d..9bdf373a423 100644 --- a/packages/blade/.storybook/react/preview.tsx +++ b/packages/blade/.storybook/react/preview.tsx @@ -72,6 +72,13 @@ export const parameters = { } return bladeTheme; }; + + if (context.store.globals.globals.version === '10' && window.top) { + window.top.location.href = + 'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' + + window.top.location.pathname + + window.top.location.search; + } return ( @@ -164,6 +178,23 @@ export const decorators = [ ]; export const globalTypes = { + version: { + name: 'Blade Documentation Version', + description: 'Version of the Blade', + defaultValue: '11', + toolbar: { + icon: 'time', + title: ' v11 - Rebranded', + // Array of plain string values or MenuItem shape (see below) + items: [ + { value: '10', title: ' v10 - Old' }, + { value: '11', title: ' v11 - Rebranded', default: true }, + ], + dynamicTitle: true, + // Property that specifies if the name of the item will be displayed + showName: false, + }, + }, colorScheme: { name: 'Color Scheme', description: 'Color Scheme for Blade', From c20492849e3ec97ee84f4de62e0c16623be45118 Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Wed, 10 Jan 2024 14:39:41 +0530 Subject: [PATCH 72/98] refactor: rebrand switch (#1932) --- packages/blade/.storybook/react/main.ts | 1 + packages/blade/rebranded-components.js | 1 + .../src/components/Switch/Switch.stories.tsx | 8 ++-- .../__snapshots__/Switch.native.test.tsx.snap | 12 ++--- .../__snapshots__/Switch.ssr.test.tsx.snap | 20 +++++--- .../__snapshots__/Switch.web.test.tsx.snap | 34 +++++++++----- .../src/components/Switch/switchTokens.ts | 47 +++++++------------ packages/blade/src/components/index.ts | 1 + packages/blade/src/tokens/theme/bladeTheme.ts | 2 - packages/blade/src/tokens/theme/theme.ts | 1 - packages/blade/tsconfig.json | 2 +- 11 files changed, 66 insertions(+), 63 deletions(-) diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 2f1f262bcc1..fc1e51e7225 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -42,6 +42,7 @@ const config: StorybookConfig = { '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)', '../../docs/**/*.stories.mdx', '../../docs/**/*.stories.@(ts|tsx|js|jsx)', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index 637672247fc..b698558f269 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -30,6 +30,7 @@ const rebrandedComponents = [ 'SkipNav', 'VisuallyHidden', 'Tooltip', + 'Switch', 'Radio', 'Checkbox', ]; diff --git a/packages/blade/src/components/Switch/Switch.stories.tsx b/packages/blade/src/components/Switch/Switch.stories.tsx index f85e3e8be90..3bec689fc2f 100644 --- a/packages/blade/src/components/Switch/Switch.stories.tsx +++ b/packages/blade/src/components/Switch/Switch.stories.tsx @@ -136,7 +136,7 @@ const WithLabelTemplate: StoryFn = () => { - + Activate/lock the below methods for card transactions @@ -148,7 +148,7 @@ const WithLabelTemplate: StoryFn = () => { gap="spacing.2" > - + International transaction @@ -163,7 +163,7 @@ const WithLabelTemplate: StoryFn = () => { gap="spacing.2" > - + Online transaction @@ -178,7 +178,7 @@ const WithLabelTemplate: StoryFn = () => { gap="spacing.2" > - + Contactless Transaction diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap index 49567a699b0..aab26ca1ca8 100644 --- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap +++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap @@ -75,7 +75,7 @@ exports[` should render switch with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(211, 20%, 52%, 0.12)", "borderRadius": 9999, "display": "flex", "height": 24, @@ -127,7 +127,7 @@ exports[` should render switch with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(220, 30%, 96%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 1)", "borderRadius": 9999, "display": "flex", "flexShrink": 0, @@ -199,7 +199,7 @@ exports[` should render switch with label 1`] = ` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(211, 20%, 52%, 0.09)", "borderRadius": 9999, "display": "flex", "height": 24, @@ -347,7 +347,7 @@ exports[` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(220, 27%, 98%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0.48)", "borderRadius": 9999, "display": "flex", "flexShrink": 0, @@ -419,7 +419,7 @@ exports[` should set disabled state with isDisabled 1`] = ` should render switch ssr 1`] = `"
"`; +exports[` should render switch ssr 1`] = `"
"`; exports[` should render switch ssr 2`] = ` .c6.c6.c6.c6.c6 { @@ -64,7 +64,7 @@ exports[` should render switch ssr 2`] = ` border-radius: 9999px; -webkit-animation-duration: 150ms; animation-duration: 150ms; - background-color: hsla(220,30%,96%,1); + background-color: hsla(0,0%,100%,1); } .c3.c3.c3.c3.c3 { @@ -83,7 +83,7 @@ exports[` should render switch ssr 2`] = ` width: 36px; height: 20px; border-radius: 9999px; - background-color: hsla(214,18%,69%,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; @@ -108,12 +108,18 @@ exports[` should render switch ssr 2`] = ` } .c2.c2.c2.c2.c2: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); } .c2.c2.c2.c2.c2:hover + div { - background-color: hsla(216,16%,60%,1); + background-color: hsla(211,20%,52%,0.18); -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; @@ -178,7 +184,7 @@ exports[` should render switch ssr 2`] = ` clip-rule="evenodd" d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z" data-blade-component="svg-path" - fill="hsla(216, 33%, 29%, 1)" + fill="hsla(0, 0%, 0%, 1)" fill-rule="evenodd" /> diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap index 7440885b825..64e6c92d7ed 100644 --- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap +++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap @@ -62,7 +62,7 @@ exports[` should render switch 1`] = ` border-radius: 9999px; -webkit-animation-duration: 150ms; animation-duration: 150ms; - background-color: hsla(220,30%,96%,1); + background-color: hsla(0,0%,100%,1); } .c3.c3.c3.c3.c3 { @@ -81,7 +81,7 @@ exports[` should render switch 1`] = ` width: 36px; height: 20px; border-radius: 9999px; - background-color: hsla(214,18%,69%,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; @@ -106,12 +106,18 @@ exports[` should render switch 1`] = ` } .c2.c2.c2.c2.c2: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); } .c2.c2.c2.c2.c2:hover + div { - background-color: hsla(216,16%,60%,1); + background-color: hsla(211,20%,52%,0.18); -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; @@ -174,7 +180,7 @@ exports[` should render switch 1`] = ` clip-rule="evenodd" d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z" data-blade-component="svg-path" - fill="hsla(216, 33%, 29%, 1)" + fill="hsla(0, 0%, 0%, 1)" fill-rule="evenodd" /> @@ -248,7 +254,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-radius: 9999px; -webkit-animation-duration: 150ms; animation-duration: 150ms; - background-color: hsla(220,27%,98%,1); + background-color: hsla(0,0%,100%,0.48); } .c3.c3.c3.c3.c3 { @@ -267,7 +273,7 @@ exports[` should set disabled state with isDisabled 1`] = ` width: 36px; height: 20px; border-radius: 9999px; - background-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); -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; @@ -292,8 +298,14 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c2.c2.c2.c2.c2: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); } .c1.c1.c1.c1.c1 { @@ -353,7 +365,7 @@ exports[` should set disabled state with isDisabled 1`] = ` clip-rule="evenodd" d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z" data-blade-component="svg-path" - fill="hsla(214, 18%, 69%, 1)" + fill="hsla(0, 0%, 0%, 0.32)" fill-rule="evenodd" /> diff --git a/packages/blade/src/components/Switch/switchTokens.ts b/packages/blade/src/components/Switch/switchTokens.ts index e249abf192b..0e474fe5d43 100644 --- a/packages/blade/src/components/Switch/switchTokens.ts +++ b/packages/blade/src/components/Switch/switchTokens.ts @@ -1,19 +1,4 @@ -import type { Theme } from '~components/BladeProvider'; -import type { SelectorInputHoverTokens } from '~components/Form/Selector/types'; -import type { DurationString, EasingString } from '~tokens/global/motion'; import { size } from '~tokens/global'; -import type { DotNotationColorStringToken } from '~utils/types'; - -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; -type State = { - checked: ColorTokens; - unchecked: ColorTokens; -}; -type SwitchColors = { - track: Record<'default' | 'disabled', Record>; - thumb: Record<'default' | 'disabled', Record>; - thumbIcon: Record<'default' | 'disabled', Record>; -}; const switchSizes = { track: { @@ -62,40 +47,40 @@ const switchSizes = { }, } as const; -const switchColors: SwitchColors = { +const switchColors = { track: { default: { background: { - checked: 'colors.brand.primary.500', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.background.primary.default', + unchecked: 'colors.interactive.background.gray.faded', }, }, disabled: { background: { - checked: 'colors.brand.primary.400', - unchecked: 'colors.brand.gray.a100.lowContrast', + checked: 'colors.interactive.background.primary.faded', + unchecked: 'colors.interactive.background.gray.disabled', }, }, }, thumb: { default: { - background: 'colors.brand.gray.700.highContrast', + background: 'colors.interactive.background.staticWhite.default', }, disabled: { - background: 'colors.brand.gray.200.lowContrast', + background: 'colors.interactive.background.staticWhite.disabled', }, }, thumbIcon: { default: { - fill: 'colors.brand.gray.200.highContrast', + fill: 'colors.interactive.icon.staticBlack.normal', }, disabled: { - fill: 'colors.surface.text.placeholder.lowContrast', + fill: 'colors.interactive.icon.staticBlack.disabled', }, }, -}; +} as const; -const switchMotion: Record> = { +const switchMotion = { easing: { thumb: 'motion.easing.standard.effective', thumbIcon: 'motion.easing.standard.effective', @@ -106,15 +91,15 @@ const switchMotion: Record; text: Record>; icon: Record>; - hover: SubtleOrIntenseEmphasis; }; feedback: { background: Record; diff --git a/packages/blade/tsconfig.json b/packages/blade/tsconfig.json index 4d7250d174e..88b8f87efde 100644 --- a/packages/blade/tsconfig.json +++ b/packages/blade/tsconfig.json @@ -1,12 +1,12 @@ { "extends": "../../tsconfig.json", - // "include": ["src"], "include": [ "src/components/index.ts", "src/tokens/index.ts", "src/utils/index.ts", "src/@types/globals.d.ts" ], + // "include": ["src"], "compilerOptions": { "baseUrl": ".", "paths": { From d8b1fe6cb5f9aae73a8739073d672880c2120566 Mon Sep 17 00:00:00 2001 From: rzpcibot <64553331+rzpcibot@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:42:00 +0530 Subject: [PATCH 73/98] feat(tokens): add new tokens (#1954) Co-authored-by: Kamlesh Chandnani --- packages/blade/src/tokens/theme/bladeTheme.ts | 811 +++++++++--------- 1 file changed, 415 insertions(+), 396 deletions(-) diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts index a132e58bbef..15994ab4393 100644 --- a/packages/blade/src/tokens/theme/bladeTheme.ts +++ b/packages/blade/src/tokens/theme/bladeTheme.ts @@ -20,55 +20,149 @@ const colors: ColorsWithModes = { muted: globalColors.neutral.blueGrayLight[600], disabled: globalColors.neutral.blueGrayLight.a200, }, + primary: { normal: globalColors.chromatic.azure[500] }, + onSea: { + onSubtle: globalColors.chromatic.forest[800], + onIntense: globalColors.chromatic.forest[200], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[600], + onIntense: globalColors.chromatic.azure[200], + }, staticWhite: { normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[400], - muted: globalColors.neutral.white[300], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], + }, + }, + icon: { + gray: { + normal: globalColors.neutral.blueGrayLight[1200], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, + }, + primary: { normal: globalColors.chromatic.azure[500] }, + onSea: { + onSubtle: globalColors.chromatic.forest[600], + onIntense: globalColors.chromatic.forest[400], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[400], + onIntense: globalColors.chromatic.azure[300], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], disabled: globalColors.neutral.white[100], }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], + }, + }, + }, + feedback: { + background: { positive: { - normal: globalColors.chromatic.emerald[700], - subtle: globalColors.chromatic.emerald[600], - muted: globalColors.chromatic.emerald[400], - disabled: globalColors.chromatic.emerald.a200, + subtle: globalColors.chromatic.emerald.a50, + intense: globalColors.chromatic.emerald[600], }, negative: { - normal: globalColors.chromatic.crimson[700], - subtle: globalColors.chromatic.crimson[600], - muted: globalColors.chromatic.crimson[400], - disabled: globalColors.chromatic.crimson.a200, + subtle: globalColors.chromatic.crimson.a50, + intense: globalColors.chromatic.crimson[600], }, notice: { - normal: globalColors.chromatic.cider[700], - subtle: globalColors.chromatic.cider[600], - muted: globalColors.chromatic.cider[400], - disabled: globalColors.chromatic.cider.a200, + subtle: globalColors.chromatic.cider.a50, + intense: globalColors.chromatic.cider[600], }, information: { - normal: globalColors.chromatic.sapphire[700], - subtle: globalColors.chromatic.sapphire[600], - muted: globalColors.chromatic.sapphire[400], - disabled: globalColors.chromatic.sapphire.a200, + subtle: globalColors.chromatic.sapphire.a50, + intense: globalColors.chromatic.sapphire[600], }, neutral: { - normal: globalColors.neutral.blueGrayLight[1200], - subtle: globalColors.neutral.blueGrayLight[900], - muted: globalColors.neutral.blueGrayLight[600], - disabled: globalColors.neutral.blueGrayLight.a200, + subtle: globalColors.neutral.blueGrayLight.a50, + intense: globalColors.neutral.blueGrayLight[1000], }, - primary: { - normal: globalColors.chromatic.azure[700], - subtle: globalColors.chromatic.azure[600], - muted: globalColors.chromatic.azure[400], - disabled: globalColors.chromatic.azure.a100, + }, + border: { + positive: { + subtle: globalColors.chromatic.emerald.a100, + intense: globalColors.chromatic.emerald[700], }, - staticBlack: { - normal: globalColors.neutral.black[500], - subtle: globalColors.neutral.black[400], - muted: globalColors.neutral.black[300], - disabled: globalColors.neutral.black[100], + negative: { + subtle: globalColors.chromatic.crimson.a100, + intense: globalColors.chromatic.crimson[700], + }, + notice: { + subtle: globalColors.chromatic.cider.a100, + intense: globalColors.chromatic.cider[700], + }, + information: { + subtle: globalColors.chromatic.sapphire.a100, + intense: globalColors.chromatic.sapphire[700], + }, + neutral: { + subtle: globalColors.neutral.blueGrayLight.a100, + intense: globalColors.neutral.blueGrayLight[1100], + }, + }, + text: { + positive: { + subtle: globalColors.chromatic.emerald[100], + intense: globalColors.chromatic.emerald[800], + }, + negative: { + subtle: globalColors.chromatic.crimson[100], + intense: globalColors.chromatic.crimson[800], + }, + notice: { + subtle: globalColors.chromatic.cider[100], + intense: globalColors.chromatic.cider[700], + }, + information: { + subtle: globalColors.chromatic.sapphire[100], + intense: globalColors.chromatic.sapphire[800], + }, + neutral: { + subtle: globalColors.neutral.blueGrayLight[500], + intense: globalColors.neutral.blueGrayLight[1100], + }, + }, + text: { + positive: { + subtle: globalColors.chromatic.emerald[100], + intense: globalColors.chromatic.emerald[800], + }, + negative: { + subtle: globalColors.chromatic.crimson[100], + intense: globalColors.chromatic.crimson[800], + }, + notice: { + subtle: globalColors.chromatic.cider[100], + intense: globalColors.chromatic.cider[700], + }, + information: { + subtle: globalColors.chromatic.sapphire[100], + intense: globalColors.chromatic.sapphire[800], + }, + neutral: { + subtle: globalColors.neutral.blueGrayLight[500], + intense: globalColors.neutral.blueGrayLight[1100], }, }, + }, + interactive: { background: { positive: { default: globalColors.chromatic.emerald[600], @@ -105,13 +199,6 @@ const colors: ColorsWithModes = { faded: globalColors.neutral.blueGrayLight.a100, fadedHighlighted: globalColors.neutral.blueGrayLight.a200, }, - primary: { - default: globalColors.chromatic.azure[500], - highlighted: globalColors.chromatic.azure[600], - disabled: globalColors.chromatic.azure.a100, - faded: globalColors.chromatic.azure.a100, - fadedHighlighted: globalColors.chromatic.azure.a150, - }, gray: { default: globalColors.neutral.blueGrayLight.a50, highlighted: globalColors.neutral.blueGrayLight.a100, @@ -119,6 +206,13 @@ const colors: ColorsWithModes = { faded: globalColors.neutral.blueGrayLight.a75, fadedHighlighted: globalColors.neutral.blueGrayLight.a100, }, + primary: { + default: globalColors.chromatic.azure[500], + highlighted: globalColors.chromatic.azure[600], + disabled: globalColors.chromatic.azure.a50, + faded: globalColors.chromatic.azure.a50, + fadedHighlighted: globalColors.chromatic.azure.a100, + }, staticBlack: { default: globalColors.neutral.black[500], highlighted: globalColors.neutral.black[500], @@ -129,7 +223,7 @@ const colors: ColorsWithModes = { staticWhite: { default: globalColors.neutral.white[500], highlighted: globalColors.neutral.white[400], - disabled: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[50], faded: globalColors.neutral.white[50], fadedHighlighted: globalColors.neutral.white[100], }, @@ -165,6 +259,12 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.blueGrayLight[300], faded: globalColors.neutral.blueGrayLight.a100, }, + gray: { + default: globalColors.neutral.blueGrayLight[400], + highlighted: globalColors.neutral.blueGrayLight[400], + disabled: globalColors.neutral.blueGrayLight[200], + faded: globalColors.neutral.blueGrayLight.a100, + }, primary: { default: globalColors.chromatic.azure[500], highlighted: globalColors.chromatic.azure[500], @@ -183,12 +283,6 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.black[100], faded: globalColors.neutral.black[100], }, - gray: { - default: globalColors.neutral.blueGrayLight[400], - highlighted: globalColors.neutral.blueGrayLight[400], - disabled: globalColors.neutral.blueGrayLight[200], - faded: globalColors.neutral.blueGrayLight.a100, - }, }, text: { positive: { @@ -198,8 +292,8 @@ const colors: ColorsWithModes = { disabled: globalColors.chromatic.emerald.a200, }, negative: { - normal: globalColors.chromatic.crimson[700], - subtle: globalColors.chromatic.crimson[600], + normal: globalColors.chromatic.crimson[600], + subtle: globalColors.chromatic.crimson[500], muted: globalColors.chromatic.crimson[400], disabled: globalColors.chromatic.crimson.a200, }, @@ -216,7 +310,7 @@ const colors: ColorsWithModes = { disabled: globalColors.chromatic.sapphire.a200, }, neutral: { - normal: globalColors.neutral.blueGrayLight[1200], + normal: globalColors.neutral.blueGrayLight[1100], subtle: globalColors.neutral.blueGrayLight[900], muted: globalColors.neutral.blueGrayLight[600], disabled: globalColors.neutral.blueGrayLight.a200, @@ -228,11 +322,17 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.blueGrayLight.a200, }, primary: { - normal: globalColors.chromatic.azure[700], - subtle: globalColors.chromatic.azure[600], + normal: globalColors.chromatic.azure[600], + subtle: globalColors.chromatic.azure[500], muted: globalColors.chromatic.azure[400], disabled: globalColors.chromatic.azure.a100, }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, staticWhite: { normal: globalColors.neutral.white[500], subtle: globalColors.neutral.white[400], @@ -246,41 +346,36 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.black[100], }, }, - }, - surface: { - background: { - gray: { - subtle: globalColors.neutral.blueGrayLight[100], - moderate: globalColors.neutral.blueGrayLight[50], - intense: globalColors.neutral.blueGrayLight[0], - }, - primary: { - subtle: globalColors.chromatic.azure.a50, - intense: globalColors.chromatic.azure[500], + icon: { + positive: { + normal: globalColors.chromatic.emerald[700], + subtle: globalColors.chromatic.emerald[600], + muted: globalColors.chromatic.emerald[400], + disabled: globalColors.chromatic.emerald.a200, }, - sea: { subtle: globalColors.chromatic.sea[50], intense: globalColors.chromatic.sea[800] }, - cloud: { - subtle: globalColors.chromatic.cloud[50], - intense: globalColors.chromatic.cloud[800], + negative: { + normal: globalColors.chromatic.crimson[600], + subtle: globalColors.chromatic.crimson[500], + muted: globalColors.chromatic.crimson[400], + disabled: globalColors.chromatic.crimson.a200, }, - }, - border: { - gray: { - normal: globalColors.neutral.blueGrayLight[500], - subtle: globalColors.neutral.blueGrayLight[300], - muted: globalColors.neutral.blueGrayLight.a100, + notice: { + normal: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider[600], + muted: globalColors.chromatic.cider[400], + disabled: globalColors.chromatic.cider.a200, }, - primary: { - normal: globalColors.chromatic.azure[500], - muted: globalColors.chromatic.azure.a100, + information: { + normal: globalColors.chromatic.sapphire[700], + subtle: globalColors.chromatic.sapphire[600], + muted: globalColors.chromatic.sapphire[400], + disabled: globalColors.chromatic.sapphire.a200, }, - }, - text: { - staticBlack: { - normal: globalColors.neutral.black[500], - subtle: globalColors.neutral.black[300], - muted: globalColors.neutral.black[200], - disabled: globalColors.neutral.black[100], + neutral: { + normal: globalColors.neutral.blueGrayLight[1100], + subtle: globalColors.neutral.blueGrayLight[900], + muted: globalColors.neutral.blueGrayLight[600], + disabled: globalColors.neutral.blueGrayLight.a200, }, gray: { normal: globalColors.neutral.blueGrayLight[1200], @@ -288,51 +383,32 @@ const colors: ColorsWithModes = { muted: globalColors.neutral.blueGrayLight[600], disabled: globalColors.neutral.blueGrayLight.a200, }, - staticWhite: { + primary: { + normal: globalColors.chromatic.azure[600], + subtle: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure[400], + disabled: globalColors.chromatic.azure.a100, + }, + onPrimary: { normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[450], - muted: globalColors.neutral.white[200], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], disabled: globalColors.neutral.white[100], }, - onSea: { - onSubtle: globalColors.chromatic.forest[800], - onIntense: globalColors.chromatic.forest[200], + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], }, - onCloud: { - onSubtle: globalColors.chromatic.azure[600], - onIntense: globalColors.chromatic.azure[200], + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[400], + muted: globalColors.neutral.black[300], + disabled: globalColors.neutral.black[100], }, - primary: { normal: globalColors.chromatic.azure[500] }, - }, - icon: { - onSea: { - onSubtle: globalColors.chromatic.forest[600], - onIntense: globalColors.chromatic.forest[400], - }, - onCloud: { - onSubtle: globalColors.chromatic.azure[400], - onIntense: globalColors.chromatic.azure[300], - }, - staticBlack: { - normal: globalColors.neutral.black[500], - subtle: globalColors.neutral.black[300], - muted: globalColors.neutral.black[200], - disabled: globalColors.neutral.black[100], - }, - gray: { - normal: globalColors.neutral.blueGrayLight[1200], - subtle: globalColors.neutral.blueGrayLight[900], - muted: globalColors.neutral.blueGrayLight[600], - disabled: globalColors.neutral.blueGrayLight.a200, - }, - staticWhite: { - normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[450], - muted: globalColors.neutral.white[200], - disabled: globalColors.neutral.white[100], - }, - primary: { normal: globalColors.chromatic.azure[500] }, }, + hover: { subtle: globalColors.neutral.white[50], intense: globalColors.neutral.black[10] }, }, overlay: { background: { @@ -350,30 +426,118 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayLight[900], }, }, - feedback: { + elevation: { + lowRaised: `hsla(212, 39%, 16%, ${opacity[1]})`, + midRaised: `hsla(212, 39%, 16%, ${opacity[2]})`, + highRaised: `hsla(212, 39%, 16%, ${opacity[3]})`, + }, + transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, + }, + onDark: { + surface: { background: { - positive: { - subtle: globalColors.chromatic.emerald.a50, - intense: globalColors.chromatic.emerald[600], + gray: { + subtle: globalColors.neutral.blueGrayDark[1300], + moderate: globalColors.neutral.blueGrayDark[1200], + intense: globalColors.neutral.blueGrayDark[1100], }, - negative: { - subtle: globalColors.chromatic.crimson.a50, - intense: globalColors.chromatic.crimson[600], + primary: { + subtle: globalColors.chromatic.azure.a200, + intense: globalColors.chromatic.azure[500], }, - notice: { - subtle: globalColors.chromatic.cider.a50, - intense: globalColors.chromatic.cider[600], + sea: { subtle: globalColors.chromatic.sea[900], intense: globalColors.chromatic.sea[100] }, + cloud: { + subtle: globalColors.chromatic.cloud[900], + intense: globalColors.chromatic.cloud[100], }, - information: { - subtle: globalColors.chromatic.sapphire.a50, - intense: globalColors.chromatic.sapphire[600], + }, + border: { + gray: { + normal: globalColors.neutral.blueGrayDark[700], + subtle: globalColors.neutral.blueGrayDark[900], + muted: globalColors.neutral.blueGrayDark.a100, }, - neutral: { - subtle: globalColors.neutral.blueGrayLight.a50, - intense: globalColors.neutral.blueGrayLight[1000], + primary: { + normal: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure.a200, }, }, - border: { + text: { + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + primary: { normal: globalColors.chromatic.azure[300] }, + onSea: { + onSubtle: globalColors.chromatic.forest[200], + onIntense: globalColors.chromatic.forest[800], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[200], + onIntense: globalColors.chromatic.azure[600], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], + }, + }, + icon: { + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + primary: { normal: globalColors.chromatic.azure[300] }, + onSea: { + onSubtle: globalColors.chromatic.forest[400], + onIntense: globalColors.chromatic.forest[600], + }, + onCloud: { + onSubtle: globalColors.chromatic.azure[300], + onIntense: globalColors.chromatic.azure[400], + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[450], + muted: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[100], + }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[300], + muted: globalColors.neutral.black[200], + disabled: globalColors.neutral.black[100], + }, + }, + }, + transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, + }, + onDark: { + interactive: { + icon: { + gray: { + normal: globalColors.neutral.blueGrayDark[50], + subtle: globalColors.neutral.blueGrayDark[300], + muted: globalColors.neutral.blueGrayDark[600], + disabled: globalColors.neutral.blueGrayDark.a200, + }, + staticWhite: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, positive: { subtle: globalColors.chromatic.emerald.a100, intense: globalColors.chromatic.emerald[700], @@ -391,140 +555,103 @@ const colors: ColorsWithModes = { intense: globalColors.chromatic.sapphire[700], }, neutral: { - subtle: globalColors.neutral.blueGrayLight.a100, - intense: globalColors.neutral.blueGrayLight[1100], + subtle: globalColors.neutral.blueGrayDark.a50, + intense: globalColors.neutral.blueGrayDark[1000], }, }, - text: { + background: { positive: { - subtle: globalColors.chromatic.emerald[100], + subtle: globalColors.chromatic.emerald.a200, intense: globalColors.chromatic.emerald[800], }, negative: { - subtle: globalColors.chromatic.crimson[100], + subtle: globalColors.chromatic.crimson.a200, intense: globalColors.chromatic.crimson[800], }, notice: { - subtle: globalColors.chromatic.cider[100], - intense: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider.a200, + intense: globalColors.chromatic.cider[800], }, information: { - subtle: globalColors.chromatic.sapphire[100], + subtle: globalColors.chromatic.sapphire.a200, intense: globalColors.chromatic.sapphire[800], }, neutral: { - subtle: globalColors.neutral.blueGrayLight[500], + subtle: globalColors.neutral.blueGrayLight.a100, intense: globalColors.neutral.blueGrayLight[1100], }, }, - icon: { + border: { positive: { - subtle: globalColors.chromatic.emerald[100], - intense: globalColors.chromatic.emerald[800], + subtle: globalColors.chromatic.emerald[50], + intense: globalColors.chromatic.emerald[500], }, negative: { - subtle: globalColors.chromatic.crimson[100], - intense: globalColors.chromatic.crimson[800], + subtle: globalColors.chromatic.crimson[50], + intense: globalColors.chromatic.crimson[500], }, notice: { - subtle: globalColors.chromatic.cider[100], - intense: globalColors.chromatic.cider[700], + subtle: globalColors.chromatic.cider[50], + intense: globalColors.chromatic.cider[500], }, information: { - subtle: globalColors.chromatic.sapphire[100], - intense: globalColors.chromatic.sapphire[800], + subtle: globalColors.chromatic.sapphire[50], + intense: globalColors.chromatic.sapphire[500], }, neutral: { - subtle: globalColors.neutral.blueGrayLight[500], - intense: globalColors.neutral.blueGrayLight[1100], + subtle: globalColors.neutral.blueGrayDark[700], + intense: globalColors.neutral.blueGrayDark[100], }, }, - }, - transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, - }, - onDark: { - interactive: { - icon: { - gray: { - normal: globalColors.neutral.blueGrayDark[50], - subtle: globalColors.neutral.blueGrayDark[300], - muted: globalColors.neutral.blueGrayDark[600], - disabled: globalColors.neutral.blueGrayDark.a200, - }, - staticWhite: { - normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[400], - muted: globalColors.neutral.white[300], - disabled: globalColors.neutral.white[100], - }, + text: { positive: { - normal: globalColors.chromatic.emerald[400], - subtle: globalColors.chromatic.emerald[500], - muted: globalColors.chromatic.emerald[700], - disabled: globalColors.chromatic.emerald.a200, + subtle: globalColors.chromatic.emerald[50], + intense: globalColors.chromatic.emerald[500], }, negative: { - normal: globalColors.chromatic.crimson[400], - subtle: globalColors.chromatic.crimson[500], - muted: globalColors.chromatic.crimson[700], - disabled: globalColors.chromatic.crimson.a200, + subtle: globalColors.chromatic.crimson[50], + intense: globalColors.chromatic.crimson[500], }, notice: { - normal: globalColors.chromatic.cider[400], - subtle: globalColors.chromatic.cider[500], - muted: globalColors.chromatic.cider[700], - disabled: globalColors.chromatic.cider.a200, + subtle: globalColors.chromatic.cider[50], + intense: globalColors.chromatic.cider[500], }, information: { - normal: globalColors.chromatic.sapphire[400], - subtle: globalColors.chromatic.sapphire[500], - muted: globalColors.chromatic.sapphire[700], - disabled: globalColors.chromatic.sapphire.a200, + subtle: globalColors.chromatic.sapphire[50], + intense: globalColors.chromatic.sapphire[500], }, neutral: { - normal: globalColors.neutral.blueGrayDark[50], - subtle: globalColors.neutral.blueGrayDark[300], - muted: globalColors.neutral.blueGrayDark[600], - disabled: globalColors.neutral.blueGrayDark.a200, - }, - primary: { - normal: globalColors.chromatic.azure[300], - subtle: globalColors.chromatic.azure[400], - muted: globalColors.chromatic.azure[600], - disabled: globalColors.chromatic.azure.a200, - }, - staticBlack: { - normal: globalColors.neutral.black[500], - subtle: globalColors.neutral.black[400], - muted: globalColors.neutral.black[300], - disabled: globalColors.neutral.black[100], + subtle: globalColors.neutral.blueGrayDark[700], + intense: globalColors.neutral.blueGrayDark[100], }, }, + }, + interactive: { background: { positive: { - default: globalColors.chromatic.emerald[700], - highlighted: globalColors.chromatic.emerald[800], + default: globalColors.chromatic.emerald[600], + highlighted: globalColors.chromatic.emerald[700], disabled: globalColors.chromatic.emerald.a100, faded: globalColors.chromatic.emerald.a150, fadedHighlighted: globalColors.chromatic.emerald.a200, }, negative: { - default: globalColors.chromatic.crimson[700], - highlighted: globalColors.chromatic.crimson[800], + default: globalColors.chromatic.crimson[600], + highlighted: globalColors.chromatic.crimson[700], disabled: globalColors.chromatic.crimson.a100, faded: globalColors.chromatic.crimson.a150, fadedHighlighted: globalColors.chromatic.crimson.a200, }, notice: { - default: globalColors.chromatic.cider[700], - highlighted: globalColors.chromatic.cider[800], + default: globalColors.chromatic.cider[600], + highlighted: globalColors.chromatic.cider[700], disabled: globalColors.chromatic.cider.a100, faded: globalColors.chromatic.cider.a150, fadedHighlighted: globalColors.chromatic.cider.a200, }, information: { - default: globalColors.chromatic.sapphire[700], - highlighted: globalColors.chromatic.sapphire[800], + default: globalColors.chromatic.sapphire[600], + highlighted: globalColors.chromatic.sapphire[700], disabled: globalColors.chromatic.sapphire.a100, faded: globalColors.chromatic.sapphire.a150, fadedHighlighted: globalColors.chromatic.sapphire.a200, @@ -536,13 +663,6 @@ const colors: ColorsWithModes = { faded: globalColors.neutral.blueGrayDark.a75, fadedHighlighted: globalColors.neutral.blueGrayDark.a100, }, - primary: { - default: globalColors.chromatic.azure[600], - highlighted: globalColors.chromatic.azure[700], - disabled: globalColors.chromatic.azure.a100, - faded: globalColors.chromatic.azure.a100, - fadedHighlighted: globalColors.chromatic.azure.a150, - }, gray: { default: globalColors.neutral.blueGrayDark.a50, highlighted: globalColors.neutral.blueGrayDark.a100, @@ -550,6 +670,13 @@ const colors: ColorsWithModes = { faded: globalColors.neutral.blueGrayDark.a75, fadedHighlighted: globalColors.neutral.blueGrayDark.a100, }, + primary: { + default: globalColors.chromatic.azure[400], + highlighted: globalColors.chromatic.azure[500], + disabled: globalColors.chromatic.azure.a100, + faded: globalColors.chromatic.azure.a150, + fadedHighlighted: globalColors.chromatic.azure.a200, + }, staticBlack: { default: globalColors.neutral.black[500], highlighted: globalColors.neutral.black[500], @@ -560,33 +687,33 @@ const colors: ColorsWithModes = { staticWhite: { default: globalColors.neutral.white[500], highlighted: globalColors.neutral.white[400], - disabled: globalColors.neutral.white[200], + disabled: globalColors.neutral.white[50], faded: globalColors.neutral.white[50], fadedHighlighted: globalColors.neutral.white[100], }, }, border: { positive: { - default: globalColors.chromatic.emerald[700], - highlighted: globalColors.chromatic.emerald[800], + default: globalColors.chromatic.emerald[600], + highlighted: globalColors.chromatic.emerald[700], disabled: globalColors.chromatic.emerald.a100, faded: globalColors.chromatic.emerald.a100, }, negative: { - default: globalColors.chromatic.crimson[700], - highlighted: globalColors.chromatic.crimson[800], + default: globalColors.chromatic.crimson[600], + highlighted: globalColors.chromatic.crimson[700], disabled: globalColors.chromatic.crimson.a100, faded: globalColors.chromatic.crimson.a100, }, notice: { - default: globalColors.chromatic.cider[700], - highlighted: globalColors.chromatic.cider[800], + default: globalColors.chromatic.cider[600], + highlighted: globalColors.chromatic.cider[700], disabled: globalColors.chromatic.cider.a100, faded: globalColors.chromatic.cider.a100, }, information: { - default: globalColors.chromatic.sapphire[700], - highlighted: globalColors.chromatic.sapphire[800], + default: globalColors.chromatic.sapphire[600], + highlighted: globalColors.chromatic.sapphire[700], disabled: globalColors.chromatic.sapphire.a100, faded: globalColors.chromatic.sapphire.a100, }, @@ -596,11 +723,17 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.blueGrayLight[900], faded: globalColors.neutral.blueGrayDark.a100, }, + gray: { + default: globalColors.neutral.blueGrayDark[800], + highlighted: globalColors.neutral.blueGrayDark[800], + disabled: globalColors.neutral.blueGrayDark[1000], + faded: globalColors.neutral.blueGrayDark.a100, + }, primary: { default: globalColors.chromatic.azure[400], highlighted: globalColors.chromatic.azure[500], disabled: globalColors.chromatic.azure.a200, - faded: globalColors.chromatic.azure.a100, + faded: globalColors.chromatic.azure.a150, }, staticWhite: { default: globalColors.neutral.white[500], @@ -614,12 +747,6 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.black[100], faded: globalColors.neutral.black[100], }, - gray: { - default: globalColors.neutral.blueGrayDark[800], - highlighted: globalColors.neutral.blueGrayDark[800], - disabled: globalColors.neutral.blueGrayDark[1000], - faded: globalColors.neutral.blueGrayDark.a100, - }, }, text: { positive: { @@ -664,6 +791,12 @@ const colors: ColorsWithModes = { muted: globalColors.chromatic.azure[600], disabled: globalColors.chromatic.azure.a200, }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, staticWhite: { normal: globalColors.neutral.white[500], subtle: globalColors.neutral.white[400], @@ -677,93 +810,69 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.black[100], }, }, - }, - surface: { - background: { - gray: { - subtle: globalColors.neutral.blueGrayDark[1300], - moderate: globalColors.neutral.blueGrayDark[1200], - intense: globalColors.neutral.blueGrayDark[1100], - }, - primary: { - subtle: globalColors.chromatic.azure.a200, - intense: globalColors.chromatic.azure[500], - }, - sea: { subtle: globalColors.chromatic.sea[900], intense: globalColors.chromatic.sea[100] }, - cloud: { - subtle: globalColors.chromatic.cloud[900], - intense: globalColors.chromatic.cloud[100], + icon: { + positive: { + normal: globalColors.chromatic.emerald[400], + subtle: globalColors.chromatic.emerald[500], + muted: globalColors.chromatic.emerald[700], + disabled: globalColors.chromatic.emerald.a200, }, - }, - border: { - gray: { - normal: globalColors.neutral.blueGrayDark[700], - subtle: globalColors.neutral.blueGrayDark[900], - muted: globalColors.neutral.blueGrayDark.a100, + negative: { + normal: globalColors.chromatic.crimson[400], + subtle: globalColors.chromatic.crimson[500], + muted: globalColors.chromatic.crimson[700], + disabled: globalColors.chromatic.crimson.a200, }, - primary: { - normal: globalColors.chromatic.azure[500], - muted: globalColors.chromatic.azure.a200, + notice: { + normal: globalColors.chromatic.cider[400], + subtle: globalColors.chromatic.cider[500], + muted: globalColors.chromatic.cider[700], + disabled: globalColors.chromatic.cider.a200, }, - }, - text: { - staticBlack: { - normal: globalColors.neutral.black[500], - subtle: globalColors.neutral.black[300], - muted: globalColors.neutral.black[200], - disabled: globalColors.neutral.black[100], + information: { + normal: globalColors.chromatic.sapphire[400], + subtle: globalColors.chromatic.sapphire[500], + muted: globalColors.chromatic.sapphire[700], + disabled: globalColors.chromatic.sapphire.a200, }, - gray: { + neutral: { normal: globalColors.neutral.blueGrayDark[50], subtle: globalColors.neutral.blueGrayDark[300], muted: globalColors.neutral.blueGrayDark[600], disabled: globalColors.neutral.blueGrayDark.a200, }, - staticWhite: { - normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[450], - muted: globalColors.neutral.white[200], - disabled: globalColors.neutral.white[100], - }, - onSea: { - onSubtle: globalColors.chromatic.forest[200], - onIntense: globalColors.chromatic.forest[800], - }, - onCloud: { - onSubtle: globalColors.chromatic.azure[200], - onIntense: globalColors.chromatic.azure[600], - }, - primary: { normal: globalColors.chromatic.azure[300] }, - }, - icon: { - onSea: { - onSubtle: globalColors.chromatic.forest[400], - onIntense: globalColors.chromatic.forest[600], - }, - onCloud: { - onSubtle: globalColors.chromatic.azure[300], - onIntense: globalColors.chromatic.azure[400], - }, - staticBlack: { - normal: globalColors.neutral.black[500], - subtle: globalColors.neutral.black[300], - muted: globalColors.neutral.black[200], - disabled: globalColors.neutral.black[100], - }, gray: { normal: globalColors.neutral.blueGrayDark[50], subtle: globalColors.neutral.blueGrayDark[300], muted: globalColors.neutral.blueGrayDark[600], disabled: globalColors.neutral.blueGrayDark.a200, }, + primary: { + normal: globalColors.chromatic.azure[300], + subtle: globalColors.chromatic.azure[400], + muted: globalColors.chromatic.azure[600], + disabled: globalColors.chromatic.azure.a200, + }, + onPrimary: { + normal: globalColors.neutral.white[500], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], + disabled: globalColors.neutral.white[100], + }, staticWhite: { normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[450], - muted: globalColors.neutral.white[200], + subtle: globalColors.neutral.white[400], + muted: globalColors.neutral.white[300], disabled: globalColors.neutral.white[100], }, - primary: { normal: globalColors.chromatic.azure[300] }, + staticBlack: { + normal: globalColors.neutral.black[500], + subtle: globalColors.neutral.black[400], + muted: globalColors.neutral.black[300], + disabled: globalColors.neutral.black[100], + }, }, + hover: { subtle: globalColors.neutral.black[25], intense: globalColors.neutral.white[100] }, }, overlay: { background: { @@ -781,96 +890,6 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayDark.a100, }, }, - feedback: { - background: { - positive: { - subtle: globalColors.chromatic.emerald.a100, - intense: globalColors.chromatic.emerald[700], - }, - negative: { - subtle: globalColors.chromatic.crimson.a100, - intense: globalColors.chromatic.crimson[700], - }, - notice: { - subtle: globalColors.chromatic.cider.a100, - intense: globalColors.chromatic.cider[700], - }, - information: { - subtle: globalColors.chromatic.sapphire.a100, - intense: globalColors.chromatic.sapphire[700], - }, - neutral: { - subtle: globalColors.neutral.blueGrayDark.a50, - intense: globalColors.neutral.blueGrayDark[1000], - }, - }, - border: { - positive: { - subtle: globalColors.chromatic.emerald.a200, - intense: globalColors.chromatic.emerald[800], - }, - negative: { - subtle: globalColors.chromatic.crimson.a200, - intense: globalColors.chromatic.crimson[800], - }, - notice: { - subtle: globalColors.chromatic.cider.a200, - intense: globalColors.chromatic.cider[800], - }, - information: { - subtle: globalColors.chromatic.sapphire.a200, - intense: globalColors.chromatic.sapphire[800], - }, - neutral: { - subtle: globalColors.neutral.blueGrayLight.a100, - intense: globalColors.neutral.blueGrayLight[1100], - }, - }, - text: { - positive: { - subtle: globalColors.chromatic.emerald[50], - intense: globalColors.chromatic.emerald[500], - }, - negative: { - subtle: globalColors.chromatic.crimson[50], - intense: globalColors.chromatic.crimson[500], - }, - notice: { - subtle: globalColors.chromatic.cider[50], - intense: globalColors.chromatic.cider[500], - }, - information: { - subtle: globalColors.chromatic.sapphire[50], - intense: globalColors.chromatic.sapphire[500], - }, - neutral: { - subtle: globalColors.neutral.blueGrayDark[700], - intense: globalColors.neutral.blueGrayDark[100], - }, - }, - icon: { - positive: { - subtle: globalColors.chromatic.emerald[50], - intense: globalColors.chromatic.emerald[500], - }, - negative: { - subtle: globalColors.chromatic.crimson[50], - intense: globalColors.chromatic.crimson[500], - }, - notice: { - subtle: globalColors.chromatic.cider[50], - intense: globalColors.chromatic.cider[500], - }, - information: { - subtle: globalColors.chromatic.sapphire[50], - intense: globalColors.chromatic.sapphire[500], - }, - neutral: { - subtle: globalColors.neutral.blueGrayDark[700], - intense: globalColors.neutral.blueGrayDark[100], - }, - }, - }, transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, }, }; From 74b50d2aefeec17e578ef2369760fe2250037c8b Mon Sep 17 00:00:00 2001 From: kamleshchandnani Date: Thu, 11 Jan 2024 15:20:10 +0530 Subject: [PATCH 74/98] fix: tokens types and git conflicts --- packages/blade/src/tokens/theme/bladeTheme.ts | 89 +++++++++++-------- packages/blade/src/tokens/theme/theme.ts | 10 ++- 2 files changed, 62 insertions(+), 37 deletions(-) diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts index 15994ab4393..c2427e46fd4 100644 --- a/packages/blade/src/tokens/theme/bladeTheme.ts +++ b/packages/blade/src/tokens/theme/bladeTheme.ts @@ -12,15 +12,47 @@ import { const colors: ColorsWithModes = { onLight: { - interactive: { - icon: { + surface: { + background: { + gray: { + subtle: globalColors.neutral.blueGrayLight[100], + moderate: globalColors.neutral.blueGrayLight[50], + intense: globalColors.neutral.blueGrayLight[0], + }, + primary: { + subtle: globalColors.chromatic.azure.a50, + intense: globalColors.chromatic.azure[500], + }, + sea: { + subtle: globalColors.chromatic.sea[50], + intense: globalColors.chromatic.sea[800], + }, + cloud: { + subtle: globalColors.chromatic.cloud[50], + intense: globalColors.chromatic.cloud[800], + }, + }, + border: { + gray: { + normal: globalColors.neutral.blueGrayLight[500], + subtle: globalColors.neutral.blueGrayLight[300], + muted: globalColors.neutral.blueGrayLight.a100, + }, + primary: { + normal: globalColors.chromatic.azure[500], + muted: globalColors.chromatic.azure.a100, + }, + }, + text: { gray: { normal: globalColors.neutral.blueGrayLight[1200], subtle: globalColors.neutral.blueGrayLight[900], muted: globalColors.neutral.blueGrayLight[600], disabled: globalColors.neutral.blueGrayLight.a200, }, - primary: { normal: globalColors.chromatic.azure[500] }, + primary: { + normal: globalColors.chromatic.azure[500], + }, onSea: { onSubtle: globalColors.chromatic.forest[800], onIntense: globalColors.chromatic.forest[200], @@ -49,7 +81,9 @@ const colors: ColorsWithModes = { muted: globalColors.neutral.blueGrayLight[600], disabled: globalColors.neutral.blueGrayLight.a200, }, - primary: { normal: globalColors.chromatic.azure[500] }, + primary: { + normal: globalColors.chromatic.azure[500], + }, onSea: { onSubtle: globalColors.chromatic.forest[600], onIntense: globalColors.chromatic.forest[400], @@ -139,7 +173,7 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayLight[1100], }, }, - text: { + icon: { positive: { subtle: globalColors.chromatic.emerald[100], intense: globalColors.chromatic.emerald[800], @@ -408,7 +442,6 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.black[100], }, }, - hover: { subtle: globalColors.neutral.white[50], intense: globalColors.neutral.black[10] }, }, overlay: { background: { @@ -426,11 +459,6 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayLight[900], }, }, - elevation: { - lowRaised: `hsla(212, 39%, 16%, ${opacity[1]})`, - midRaised: `hsla(212, 39%, 16%, ${opacity[2]})`, - highRaised: `hsla(212, 39%, 16%, ${opacity[3]})`, - }, transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, }, onDark: { @@ -445,7 +473,10 @@ const colors: ColorsWithModes = { subtle: globalColors.chromatic.azure.a200, intense: globalColors.chromatic.azure[500], }, - sea: { subtle: globalColors.chromatic.sea[900], intense: globalColors.chromatic.sea[100] }, + sea: { + subtle: globalColors.chromatic.sea[900], + intense: globalColors.chromatic.sea[100], + }, cloud: { subtle: globalColors.chromatic.cloud[900], intense: globalColors.chromatic.cloud[100], @@ -469,7 +500,9 @@ const colors: ColorsWithModes = { muted: globalColors.neutral.blueGrayDark[600], disabled: globalColors.neutral.blueGrayDark.a200, }, - primary: { normal: globalColors.chromatic.azure[300] }, + primary: { + normal: globalColors.chromatic.azure[300], + }, onSea: { onSubtle: globalColors.chromatic.forest[200], onIntense: globalColors.chromatic.forest[800], @@ -498,7 +531,9 @@ const colors: ColorsWithModes = { muted: globalColors.neutral.blueGrayDark[600], disabled: globalColors.neutral.blueGrayDark.a200, }, - primary: { normal: globalColors.chromatic.azure[300] }, + primary: { + normal: globalColors.chromatic.azure[300], + }, onSea: { onSubtle: globalColors.chromatic.forest[400], onIntense: globalColors.chromatic.forest[600], @@ -521,23 +556,8 @@ const colors: ColorsWithModes = { }, }, }, - transparent: `hsla(0, 0%, 100%, ${opacity[0]})`, - }, - onDark: { - interactive: { - icon: { - gray: { - normal: globalColors.neutral.blueGrayDark[50], - subtle: globalColors.neutral.blueGrayDark[300], - muted: globalColors.neutral.blueGrayDark[600], - disabled: globalColors.neutral.blueGrayDark.a200, - }, - staticWhite: { - normal: globalColors.neutral.white[500], - subtle: globalColors.neutral.white[400], - muted: globalColors.neutral.white[300], - disabled: globalColors.neutral.white[100], - }, + feedback: { + background: { positive: { subtle: globalColors.chromatic.emerald.a100, intense: globalColors.chromatic.emerald[700], @@ -559,7 +579,7 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayDark[1000], }, }, - background: { + border: { positive: { subtle: globalColors.chromatic.emerald.a200, intense: globalColors.chromatic.emerald[800], @@ -581,7 +601,7 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayLight[1100], }, }, - border: { + text: { positive: { subtle: globalColors.chromatic.emerald[50], intense: globalColors.chromatic.emerald[500], @@ -603,7 +623,7 @@ const colors: ColorsWithModes = { intense: globalColors.neutral.blueGrayDark[100], }, }, - text: { + icon: { positive: { subtle: globalColors.chromatic.emerald[50], intense: globalColors.chromatic.emerald[500], @@ -872,7 +892,6 @@ const colors: ColorsWithModes = { disabled: globalColors.neutral.black[100], }, }, - hover: { subtle: globalColors.neutral.black[25], intense: globalColors.neutral.white[100] }, }, overlay: { background: { diff --git a/packages/blade/src/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts index 104312ba111..37c7690c949 100644 --- a/packages/blade/src/tokens/theme/theme.ts +++ b/packages/blade/src/tokens/theme/theme.ts @@ -55,8 +55,14 @@ export type Colors = { interactive: { background: Record; border: Record; - text: Record>; - icon: Record>; + text: Record< + InteractiveColorKeys & { onPrimary: string }, + Pick + >; + icon: Record< + InteractiveColorKeys & { onPrimary: string }, + Pick + >; }; feedback: { background: Record; From 2e19e0425e1a76cb6dd61ee863766bbd600cd7e4 Mon Sep 17 00:00:00 2001 From: kamleshchandnani Date: Thu, 11 Jan 2024 15:33:24 +0530 Subject: [PATCH 75/98] =?UTF-8?q?fix:=20types=20=F0=9F=A4=A6=E2=80=8D?= =?UTF-8?q?=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/blade/src/tokens/theme/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts index 37c7690c949..82c9e420d45 100644 --- a/packages/blade/src/tokens/theme/theme.ts +++ b/packages/blade/src/tokens/theme/theme.ts @@ -56,11 +56,11 @@ export type Colors = { background: Record; border: Record; text: Record< - InteractiveColorKeys & { onPrimary: string }, + InteractiveColorKeys | 'onPrimary', Pick >; icon: Record< - InteractiveColorKeys & { onPrimary: string }, + InteractiveColorKeys | 'onPrimary', Pick >; }; From 7c28904bd6485764bcad0a8eeaf452637dd89fb5 Mon Sep 17 00:00:00 2001 From: kamleshchandnani Date: Thu, 11 Jan 2024 15:57:50 +0530 Subject: [PATCH 76/98] tests: update snapshots --- .../BottomSheet.native.test.tsx.snap | 16 +- .../BottomSheet.ssr.test.tsx.snap | 14 +- .../BottomSheet.web.test.tsx.snap | 14 +- .../BaseButton.native.test.tsx.snap | 154 +++++++++--------- .../BaseButton.ssr.test.tsx.snap | 4 +- .../BaseButton.web.test.tsx.snap | 142 ++++++++-------- .../__snapshots__/Button.native.test.tsx.snap | 114 ++++++------- .../__snapshots__/Button.ssr.test.tsx.snap | 8 +- .../__snapshots__/Button.web.test.tsx.snap | 102 ++++++------ .../IconButton.ssr.test.tsx.snap | 4 +- .../IconButton.web.test.tsx.snap | 4 +- .../__snapshots__/Card.native.test.tsx.snap | 10 +- .../__snapshots__/Card.ssr.test.tsx.snap | 14 +- .../__snapshots__/Card.web.test.tsx.snap | 12 +- .../__snapshots__/Checkbox.web.test.tsx.snap | 4 +- .../Collapsible.native.test.tsx.snap | 6 +- .../Collapsible.ssr.test.tsx.snap | 4 +- .../Collapsible.web.test.tsx.snap | 8 +- .../BaseLink.native.test.tsx.snap | 48 +++--- .../__snapshots__/BaseLink.ssr.test.tsx.snap | 6 +- .../__snapshots__/BaseLink.web.test.tsx.snap | 94 +++++------ .../__snapshots__/Link.native.test.tsx.snap | 48 +++--- .../__snapshots__/Link.ssr.test.tsx.snap | 6 +- .../__snapshots__/Link.web.test.tsx.snap | 76 ++++----- .../__snapshots__/List.native.test.tsx.snap | 4 +- .../__snapshots__/List.web.test.tsx.snap | 2 +- .../__snapshots__/Modal.web.test.tsx.snap | 4 +- .../Popover.native.test.tsx.snap | 6 +- .../__snapshots__/Popover.web.test.tsx.snap | 12 +- .../ProgressBar.native.test.tsx.snap | 4 +- .../ProgressBar.web.test.tsx.snap | 4 +- .../__snapshots__/Switch.native.test.tsx.snap | 2 +- .../__snapshots__/Switch.web.test.tsx.snap | 2 +- .../__snapshots__/Tabs.native.test.tsx.snap | 18 +- .../__snapshots__/Tabs.ssr.test.tsx.snap | 6 +- .../__snapshots__/Tabs.web.test.tsx.snap | 22 +-- .../__snapshots__/Tag.ssr.test.tsx.snap | 4 +- .../__snapshots__/Tag.web.test.tsx.snap | 2 +- .../Tooltip.native.test.tsx.snap | 6 +- .../__snapshots__/Tooltip.ssr.test.tsx.snap | 4 +- .../__snapshots__/Tooltip.web.test.tsx.snap | 6 +- .../__snapshots__/Text.web.test.tsx.snap | 2 +- 42 files changed, 511 insertions(+), 511 deletions(-) diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap index 2ce48dbae06..62704dd96f0 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap @@ -272,11 +272,11 @@ exports[` should render Header/Footer/Body properly 1`] = ` data-blade-component="button" defaultBackgroundColor="hsla(0, 0%, 100%, 0)" defaultBorderColor="hsla(227, 100%, 59%, 1)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 1)" isFullWidth={true} isLoading={false} @@ -361,7 +361,7 @@ exports[` should render Header/Footer/Body properly 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1308,11 +1308,11 @@ exports[` should render empty header 1`] = ` data-blade-component="button" defaultBackgroundColor="hsla(0, 0%, 100%, 0)" defaultBorderColor="hsla(227, 100%, 59%, 1)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 1)" isFullWidth={true} isLoading={false} @@ -1397,7 +1397,7 @@ exports[` should render empty header 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap index e4038185c45..968cbf68fe2 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render a BottomSheet ssr 1`] = `"
"`; +exports[` should render a BottomSheet ssr 1`] = `"
"`; exports[` should render a BottomSheet ssr 2`] = ` .c3.c3.c3.c3.c3 { @@ -248,7 +248,7 @@ exports[` should render a BottomSheet ssr 2`] = ` .c24.c24.c24.c24.c24:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -341,7 +341,7 @@ exports[` should render a BottomSheet ssr 2`] = ` } .c35.c35.c35.c35.c35 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -529,20 +529,20 @@ exports[` should render a BottomSheet ssr 2`] = ` } .c32.c32.c32.c32.c32:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c32.c32.c32.c32.c32 * { diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap index 6cb444da0d3..8a4171c360d 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap @@ -951,7 +951,7 @@ exports[` should render Header/Footer/Body properly on opened sta .c24.c24.c24.c24.c24:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -1044,7 +1044,7 @@ exports[` should render Header/Footer/Body properly on opened sta } .c35.c35.c35.c35.c35 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1217,20 +1217,20 @@ exports[` should render Header/Footer/Body properly on opened sta } .c32.c32.c32.c32.c32:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c32.c32.c32.c32.c32 * { @@ -1643,7 +1643,7 @@ exports[` should render empty header with padding 0 1`] = ` .c8.c8.c8.c8.c8:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap index 608e9739780..ba54c7c8242 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[` should render button with default properties 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -196,7 +196,7 @@ exports[` should render button with full width 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -352,7 +352,7 @@ exports[` should render button with icon with default iconPosition defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -580,7 +580,7 @@ exports[` should render button with icon with left iconPosition 1` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -808,7 +808,7 @@ exports[` should render button with icon with right iconPosition 1 defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -1036,7 +1036,7 @@ exports[` should render button with icon without text 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -1225,13 +1225,13 @@ exports[` should render disabled button 1`] = ` buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)" defaultBorderColor="hsla(227, 100%, 59%, 0.18)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" isFullWidth={false} isLoading={false} @@ -1253,7 +1253,7 @@ exports[` should render disabled button 1`] = ` { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", "borderRadius": 4, "borderStyle": "solid", @@ -1273,7 +1273,7 @@ exports[` should render disabled button 1`] = ` "width": "auto", }, { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", }, ] @@ -1385,7 +1385,7 @@ exports[` should render disabled information color primary button defaultBorderColor="hsla(200, 84%, 44%, 0.18)" focusBackgroundColor="hsla(200, 84%, 44%, 0.09)" focusBorderColor="hsla(200, 84%, 44%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 44%, 0.09)" hoverBorderColor="hsla(200, 84%, 44%, 0.18)" @@ -1541,7 +1541,7 @@ exports[` should render disabled information color secondary butto defaultBorderColor="hsla(200, 84%, 44%, 0.18)" focusBackgroundColor="hsla(200, 84%, 44%, 0.09)" focusBorderColor="hsla(200, 84%, 44%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 44%, 0.09)" hoverBorderColor="hsla(200, 84%, 44%, 0.18)" @@ -1697,7 +1697,7 @@ exports[` should render disabled negative color primary button 1`] defaultBorderColor="hsla(4, 74%, 49%, 0.18)" focusBackgroundColor="hsla(4, 74%, 49%, 0.09)" focusBorderColor="hsla(4, 74%, 49%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)" hoverBorderColor="hsla(4, 74%, 49%, 0.18)" @@ -1853,7 +1853,7 @@ exports[` should render disabled negative color secondary button 1 defaultBorderColor="hsla(4, 74%, 49%, 0.18)" focusBackgroundColor="hsla(4, 74%, 49%, 0.09)" focusBorderColor="hsla(4, 74%, 49%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)" hoverBorderColor="hsla(4, 74%, 49%, 0.18)" @@ -2009,7 +2009,7 @@ exports[` should render disabled neutral color primary button 1`] defaultBorderColor="hsla(214, 28%, 84%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.18)" focusBorderColor="hsla(214, 28%, 84%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)" hoverBorderColor="hsla(214, 28%, 84%, 1)" @@ -2165,7 +2165,7 @@ exports[` should render disabled neutral color secondary button 1` defaultBorderColor="hsla(214, 28%, 84%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.18)" focusBorderColor="hsla(214, 28%, 84%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)" hoverBorderColor="hsla(214, 28%, 84%, 1)" @@ -2321,7 +2321,7 @@ exports[` should render disabled notice color primary button 1`] = defaultBorderColor="hsla(25, 90%, 48%, 0.18)" focusBackgroundColor="hsla(25, 90%, 48%, 0.09)" focusBorderColor="hsla(25, 90%, 48%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 90%, 48%, 0.09)" hoverBorderColor="hsla(25, 90%, 48%, 0.18)" @@ -2477,7 +2477,7 @@ exports[` should render disabled notice color secondary button 1`] defaultBorderColor="hsla(25, 90%, 48%, 0.18)" focusBackgroundColor="hsla(25, 90%, 48%, 0.09)" focusBorderColor="hsla(25, 90%, 48%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 90%, 48%, 0.09)" hoverBorderColor="hsla(25, 90%, 48%, 0.18)" @@ -2633,7 +2633,7 @@ exports[` should render disabled positive color primary button 1`] defaultBorderColor="hsla(150, 100%, 32%, 0.18)" focusBackgroundColor="hsla(150, 100%, 32%, 0.09)" focusBorderColor="hsla(150, 100%, 32%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)" hoverBorderColor="hsla(150, 100%, 32%, 0.18)" @@ -2789,7 +2789,7 @@ exports[` should render disabled positive color secondary button 1 defaultBorderColor="hsla(150, 100%, 32%, 0.18)" focusBackgroundColor="hsla(150, 100%, 32%, 0.09)" focusBorderColor="hsla(150, 100%, 32%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)" hoverBorderColor="hsla(150, 100%, 32%, 0.18)" @@ -2941,13 +2941,13 @@ exports[` should render disabled primary color primary button 1`] buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)" defaultBorderColor="hsla(227, 100%, 59%, 0.18)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" isFullWidth={false} isLoading={false} @@ -2969,7 +2969,7 @@ exports[` should render disabled primary color primary button 1`] { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", "borderRadius": 4, "borderStyle": "solid", @@ -2989,7 +2989,7 @@ exports[` should render disabled primary color primary button 1`] "width": "auto", }, { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", }, ] @@ -3101,7 +3101,7 @@ exports[` should render disabled primary color secondary button 1` defaultBorderColor="hsla(227, 100%, 59%, 0.18)" focusBackgroundColor="hsla(0, 0%, 100%, 0)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" @@ -3257,7 +3257,7 @@ exports[` should render disabled primary color tertiary button 1`] defaultBorderColor="hsla(214, 40%, 92%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.09)" focusBorderColor="hsla(214, 40%, 92%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)" hoverBorderColor="hsla(214, 40%, 92%, 1)" @@ -3408,13 +3408,13 @@ exports[` should render disabled white color primary button 1`] = buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(0, 0%, 100%, 0.48)" + defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)" defaultBorderColor="hsla(0, 0%, 100%, 0.32)" - focusBackgroundColor="hsla(0, 0%, 100%, 0.48)" + focusBackgroundColor="hsla(0, 0%, 100%, 0.18)" focusBorderColor="hsla(0, 0%, 100%, 0.32)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(0, 0%, 100%, 0.48)" + hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)" hoverBorderColor="hsla(0, 0%, 100%, 0.32)" isFullWidth={false} isLoading={false} @@ -3436,7 +3436,7 @@ exports[` should render disabled white color primary button 1`] = { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", "borderColor": "hsla(0, 0%, 100%, 0.32)", "borderRadius": 4, "borderStyle": "solid", @@ -3456,7 +3456,7 @@ exports[` should render disabled white color primary button 1`] = "width": "auto", }, { - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", "borderColor": "hsla(0, 0%, 100%, 0.32)", }, ] @@ -3568,7 +3568,7 @@ exports[` should render disabled white color secondary button 1`] defaultBorderColor="hsla(0, 0%, 100%, 0.32)" focusBackgroundColor="hsla(0, 0%, 100%, 0)" focusBorderColor="hsla(0, 0%, 100%, 0.32)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0)" hoverBorderColor="hsla(0, 0%, 100%, 0.32)" @@ -3720,14 +3720,14 @@ exports[` should render disabled white color tertiary button 1`] = buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(0, 0%, 100%, 0.48)" - defaultBorderColor="hsla(0, 0%, 100%, 0.48)" - focusBackgroundColor="hsla(0, 0%, 100%, 0.48)" - focusBorderColor="hsla(0, 0%, 100%, 0.48)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)" + defaultBorderColor="hsla(0, 0%, 100%, 0.18)" + focusBackgroundColor="hsla(0, 0%, 100%, 0.18)" + focusBorderColor="hsla(0, 0%, 100%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(0, 0%, 100%, 0.48)" - hoverBorderColor="hsla(0, 0%, 100%, 0.48)" + hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)" + hoverBorderColor="hsla(0, 0%, 100%, 0.18)" isFullWidth={false} isLoading={false} minHeight="36px" @@ -3748,8 +3748,8 @@ exports[` should render disabled white color tertiary button 1`] = { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", - "borderColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", + "borderColor": "hsla(0, 0%, 100%, 0.18)", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 0, @@ -3768,7 +3768,7 @@ exports[` should render disabled white color tertiary button 1`] = "width": "auto", }, { - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", }, ] } @@ -3879,7 +3879,7 @@ exports[` should render information color primary button 1`] = ` defaultBorderColor="hsla(200, 84%, 44%, 1)" focusBackgroundColor="hsla(200, 84%, 37%, 1)" focusBorderColor="hsla(200, 84%, 37%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 37%, 1)" hoverBorderColor="hsla(200, 84%, 37%, 1)" @@ -4035,7 +4035,7 @@ exports[` should render information color secondary button 1`] = ` defaultBorderColor="hsla(200, 84%, 44%, 1)" focusBackgroundColor="hsla(200, 84%, 44%, 0.18)" focusBorderColor="hsla(200, 84%, 44%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 44%, 0.18)" hoverBorderColor="hsla(200, 84%, 44%, 1)" @@ -4191,7 +4191,7 @@ exports[` should render large size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -4343,13 +4343,13 @@ exports[` should render loading button 1`] = ` buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)" defaultBorderColor="hsla(227, 100%, 59%, 0.18)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" isFullWidth={false} isLoading={true} @@ -4371,7 +4371,7 @@ exports[` should render loading button 1`] = ` { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", "borderRadius": 4, "borderStyle": "solid", @@ -4391,7 +4391,7 @@ exports[` should render loading button 1`] = ` "width": "auto", }, { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", }, ] @@ -4655,7 +4655,7 @@ exports[` should render medium size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -4811,7 +4811,7 @@ exports[` should render negative color primary button 1`] = ` defaultBorderColor="hsla(4, 74%, 49%, 1)" focusBackgroundColor="hsla(4, 77%, 40%, 1)" focusBorderColor="hsla(4, 77%, 40%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 77%, 40%, 1)" hoverBorderColor="hsla(4, 77%, 40%, 1)" @@ -4967,7 +4967,7 @@ exports[` should render negative color secondary button 1`] = ` defaultBorderColor="hsla(4, 74%, 49%, 1)" focusBackgroundColor="hsla(4, 74%, 49%, 0.18)" focusBorderColor="hsla(4, 74%, 49%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 74%, 49%, 0.18)" hoverBorderColor="hsla(4, 74%, 49%, 1)" @@ -5054,7 +5054,7 @@ exports[` should render negative color secondary button 1`] = ` style={ [ { - "color": "hsla(4, 74%, 49%, 1)", + "color": "hsla(4, 86%, 58%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -5123,7 +5123,7 @@ exports[` should render neutral color primary button 1`] = ` defaultBorderColor="hsla(211, 20%, 52%, 1)" focusBackgroundColor="hsla(211, 33%, 21%, 1)" focusBorderColor="hsla(211, 20%, 52%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 33%, 21%, 1)" hoverBorderColor="hsla(211, 20%, 52%, 1)" @@ -5279,7 +5279,7 @@ exports[` should render neutral color secondary button 1`] = ` defaultBorderColor="hsla(211, 20%, 52%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.32)" focusBorderColor="hsla(211, 20%, 52%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.32)" hoverBorderColor="hsla(211, 20%, 52%, 1)" @@ -5435,7 +5435,7 @@ exports[` should render notice color primary button 1`] = ` defaultBorderColor="hsla(25, 90%, 48%, 1)" focusBackgroundColor="hsla(25, 85%, 42%, 1)" focusBorderColor="hsla(25, 85%, 42%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 85%, 42%, 1)" hoverBorderColor="hsla(25, 85%, 42%, 1)" @@ -5591,7 +5591,7 @@ exports[` should render notice color secondary button 1`] = ` defaultBorderColor="hsla(25, 90%, 48%, 1)" focusBackgroundColor="hsla(25, 90%, 48%, 0.18)" focusBorderColor="hsla(25, 90%, 48%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 90%, 48%, 0.18)" hoverBorderColor="hsla(25, 90%, 48%, 1)" @@ -5747,7 +5747,7 @@ exports[` should render positive color primary button 1`] = ` defaultBorderColor="hsla(150, 100%, 32%, 1)" focusBackgroundColor="hsla(150, 100%, 27%, 1)" focusBorderColor="hsla(150, 100%, 27%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 27%, 1)" hoverBorderColor="hsla(150, 100%, 27%, 1)" @@ -5903,7 +5903,7 @@ exports[` should render positive color secondary button 1`] = ` defaultBorderColor="hsla(150, 100%, 32%, 1)" focusBackgroundColor="hsla(150, 100%, 32%, 0.18)" focusBorderColor="hsla(150, 100%, 32%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 32%, 0.18)" hoverBorderColor="hsla(150, 100%, 32%, 1)" @@ -6059,7 +6059,7 @@ exports[` should render primary color primary button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -6213,11 +6213,11 @@ exports[` should render primary color secondary button 1`] = ` data-blade-component="button" defaultBackgroundColor="hsla(0, 0%, 100%, 0)" defaultBorderColor="hsla(227, 100%, 59%, 1)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 1)" isFullWidth={false} isLoading={false} @@ -6302,7 +6302,7 @@ exports[` should render primary color secondary button 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -6371,7 +6371,7 @@ exports[` should render primary color tertiary button 1`] = ` defaultBorderColor="hsla(211, 27%, 76%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.18)" focusBorderColor="hsla(211, 27%, 76%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)" hoverBorderColor="hsla(211, 27%, 76%, 1)" @@ -6526,7 +6526,7 @@ exports[` should render small size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -6682,7 +6682,7 @@ exports[` should render white color primary button 1`] = ` defaultBorderColor="hsla(0, 0%, 100%, 1)" focusBackgroundColor="hsla(0, 0%, 100%, 0.8)" focusBorderColor="hsla(0, 0%, 100%, 0.8)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0.8)" hoverBorderColor="hsla(0, 0%, 100%, 0.8)" @@ -6838,7 +6838,7 @@ exports[` should render white color secondary button 1`] = ` defaultBorderColor="hsla(0, 0%, 100%, 0.8)" focusBackgroundColor="hsla(0, 0%, 100%, 0.18)" focusBorderColor="hsla(0, 0%, 100%, 0.8)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)" hoverBorderColor="hsla(0, 0%, 100%, 0.8)" @@ -6994,7 +6994,7 @@ exports[` should render white color tertiary button 1`] = ` defaultBorderColor="hsla(0, 0%, 100%, 0.18)" focusBackgroundColor="hsla(0, 0%, 100%, 0.32)" focusBorderColor="hsla(0, 0%, 100%, 0.32)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0.32)" hoverBorderColor="hsla(0, 0%, 100%, 0.32)" @@ -7149,7 +7149,7 @@ exports[` should render xsmall size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap index a4e6a1b9665..5b47c45ff36 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render button with icon with left iconPosition 1`] = `"
"`; +exports[` should render button with icon with left iconPosition 1`] = `"
"`; exports[` should render button with icon with left iconPosition 2`] = ` .c0.c0.c0.c0.c0 { @@ -54,7 +54,7 @@ exports[` should render button with icon with left iconPosition 2` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap index 67cdbb21306..0deb3f3db8b 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap @@ -52,7 +52,7 @@ exports[` should announce button loading accessibilityLabel 1`] = background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -68,7 +68,7 @@ exports[` should announce button loading accessibilityLabel 1`] = min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); border-width: 0px; border-radius: 4px; @@ -102,20 +102,20 @@ exports[` should announce button loading accessibilityLabel 1`] = } .c4.c4.c4.c4.c4:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c4.c4.c4.c4.c4:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c4.c4.c4.c4.c4:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c4.c4.c4.c4.c4 * { @@ -382,7 +382,7 @@ exports[` should render button with default properties 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -512,7 +512,7 @@ exports[` should render button with full width 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -642,7 +642,7 @@ exports[` should render button with icon with default iconPosition background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -810,7 +810,7 @@ exports[` should render button with icon with left iconPosition 1` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -978,7 +978,7 @@ exports[` should render button with icon with right iconPosition 1 background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1146,7 +1146,7 @@ exports[` should render button with icon without text 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1242,7 +1242,7 @@ exports[` should render disabled button 1`] = ` min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); border-width: 0px; border-radius: 4px; @@ -1276,20 +1276,20 @@ exports[` should render disabled button 1`] = ` } .c0.c0.c0.c0.c0:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1420,7 +1420,7 @@ exports[` should render disabled information color primary button background-color: hsla(200,84%,44%,0.09); border-color: hsla(200,84%,44%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1551,7 +1551,7 @@ exports[` should render disabled information color secondary butto background-color: hsla(200,84%,44%,0.09); border-color: hsla(200,84%,44%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1682,7 +1682,7 @@ exports[` should render disabled negative color primary button 1`] background-color: hsla(4,74%,49%,0.09); border-color: hsla(4,74%,49%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1813,7 +1813,7 @@ exports[` should render disabled negative color secondary button 1 background-color: hsla(4,74%,49%,0.09); border-color: hsla(4,74%,49%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1944,7 +1944,7 @@ exports[` should render disabled neutral color primary button 1`] background-color: hsla(211,20%,52%,0.18); border-color: hsla(214,28%,84%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2075,7 +2075,7 @@ exports[` should render disabled neutral color secondary button 1` background-color: hsla(211,20%,52%,0.18); border-color: hsla(214,28%,84%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2206,7 +2206,7 @@ exports[` should render disabled notice color primary button 1`] = background-color: hsla(25,90%,48%,0.09); border-color: hsla(25,90%,48%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2337,7 +2337,7 @@ exports[` should render disabled notice color secondary button 1`] background-color: hsla(25,90%,48%,0.09); border-color: hsla(25,90%,48%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2468,7 +2468,7 @@ exports[` should render disabled positive color primary button 1`] background-color: hsla(150,100%,32%,0.09); border-color: hsla(150,100%,32%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2599,7 +2599,7 @@ exports[` should render disabled positive color secondary button 1 background-color: hsla(150,100%,32%,0.09); border-color: hsla(150,100%,32%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2683,7 +2683,7 @@ exports[` should render disabled primary color primary button 1`] min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); border-width: 0px; border-radius: 4px; @@ -2717,20 +2717,20 @@ exports[` should render disabled primary color primary button 1`] } .c0.c0.c0.c0.c0:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2861,7 +2861,7 @@ exports[` should render disabled primary color secondary button 1` background-color: hsla(0,0%,100%,0); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2989,7 +2989,7 @@ exports[` should render disabled primary color tertiary button 1`] .c0.c0.c0.c0.c0:focus-visible { background-color: hsla(211,20%,52%,0.09); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3073,7 +3073,7 @@ exports[` should render disabled white color primary button 1`] = min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); border-width: 0px; border-radius: 4px; @@ -3107,20 +3107,20 @@ exports[` should render disabled white color primary button 1`] = } .c0.c0.c0.c0.c0:hover { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); } .c0.c0.c0.c0.c0:active { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3251,7 +3251,7 @@ exports[` should render disabled white color secondary button 1`] background-color: hsla(0,0%,100%,0); border-color: hsla(0,0%,100%,0.32); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3335,8 +3335,8 @@ exports[` should render disabled white color tertiary button 1`] = min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(0,0%,100%,0.48); - border-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); + border-color: hsla(0,0%,100%,0.18); border-width: 0px; border-radius: 4px; border-style: solid; @@ -3369,17 +3369,17 @@ exports[` should render disabled white color tertiary button 1`] = } .c0.c0.c0.c0.c0:hover { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); } .c0.c0.c0.c0.c0:active { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3510,7 +3510,7 @@ exports[` should render information color primary button 1`] = ` background-color: hsla(200,84%,37%,1); border-color: hsla(200,84%,37%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3640,7 +3640,7 @@ exports[` should render information color secondary button 1`] = ` background-color: hsla(200,84%,44%,0.18); border-color: hsla(200,84%,44%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3770,7 +3770,7 @@ exports[` should render large size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3900,7 +3900,7 @@ exports[` should render medium size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4030,7 +4030,7 @@ exports[` should render negative color primary button 1`] = ` background-color: hsla(4,77%,40%,1); border-color: hsla(4,77%,40%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4160,7 +4160,7 @@ exports[` should render negative color secondary button 1`] = ` background-color: hsla(4,74%,49%,0.18); border-color: hsla(4,74%,49%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4173,7 +4173,7 @@ exports[` should render negative color secondary button 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(4,74%,49%,1); + color: hsla(4,86%,58%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -4290,7 +4290,7 @@ exports[` should render neutral color primary button 1`] = ` background-color: hsla(211,33%,21%,1); border-color: hsla(211,20%,52%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4420,7 +4420,7 @@ exports[` should render neutral color secondary button 1`] = ` background-color: hsla(211,20%,52%,0.32); border-color: hsla(211,20%,52%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4550,7 +4550,7 @@ exports[` should render notice color primary button 1`] = ` background-color: hsla(25,85%,42%,1); border-color: hsla(25,85%,42%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4680,7 +4680,7 @@ exports[` should render notice color secondary button 1`] = ` background-color: hsla(25,90%,48%,0.18); border-color: hsla(25,90%,48%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4810,7 +4810,7 @@ exports[` should render positive color primary button 1`] = ` background-color: hsla(150,100%,27%,1); border-color: hsla(150,100%,27%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4940,7 +4940,7 @@ exports[` should render positive color secondary button 1`] = ` background-color: hsla(150,100%,32%,0.18); border-color: hsla(150,100%,32%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5070,7 +5070,7 @@ exports[` should render primary color primary button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5187,20 +5187,20 @@ exports[` should render primary color secondary button 1`] = ` } .c0.c0.c0.c0.c0:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c0.c0.c0.c0.c0:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5213,7 +5213,7 @@ exports[` should render primary color secondary button 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -5327,7 +5327,7 @@ exports[` should render primary color tertiary button 1`] = ` .c0.c0.c0.c0.c0:focus-visible { background-color: hsla(211,20%,52%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5457,7 +5457,7 @@ exports[` should render small size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5587,7 +5587,7 @@ exports[` should render white color primary button 1`] = ` background-color: hsla(0,0%,100%,0.8); border-color: hsla(0,0%,100%,0.8); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5717,7 +5717,7 @@ exports[` should render white color secondary button 1`] = ` background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.8); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5844,7 +5844,7 @@ exports[` should render white color tertiary button 1`] = ` .c0.c0.c0.c0.c0:focus-visible { background-color: hsla(0,0%,100%,0.32); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5974,7 +5974,7 @@ exports[` should render xsmall size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap index 66f21ed2a64..fbd194026da 100644 --- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap +++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[`"`; +exports[`"`; exports[`"`; +exports[` should render 1`] = `"
"`; exports[` should render 2`] = ` .c0.c0.c0.c0.c0 { @@ -36,7 +36,7 @@ exports[` should render 2`] = ` .c0.c0.c0.c0.c0:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap index 6519e51ca2d..a74e506a543 100644 --- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap +++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap @@ -34,7 +34,7 @@ exports[` should render 1`] = ` .c0.c0.c0.c0.c0:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -102,7 +102,7 @@ exports[` should render with emphasis 1`] = ` .c0.c0.c0.c0.c0:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap index 02823e41087..006ea8baa29 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap @@ -296,11 +296,11 @@ exports[` should render a Card with Footer 1`] = ` data-blade-component="button" defaultBackgroundColor="hsla(0, 0%, 100%, 0)" defaultBorderColor="hsla(227, 100%, 59%, 1)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 1)" isFullWidth={true} isLoading={false} @@ -385,7 +385,7 @@ exports[` should render a Card with Footer 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -465,7 +465,7 @@ exports[` should render a Card with Footer 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap index 3eee04548c6..a203e39d560 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render a Card with Header & Footer 1`] = `"

Card Header

12

Card subtitle

NEW

Plain Card

Card Footer

Card footer subtitle

"`; +exports[` should render a Card with Header & Footer 1`] = `"

Card Header

12

Card subtitle

NEW

Plain Card

Card Footer

Card footer subtitle

"`; exports[` should render a Card with Header & Footer 2`] = ` .c0.c0.c0.c0.c0 { @@ -390,7 +390,7 @@ exports[` should render a Card with Header & Footer 2`] = ` } .c35.c35.c35.c35.c35 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -463,20 +463,20 @@ exports[` should render a Card with Header & Footer 2`] = ` } .c32.c32.c32.c32.c32:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c32.c32.c32.c32.c32 * { @@ -539,7 +539,7 @@ exports[` should render a Card with Header & Footer 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c37.c37.c37.c37.c37 * { diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap index aafd8623932..832633b2155 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap @@ -180,7 +180,7 @@ exports[` should render a Card with Footer 1`] = ` } .c17.c17.c17.c17.c17 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -253,20 +253,20 @@ exports[` should render a Card with Footer 1`] = ` } .c14.c14.c14.c14.c14:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c14.c14.c14.c14.c14:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c14.c14.c14.c14.c14:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c14.c14.c14.c14.c14 * { @@ -329,7 +329,7 @@ exports[` should render a Card with Footer 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c19.c19.c19.c19.c19 * { diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap index 109fbd1cdb4..4b97fa71a09 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap @@ -89,7 +89,7 @@ exports[` should render checkbox with label 1`] = ` } .c10.c10.c10.c10.c10 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -178,7 +178,7 @@ exports[` should render checkbox with label 1`] = ` } .c8.c8.c8.c8.c8:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c8.c8.c8.c8.c8 * { diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap index 1e00cc3e952..c9b38167799 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap @@ -75,7 +75,7 @@ exports[` should render with CollapsibleButton 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -571,7 +571,7 @@ exports[` should render with CollapsibleLink 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -667,7 +667,7 @@ exports[` should render with CollapsibleLink 1`] = ` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

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

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; exports[` should render Collapsible on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -146,7 +146,7 @@ exports[` should render Collapsible on server 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c1.c1.c1.c1.c1 * { 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 bf5e64ef6b1..40001c0a640 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 @@ -139,7 +139,7 @@ exports[` should render with CollapsibleButton 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c1.c1.c1.c1.c1 * { @@ -428,7 +428,7 @@ exports[` should render with CollapsibleLink 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -548,7 +548,7 @@ exports[` should render with CollapsibleLink 1`] = ` } .c1.c1.c1.c1.c1:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c1.c1.c1.c1.c1 * { @@ -629,7 +629,7 @@ exports[` should render with CollapsibleLink 1`] = ` clip-rule="evenodd" d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" data-blade-component="svg-path" - fill="hsla(227, 71%, 51%, 1)" + fill="hsla(227, 100%, 59%, 1)" fill-rule="evenodd" /> diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap index fdc835426a6..25398d1622c 100644 --- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap +++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap @@ -85,7 +85,7 @@ exports[` should change the link to a visited state after click 1`] style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -200,7 +200,7 @@ exports[` should not change the button to a visited state after clic style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -315,7 +315,7 @@ exports[` should render button variant of link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -660,7 +660,7 @@ exports[` should render disabled negative color link 1`] = ` style={ [ { - "color": "hsla(4, 74%, 49%, 1)", + "color": "hsla(4, 86%, 58%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1120,7 +1120,7 @@ exports[` should render disabled primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1397,7 +1397,7 @@ exports[` should render icon only link 1`] = ` > should render icon only link 1`] = ` /> should render icon only link 1`] = ` should render icon only link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1666,7 +1666,7 @@ exports[` should render link with default properties 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1828,7 +1828,7 @@ exports[` should render link with icon with default iconPosition 1`] > should render link with icon with default iconPosition 1`] /> should render link with icon with default iconPosition 1`] should render link with icon with default iconPosition 1`] style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2031,7 +2031,7 @@ exports[` should render link with icon with left iconPosition 1`] = > should render link with icon with left iconPosition 1`] = /> should render link with icon with left iconPosition 1`] = should render link with icon with left iconPosition 1`] = style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2187,7 +2187,7 @@ exports[` should render link with icon with right iconPosition 1`] = style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2269,7 +2269,7 @@ exports[` should render link with icon with right iconPosition 1`] = > should render link with icon with right iconPosition 1`] = /> should render link with icon with right iconPosition 1`] = should render negative color link 1`] = ` style={ [ { - "color": "hsla(4, 74%, 49%, 1)", + "color": "hsla(4, 86%, 58%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2850,7 +2850,7 @@ exports[` should render primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap index 49652fdadec..f8518c263f3 100644 --- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap +++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render link with a default rel set when target is _blank 1`] = `""`; +exports[` should render link with a default rel set when target is _blank 1`] = `""`; exports[` should render link with a default rel set when target is _blank 2`] = ` .c0.c0.c0.c0.c0 { @@ -29,7 +29,7 @@ exports[` should render link with a default rel set when target is _ } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -56,7 +56,7 @@ exports[` should render link with a default rel set when target is _ } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap index 97c16a1a185..fc1c2ea1205 100644 --- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap +++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap @@ -27,7 +27,7 @@ exports[` should change the link to a visited state after click 1`] } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -54,7 +54,7 @@ exports[` should change the link to a visited state after click 1`] } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -123,7 +123,7 @@ exports[` should not change the button to a visited state after clic } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -150,7 +150,7 @@ exports[` should not change the button to a visited state after clic } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -217,7 +217,7 @@ exports[` should render button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -244,7 +244,7 @@ exports[` should render button variant of link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -311,7 +311,7 @@ exports[` should render disabled button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -406,7 +406,7 @@ exports[` should render disabled information color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -499,7 +499,7 @@ exports[` should render disabled negative color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -526,7 +526,7 @@ exports[` should render disabled negative color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(4,74%,49%,1); + color: hsla(4,86%,58%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -592,7 +592,7 @@ exports[` should render disabled neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -685,7 +685,7 @@ exports[` should render disabled notice color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -778,7 +778,7 @@ exports[` should render disabled positive color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -871,7 +871,7 @@ exports[` should render disabled primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -898,7 +898,7 @@ exports[` should render disabled primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -964,7 +964,7 @@ exports[` should render disabled white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1057,7 +1057,7 @@ exports[` should render icon only link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1096,7 +1096,7 @@ exports[` should render icon only link 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1140,18 +1140,18 @@ exports[` should render icon only link 1`] = ` @@ -1192,7 +1192,7 @@ exports[` should render information color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1285,7 +1285,7 @@ exports[` should render link with default properties 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1312,7 +1312,7 @@ exports[` should render link with default properties 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1378,7 +1378,7 @@ exports[` should render link with icon with default iconPosition 1`] } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1417,7 +1417,7 @@ exports[` should render link with icon with default iconPosition 1`] } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1461,18 +1461,18 @@ exports[` should render link with icon with default iconPosition 1`] @@ -1515,7 +1515,7 @@ exports[` should render link with icon with left iconPosition 1`] = } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1554,7 +1554,7 @@ exports[` should render link with icon with left iconPosition 1`] = } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1598,18 +1598,18 @@ exports[` should render link with icon with left iconPosition 1`] = @@ -1652,7 +1652,7 @@ exports[` should render link with icon with right iconPosition 1`] = } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1691,7 +1691,7 @@ exports[` should render link with icon with right iconPosition 1`] = } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1741,18 +1741,18 @@ exports[` should render link with icon with right iconPosition 1`] = @@ -1789,7 +1789,7 @@ exports[` should render negative color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1816,7 +1816,7 @@ exports[` should render negative color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(4,74%,49%,1); + color: hsla(4,86%,58%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1882,7 +1882,7 @@ exports[` should render neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1975,7 +1975,7 @@ exports[` should render notice color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2068,7 +2068,7 @@ exports[` should render positive color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2161,7 +2161,7 @@ exports[` should render primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2188,7 +2188,7 @@ exports[` should render primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -2254,7 +2254,7 @@ exports[` should render white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap index fc9a4532566..89cb6b2bca9 100644 --- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap +++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap @@ -85,7 +85,7 @@ exports[` should render button variant of link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -430,7 +430,7 @@ exports[` should render disabled primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -660,7 +660,7 @@ exports[` should render link with default properties 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -822,7 +822,7 @@ exports[` should render link with icon with default iconPosition 1`] = ` > should render link with icon with default iconPosition 1`] = ` /> should render link with icon with default iconPosition 1`] = ` should render link with icon with default iconPosition 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1025,7 +1025,7 @@ exports[` should render link with icon with left iconPosition 1`] = ` > should render link with icon with left iconPosition 1`] = ` /> should render link with icon with left iconPosition 1`] = ` should render link with icon with left iconPosition 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1181,7 +1181,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1263,7 +1263,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` > should render link with icon with right iconPosition 1`] = ` /> should render link with icon with right iconPosition 1`] = ` should render link with icon without text 1`] = ` > should render link with icon without text 1`] = ` /> should render link with icon without text 1`] = ` should render link with icon without text 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1700,7 +1700,7 @@ exports[` should render primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1977,7 +1977,7 @@ exports[` should render with small size 1`] = ` > should render with small size 1`] = ` /> should render with small size 1`] = ` should render with small size 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap index c40527ca84c..c590d2ceb23 100644 --- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap +++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render link with a default rel set when target is _blank 1`] = `""`; +exports[` should render link with a default rel set when target is _blank 1`] = `""`; exports[` should render link with a default rel set when target is _blank 2`] = ` .c0.c0.c0.c0.c0 { @@ -29,7 +29,7 @@ exports[` should render link with a default rel set when target is _blan } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -56,7 +56,7 @@ exports[` should render link with a default rel set when target is _blan } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap index 640c157ba80..379e95c24ab 100644 --- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap +++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap @@ -27,7 +27,7 @@ exports[` should render button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -54,7 +54,7 @@ exports[` should render button variant of link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -121,7 +121,7 @@ exports[` should render disabled button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -216,7 +216,7 @@ exports[` should render disabled neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -309,7 +309,7 @@ exports[` should render disabled primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -336,7 +336,7 @@ exports[` should render disabled primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -402,7 +402,7 @@ exports[` should render disabled white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -495,7 +495,7 @@ exports[` should render link with default properties 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -522,7 +522,7 @@ exports[` should render link with default properties 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -588,7 +588,7 @@ exports[` should render link with icon with default iconPosition 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -627,7 +627,7 @@ exports[` should render link with icon with default iconPosition 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -671,18 +671,18 @@ exports[` should render link with icon with default iconPosition 1`] = ` @@ -725,7 +725,7 @@ exports[` should render link with icon with left iconPosition 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -764,7 +764,7 @@ exports[` should render link with icon with left iconPosition 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -808,18 +808,18 @@ exports[` should render link with icon with left iconPosition 1`] = ` @@ -862,7 +862,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -901,7 +901,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -951,18 +951,18 @@ exports[` should render link with icon with right iconPosition 1`] = ` @@ -999,7 +999,7 @@ exports[` should render link with icon without text 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1038,7 +1038,7 @@ exports[` should render link with icon without text 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1082,18 +1082,18 @@ exports[` should render link with icon without text 1`] = ` @@ -1134,7 +1134,7 @@ exports[` should render neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1227,7 +1227,7 @@ exports[` should render primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1254,7 +1254,7 @@ exports[` should render primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1320,7 +1320,7 @@ exports[` should render white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1413,7 +1413,7 @@ exports[` should render with small size 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1452,7 +1452,7 @@ exports[` should render with small size 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 500; @@ -1496,18 +1496,18 @@ exports[` should render with small size 1`] = ` diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap index 6c7a9fc289c..ad090f386a8 100644 --- a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap +++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap @@ -1166,7 +1166,7 @@ exports[` should render List with inline ListItemLink 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1504,7 +1504,7 @@ exports[` should render List with inline ListItemText 1`] = ` style={ [ { - "color": "hsla(227, 69%, 42%, 1)", + "color": "hsla(227, 71%, 51%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap index e70c4e8fd51..a8ca1f21ebd 100644 --- a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap +++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap @@ -449,7 +449,7 @@ exports[` should render List with inline ListItemText 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(227,69%,42%,1); + color: hsla(227,71%,51%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; diff --git a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap index 14e68badc04..98fc2c1b121 100644 --- a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap +++ b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap @@ -342,7 +342,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = ` .c22.c22.c22.c22.c22:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -454,7 +454,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c28.c28.c28.c28.c28 * { diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap index 5b30516e406..1f648e5d40a 100644 --- a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap +++ b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[` should render 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -557,7 +557,7 @@ exports[` should render popover with custom zIndex 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -1074,7 +1074,7 @@ exports[` should render with title,footer 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap index a11ff77ef5d..b6830a37d43 100644 --- a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap +++ b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap @@ -98,7 +98,7 @@ exports[` should render 1`] = ` .c8.c8.c8.c8.c8:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -192,7 +192,7 @@ exports[` should render 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -446,7 +446,7 @@ exports[` should render popover with custom zIndex 1`] = ` .c8.c8.c8.c8.c8:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -540,7 +540,7 @@ exports[` should render popover with custom zIndex 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -811,7 +811,7 @@ exports[` should render with title,footer 1`] = ` .c11.c11.c11.c11.c11:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -922,7 +922,7 @@ exports[` should render with title,footer 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap index 0f639825dba..e329f125748 100644 --- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap +++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap @@ -1723,7 +1723,7 @@ exports[` should update the progress value appropriately 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -2070,7 +2070,7 @@ exports[` should update the progress value appropriately 2`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap index f1e435e854e..b0022d4fdaf 100644 --- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap +++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap @@ -1586,7 +1586,7 @@ exports[` should update the progress value appropriately 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1864,7 +1864,7 @@ exports[` should update the progress value appropriately 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap index aab26ca1ca8..d31a8e11ca4 100644 --- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap +++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap @@ -347,7 +347,7 @@ exports[` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", "borderRadius": 9999, "display": "flex", "flexShrink": 0, diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap index 64e6c92d7ed..3b038adf3f0 100644 --- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap +++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap @@ -254,7 +254,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-radius: 9999px; -webkit-animation-duration: 150ms; animation-duration: 150ms; - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); } .c3.c3.c3.c3.c3 { diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap index c4583d8b103..6fe6c8c60a8 100644 --- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap +++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap @@ -395,7 +395,7 @@ exports[`Tabs should render 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -653,7 +653,7 @@ exports[`Tabs should render 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -883,7 +883,7 @@ exports[`Tabs should render with filled variant 1`] = ` collapsable={false} style={ { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderRadius": 2, "bottom": 4, "height": -10, @@ -1214,7 +1214,7 @@ exports[`Tabs should render with filled variant 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1509,7 +1509,7 @@ exports[`Tabs should render with filled variant 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2106,7 +2106,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2362,7 +2362,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2928,7 +2928,7 @@ exports[`Tabs should render with large size 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 16, "fontStyle": "normal", @@ -3186,7 +3186,7 @@ exports[`Tabs should render with large size 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 16, "fontStyle": "normal", diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap index c4f1814d66f..051a0e364f4 100644 --- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap +++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render tabs ssr 1`] = `"

Refunds

"`; +exports[` should render tabs ssr 1`] = `"

Refunds

"`; exports[` should render tabs ssr 2`] = ` .c0.c0.c0.c0.c0 { @@ -103,7 +103,7 @@ exports[` should render tabs ssr 2`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -205,7 +205,7 @@ exports[` should render tabs ssr 2`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap index 49fc14516e2..fcb2b841842 100644 --- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap +++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap @@ -101,7 +101,7 @@ exports[`Tabs should render 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -203,7 +203,7 @@ exports[`Tabs should render 1`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { @@ -469,7 +469,7 @@ exports[`Tabs should render with filled variant 1`] = ` position: absolute; top: 0px; left: 0px; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-radius: 2px; pointer-events: none; } @@ -500,7 +500,7 @@ exports[`Tabs should render with filled variant 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -651,7 +651,7 @@ exports[`Tabs should render with filled variant 1`] = ` .c10.c10.c10.c10.c10:focus-visible { border-radius: 4px; box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); } .c10.c10.c10.c10.c10 * { @@ -668,7 +668,7 @@ exports[`Tabs should render with filled variant 1`] = ` } .c13.c13.c13.c13.c13:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c9.c9.c9.c9.c9 { @@ -1002,7 +1002,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -1105,7 +1105,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { @@ -1396,7 +1396,7 @@ exports[`Tabs should render with size 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 1rem; font-weight: 600; @@ -1498,7 +1498,7 @@ exports[`Tabs should render with size 1`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { @@ -1783,7 +1783,7 @@ exports[`Tabs should render with vertical orientation 1`] = ` } .c9.c9.c9.c9.c9 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap index cec86ebab91..37b08241f78 100644 --- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap +++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render tag 1`] = `"

in:User

"`; +exports[` should render tag 1`] = `"

in:User

"`; exports[` should render tag 2`] = ` .c0.c0.c0.c0.c0 { @@ -92,7 +92,7 @@ exports[` should render tag 2`] = ` .c5.c5.c5.c5.c5:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap index 596bfbe21a4..66a2884f0e7 100644 --- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap +++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap @@ -90,7 +90,7 @@ exports[` should render tag 1`] = ` .c5.c5.c5.c5.c5:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap index ec4a4247694..b1277ccaf93 100644 --- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap +++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[` should render 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -414,7 +414,7 @@ exports[` should render tooltip with custom zIndex 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -788,7 +788,7 @@ exports[` should render with title 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap index 0f45a60c680..2d560d0670e 100644 --- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap +++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render Tooltip ssr 1`] = `"
"`; +exports[` should render Tooltip ssr 1`] = `"
"`; exports[` should render Tooltip ssr 2`] = ` .c1.c1.c1.c1.c1 { @@ -94,7 +94,7 @@ exports[` should render Tooltip ssr 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap index f61bbfc3289..aaece673007 100644 --- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap +++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap @@ -147,7 +147,7 @@ exports[` should render 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -411,7 +411,7 @@ exports[` should render tooltip with custom zIndex 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -692,7 +692,7 @@ exports[` should render with title 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap index a3b5c7017ee..819f2a83269 100644 --- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap +++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap @@ -31,7 +31,7 @@ exports[` should render Text with center textAlign 1`] = ` exports[` should render Text with color 1`] = ` .c0.c0.c0.c0.c0 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; From a1fbac3b1501dda3bf06805bc4249b956f267fca Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Thu, 11 Jan 2024 16:07:19 +0530 Subject: [PATCH 77/98] refactor(blade): rebrand skeleton (#1935) * chore: rebrand skeleton * chore: update skeleton tests * chore: reexport * chore: update snaps --- packages/blade/.storybook/react/main.ts | 1 + packages/blade/rebranded-components.js | 1 + .../Skeleton/PulseAnimation.native.tsx | 9 +++---- .../Skeleton/PulseAnimation.web.tsx | 20 ++++++---------- .../components/Skeleton/Skeleton.stories.tsx | 24 ++++++++----------- .../src/components/Skeleton/Skeleton.tsx | 2 -- .../__snapshots__/Skeleton.ssr.test.tsx.snap | 8 +++---- .../__snapshots__/Skeleton.web.test.tsx.snap | 12 +++++----- .../blade/src/components/Skeleton/types.ts | 1 - packages/blade/src/components/index.ts | 1 + 10 files changed, 33 insertions(+), 46 deletions(-) diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 1bff0d9e760..595f41d1af4 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -42,6 +42,7 @@ const config: StorybookConfig = { '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)', '../../docs/**/*.stories.mdx', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index b698558f269..294aa75dd17 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -30,6 +30,7 @@ const rebrandedComponents = [ 'SkipNav', 'VisuallyHidden', 'Tooltip', + 'Skeleton', 'Switch', 'Radio', 'Checkbox', diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx index a2c82f780aa..ecebd076f75 100644 --- a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx +++ b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx @@ -17,10 +17,7 @@ import { useTheme } from '~components/BladeProvider'; const AnimatedBox = Animated.createAnimatedComponent(BaseBox); -const PulseAnimation = ({ - contrast, - ...props -}: { contrast: 'low' | 'high' } & SkeletonProps): React.ReactElement => { +const PulseAnimation = (props: SkeletonProps): React.ReactElement => { const { theme } = useTheme(); const durationPluseOff = theme.motion.duration.xmoderate; const durationPluseOn = theme.motion.duration['2xgentle']; @@ -68,8 +65,8 @@ const PulseAnimation = ({ progress.value, [1, 0], [ - theme.colors.brand.gray.a50[`${contrast}Contrast`], - theme.colors.brand.gray.a100[`${contrast}Contrast`], + theme.colors.interactive.background.gray.highlighted, + theme.colors.interactive.background.gray.default, ], ), }; diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx index b48dcdaa93a..1352ed59b5d 100644 --- a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx +++ b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx @@ -4,21 +4,15 @@ import styled, { css, keyframes } from 'styled-components'; import BaseBox from '~components/Box/BaseBox'; import { castWebType, makeMotionTime } from '~utils'; -const pulseKeyframes = ({ - theme, - contrast, -}: { - theme: DefaultTheme; - contrast: 'low' | 'high'; -}): Keyframes => keyframes` +const pulseKeyframes = ({ theme }: { theme: DefaultTheme }): Keyframes => keyframes` 0% { - background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]}; + background-color: ${theme.colors.interactive.background.gray.default}; } 25% { - background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]}; + background-color: ${theme.colors.interactive.background.gray.default}; } 100% { - background-color: ${theme.colors.brand.gray.a50[`${contrast}Contrast`]}; + background-color: ${theme.colors.interactive.background.gray.highlighted}; } `; @@ -31,7 +25,7 @@ const fadeInKeyframes = (): Keyframes => keyframes` } `; -const PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, contrast }) => { +const PulseAnimation = styled(BaseBox)(({ theme }) => { // We need to delay the animation in between keyframes // Since we also offset the animation to have 300ms delay in 25% keyframe // https://css-tricks.com/css-keyframe-animation-delay-iterations/ @@ -43,8 +37,8 @@ const PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, c return css` opacity: 0; - background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]}; - animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ contrast, theme })}; + background-color: ${theme.colors.interactive.background.gray.default}; + animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ theme })}; animation-duration: ${duration}, ${totalDuration}; animation-delay: 0ms, ${duration}; animation-timing-function: ${easing}, ${easing}; diff --git a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx index 65d4adebfb3..9b88e731d59 100644 --- a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx @@ -141,7 +141,7 @@ const BasicSkeleton = (): React.ReactElement => { width="100%" padding="spacing.5" borderRadius="medium" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" > Total Repayable Amount - + Principal:{' '} - + ₹16000 {' '} Interest:{' '} - + ₹450 @@ -326,7 +326,7 @@ const SkeletonCardTemplate: StoryFn = () => { display="flex" gap="spacing.2" flexDirection="column" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" elevation="lowRaised" borderRadius="medium" > @@ -341,9 +341,7 @@ const SkeletonCardTemplate: StoryFn = () => { - UPI} - /> + UPI} /> @@ -410,7 +408,7 @@ const SkeletonAccessibilityTemplate: StoryFn = () => { display="flex" gap="spacing.2" flexDirection="column" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" elevation="lowRaised" borderRadius="medium" > @@ -425,9 +423,7 @@ const SkeletonAccessibilityTemplate: StoryFn = () => { - UPI} - /> + UPI} /> diff --git a/packages/blade/src/components/Skeleton/Skeleton.tsx b/packages/blade/src/components/Skeleton/Skeleton.tsx index e5c5f7b482f..bc66ed9330d 100644 --- a/packages/blade/src/components/Skeleton/Skeleton.tsx +++ b/packages/blade/src/components/Skeleton/Skeleton.tsx @@ -6,7 +6,6 @@ import { makeAccessible } from '~utils/makeAccessible'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; const Skeleton = ({ - contrast = 'low', width, maxWidth, minWidth, @@ -54,7 +53,6 @@ const Skeleton = ({ placeSelf={placeSelf} placeItems={placeItems} order={order} - contrast={contrast} {...getStyledProps(props)} {...makeAccessible({ hidden: true })} {...metaAttribute({ name: MetaConstants.Skeleton, testID })} diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap index 175b9e7f04f..3f22e847c34 100644 --- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap +++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render 1`] = `"
"`; +exports[` should render 1`] = `"
"`; exports[` should render 2`] = ` .c0.c0.c0.c0.c0 { @@ -11,9 +11,9 @@ exports[` should render 2`] = ` .c1.c1.c1.c1.c1 { opacity: 0; - background-color: hsla(216,15%,54%,0.18); - -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765; - animation-name: lbWRkT-450290765,fZZrNN-450290765; + background-color: hsla(211,20%,52%,0.09); + -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765; + animation-name: lbWRkT-450290765,iRXnvq-450290765; -webkit-animation-duration: 900ms,1200ms; animation-duration: 900ms,1200ms; -webkit-animation-delay: 0ms,900ms; diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap index 76802b22ffd..396cac9f835 100644 --- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap +++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap @@ -8,9 +8,9 @@ exports[` should render skeleton 1`] = ` .c1.c1.c1.c1.c1 { opacity: 0; - background-color: hsla(216,15%,54%,0.18); - -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765; - animation-name: lbWRkT-450290765,fZZrNN-450290765; + background-color: hsla(211,20%,52%,0.09); + -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765; + animation-name: lbWRkT-450290765,iRXnvq-450290765; -webkit-animation-duration: 900ms,1200ms; animation-duration: 900ms,1200ms; -webkit-animation-delay: 0ms,900ms; @@ -50,9 +50,9 @@ exports[` should support margin and other layout props 1`] = ` .c2.c2.c2.c2.c2 { opacity: 0; - background-color: hsla(216,15%,54%,0.18); - -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765; - animation-name: lbWRkT-450290765,fZZrNN-450290765; + background-color: hsla(211,20%,52%,0.09); + -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765; + animation-name: lbWRkT-450290765,iRXnvq-450290765; -webkit-animation-duration: 900ms,1200ms; animation-duration: 900ms,1200ms; -webkit-animation-delay: 0ms,900ms; diff --git a/packages/blade/src/components/Skeleton/types.ts b/packages/blade/src/components/Skeleton/types.ts index 08383defb7b..be14d384492 100644 --- a/packages/blade/src/components/Skeleton/types.ts +++ b/packages/blade/src/components/Skeleton/types.ts @@ -8,7 +8,6 @@ type SkeletonProps = StyledPropsBlade & 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius' > & Partial & { - contrast?: 'low' | 'high'; testID?: string; }; diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index a5e5b1c2423..5881cb628b8 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -22,6 +22,7 @@ export * from './Spinner'; export * from './Tabs'; export * from './Tag'; export * from './Tooltip'; +export * from './Skeleton'; export * from './Switch'; export * from './Typography'; export * from './SkipNav'; From f33ca90fc880eb456f346899247e14db544cd547 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Fri, 12 Jan 2024 16:29:16 +0530 Subject: [PATCH 78/98] refactor: rebrand Input components (#1960) --- .../blade/.storybook/react-native/main.tsx | 2 +- .../react-native/storybook.requires.js | 5 +- packages/blade/.storybook/react/main.ts | 1 + packages/blade/rebranded-components.js | 5 ++ .../CharacterCounter/CharacterCounter.tsx | 2 +- .../AnimatedBaseInputWrapper.native.tsx | 2 +- .../AnimatedBaseInputWrapper.web.tsx | 6 +- .../BaseInputAnimatedBorder.native.tsx | 8 +-- .../BaseInput/BaseInputAnimatedBorder.web.tsx | 8 +-- .../BaseInput/BaseInputTagSlot.native.tsx | 9 ++- .../Input/BaseInput/BaseInputTagSlot.web.tsx | 5 +- .../Input/BaseInput/BaseInputVisuals.tsx | 16 ++--- .../Input/BaseInput/BaseInputWrapper.tsx | 4 +- .../BaseInput/StyledBaseInput.native.tsx | 12 ++-- .../Input/BaseInput/StyledBaseInput.web.tsx | 9 +-- .../BaseInput.native.test.tsx.snap | 42 ++++++------ .../__snapshots__/BaseInput.ssr.test.tsx.snap | 38 +++++------ .../__snapshots__/BaseInput.web.test.tsx.snap | 62 ++++++++--------- .../Input/BaseInput/baseInputStyles.ts | 23 +++---- .../src/components/Input/BaseInput/types.ts | 8 +-- .../Input/OTPInput/OTPInput.stories.tsx | 13 ++-- .../OTPInput.native.test.tsx.snap | 68 +++++++++---------- .../__snapshots__/OTPInput.ssr.test.tsx.snap | 30 ++++---- .../__snapshots__/OTPInput.web.test.tsx.snap | 28 ++++---- .../PasswordInput.native.test.tsx.snap | 24 +++---- .../PasswordInput.ssr.test.tsx.snap | 52 +++++++------- .../PasswordInput.web.test.tsx.snap | 38 +++++------ .../TextArea.native.test.tsx.snap | 18 ++--- .../__snapshots__/TextArea.ssr.test.tsx.snap | 30 ++++---- .../__snapshots__/TextArea.web.test.tsx.snap | 56 +++++++-------- .../TextInput.native.test.tsx.snap | 50 +++++++------- .../__snapshots__/TextInput.ssr.test.tsx.snap | 38 +++++------ .../__snapshots__/TextInput.web.test.tsx.snap | 64 ++++++++--------- .../src/components/Link/BaseLink/BaseLink.tsx | 3 +- .../blade/src/components/Tabs/TabItem.web.tsx | 1 + .../src/components/Typography/Text/Text.tsx | 23 +++++-- .../Typography/Text/getTextStyles.ts | 7 +- packages/blade/src/components/index.ts | 4 ++ packages/blade/src/utils/useInteraction.ts | 2 +- 39 files changed, 421 insertions(+), 395 deletions(-) diff --git a/packages/blade/.storybook/react-native/main.tsx b/packages/blade/.storybook/react-native/main.tsx index f9ddcc7e707..872f4fea6d9 100644 --- a/packages/blade/.storybook/react-native/main.tsx +++ b/packages/blade/.storybook/react-native/main.tsx @@ -1,6 +1,6 @@ module.exports = { stories: [ - '../../src/**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)', + '../../src/**/!(_KitchenSink|*.test)*.stories.?(ts|tsx|js|jsx)', '../../src/**/*.stories.internal.?(ts|tsx|js|jsx)', ], addons: [ diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js index 15720184b91..887025e7040 100644 --- a/packages/blade/.storybook/react-native/storybook.requires.js +++ b/packages/blade/.storybook/react-native/storybook.requires.js @@ -6,9 +6,9 @@ global.STORIES = [ { titlePrefix: '', directory: './src', - files: '**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)', + files: '**/!(_KitchenSink|*.test)*.stories.?(ts|tsx|js|jsx)', importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$', + '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink|[^/]*?\\.test))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$', }, { titlePrefix: '', @@ -57,7 +57,6 @@ const getStories = () => { './src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'), './src/components/Card/Card.stories.tsx': require('../../src/components/Card/Card.stories.tsx'), './src/components/Card/CardInteractive.stories.tsx': require('../../src/components/Card/CardInteractive.stories.tsx'), - './src/components/Carousel/__tests__/Carousel.test.stories.tsx': require('../../src/components/Carousel/__tests__/Carousel.test.stories.tsx'), './src/components/Carousel/Carousel.stories.tsx': require('../../src/components/Carousel/Carousel.stories.tsx'), './src/components/Checkbox/Checkbox.stories.tsx': require('../../src/components/Checkbox/Checkbox.stories.tsx'), './src/components/Checkbox/CheckboxGroup.stories.tsx': require('../../src/components/Checkbox/CheckboxGroup.stories.tsx'), diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 595f41d1af4..59f8df4aff0 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -42,6 +42,7 @@ const config: StorybookConfig = { '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Input/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index 294aa75dd17..333f33693a2 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -34,6 +34,11 @@ const rebrandedComponents = [ 'Switch', 'Radio', 'Checkbox', + 'BaseInput', + 'TextInput', + 'PasswordInput', + 'OTPInput', + 'TextArea', ]; module.exports = { rebrandedComponents }; diff --git a/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx b/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx index 8e265087204..2bd4949e8d0 100644 --- a/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx +++ b/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx @@ -10,7 +10,7 @@ export const CharacterCounter = ({ currentCount, maxCount, }: CharacterCounterProps): ReactElement => ( - + {currentCount}/{maxCount} ); diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx index 0d7b571af66..d7af29d5e68 100644 --- a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx +++ b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx @@ -15,7 +15,7 @@ import { useTheme } from '~components/BladeProvider'; const StyledBaseInputWrapper = styled(Animated.View)((props) => ({ ...getInputBackgroundAndBorderStyles({ theme: props.theme, - isFocused: props.currentInteraction === 'active', + isFocused: props.currentInteraction === 'focus', isDisabled: props.isDisabled, validationState: props.validationState, isTextArea: props.isTextArea, diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx index ba49ac3f682..d5f6b8711f5 100644 --- a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx +++ b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx @@ -50,7 +50,7 @@ const StyledBaseInputWrapper = styled(BaseBox)< >((props) => ({ ...getInputBackgroundAndBorderStyles({ theme: props.theme, - isFocused: props.currentInteraction === 'active', + isFocused: props.currentInteraction === 'focus', isDisabled: props.isDisabled, validationState: props.validationState, isTextArea: props.isTextArea, @@ -60,7 +60,7 @@ const StyledBaseInputWrapper = styled(BaseBox)< ...getInputBackgroundAndBorderStyles({ theme: props.theme, isHovered: true, - isFocused: props.currentInteraction === 'active', + isFocused: props.currentInteraction === 'focus', isDisabled: props.isDisabled, validationState: props.validationState, isDropdownTrigger: props.isDropdownTrigger, @@ -72,7 +72,7 @@ const StyledBaseInputWrapper = styled(BaseBox)< ':focus-within': { ...getInputBackgroundAndBorderStyles({ theme: props.theme, - isFocused: props.currentInteraction === 'active', + isFocused: props.currentInteraction === 'focus', isDisabled: props.isDisabled, validationState: props.validationState, isDropdownTrigger: props.isDropdownTrigger, diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx index 4eb86476f2f..037714a9e8b 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx @@ -8,9 +8,9 @@ import Animated, { } from 'react-native-reanimated'; import type { ReactElement } from 'react'; import { useEffect } from 'react'; +import type { ActionStates } from '../../../utils/useInteraction'; import type { BaseInputProps } from './BaseInput'; import { useTheme } from '~components/BladeProvider'; -import type { ActionStates } from '~tokens/theme/theme'; import { makeBorderSize } from '~utils/makeBorderSize'; const BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({ @@ -19,7 +19,7 @@ const BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({ left: 0, right: 0, opacity: 1, - backgroundColor: theme.colors.brand.primary[500], + backgroundColor: theme.colors.interactive.background.primary.default, height: makeBorderSize(theme.border.width.thin), })); @@ -27,7 +27,7 @@ export const BaseInputAnimatedBorder = ({ currentInteraction, validationState, }: { - currentInteraction: keyof ActionStates; + currentInteraction: ActionStates; validationState: BaseInputProps['validationState']; }): ReactElement => { const { theme } = useTheme(); @@ -45,7 +45,7 @@ export const BaseInputAnimatedBorder = ({ useEffect(() => { if ( - currentInteraction == 'active' && + currentInteraction == 'focus' && validationState !== 'error' && validationState !== 'success' ) { diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx index ae48030ef7d..37d8fea49a1 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx @@ -7,8 +7,8 @@ import BaseBox from '~components/Box/BaseBox'; import { makeMotionTime } from '~utils/makeMotionTime'; import type { Theme } from '~components/BladeProvider'; import { useTheme } from '~components/BladeProvider'; -import type { ActionStates } from '~tokens/theme/theme'; import { makeBorderSize } from '~utils/makeBorderSize'; +import type { ActionStates } from '~utils/useInteraction'; const scaleBorder = keyframes` from { @@ -39,7 +39,7 @@ const BaseInputStyledAnimatedBorder = styled(BaseBox)( left: 0; right: 0; opacity: 0; - background-color: ${theme.colors.brand.primary[500]}; + background-color: ${theme.colors.interactive.background.primary.default}; border-width: ${makeBorderSize(theme.border.width.thin)}; height: ${makeBorderSize(theme.border.width.thin)}; ${animation} @@ -50,7 +50,7 @@ export const BaseInputAnimatedBorder = ({ currentInteraction, validationState, }: { - currentInteraction: keyof ActionStates; + currentInteraction: ActionStates; validationState: BaseInputProps['validationState']; }): ReactElement => { const { theme } = useTheme(); @@ -67,7 +67,7 @@ export const BaseInputAnimatedBorder = ({ // need ref because we don't have `blur` as an interaction which means the exit animation would run on default as well as blur event const borderAnimation = React.useRef(); if ( - currentInteraction === 'active' && + currentInteraction === 'focus' && validationState !== 'error' && validationState !== 'success' ) { diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx index 5dc946465aa..11221b4dbe9 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx @@ -69,7 +69,14 @@ const ClickableText = ({ }} > - {children} + + {children} + ); diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx index c206b5e5809..18eb9994b42 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx @@ -189,10 +189,13 @@ const BaseInputTagSlot = ({ {visibleTags} {tags && !showAllTags && invisibleTagsCount ? ( {visibleTags?.length === 0 diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx index a62027c7ce9..73459f77e63 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx @@ -140,11 +140,7 @@ export const BaseInputVisuals = ({ ) : null} @@ -154,8 +150,7 @@ export const BaseInputVisuals = ({ size="medium" variant="body" weight="regular" - contrast="low" - type={isDisabled ? 'placeholder' : 'subtle'} + color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'} > {prefix} @@ -184,8 +179,7 @@ export const BaseInputVisuals = ({ size="medium" variant="body" weight="regular" - contrast="low" - type={isDisabled ? 'placeholder' : 'subtle'} + color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'} > {suffix} @@ -197,9 +191,7 @@ export const BaseInputVisuals = ({ } diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx index 7d8675fb376..62de6903f04 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx @@ -3,8 +3,8 @@ import React from 'react'; import type { BaseInputProps } from './BaseInput'; import { BaseInputAnimatedBorder } from './BaseInputAnimatedBorder'; import { AnimatedBaseInputWrapper } from './AnimatedBaseInputWrapper'; -import type { ActionStates } from '~tokens/theme/theme'; import type { ContainerElementType } from '~utils/types'; +import type { ActionStates } from '~utils/useInteraction'; type BaseInputWrapperProps = Pick< BaseInputProps, @@ -17,7 +17,7 @@ type BaseInputWrapperProps = Pick< > & { isFocused?: boolean; isLabelLeftPositioned?: boolean; - currentInteraction: keyof ActionStates; + currentInteraction: ActionStates; isTextArea?: boolean; setShowAllTagsWithAnimation: (showAllTagsWithAnimation: boolean) => void; children: React.ReactNode; diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx index 7cd5b033fd4..30ca906b447 100644 --- a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx +++ b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx @@ -254,7 +254,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction< setCurrentInteraction('default'); } }, - isFocused: currentInteraction === 'active', + isFocused: currentInteraction === 'focus', }; return renderAs === 'button' ? ( @@ -267,7 +267,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction< }} onFocus={(): void => { handleOnFocus?.({ name, value: props.value }); - setCurrentInteraction('active'); + setCurrentInteraction('focus'); }} as={undefined} {...commonProps} @@ -275,7 +275,9 @@ const _StyledBaseInput: React.ForwardRefRenderFunction< {...accessibilityProps} > @@ -291,12 +293,12 @@ const _StyledBaseInput: React.ForwardRefRenderFunction< numberOfLines={numberOfLines} editable={!isDisabled} maxLength={maxCharacters} - placeholderTextColor={theme.colors.surface.text.placeholder.lowContrast} + placeholderTextColor={theme.colors.surface.text.gray.disabled} onFocus={(event): void => { handleOnFocus?.({ name, value: event?.nativeEvent.text }); // React Native does not have native onPress event on Input elements so for consistency of API we call it on onFocus which also gets triggered on clicks handleOnClick?.({ name, value: event?.nativeEvent.text }); - setCurrentInteraction('active'); + setCurrentInteraction('focus'); }} onChangeText={(text): void => { handleOnChange?.({ name, value: text }); diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx index e0e39cf86d0..cabe7e9913f 100644 --- a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx +++ b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx @@ -34,9 +34,8 @@ const getWebInputStyles = ( ...getTextStyles({ size: 'medium', variant: 'body', - type: 'placeholder', weight: 'regular', - contrast: 'low', + color: 'surface.text.gray.disabled', theme: props.theme, }), textAlign: props.textAlign, @@ -116,7 +115,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction< handleOnBlur?.({ name, value: event }); }, onFocus: (event: React.ChangeEvent): void => { - setCurrentInteraction('active'); + setCurrentInteraction('focus'); handleOnFocus?.({ name, value: event }); }, onKeyDown: (event: React.KeyboardEvent) => { @@ -144,7 +143,9 @@ const _StyledBaseInput: React.ForwardRefRenderFunction< value={props.value} > diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap index c5bdc00f721..842bd0ea183 100644 --- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap +++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap @@ -84,7 +84,7 @@ exports[` should render 1`] = ` > should render 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -148,7 +148,7 @@ exports[` should render 1`] = ` > should render 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -188,8 +188,8 @@ exports[` should render 1`] = ` style={ [ { - "backgroundColor": "hsla(216, 15%, 54%, 0.09)", - "borderBottomColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(211, 20%, 52%, 0.09)", + "borderBottomColor": "hsla(211, 20%, 52%, 0.18)", "borderBottomStyle": "solid", "borderBottomWidth": 1, "borderTopLeftRadius": 2, @@ -228,13 +228,13 @@ exports[` should render 1`] = ` onFocus={[Function]} onKeyPress={[Function]} onSubmitEditing={[Function]} - placeholderTextColor="hsla(214, 18%, 69%, 1)" + placeholderTextColor="hsla(211, 20%, 52%, 0.32)" secureTextEntry={false} style={ [ { "backgroundColor": "transparent", - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "flexBasis": 0, "flexGrow": 1, "flexShrink": 1, @@ -264,7 +264,7 @@ exports[` should render 1`] = ` style={ [ { - "backgroundColor": "hsla(218, 89%, 51%, 1)", + "backgroundColor": "hsla(227, 100%, 59%, 1)", "bottom": 0, "height": 1, "left": 0, @@ -395,7 +395,7 @@ exports[` should render with icons 1`] = ` > should render with icons 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -459,7 +459,7 @@ exports[` should render with icons 1`] = ` > should render with icons 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -499,8 +499,8 @@ exports[` should render with icons 1`] = ` style={ [ { - "backgroundColor": "hsla(216, 15%, 54%, 0.09)", - "borderBottomColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(211, 20%, 52%, 0.09)", + "borderBottomColor": "hsla(211, 20%, 52%, 0.18)", "borderBottomStyle": "solid", "borderBottomWidth": 1, "borderTopLeftRadius": 2, @@ -587,7 +587,7 @@ exports[` should render with icons 1`] = ` should render with icons 1`] = ` should render with icons 1`] = ` onKeyPress={[Function]} onSubmitEditing={[Function]} placeholder="First Last" - placeholderTextColor="hsla(214, 18%, 69%, 1)" + placeholderTextColor="hsla(211, 20%, 52%, 0.32)" secureTextEntry={false} style={ [ { "backgroundColor": "transparent", - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "flexBasis": 0, "flexGrow": 1, "flexShrink": 1, @@ -744,7 +744,7 @@ exports[` should render with icons 1`] = ` > should render with icons 1`] = ` style={ [ { - "backgroundColor": "hsla(218, 89%, 51%, 1)", + "backgroundColor": "hsla(227, 100%, 59%, 1)", "bottom": 0, "height": 1, "left": 0, diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap index fd6f23d0b80..fa9d2606ec8 100644 --- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap +++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should display success validation state 1`] = `"
Success
"`; +exports[` should display success validation state 1`] = `"
Success
"`; exports[` should display success validation state 2`] = ` .c0.c0.c0.c0.c0 { @@ -95,7 +95,7 @@ exports[` should display success validation state 2`] = ` } .c4.c4.c4.c4.c4 { - 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; @@ -117,7 +117,7 @@ exports[` should display success validation state 2`] = ` } .c6.c6.c6.c6.c6 { - 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; @@ -134,7 +134,7 @@ exports[` should display success validation state 2`] = ` } .c15.c15.c15.c15.c15 { - color: hsla(160,100%,26%,1); + color: hsla(150,100%,21%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -151,7 +151,7 @@ exports[` should display success validation state 2`] = ` } .c8.c8.c8.c8.c8 { - 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; @@ -183,7 +183,7 @@ exports[` should display success validation state 2`] = ` } .c8.c8.c8.c8.c8::-webkit-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -200,7 +200,7 @@ exports[` should display success validation state 2`] = ` } .c8.c8.c8.c8.c8::-moz-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -217,7 +217,7 @@ exports[` should display success validation state 2`] = ` } .c8.c8.c8.c8.c8:-ms-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -234,7 +234,7 @@ exports[` should display success validation state 2`] = ` } .c8.c8.c8.c8.c8::placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -260,14 +260,14 @@ exports[` should display success validation state 2`] = ` left: 0; right: 0; opacity: 0; - background-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); border-width: 1px; height: 1px; } .c7.c7.c7.c7.c7 { - background-color: hsla(155,100%,31%,0.09); - border-bottom-color: hsla(160,100%,26%,1); + background-color: hsla(150,100%,32%,0.09); + border-bottom-color: hsla(150,100%,32%,1); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -284,8 +284,8 @@ exports[` should display success validation state 2`] = ` } .c7.c7.c7.c7.c7:hover { - background-color: hsla(155,100%,31%,0.09); - border-bottom-color: hsla(160,100%,26%,1); + background-color: hsla(150,100%,32%,0.09); + border-bottom-color: hsla(150,100%,32%,1); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -308,8 +308,8 @@ exports[` should display success validation state 2`] = ` } .c7.c7.c7.c7.c7:focus-within { - background-color: hsla(155,100%,31%,0.09); - border-bottom-color: hsla(160,100%,26%,1); + background-color: hsla(150,100%,32%,0.09); + border-bottom-color: hsla(150,100%,32%,1); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -421,6 +421,7 @@ exports[` should display success validation state 2`] = `
should display success validation state 2`] = ` clip-rule="evenodd" d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" data-blade-component="svg-path" - fill="hsla(160, 100%, 26%, 1)" + fill="hsla(150, 100%, 21%, 1)" fill-rule="evenodd" /> @@ -450,8 +451,7 @@ exports[` should display success validation state 2`] = ` /> Success diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap index b54990f7804..76ab512c06e 100644 --- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap +++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap @@ -71,7 +71,7 @@ exports[` should render 1`] = ` } .c4.c4.c4.c4.c4 { - 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; @@ -93,7 +93,7 @@ exports[` should render 1`] = ` } .c6.c6.c6.c6.c6 { - 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; @@ -110,7 +110,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8 { - 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; @@ -142,7 +142,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8::-webkit-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -159,7 +159,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8::-moz-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -176,7 +176,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8:-ms-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -193,7 +193,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8::placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -219,14 +219,14 @@ exports[` should render 1`] = ` left: 0; right: 0; opacity: 0; - background-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); border-width: 1px; height: 1px; } .c7.c7.c7.c7.c7 { - background-color: hsla(216,15%,54%,0.09); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -243,8 +243,8 @@ exports[` should render 1`] = ` } .c7.c7.c7.c7.c7:hover { - background-color: hsla(216,15%,54%,0.18); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.18); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -267,8 +267,8 @@ exports[` should render 1`] = ` } .c7.c7.c7.c7.c7:focus-within { - background-color: hsla(216,15%,54%,0.09); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -484,7 +484,7 @@ exports[` should render with icons 1`] = ` } .c4.c4.c4.c4.c4 { - 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; @@ -506,7 +506,7 @@ exports[` should render with icons 1`] = ` } .c6.c6.c6.c6.c6 { - 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; @@ -523,7 +523,7 @@ exports[` should render with icons 1`] = ` } .c10.c10.c10.c10.c10 { - 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; @@ -555,7 +555,7 @@ exports[` should render with icons 1`] = ` } .c10.c10.c10.c10.c10::-webkit-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -572,7 +572,7 @@ exports[` should render with icons 1`] = ` } .c10.c10.c10.c10.c10::-moz-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -589,7 +589,7 @@ exports[` should render with icons 1`] = ` } .c10.c10.c10.c10.c10:-ms-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -606,7 +606,7 @@ exports[` should render with icons 1`] = ` } .c10.c10.c10.c10.c10::placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -632,14 +632,14 @@ exports[` should render with icons 1`] = ` left: 0; right: 0; opacity: 0; - background-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); border-width: 1px; height: 1px; } .c7.c7.c7.c7.c7 { - background-color: hsla(216,15%,54%,0.09); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -656,8 +656,8 @@ exports[` should render with icons 1`] = ` } .c7.c7.c7.c7.c7:hover { - background-color: hsla(216,15%,54%,0.18); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.18); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -680,8 +680,8 @@ exports[` should render with icons 1`] = ` } .c7.c7.c7.c7.c7:focus-within { - background-color: hsla(216,15%,54%,0.09); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -784,14 +784,14 @@ exports[` should render with icons 1`] = ` clip-rule="evenodd" d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" data-blade-component="svg-path" - fill="hsla(216, 27%, 36%, 1)" + fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" /> @@ -829,7 +829,7 @@ exports[` should render with icons 1`] = `
diff --git a/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts b/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts index 806b2d8bbb1..3e30a0ec640 100644 --- a/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts +++ b/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts @@ -46,32 +46,32 @@ export const getInputBackgroundAndBorderStyles = ({ | 'isDropdownTrigger' >): CSSObject => { // normal state - let backgroundColor = theme.colors.brand.gray.a50.lowContrast; - let borderBottomColor = theme.colors.brand.gray.a100.lowContrast; + let backgroundColor = theme.colors.interactive.background.gray.default; + let borderBottomColor = theme.colors.interactive.background.gray.highlighted; // hoverState if (isHovered) { - backgroundColor = theme.colors.brand.gray.a100.lowContrast; + backgroundColor = theme.colors.interactive.background.gray.highlighted; } // focused state if (isFocused) { - backgroundColor = theme.colors.brand.primary[300]; + backgroundColor = theme.colors.interactive.background.primary.faded; } // disabled state if (isDisabled) { - backgroundColor = theme.colors.brand.gray.a50.lowContrast; - borderBottomColor = theme.colors.brand.gray[300].lowContrast; + backgroundColor = theme.colors.interactive.background.gray.disabled; + borderBottomColor = 'transparent'; } // validation state if (validationState === 'error') { - backgroundColor = theme.colors.feedback.background.negative.lowContrast; - borderBottomColor = theme.colors.feedback.border.negative.highContrast; + backgroundColor = theme.colors.interactive.background.negative.faded; + borderBottomColor = theme.colors.interactive.background.negative.default; } else if (validationState === 'success') { - backgroundColor = theme.colors.feedback.background.positive.lowContrast; - borderBottomColor = theme.colors.feedback.border.positive.highContrast; + backgroundColor = theme.colors.interactive.background.positive.faded; + borderBottomColor = theme.colors.interactive.background.positive.default; } return { @@ -146,9 +146,8 @@ export const getBaseInputStyles = ({ ...getTextStyles({ size: 'medium', variant: 'body', - type: isDisabled ? 'placeholder' : 'subtle', weight: 'regular', - contrast: 'low', + color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle', theme, }), // take the full available width of parent container for input field diff --git a/packages/blade/src/components/Input/BaseInput/types.ts b/packages/blade/src/components/Input/BaseInput/types.ts index fe906b41470..845bbd5f119 100644 --- a/packages/blade/src/components/Input/BaseInput/types.ts +++ b/packages/blade/src/components/Input/BaseInput/types.ts @@ -2,13 +2,13 @@ import type React from 'react'; import type { Dispatch, SetStateAction } from 'react'; import type { BaseInputProps } from './BaseInput'; import type { FormInputHandleOnEvent } from '~components/Form'; -import type { ActionStates } from '~tokens/theme/theme'; import type { FormInputHandleOnClickEvent, FormInputHandleOnKeyDownEvent, FormInputOnClickEvent, } from '~components/Form/FormTypes'; import type { ContainerElementType } from '~utils/types'; +import type { ActionStates } from '~utils/useInteraction'; export type InputWrapperRef = React.MutableRefObject; @@ -34,7 +34,7 @@ export type BaseInputWrapperProps = Pick< > & { isFocused?: boolean; isLabelLeftPositioned?: boolean; - currentInteraction: keyof ActionStates; + currentInteraction: ActionStates; isTextArea?: boolean; setShowAllTagsWithAnimation?: (showAllTagsWithAnimation: boolean) => void; children: React.ReactNode; @@ -51,8 +51,8 @@ export type StyledBaseInputProps = { hasLeadingIcon?: boolean; hasTrailingIcon?: boolean; accessibilityProps: Record; - currentInteraction: keyof ActionStates; - setCurrentInteraction: Dispatch>; + currentInteraction: ActionStates; + setCurrentInteraction: Dispatch>; isTextArea?: boolean; hasTags?: boolean; } & Pick< diff --git a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx index 80bd532831f..e8401b931e3 100644 --- a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx +++ b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx @@ -1,7 +1,7 @@ import type { StoryFn, Meta } from '@storybook/react'; import { Title } from '@storybook/addon-docs'; import React from 'react'; -import { SelectInput } from '../DropdownInputTriggers'; +// import { SelectInput } from '../DropdownInputTriggers'; import type { OTPInputProps } from './OTPInput'; import { OTPInput as OTPInputComponent } from './OTPInput'; import { Sandbox } from '~utils/storybook/Sandbox'; @@ -9,8 +9,8 @@ import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import { Box } from '~components/Box'; import { Button } from '~components/Button'; -import { Dropdown, DropdownOverlay } from '~components/Dropdown'; -import { ActionList, ActionListItem } from '~components/ActionList'; +// import { Dropdown, DropdownOverlay } from '~components/Dropdown'; +// import { ActionList, ActionListItem } from '~components/ActionList'; const propsCategory = { BASE_PROPS: 'OTPInput Props', @@ -248,7 +248,7 @@ export const OTPInputControlled = OTPInputControlledTemplate.bind({}); export const OTPInputRef: StoryFn = () => { // eslint-disable-next-line react-hooks/rules-of-hooks - const [focusOn, setFocusOn] = React.useState(0); + const [focusOn] = React.useState(0); const inputRef = React.useRef([]); return ( @@ -260,7 +260,8 @@ export const OTPInputRef: StoryFn = () => { otpLength={4} onChange={({ name, value }): void => console.log({ name, value })} /> - + {/* TODO: Rebranding - uncomment when Dropdown is ready */} + {/* = () => { - + */}
Error
"`; +exports[` should display error validation state 1`] = `"
Error
"`; exports[` should display error validation state 2`] = ` .c0.c0.c0.c0.c0 { @@ -127,7 +127,7 @@ exports[` should display error validation state 2`] = ` } .c4.c4.c4.c4.c4 { - 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; @@ -149,7 +149,7 @@ exports[` should display error validation state 2`] = ` } .c6.c6.c6.c6.c6 { - 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; @@ -166,7 +166,7 @@ exports[` should display error validation state 2`] = ` } .c18.c18.c18.c18.c18 { - color: hsla(8,73%,47%,1); + color: hsla(0,83%,33%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -183,7 +183,7 @@ exports[` should display error validation state 2`] = ` } .c8.c8.c8.c8.c8 { - 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; @@ -215,7 +215,7 @@ exports[` should display error validation state 2`] = ` } .c8.c8.c8.c8.c8::-webkit-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -232,7 +232,7 @@ exports[` should display error validation state 2`] = ` } .c8.c8.c8.c8.c8::-moz-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -249,7 +249,7 @@ exports[` should display error validation state 2`] = ` } .c8.c8.c8.c8.c8:-ms-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -266,7 +266,7 @@ exports[` should display error validation state 2`] = ` } .c8.c8.c8.c8.c8::placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -292,14 +292,14 @@ exports[` should display error validation state 2`] = ` left: 0; right: 0; opacity: 0; - background-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); border-width: 1px; height: 1px; } .c7.c7.c7.c7.c7 { - background-color: hsla(9,91%,56%,0.09); - border-bottom-color: hsla(8,73%,47%,1); + background-color: hsla(4,74%,49%,0.09); + border-bottom-color: hsla(4,74%,49%,1); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -316,8 +316,8 @@ exports[` should display error validation state 2`] = ` } .c7.c7.c7.c7.c7:hover { - background-color: hsla(9,91%,56%,0.09); - border-bottom-color: hsla(8,73%,47%,1); + background-color: hsla(4,74%,49%,0.09); + border-bottom-color: hsla(4,74%,49%,1); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -340,8 +340,8 @@ exports[` should display error validation state 2`] = ` } .c7.c7.c7.c7.c7:focus-within { - background-color: hsla(9,91%,56%,0.09); - border-bottom-color: hsla(8,73%,47%,1); + background-color: hsla(4,74%,49%,0.09); + border-bottom-color: hsla(4,74%,49%,1); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -392,7 +392,7 @@ exports[` should display error validation state 2`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - color: hsla(214,18%,69%,1); + color: hsla(211,22%,56%,1); -webkit-transition-property: color,box-shadow; transition-property: color,box-shadow; -webkit-transition-duration: 150ms; @@ -402,17 +402,17 @@ exports[` should display error validation state 2`] = ` } .c11.c11.c11.c11.c11:hover { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); } .c11.c11.c11.c11.c11:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); - color: hsla(217,18%,45%,1); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); + color: hsla(211,26%,34%,1); } .c11.c11.c11.c11.c11:active { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); }
should display error validation state 2`] = `
should display error validation state 2`] = ` @@ -576,8 +577,7 @@ exports[` should display error validation state 2`] = ` /> Error diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap index 62b23e838bb..4111c7973c2 100644 --- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap +++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap @@ -103,7 +103,7 @@ exports[` should render 1`] = ` } .c4.c4.c4.c4.c4 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -125,7 +125,7 @@ exports[` should render 1`] = ` } .c6.c6.c6.c6.c6 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -142,7 +142,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8 { - 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; @@ -174,7 +174,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8::-webkit-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -191,7 +191,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8::-moz-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -208,7 +208,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8:-ms-input-placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -225,7 +225,7 @@ exports[` should render 1`] = ` } .c8.c8.c8.c8.c8::placeholder { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -251,14 +251,14 @@ exports[` should render 1`] = ` left: 0; right: 0; opacity: 0; - background-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); border-width: 1px; height: 1px; } .c7.c7.c7.c7.c7 { - background-color: hsla(216,15%,54%,0.09); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -275,8 +275,8 @@ exports[` should render 1`] = ` } .c7.c7.c7.c7.c7:hover { - background-color: hsla(216,15%,54%,0.18); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.18); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -299,8 +299,8 @@ exports[` should render 1`] = ` } .c7.c7.c7.c7.c7:focus-within { - background-color: hsla(216,15%,54%,0.09); - border-bottom-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.09); + border-bottom-color: hsla(211,20%,52%,0.18); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-width: 1px; @@ -351,7 +351,7 @@ exports[` should render 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - color: hsla(214,18%,69%,1); + color: hsla(211,22%,56%,1); -webkit-transition-property: color,box-shadow; transition-property: color,box-shadow; -webkit-transition-duration: 150ms; @@ -361,17 +361,17 @@ exports[` should render 1`] = ` } .c11.c11.c11.c11.c11:hover { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); } .c11.c11.c11.c11.c11:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); - color: hsla(217,18%,45%,1); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); + color: hsla(211,26%,34%,1); } .c11.c11.c11.c11.c11:active { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); }
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap index c4f62d7040e..96bf78b7e72 100644 --- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap +++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap @@ -86,7 +86,7 @@ exports[`
"`; +exports[`
"`; exports[`