react-native-terra-ui 0.1.0

package/src/theme/tokens/light.ts

@@ -0,0 +1,123 @@
+/**
+ * Light-scheme color tokens — flat, dotted-key data (no imports, no types).
+ *
+ * Convention: [category].[context].[property?].[variant].[state]
+ *   - property is omitted when the context implies it (surface → bg, text → fg, border → border-color)
+ *   - property is required when a context carries multiple attributes (action, status)
+ *
+ * Values use {palette.key} reference notation, resolved against primitives at
+ * build time via resolveRefs() in theme.ts. Raw hex is used only where no
+ * palette step matches exactly.
+ *
+ * GENERATED-STYLE SOURCE: intended to be replaced by the Figma / design-sync export.
+ */
+export const light = {
+  // ── color: page background ────────────────────────────────────────────────
+  'color.background': '#f9f9fb',
+
+  // ── color: surfaces  (bg implied — no property segment) ──────────────────
+  'color.surface.default': '{palette.white}',
+  'color.surface.raised': '{palette.white}',
+  'color.surface.sunken': '#ececee',
+  'color.surface.overlay': 'rgba(9, 9, 11, 0.48)',
+  'color.surface.accent': '{palette.emerald.600}',
+  'color.surface.accent.subtle': '{palette.emerald.100}',
+
+  // ── color: text / icons  (fg implied — no property segment) ──────────────
+  'color.text.default': '{palette.neutral.950}',
+  'color.text.muted': '#4b5060',
+  'color.text.subtle': '#6b7280',
+  'color.text.disabled': '#9ca3af',
+  'color.text.inverse': '{palette.white}',
+  'color.text.link': '{palette.blue.600}',
+  'color.text.accent': '{palette.emerald.600}',
+  'color.text.on-accent': '{palette.white}',
+  'color.text.on-accent-subtle': '{palette.emerald.700}',
+
+  // ── color: borders  (border-color implied — no property segment) ──────────
+  'color.border.subtle': '#ebebed',
+  'color.border.default': '{palette.neutral.200}',
+  'color.border.strong': '#d1d5db',
+  'color.border.focus': '{palette.blue.500}',
+  'color.border.accent': '{palette.emerald.600}',
+
+  // ── color: interactive actions  (bg + fg → property required) ────────────
+  'color.action.bg.primary': '{palette.emerald.600}',
+  'color.action.bg.primary.hover': '{palette.emerald.700}',
+  'color.action.bg.primary.active': '{palette.emerald.800}',
+  'color.action.bg.primary.disabled': '{palette.slate.200}',
+  'color.action.fg.primary': '{palette.white}',
+
+  'color.action.bg.subtle': '{palette.emerald.100}',
+  'color.action.bg.subtle.hover': '{palette.emerald.200}',
+  'color.action.bg.subtle.active': '{palette.emerald.300}',
+  'color.action.bg.subtle.disabled': '{palette.slate.100}',
+  'color.action.fg.subtle': '{palette.emerald.700}',
+
+  'color.action.bg.neutral': 'transparent',
+  'color.action.bg.neutral.hover': '{palette.slate.100}',
+  'color.action.bg.neutral.active': '{palette.slate.200}',
+  'color.action.bg.neutral.disabled': 'transparent',
+  'color.action.fg.neutral': '{palette.slate.700}',
+
+  // ── color: status  (bg + fg + border → property required) ────────────────
+  'color.status.bg.success': '{palette.green.600}',
+  'color.status.bg.success.subtle': '{palette.green.100}',
+  'color.status.border.success': '{palette.green.300}',
+  'color.status.border.success.subtle': '{palette.green.200}',
+  'color.status.fg.success': '{palette.white}',
+  'color.status.fg.success.subtle': '{palette.green.800}',
+
+  'color.status.bg.warning': '{palette.amber.500}',
+  'color.status.bg.warning.subtle': '{palette.amber.100}',
+  'color.status.border.warning': '{palette.amber.300}',
+  'color.status.border.warning.subtle': '{palette.amber.200}',
+  'color.status.fg.warning': '{palette.slate.950}',
+  'color.status.fg.warning.subtle': '{palette.amber.800}',
+
+  'color.status.bg.danger': '{palette.red.600}',
+  'color.status.bg.danger.subtle': '{palette.red.100}',
+  'color.status.border.danger': '{palette.red.300}',
+  'color.status.border.danger.subtle': '{palette.red.200}',
+  'color.status.fg.danger': '{palette.white}',
+  'color.status.fg.danger.subtle': '{palette.red.800}',
+
+  'color.status.bg.info': '{palette.sky.600}',
+  'color.status.bg.info.subtle': '{palette.sky.100}',
+  'color.status.border.info': '{palette.sky.300}',
+  'color.status.border.info.subtle': '{palette.sky.200}',
+  'color.status.fg.info': '{palette.white}',
+  'color.status.fg.info.subtle': '{palette.sky.800}',
+
+  // ── 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.1,
+  'elevation.sm.shadowRadius': 3,
+  'elevation.sm.shadowOffset.width': 0,
+  'elevation.sm.shadowOffset.height': 1,
+  'elevation.sm.elevation': 1,
+  'elevation.md.shadowColor': '#000000',
+  'elevation.md.shadowOpacity': 0.12,
+  'elevation.md.shadowRadius': 8,
+  'elevation.md.shadowOffset.width': 0,
+  'elevation.md.shadowOffset.height': 2,
+  'elevation.md.elevation': 3,
+  'elevation.lg.shadowColor': '#000000',
+  'elevation.lg.shadowOpacity': 0.12,
+  '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.16,
+  'elevation.xl.shadowRadius': 24,
+  'elevation.xl.shadowOffset.width': 0,
+  'elevation.xl.shadowOffset.height': 8,
+  'elevation.xl.elevation': 12,
+};

package/src/theme/tokens/primitives.ts

@@ -0,0 +1,232 @@
+/**
+ * Scheme-agnostic primitive tokens — flat, dotted-key data.
+ *
+ * GENERATED-STYLE SOURCE: this file is plain data (no imports, no types).
+ * It is intended to be replaced by the Figma design-system export. Keys use a
+ * fully-flat `a.b.c` path; the runtime theme is rebuilt from these via
+ * `unflatten()` in `theme.ts`. Scalar leaves only.
+ *
+ * `palette.*` is kept for Figma parity / authoring reference; the runtime theme
+ * consumes already-resolved semantic colors (see `light.ts` / `dark.ts`) and
+ * does not read the palette directly.
+ */
+export const primitives = {
+  // ── palette (Tailwind-derived ramps) ──────────────────────────────────────
+  'palette.slate.50': '#f8fafc',
+  'palette.slate.100': '#f1f5f9',
+  'palette.slate.200': '#e2e8f0',
+  'palette.slate.300': '#cad5e2',
+  'palette.slate.400': '#90a1b9',
+  'palette.slate.500': '#62748e',
+  'palette.slate.600': '#45556c',
+  'palette.slate.700': '#314158',
+  'palette.slate.800': '#1d293d',
+  'palette.slate.900': '#0f172b',
+  'palette.slate.950': '#020618',
+  'palette.emerald.50': '#ecfdf5',
+  'palette.emerald.100': '#d0fae5',
+  'palette.emerald.200': '#a4f4cf',
+  'palette.emerald.300': '#5ee9b5',
+  'palette.emerald.400': '#00d492',
+  'palette.emerald.500': '#00bc7d',
+  'palette.emerald.600': '#009966',
+  'palette.emerald.700': '#007a55',
+  'palette.emerald.800': '#006045',
+  'palette.emerald.900': '#004f3b',
+  'palette.emerald.950': '#002c22',
+  'palette.red.50': '#fef2f2',
+  'palette.red.100': '#ffe2e2',
+  'palette.red.200': '#ffc9c9',
+  'palette.red.300': '#ffa2a2',
+  'palette.red.400': '#ff6467',
+  'palette.red.500': '#fb2c36',
+  'palette.red.600': '#e7000b',
+  'palette.red.700': '#c10007',
+  'palette.red.800': '#9f0712',
+  'palette.red.900': '#82181a',
+  'palette.red.950': '#460809',
+  'palette.amber.50': '#fffbeb',
+  'palette.amber.100': '#fef3c6',
+  'palette.amber.200': '#fee685',
+  'palette.amber.300': '#ffd230',
+  'palette.amber.400': '#ffb900',
+  'palette.amber.500': '#fe9a00',
+  'palette.amber.600': '#e17100',
+  'palette.amber.700': '#bb4d00',
+  'palette.amber.800': '#973c00',
+  'palette.amber.900': '#7b3306',
+  'palette.amber.950': '#461901',
+  'palette.green.50': '#f0fdf4',
+  'palette.green.100': '#dcfce7',
+  'palette.green.200': '#b9f8cf',
+  'palette.green.300': '#7bf1a8',
+  'palette.green.400': '#05df72',
+  'palette.green.500': '#00c950',
+  'palette.green.600': '#00a63e',
+  'palette.green.700': '#008236',
+  'palette.green.800': '#016630',
+  'palette.green.900': '#0d542b',
+  'palette.green.950': '#032e15',
+  'palette.blue.50': '#eff6ff',
+  'palette.blue.100': '#dbeafe',
+  'palette.blue.200': '#bedbff',
+  'palette.blue.300': '#8ec5ff',
+  'palette.blue.400': '#51a2ff',
+  'palette.blue.500': '#2b7fff',
+  'palette.blue.600': '#155dfc',
+  'palette.blue.700': '#1447e6',
+  'palette.blue.800': '#193cb8',
+  'palette.blue.900': '#1c398e',
+  'palette.blue.950': '#162456',
+  'palette.sky.50': '#f0f9ff',
+  'palette.sky.100': '#dff2fe',
+  'palette.sky.200': '#b8e6fe',
+  'palette.sky.300': '#74d4ff',
+  'palette.sky.400': '#00bcff',
+  'palette.sky.500': '#00a6f4',
+  'palette.sky.600': '#0084d1',
+  'palette.sky.700': '#0069a8',
+  'palette.sky.800': '#00598a',
+  'palette.sky.900': '#024a70',
+  'palette.sky.950': '#052f4a',
+  'palette.black': '#000000',
+  'palette.white': '#ffffff',
+  'palette.neutral.50': '#fafafa',
+  'palette.neutral.100': '#f4f4f5',
+  'palette.neutral.200': '#e4e4e7',
+  'palette.neutral.300': '#d4d4d8',
+  'palette.neutral.400': '#a1a1aa',
+  'palette.neutral.500': '#71717a',
+  'palette.neutral.600': '#52525b',
+  'palette.neutral.700': '#3f3f46',
+  'palette.neutral.800': '#27272a',
+  'palette.neutral.900': '#18181b',
+  'palette.neutral.950': '#09090b',
+
+  // ── spacing scale (dp, 4dp base unit) ─────────────────────────────────────
+  'spacing.0': 0,
+  'spacing.1': 4,
+  'spacing.2': 8,
+  'spacing.3': 12,
+  'spacing.4': 16,
+  'spacing.5': 20,
+  'spacing.6': 24,
+  'spacing.7': 28,
+  'spacing.8': 32,
+  'spacing.9': 36,
+  'spacing.10': 40,
+  'spacing.12': 48,
+  'spacing.14': 56,
+  'spacing.16': 64,
+  'spacing.20': 80,
+  'spacing.24': 96,
+  'spacing.32': 128,
+
+  // ── border-radius base (dp) ───────────────────────────────────────────────
+  // Only the BASE (the `lg`/×1 step) is authored here. The full radius scale is
+  // DERIVED from it via `buildRadiusScale()` in `../theme.ts`. Two ways to
+  // change it: edit this design-time token, or override at configure time with
+  // `configureTerraUI({ shared: { radius: { base } } })`.
+  'radius.base': 8,
+
+  // ── typography: weight-token → font family (System default) ───────────────
+  'typography.fonts.regular': 'System',
+  'typography.fonts.medium': 'System',
+  'typography.fonts.semibold': 'System',
+  'typography.fonts.bold': 'System',
+
+  // ── typography: role variants ─────────────────────────────────────────────
+  'typography.variants.display-lg.fontSize': 40,
+  'typography.variants.display-lg.lineHeight': 48,
+  'typography.variants.display-lg.fontWeight': 'bold',
+  'typography.variants.display-lg.letterSpacing': -1,
+  'typography.variants.display-lg.maxFontSizeMultiplier': 1.2,
+  'typography.variants.display-md.fontSize': 36,
+  'typography.variants.display-md.lineHeight': 44,
+  'typography.variants.display-md.fontWeight': 'bold',
+  'typography.variants.display-md.letterSpacing': -0.8,
+  'typography.variants.display-md.maxFontSizeMultiplier': 1.2,
+  'typography.variants.display-sm.fontSize': 32,
+  'typography.variants.display-sm.lineHeight': 40,
+  'typography.variants.display-sm.fontWeight': 'bold',
+  'typography.variants.display-sm.letterSpacing': -0.5,
+  'typography.variants.display-sm.maxFontSizeMultiplier': 1.2,
+  'typography.variants.headline-lg.fontSize': 28,
+  'typography.variants.headline-lg.lineHeight': 36,
+  'typography.variants.headline-lg.fontWeight': 'semibold',
+  'typography.variants.headline-lg.letterSpacing': -0.3,
+  'typography.variants.headline-lg.maxFontSizeMultiplier': 1.3,
+  'typography.variants.headline-md.fontSize': 24,
+  'typography.variants.headline-md.lineHeight': 32,
+  'typography.variants.headline-md.fontWeight': 'semibold',
+  'typography.variants.headline-md.letterSpacing': -0.2,
+  'typography.variants.headline-md.maxFontSizeMultiplier': 1.3,
+  'typography.variants.headline-sm.fontSize': 22,
+  'typography.variants.headline-sm.lineHeight': 28,
+  'typography.variants.headline-sm.fontWeight': 'semibold',
+  'typography.variants.headline-sm.letterSpacing': -0.1,
+  'typography.variants.headline-sm.maxFontSizeMultiplier': 1.3,
+  'typography.variants.title-lg.fontSize': 20,
+  'typography.variants.title-lg.lineHeight': 28,
+  'typography.variants.title-lg.fontWeight': 'semibold',
+  'typography.variants.title-lg.letterSpacing': 0,
+  'typography.variants.title-lg.maxFontSizeMultiplier': 1.4,
+  'typography.variants.title-md.fontSize': 18,
+  'typography.variants.title-md.lineHeight': 24,
+  'typography.variants.title-md.fontWeight': 'semibold',
+  'typography.variants.title-md.letterSpacing': 0,
+  'typography.variants.title-md.maxFontSizeMultiplier': 1.4,
+  'typography.variants.title-sm.fontSize': 16,
+  'typography.variants.title-sm.lineHeight': 22,
+  'typography.variants.title-sm.fontWeight': 'semibold',
+  'typography.variants.title-sm.letterSpacing': 0,
+  'typography.variants.title-sm.maxFontSizeMultiplier': 1.4,
+  'typography.variants.body-lg.fontSize': 17,
+  'typography.variants.body-lg.lineHeight': 26,
+  'typography.variants.body-lg.fontWeight': 'regular',
+  'typography.variants.body-lg.letterSpacing': 0,
+  'typography.variants.body-lg.maxFontSizeMultiplier': 1.8,
+  'typography.variants.body-md.fontSize': 16,
+  'typography.variants.body-md.lineHeight': 24,
+  'typography.variants.body-md.fontWeight': 'regular',
+  'typography.variants.body-md.letterSpacing': 0,
+  'typography.variants.body-md.maxFontSizeMultiplier': 1.8,
+  'typography.variants.body-sm.fontSize': 14,
+  'typography.variants.body-sm.lineHeight': 20,
+  'typography.variants.body-sm.fontWeight': 'regular',
+  'typography.variants.body-sm.letterSpacing': 0,
+  'typography.variants.body-sm.maxFontSizeMultiplier': 1.8,
+  'typography.variants.label-lg.fontSize': 15,
+  'typography.variants.label-lg.lineHeight': 20,
+  'typography.variants.label-lg.fontWeight': 'medium',
+  'typography.variants.label-lg.letterSpacing': 0.1,
+  'typography.variants.label-lg.maxFontSizeMultiplier': 1.5,
+  'typography.variants.label-md.fontSize': 14,
+  'typography.variants.label-md.lineHeight': 18,
+  'typography.variants.label-md.fontWeight': 'medium',
+  'typography.variants.label-md.letterSpacing': 0.1,
+  'typography.variants.label-md.maxFontSizeMultiplier': 1.5,
+  'typography.variants.label-sm.fontSize': 12,
+  'typography.variants.label-sm.lineHeight': 16,
+  'typography.variants.label-sm.fontWeight': 'medium',
+  'typography.variants.label-sm.letterSpacing': 0.2,
+  'typography.variants.label-sm.maxFontSizeMultiplier': 1.5,
+  'typography.variants.caption.fontSize': 12,
+  'typography.variants.caption.lineHeight': 16,
+  'typography.variants.caption.fontWeight': 'regular',
+  'typography.variants.caption.letterSpacing': 0.2,
+  'typography.variants.caption.maxFontSizeMultiplier': 1.4,
+
+  // ── state-layer opacities ─────────────────────────────────────────────────
+  'opacity.disabled': 0.45,
+  'opacity.pressed': 0.85,
+
+  // ── screen-level layout ───────────────────────────────────────────────────
+  'layout.screen.margin.x': 16,
+  'layout.screen.margin.y': 0,
+
+  // ── header layout ─────────────────────────────────────────────────────────
+  // Header bar height (compact nav bar / collapsed large-title bar). 56dp aligns
+  // to the 4dp spacing grid (= spacing.14) and a standard app-bar height.
+  'layout.header.height': 56,
+};