feat(skin): allow customizing some components theme variant by skin (#1375)

WEB-2234

Author: atabel

packages/generate-design-tokens/index.js

@@ -145,6 +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(',')},
+        },
     };
     return skin;
 };

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();

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 (
         <FeedbackScreen
             {...props}
-            isInverse={!props.unstable_inlineInDesktop || isTabletOrSmaller}
+            isInverse={
+                themeVariants.successFeedback === 'inverse' &&
+                (!props.unstable_inlineInDesktop || isTabletOrSmaller)
+            }
             hapticFeedback="success"
             asset={
                 skinName === VIVO_SKIN ? (

src/loading-screen.tsx

@@ -320,6 +320,7 @@ type BrandLoadingScreenProps = {
 
 export const BrandLoadingScreen = React.forwardRef<HTMLDivElement, BrandLoadingScreenProps>(
     ({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<HTMLDivElement, BrandLoadingS
         return (
             <BaseLoadingScreen
                 ref={ref}
-                isInverse
+                isInverse={themeVariants.brandLoadingScreen === 'inverse'}
                 {...textProps}
                 isLoading={isLoading || !isClosing}
                 onClose={() => {

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 defaultThemeVariantsConfig: ThemeVariantsConfig = {
+    brandLoadingScreen: 'inverse',
+    successFeedback: 'inverse',
+};

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<Colors>;
     textPresets?: PartialTextPresetsConfig;
     borderRadii?: BorderRadiiConfig;
+    themeVariants?: ThemeVariantsConfig;
 };
 
 export type KnownSkin = {
@@ -94,4 +101,5 @@ export type KnownSkin = {
     darkModeColors?: Partial<Colors>;
     textPresets?: PartialTextPresetsConfig;
     borderRadii?: BorderRadiiConfig;
+    themeVariants?: ThemeVariantsConfig;
 };

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,
+    defaultThemeVariantsConfig,
+} 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 ?? defaultThemeVariantsConfig,
             Link: getMisticaLinkComponent(theme.Link),
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === 'ios',

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;