react-native-terra-ui 0.1.0

package/src/context/ThemeProvider.tsx

@@ -0,0 +1,97 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import { useUnistyles } from 'react-native-unistyles';
+
+import { configureTerraUI, getIsConfigured } from '../theme/configure';
+import { applyAccent, applyScheme, getCurrentAccent } from '../theme/runtime';
+import type { Scheme, TerraTheme } from '../theme/types';
+
+// Ensure the default theme is registered on first import, unless the app already
+// configured a custom one (e.g. via `react-native-terra-ui/theme` at entry).
+if (!getIsConfigured()) {
+  configureTerraUI();
+}
+
+interface ThemeContextValue {
+  accent: string | undefined;
+  setAccent: (name: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+/**
+ * Root provider for Terra UI. Wrap your app once near the root.
+ *
+ * @example
+ * <TerraUIProvider>
+ *   <RootNavigator />
+ * </TerraUIProvider>
+ */
+export const TerraUIProvider = ({ children }: PropsWithChildren) => {
+  const [accent, setAccentState] = useState<string | undefined>(() =>
+    getCurrentAccent()
+  );
+
+  const setAccent = useCallback((name: string) => {
+    applyAccent(name);
+    setAccentState(name);
+  }, []);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({ accent, setAccent }),
+    [accent, setAccent]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+export interface UseThemeResult {
+  /** The active resolved theme. */
+  theme: TerraTheme;
+  /** Active color scheme. */
+  scheme: Scheme;
+  /** Switch scheme (disables system-adaptive theming). */
+  setScheme: (scheme: Scheme) => void;
+  /** Active accent name, if any. */
+  accent: string | undefined;
+  /** Switch to a registered accent. */
+  setAccent: (name: string) => void;
+}
+
+/**
+ * Access the active theme and switch scheme / accent / radius.
+ * Must be used under {@link TerraUIProvider}.
+ */
+export function useTheme(): UseThemeResult {
+  const { theme, rt } = useUnistyles();
+  const ctx = useContext(ThemeContext);
+
+  const setScheme = useCallback((scheme: Scheme) => {
+    applyScheme(scheme);
+  }, []);
+
+  return {
+    theme,
+    scheme: (rt.themeName ?? 'light') as Scheme,
+    setScheme,
+    accent: ctx?.accent,
+    setAccent: ctx?.setAccent ?? noopSetAccent,
+  };
+}
+
+const noopSetAccent = (_name: string): void => {
+  if (__DEV__) {
+    console.warn(
+      '[react-native-terra-ui] setAccent called outside <TerraUIProvider>.'
+    );
+  }
+};

package/src/context/index.ts

@@ -0,0 +1,2 @@
+export type { UseThemeResult } from './ThemeProvider';
+export { TerraUIProvider, useTheme } from './ThemeProvider';

package/src/index.tsx

@@ -0,0 +1,6 @@
+// biome-ignore-all assist/source/organizeImports: ./context must be first so it
+// configures the default theme before any StyleSheet.create runs.
+export * from './context';
+
+export * from './components';
+export * from './theme';

package/src/theme/configure.ts

@@ -0,0 +1,215 @@
+import { createElement } from 'react';
+import { Image } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { defaultIcons } from '#components/icon/utils';
+import { normalizeAccent } from '#utils/accent-utils';
+import { deepMerge } from '#utils/deep-merge';
+
+import { buildRadiusScale, defaultDarkTheme, defaultLightTheme } from './theme';
+import type {
+  ComponentDefaults,
+  DefaultRadiusToken,
+  ElevationKey,
+  NormalizedAccent,
+  RadiusComponent,
+  Scheme,
+  TerraConfig,
+  TerraIconComponent,
+  TerraImageComponent,
+  TerraImageContentFit,
+  TerraSemanticIconName,
+  TerraTheme,
+  TerraThemeOverride,
+} from './types';
+
+// ─── Default image component ──────────────────────────────────────────────────
+
+const CONTENT_FIT_MAP = {
+  cover: 'cover',
+  contain: 'contain',
+  fill: 'stretch',
+} as const satisfies Record<
+  TerraImageContentFit,
+  'cover' | 'contain' | 'stretch'
+>;
+
+const DefaultImage: TerraImageComponent = ({
+  contentFit = 'cover',
+  source,
+  style,
+  accessibilityLabel,
+  onError,
+}) =>
+  createElement(Image, {
+    source,
+    style,
+    accessibilityLabel,
+    resizeMode: CONTENT_FIT_MAP[contentFit],
+    onError: onError ? () => onError() : undefined,
+  });
+
+// ─── Radius / elevation defaults ─────────────────────────────────────────────
+
+/** Fallback when a component's radius is not configured. */
+const DEFAULT_RADIUS: DefaultRadiusToken = 'md';
+/** Fallback when the surface elevation is not configured. */
+const DEFAULT_ELEVATION: ElevationKey = 'none';
+
+type ResolvedRadius = Record<RadiusComponent, DefaultRadiusToken>;
+
+/** Resolves each component's default radius from the `components` config. */
+const resolveDefaultRadius = (
+  components?: ComponentDefaults
+): ResolvedRadius => ({
+  button: components?.button?.radius ?? DEFAULT_RADIUS,
+  surface: components?.surface?.radius ?? DEFAULT_RADIUS,
+});
+
+// ─── Unistyles module augmentation ────────────────────────────────────────────
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes {
+    light: TerraTheme;
+    dark: TerraTheme;
+  }
+}
+
+interface Registry {
+  baseLight: TerraTheme;
+  baseDark: TerraTheme;
+  accents: Record<string, NormalizedAccent>;
+  currentAccent?: string;
+  defaultRadius: ResolvedRadius;
+  surfaceElevation: ElevationKey;
+  icons: Record<string, TerraIconComponent>;
+  imageComponent: TerraImageComponent;
+  configured: boolean;
+}
+
+const registry: Registry = {
+  baseLight: defaultLightTheme,
+  baseDark: defaultDarkTheme,
+  accents: {},
+  currentAccent: undefined,
+  defaultRadius: resolveDefaultRadius(),
+  surfaceElevation: DEFAULT_ELEVATION,
+  icons: {},
+  imageComponent: DefaultImage,
+  configured: false,
+};
+
+/** @internal */
+export const getRegistry = (): Registry => registry;
+
+export const getIsConfigured = (): boolean => registry.configured;
+
+export const getAccentNames = (): string[] => Object.keys(registry.accents);
+
+export const getImageComponent = (): TerraImageComponent =>
+  registry.imageComponent;
+
+export const getIcon = (name: string): TerraIconComponent | undefined =>
+  registry.icons[name] ?? defaultIcons[name as TerraSemanticIconName];
+
+export const getRequiredIcon = (
+  name: TerraSemanticIconName
+): TerraIconComponent => registry.icons[name] ?? defaultIcons[name];
+
+/**
+ * The configured default corner radius for a component (Button, Surface).
+ * Set via {@link configureTerraUI}; defaults to `'md'`.
+ */
+export const getDefaultRadius = (
+  component: RadiusComponent
+): DefaultRadiusToken => registry.defaultRadius[component];
+
+/**
+ * The configured default drop-shadow depth for Surface (`'none'` = no shadow).
+ * Set via {@link configureTerraUI}; defaults to `'none'`.
+ */
+export const getSurfaceElevation = (): ElevationKey =>
+  registry.surfaceElevation;
+
+/** Resolves a scheme's theme = base ⊕ the named accent's partial override. */
+export function resolveTheme(scheme: Scheme, accentName?: string): TerraTheme {
+  const base = scheme === 'light' ? registry.baseLight : registry.baseDark;
+  const accent = accentName ? registry.accents[accentName] : undefined;
+  return deepMerge(base, accent ? accent[scheme] : undefined);
+}
+
+const mergeThemeOverride = (
+  theme: TerraTheme,
+  override?: TerraThemeOverride
+): TerraTheme => {
+  if (!override) return theme;
+
+  const { radius, ...rest } = override;
+  let next = deepMerge(theme, rest);
+
+  if (radius) {
+    const { base, ...radiusTokens } = radius;
+    if (base != null) {
+      next = deepMerge(next, { radius: buildRadiusScale(base) });
+    }
+    next = deepMerge(next, { radius: radiusTokens });
+  }
+
+  return next;
+};
+
+/**
+ * Configure Terra UI's themes. Call ONCE, as early as possible — before any
+ * component renders (e.g. top of the app entry, imported from
+ * `react-native-terra-ui/theme`). With no arguments it registers the default
+ * theme; `<TerraUIProvider>` calls it for you if you haven't.
+ */
+export function configureTerraUI(config: TerraConfig = {}): void {
+  if (registry.configured) {
+    if (__DEV__ && Object.keys(config).length > 0) {
+      console.warn(
+        '[react-native-terra-ui] configureTerraUI() was called more than once; the later call was ignored.'
+      );
+    }
+    return;
+  }
+  registry.configured = true;
+
+  registry.baseLight = mergeThemeOverride(
+    mergeThemeOverride(defaultLightTheme, config.shared),
+    config.schemes?.light
+  );
+  registry.baseDark = mergeThemeOverride(
+    mergeThemeOverride(defaultDarkTheme, config.shared),
+    config.schemes?.dark
+  );
+
+  registry.defaultRadius = resolveDefaultRadius(config.components);
+  registry.surfaceElevation =
+    config.components?.surface?.elevation ?? DEFAULT_ELEVATION;
+  registry.icons = config.icons ?? {};
+  registry.imageComponent = config.image ?? DefaultImage;
+
+  registry.accents = {};
+  for (const [name, accent] of Object.entries(config.accents ?? {})) {
+    registry.accents[name] = normalizeAccent(accent);
+  }
+  const { defaultAccent } = config;
+  registry.currentAccent =
+    defaultAccent && registry.accents[defaultAccent]
+      ? defaultAccent
+      : undefined;
+
+  const themes = {
+    light: resolveTheme('light', registry.currentAccent),
+    dark: resolveTheme('dark', registry.currentAccent),
+  };
+
+  const adaptive = config.adaptiveThemes ?? true;
+  const settings = config.initialScheme
+    ? { initialTheme: config.initialScheme }
+    : adaptive
+      ? { adaptiveThemes: true as const }
+      : { initialTheme: 'light' as const };
+
+  StyleSheet.configure({ themes, settings });
+}

package/src/theme/index.ts

@@ -0,0 +1,72 @@
+// Public theme API for `react-native-terra-ui` / `react-native-terra-ui/theme`.
+//
+// Token DATA lives in ./tokens/*.ts (flat, Figma-style, untyped); TYPES live in
+// ./types; pure helpers live in #/utils. Raw primitive data (palette, spacing,
+// radius, elevation scales, typography) is intentionally NOT re-exported — the
+// resolved `defaultLightTheme` / `defaultDarkTheme` are the public surface.
+
+// ─── Utilities (color resolution + accent/merge/typography helpers) ──────────
+export { normalizeAccent } from '#utils/accent-utils';
+export { readableOn, shade, withAlpha } from '#utils/color-utils';
+export type { DeepPartial } from '#utils/deep-merge';
+export { deepMerge } from '#utils/deep-merge';
+export { resolveThemeColor } from '#utils/resolve-theme-color';
+export { FONT_WEIGHT_VALUE, SYSTEM_FONT } from '#utils/typography';
+// ─── Config + runtime ───────────────────────────────────────────────────────
+export {
+  configureTerraUI,
+  getAccentNames,
+  getDefaultRadius,
+  getIcon,
+  getImageComponent,
+  getIsConfigured,
+  getRequiredIcon,
+  getSurfaceElevation,
+  resolveTheme,
+} from './configure';
+export { applyAccent, applyScheme, getCurrentAccent } from './runtime';
+// ─── Default themes ───────────────────────────────────────────────────────────
+export { defaultDarkTheme, defaultLightTheme } from './theme';
+// ─── Types ────────────────────────────────────────────────────────────────────
+export type {
+  Accent,
+  AccentOverride,
+  AccentShorthand,
+  ActionColorToken,
+  BackgroundColorToken,
+  BorderColorToken,
+  ButtonDefaults,
+  ColorToken,
+  ComponentDefaults,
+  ContentColorToken,
+  DefaultRadiusToken,
+  ElevationKey,
+  ElevationScale,
+  ElevationStyle,
+  FontWeightToken,
+  LayoutTokens,
+  OpacityTokens,
+  RadiusComponent,
+  RadiusKey,
+  Scheme,
+  SpacingKey,
+  StatusColorToken,
+  SurfaceColorToken,
+  SurfaceDefaults,
+  TerraConfig,
+  TerraIconComponent,
+  TerraIconName,
+  TerraIconProps,
+  TerraImageComponent,
+  TerraImageContentFit,
+  TerraImageProps,
+  TerraSemanticIconName,
+  TerraTheme,
+  TerraThemeOverride,
+  TextColorToken,
+  TextVariant,
+  ThemeColor,
+  ThemeRadiusOverride,
+  TypeStyle,
+  Typography,
+} from './types';

package/src/theme/runtime.ts

@@ -0,0 +1,27 @@
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+import { getRegistry, resolveTheme } from './configure';
+import type { Scheme } from './types';
+
+/** Apply a named accent at runtime by updating both registered themes. */
+export function applyAccent(name: string): void {
+  const registry = getRegistry();
+  if (!registry.accents[name]) {
+    if (__DEV__) {
+      console.warn(`[react-native-terra-ui] Unknown accent "${name}".`);
+    }
+    return;
+  }
+  registry.currentAccent = name;
+  UnistylesRuntime.updateTheme('light', () => resolveTheme('light', name));
+  UnistylesRuntime.updateTheme('dark', () => resolveTheme('dark', name));
+}
+
+export const getCurrentAccent = (): string | undefined =>
+  getRegistry().currentAccent;
+
+/** Switch the active color scheme, disabling adaptive (system) theming. */
+export function applyScheme(scheme: Scheme): void {
+  UnistylesRuntime.setAdaptiveThemes(false);
+  UnistylesRuntime.setTheme(scheme);
+}

package/src/theme/theme.ts

@@ -0,0 +1,152 @@
+import { unflatten } from '#utils/unflatten';
+
+import { dark } from './tokens/dark';
+import { light } from './tokens/light';
+import { primitives } from './tokens/primitives';
+import type {
+  ElevationScale,
+  LayoutTokens,
+  OpacityTokens,
+  RadiusKey,
+  SpacingKey,
+  TerraTheme,
+  ThemeColor,
+  Typography,
+} from './types';
+
+/**
+ * Resolves {palette.key} reference notation against a source flat-token map.
+ * Non-reference values pass through unchanged.
+ */
+function resolveRefs(
+  flat: Record<string, unknown>,
+  source: Record<string, unknown>
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(flat)) {
+    out[k] =
+      typeof v === 'string' && v.startsWith('{') && v.endsWith('}')
+        ? (source[v.slice(1, -1)] ?? v)
+        : v;
+  }
+  return out;
+}
+
+/**
+ * Splits a flat dotted-key token map into a one-level-deep object keyed by
+ * the first path segment (the category). The category prefix is stripped from
+ * each key, leaving a flat map per category.
+ *
+ * Example:
+ *   { 'color.surface.default': '#fff', 'color.action.bg.primary': '#009966' }
+ *   → { color: { 'surface.default': '#fff', 'action.bg.primary': '#009966' } }
+ */
+function flattenByCategory(
+  tokens: Record<string, unknown>
+): Record<string, Record<string, unknown>> {
+  const out: Record<string, Record<string, unknown>> = {};
+  for (const [key, value] of Object.entries(tokens)) {
+    const sep = key.indexOf('.');
+    const cat = sep === -1 ? key : key.slice(0, sep);
+    const rest = sep === -1 ? '' : key.slice(sep + 1);
+    if (out[cat] === undefined) {
+      out[cat] = {};
+    }
+    out[cat][rest] = value;
+  }
+  return out;
+}
+
+/**
+ * Scheme-agnostic primitives, rebuilt once from the flat token data. Shared by
+ * both default themes (matching the previous behavior where spacing / radius /
+ * typography were singleton constants). `palette` is present at runtime for
+ * Figma parity but is not part of {@link TerraTheme}. Only the radius BASE is
+ * authored here (`radius.base`); the full scale is derived via
+ * {@link buildRadiusScale}.
+ */
+const prim = unflatten<{
+  spacing: Record<SpacingKey, number>;
+  radius: { base: number };
+  typography: Typography;
+  opacity: OpacityTokens;
+  layout: LayoutTokens;
+}>(primitives);
+
+/**
+ * Default base corner radius (dp) — the `lg` (×1) step — taken from the
+ * `radius.base` primitive. The rest of the scale is derived from it via
+ * {@link RADIUS_MULTIPLIERS}; override at runtime with
+ * `configureTerraUI({ shared: { radius: { base } } })`, or change the
+ * `radius.base` token.
+ */
+export const DEFAULT_RADIUS_BASE = prim.radius.base;
+
+/**
+ * Per-token multipliers applied to the base radius (DaisyUI-style). `none` (0)
+ * and `full` (9999) are fixed and not scaled.
+ */
+export const RADIUS_MULTIPLIERS: Record<
+  Exclude<RadiusKey, 'none' | 'full'>,
+  number
+> = {
+  xs: 0.25,
+  sm: 0.5,
+  md: 0.75,
+  lg: 1,
+  xl: 1.5,
+  '2xl': 2,
+  '3xl': 3,
+};
+
+/**
+ * Builds the full radius scale from a single base value. Derived steps keep
+ * their exact (possibly fractional) dp; `none`/`full` are constant.
+ */
+export function buildRadiusScale(
+  base: number = DEFAULT_RADIUS_BASE
+): Record<RadiusKey, number> {
+  const scale = { none: 0, full: 9999 } as Record<RadiusKey, number>;
+  for (const key of Object.keys(
+    RADIUS_MULTIPLIERS
+  ) as (keyof typeof RADIUS_MULTIPLIERS)[]) {
+    scale[key] = base * RADIUS_MULTIPLIERS[key];
+  }
+  return scale;
+}
+
+const defaultRadius = buildRadiusScale();
+
+const lightByCategory = flattenByCategory(resolveRefs(light, primitives));
+const darkByCategory = flattenByCategory(resolveRefs(dark, primitives));
+
+// color: flat map — accessed as theme.color['action.bg.primary.hover']
+// elevation: re-unflattened for structured access — theme.elevation.sm.shadowRadius
+const lightTokens = {
+  color: lightByCategory.color as unknown as ThemeColor,
+  elevation: unflatten<ElevationScale>(lightByCategory.elevation ?? {}),
+};
+const darkTokens = {
+  color: darkByCategory.color as unknown as ThemeColor,
+  elevation: unflatten<ElevationScale>(darkByCategory.elevation ?? {}),
+};
+
+export const defaultLightTheme: TerraTheme = {
+  color: lightTokens.color,
+  elevation: lightTokens.elevation,
+  spacing: prim.spacing,
+  radius: defaultRadius,
+  typography: prim.typography,
+  opacity: prim.opacity,
+  layout: prim.layout,
+};
+
+export const defaultDarkTheme: TerraTheme = {
+  color: darkTokens.color,
+  elevation: darkTokens.elevation,
+  spacing: prim.spacing,
+  radius: defaultRadius,
+  typography: prim.typography,
+  opacity: prim.opacity,
+  layout: prim.layout,
+};

package/src/theme/tokens/dark.ts

@@ -0,0 +1,117 @@
+/**
+ * Dark-scheme color tokens — flat, dotted-key data (no imports, no types).
+ *
+ * Convention: [category].[context].[property?].[variant].[state]
+ *
+ * GENERATED-STYLE SOURCE: intended to be replaced by the Figma / design-sync export.
+ */
+export const dark = {
+  // ── color: page background ────────────────────────────────────────────────
+  'color.background': '{palette.neutral.950}',
+
+  // ── color: surfaces  (bg implied — no property segment) ──────────────────
+  'color.surface.default': '{palette.neutral.900}',
+  'color.surface.raised': '{palette.neutral.800}',
+  'color.surface.sunken': '#050506',
+  'color.surface.overlay': 'rgba(0, 0, 0, 0.72)',
+  'color.surface.accent': '{palette.emerald.500}',
+  'color.surface.accent.subtle': '{palette.emerald.950}',
+
+  // ── color: text / icons  (fg implied — no property segment) ──────────────
+  'color.text.default': '{palette.neutral.50}',
+  'color.text.muted': '{palette.neutral.400}',
+  'color.text.subtle': '{palette.neutral.500}',
+  'color.text.disabled': '{palette.neutral.700}',
+  'color.text.inverse': '{palette.neutral.950}',
+  'color.text.link': '{palette.blue.300}',
+  'color.text.accent': '{palette.emerald.400}',
+  'color.text.on-accent': '{palette.neutral.950}',
+  'color.text.on-accent-subtle': '{palette.emerald.300}',
+
+  // ── color: borders  (border-color implied — no property segment) ──────────
+  'color.border.subtle': '{palette.neutral.800}',
+  'color.border.default': '{palette.neutral.700}',
+  'color.border.strong': '{palette.neutral.600}',
+  'color.border.focus': '{palette.blue.400}',
+  'color.border.accent': '{palette.emerald.500}',
+
+  // ── color: interactive actions  (bg + fg → property required) ────────────
+  'color.action.bg.primary': '{palette.emerald.500}',
+  'color.action.bg.primary.hover': '{palette.emerald.400}',
+  'color.action.bg.primary.active': '{palette.emerald.300}',
+  'color.action.bg.primary.disabled': '{palette.slate.700}',
+  'color.action.fg.primary': '{palette.slate.950}',
+
+  'color.action.bg.subtle': '{palette.emerald.950}',
+  'color.action.bg.subtle.hover': '{palette.emerald.900}',
+  'color.action.bg.subtle.active': '{palette.emerald.800}',
+  'color.action.bg.subtle.disabled': '{palette.neutral.900}',
+  'color.action.fg.subtle': '{palette.emerald.300}',
+
+  'color.action.bg.neutral': 'transparent',
+  'color.action.bg.neutral.hover': '{palette.neutral.800}',
+  'color.action.bg.neutral.active': '{palette.neutral.700}',
+  'color.action.bg.neutral.disabled': 'transparent',
+  'color.action.fg.neutral': '{palette.neutral.400}',
+
+  // ── color: status  (bg + fg + border → property required) ────────────────
+  'color.status.bg.success': '{palette.green.500}',
+  'color.status.bg.success.subtle': '{palette.green.900}',
+  'color.status.border.success': '{palette.green.700}',
+  'color.status.border.success.subtle': '{palette.green.800}',
+  'color.status.fg.success': '{palette.slate.950}',
+  'color.status.fg.success.subtle': '{palette.green.200}',
+
+  'color.status.bg.warning': '{palette.amber.400}',
+  'color.status.bg.warning.subtle': '{palette.amber.900}',
+  'color.status.border.warning': '{palette.amber.700}',
+  'color.status.border.warning.subtle': '{palette.amber.800}',
+  'color.status.fg.warning': '{palette.slate.950}',
+  'color.status.fg.warning.subtle': '{palette.amber.200}',
+
+  'color.status.bg.danger': '{palette.red.500}',
+  'color.status.bg.danger.subtle': '{palette.red.950}',
+  'color.status.border.danger': '{palette.red.800}',
+  'color.status.border.danger.subtle': '{palette.red.900}',
+  'color.status.fg.danger': '{palette.white}',
+  'color.status.fg.danger.subtle': '{palette.red.200}',
+
+  'color.status.bg.info': '{palette.sky.500}',
+  'color.status.bg.info.subtle': '{palette.sky.950}',
+  'color.status.border.info': '{palette.sky.800}',
+  'color.status.border.info.subtle': '{palette.sky.900}',
+  'color.status.fg.info': '{palette.slate.950}',
+  'color.status.fg.info.subtle': '{palette.sky.200}',
+
+  // ── elevation: platform-aware shadow + Android elevation ──────────────────
+  'elevation.none.shadowColor': '#000000',
+  'elevation.none.shadowOpacity': 0,
+  'elevation.none.shadowRadius': 0,
+  'elevation.none.shadowOffset.width': 0,
+  'elevation.none.shadowOffset.height': 0,
+  'elevation.none.elevation': 0,
+  'elevation.sm.shadowColor': '#000000',
+  'elevation.sm.shadowOpacity': 0.3,
+  'elevation.sm.shadowRadius': 2,
+  'elevation.sm.shadowOffset.width': 0,
+  'elevation.sm.shadowOffset.height': 1,
+  'elevation.sm.elevation': 1,
+  'elevation.md.shadowColor': '#000000',
+  'elevation.md.shadowOpacity': 0.4,
+  'elevation.md.shadowRadius': 6,
+  'elevation.md.shadowOffset.width': 0,
+  'elevation.md.shadowOffset.height': 2,
+  'elevation.md.elevation': 3,
+  'elevation.lg.shadowColor': '#000000',
+  'elevation.lg.shadowOpacity': 0.5,
+  'elevation.lg.shadowRadius': 12,
+  'elevation.lg.shadowOffset.width': 0,
+  'elevation.lg.shadowOffset.height': 4,
+  'elevation.lg.elevation': 6,
+  'elevation.xl.shadowColor': '#000000',
+  'elevation.xl.shadowOpacity': 0.6,
+  'elevation.xl.shadowRadius': 24,
+  'elevation.xl.shadowOffset.width': 0,
+  'elevation.xl.shadowOffset.height': 8,
+  'elevation.xl.elevation': 12,
+};