@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/src/theme/generated/neutral.ts

@@ -0,0 +1,382 @@
+// Generated by tools/tokens/build.mjs from tokens/. Do not edit by hand.
+import type { ResolvedTheme } from './types';
+
+export const neutralLight: ResolvedTheme = {
+  space: {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    8: 32,
+    10: 40,
+    12: 48,
+  },
+  radius: {
+    xs: 2,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+  },
+  size: {
+    icon: {
+      sm: 16,
+      md: 20,
+      lg: 24,
+    },
+    control: {
+      sm: 32,
+      md: 36,
+      lg: 40,
+    },
+    touchTarget: 44,
+  },
+  breakpoint: {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+  },
+  typography: {
+    fontFamily: {
+      sans: undefined,
+    },
+    maxFontSizeMultiplier: 1.3,
+    display: {
+      fontFamily: undefined,
+      fontSize: 40,
+      lineHeight: 48,
+      fontWeight: 700,
+      letterSpacing: -0.5,
+    },
+    h1: {
+      fontFamily: undefined,
+      fontSize: 32,
+      lineHeight: 40,
+      fontWeight: 700,
+      letterSpacing: -0.25,
+    },
+    h2: {
+      fontFamily: undefined,
+      fontSize: 28,
+      lineHeight: 36,
+      fontWeight: 600,
+      letterSpacing: 0,
+    },
+    h3: {
+      fontFamily: undefined,
+      fontSize: 24,
+      lineHeight: 32,
+      fontWeight: 600,
+      letterSpacing: 0,
+    },
+    title: {
+      fontFamily: undefined,
+      fontSize: 20,
+      lineHeight: 28,
+      fontWeight: 600,
+      letterSpacing: 0,
+    },
+    bodyLg: {
+      fontFamily: undefined,
+      fontSize: 18,
+      lineHeight: 28,
+      fontWeight: 400,
+      letterSpacing: 0,
+    },
+    body: {
+      fontFamily: undefined,
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: 400,
+      letterSpacing: 0,
+    },
+    bodySm: {
+      fontFamily: undefined,
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: 400,
+      letterSpacing: 0,
+    },
+    label: {
+      fontFamily: undefined,
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: 500,
+      letterSpacing: 0.1,
+    },
+    caption: {
+      fontFamily: undefined,
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: 400,
+      letterSpacing: 0.2,
+    },
+  },
+  color: {
+    brand: {
+      default: '#2563eb',
+      hover: '#1d4ed8',
+      pressed: '#1e40af',
+      subtle: '#eff6ff',
+      onDefault: '#ffffff',
+      onSubtle: '#1d4ed8',
+    },
+    accent: {
+      default: '#2563eb',
+      hover: '#1d4ed8',
+      pressed: '#1e40af',
+      subtle: '#eff6ff',
+      onDefault: '#ffffff',
+      onSubtle: '#1d4ed8',
+    },
+    success: {
+      default: '#16a34a',
+      subtle: '#f0fdf4',
+      border: '#bbf7d0',
+      onDefault: '#ffffff',
+      onSubtle: '#166534',
+    },
+    warning: {
+      default: '#f59e0b',
+      subtle: '#fffbeb',
+      border: '#fde68a',
+      onDefault: '#0f172a',
+      onSubtle: '#92400e',
+    },
+    danger: {
+      default: '#dc2626',
+      subtle: '#fef2f2',
+      border: '#fecaca',
+      onDefault: '#ffffff',
+      onSubtle: '#991b1b',
+    },
+    info: {
+      default: '#0284c7',
+      subtle: '#f0f9ff',
+      border: '#bae6fd',
+      onDefault: '#ffffff',
+      onSubtle: '#075985',
+    },
+    text: {
+      primary: '#0f172a',
+      secondary: '#475569',
+      tertiary: '#64748b',
+      disabled: '#94a3b8',
+      inverse: '#ffffff',
+      link: '#2563eb',
+    },
+    surface: {
+      default: '#ffffff',
+      raised: '#ffffff',
+      sunken: '#f8fafc',
+      overlay: 'rgba(15, 23, 42, 0.5)',
+      inverse: '#0f172a',
+    },
+    border: {
+      default: '#e2e8f0',
+      strong: '#cbd5e1',
+      focus: '#2563eb',
+      disabled: '#f1f5f9',
+    },
+  },
+  elevation: {
+    0: '0px 0px 0px 0px rgba(0, 0, 0, 0)',
+    1: '0px 1px 2px 0px rgba(15, 23, 42, 0.08), 0px 1px 3px 0px rgba(15, 23, 42, 0.06)',
+    2: '0px 4px 8px -2px rgba(15, 23, 42, 0.12), 0px 2px 4px -1px rgba(15, 23, 42, 0.08)',
+    3: '0px 12px 24px -4px rgba(15, 23, 42, 0.18), 0px 4px 8px -2px rgba(15, 23, 42, 0.1)',
+  },
+};
+
+export const neutralDark: ResolvedTheme = {
+  space: {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    8: 32,
+    10: 40,
+    12: 48,
+  },
+  radius: {
+    xs: 2,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+  },
+  size: {
+    icon: {
+      sm: 16,
+      md: 20,
+      lg: 24,
+    },
+    control: {
+      sm: 32,
+      md: 36,
+      lg: 40,
+    },
+    touchTarget: 44,
+  },
+  breakpoint: {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+  },
+  typography: {
+    fontFamily: {
+      sans: undefined,
+    },
+    maxFontSizeMultiplier: 1.3,
+    display: {
+      fontFamily: undefined,
+      fontSize: 40,
+      lineHeight: 48,
+      fontWeight: 700,
+      letterSpacing: -0.5,
+    },
+    h1: {
+      fontFamily: undefined,
+      fontSize: 32,
+      lineHeight: 40,
+      fontWeight: 700,
+      letterSpacing: -0.25,
+    },
+    h2: {
+      fontFamily: undefined,
+      fontSize: 28,
+      lineHeight: 36,
+      fontWeight: 600,
+      letterSpacing: 0,
+    },
+    h3: {
+      fontFamily: undefined,
+      fontSize: 24,
+      lineHeight: 32,
+      fontWeight: 600,
+      letterSpacing: 0,
+    },
+    title: {
+      fontFamily: undefined,
+      fontSize: 20,
+      lineHeight: 28,
+      fontWeight: 600,
+      letterSpacing: 0,
+    },
+    bodyLg: {
+      fontFamily: undefined,
+      fontSize: 18,
+      lineHeight: 28,
+      fontWeight: 400,
+      letterSpacing: 0,
+    },
+    body: {
+      fontFamily: undefined,
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: 400,
+      letterSpacing: 0,
+    },
+    bodySm: {
+      fontFamily: undefined,
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: 400,
+      letterSpacing: 0,
+    },
+    label: {
+      fontFamily: undefined,
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: 500,
+      letterSpacing: 0.1,
+    },
+    caption: {
+      fontFamily: undefined,
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: 400,
+      letterSpacing: 0.2,
+    },
+  },
+  color: {
+    brand: {
+      default: '#3b82f6',
+      hover: '#60a5fa',
+      pressed: '#93c5fd',
+      subtle: 'rgba(59, 130, 246, 0.16)',
+      onDefault: '#ffffff',
+      onSubtle: '#bfdbfe',
+    },
+    accent: {
+      default: '#3b82f6',
+      hover: '#60a5fa',
+      pressed: '#93c5fd',
+      subtle: 'rgba(59, 130, 246, 0.16)',
+      onDefault: '#ffffff',
+      onSubtle: '#bfdbfe',
+    },
+    success: {
+      default: '#22c55e',
+      subtle: 'rgba(34, 197, 94, 0.16)',
+      border: '#166534',
+      onDefault: '#020617',
+      onSubtle: '#86efac',
+    },
+    warning: {
+      default: '#fbbf24',
+      subtle: 'rgba(251, 191, 36, 0.16)',
+      border: '#92400e',
+      onDefault: '#020617',
+      onSubtle: '#fcd34d',
+    },
+    danger: {
+      default: '#ef4444',
+      subtle: 'rgba(239, 68, 68, 0.16)',
+      border: '#991b1b',
+      onDefault: '#ffffff',
+      onSubtle: '#fca5a5',
+    },
+    info: {
+      default: '#0ea5e9',
+      subtle: 'rgba(14, 165, 233, 0.16)',
+      border: '#075985',
+      onDefault: '#020617',
+      onSubtle: '#7dd3fc',
+    },
+    text: {
+      primary: '#f8fafc',
+      secondary: '#cbd5e1',
+      tertiary: '#94a3b8',
+      disabled: '#475569',
+      inverse: '#0f172a',
+      link: '#60a5fa',
+    },
+    surface: {
+      default: '#020617',
+      raised: '#0f172a',
+      sunken: '#000000',
+      overlay: 'rgba(0, 0, 0, 0.6)',
+      inverse: '#f8fafc',
+    },
+    border: {
+      default: '#1e293b',
+      strong: '#334155',
+      focus: '#60a5fa',
+      disabled: '#0f172a',
+    },
+  },
+  elevation: {
+    0: '0px 0px 0px 0px rgba(0, 0, 0, 0)',
+    1: '0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3)',
+    2: '0px 4px 8px -2px rgba(0, 0, 0, 0.5), 0px 2px 4px -1px rgba(0, 0, 0, 0.4)',
+    3: '0px 12px 24px -4px rgba(0, 0, 0, 0.6), 0px 4px 8px -2px rgba(0, 0, 0, 0.45)',
+  },
+};

package/src/theme/generated/types.ts

@@ -0,0 +1,190 @@
+// Generated by tools/tokens/build.mjs from tokens/. Do not edit by hand.
+export type ResolvedTheme = {
+  space: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    8: number;
+    10: number;
+    12: number;
+  };
+  radius: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+  };
+  size: {
+    icon: {
+      sm: number;
+      md: number;
+      lg: number;
+    };
+    control: {
+      sm: number;
+      md: number;
+      lg: number;
+    };
+    touchTarget: number;
+  };
+  breakpoint: {
+    sm: number;
+    md: number;
+    lg: number;
+  };
+  typography: {
+    fontFamily: {
+      sans: string | undefined;
+    };
+    maxFontSizeMultiplier: number;
+    display: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    h1: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    h2: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    h3: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    title: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    bodyLg: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    body: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    bodySm: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    label: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+    caption: {
+      fontFamily: string | undefined;
+      fontSize: number;
+      lineHeight: number;
+      fontWeight: number;
+      letterSpacing: number;
+    };
+  };
+  color: {
+    brand: {
+      default: string;
+      hover: string;
+      pressed: string;
+      subtle: string;
+      onDefault: string;
+      onSubtle: string;
+    };
+    accent: {
+      default: string;
+      hover: string;
+      pressed: string;
+      subtle: string;
+      onDefault: string;
+      onSubtle: string;
+    };
+    success: {
+      default: string;
+      subtle: string;
+      border: string;
+      onDefault: string;
+      onSubtle: string;
+    };
+    warning: {
+      default: string;
+      subtle: string;
+      border: string;
+      onDefault: string;
+      onSubtle: string;
+    };
+    danger: {
+      default: string;
+      subtle: string;
+      border: string;
+      onDefault: string;
+      onSubtle: string;
+    };
+    info: {
+      default: string;
+      subtle: string;
+      border: string;
+      onDefault: string;
+      onSubtle: string;
+    };
+    text: {
+      primary: string;
+      secondary: string;
+      tertiary: string;
+      disabled: string;
+      inverse: string;
+      link: string;
+    };
+    surface: {
+      default: string;
+      raised: string;
+      sunken: string;
+      overlay: string;
+      inverse: string;
+    };
+    border: {
+      default: string;
+      strong: string;
+      focus: string;
+      disabled: string;
+    };
+  };
+  elevation: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+  };
+};

package/src/theme/index.ts

@@ -0,0 +1,22 @@
+export { createTheme, neutralTheme } from './createTheme';
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { getThemeValue, useTheme } from './useTheme';
+export { useStyles } from './useStyles';
+export { neutralDark, neutralLight } from './generated/neutral';
+export type {
+  BrandColorFamily,
+  ColorFamilyKey,
+  ColorOverrides,
+  ColorScheme,
+  ResolvedTheme,
+  SchemePreference,
+  StatusColorFamily,
+  Theme,
+  ThemeExtensions,
+  ThemeInput,
+  ThemeOverrides,
+  ThemeScheme,
+  ThemeValue,
+  TypographyRole,
+} from './types';

package/src/theme/merge.ts

@@ -0,0 +1,17 @@
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+/**
+ * Returns a new object with `override` applied on top of `base`; nested plain
+ * objects merge, everything else is replaced. Neither argument is mutated.
+ */
+export function deepMerge<T>(base: T, override: unknown): T {
+  if (!isPlainObject(base) || !isPlainObject(override)) {
+    return (override === undefined ? base : override) as T;
+  }
+  const out: Record<string, unknown> = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    out[key] = key in base ? deepMerge(base[key], value) : value;
+  }
+  return out as T;
+}

package/src/theme/types.ts

@@ -0,0 +1,62 @@
+import type { ResolvedTheme } from './generated/types';
+
+export type { ResolvedTheme };
+
+export type ColorScheme = 'light' | 'dark';
+export type SchemePreference = ColorScheme | 'system';
+
+/** brand / accent: default, hover, pressed, subtle, onDefault, onSubtle */
+export type BrandColorFamily = ResolvedTheme['color']['brand'];
+/** success / warning / danger / info: default, subtle, border, onDefault, onSubtle */
+export type StatusColorFamily = ResolvedTheme['color']['success'];
+export type TypographyRole = ResolvedTheme['typography']['body'];
+
+export type BrandFamilyKey = 'brand' | 'accent';
+export type StatusFamilyKey = 'success' | 'warning' | 'danger' | 'info';
+export type ColorFamilyKey = BrandFamilyKey | StatusFamilyKey;
+
+/**
+ * Apps add their own token groups here through module augmentation:
+ *   declare module '@estuary-solutions/rn-core-ui' { interface ThemeExtensions { chart: { grid: string } } }
+ */
+export interface ThemeExtensions {}
+
+export type ThemeScheme = ResolvedTheme & ThemeExtensions;
+
+/** Output of createTheme: both schemes fully resolved, nothing left to compute at render time. */
+export interface Theme {
+  readonly name: string;
+  readonly light: ThemeScheme;
+  readonly dark: ThemeScheme;
+}
+
+/** What useTheme() returns: the active scheme plus which one it is. */
+export type ThemeValue = ThemeScheme & {
+  readonly name: string;
+  readonly scheme: ColorScheme;
+};
+
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+/** A colour family may be a single hex (the rest is derived) or explicit keys that win over derivation. */
+export type ColorOverrides = {
+  [K in keyof ResolvedTheme['color']]?: K extends ColorFamilyKey
+    ? string | Partial<ResolvedTheme['color'][K]>
+    : Partial<ResolvedTheme['color'][K]>;
+};
+
+/** Everything a theme may change. `space` is deliberately absent (ADR-0001 decision 2). */
+export type ThemeOverrides = DeepPartial<
+  Omit<ResolvedTheme, 'space' | 'color'>
+> & {
+  color?: ColorOverrides;
+} & Partial<ThemeExtensions>;
+
+export interface ThemeInput {
+  name: string;
+  light?: ThemeOverrides;
+  /** Omitted: the light overrides are re-applied onto the neutral dark scheme. */
+  dark?: ThemeOverrides;
+}

package/src/theme/useStyles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import type { ThemeValue } from './types';
+import { useTheme } from './useTheme';
+
+type StyleFactory<T> = (theme: ThemeValue) => T;
+
+const cache = new WeakMap<
+  StyleFactory<unknown>,
+  WeakMap<ThemeValue, unknown>
+>();
+
+/**
+ * Creates a StyleSheet from the active theme once per (factory, theme value).
+ * Define the factory at module scope; an inline arrow gets a new identity every
+ * render and defeats the cache.
+ */
+export function useStyles<
+  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<unknown>,
+>(factory: StyleFactory<T>): T {
+  const theme = useTheme();
+  let perTheme = cache.get(factory as StyleFactory<unknown>);
+  if (!perTheme) {
+    perTheme = new WeakMap();
+    cache.set(factory as StyleFactory<unknown>, perTheme);
+  }
+  let styles = perTheme.get(theme) as T | undefined;
+  if (!styles) {
+    styles = StyleSheet.create(factory(theme));
+    perTheme.set(theme, styles);
+  }
+  return styles;
+}