@advui/theme 0.1.0

package/src/fonts.ts

@@ -0,0 +1,89 @@
+import { createFont, isWeb } from 'tamagui'
+
+export const fontScales = {
+  compact: 0.9375,
+  default: 1,
+  large: 1.125,
+} as const
+
+export type FontScale = keyof typeof fontScales
+
+/** Type scale in px: `$1` xs(12) · `$2` sm(14) · `$3` base(16) · … · `$10` 6xl(60). */
+const baseSizes = {
+  1: 12,
+  2: 14,
+  3: 16,
+  4: 18,
+  5: 20,
+  6: 24,
+  7: 30,
+  8: 36,
+  9: 48,
+  10: 60,
+  true: 16,
+} as const
+
+type SizeKey = keyof typeof baseSizes
+
+const systemStack =
+  '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+const monoStack =
+  'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+
+function mapSizes(fn: (px: number) => number) {
+  return Object.fromEntries(Object.entries(baseSizes).map(([key, px]) => [key, fn(px)])) as Record<
+    SizeKey,
+    number
+  >
+}
+
+export interface FontFamilies {
+  /** CSS font stack on web. */
+  body?: string
+  heading?: string
+  mono?: string
+  /** Loaded font family names on iOS/Android (defaults to the platform system font). */
+  native?: { body?: string; heading?: string; mono?: string }
+}
+
+export function createUniversalFonts({
+  scale = 'default',
+  families = {},
+}: { scale?: FontScale | number; families?: FontFamilies } = {}) {
+  const factor = typeof scale === 'number' ? scale : fontScales[scale]
+  const size = mapSizes((px) => Math.round(px * factor))
+  const pick = (web: string, native: string | undefined, fallback: string) =>
+    isWeb ? web : (native ?? fallback)
+
+  const weight = { 1: '400', 4: '400', 5: '500', 6: '600', 7: '700', true: '400' } as const
+
+  const body = createFont({
+    family: pick(families.body ?? systemStack, families.native?.body, 'System'),
+    size,
+    lineHeight: mapSizes((px) => Math.round(px * factor * (px <= 20 ? 1.5 : 1.3))),
+    weight,
+    letterSpacing: { 1: 0, true: 0 },
+  })
+
+  const heading = createFont({
+    family: pick(
+      families.heading ?? families.body ?? systemStack,
+      families.native?.heading,
+      'System',
+    ),
+    size,
+    lineHeight: mapSizes((px) => Math.round(px * factor * (px <= 20 ? 1.4 : 1.2))),
+    weight: { ...weight, true: '600' },
+    letterSpacing: { 1: 0, 6: -0.3, 7: -0.5, 8: -0.7, 9: -1, 10: -1.2, true: 0 },
+  })
+
+  const mono = createFont({
+    family: pick(families.mono ?? monoStack, families.native?.mono, 'monospace'),
+    size: mapSizes((px) => Math.round(px * factor * 0.92)),
+    lineHeight: mapSizes((px) => Math.round(px * factor * 1.6)),
+    weight,
+    letterSpacing: { 1: 0, true: 0 },
+  })
+
+  return { body, heading, mono }
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+export { animations } from './animations'
+export { createUniversalConfig, type UniversalConfig, type UniversalConfigOptions } from './config'
+export { createUniversalFonts, fontScales, type FontFamilies, type FontScale } from './fonts'
+export { breakpoints, media, mediaQueryDefaultActive } from './media'
+export {
+  generateScale,
+  neutralScaleNames,
+  resolveScale,
+  scales,
+  type ColorScale,
+  type ColorSource,
+  type NeutralScaleName,
+  type ScaleName,
+  type ScaleSteps,
+} from './palettes'
+export { themePresetNames, themePresets, type ThemePreset, type ThemePresetName } from './presets'
+export { shadows, type ShadowName } from './shadows'
+export { shorthands } from './shorthands'
+export {
+  createThemeColors,
+  defaultThemeColors,
+  type ColorMode,
+  type GeneratedThemes,
+  type ThemeColorsInput,
+  type ThemeKey,
+  type ThemeValues,
+} from './themes'
+export {
+  colorTokens,
+  createRadius,
+  createUniversalTokens,
+  radiusScales,
+  size,
+  space,
+  zIndex,
+  type RadiusScale,
+} from './tokens'

package/src/media.ts

@@ -0,0 +1,55 @@
+import { isWeb } from 'tamagui'
+
+/** Mobile-first breakpoints (px). `xxl` is the "2xl" breakpoint. */
+export const breakpoints = {
+  xs: 460,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+} as const
+
+type MediaQuery = { [key: string]: string | number }
+
+const below = (px: number): MediaQuery => ({ maxWidth: px - (isWeb ? 0.02 : 1) })
+
+// Order matters: later keys win when several queries match.
+export const media = {
+  // always true on native (touch screens), pointer-based on web
+  touchable: (isWeb ? { pointer: 'coarse' } : { minWidth: 0 }) as MediaQuery,
+  // never true on native: hover-only UI must have a touch alternative
+  hoverable: (isWeb ? { hover: 'hover' } : { maxWidth: 0 }) as MediaQuery,
+
+  'max-xxl': below(breakpoints.xxl),
+  'max-xl': below(breakpoints.xl),
+  'max-lg': below(breakpoints.lg),
+  'max-md': below(breakpoints.md),
+  'max-sm': below(breakpoints.sm),
+  'max-xs': below(breakpoints.xs),
+
+  xs: { minWidth: breakpoints.xs },
+  sm: { minWidth: breakpoints.sm },
+  md: { minWidth: breakpoints.md },
+  lg: { minWidth: breakpoints.lg },
+  xl: { minWidth: breakpoints.xl },
+  xxl: { minWidth: breakpoints.xxl },
+} as const
+
+/** Assumed active queries during SSR / first render (a phone-sized viewport). */
+export const mediaQueryDefaultActive = {
+  touchable: !isWeb,
+  hoverable: isWeb,
+  'max-xxl': true,
+  'max-xl': true,
+  'max-lg': true,
+  'max-md': true,
+  'max-sm': true,
+  'max-xs': false,
+  xs: true,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  xxl: false,
+}

package/src/palettes.ts

@@ -0,0 +1,123 @@
+/**
+ * 12-step color scales. Built-in scales come from Radix Colors (MIT, shipped
+ * via `@tamagui/colors`), which are hand-tuned separately for light and dark
+ * mode — dark mode is designed, not inverted. Custom brand colors are turned
+ * into scales with `generateScale`.
+ *
+ * Step semantics (same as Radix):
+ *  1-2  app / subtle backgrounds      3-5  component backgrounds (rest/hover/active)
+ *  6-8  borders (subtle/default/hover)  9-10 solid fills (rest/hover)
+ *  11   low-contrast text             12   high-contrast text
+ */
+import {
+  amber,
+  amberDark,
+  blue,
+  blueDark,
+  crimson,
+  crimsonDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  indigo,
+  indigoDark,
+  mauve,
+  mauveDark,
+  orange,
+  orangeDark,
+  red,
+  redDark,
+  sage,
+  sageDark,
+  sand,
+  sandDark,
+  slate,
+  slateDark,
+  teal,
+  tealDark,
+  violet,
+  violetDark,
+} from '@tamagui/colors'
+import { fromOklch, isValidColor, toOklch } from '@advui/utils'
+
+export type ScaleSteps = readonly [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+]
+
+export interface ColorScale {
+  light: ScaleSteps
+  dark: ScaleSteps
+}
+
+const steps = (record: Record<string, string>) => Object.values(record) as unknown as ScaleSteps
+const scale = (light: Record<string, string>, dark: Record<string, string>): ColorScale => ({
+  light: steps(light),
+  dark: steps(dark),
+})
+
+export const scales = {
+  indigo: scale(indigo, indigoDark),
+  blue: scale(blue, blueDark),
+  violet: scale(violet, violetDark),
+  green: scale(green, greenDark),
+  teal: scale(teal, tealDark),
+  orange: scale(orange, orangeDark),
+  amber: scale(amber, amberDark),
+  crimson: scale(crimson, crimsonDark),
+  red: scale(red, redDark),
+  gray: scale(gray, grayDark),
+  slate: scale(slate, slateDark),
+  mauve: scale(mauve, mauveDark),
+  sage: scale(sage, sageDark),
+  sand: scale(sand, sandDark),
+} as const
+
+export type ScaleName = keyof typeof scales
+
+export const neutralScaleNames = ['gray', 'slate', 'mauve', 'sage', 'sand'] as const
+export type NeutralScaleName = (typeof neutralScaleNames)[number]
+
+/** A named built-in scale, a hex/rgb/hsl color string, or a complete custom scale. */
+export type ColorSource = ScaleName | (string & {}) | ColorScale
+
+// Target OKLCH lightness per step, and chroma as a fraction of the base chroma.
+const LIGHT_L = [0.993, 0.982, 0.956, 0.93, 0.9, 0.865, 0.815, 0.745, 0, 0, 0.5, 0.29]
+const DARK_L = [0.175, 0.205, 0.255, 0.295, 0.335, 0.38, 0.44, 0.52, 0, 0, 0.8, 0.93]
+const CHROMA = [0.02, 0.05, 0.12, 0.2, 0.28, 0.36, 0.46, 0.62, 1, 1, 0.85, 0.45]
+
+/**
+ * Generates a light + dark 12-step scale around a single brand color. Step 9
+ * is the exact input color in both modes, mirroring how Radix scales work.
+ */
+export function generateScale(color: string): ColorScale {
+  const base = toOklch(color)
+  const build = (targets: number[], hoverShift: number) =>
+    targets.map((l, i) => {
+      if (i === 8) return fromOklch({ ...base, a: 1 })
+      if (i === 9) return fromOklch({ ...base, l: base.l + hoverShift, a: 1 })
+      return fromOklch({ l, c: base.c * CHROMA[i]!, h: base.h })
+    }) as unknown as ScaleSteps
+
+  return { light: build(LIGHT_L, -0.05), dark: build(DARK_L, 0.05) }
+}
+
+export function resolveScale(source: ColorSource): ColorScale {
+  if (typeof source === 'object') return source
+  if (source in scales) return scales[source as ScaleName]
+  if (isValidColor(source)) return generateScale(source)
+  throw new Error(
+    `[advui] Unknown color "${source}". Use a scale name (${Object.keys(scales).join(', ')}) or a color string.`,
+  )
+}

package/src/presets.ts

@@ -0,0 +1,64 @@
+import type { ThemeColorsInput } from './themes'
+
+export interface ThemePreset {
+  name: string
+  label: string
+  colors: ThemeColorsInput
+}
+
+export const themePresets = {
+  indigo: {
+    name: 'indigo',
+    label: 'Indigo',
+    colors: { primary: 'indigo', neutral: 'slate' },
+  },
+  blue: {
+    name: 'blue',
+    label: 'Blue',
+    colors: { primary: 'blue', neutral: 'slate' },
+  },
+  violet: {
+    name: 'violet',
+    label: 'Violet',
+    colors: { primary: 'violet', neutral: 'mauve' },
+  },
+  green: {
+    name: 'green',
+    label: 'Green',
+    colors: { primary: 'green', neutral: 'sage' },
+  },
+  emerald: {
+    name: 'emerald',
+    label: 'Emerald',
+    colors: { primary: 'teal', neutral: 'sage' },
+  },
+  orange: {
+    name: 'orange',
+    label: 'Orange',
+    colors: { primary: 'orange', neutral: 'sand' },
+  },
+  rose: {
+    name: 'rose',
+    label: 'Rose',
+    colors: { primary: 'crimson', neutral: 'mauve' },
+  },
+  red: {
+    name: 'red',
+    label: 'Red',
+    colors: { primary: 'red', neutral: 'gray' },
+  },
+  slate: {
+    name: 'slate',
+    label: 'Slate',
+    colors: { neutral: 'slate', monochrome: true },
+  },
+  neutral: {
+    name: 'neutral',
+    label: 'Neutral',
+    colors: { neutral: 'gray', monochrome: true },
+  },
+} as const satisfies Record<string, ThemePreset>
+
+export type ThemePresetName = keyof typeof themePresets
+
+export const themePresetNames = Object.keys(themePresets) as ThemePresetName[]

package/src/shadows.ts

@@ -0,0 +1,45 @@
+/**
+ * Elevation presets. Spread them into `styled()` definitions:
+ * `styled(View, { ...shadows.md })`. Colors come from the theme
+ * (`$shadowColor`, `$shadowColorStrong`) so dark mode gets deeper shadows.
+ * `elevation` is the Android equivalent.
+ */
+export const shadows = {
+  none: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  xs: {
+    shadowColor: '$shadowColor',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  sm: {
+    shadowColor: '$shadowColor',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 1,
+    shadowRadius: 6,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: '$shadowColorStrong',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 1,
+    shadowRadius: 16,
+    elevation: 6,
+  },
+  lg: {
+    shadowColor: '$shadowColorStrong',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 1,
+    shadowRadius: 32,
+    elevation: 12,
+  },
+} as const
+
+export type ShadowName = keyof typeof shadows

package/src/shorthands.ts

@@ -0,0 +1,36 @@
+/** Opt-in shorthands (`px`, `bg`, `rounded`…). Library source uses longhand props for readability. */
+export const shorthands = {
+  text: 'textAlign',
+  b: 'bottom',
+  bg: 'backgroundColor',
+  content: 'alignContent',
+  grow: 'flexGrow',
+  items: 'alignItems',
+  justify: 'justifyContent',
+  l: 'left',
+  m: 'margin',
+  maxH: 'maxHeight',
+  maxW: 'maxWidth',
+  mb: 'marginBottom',
+  minH: 'minHeight',
+  minW: 'minWidth',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mt: 'marginTop',
+  mx: 'marginHorizontal',
+  my: 'marginVertical',
+  p: 'padding',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  pt: 'paddingTop',
+  px: 'paddingHorizontal',
+  py: 'paddingVertical',
+  r: 'right',
+  rounded: 'borderRadius',
+  select: 'userSelect',
+  self: 'alignSelf',
+  shrink: 'flexShrink',
+  t: 'top',
+  z: 'zIndex',
+} as const