From 633b01326e9d10440322bdc03d3bb0d9ec16c6d0 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Thu, 22 May 2025 15:37:30 +0200 Subject: [PATCH 1/4] WEB-2234 feat(skin): allow customizing some components theme variant by skin --- packages/generate-design-tokens/index.js | 3 +++ src/feedback.tsx | 7 +++++-- src/loading-screen.tsx | 3 ++- src/skins/defaults.tsx | 7 ++++++- src/skins/types/index.tsx | 8 ++++++++ src/theme-context-provider.tsx | 9 +++++++-- src/theme.tsx | 10 +++++++++- 7 files changed, 40 insertions(+), 7 deletions(-) diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js index b9f55fec00..38308f7006 100644 --- a/packages/generate-design-tokens/index.js +++ b/packages/generate-design-tokens/index.js @@ -145,6 +145,9 @@ export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => { .join(',')} }, textPresets: ${JSON.stringify(jsonSort(textTokens))}, + themeVariants: ${Object.entries(designTokens.themeVariant) + .map(([componentName, variantDescription]) => `'${componentName}': '${variantDescription.value}'`) + .join(',')}, }; return skin; }; diff --git a/src/feedback.tsx b/src/feedback.tsx index 007d9ce814..1db9a197c7 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -289,12 +289,15 @@ export const FeedbackScreen = ({ export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackProps): JSX.Element => { const {isTabletOrSmaller} = useScreenSize(); - const {skinName} = useTheme(); + const {skinName, themeVariants} = useTheme(); return ( ( ({isLoading = true, onClose, dataAttributes, ...textProps}, ref) => { + const {themeVariants} = useTheme(); const [isClosing, setIsClosing] = React.useState(false); const logoClosedRef = React.useRef(false); const textClosedRef = React.useRef(false); @@ -337,7 +338,7 @@ export const BrandLoadingScreen = React.forwardRef { diff --git a/src/skins/defaults.tsx b/src/skins/defaults.tsx index 8ec8965021..94e2dc3d22 100644 --- a/src/skins/defaults.tsx +++ b/src/skins/defaults.tsx @@ -1,4 +1,4 @@ -import type {BorderRadiiConfig, TextPresetsConfig} from './types'; +import type {BorderRadiiConfig, TextPresetsConfig, ThemeVariantsConfig} from './types'; export const defaultTextPresetsConfig: TextPresetsConfig = { text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}}, @@ -35,3 +35,8 @@ export const defaultBorderRadiiConfig: BorderRadiiConfig = { avatar: '50%', mediaSmall: '8px', }; + +export const defaultThemeVarantsConfig: ThemeVariantsConfig = { + brandLoadingScreen: 'inverse', + successFeedback: 'inverse', +}; diff --git a/src/skins/types/index.tsx b/src/skins/types/index.tsx index 81924aef74..8ec28d9373 100644 --- a/src/skins/types/index.tsx +++ b/src/skins/types/index.tsx @@ -1,3 +1,4 @@ +import type {Variant} from '../../theme-variant-context'; import type {Colors} from './colors'; export type {Colors} from './colors'; @@ -80,12 +81,18 @@ export type BorderRadiiConfig = { mediaSmall: string; }; +export type ThemeVariantsConfig = { + successFeedback: Variant; + brandLoadingScreen: Variant; +}; + export type Skin = { name: SkinName; colors: Colors; darkModeColors?: Partial; textPresets?: PartialTextPresetsConfig; borderRadii?: BorderRadiiConfig; + themeVariants?: ThemeVariantsConfig; }; export type KnownSkin = { @@ -94,4 +101,5 @@ export type KnownSkin = { darkModeColors?: Partial; textPresets?: PartialTextPresetsConfig; borderRadii?: BorderRadiiConfig; + themeVariants?: ThemeVariantsConfig; }; diff --git a/src/theme-context-provider.tsx b/src/theme-context-provider.tsx index 30bcded897..75abaaa677 100644 --- a/src/theme-context-provider.tsx +++ b/src/theme-context-provider.tsx @@ -15,7 +15,11 @@ import {AspectRatioSupportProvider} from './utils/aspect-ratio-support'; import {TrackingConfig} from './utils/analytics'; import {vars} from './skins/skin-contract.css'; import {fromHexToRgb} from './utils/color'; -import {defaultBorderRadiiConfig, defaultTextPresetsConfig} from './skins/defaults'; +import { + defaultBorderRadiiConfig, + defaultTextPresetsConfig, + defaultThemeVarantsConfig, +} from './skins/defaults'; import {isClientSide} from './utils/environment'; import {PACKAGE_VERSION} from './package-version'; import {SnackbarRoot} from './snackbar-context'; @@ -180,8 +184,9 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop ...dimensions, ...sanitizeDimensions(theme.dimensions), }, - textPresets, borderRadii: theme.skin.borderRadii ?? defaultBorderRadiiConfig, + textPresets, + themeVariants: theme.skin.themeVariants ?? defaultThemeVarantsConfig, Link: getMisticaLinkComponent(theme.Link), isDarkMode: isDarkModeEnabled, isIos: getPlatform(platformOverrides) === 'ios', diff --git a/src/theme.tsx b/src/theme.tsx index 6aa5361da1..22d0c86ce5 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -2,7 +2,14 @@ import * as React from 'react'; import type {RegionCode} from './utils/region-code'; import type {Locale} from './utils/locale'; -import type {BorderRadiiConfig, Colors, Skin, SkinName, TextPresetsConfig} from './skins/types'; +import type { + BorderRadiiConfig, + Colors, + Skin, + SkinName, + TextPresetsConfig, + ThemeVariantsConfig, +} from './skins/types'; import type {TrackingEvent} from './utils/types'; import type {Dictionary, TextToken} from './text-tokens'; @@ -164,6 +171,7 @@ export type Theme = { colorValues: Colors; borderRadii: BorderRadiiConfig; textPresets: TextPresetsConfig; + themeVariants: ThemeVariantsConfig; Link: LinkComponent; isDarkMode: boolean; isIos: boolean; From c18539f9151d87508ff9823c27b559afc3969ebe Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Thu, 22 May 2025 15:43:05 +0200 Subject: [PATCH 2/4] fix generated code --- packages/generate-design-tokens/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js index 38308f7006..a1dccc9002 100644 --- a/packages/generate-design-tokens/index.js +++ b/packages/generate-design-tokens/index.js @@ -145,9 +145,14 @@ export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => { .join(',')} }, textPresets: ${JSON.stringify(jsonSort(textTokens))}, - themeVariants: ${Object.entries(designTokens.themeVariant) - .map(([componentName, variantDescription]) => `'${componentName}': '${variantDescription.value}'`) - .join(',')}, + themeVariants: { + ${Object.entries(designTokens.themeVariant) + .map( + ([componentName, variantDescription]) => + `'${componentName}': '${variantDescription.value}'` + ) + .join(',')}, + }, }; return skin; }; From 75df9b5435c2a909e264a467f731ae0d3bd43fc0 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Thu, 29 May 2025 12:19:06 +0200 Subject: [PATCH 3/4] fix typo --- src/skins/defaults.tsx | 2 +- src/theme-context-provider.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/skins/defaults.tsx b/src/skins/defaults.tsx index 94e2dc3d22..026314202d 100644 --- a/src/skins/defaults.tsx +++ b/src/skins/defaults.tsx @@ -36,7 +36,7 @@ export const defaultBorderRadiiConfig: BorderRadiiConfig = { mediaSmall: '8px', }; -export const defaultThemeVarantsConfig: ThemeVariantsConfig = { +export const defaultThemeVariantsConfig: ThemeVariantsConfig = { brandLoadingScreen: 'inverse', successFeedback: 'inverse', }; diff --git a/src/theme-context-provider.tsx b/src/theme-context-provider.tsx index 75abaaa677..9d9a562187 100644 --- a/src/theme-context-provider.tsx +++ b/src/theme-context-provider.tsx @@ -18,7 +18,7 @@ import {fromHexToRgb} from './utils/color'; import { defaultBorderRadiiConfig, defaultTextPresetsConfig, - defaultThemeVarantsConfig, + defaultThemeVariantsConfig, } from './skins/defaults'; import {isClientSide} from './utils/environment'; import {PACKAGE_VERSION} from './package-version'; @@ -186,7 +186,7 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop }, borderRadii: theme.skin.borderRadii ?? defaultBorderRadiiConfig, textPresets, - themeVariants: theme.skin.themeVariants ?? defaultThemeVarantsConfig, + themeVariants: theme.skin.themeVariants ?? defaultThemeVariantsConfig, Link: getMisticaLinkComponent(theme.Link), isDarkMode: isDarkModeEnabled, isIos: getPlatform(platformOverrides) === 'ios', From 3ba82d691ce4b8b9d850dfa1b0115d851f34e7d5 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Thu, 29 May 2025 15:26:23 +0200 Subject: [PATCH 4/4] increase list test timeout --- src/__tests__/list-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/list-test.tsx b/src/__tests__/list-test.tsx index bf2e81037b..a9cab60b6f 100644 --- a/src/__tests__/list-test.tsx +++ b/src/__tests__/list-test.tsx @@ -234,7 +234,7 @@ test('RowList inside Form', async () => { radio: 'banana', }); }); -}, 20000); +}, 30000); test('Row list with icon buttons', async () => { const firstButtonSpy = jest.fn();