glassdate-rn 0.1.0

package/src/logic/mono.ts

@@ -0,0 +1,126 @@
+import type { GlassDateTokens } from '../types/tokens.types';
+
+export const MONO_DEFAULT_ACCENT = '#4FC3F7';
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const h = hex.replace('#', '');
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16),
+  };
+}
+
+function rgbToHex8(r: number, g: number, b: number, a: number): string {
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
+  return (
+    '#' +
+    [r, g, b, a]
+      .map((v) => clamp(v).toString(16).padStart(2, '0'))
+      .join('')
+  );
+}
+
+function withAlpha(hex: string, opacity: number): string {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHex8(r, g, b, Math.round(opacity * 255));
+}
+
+function relativeLuminance(hex: string): number {
+  const { r, g, b } = hexToRgb(hex);
+  const linearise = (c: number) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * linearise(r) + 0.7152 * linearise(g) + 0.0722 * linearise(b);
+}
+
+export function computeMonoTokens(accent: string): GlassDateTokens {
+  const lum = relativeLuminance(accent);
+  const useDarkText = lum > 0.179;
+  const textOnSurface = useDarkText ? '#1A1A2E' : '#F5F5FF';
+  const textOnAccent = useDarkText ? '#1A1A2E' : '#FFFFFF';
+  const popupBg = useDarkText ? '#FAFAFA' : '#1A1A28';
+  const popupText = useDarkText ? '#1A1A2E' : '#F5F5FF';
+
+  return {
+    scene: { backgroundColour: withAlpha(accent, 0.13) },
+    container: {
+      backgroundColour: withAlpha(accent, 0.06),
+      borderColour: withAlpha(accent, 0.22),
+      borderWidth: 1,
+      cornerRadius: 18,
+      shadowColour: accent,
+      shadowOffsetX: 0,
+      shadowOffsetY: 6,
+      shadowBlurRadius: 24,
+      shadowOpacity: 0.15,
+      blurRadius: 0,
+    },
+    pill: {
+      backgroundColour: withAlpha(accent, 0.1),
+      borderColour: withAlpha(accent, 0.25),
+      borderWidth: 1,
+      cornerRadius: 10,
+      textColour: accent,
+      fontWeight: 500,
+      hoverBackgroundColour: withAlpha(accent, 0.18),
+      todayBackgroundColour: accent,
+      todayBorderColour: accent,
+      todayTextColour: textOnAccent,
+    },
+    popup: {
+      backgroundColour: popupBg,
+      borderColour: withAlpha(accent, 0.2),
+      borderWidth: 1,
+      cornerRadius: 14,
+      itemTextColour: popupText,
+      itemFontWeight: 500,
+      itemHoverBackgroundColour: withAlpha(accent, 0.08),
+      itemActiveBackgroundColour: accent,
+      itemActiveTextColour: textOnAccent,
+      itemSelectedBackgroundColour: withAlpha(accent, 0.18),
+      itemSelectedTextColour: accent,
+      itemDisabledOpacity: 0.22,
+    },
+    nav: {
+      backgroundColour: withAlpha(accent, 0.1),
+      borderColour: withAlpha(accent, 0.22),
+      borderWidth: 1,
+      cornerRadius: 8,
+      arrowColour: accent,
+      hoverBackgroundColour: withAlpha(accent, 0.18),
+      disabledOpacity: 0.22,
+    },
+    grid: {
+      weekdayLabelColour: withAlpha(accent, 0.45),
+      weekdayFontWeight: 600,
+      dayTextColour: textOnSurface,
+      dayFontWeight: 400,
+      dayHoverBackgroundColour: withAlpha(accent, 0.08),
+      daySelectedBackgroundColour: accent,
+      daySelectedTextColour: textOnAccent,
+      dayTodayFontWeight: 700,
+      dayTodayDotColour: accent,
+      dayOutOfRangeOpacity: 0.18,
+      dayAdjacentMonthOpacity: 0.18,
+    },
+    footer: {
+      cancelBackgroundColour: withAlpha(accent, 0.07),
+      cancelBorderColour: withAlpha(accent, 0.18),
+      cancelBorderWidth: 1,
+      cancelTextColour: withAlpha(accent, 0.6),
+      cancelCornerRadius: 12,
+      cancelHoverBackgroundColour: withAlpha(accent, 0.14),
+      confirmBackgroundColour: accent,
+      confirmBorderColour: withAlpha(accent, 0.5),
+      confirmBorderWidth: 1,
+      confirmTextColour: textOnAccent,
+      confirmCornerRadius: 12,
+      confirmHoverBackgroundColour: withAlpha(accent, 0.87),
+      disabledOpacity: 0.38,
+      selectedDateTextColour: textOnSurface,
+    },
+    meta: { name: 'mono', mode: 'single', defaultAccent: accent },
+  };
+}

package/src/logic/theme.ts

@@ -0,0 +1,141 @@
+import type { GlassDateTokens, ThemeKey, DeepPartial, DayShape } from '../types/tokens.types';
+import { validateHexColour } from '../utils/colourUtils';
+import { computeMonoTokens, MONO_DEFAULT_ACCENT } from './mono';
+
+import defaultDark from '../../../tokens/themes/default.dark.json';
+import defaultLight from '../../../tokens/themes/default.light.json';
+import iosLiquidDark from '../../../tokens/themes/ios-liquid.dark.json';
+import iosLiquidLight from '../../../tokens/themes/ios-liquid.light.json';
+import material3Dark from '../../../tokens/themes/material3.dark.json';
+import material3Light from '../../../tokens/themes/material3.light.json';
+import toon from '../../../tokens/themes/toon.json';
+import flat from '../../../tokens/themes/flat.json';
+import plain from '../../../tokens/themes/plain.json';
+
+type ColorScheme = 'dark' | 'light';
+
+const THEME_MAP: Record<string, GlassDateTokens> = {
+  'default.dark': defaultDark as unknown as GlassDateTokens,
+  'default.light': defaultLight as unknown as GlassDateTokens,
+  'ios-liquid.dark': iosLiquidDark as unknown as GlassDateTokens,
+  'ios-liquid.light': iosLiquidLight as unknown as GlassDateTokens,
+  'material3.dark': material3Dark as unknown as GlassDateTokens,
+  'material3.light': material3Light as unknown as GlassDateTokens,
+  'toon': toon as unknown as GlassDateTokens,
+  'flat': flat as unknown as GlassDateTokens,
+  'plain': plain as unknown as GlassDateTokens,
+};
+
+const SINGLE_MODE_THEMES: Set<ThemeKey> = new Set(['toon', 'flat', 'plain']);
+
+function deepMerge<T extends Record<string, unknown>>(base: T, override: Partial<Record<string, unknown>>): T {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const ov = override[key];
+    const bv = result[key as keyof T];
+    if (
+      ov !== undefined &&
+      ov !== null &&
+      typeof ov === 'object' &&
+      !Array.isArray(ov) &&
+      typeof bv === 'object' &&
+      bv !== null
+    ) {
+      (result as Record<string, unknown>)[key] = deepMerge(
+        bv as Record<string, unknown>,
+        ov as Record<string, unknown>,
+      );
+    } else if (ov !== undefined) {
+      (result as Record<string, unknown>)[key] = ov;
+    }
+  }
+  return result;
+}
+
+function replaceAccent(tokens: GlassDateTokens, resolvedAccent: string): GlassDateTokens {
+  const result = JSON.parse(JSON.stringify(tokens)) as GlassDateTokens;
+
+  const replace = (obj: Record<string, unknown>) => {
+    for (const key of Object.keys(obj)) {
+      const val = obj[key];
+      if (val === 'accent') {
+        obj[key] = resolvedAccent;
+      } else if (typeof val === 'object' && val !== null) {
+        replace(val as Record<string, unknown>);
+      }
+    }
+  };
+
+  replace(result as unknown as Record<string, unknown>);
+  return result;
+}
+
+export function mapDayShapeToRadius(dayShape: DayShape): number {
+  switch (dayShape) {
+    case 'circle':
+      return 9999;
+    case 'round-square':
+      return 14;
+    case 'subtle':
+      return 10;
+  }
+}
+
+export function resolveTokens(
+  theme: ThemeKey,
+  colorScheme: ColorScheme,
+  accent: string | undefined,
+  tokenOverrides: DeepPartial<GlassDateTokens> | undefined,
+): GlassDateTokens {
+  // Step 1 / 1a — Load base theme
+  let tokens: GlassDateTokens;
+
+  if (theme === 'mono') {
+    const resolvedAccent =
+      accent !== undefined && validateHexColour(accent) ? accent : MONO_DEFAULT_ACCENT;
+    tokens = computeMonoTokens(resolvedAccent);
+    // Mono outputs use accent directly — no "accent" keyword to replace.
+    // Jump to Step 4 (dayShape handled by caller) then Step 5.
+    if (tokenOverrides !== undefined) {
+      tokens = deepMerge(
+        tokens as unknown as Record<string, unknown>,
+        tokenOverrides as unknown as Partial<Record<string, unknown>>,
+      ) as unknown as GlassDateTokens;
+    }
+    return tokens;
+  }
+
+  if (SINGLE_MODE_THEMES.has(theme)) {
+    const loaded = THEME_MAP[theme];
+    if (!loaded) {
+      throw new Error(`Unknown theme: ${theme}`);
+    }
+    tokens = JSON.parse(JSON.stringify(loaded)) as GlassDateTokens;
+  } else {
+    const key = `${theme}.${colorScheme}`;
+    const loaded = THEME_MAP[key];
+    if (!loaded) {
+      throw new Error(`Unknown theme/colorScheme: ${key}`);
+    }
+    tokens = JSON.parse(JSON.stringify(loaded)) as GlassDateTokens;
+  }
+
+  // Step 2 — Resolve accent
+  const resolvedAccent =
+    accent !== undefined && validateHexColour(accent) ? accent : tokens.meta.defaultAccent;
+
+  // Step 3 — Substitute 'accent' keyword
+  tokens = replaceAccent(tokens, resolvedAccent);
+
+  // Step 4 — dayShape mapping handled by caller (mapDayShapeToRadius)
+
+  // Step 5 — Deep-merge partial token overrides
+  if (tokenOverrides !== undefined) {
+    tokens = deepMerge(
+      tokens as unknown as Record<string, unknown>,
+      tokenOverrides as unknown as Partial<Record<string, unknown>>,
+    ) as unknown as GlassDateTokens;
+  }
+
+  return tokens;
+}

package/src/types/tokens.types.ts

@@ -0,0 +1,117 @@
+/**
+ * GlassDateTokens — generated from packages/tokens/schema/tokens.schema.json
+ * Do not edit by hand.
+ */
+
+export type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;
+
+export interface SceneTokens {
+  backgroundColour: string;
+}
+
+export interface ContainerTokens {
+  backgroundColour: string;
+  borderColour: string;
+  borderWidth: number;
+  cornerRadius: number;
+  shadowColour: string;
+  shadowOffsetX: number;
+  shadowOffsetY: number;
+  shadowBlurRadius: number;
+  shadowOpacity: number;
+  blurRadius: number;
+}
+
+export interface PillTokens {
+  backgroundColour: string;
+  borderColour: string;
+  borderWidth: number;
+  cornerRadius: number;
+  textColour: string;
+  fontWeight: number;
+  hoverBackgroundColour: string;
+  todayBackgroundColour: string;
+  todayBorderColour: string;
+  todayTextColour: string;
+}
+
+export interface PopupTokens {
+  backgroundColour: string;
+  borderColour: string;
+  borderWidth: number;
+  cornerRadius: number;
+  itemTextColour: string;
+  itemFontWeight: number;
+  itemHoverBackgroundColour: string;
+  itemActiveBackgroundColour: string;
+  itemActiveTextColour: string;
+  itemSelectedBackgroundColour: string;
+  itemSelectedTextColour: string;
+  itemDisabledOpacity: number;
+}
+
+export interface NavTokens {
+  backgroundColour: string;
+  borderColour: string;
+  borderWidth: number;
+  cornerRadius: number;
+  arrowColour: string;
+  hoverBackgroundColour: string;
+  disabledOpacity: number;
+}
+
+export interface GridTokens {
+  weekdayLabelColour: string;
+  weekdayFontWeight: number;
+  dayTextColour: string;
+  dayFontWeight: number;
+  dayHoverBackgroundColour: string;
+  daySelectedBackgroundColour: string;
+  daySelectedTextColour: string;
+  dayTodayFontWeight: number;
+  dayTodayDotColour: string;
+  dayOutOfRangeOpacity: number;
+  dayAdjacentMonthOpacity: number;
+}
+
+export interface FooterTokens {
+  cancelBackgroundColour: string;
+  cancelBorderColour: string;
+  cancelBorderWidth: number;
+  cancelTextColour: string;
+  cancelCornerRadius: number;
+  cancelHoverBackgroundColour: string;
+  confirmBackgroundColour: string;
+  confirmBorderColour: string;
+  confirmBorderWidth: number;
+  confirmTextColour: string;
+  confirmCornerRadius: number;
+  confirmHoverBackgroundColour: string;
+  disabledOpacity: number;
+  selectedDateTextColour: string;
+}
+
+export interface MetaTokens {
+  name: string;
+  mode: 'dark' | 'light' | 'single';
+  defaultAccent: string;
+}
+
+export interface GlassDateTokens {
+  scene: SceneTokens;
+  container: ContainerTokens;
+  pill: PillTokens;
+  popup: PopupTokens;
+  nav: NavTokens;
+  grid: GridTokens;
+  footer: FooterTokens;
+  meta: MetaTokens;
+}
+
+export type ThemeKey = 'default' | 'ios-liquid' | 'material3' | 'toon' | 'flat' | 'plain' | 'mono';
+
+export type ConstraintPreset = 'none' | 'birthday' | 'adult' | 'future' | 'custom';
+
+export type DayShape = 'circle' | 'round-square' | 'subtle';
+
+export type OpenDropdown = 'none' | 'month' | 'year';

package/src/utils/colourUtils.ts

@@ -0,0 +1,32 @@
+const HEX6_REGEX = /^#[0-9A-Fa-f]{6}$/;
+const HEX8_REGEX = /^#[0-9A-Fa-f]{8}$/;
+
+export function validateHexColour(s: string): boolean {
+  return HEX6_REGEX.test(s) || HEX8_REGEX.test(s);
+}
+
+export function hexToRgba(s: string): { r: number; g: number; b: number; a: number } {
+  const h = s.replace('#', '');
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) : 255;
+  return { r, g, b, a };
+}
+
+function relativeLuminance(hex: string): number {
+  const { r, g, b } = hexToRgba(hex);
+  const linearise = (c: number) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * linearise(r) + 0.7152 * linearise(g) + 0.0722 * linearise(b);
+}
+
+export function contrastRatio(fg: string, bg: string): number {
+  const l1 = relativeLuminance(fg);
+  const l2 = relativeLuminance(bg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}