react-native-molecules 0.5.0-beta.0

package/styles/overlay.ts

@@ -0,0 +1,69 @@
+import color from 'color';
+import { Animated } from 'react-native';
+
+import { MD3DarkTheme } from './themes/DarkTheme';
+
+export const isAnimatedValue = (
+    it: number | string | Animated.AnimatedInterpolation<any>,
+): it is Animated.Value => it instanceof Animated.Value;
+
+export default function overlay<T extends Animated.Value | number>(
+    elevation: T,
+    surfaceColor: string = MD3DarkTheme.colors.surface,
+): T extends number ? string : Animated.AnimatedInterpolation<any> {
+    if (isAnimatedValue(elevation)) {
+        const inputRange = [0, 1, 2, 3, 8, 24];
+
+        // @ts-expect-error: TS doesn't seem to refine the type correctly
+        return elevation.interpolate({
+            inputRange,
+            outputRange: inputRange.map(el => {
+                return calculateColor(surfaceColor, el);
+            }),
+        });
+    }
+
+    // @ts-expect-error: TS doesn't seem to refine the type correctly
+    return calculateColor(surfaceColor, elevation);
+}
+
+function calculateColor(surfaceColor: string, elevation: number = 1) {
+    let overlayTransparency: number;
+    if (elevation >= 1 && elevation <= 24) {
+        overlayTransparency = elevationOverlayTransparency[elevation];
+    } else if (elevation > 24) {
+        overlayTransparency = elevationOverlayTransparency[24];
+    } else {
+        overlayTransparency = elevationOverlayTransparency[1];
+    }
+    return color(surfaceColor)
+        .mix(color('white'), overlayTransparency * 0.01)
+        .hex();
+}
+
+const elevationOverlayTransparency: Record<string, number> = {
+    1: 5,
+    2: 7,
+    3: 8,
+    4: 9,
+    5: 10,
+    6: 11,
+    7: 11.5,
+    8: 12,
+    9: 12.5,
+    10: 13,
+    11: 13.5,
+    12: 14,
+    13: 14.25,
+    14: 14.5,
+    15: 14.75,
+    16: 15,
+    17: 15.12,
+    18: 15.24,
+    19: 15.36,
+    20: 15.48,
+    21: 15.6,
+    22: 15.72,
+    23: 15.84,
+    24: 16,
+};

package/styles/shadow.ts

@@ -0,0 +1,21 @@
+import type { MD3Elevation } from '../types/theme';
+import { MD3Colors } from './themes/tokens';
+
+const MD3_SHADOW_OPACITY = 0.3;
+const MD3_SHADOW_COLOR = MD3Colors.primary0;
+
+export const inputRange: MD3Elevation[] = [0, 1, 2, 3, 4, 5];
+export const shadowHeight = [0, 1, 2, 4, 6, 8];
+export const shadowRadius = [0, 3, 6, 8, 10, 12];
+
+export default function shadow(elevation: number) {
+    return {
+        shadowColor: MD3_SHADOW_COLOR,
+        shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
+        shadowOffset: {
+            width: 0,
+            height: shadowHeight[elevation],
+        },
+        shadowRadius: shadowRadius[elevation],
+    };
+}

package/styles/themes/DarkTheme.tsx

@@ -0,0 +1,98 @@
+import color from 'color';
+
+import { MD3LightTheme } from './LightTheme';
+import { tokens } from './tokens';
+
+const ref = tokens.md.ref;
+
+export const generateDarkThemeColors = (
+    palette: typeof ref.palette,
+    opacity: typeof ref.opacity,
+) => {
+    return {
+        primary: palette.primary70,
+        primaryContainer: palette.primary30,
+        primaryOnHover: color(palette.primary80).darken(0.12).rgb().string(),
+        primaryContainerOnHover: color(palette.primary80).darken(0.9).rgb().string(),
+        secondary: palette.secondary80,
+        secondaryContainer: palette.secondary30,
+        secondaryContainerOnHover: color(palette.secondary30).darken(0.25).rgb().string(),
+        tertiary: palette.tertiary80,
+        tertiaryContainer: palette.tertiary30,
+        surface: palette.neutral10,
+        surfaceVariant: palette.neutralVariant30,
+        surfaceDisabled: color(palette.neutral90).alpha(opacity.level2).rgb().string(),
+        background: palette.neutral10,
+        error: palette.error80,
+        errorContainer: palette.error30,
+        onPrimary: palette.primary20,
+        onPrimaryContainer: palette.primary90,
+        onSecondary: palette.secondary20,
+        onSecondaryContainer: palette.secondary90,
+        onTertiary: palette.tertiary20,
+        onTertiaryContainer: palette.tertiary90,
+        onSurface: palette.neutral90,
+        onSurfaceVariant: palette.neutralVariant80,
+        onSurfaceDisabled: color(palette.neutral90).alpha(opacity.level4).hexa(),
+        onSurfaceRipple: color(palette.neutral90).alpha(0.12).rgb().string(),
+        onError: palette.error20,
+        onErrorContainer: palette.error80,
+        onBackground: palette.neutral90,
+        outline: palette.neutralVariant60,
+        outlineVariant: palette.neutralVariant30,
+        inverseSurface: palette.neutral90,
+        inverseOnSurface: palette.neutral20,
+        inversePrimary: palette.primary40,
+        backdrop: color(palette.neutralVariant20).alpha(0.4).hexa(),
+        disabled: palette.neutral40,
+        disabledOnBackground: color(palette.neutral100).alpha(0.1).rgb().string(),
+        neutral1: palette.neutral70,
+        lines: palette.neutral90, // #E4E1E6
+        onNeutral1: palette.neutral40,
+        surfaceContainerHighest: palette.neutral22,
+        elevation: {
+            level0: 'transparent',
+            // Note: Color values with transparency cause RN to transfer shadows to children nodes
+            // instead of View component in Surface. Providing solid background fixes the issue.
+            // Opaque color values generated with `palette.primary80` used as background
+            level1: color(palette.primary80).alpha(0.05).rgb().string(), // palette.primary80, alpha 0.05
+            level2: color(palette.primary80).alpha(0.08).rgb().string(), // palette.primary80, alpha 0.08
+            level3: color(palette.primary80).alpha(0.11).rgb().string(), // palette.primary80, alpha 0.11
+            level4: color(palette.primary80).alpha(0.12).rgb().string(), // palette.primary80, alpha 0.12
+            level5: color(palette.primary80).alpha(0.14).rgb().string(), // palette.primary80, alpha 0.14
+        },
+        stateLayer: {
+            hover: {
+                onSurface: color(palette.neutral90).alpha(opacity.level1).rgb().string(),
+                onSurfaceVariant: color(palette.neutralVariant80).alpha(opacity.level1).hexa(),
+                primary: color(palette.primary70).alpha(opacity.level1).hexa(),
+                onPrimary: color(palette.primary20).alpha(opacity.level1).hexa(),
+                onPrimaryContainer: color(palette.primary90).alpha(opacity.level1).hexa(),
+                onSecondaryContainer: color(palette.secondary90).alpha(opacity.level1).hexa(),
+                onTertiaryContainer: color(palette.tertiary90).alpha(opacity.level1).hexa(),
+                inverseOnSurface: color(palette.neutral20).alpha(opacity.level1).hexa(),
+            },
+            disabled: {
+                onSurface: color(palette.neutral90).alpha(opacity.level2).hexa(),
+                onSurface_Level4: color(palette.neutral90).alpha(opacity.level4).hexa(),
+            },
+            pressed: {
+                primary: color(palette.primary40).alpha(opacity.level2).hexa(),
+                onSurface: color(palette.neutral10).alpha(opacity.level2).hexa(),
+            },
+            focussed: {
+                primary: color(palette.primary40).alpha(opacity.level2).hexa(),
+                onSurface: color(palette.neutral10).alpha(opacity.level2).hexa(),
+            },
+        },
+        palette,
+        opacity,
+    };
+};
+
+export const MD3DarkTheme = {
+    ...MD3LightTheme,
+    themeName: 'MD3DarkTheme',
+    dark: true,
+    colors: generateDarkThemeColors(ref.palette, ref.opacity),
+};

package/styles/themes/LightTheme.tsx

@@ -0,0 +1,212 @@
+import color from 'color';
+
+import { MD3Colors, tokens, typescale } from './tokens';
+
+const ref = tokens.md.ref;
+
+export const generateLightThemeColors = (
+    palette: typeof ref.palette,
+    opacity: typeof ref.opacity,
+) => {
+    return {
+        primary: palette.primary40,
+        primaryContainer: palette.primary90,
+        primaryOnHover: color(palette.primary40).darken(0.05).rgb().string(),
+        primaryContainerOnHover: color(palette.primary40).lighten(0.99).rgb().string(),
+        secondary: palette.secondary40,
+        secondaryContainer: palette.secondary90,
+        secondaryContainerOnHover: color(palette.secondary40).lighten(0.99).rgb().string(),
+        tertiary: palette.tertiary40,
+        tertiaryContainer: palette.tertiary90,
+        surface: palette.neutral99,
+        surfaceVariant: palette.neutralVariant90,
+        surfaceDisabled: color(palette.neutral10).alpha(opacity.level2).rgb().string(),
+        background: palette.neutral99,
+        error: palette.error40,
+        errorContainer: palette.error90,
+        onPrimary: palette.primary100,
+        onPrimaryContainer: palette.primary10,
+        onSecondary: palette.secondary100,
+        onSecondaryContainer: palette.secondary10,
+        onTertiary: palette.tertiary100,
+        onTertiaryContainer: palette.tertiary10,
+        onSurface: palette.neutral10,
+        onSurfaceVariant: palette.neutralVariant30,
+        onSurfaceDisabled: color(palette.neutral10).alpha(opacity.level4).hexa(),
+        onSurfaceRipple: color(palette.neutral10).alpha(0.12).rgb().string(),
+        onError: palette.error100,
+        onErrorContainer: palette.error10,
+        onBackground: palette.neutral10,
+        outline: palette.neutralVariant50,
+        outlineVariant: palette.neutralVariant80,
+        inverseSurface: palette.neutral20,
+        inverseOnSurface: palette.neutral95,
+        inversePrimary: palette.primary80,
+        backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).hexa(),
+        disabled: palette.neutral70,
+        disabledOnBackground: color(palette.neutral0).alpha(0.12).rgb().string(),
+        neutral1: palette.neutral100,
+        onNeutral1: palette.neutral70,
+        lines: palette.neutral90, // #E4E1E6
+        surfaceContainerHighest: palette.neutral90,
+        scrim: palette.neutral0,
+        elevation: {
+            level0: 'transparent',
+            // Note: Color values with transparency cause RN to transfer shadows to children nodes
+            // instead of View component in Surface. Providing solid background fixes the issue.
+            // Opaque color values generated with `palette.primary99` used as background
+            level1: color(palette.primary40).alpha(0.05).hexa(), // palette.primary40, alpha 0.05
+            level2: color(palette.primary40).alpha(0.08).hexa(), // palette.primary40, alpha 0.08
+            level3: color(palette.primary40).alpha(0.11).hexa(), // palette.primary40, alpha 0.11
+            level4: color(palette.primary40).alpha(0.12).hexa(), // palette.primary40, alpha 0.12
+            level5: color(palette.primary40).alpha(0.14).hexa(), // palette.primary40, alpha 0.14
+        },
+        stateLayer: {
+            hover: {
+                onSurface: color(palette.neutral10).alpha(opacity.level1).hexa(),
+                onSurfaceVariant: color(palette.neutralVariant30).alpha(opacity.level1).hexa(),
+                primary: color(palette.primary40).alpha(opacity.level1).hexa(),
+                onPrimary: color(palette.primary100).alpha(opacity.level1).hexa(),
+                onPrimaryContainer: color(palette.primary10).alpha(opacity.level1).hexa(),
+                onSecondaryContainer: color(palette.secondary10).alpha(opacity.level1).hexa(),
+                onTertiaryContainer: color(palette.tertiary10).alpha(opacity.level1).hexa(),
+                inverseOnSurface: color(palette.neutral95).alpha(opacity.level1).hexa(),
+            },
+            disabled: {
+                onSurface: color(palette.neutral10).alpha(opacity.level2).hexa(),
+                onSurface_Level4: color(palette.neutral10).alpha(opacity.level4).hexa(),
+            },
+            pressed: {
+                primary: color(palette.primary40).alpha(opacity.level2).hexa(),
+                onSurface: color(palette.neutral10).alpha(opacity.level2).hexa(),
+            },
+            focussed: {
+                primary: color(palette.primary40).alpha(opacity.level2).hexa(),
+                onSurface: color(palette.neutral10).alpha(opacity.level2).hexa(),
+            },
+        },
+        palette,
+        opacity,
+    };
+};
+
+export const MD3LightTheme = {
+    dark: false,
+    themeName: 'MD3LightTheme',
+    colors: generateLightThemeColors(ref.palette, ref.opacity),
+    typescale,
+    shapes: ref.shapes,
+    animation: {
+        scale: 1.0,
+        durations: {
+            '0': 0,
+            '1': 100,
+        },
+    },
+    letterSpacings: {
+        xxs: -1.5,
+        xs: -0.5,
+        sm: 0,
+        md: 0.1,
+        lg: 0.15,
+        xl: 0.25,
+        '2xl': 0.4,
+        '3xl': 0.5,
+        '4xl': 1.25,
+        '5xl': 1.5,
+    },
+    lineHeights: {
+        xs: 1.25,
+        sm: 1.375,
+        md: 1.5,
+        lg: 1.625,
+        xl: 2,
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+    fontSizes: {
+        xxs: 10,
+        xs: 12,
+        sm: 14,
+        md: 16,
+        lg: 18,
+        xl: 20,
+        '2xl': 24,
+        '3xl': 30,
+        '4xl': 36,
+        '5xl': 48,
+        '6xl': 60,
+        '7xl': 72,
+        '8xl': 96,
+        '9xl': 128,
+    },
+    spacings: {
+        '0': 0,
+        '1': 4,
+        '2': 8,
+        '3': 12,
+        '4': 16,
+        '5': 20,
+        '6': 24,
+        '7': 28,
+        '8': 32,
+        '9': 36,
+        '10': 40,
+        '12': 48,
+        '16': 64,
+        '20': 80,
+        '24': 96,
+        '32': 128,
+        '40': 160,
+        '48': 192,
+        '56': 224,
+        '64': 256,
+        '72': 288,
+        '80': 320,
+        '96': 384,
+        px: 1,
+        '1l': 6,
+        '2l': 10,
+        _0: -0,
+        _1: -4,
+        _2: -8,
+        _3: -12,
+        _4: -16,
+        _5: -20,
+        _6: -24,
+        _7: -28,
+        _8: -32,
+        _9: -36,
+        _10: -40,
+        _12: -48,
+        _16: -64,
+        _20: -80,
+        _24: -96,
+        _32: -128,
+        _40: -160,
+        _48: -192,
+        _56: -224,
+        _64: -256,
+        _72: -288,
+        _80: -320,
+        _96: -384,
+        _px: -1,
+    },
+    elevations: {
+        level0: 0,
+        level1: 1,
+        level2: 2,
+        level3: 3,
+        level4: 4,
+        level5: 5,
+    },
+};

package/styles/themes/tokens.ts

@@ -0,0 +1,248 @@
+// import { Dimensions, Platform } from 'react-native';
+import type { Font } from '../../types/theme';
+
+const ref = {
+    palette: {
+        primary100: 'rgba(255, 255, 255, 1)',
+        primary99: 'rgba(255, 251, 254, 1)',
+        primary95: 'rgba(246, 237, 255, 1)',
+        primary90: 'rgba(234, 221, 255, 1)',
+        primary80: 'rgba(208, 188, 255, 1)',
+        primary70: 'rgba(182, 157, 248, 1)',
+        primary60: 'rgba(154, 130, 219, 1)',
+        primary50: 'rgba(127, 103, 190, 1)',
+        primary40: 'rgba(103, 80, 164, 1)',
+        primary30: 'rgba(79, 55, 139, 1)',
+        primary20: 'rgba(56, 30, 114, 1)',
+        primary10: 'rgba(33, 0, 93, 1)',
+        primary0: 'rgba(0, 0, 0, 1)',
+        secondary100: 'rgba(255, 255, 255, 1)',
+        secondary99: 'rgba(255, 251, 254, 1)',
+        secondary95: 'rgba(246, 237, 255, 1)',
+        secondary90: 'rgba(232, 222, 248, 1)',
+        secondary80: 'rgba(204, 194, 220, 1)',
+        secondary70: 'rgba(176, 167, 192, 1)',
+        secondary60: 'rgba(149, 141, 165, 1)',
+        secondary50: 'rgba(122, 114, 137, 1)',
+        secondary40: 'rgba(98, 91, 113, 1)',
+        secondary30: 'rgba(74, 68, 88, 1)',
+        secondary20: 'rgba(51, 45, 65, 1)',
+        secondary10: 'rgba(29, 25, 43, 1)',
+        secondary0: 'rgba(0, 0, 0, 1)',
+        tertiary100: 'rgba(255, 255, 255, 1)',
+        tertiary99: 'rgba(255, 251, 250, 1)',
+        tertiary95: 'rgba(255, 236, 241, 1)',
+        tertiary90: 'rgba(255, 216, 228, 1)',
+        tertiary80: 'rgba(239, 184, 200, 1)',
+        tertiary70: 'rgba(210, 157, 172, 1)',
+        tertiary60: 'rgba(181, 131, 146, 1)',
+        tertiary50: 'rgba(152, 105, 119, 1)',
+        tertiary40: 'rgba(125, 82, 96, 1)',
+        tertiary30: 'rgba(99, 59, 72, 1)',
+        tertiary20: 'rgba(73, 37, 50, 1)',
+        tertiary10: 'rgba(49, 17, 29, 1)',
+        tertiary0: 'rgba(0, 0, 0, 1)',
+        neutral100: 'rgba(255, 255, 255, 1)',
+        neutral99: 'rgba(255, 251, 254, 1)',
+        neutral95: 'rgba(244, 239, 244, 1)',
+        neutral90: 'rgba(230, 225, 229, 1)',
+        neutral80: 'rgba(201, 197, 202, 1)',
+        neutral70: 'rgba(174, 170, 174, 1)',
+        neutral60: 'rgba(147, 144, 148, 1)',
+        neutral50: 'rgba(120, 117, 121, 1)',
+        neutral40: 'rgba(96, 93, 98, 1)',
+        neutral30: 'rgba(72, 70, 73, 1)',
+        neutral22: 'rgba(54,52,59,1)',
+        neutral20: 'rgba(49, 48, 51, 1)',
+        neutral10: 'rgba(28, 27, 31, 1)',
+        neutral0: 'rgba(0, 0, 0, 1)',
+        neutralVariant100: 'rgba(255, 255, 255, 1)',
+        neutralVariant99: 'rgba(255, 251, 254, 1)',
+        neutralVariant95: 'rgba(245, 238, 250, 1)',
+        neutralVariant90: 'rgba(231, 224, 236, 1)',
+        neutralVariant80: 'rgba(202, 196, 208, 1)',
+        neutralVariant70: 'rgba(174, 169, 180, 1)',
+        neutralVariant60: 'rgba(147, 143, 153, 1)',
+        neutralVariant50: 'rgba(121, 116, 126, 1)',
+        neutralVariant40: 'rgba(96, 93, 102, 1)',
+        neutralVariant30: 'rgba(73, 69, 79, 1)',
+        neutralVariant20: 'rgba(50, 47, 55, 1)',
+        neutralVariant10: 'rgba(29, 26, 34, 1)',
+        neutralVariant0: 'rgba(0, 0, 0, 1)',
+        error100: 'rgba(255, 255, 255, 1)',
+        error99: 'rgba(255, 251, 249, 1)',
+        error95: 'rgba(252, 238, 238, 1)',
+        error90: 'rgba(249, 222, 220, 1)',
+        error80: 'rgba(242, 184, 181, 1)',
+        error70: 'rgba(236, 146, 142, 1)',
+        error60: 'rgba(228, 105, 98, 1)',
+        error50: 'rgba(220, 54, 46, 1)',
+        error40: 'rgba(179, 38, 30, 1)',
+        error30: 'rgba(140, 29, 24, 1)',
+        error20: 'rgba(96, 20, 16, 1)',
+        error10: 'rgba(65, 14, 11, 1)',
+        error0: 'rgba(0, 0, 0, 1)',
+    },
+
+    typeface: {
+        brandRegular: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+        // brandRegular: Platform.select({
+        //     web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+        //     ios: 'System',
+        //     default: 'sans-serif',
+        // }),
+        weightRegular: '400' as Font['fontWeight'],
+
+        plainMedium: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+        // plainMedium: Platform.select({
+        //     web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+        //     ios: 'System',
+        //     default: 'sans-serif-medium',
+        // }),
+        weightMedium: '500' as Font['fontWeight'],
+    },
+
+    opacity: {
+        level1: 0.08,
+        level2: 0.12,
+        level3: 0.16,
+        level4: 0.38,
+    },
+
+    shapes: {
+        corner: {
+            none: 0,
+            extraSmall: 4,
+            small: 8,
+            medium: 12,
+            large: 16,
+            extraLarge: 28,
+            full: 500,
+            // full: Dimensions.get('window').width,
+        },
+    },
+};
+
+const regularType = {
+    fontFamily: ref.typeface.brandRegular,
+    letterSpacing: 0,
+    fontWeight: ref.typeface.weightRegular,
+};
+
+const mediumType = {
+    fontFamily: ref.typeface.plainMedium,
+    letterSpacing: 0.15,
+    fontWeight: ref.typeface.weightMedium,
+};
+
+export const typescale = {
+    displayLarge: {
+        ...regularType,
+        lineHeight: 64,
+        fontSize: 57,
+    },
+    displayMedium: {
+        ...regularType,
+        lineHeight: 52,
+        fontSize: 45,
+    },
+    displaySmall: {
+        ...regularType,
+        lineHeight: 44,
+        fontSize: 36,
+    },
+
+    headlineLarge: {
+        ...regularType,
+        lineHeight: 40,
+        fontSize: 32,
+    },
+    headlineMedium: {
+        ...regularType,
+        lineHeight: 36,
+        fontSize: 28,
+    },
+    headlineSmall: {
+        ...regularType,
+        lineHeight: 32,
+        fontSize: 24,
+    },
+
+    titleLarge: {
+        ...regularType,
+        lineHeight: 28,
+        fontSize: 22,
+    },
+    titleMedium: {
+        ...mediumType,
+        lineHeight: 24,
+        fontSize: 16,
+    },
+    titleSmall: {
+        ...mediumType,
+        letterSpacing: 0.1,
+        lineHeight: 20,
+        fontSize: 14,
+    },
+
+    labelLarge: {
+        ...mediumType,
+        letterSpacing: 0.1,
+        lineHeight: 20,
+        fontSize: 14,
+    },
+    labelMedium: {
+        ...mediumType,
+        letterSpacing: 0.5,
+        lineHeight: 16,
+        fontSize: 12,
+    },
+    labelSmall: {
+        ...mediumType,
+        letterSpacing: 0.5,
+        lineHeight: 16,
+        fontSize: 11,
+    },
+
+    bodyExtraLarge: {
+        ...mediumType,
+        fontWeight: ref.typeface.weightRegular,
+        fontFamily: ref.typeface.brandRegular,
+        lineHeight: 28,
+        fontSize: 18,
+    },
+    bodyLarge: {
+        ...mediumType,
+        fontWeight: ref.typeface.weightRegular,
+        fontFamily: ref.typeface.brandRegular,
+        lineHeight: 24,
+        fontSize: 16,
+    },
+    bodyMedium: {
+        ...mediumType,
+        fontWeight: ref.typeface.weightRegular,
+        fontFamily: ref.typeface.brandRegular,
+        letterSpacing: 0.25,
+        lineHeight: 20,
+        fontSize: 14,
+    },
+    bodySmall: {
+        ...mediumType,
+        fontWeight: ref.typeface.weightRegular,
+        fontFamily: ref.typeface.brandRegular,
+        letterSpacing: 0.4,
+        lineHeight: 16,
+        fontSize: 12,
+    },
+};
+
+export const tokens = {
+    md: {
+        ref,
+        sys: {
+            typescale,
+        },
+    },
+};
+
+export const MD3Colors = ref.palette;

package/styles/utils.ts

@@ -0,0 +1,11 @@
+import type Color from 'color';
+
+export function lightenBy(color: Color, ratio: number) {
+    const lightness = color.lightness();
+    return color.lightness(lightness + (100 - lightness) * ratio);
+}
+
+export function darkenBy(color: Color, ratio: number) {
+    const lightness = color.lightness();
+    return color.lightness(lightness - lightness * ratio);
+}