radix-native 0.0.1

package/src/tokens/radius.ts

@@ -0,0 +1,56 @@
+export type RadiusToken = 'none' | 'small' | 'medium' | 'large' | 'full'
+
+/** Radius level (1–6) — components choose the level that fits their visual size. */
+export type RadiusLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+/**
+ * Base radius values in pixels at token='medium', scaling=1.
+ * Final radius = BASE_RADIUS[level] * RADIUS_FACTOR[token]
+ */
+const BASE_RADIUS: Record<RadiusLevel, number> = {
+  1: 3,
+  2: 4,
+  3: 6,
+  4: 8,
+  5: 12,
+  6: 16,
+}
+
+/**
+ * Multiplier per radius token.
+ * none=0, small=0.75, medium=1, large=1.5, full=1.5
+ */
+const RADIUS_FACTOR: Record<RadiusToken, number> = {
+  none: 0,
+  small: 0.75,
+  medium: 1,
+  large: 1.5,
+  full: 1.5,
+}
+
+/**
+ * Pill radius per token. Only 'full' produces a pill shape (9999); all others are 0.
+ */
+const RADIUS_FULL: Record<RadiusToken, number> = {
+  none: 0,
+  small: 0,
+  medium: 0,
+  large: 0,
+  full: 9999,
+}
+
+/**
+ * Returns the border radius in pixels for a given token and level.
+ * Each component picks the level that matches its visual size.
+ */
+export function getRadius(token: RadiusToken, level: RadiusLevel): number {
+  return Math.round(BASE_RADIUS[level] * RADIUS_FACTOR[token])
+}
+
+/**
+ * Returns the full (pill) radius for a given token.
+ * Use this for components that should be fully rounded when token='full'.
+ */
+export function getFullRadius(token: RadiusToken): number {
+  return RADIUS_FULL[token]
+}

package/src/tokens/scaling.ts

@@ -0,0 +1,10 @@
+export type ScalingMode = '90%' | '95%' | '100%' | '105%' | '110%'
+
+/** Multiplier applied to space, fontSize and lineHeight */
+export const scalingMap: Record<ScalingMode, number> = {
+  '90%': 0.9,
+  '95%': 0.95,
+  '100%': 1.0,
+  '105%': 1.05,
+  '110%': 1.1,
+}

package/src/tokens/spacing.ts

@@ -0,0 +1,21 @@
+export type SpaceToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+
+/**
+ * Margin token — superset of SpaceToken that includes negative values.
+ * Matches Radix's marginValues which include '-1' through '-9'.
+ */
+export type MarginToken = -9 | -8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+
+/** Base space scale in pixels (before scaling is applied) */
+export const space: Record<SpaceToken, number> = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 24,
+  6: 32,
+  7: 40,
+  8: 48,
+  9: 64,
+}

package/src/tokens/typography.ts

@@ -0,0 +1,60 @@
+export type FontSizeToken = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+
+/** Base font size scale in pixels (before scaling is applied) */
+export const fontSize: Record<FontSizeToken, number> = {
+  1: 12,
+  2: 14,
+  3: 16,
+  4: 18,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 35,
+  9: 60,
+}
+
+/** Base line height scale in pixels (before scaling is applied) */
+export const lineHeight: Record<FontSizeToken, number> = {
+  1: 16,
+  2: 20,
+  3: 24,
+  4: 26,
+  5: 28,
+  6: 30,
+  7: 36,
+  8: 40,
+  9: 60,
+}
+
+/**
+ * Heading line heights in pixels (before scaling).
+ * Tighter than body line heights for sizes 2–5.
+ */
+export const headingLineHeight: Record<FontSizeToken, number> = {
+  1: 16,
+  2: 18,
+  3: 22,
+  4: 24,
+  5: 26,
+  6: 30,
+  7: 36,
+  8: 40,
+  9: 60,
+}
+
+/**
+ * Letter spacing as em multipliers per size token.
+ * In RN, letterSpacing is in pixels — multiply by the resolved fontSize:
+ *   letterSpacing = letterSpacingEm[size] * resolvedFontSize
+ */
+export const letterSpacingEm: Record<FontSizeToken, number> = {
+  1: 0.0025,
+  2: 0,
+  3: 0,
+  4: -0.0025,
+  5: -0.005,
+  6: -0.00625,
+  7: -0.0075,
+  8: -0.01,
+  9: -0.025,
+}

package/src/utils/applyScaling.ts

@@ -0,0 +1,6 @@
+import { scalingMap, type ScalingMode } from '../tokens/scaling'
+
+/** Applies the scaling multiplier to a base pixel value and rounds to nearest integer. */
+export function applyScaling(value: number, scaling: ScalingMode): number {
+  return Math.round(value * scalingMap[scaling])
+}

package/src/utils/classicEffect.ts

@@ -0,0 +1,46 @@
+import { Platform } from 'react-native'
+import type { ViewStyle } from 'react-native'
+
+/**
+ * Returns ViewStyle that approximates the Radix "classic" 3D effect
+ * using only native RN shadow capabilities.
+ *
+ * Radix CSS uses linear-gradient overlays + inset box-shadows which
+ * are not available in RN. We approximate with an outer drop shadow
+ * and pressed state removal (simulates "pushed in").
+ */
+export function getClassicEffect(
+  appearance: 'light' | 'dark',
+  options?: { pressed?: boolean; disabled?: boolean },
+): ViewStyle {
+  const isLight = appearance === 'light'
+  const pressed = options?.pressed ?? false
+  const isDisabled = options?.disabled ?? false
+
+  // Disabled: no shadow at all — keep it flat like the other disabled variants
+  if (isDisabled) return {}
+
+  // Pressed: remove shadow for "pushed in" feel
+  if (pressed) {
+    return Platform.select({
+      ios: {
+        shadowColor: 'transparent',
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0,
+        shadowRadius: 0,
+      },
+      default: { elevation: 0 },
+    })!
+  }
+
+  // Normal resting state — subtle drop shadow
+  return Platform.select({
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: isLight ? 0.15 : 0.3,
+      shadowRadius: 2,
+    },
+    default: { elevation: 2 },
+  })!
+}

package/src/utils/resolveColor.ts

@@ -0,0 +1,69 @@
+import {
+  tomato, red, ruby, crimson, pink, plum, purple, violet,
+  iris, indigo, blue, cyan, teal, jade, green, grass,
+  bronze, gold, brown, orange, amber, yellow, lime, mint, sky,
+  gray, mauve, slate, sage, olive, sand,
+} from '../tokens/colors'
+import type { AccentColor, GrayColor, ColorScaleWithModes } from '../tokens/colors/types'
+import type { ThemeColor, ColorOverrides } from '../theme/theme.types'
+
+const colorMap: Record<string, ColorScaleWithModes> = {
+  tomato, red, ruby, crimson, pink, plum, purple, violet,
+  iris, indigo, blue, cyan, teal, jade, green, grass,
+  bronze, gold, brown, orange, amber, yellow, lime, mint, sky,
+  gray, mauve, slate, sage, olive, sand,
+}
+
+/**
+ * Resolves a ThemeColor token to a hex string.
+ *
+ * - `'accent-9'`        → step 9 of the active accent color
+ * - `'accent-a9'`       → alpha step a9 of the active accent color
+ * - `'accent-contrast'` → contrast color (text over step 9 background)
+ * - `'accent-surface'`  → translucent tinted surface
+ * - `'gray-9'`          → step 9 of the resolved gray color
+ * - `'blue-9'`          → step 9 of the blue scale (exact, not aliased)
+ * - `'#ff0000'`         → returned as-is (escape hatch)
+ */
+export function resolveColor(
+  color: ThemeColor,
+  appearance: 'light' | 'dark',
+  accentColor: AccentColor,
+  resolvedGrayColor: GrayColor,
+  colorOverrides?: ColorOverrides,
+): string {
+  let colorName: string
+  let step: string
+
+  if (color.startsWith('accent-')) {
+    colorName = accentColor
+    step = color.slice('accent-'.length)
+  } else if (color.startsWith('gray-')) {
+    colorName = resolvedGrayColor
+    step = color.slice('gray-'.length)
+  } else {
+    // Named color: 'blue-9', 'tomato-a3', 'indigo-contrast', etc.
+    const dashIdx = color.lastIndexOf('-')
+    if (dashIdx <= 0) return color as string
+    colorName = color.slice(0, dashIdx)
+    step = color.slice(dashIdx + 1)
+  }
+
+  // Check overrides first (per-scale, per-mode — like CSS custom properties in Radix web)
+  if (colorOverrides) {
+    const scaleOverride = colorOverrides[colorName as keyof ColorOverrides]
+    if (scaleOverride) {
+      const modeOverride = scaleOverride[appearance]
+      if (modeOverride) {
+        const value = (modeOverride as Record<string, string>)[step]
+        if (value !== undefined) return value
+      }
+    }
+  }
+
+  // Fall back to built-in scale
+  const scale = colorMap[colorName]?.[appearance]
+  if (!scale) return color as string
+
+  return (scale as unknown as Record<string, string>)[step] ?? (color as string)
+}

package/src/utils/resolveSpace.ts

@@ -0,0 +1,13 @@
+import { space, type SpaceToken, type MarginToken } from '../tokens/spacing'
+import { scalingMap, type ScalingMode } from '../tokens/scaling'
+
+/**
+ * Returns the resolved pixel value for a SpaceToken or MarginToken with scaling applied.
+ * Negative margin tokens return a negative pixel value using the absolute space scale.
+ */
+export function resolveSpace(token: MarginToken, scaling: ScalingMode): number {
+  if (token === 0) return 0
+  const sign = token < 0 ? -1 : 1
+  const abs = Math.abs(token) as SpaceToken
+  return sign * Math.round(space[abs] * scalingMap[scaling])
+}