radix-native 0.0.1

package/src/theme/ThemeRoot.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { useColorScheme } from 'react-native'
+import { ThemeContext } from './ThemeContext'
+import { resolveGrayColor } from './resolveGrayColor'
+import type { ThemeProps, ThemeContextValue } from './theme.types'
+
+export function ThemeRoot({
+  appearance: appearanceProp = 'inherit',
+  accentColor: accentColorProp = 'indigo',
+  grayColor: grayColorProp = 'auto',
+  radius: radiusProp = 'medium',
+  scaling: scalingProp = '100%',
+  fonts: fontsProp = {},
+  colorOverrides: colorOverridesProp = {},
+  children,
+}: ThemeProps) {
+  const systemColorScheme = useColorScheme()
+
+  const [appearance, setAppearance] = React.useState<'light' | 'dark'>(() =>
+    appearanceProp === 'inherit'
+      ? systemColorScheme === 'dark' ? 'dark' : 'light'
+      : appearanceProp,
+  )
+  const [accentColor, setAccentColor] = React.useState(accentColorProp)
+  const [grayColor, setGrayColor] = React.useState(grayColorProp)
+  const [radius, setRadius] = React.useState(radiusProp)
+  const [scaling, setScaling] = React.useState(scalingProp)
+
+  React.useEffect(() => {
+    setAppearance(
+      appearanceProp === 'inherit'
+        ? systemColorScheme === 'dark' ? 'dark' : 'light'
+        : appearanceProp,
+    )
+  }, [appearanceProp, systemColorScheme])
+
+  React.useEffect(() => { setAccentColor(accentColorProp) }, [accentColorProp])
+  React.useEffect(() => { setGrayColor(grayColorProp) }, [grayColorProp])
+  React.useEffect(() => { setRadius(radiusProp) }, [radiusProp])
+  React.useEffect(() => { setScaling(scalingProp) }, [scalingProp])
+
+  const resolvedGrayColor = grayColor === 'auto' ? resolveGrayColor(accentColor) : grayColor
+
+  const value = React.useMemo<ThemeContextValue>(
+    () => ({
+      appearance,
+      accentColor,
+      grayColor,
+      resolvedGrayColor,
+      radius,
+      scaling,
+      fonts: fontsProp,
+      colorOverrides: colorOverridesProp,
+      onAppearanceChange: setAppearance,
+      onAccentColorChange: setAccentColor,
+      onGrayColorChange: setGrayColor,
+      onRadiusChange: setRadius,
+      onScalingChange: setScaling,
+    }),
+    [appearance, accentColor, grayColor, resolvedGrayColor, radius, scaling, fontsProp, colorOverridesProp],
+  )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+ThemeRoot.displayName = 'ThemeRoot'

package/src/theme/createTheme.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Theme } from './Theme'
+import type { ThemeProps } from './theme.types'
+
+/**
+ * Factory that creates a pre-configured Theme component.
+ * Useful for white-label or multi-brand applications.
+ */
+export function createTheme(
+  config: Omit<ThemeProps, 'children'>,
+): (props: { children: React.ReactNode }) => React.JSX.Element {
+  function ThemeProvider({ children }: { children: React.ReactNode }) {
+    return <Theme {...config}>{children}</Theme>
+  }
+  ThemeProvider.displayName = 'ThemeProvider'
+  return ThemeProvider
+}

package/src/theme/resolveGrayColor.ts

@@ -0,0 +1,38 @@
+import type { AccentColor, GrayColor } from './theme.types'
+
+export function resolveGrayColor(accentColor: AccentColor): GrayColor {
+  switch (accentColor) {
+    case 'tomato':
+    case 'red':
+    case 'ruby':
+    case 'crimson':
+    case 'pink':
+    case 'plum':
+    case 'purple':
+    case 'violet':
+      return 'mauve'
+    case 'iris':
+    case 'indigo':
+    case 'blue':
+    case 'sky':
+    case 'cyan':
+      return 'slate'
+    case 'teal':
+    case 'jade':
+    case 'mint':
+    case 'green':
+      return 'sage'
+    case 'grass':
+    case 'lime':
+      return 'olive'
+    case 'gray':
+      return 'gray'
+    case 'yellow':
+    case 'amber':
+    case 'orange':
+    case 'brown':
+    case 'gold':
+    case 'bronze':
+      return 'sand'
+  }
+}

package/src/theme/theme.types.ts

@@ -0,0 +1,95 @@
+import type { AccentColor, GrayColor } from '../tokens/colors/types'
+import type { RadiusToken } from '../tokens/radius'
+import type { ScalingMode } from '../tokens/scaling'
+
+export type { AccentColor, GrayColor, RadiusToken, ScalingMode }
+
+export type ThemeAppearance = 'inherit' | 'light' | 'dark'
+
+export type ThemeColor =
+  | `accent-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+  | `accent-a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+  | `gray-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+  | `gray-a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+  | `${AccentColor}-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+  | (string & {})
+
+export interface ThemeFonts {
+  /** fontWeight 300 — falls back to regular */
+  light?: string
+  /** fontWeight 400 — base body font */
+  regular?: string
+  /** fontWeight 500 — falls back to regular */
+  medium?: string
+  /** fontWeight 700 — falls back to regular */
+  bold?: string
+  /** Heading component — falls back to bold → regular */
+  heading?: string
+  /** Code / Kbd — monospace font, falls back to system monospace */
+  code?: string
+}
+
+/**
+ * Partial override of individual color steps within a scale.
+ * Only the steps you specify are overridden; the rest fall back to the built-in scale.
+ */
+export type ColorScaleOverride = Partial<
+  Record<
+    | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+    | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6' | 'a7' | 'a8' | 'a9' | 'a10' | 'a11' | 'a12'
+    | 'contrast' | 'surface',
+    string
+  >
+>
+
+/**
+ * Override any color scale with light/dark variants — like overriding CSS custom
+ * properties in Radix web (e.g. `--red-9: #custom`).
+ *
+ * @example
+ * colorOverrides={{
+ *   red: {
+ *     light: { 9: '#e54666', 10: '#dc3b5d' },
+ *     dark:  { 9: '#e5484d', 10: '#ec5d5e' },
+ *   },
+ * }}
+ */
+export type ColorOverrides = Partial<
+  Record<AccentColor | GrayColor, { light?: ColorScaleOverride; dark?: ColorScaleOverride }>
+>
+
+export interface ThemeChangeHandlers {
+  onAppearanceChange: (value: 'light' | 'dark') => void
+  onAccentColorChange: (value: AccentColor) => void
+  onGrayColorChange: (value: GrayColor | 'auto') => void
+  onRadiusChange: (value: RadiusToken) => void
+  onScalingChange: (value: ScalingMode) => void
+}
+
+export interface ThemeContextValue extends ThemeChangeHandlers {
+  /** Resolved appearance — always 'light' | 'dark', never 'inherit' */
+  appearance: 'light' | 'dark'
+  accentColor: AccentColor
+  grayColor: GrayColor | 'auto'
+  /** Resolved gray when grayColor is 'auto' */
+  resolvedGrayColor: GrayColor
+  radius: RadiusToken
+  scaling: ScalingMode
+  /** RN-only: custom font family names */
+  fonts: ThemeFonts
+  /** RN-only: override individual color steps */
+  colorOverrides: ColorOverrides
+}
+
+export interface ThemeProps {
+  appearance?: ThemeAppearance
+  accentColor?: AccentColor
+  grayColor?: GrayColor | 'auto'
+  radius?: RadiusToken
+  scaling?: ScalingMode
+  /** RN-only */
+  fonts?: ThemeFonts
+  /** RN-only */
+  colorOverrides?: ColorOverrides
+  children: React.ReactNode
+}

package/src/tokens/colors/amber.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const amber: ColorScaleWithModes = {
+  light: {
+    1: '#fefdfb', 2: '#fefbe9', 3: '#fff7c2', 4: '#ffee9c',
+    5: '#fbe577', 6: '#f3d673', 7: '#e9c162', 8: '#e2a336',
+    9: '#ffc53d', 10: '#ffba18', 11: '#ab6400', 12: '#4f3422',
+    a1: '#c0800004', a2: '#f4d10016', a3: '#ffde003d', a4: '#ffd40063',
+    a5: '#f8cf0088', a6: '#eab5008c', a7: '#dc9b009d', a8: '#da8a00c9',
+    a9: '#ffb300c2', a10: '#ffb300e7', a11: '#ab6400', a12: '#341500dd',
+    contrast: '#21201c', surface: '#fefae4cc',
+    indicator: '#ffc53d', track: '#ffc53d',
+  },
+  dark: {
+    1: '#16120c', 2: '#1d180f', 3: '#302008', 4: '#3f2700',
+    5: '#4d3000', 6: '#5c3d05', 7: '#714f19', 8: '#8f6424',
+    9: '#ffc53d', 10: '#ffd60a', 11: '#ffca16', 12: '#ffe7b3',
+    a1: '#e63c0006', a2: '#fd9b000d', a3: '#fa820022', a4: '#fc820032',
+    a5: '#fd8b0041', a6: '#fd9b0051', a7: '#ffab2567', a8: '#ffae3587',
+    a9: '#ffc53d', a10: '#ffd60a', a11: '#ffca16', a12: '#ffe7b3',
+    contrast: '#21201c', surface: '#271f1380',
+    indicator: '#ffc53d', track: '#ffc53d',
+  },
+}

package/src/tokens/colors/blue.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const blue: ColorScaleWithModes = {
+  light: {
+    1: '#fbfdff', 2: '#f4faff', 3: '#e6f4fe', 4: '#d5efff',
+    5: '#c2e5ff', 6: '#acd8fc', 7: '#8ec8f6', 8: '#5eb1ef',
+    9: '#0090ff', 10: '#0588f0', 11: '#0d74ce', 12: '#113264',
+    a1: '#0080ff04', a2: '#008cff0b', a3: '#008ff519', a4: '#009eff2a',
+    a5: '#0093ff3d', a6: '#0088f653', a7: '#0083eb71', a8: '#0084e6a1',
+    a9: '#0090ff', a10: '#0086f0fa', a11: '#006dcbf2', a12: '#002359ee',
+    contrast: '#ffffff', surface: '#f1f9ffcc',
+    indicator: '#0090ff', track: '#0090ff',
+  },
+  dark: {
+    1: '#0d1520', 2: '#111927', 3: '#0d2847', 4: '#003362',
+    5: '#004074', 6: '#104d87', 7: '#205d9e', 8: '#2870bd',
+    9: '#0090ff', 10: '#3b9eff', 11: '#70b8ff', 12: '#c2e6ff',
+    a1: '#004df211', a2: '#1166fb18', a3: '#0077ff3a', a4: '#0075ff57',
+    a5: '#0081fd6b', a6: '#0f89fd7f', a7: '#2a91fe98', a8: '#3094feb9',
+    a9: '#0090ff', a10: '#3b9eff', a11: '#70b8ff', a12: '#c2e6ff',
+    contrast: '#ffffff', surface: '#11213d80',
+    indicator: '#0090ff', track: '#0090ff',
+  },
+}

package/src/tokens/colors/bronze.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const bronze: ColorScaleWithModes = {
+  light: {
+    1: '#fdfcfc', 2: '#fdf7f5', 3: '#f6edea', 4: '#efe4df',
+    5: '#e7d9d3', 6: '#dfcdc5', 7: '#d3bcb3', 8: '#c2a499',
+    9: '#a18072', 10: '#957468', 11: '#7d5e54', 12: '#43302b',
+    a1: '#55000003', a2: '#cc33000a', a3: '#92250015', a4: '#80280020',
+    a5: '#7423002c', a6: '#7324003a', a7: '#6c1f004c', a8: '#671c0066',
+    a9: '#551a008d', a10: '#4c150097', a11: '#3d0f00ab', a12: '#1d0600d4',
+    contrast: '#ffffff', surface: '#fdf5f3cc',
+    indicator: '#a18072', track: '#a18072',
+  },
+  dark: {
+    1: '#141110', 2: '#1c1917', 3: '#262220', 4: '#302a27',
+    5: '#3b3330', 6: '#493e3a', 7: '#5a4c47', 8: '#6f5f58',
+    9: '#a18072', 10: '#ae8c7e', 11: '#d4b3a5', 12: '#ede0d9',
+    a1: '#d1110004', a2: '#fbbc910c', a3: '#faceb817', a4: '#facdb622',
+    a5: '#ffd2c12d', a6: '#ffd1c03c', a7: '#fdd0c04f', a8: '#ffd6c565',
+    a9: '#fec7b09b', a10: '#fecab5a9', a11: '#ffd7c6d1', a12: '#fff1e9ec',
+    contrast: '#ffffff', surface: '#27211d80',
+    indicator: '#a18072', track: '#a18072',
+  },
+}

package/src/tokens/colors/brown.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const brown: ColorScaleWithModes = {
+  light: {
+    1: '#fefdfc', 2: '#fcf9f6', 3: '#f6eee7', 4: '#f0e4d9',
+    5: '#ebdaca', 6: '#e4cdb7', 7: '#dcbc9f', 8: '#cea37e',
+    9: '#ad7f58', 10: '#a07553', 11: '#815e46', 12: '#3e332e',
+    a1: '#aa550003', a2: '#aa550009', a3: '#a04b0018', a4: '#9b4a0026',
+    a5: '#9f4d0035', a6: '#a04e0048', a7: '#a34e0060', a8: '#9f4a0081',
+    a9: '#823c00a7', a10: '#723300ac', a11: '#522100b9', a12: '#140600d1',
+    contrast: '#ffffff', surface: '#fbf8f4cc',
+    indicator: '#ad7f58', track: '#ad7f58',
+  },
+  dark: {
+    1: '#12110f', 2: '#1c1816', 3: '#28211d', 4: '#322922',
+    5: '#3e3128', 6: '#4d3c2f', 7: '#614a39', 8: '#7c5f46',
+    9: '#ad7f58', 10: '#b88c67', 11: '#dbb594', 12: '#f2e1ca',
+    a1: '#91110002', a2: '#fba67c0c', a3: '#fcb58c19', a4: '#fbbb8a24',
+    a5: '#fcb88931', a6: '#fdba8741', a7: '#ffbb8856', a8: '#ffbe8773',
+    a9: '#feb87da8', a10: '#ffc18cb3', a11: '#fed1aad9', a12: '#feecd4f2',
+    contrast: '#ffffff', surface: '#271f1b80',
+    indicator: '#ad7f58', track: '#ad7f58',
+  },
+}

package/src/tokens/colors/crimson.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const crimson: ColorScaleWithModes = {
+  light: {
+    1: '#fffcfd', 2: '#fef7f9', 3: '#ffe9f0', 4: '#fedce7',
+    5: '#facedd', 6: '#f3bed1', 7: '#eaacc3', 8: '#e093b2',
+    9: '#e93d82', 10: '#df3478', 11: '#cb1d63', 12: '#621639',
+    a1: '#ff005503', a2: '#e0004008', a3: '#ff005216', a4: '#f8005123',
+    a5: '#e5004f31', a6: '#d0004b41', a7: '#bf004753', a8: '#b6004a6c',
+    a9: '#e2005bc2', a10: '#d70056cb', a11: '#c4004fe2', a12: '#530026e9',
+    contrast: '#ffffff', surface: '#fef5f8cc',
+    indicator: '#e93d82', track: '#e93d82',
+  },
+  dark: {
+    1: '#191114', 2: '#201318', 3: '#381525', 4: '#4d122f',
+    5: '#5c1839', 6: '#6d2545', 7: '#873356', 8: '#b0436e',
+    9: '#e93d82', 10: '#ee518a', 11: '#ff92ad', 12: '#fdd3e8',
+    a1: '#f4126709', a2: '#f22f7a11', a3: '#fe2a8b2a', a4: '#fd158741',
+    a5: '#fd278f51', a6: '#fe459763', a7: '#fd559b7f', a8: '#fe5b9bab',
+    a9: '#fe418de8', a10: '#ff5693ed', a11: '#ff92ad', a12: '#ffd5eafd',
+    contrast: '#ffffff', surface: '#2f151f80',
+    indicator: '#e93d82', track: '#e93d82',
+  },
+}

package/src/tokens/colors/cyan.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const cyan: ColorScaleWithModes = {
+  light: {
+    1: '#fafdfe', 2: '#f2fafb', 3: '#def7f9', 4: '#caf1f6',
+    5: '#b5e9f0', 6: '#9ddde7', 7: '#7dcedc', 8: '#3db9cf',
+    9: '#00a2c7', 10: '#0797b9', 11: '#107d98', 12: '#0d3c48',
+    a1: '#0099cc05', a2: '#009db10d', a3: '#00c2d121', a4: '#00bcd435',
+    a5: '#01b4cc4a', a6: '#00a7c162', a7: '#009fbb82', a8: '#00a3c0c2',
+    a9: '#00a2c7', a10: '#0094b7f8', a11: '#007491ef', a12: '#00323ef2',
+    contrast: '#ffffff', surface: '#eff9facc',
+    indicator: '#00a2c7', track: '#00a2c7',
+  },
+  dark: {
+    1: '#0b161a', 2: '#101b20', 3: '#082c36', 4: '#003848',
+    5: '#004558', 6: '#045468', 7: '#12677e', 8: '#11809c',
+    9: '#00a2c7', 10: '#23afd0', 11: '#4ccce6', 12: '#b6ecf7',
+    a1: '#0091f70a', a2: '#02a7f211', a3: '#00befd28', a4: '#00baff3b',
+    a5: '#00befd4d', a6: '#00c7fd5e', a7: '#14cdff75', a8: '#11cfff95',
+    a9: '#00cfffc3', a10: '#28d6ffcd', a11: '#52e1fee5', a12: '#bbf3fef7',
+    contrast: '#ffffff', surface: '#11252d80',
+    indicator: '#00a2c7', track: '#00a2c7',
+  },
+}

package/src/tokens/colors/gold.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const gold: ColorScaleWithModes = {
+  light: {
+    1: '#fdfdfc', 2: '#faf9f2', 3: '#f2f0e7', 4: '#eae6db',
+    5: '#e1dccf', 6: '#d8d0bf', 7: '#cbc0aa', 8: '#b9a88d',
+    9: '#978365', 10: '#8c7a5e', 11: '#71624b', 12: '#3b352b',
+    a1: '#55550003', a2: '#9d8a000d', a3: '#75600018', a4: '#6b4e0024',
+    a5: '#60460030', a6: '#64440040', a7: '#63420055', a8: '#633d0072',
+    a9: '#5332009a', a10: '#492d00a1', a11: '#362100b4', a12: '#130c00d4',
+    contrast: '#ffffff', surface: '#f9f8efcc',
+    indicator: '#978365', track: '#978365',
+  },
+  dark: {
+    1: '#121211', 2: '#1b1a17', 3: '#24231f', 4: '#2d2b26',
+    5: '#38352e', 6: '#444039', 7: '#544f46', 8: '#696256',
+    9: '#978365', 10: '#a39073', 11: '#cbb99f', 12: '#e8e2d9',
+    a1: '#91911102', a2: '#f9e29d0b', a3: '#f8ecbb15', a4: '#ffeec41e',
+    a5: '#feecc22a', a6: '#feebcb37', a7: '#ffedcd48', a8: '#fdeaca5f',
+    a9: '#ffdba690', a10: '#fedfb09d', a11: '#fee7c6c8', a12: '#fef7ede7',
+    contrast: '#ffffff', surface: '#25231d80',
+    indicator: '#978365', track: '#978365',
+  },
+}

package/src/tokens/colors/grass.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const grass: ColorScaleWithModes = {
+  light: {
+    1: '#fbfefb', 2: '#f5fbf5', 3: '#e9f6e9', 4: '#daf1db',
+    5: '#c9e8ca', 6: '#b2ddb5', 7: '#94ce9a', 8: '#65ba74',
+    9: '#46a758', 10: '#3e9b4f', 11: '#2a7e3b', 12: '#203c25',
+    a1: '#00c00004', a2: '#0099000a', a3: '#00970016', a4: '#009f0725',
+    a5: '#00930536', a6: '#008f0a4d', a7: '#018b0f6b', a8: '#008d199a',
+    a9: '#008619b9', a10: '#007b17c1', a11: '#006514d5', a12: '#002006df',
+    contrast: '#ffffff', surface: '#f3faf3cc',
+    indicator: '#46a758', track: '#46a758',
+  },
+  dark: {
+    1: '#0e1511', 2: '#141a15', 3: '#1b2a1e', 4: '#1d3a24',
+    5: '#25482d', 6: '#2d5736', 7: '#366740', 8: '#3e7949',
+    9: '#46a758', 10: '#53b365', 11: '#71d083', 12: '#c2f0c2',
+    a1: '#00de1205', a2: '#5ef7780a', a3: '#70fe8c1b', a4: '#57ff802c',
+    a5: '#68ff8b3b', a6: '#71ff8f4b', a7: '#77fd925d', a8: '#77fd9070',
+    a9: '#65ff82a1', a10: '#72ff8dae', a11: '#89ff9fcd', a12: '#ceffceef',
+    contrast: '#ffffff', surface: '#19231b80',
+    indicator: '#46a758', track: '#46a758',
+  },
+}

package/src/tokens/colors/gray.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const gray: ColorScaleWithModes = {
+  light: {
+    1: '#fcfcfc', 2: '#f9f9f9', 3: '#f0f0f0', 4: '#e8e8e8',
+    5: '#e0e0e0', 6: '#d9d9d9', 7: '#cecece', 8: '#bbbbbb',
+    9: '#8d8d8d', 10: '#838383', 11: '#646464', 12: '#202020',
+    a1: '#00000003', a2: '#00000006', a3: '#0000000f', a4: '#00000017',
+    a5: '#0000001f', a6: '#00000026', a7: '#00000031', a8: '#00000044',
+    a9: '#00000072', a10: '#0000007c', a11: '#0000009b', a12: '#000000df',
+    contrast: '#ffffff', surface: '#ffffffcc',
+    indicator: '#8d8d8d', track: '#8d8d8d',
+  },
+  dark: {
+    1: '#111111', 2: '#191919', 3: '#222222', 4: '#2a2a2a',
+    5: '#313131', 6: '#3a3a3a', 7: '#484848', 8: '#606060',
+    9: '#6e6e6e', 10: '#7b7b7b', 11: '#b4b4b4', 12: '#eeeeee',
+    a1: '#00000000', a2: '#ffffff09', a3: '#ffffff12', a4: '#ffffff1b',
+    a5: '#ffffff22', a6: '#ffffff2c', a7: '#ffffff3b', a8: '#ffffff55',
+    a9: '#ffffff64', a10: '#ffffff72', a11: '#ffffffaf', a12: '#ffffffed',
+    contrast: '#ffffff', surface: '#21212180',
+    indicator: '#6e6e6e', track: '#6e6e6e',
+  },
+}

package/src/tokens/colors/green.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const green: ColorScaleWithModes = {
+  light: {
+    1: '#fbfefc', 2: '#f4fbf6', 3: '#e6f6eb', 4: '#d6f1df',
+    5: '#c4e8d1', 6: '#adddc0', 7: '#8eceaa', 8: '#5bb98b',
+    9: '#30a46c', 10: '#2b9a66', 11: '#218358', 12: '#193b2d',
+    a1: '#00c04004', a2: '#00a32f0b', a3: '#00a43319', a4: '#00a83829',
+    a5: '#019c393b', a6: '#00963c52', a7: '#00914071', a8: '#00924ba4',
+    a9: '#008f4acf', a10: '#008647d4', a11: '#00713fde', a12: '#002616e6',
+    contrast: '#ffffff', surface: '#f1faf4cc',
+    indicator: '#30a46c', track: '#30a46c',
+  },
+  dark: {
+    1: '#0e1512', 2: '#121b17', 3: '#132d21', 4: '#113b29',
+    5: '#174933', 6: '#20573e', 7: '#28684a', 8: '#2f7c57',
+    9: '#30a46c', 10: '#33b074', 11: '#3dd68c', 12: '#b1f1cb',
+    a1: '#00de4505', a2: '#29f99d0b', a3: '#22ff991e', a4: '#11ff992d',
+    a5: '#2bffa23c', a6: '#44ffaa4b', a7: '#50fdac5e', a8: '#54ffad73',
+    a9: '#44ffa49e', a10: '#43fea4ab', a11: '#46fea5d4', a12: '#bbffd7f0',
+    contrast: '#ffffff', surface: '#15251d80',
+    indicator: '#30a46c', track: '#30a46c',
+  },
+}

package/src/tokens/colors/index.ts

@@ -0,0 +1,36 @@
+// WARNING: Auto-generated — do not edit manually
+// To update: yarn generate:colors
+
+export type { ColorScale, ColorScaleWithModes, AccentColor, GrayColor } from './types'
+
+export { tomato } from './tomato'
+export { red } from './red'
+export { ruby } from './ruby'
+export { crimson } from './crimson'
+export { pink } from './pink'
+export { plum } from './plum'
+export { purple } from './purple'
+export { violet } from './violet'
+export { iris } from './iris'
+export { indigo } from './indigo'
+export { blue } from './blue'
+export { cyan } from './cyan'
+export { teal } from './teal'
+export { jade } from './jade'
+export { green } from './green'
+export { grass } from './grass'
+export { bronze } from './bronze'
+export { gold } from './gold'
+export { brown } from './brown'
+export { orange } from './orange'
+export { amber } from './amber'
+export { yellow } from './yellow'
+export { lime } from './lime'
+export { mint } from './mint'
+export { sky } from './sky'
+export { gray } from './gray'
+export { mauve } from './mauve'
+export { slate } from './slate'
+export { sage } from './sage'
+export { olive } from './olive'
+export { sand } from './sand'

package/src/tokens/colors/indigo.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const indigo: ColorScaleWithModes = {
+  light: {
+    1: '#fdfdfe', 2: '#f7f9ff', 3: '#edf2fe', 4: '#e1e9ff',
+    5: '#d2deff', 6: '#c1d0ff', 7: '#abbdf9', 8: '#8da4ef',
+    9: '#3e63dd', 10: '#3358d4', 11: '#3a5bc7', 12: '#1f2d5c',
+    a1: '#00008002', a2: '#0040ff08', a3: '#0047f112', a4: '#0044ff1e',
+    a5: '#0044ff2d', a6: '#003eff3e', a7: '#0037ed54', a8: '#0034dc72',
+    a9: '#0031d2c1', a10: '#002ec9cc', a11: '#002bb7c5', a12: '#001046e0',
+    contrast: '#ffffff', surface: '#f5f8ffcc',
+    indicator: '#3e63dd', track: '#3e63dd',
+  },
+  dark: {
+    1: '#11131f', 2: '#141726', 3: '#182449', 4: '#1d2e62',
+    5: '#253974', 6: '#304384', 7: '#3a4f97', 8: '#435db1',
+    9: '#3e63dd', 10: '#5472e4', 11: '#9eb1ff', 12: '#d6e1ff',
+    a1: '#1133ff0f', a2: '#3354fa17', a3: '#2f62ff3c', a4: '#3566ff57',
+    a5: '#4171fd6b', a6: '#5178fd7c', a7: '#5a7fff90', a8: '#5b81feac',
+    a9: '#4671ffdb', a10: '#5c7efee3', a11: '#9eb1ff', a12: '#d6e1ff',
+    contrast: '#ffffff', surface: '#171d3b80',
+    indicator: '#3e63dd', track: '#3e63dd',
+  },
+}

package/src/tokens/colors/iris.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const iris: ColorScaleWithModes = {
+  light: {
+    1: '#fdfdff', 2: '#f8f8ff', 3: '#f0f1fe', 4: '#e6e7ff',
+    5: '#dadcff', 6: '#cbcdff', 7: '#b8baf8', 8: '#9b9ef0',
+    9: '#5b5bd6', 10: '#5151cd', 11: '#5753c6', 12: '#272962',
+    a1: '#0000ff02', a2: '#0000ff07', a3: '#0011ee0f', a4: '#000bff19',
+    a5: '#000eff25', a6: '#000aff34', a7: '#0008e647', a8: '#0008d964',
+    a9: '#0000c0a4', a10: '#0000b6ae', a11: '#0600abac', a12: '#000246d8',
+    contrast: '#ffffff', surface: '#f6f6ffcc',
+    indicator: '#5b5bd6', track: '#5b5bd6',
+  },
+  dark: {
+    1: '#13131e', 2: '#171625', 3: '#202248', 4: '#262a65',
+    5: '#303374', 6: '#3d3e82', 7: '#4a4a95', 8: '#5958b1',
+    9: '#5b5bd6', 10: '#6e6ade', 11: '#b1a9ff', 12: '#e0dffe',
+    a1: '#3636fe0e', a2: '#564bf916', a3: '#525bff3b', a4: '#4d58ff5a',
+    a5: '#5b62fd6b', a6: '#6d6ffd7a', a7: '#7777fe8e', a8: '#7b7afeac',
+    a9: '#6a6afed4', a10: '#7d79ffdc', a11: '#b1a9ff', a12: '#e1e0fffe',
+    contrast: '#ffffff', surface: '#1d1b3980',
+    indicator: '#5b5bd6', track: '#5b5bd6',
+  },
+}

package/src/tokens/colors/jade.ts

@@ -0,0 +1,28 @@
+// WARNING: Auto-generated — do not edit manually
+// Source: @radix-ui/colors (exact hex values, unmodified)
+// To update: yarn generate:colors
+
+import type { ColorScaleWithModes } from './types'
+
+export const jade: ColorScaleWithModes = {
+  light: {
+    1: '#fbfefd', 2: '#f4fbf7', 3: '#e6f7ed', 4: '#d6f1e3',
+    5: '#c3e9d7', 6: '#acdec8', 7: '#8bceb6', 8: '#56ba9f',
+    9: '#29a383', 10: '#26997b', 11: '#208368', 12: '#1d3b31',
+    a1: '#00c08004', a2: '#00a3460b', a3: '#00ae4819', a4: '#00a85129',
+    a5: '#00a2553c', a6: '#009a5753', a7: '#00945f74', a8: '#00976ea9',
+    a9: '#00916bd6', a10: '#008764d9', a11: '#007152df', a12: '#002217e2',
+    contrast: '#ffffff', surface: '#f1faf5cc',
+    indicator: '#29a383', track: '#29a383',
+  },
+  dark: {
+    1: '#0d1512', 2: '#121c18', 3: '#0f2e22', 4: '#0b3b2c',
+    5: '#114837', 6: '#1b5745', 7: '#246854', 8: '#2a7e68',
+    9: '#29a383', 10: '#27b08b', 11: '#1fd8a4', 12: '#adf0d4',
+    a1: '#00de4505', a2: '#27fba60c', a3: '#02f99920', a4: '#00ffaa2d',
+    a5: '#11ffb63b', a6: '#34ffc24b', a7: '#45fdc75e', a8: '#48ffcf75',
+    a9: '#38feca9d', a10: '#31fec7ab', a11: '#21fec0d6', a12: '#b8ffe1ef',
+    contrast: '#ffffff', surface: '#13271f80',
+    indicator: '#29a383', track: '#29a383',
+  },
+}