@dryanovski/react-native-components 1.0.2 → 1.0.5

package/lib/typescript/src/themes/colors.d.ts

@@ -0,0 +1,108 @@
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#F0F7FF";
+        readonly 100: "#D9E9FF";
+        readonly 200: "#B3D3FF";
+        readonly 300: "#8DBDFF";
+        readonly 400: "#66A7FF";
+        readonly 500: "#3F91FF";
+        readonly 600: "#2376E6";
+        readonly 700: "#1658B3";
+        readonly 800: "#0A3A80";
+        readonly 900: "#001D4D";
+    };
+    readonly secondary: {
+        readonly 50: "#F5F5FF";
+        readonly 100: "#E6E4FF";
+        readonly 200: "#C8C4FF";
+        readonly 300: "#AAA3FF";
+        readonly 400: "#8C82FF";
+        readonly 500: "#6E61FF";
+        readonly 600: "#554ACC";
+        readonly 700: "#3D3499";
+        readonly 800: "#251E66";
+        readonly 900: "#100A33";
+    };
+    readonly success: {
+        readonly 50: "#EBFDF3";
+        readonly 100: "#C8F9DF";
+        readonly 200: "#A3F3C6";
+        readonly 300: "#7DEDAE";
+        readonly 400: "#57E796";
+        readonly 500: "#32D880";
+        readonly 600: "#28B56A";
+        readonly 700: "#1E9254";
+        readonly 800: "#146F3E";
+        readonly 900: "#0A4C28";
+    };
+    readonly warning: {
+        readonly 50: "#FFFAEA";
+        readonly 100: "#FFF2C2";
+        readonly 200: "#FFE08A";
+        readonly 300: "#FFCE52";
+        readonly 400: "#FFBC1A";
+        readonly 500: "#F5A000";
+        readonly 600: "#CC8300";
+        readonly 700: "#A36600";
+        readonly 800: "#7A4A00";
+        readonly 900: "#523000";
+    };
+    readonly danger: {
+        readonly 50: "#FFF5F5";
+        readonly 100: "#FFE0E0";
+        readonly 200: "#FFB8B8";
+        readonly 300: "#FF8A8A";
+        readonly 400: "#FF5C5C";
+        readonly 500: "#FF2E2E";
+        readonly 600: "#CC2323";
+        readonly 700: "#991A1A";
+        readonly 800: "#661212";
+        readonly 900: "#330909";
+    };
+    readonly error: {
+        readonly 50: "#FFF4F2";
+        readonly 100: "#FFE3DE";
+        readonly 200: "#FFC0B8";
+        readonly 300: "#FF9A8E";
+        readonly 400: "#FF6B5C";
+        readonly 500: "#F04438";
+        readonly 600: "#D92D20";
+        readonly 700: "#B42318";
+        readonly 800: "#912018";
+        readonly 900: "#7A271A";
+    };
+    readonly disabled: {
+        readonly bg: "#E5E7EB";
+        readonly text: "#9CA3AF";
+        readonly border: "#D1D5DB";
+    };
+    readonly gray: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F3F4F6";
+        readonly 200: "#E5E7EB";
+        readonly 300: "#D1D5DB";
+        readonly 400: "#9CA3AF";
+        readonly 500: "#6B7280";
+        readonly 600: "#4B5563";
+        readonly 700: "#374151";
+        readonly 800: "#1F2937";
+        readonly 900: "#111827";
+    };
+    readonly background: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#F7F7F8";
+        readonly tertiary: "#EFEFF1";
+        readonly disabled: "#E5E7EB";
+    };
+    readonly text: {
+        readonly primary: "#111827";
+        readonly secondary: "#4B5563";
+        readonly muted: "#6B7280";
+        readonly inverted: "#FFFFFF";
+    };
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly transparent: "transparent";
+};
+export type ColorToken = typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/lib/typescript/src/themes/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/themes/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HT,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC"}

package/lib/typescript/src/themes/light.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeDefinition } from './types';
+export declare const LightTheme: ThemeDefinition;
+//# sourceMappingURL=light.d.ts.map

package/lib/typescript/src/themes/light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/themes/light.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,eAAO,MAAM,UAAU,EAAE,eAsBxB,CAAC"}

package/lib/typescript/src/themes/radius.d.ts

@@ -0,0 +1,10 @@
+export declare const radii: {
+    readonly none: 0;
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly full: 9999;
+};
+export type RadiusToken = keyof typeof radii;
+//# sourceMappingURL=radius.d.ts.map

package/lib/typescript/src/themes/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../../../src/themes/radius.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/lib/typescript/src/themes/size.d.ts

@@ -0,0 +1,10 @@
+export declare const sizes: {
+    readonly xs: 16;
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 48;
+    readonly xl: 64;
+    readonly '2xl': 96;
+};
+export type SizeToken = keyof typeof sizes;
+//# sourceMappingURL=size.d.ts.map

package/lib/typescript/src/themes/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../src/themes/size.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/lib/typescript/src/themes/spacing.d.ts

@@ -0,0 +1,12 @@
+export declare const spacing: {
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly '2xl': 32;
+    readonly '3xl': 40;
+};
+export type SpacingToken = keyof typeof spacing;
+//# sourceMappingURL=spacing.d.ts.map

package/lib/typescript/src/themes/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../src/themes/spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/lib/typescript/src/themes/types.d.ts

@@ -0,0 +1,19 @@
+import type { CardStyleVariables } from '../components/Card/styles';
+import type { SurfaceStyleVariables } from '../components/Surface/styles';
+import type { colors } from './colors';
+import type { radii } from './radius';
+import type { sizes } from './size';
+import type { spacing } from './spacing';
+import type { typography } from './typography';
+export type ThemeDefinition = {
+    color: typeof colors;
+    size: typeof sizes;
+    spacing: typeof spacing;
+    typography: typeof typography;
+    radius: typeof radii;
+    components: {
+        card: CardStyleVariables;
+        surface: SurfaceStyleVariables;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/themes/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,KAAK,CAAC;IACnB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,MAAM,EAAE,OAAO,KAAK,CAAC;IACrB,UAAU,EAAE;QACV,IAAI,EAAE,kBAAkB,CAAC;QACzB,OAAO,EAAE,qBAAqB,CAAC;KAChC,CAAC;CACH,CAAC"}

package/lib/typescript/src/themes/typography.d.ts

@@ -0,0 +1,30 @@
+export declare const typography: {
+    readonly fonts: {
+        readonly regular: "System";
+        readonly medium: "System";
+        readonly bold: "System";
+    };
+    readonly fontSizes: {
+        readonly xs: 12;
+        readonly sm: 14;
+        readonly md: 16;
+        readonly lg: 20;
+        readonly xl: 24;
+        readonly '2xl': 32;
+    };
+    readonly lineHeights: {
+        readonly xs: 16;
+        readonly sm: 18;
+        readonly md: 20;
+        readonly lg: 28;
+        readonly xl: 32;
+        readonly '2xl': 40;
+    };
+    readonly fontWeights: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly bold: "700";
+    };
+};
+export type TypographyToken = typeof typography;
+//# sourceMappingURL=typography.d.ts.map

package/lib/typescript/src/themes/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/themes/typography.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Bb,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC"}

package/lib/typescript/src/types/general.types.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentRef } from 'react';
+import type { View } from 'react-native';
+export type ViewRef = ComponentRef<typeof View>;
+//# sourceMappingURL=general.types.d.ts.map

package/lib/typescript/src/types/general.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"general.types.d.ts","sourceRoot":"","sources":["../../../../src/types/general.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -61,8 +61,8 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.81.0",
+    "react": ">=19",
+    "react-native": ">=0.81.5",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": ">=4",

package/src/components/Card/Card.tsx

@@ -1,4 +1,6 @@
-import { View } from 'react-native';
+import { forwardRef } from 'react';
+import type { ViewRef } from '../../types/general.types';
+import Surface from '../Surface/Surface';
 import Styles from './styles';
 import type { CardProps } from './types';
 
@@ -12,13 +14,19 @@ import type { CardProps } from './types';
  *   <Text>This is a card</Text>
  * </Card>
  */
-export const Card: React.FC<CardProps> = ({ children, style, ...props }) => {
+export const Card = forwardRef<ViewRef, CardProps>((props, ref) => {
+  const { children, variant = 'default', style = {}, ...rest } = props;
   return (
-    <View style={[Styles.container, style]} {...props}>
+    <Surface
+      ref={ref}
+      variant={variant}
+      style={[Styles.container, style]}
+      {...rest}
+    >
       {children}
-    </View>
+    </Surface>
   );
-};
+});
 
 Card.displayName = 'Card';
 

package/src/components/Card/styles.ts

@@ -1,26 +1,26 @@
 import Style from '../../utils/Style';
 
-const DEFAULT_CARD = {
-  card_background_color: '#fff',
-  card_border_radius: 8,
-  card_padding: 16,
-  card_shadow_color: '#000',
-  card_shadow_offset: { width: 0, height: 2 },
-  card_shadow_opacity: 0.1,
-  card_shadow_radius: 4,
-  card_elevation: 3,
+export const DEFAULT_CARD = {
+  border_radius: 8,
+  padding: 16,
+  shadow_color: '#000',
+  shadow_offset: { width: 0, height: 2 },
+  shadow_opacity: 0.1,
+  shadow_radius: 4,
+  elevation: 3,
 };
 
+export type CardStyleVariables = typeof DEFAULT_CARD;
+
 export const Styles = Style.create({
   container: {
-    backgroundColor: DEFAULT_CARD.card_background_color,
-    borderRadius: DEFAULT_CARD.card_border_radius,
-    padding: DEFAULT_CARD.card_padding,
-    shadowColor: DEFAULT_CARD.card_shadow_color,
-    shadowOffset: DEFAULT_CARD.card_shadow_offset,
-    shadowOpacity: DEFAULT_CARD.card_shadow_opacity,
-    shadowRadius: DEFAULT_CARD.card_shadow_radius,
-    elevation: DEFAULT_CARD.card_elevation,
+    borderRadius: DEFAULT_CARD.border_radius,
+    padding: DEFAULT_CARD.padding,
+    shadowColor: DEFAULT_CARD.shadow_color,
+    shadowOffset: DEFAULT_CARD.shadow_offset,
+    shadowOpacity: DEFAULT_CARD.shadow_opacity,
+    shadowRadius: DEFAULT_CARD.shadow_radius,
+    elevation: DEFAULT_CARD.elevation,
   },
 });
 

package/src/components/Card/types.ts

@@ -1,9 +1,18 @@
-import type { View, ViewStyle } from 'react-native';
+import type { ViewProps, ViewStyle } from 'react-native';
+import type { SurfaceVariants } from '../Surface/types';
 
 /**
  * Props for the Card component
  */
-export type CardProps = {
+export interface CardProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the Card
+   */
   children?: React.ReactNode;
+  /**
+   * Custom styles for the Card container
+   */
   style?: ViewStyle;
-} & View;
+
+  variant?: SurfaceVariants;
+}

package/src/components/Surface/Surface.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import { Styles } from './styles';
+import type { SurfaceProps } from './types';
+
+/**
+ * Surface component to provide a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the surface
+ * @param {ViewStyle} style - Additional styles for the surface container
+ * @param {SurfaceVariants} variant - The variant of the surface styling
+ * @returns {JSX.Element} The Surface component
+ * @example
+ * <Surface variant="secondary" style={{ margin: 10 }}>
+ *   <Text>This is a surface</Text>
+ * </Surface>
+ */
+export const Surface = forwardRef<ViewRef, SurfaceProps>((props, ref) => {
+  const { children, variant = 'default', style, ...rest } = props;
+  return (
+    <View ref={ref} style={[Styles.base, Styles[variant], style]} {...rest}>
+      {children}
+    </View>
+  );
+});
+
+Surface.displayName = 'Surface';
+
+export default Surface;

package/src/components/Surface/styles.ts

@@ -0,0 +1,28 @@
+import Style from '../../utils/Style';
+
+export const DEFAULT_SURFACE = {
+  default_background_color: '#fff',
+  secondary_background_color: '#f0f0f0',
+  transparent_background_color: 'transparent',
+};
+
+export type SurfaceStyleVariables = typeof DEFAULT_SURFACE;
+
+export const Styles = Style.create({
+  base: {},
+
+  /**
+   * Variants
+   */
+
+  default: {
+    backgroundColor: DEFAULT_SURFACE.default_background_color,
+  },
+  secondary: {
+    backgroundColor: DEFAULT_SURFACE.secondary_background_color,
+  },
+
+  transparent: {
+    backgroundColor: DEFAULT_SURFACE.transparent_background_color,
+  },
+});

package/src/components/Surface/types.ts

@@ -0,0 +1,14 @@
+import type { ViewProps, ViewStyle } from 'react-native';
+
+export type SurfaceVariants = 'default' | 'secondary' | 'transparent';
+
+export interface SurfaceProps extends ViewProps {
+  children: React.ReactNode;
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * The variant of the Surface component.
+   * @default 'default'
+   */
+  variant?: SurfaceVariants;
+}

package/src/themes/colors.ts

@@ -0,0 +1,125 @@
+export const colors = {
+  // ----- BRAND COLORS -----
+  primary: {
+    50: '#F0F7FF',
+    100: '#D9E9FF',
+    200: '#B3D3FF',
+    300: '#8DBDFF',
+    400: '#66A7FF',
+    500: '#3F91FF', // main brand color
+    600: '#2376E6',
+    700: '#1658B3',
+    800: '#0A3A80',
+    900: '#001D4D',
+  },
+
+  secondary: {
+    50: '#F5F5FF',
+    100: '#E6E4FF',
+    200: '#C8C4FF',
+    300: '#AAA3FF',
+    400: '#8C82FF',
+    500: '#6E61FF', // accent / complementary
+    600: '#554ACC',
+    700: '#3D3499',
+    800: '#251E66',
+    900: '#100A33',
+  },
+
+  // ----- STATUS COLORS -----
+  success: {
+    50: '#EBFDF3',
+    100: '#C8F9DF',
+    200: '#A3F3C6',
+    300: '#7DEDAE',
+    400: '#57E796',
+    500: '#32D880', // success default
+    600: '#28B56A',
+    700: '#1E9254',
+    800: '#146F3E',
+    900: '#0A4C28',
+  },
+
+  warning: {
+    50: '#FFFAEA',
+    100: '#FFF2C2',
+    200: '#FFE08A',
+    300: '#FFCE52',
+    400: '#FFBC1A',
+    500: '#F5A000', // warning default
+    600: '#CC8300',
+    700: '#A36600',
+    800: '#7A4A00',
+    900: '#523000',
+  },
+
+  danger: {
+    50: '#FFF5F5',
+    100: '#FFE0E0',
+    200: '#FFB8B8',
+    300: '#FF8A8A',
+    400: '#FF5C5C',
+    500: '#FF2E2E', // danger default
+    600: '#CC2323',
+    700: '#991A1A',
+    800: '#661212',
+    900: '#330909',
+  },
+
+  error: {
+    50: '#FFF4F2',
+    100: '#FFE3DE',
+    200: '#FFC0B8',
+    300: '#FF9A8E',
+    400: '#FF6B5C',
+    500: '#F04438', // common red error
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+  },
+
+  // ----- DISABLED -----
+  disabled: {
+    bg: '#E5E7EB',
+    text: '#9CA3AF',
+    border: '#D1D5DB',
+  },
+
+  // ----- NEUTRALS -----
+  gray: {
+    50: '#F9FAFB',
+    100: '#F3F4F6',
+    200: '#E5E7EB',
+    300: '#D1D5DB',
+    400: '#9CA3AF',
+    500: '#6B7280',
+    600: '#4B5563',
+    700: '#374151',
+    800: '#1F2937',
+    900: '#111827',
+  },
+
+  // ----- BACKGROUND -----
+  background: {
+    primary: '#FFFFFF',
+    secondary: '#F7F7F8',
+    tertiary: '#EFEFF1',
+    disabled: '#E5E7EB',
+  },
+
+  // ----- TEXT -----
+  text: {
+    primary: '#111827',
+    secondary: '#4B5563',
+    muted: '#6B7280',
+    inverted: '#FFFFFF',
+  },
+
+  // ----- BLACK & WHITE -----
+  white: '#FFFFFF',
+  black: '#000000',
+  transparent: 'transparent',
+} as const;
+
+export type ColorToken = typeof colors;

package/src/themes/light.ts

@@ -0,0 +1,30 @@
+import { colors } from './colors';
+import { radii } from './radius';
+import { sizes } from './size';
+import { spacing } from './spacing';
+import type { ThemeDefinition } from './types';
+import { typography } from './typography';
+
+export const LightTheme: ThemeDefinition = {
+  color: colors,
+  size: sizes,
+  spacing: spacing,
+  typography: typography,
+  radius: radii,
+  components: {
+    card: {
+      border_radius: radii.md,
+      padding: spacing.lg,
+      shadow_color: colors.black,
+      shadow_offset: { width: 0, height: 2 },
+      shadow_opacity: 0.1,
+      shadow_radius: radii.sm,
+      elevation: 3,
+    },
+    surface: {
+      default_background_color: colors.primary[50],
+      secondary_background_color: colors.primary[100],
+      transparent_background_color: colors.transparent,
+    },
+  },
+};

package/src/themes/radius.ts

@@ -0,0 +1,10 @@
+export const radii = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+export type RadiusToken = keyof typeof radii;

package/src/themes/size.ts

@@ -0,0 +1,10 @@
+export const sizes = {
+  'xs': 16,
+  'sm': 24,
+  'md': 32,
+  'lg': 48,
+  'xl': 64,
+  '2xl': 96,
+} as const;
+
+export type SizeToken = keyof typeof sizes;

package/src/themes/spacing.ts

@@ -0,0 +1,12 @@
+export const spacing = {
+  'none': 0,
+  'xs': 4,
+  'sm': 8,
+  'md': 12,
+  'lg': 16,
+  'xl': 24,
+  '2xl': 32,
+  '3xl': 40,
+} as const;
+
+export type SpacingToken = keyof typeof spacing;

package/src/themes/types.ts

@@ -0,0 +1,19 @@
+import type { CardStyleVariables } from '../components/Card/styles';
+import type { SurfaceStyleVariables } from '../components/Surface/styles';
+import type { colors } from './colors';
+import type { radii } from './radius';
+import type { sizes } from './size';
+import type { spacing } from './spacing';
+import type { typography } from './typography';
+
+export type ThemeDefinition = {
+  color: typeof colors;
+  size: typeof sizes;
+  spacing: typeof spacing;
+  typography: typeof typography;
+  radius: typeof radii;
+  components: {
+    card: CardStyleVariables;
+    surface: SurfaceStyleVariables;
+  };
+};