@olympusoss/canvas 3.2.1 → 5.0.0

package/src/style/color.ts

@@ -0,0 +1,17 @@
+// Color helpers for building style objects from tokens.
+
+/**
+ * Apply an alpha to a hex color, returning an `rgba(...)` string. Replaces the
+ * engine's `bg-primary/10`-style alpha suffix: `alpha(tokens.primary, 0.1)`.
+ * `a` is a 0..1 fraction. Non-hex inputs (already-translucent token values,
+ * "transparent") are returned unchanged so callers can pass any token safely.
+ */
+export function alpha(color: string, a: number): string {
+  if (color === "transparent" || color[0] !== "#") return color;
+  const h = color.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}

package/src/style/index.ts

@@ -0,0 +1,14 @@
+// The Canvas style foundation: design tokens, the theme runtime (ThemeProvider +
+// useTheme), desktop-first responsive selection, and the small style helpers
+// (shadow, alpha) components build their RN style objects from. Components import
+// their primitives and helpers from here:
+//
+//   import { View, Text, Pressable, useTheme, useResponsive, shadow, alpha,
+//            type ColorTokens } from "../../style/index.js";
+
+export * from "./tokens.js";
+export * from "./theme.js";
+export * from "./responsive.js";
+export * from "./shadow.js";
+export * from "./color.js";
+export * from "./primitives.js";

package/src/style/primitives.ts

@@ -0,0 +1,26 @@
+// Raw React Native primitives, re-exported so components import their building
+// blocks from one place alongside the theme/style helpers. These are RN's own
+// View/Text/Pressable/etc. with NO className layer: components style them with
+// plain RN style objects built from tokens. Pressable's `style` accepts the
+// `({ pressed }) => ...` callback form for press feedback, so no wrapper is
+// needed for the old `active:` variant.
+
+export {
+  View,
+  Text,
+  Pressable,
+  Image,
+  TextInput,
+  ScrollView,
+  type ViewProps,
+  type TextProps,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type ImageProps,
+  type TextInputProps,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type ImageStyle,
+} from "react-native";

package/src/style/responsive.ts

@@ -0,0 +1,45 @@
+// Desktop-first responsive selection. This replaces the engine's breakpoint
+// className variants (`sm:`/`md:`/...) with a value picker that follows the exact
+// same semantics: the `base` value is the desktop case, and a breakpoint entry
+// applies at that width AND BELOW, with the smallest matching breakpoint winning.
+//
+// A component declares the values it wants per breakpoint and reads the active
+// one for the current viewport:
+//
+//   const direction = useResponsive({ base: "row", sm: "column" });
+//   // <View style={{ flexDirection: direction }} />
+//
+// Only the breakpoints present in the map are considered, mirroring how a
+// className like `flex-row sm:flex-col` only flips at the `sm` threshold.
+
+import { useWindowDimensions } from "react-native";
+import { breakpoints } from "./tokens.js";
+
+/** The breakpoint keys, in ascending pixel order. */
+export type BreakpointKey = "sm" | "md" | "lg" | "xl" | "2xl";
+
+/** A value that varies by breakpoint. `base` is the desktop default (required). */
+export type Responsive<T> = { base: T } & Partial<Record<BreakpointKey, T>>;
+
+// Ascending by px, so the first match when scanning is the smallest breakpoint
+// that still covers the width, which is the one that wins (desktop-first).
+const ASCENDING: BreakpointKey[] = ["sm", "md", "lg", "xl", "2xl"];
+
+/** Pure picker: resolve a Responsive map to its active value at the given width. */
+export function responsive<T>(width: number, map: Responsive<T>): T {
+  for (const bp of ASCENDING) {
+    const value = map[bp];
+    if (value !== undefined && width <= breakpoints[bp]) {
+      return value;
+    }
+  }
+  return map.base;
+}
+
+/** Hook form: resolve a Responsive map against the current viewport width. */
+export function useResponsive<T>(map: Responsive<T>): T {
+  const { width } = useWindowDimensions();
+  return responsive(width, map);
+}
+
+export { useWindowDimensions };

package/src/style/shadow.ts

@@ -0,0 +1,21 @@
+import { type ViewStyle } from "react-native";
+
+// Elevation presets, matching the engine's old `shadow-*` scale one-for-one, as
+// ready-to-spread RN ViewStyle objects (iOS shadow* props + Android elevation).
+// Spread the result into a style: `{ ...shadow("md") }`.
+
+export type ShadowLevel = "none" | "sm" | "DEFAULT" | "md" | "lg" | "xl";
+
+const SHADOWS: Record<ShadowLevel, ViewStyle> = {
+  none: { shadowOpacity: 0, elevation: 0 },
+  sm: { shadowColor: "#000000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1 },
+  DEFAULT: { shadowColor: "#000000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 3, elevation: 2 },
+  md: { shadowColor: "#000000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 6, elevation: 4 },
+  lg: { shadowColor: "#000000", shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.1, shadowRadius: 15, elevation: 8 },
+  xl: { shadowColor: "#000000", shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.1, shadowRadius: 25, elevation: 12 },
+};
+
+/** The elevation preset for a level (defaults to the standard `shadow`). */
+export function shadow(level: ShadowLevel = "DEFAULT"): ViewStyle {
+  return SHADOWS[level];
+}

package/src/style/theme.tsx

@@ -0,0 +1,56 @@
+// The theme runtime: a ThemeProvider that supplies the active color scheme and
+// token map, and a useTheme hook components read to paint with scheme-aware
+// colors. This is the one piece of shared state the raw-RN components depend on;
+// everything else they style with plain RN objects built from these tokens.
+
+import { type ReactNode, createContext, useContext, useMemo } from "react";
+import { useColorScheme } from "react-native";
+import { colorsByScheme, glassByScheme, type ColorScheme, type ColorTokens } from "./tokens.js";
+
+// Surface treatment. "glass" makes surface fills translucent across every
+// component (see glassByScheme). It is a theming dimension, like the color
+// scheme, not a per-component prop.
+export type Surface = "default" | "glass";
+
+export interface ThemeValue {
+  scheme: ColorScheme;
+  surface: Surface;
+  tokens: ColorTokens;
+  dark: boolean;
+}
+
+const ThemeContext = createContext<ThemeValue | null>(null);
+const FALLBACK: ThemeValue = { scheme: "light", surface: "default", tokens: colorsByScheme.light, dark: false };
+
+export interface ThemeProviderProps {
+  /** Force a color scheme. Omit to follow the OS appearance. */
+  scheme?: ColorScheme;
+  /**
+   * Surface treatment. "glass" makes every surface fill (card, popover)
+   * translucent, so all surface components read as glass; "default" is solid.
+   * This is the theming-level glass switch, no per-component glass prop.
+   */
+  surface?: Surface;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ scheme, surface = "default", children }: ThemeProviderProps) {
+  const system = useColorScheme();
+  const active: ColorScheme = scheme ?? (system === "dark" ? "dark" : "light");
+  const value = useMemo<ThemeValue>(
+    () => ({
+      scheme: active,
+      surface,
+      tokens: surface === "glass"
+        ? { ...colorsByScheme[active], ...glassByScheme[active] }
+        : colorsByScheme[active],
+      dark: active === "dark",
+    }),
+    [active, surface],
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeValue {
+  return useContext(ThemeContext) ?? FALLBACK;
+}

package/src/style/tokens.ts

@@ -0,0 +1,487 @@
+// Canvas design tokens, as plain JS values. RN-usable: no CSS variables, no
+// document access. Light and dark color sets plus numeric scales for spacing,
+// radius, type, and breakpoints. Components read these (via useTheme for the
+// scheme-aware color set) and build their RN style objects from them.
+
+export type ColorScheme = "light" | "dark";
+
+/** Semantic color tokens. The named surface/intent colors components paint with. */
+export interface ColorTokens {
+  background: string;
+  foreground: string;
+  card: string;
+  "card-foreground": string;
+  popover: string;
+  "popover-foreground": string;
+  primary: string;
+  "primary-foreground": string;
+  secondary: string;
+  "secondary-foreground": string;
+  muted: string;
+  "muted-foreground": string;
+  accent: string;
+  "accent-foreground": string;
+  destructive: string;
+  "destructive-foreground": string;
+  border: string;
+  input: string;
+  ring: string;
+}
+
+export const lightColors: ColorTokens = {
+  background: "#ffffff",
+  foreground: "#09090b",
+  card: "#ffffff",
+  "card-foreground": "#09090b",
+  popover: "#ffffff",
+  "popover-foreground": "#09090b",
+  primary: "#4f46e5",
+  "primary-foreground": "#ffffff",
+  secondary: "#f4f4f5",
+  "secondary-foreground": "#18181b",
+  muted: "#f4f4f5",
+  "muted-foreground": "#71717a",
+  accent: "#f4f4f5",
+  "accent-foreground": "#18181b",
+  destructive: "#dc2626",
+  "destructive-foreground": "#ffffff",
+  border: "#e4e4e7",
+  input: "#e4e4e7",
+  ring: "#4f46e5",
+};
+
+export const darkColors: ColorTokens = {
+  background: "#09090b",
+  foreground: "#fafafa",
+  card: "#18181b",
+  "card-foreground": "#fafafa",
+  popover: "#18181b",
+  "popover-foreground": "#fafafa",
+  primary: "#6366f1",
+  "primary-foreground": "#ffffff",
+  secondary: "#27272a",
+  "secondary-foreground": "#fafafa",
+  muted: "#27272a",
+  "muted-foreground": "#a1a1aa",
+  accent: "#27272a",
+  "accent-foreground": "#fafafa",
+  destructive: "#ef4444",
+  "destructive-foreground": "#fafafa",
+  border: "#27272a",
+  input: "#27272a",
+  ring: "#6366f1",
+};
+
+export const colorsByScheme: Record<ColorScheme, ColorTokens> = {
+  light: lightColors,
+  dark: darkColors,
+};
+
+/**
+ * Glass-surface token overrides per scheme. When the ThemeProvider's surface is
+ * "glass", these are merged over the scheme's tokens so every surface fill
+ * (card, popover) becomes translucent, and so every component that paints one
+ * reads as glass without a per-component prop. Only the fills change; the
+ * foreground and border tokens are untouched. Values are rgba so they compose
+ * over whatever sits behind the surface, on native and on react-native-web.
+ */
+export const glassByScheme: Record<ColorScheme, Partial<ColorTokens>> = {
+  light: {
+    card: "rgba(255, 255, 255, 0.6)",
+    popover: "rgba(255, 255, 255, 0.72)",
+  },
+  dark: {
+    card: "rgba(24, 24, 27, 0.55)",
+    popover: "rgba(30, 30, 34, 0.66)",
+  },
+};
+
+/** Fixed, scheme-independent base colors. */
+export const baseColors: Record<string, string> = {
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "transparent",
+};
+
+/**
+ * The standard Tailwind v3 color-hue palette, scheme-independent. Color-coded
+ * components that need hues beyond the semantic tokens read from here. Keyed
+ * "<hue>-<step>" (e.g. "red-500"), values are the canonical Tailwind v3 hexes,
+ * lowercase.
+ */
+export const palette: Record<string, string> = {
+  // slate
+  "slate-50": "#f8fafc",
+  "slate-100": "#f1f5f9",
+  "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1",
+  "slate-400": "#94a3b8",
+  "slate-500": "#64748b",
+  "slate-600": "#475569",
+  "slate-700": "#334155",
+  "slate-800": "#1e293b",
+  "slate-900": "#0f172a",
+  "slate-950": "#020617",
+  // gray
+  "gray-50": "#f9fafb",
+  "gray-100": "#f3f4f6",
+  "gray-200": "#e5e7eb",
+  "gray-300": "#d1d5db",
+  "gray-400": "#9ca3af",
+  "gray-500": "#6b7280",
+  "gray-600": "#4b5563",
+  "gray-700": "#374151",
+  "gray-800": "#1f2937",
+  "gray-900": "#111827",
+  "gray-950": "#030712",
+  // zinc
+  "zinc-50": "#fafafa",
+  "zinc-100": "#f4f4f5",
+  "zinc-200": "#e4e4e7",
+  "zinc-300": "#d4d4d8",
+  "zinc-400": "#a1a1aa",
+  "zinc-500": "#71717a",
+  "zinc-600": "#52525b",
+  "zinc-700": "#3f3f46",
+  "zinc-800": "#27272a",
+  "zinc-900": "#18181b",
+  "zinc-950": "#09090b",
+  // neutral
+  "neutral-50": "#fafafa",
+  "neutral-100": "#f5f5f5",
+  "neutral-200": "#e5e5e5",
+  "neutral-300": "#d4d4d4",
+  "neutral-400": "#a3a3a3",
+  "neutral-500": "#737373",
+  "neutral-600": "#525252",
+  "neutral-700": "#404040",
+  "neutral-800": "#262626",
+  "neutral-900": "#171717",
+  "neutral-950": "#0a0a0a",
+  // stone
+  "stone-50": "#fafaf9",
+  "stone-100": "#f5f5f4",
+  "stone-200": "#e7e5e4",
+  "stone-300": "#d6d3d1",
+  "stone-400": "#a8a29e",
+  "stone-500": "#78716c",
+  "stone-600": "#57534e",
+  "stone-700": "#44403c",
+  "stone-800": "#292524",
+  "stone-900": "#1c1917",
+  "stone-950": "#0c0a09",
+  // red
+  "red-50": "#fef2f2",
+  "red-100": "#fee2e2",
+  "red-200": "#fecaca",
+  "red-300": "#fca5a5",
+  "red-400": "#f87171",
+  "red-500": "#ef4444",
+  "red-600": "#dc2626",
+  "red-700": "#b91c1c",
+  "red-800": "#991b1b",
+  "red-900": "#7f1d1d",
+  "red-950": "#450a0a",
+  // orange
+  "orange-50": "#fff7ed",
+  "orange-100": "#ffedd5",
+  "orange-200": "#fed7aa",
+  "orange-300": "#fdba74",
+  "orange-400": "#fb923c",
+  "orange-500": "#f97316",
+  "orange-600": "#ea580c",
+  "orange-700": "#c2410c",
+  "orange-800": "#9a3412",
+  "orange-900": "#7c2d12",
+  "orange-950": "#431407",
+  // amber
+  "amber-50": "#fffbeb",
+  "amber-100": "#fef3c7",
+  "amber-200": "#fde68a",
+  "amber-300": "#fcd34d",
+  "amber-400": "#fbbf24",
+  "amber-500": "#f59e0b",
+  "amber-600": "#d97706",
+  "amber-700": "#b45309",
+  "amber-800": "#92400e",
+  "amber-900": "#78350f",
+  "amber-950": "#451a03",
+  // yellow
+  "yellow-50": "#fefce8",
+  "yellow-100": "#fef9c3",
+  "yellow-200": "#fef08a",
+  "yellow-300": "#fde047",
+  "yellow-400": "#facc15",
+  "yellow-500": "#eab308",
+  "yellow-600": "#ca8a04",
+  "yellow-700": "#a16207",
+  "yellow-800": "#854d0e",
+  "yellow-900": "#713f12",
+  "yellow-950": "#422006",
+  // lime
+  "lime-50": "#f7fee7",
+  "lime-100": "#ecfccb",
+  "lime-200": "#d9f99d",
+  "lime-300": "#bef264",
+  "lime-400": "#a3e635",
+  "lime-500": "#84cc16",
+  "lime-600": "#65a30d",
+  "lime-700": "#4d7c0f",
+  "lime-800": "#3f6212",
+  "lime-900": "#365314",
+  "lime-950": "#1a2e05",
+  // green
+  "green-50": "#f0fdf4",
+  "green-100": "#dcfce7",
+  "green-200": "#bbf7d0",
+  "green-300": "#86efac",
+  "green-400": "#4ade80",
+  "green-500": "#22c55e",
+  "green-600": "#16a34a",
+  "green-700": "#15803d",
+  "green-800": "#166534",
+  "green-900": "#14532d",
+  "green-950": "#052e16",
+  // emerald
+  "emerald-50": "#ecfdf5",
+  "emerald-100": "#d1fae5",
+  "emerald-200": "#a7f3d0",
+  "emerald-300": "#6ee7b7",
+  "emerald-400": "#34d399",
+  "emerald-500": "#10b981",
+  "emerald-600": "#059669",
+  "emerald-700": "#047857",
+  "emerald-800": "#065f46",
+  "emerald-900": "#064e3b",
+  "emerald-950": "#022c22",
+  // teal
+  "teal-50": "#f0fdfa",
+  "teal-100": "#ccfbf1",
+  "teal-200": "#99f6e4",
+  "teal-300": "#5eead4",
+  "teal-400": "#2dd4bf",
+  "teal-500": "#14b8a6",
+  "teal-600": "#0d9488",
+  "teal-700": "#0f766e",
+  "teal-800": "#115e59",
+  "teal-900": "#134e4a",
+  "teal-950": "#042f2e",
+  // cyan
+  "cyan-50": "#ecfeff",
+  "cyan-100": "#cffafe",
+  "cyan-200": "#a5f3fc",
+  "cyan-300": "#67e8f9",
+  "cyan-400": "#22d3ee",
+  "cyan-500": "#06b6d4",
+  "cyan-600": "#0891b2",
+  "cyan-700": "#0e7490",
+  "cyan-800": "#155e75",
+  "cyan-900": "#164e63",
+  "cyan-950": "#083344",
+  // sky
+  "sky-50": "#f0f9ff",
+  "sky-100": "#e0f2fe",
+  "sky-200": "#bae6fd",
+  "sky-300": "#7dd3fc",
+  "sky-400": "#38bdf8",
+  "sky-500": "#0ea5e9",
+  "sky-600": "#0284c7",
+  "sky-700": "#0369a1",
+  "sky-800": "#075985",
+  "sky-900": "#0c4a6e",
+  "sky-950": "#082f49",
+  // blue
+  "blue-50": "#eff6ff",
+  "blue-100": "#dbeafe",
+  "blue-200": "#bfdbfe",
+  "blue-300": "#93c5fd",
+  "blue-400": "#60a5fa",
+  "blue-500": "#3b82f6",
+  "blue-600": "#2563eb",
+  "blue-700": "#1d4ed8",
+  "blue-800": "#1e40af",
+  "blue-900": "#1e3a8a",
+  "blue-950": "#172554",
+  // indigo
+  "indigo-50": "#eef2ff",
+  "indigo-100": "#e0e7ff",
+  "indigo-200": "#c7d2fe",
+  "indigo-300": "#a5b4fc",
+  "indigo-400": "#818cf8",
+  "indigo-500": "#6366f1",
+  "indigo-600": "#4f46e5",
+  "indigo-700": "#4338ca",
+  "indigo-800": "#3730a3",
+  "indigo-900": "#312e81",
+  "indigo-950": "#1e1b4b",
+  // violet
+  "violet-50": "#f5f3ff",
+  "violet-100": "#ede9fe",
+  "violet-200": "#ddd6fe",
+  "violet-300": "#c4b5fd",
+  "violet-400": "#a78bfa",
+  "violet-500": "#8b5cf6",
+  "violet-600": "#7c3aed",
+  "violet-700": "#6d28d9",
+  "violet-800": "#5b21b6",
+  "violet-900": "#4c1d95",
+  "violet-950": "#2e1065",
+  // purple
+  "purple-50": "#faf5ff",
+  "purple-100": "#f3e8ff",
+  "purple-200": "#e9d5ff",
+  "purple-300": "#d8b4fe",
+  "purple-400": "#c084fc",
+  "purple-500": "#a855f7",
+  "purple-600": "#9333ea",
+  "purple-700": "#7e22ce",
+  "purple-800": "#6b21a8",
+  "purple-900": "#581c87",
+  "purple-950": "#3b0764",
+  // fuchsia
+  "fuchsia-50": "#fdf4ff",
+  "fuchsia-100": "#fae8ff",
+  "fuchsia-200": "#f5d0fe",
+  "fuchsia-300": "#f0abfc",
+  "fuchsia-400": "#e879f9",
+  "fuchsia-500": "#d946ef",
+  "fuchsia-600": "#c026d3",
+  "fuchsia-700": "#a21caf",
+  "fuchsia-800": "#86198f",
+  "fuchsia-900": "#701a75",
+  "fuchsia-950": "#4a044e",
+  // pink
+  "pink-50": "#fdf2f8",
+  "pink-100": "#fce7f3",
+  "pink-200": "#fbcfe8",
+  "pink-300": "#f9a8d4",
+  "pink-400": "#f472b6",
+  "pink-500": "#ec4899",
+  "pink-600": "#db2777",
+  "pink-700": "#be185d",
+  "pink-800": "#9d174d",
+  "pink-900": "#831843",
+  "pink-950": "#500724",
+  // rose
+  "rose-50": "#fff1f2",
+  "rose-100": "#ffe4e6",
+  "rose-200": "#fecdd3",
+  "rose-300": "#fda4af",
+  "rose-400": "#fb7185",
+  "rose-500": "#f43f5e",
+  "rose-600": "#e11d48",
+  "rose-700": "#be123c",
+  "rose-800": "#9f1239",
+  "rose-900": "#881337",
+  "rose-950": "#4c0519",
+};
+
+/** Spacing scale in px (Tailwind rem * 16). Keys are the Tailwind step names. */
+export const spacing: Record<string, number> = {
+  "0": 0,
+  px: 1,
+  "0.5": 2,
+  "1": 4,
+  "1.5": 6,
+  "2": 8,
+  "2.5": 10,
+  "3": 12,
+  "3.5": 14,
+  "4": 16,
+  "5": 20,
+  "6": 24,
+  "7": 28,
+  "8": 32,
+  "9": 36,
+  "10": 40,
+  "11": 44,
+  "12": 48,
+  "14": 56,
+  "16": 64,
+  "20": 80,
+  "24": 96,
+  "28": 112,
+  "32": 128,
+  "36": 144,
+  "40": 160,
+  "48": 192,
+  "56": 224,
+  "64": 256,
+};
+
+/** Border radius scale in px. */
+export const radius: Record<string, number> = {
+  none: 0,
+  sm: 2,
+  DEFAULT: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  "2xl": 16,
+  "3xl": 24,
+  full: 9999,
+};
+
+/** Font size and matching line height, in px. */
+export const fontSize: Record<string, { fontSize: number; lineHeight: number }> = {
+  xs: { fontSize: 12, lineHeight: 16 },
+  sm: { fontSize: 14, lineHeight: 20 },
+  base: { fontSize: 16, lineHeight: 24 },
+  lg: { fontSize: 18, lineHeight: 28 },
+  xl: { fontSize: 20, lineHeight: 28 },
+  "2xl": { fontSize: 24, lineHeight: 32 },
+  "3xl": { fontSize: 30, lineHeight: 36 },
+  "4xl": { fontSize: 36, lineHeight: 40 },
+  "5xl": { fontSize: 48, lineHeight: 48 },
+  "6xl": { fontSize: 60, lineHeight: 60 },
+};
+
+/** Font weights (RN expects string values). */
+export const fontWeight: Record<string, string> = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900",
+};
+
+/** Letter spacing (tracking) in px. */
+export const letterSpacing: Record<string, number> = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6,
+};
+
+/** Line height (leading) in px. Relative leadings are approximated as absolute. */
+export const lineHeight: Record<string, number> = {
+  none: 16,
+  tight: 18,
+  snug: 20,
+  normal: 24,
+  relaxed: 28,
+  loose: 32,
+  "3": 12,
+  "4": 16,
+  "5": 20,
+  "6": 24,
+  "7": 28,
+  "8": 32,
+  "9": 36,
+  "10": 40,
+};
+
+/** Desktop-first breakpoints in px: a variant applies at this width and below. */
+export const breakpoints: Record<string, number> = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};