@titan-design/react-ui 0.0.2 → 0.1.1

package/src/components/ui/tooltip/Tooltip.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useRef } from 'react'
+import { View, Text, Pressable, Modal, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type TooltipPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'right'
+
+export interface TooltipProps extends ViewProps {
+  /** Tooltip content */
+  label: string
+  /** Trigger element */
+  children: React.ReactNode
+  /** Tooltip placement */
+  placement?: TooltipPlacement
+  /** Delay before showing (ms) */
+  openDelay?: number
+  /** Delay before hiding (ms) */
+  closeDelay?: number
+  /** Whether tooltip has an arrow */
+  hasArrow?: boolean
+  /** Whether tooltip is disabled */
+  isDisabled?: boolean
+  /** Additional className for tooltip */
+  className?: string
+}
+
+/**
+ * Tooltip component for showing additional information on hover/press.
+ *
+ * Note: On native, tooltips appear on long press. On web, they appear on hover.
+ *
+ * @example
+ * <Tooltip label="This is a tooltip">
+ *   <Button><ButtonText>Hover me</ButtonText></Button>
+ * </Tooltip>
+ */
+export function Tooltip({
+  label,
+  children,
+  placement = 'top',
+  openDelay = 0,
+  closeDelay = 0,
+  hasArrow = true,
+  isDisabled = false,
+  className,
+  ...props
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const openTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const clearTimeouts = () => {
+    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)
+    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
+  }
+
+  const show = () => {
+    if (isDisabled) return
+    clearTimeouts()
+    if (openDelay > 0) {
+      openTimeoutRef.current = setTimeout(() => setIsVisible(true), openDelay)
+    } else {
+      setIsVisible(true)
+    }
+  }
+
+  const hide = () => {
+    clearTimeouts()
+    if (closeDelay > 0) {
+      closeTimeoutRef.current = setTimeout(() => setIsVisible(false), closeDelay)
+    } else {
+      setIsVisible(false)
+    }
+  }
+
+  // Arrow positioning
+  const arrowStyles = {
+    top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800',
+    'top-start': 'bottom-0 left-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800',
+    'top-end': 'bottom-0 right-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800',
+    bottom: 'top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800',
+    'bottom-start': 'top-0 left-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800',
+    'bottom-end': 'top-0 right-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800',
+    left: 'right-0 top-1/2 translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-neutral-800',
+    right: 'left-0 top-1/2 -translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-neutral-800',
+  }
+
+  // Tooltip positioning
+  const tooltipPositionStyles = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  }
+
+  return (
+    <View className="relative" {...props}>
+      <Pressable
+        onHoverIn={show}
+        onHoverOut={hide}
+        onLongPress={show}
+        onPressOut={hide}
+        delayLongPress={500}
+      >
+        {children}
+      </Pressable>
+
+      {isVisible && (
+        <View
+          className={cn(
+            'absolute z-50',
+            tooltipPositionStyles[placement],
+            className
+          )}
+          pointerEvents="none"
+        >
+          <View className="bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs">
+            <Text className="text-white text-sm">{label}</Text>
+            {hasArrow && (
+              <View
+                className={cn(
+                  'absolute w-0 h-0 border-4',
+                  arrowStyles[placement]
+                )}
+              />
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip'
+export type { TooltipProps, TooltipPlacement } from './Tooltip'

package/src/index.ts

@@ -0,0 +1,10 @@
+// Main entry point for @titan-design/react-ui
+
+// Components
+export * from './components'
+
+// Theme
+export * from './theme'
+
+// Utilities
+export * from './utils'

package/src/test/setup.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest/globals" />
+import '@testing-library/jest-dom'
+import { expect, afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import { toHaveNoViolations } from 'jest-axe'
+
+// Extend Vitest's expect with jest-axe matchers
+expect.extend(toHaveNoViolations)
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup()
+})
+
+// Mock react-native components for web testing
+vi.mock('react-native', async () => {
+  const RNW = await vi.importActual('react-native-web')
+  return RNW
+})

package/src/theme/Colors.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { primitiveColors, discreteRainbow } from './tokens/primitives'
+import { semanticColorsLight, semanticColorsDark } from './tokens/semantic'
+
+const meta: Meta = {
+  title: 'Design Tokens/Colors',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+interface ColorSwatchProps {
+  name: string
+  value: string
+  textColor?: string
+}
+
+function ColorSwatch({ name, value, textColor = '#FFFFFF' }: ColorSwatchProps) {
+  const displayValue = value.startsWith('rgba') ? value : value.toUpperCase()
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+      <View
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 8,
+          backgroundColor: value,
+          borderWidth: 1,
+          borderColor: '#374151',
+        }}
+      />
+      <View>
+        <Text className="font-semibold text-text-primary text-sm">
+          {name}
+        </Text>
+        <Text className="text-text-secondary text-xs">
+          {displayValue}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+function ColorScale({ name, colors }: { name: string; colors: Record<string | number, string> }) {
+  return (
+    <View style={{ marginBottom: 32 }}>
+      <Text className="text-lg font-bold text-text-primary mb-3">
+        {name}
+      </Text>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+        {Object.entries(colors).map(([shade, color]) => (
+          <View key={shade} style={{ alignItems: 'center' }}>
+            <View
+              style={{
+                width: 64,
+                height: 64,
+                borderRadius: 8,
+                backgroundColor: color,
+                borderWidth: 1,
+                borderColor: '#374151',
+              }}
+            />
+            <Text className="text-text-secondary text-xs mt-1">
+              {shade}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export const PrimitiveColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Primitive Colors
+      </Text>
+      <Text className="text-text-secondary mb-6">
+        Raw color values. Use semantic tokens instead when building components.
+      </Text>
+
+      <ColorScale name="Orange (Primary Brand)" colors={primitiveColors.accent} />
+      <ColorScale name="Steel (Secondary Brand)" colors={primitiveColors.steel} />
+      <ColorScale name="Blue" colors={primitiveColors.blue} />
+      <ColorScale name="Green" colors={primitiveColors.green} />
+      <ColorScale name="Teal (Success)" colors={primitiveColors.teal} />
+      <ColorScale name="Red (Error)" colors={primitiveColors.red} />
+      <ColorScale name="Sky (Info)" colors={primitiveColors.sky} />
+      <ColorScale name="Neutral" colors={primitiveColors.neutral} />
+      <ColorScale name="Charcoal (Dark Backgrounds)" colors={primitiveColors.charcoal} />
+    </View>
+  ),
+}
+
+export const BrandColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Brand Colors
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="brand-primary" value={semanticColorsLight['brand-primary']} />
+        <ColorSwatch name="brand-primary-light" value={semanticColorsLight['brand-primary-light']} />
+        <ColorSwatch name="brand-primary-dark" value={semanticColorsLight['brand-primary-dark']} />
+        <ColorSwatch name="brand-secondary" value={semanticColorsLight['brand-secondary']} />
+        <ColorSwatch name="brand-secondary-light" value={semanticColorsLight['brand-secondary-light']} />
+        <ColorSwatch name="brand-secondary-dark" value={semanticColorsLight['brand-secondary-dark']} />
+      </View>
+    </View>
+  ),
+}
+
+export const StatusColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Status Colors
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="status-success" value={semanticColorsLight['status-success']} />
+        <ColorSwatch name="status-error" value={semanticColorsLight['status-error']} />
+        <ColorSwatch name="status-warning" value={semanticColorsLight['status-warning']} />
+        <ColorSwatch name="status-info" value={semanticColorsLight['status-info']} />
+      </View>
+    </View>
+  ),
+}
+
+export const TextColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Text Colors (Dark Mode)
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="text-primary" value={semanticColorsDark['text-primary']} />
+        <ColorSwatch name="text-secondary" value={semanticColorsDark['text-secondary']} />
+        <ColorSwatch name="text-tertiary" value={semanticColorsDark['text-tertiary']} />
+        <ColorSwatch name="text-disabled" value={semanticColorsDark['text-disabled']} />
+        <ColorSwatch name="text-link" value={semanticColorsDark['text-link']} />
+      </View>
+    </View>
+  ),
+}
+
+export const SurfaceColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Surface Colors (Dark Mode)
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="surface-base" value={semanticColorsDark['surface-base']} />
+        <ColorSwatch name="surface-elevated" value={semanticColorsDark['surface-elevated']} />
+        <ColorSwatch name="surface-raised" value={semanticColorsDark['surface-raised']} />
+        <ColorSwatch name="surface-input" value={semanticColorsDark['surface-input']} />
+        <ColorSwatch name="background-base" value={semanticColorsDark['background-base']} />
+        <ColorSwatch name="background-default" value={semanticColorsDark['background-default']} />
+      </View>
+    </View>
+  ),
+}
+
+export const ResultColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Result/Outcome Colors
+      </Text>
+      <Text className="text-text-secondary mb-6">
+        Colors for indicating positive, negative, or neutral outcomes.
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="result-improve" value={semanticColorsLight['result-improve']} />
+        <ColorSwatch name="result-improve-light" value={semanticColorsLight['result-improve-light']} />
+        <ColorSwatch name="result-degrade" value={semanticColorsLight['result-degrade']} />
+        <ColorSwatch name="result-degrade-light" value={semanticColorsLight['result-degrade-light']} />
+        <ColorSwatch name="result-inconclusive" value={semanticColorsLight['result-inconclusive']} />
+        <ColorSwatch name="result-inconclusive-light" value={semanticColorsLight['result-inconclusive-light']} />
+        <ColorSwatch name="result-neutral" value={semanticColorsLight['result-neutral']} />
+      </View>
+    </View>
+  ),
+}
+
+export const DataVisualizationColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Data Visualization Colors
+      </Text>
+      <Text className="text-text-secondary mb-6">
+        Colors optimized for charts and data visualization. Based on Paul Tol&apos;s color schemes.
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="data-1" value={semanticColorsLight['data-1']} />
+        <ColorSwatch name="data-2" value={semanticColorsLight['data-2']} />
+        <ColorSwatch name="data-3" value={semanticColorsLight['data-3']} textColor="#000000" />
+        <ColorSwatch name="data-4" value={semanticColorsLight['data-4']} />
+        <ColorSwatch name="data-5" value={semanticColorsLight['data-5']} />
+        <ColorSwatch name="data-6" value={semanticColorsLight['data-6']} />
+        <ColorSwatch name="data-7" value={semanticColorsLight['data-7']} textColor="#000000" />
+        <ColorSwatch name="data-8" value={semanticColorsLight['data-8']} textColor="#000000" />
+        <ColorSwatch name="data-9" value={semanticColorsLight['data-9']} textColor="#000000" />
+        <ColorSwatch name="data-10" value={semanticColorsLight['data-10']} />
+      </View>
+
+      <Text className="text-lg font-bold text-text-primary mt-8 mb-3">
+        Full Discrete Rainbow Palette
+      </Text>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
+        {discreteRainbow.map((color, index) => (
+          <View
+            key={index}
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: 4,
+              backgroundColor: color,
+              borderWidth: 1,
+              borderColor: '#374151',
+            }}
+          />
+        ))}
+      </View>
+    </View>
+  ),
+}
+
+export const BorderColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Border Colors (Dark Mode)
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="border-default" value={semanticColorsDark['border-default']} />
+        <ColorSwatch name="border-subtle" value={semanticColorsDark['border-subtle']} />
+        <ColorSwatch name="border-strong" value={semanticColorsDark['border-strong']} />
+        <ColorSwatch name="border-focus" value={semanticColorsDark['border-focus']} />
+        <ColorSwatch name="border-input" value={semanticColorsDark['border-input']} />
+        <ColorSwatch name="border-input-hover" value={semanticColorsDark['border-input-hover']} />
+        <ColorSwatch name="border-input-focus" value={semanticColorsDark['border-input-focus']} />
+        <ColorSwatch name="border-input-error" value={semanticColorsDark['border-input-error']} />
+      </View>
+    </View>
+  ),
+}

package/src/theme/config.ts

@@ -0,0 +1,193 @@
+/**
+ * Theme Configuration
+ *
+ * Maps semantic tokens to CSS custom properties for runtime theming.
+ * Dark mode is the default theme.
+ */
+
+import { semanticColorsLight, semanticColorsDark, type ThemeMode } from './tokens/semantic'
+
+// CSS custom properties for light mode
+export const lightThemeCSSVars = {
+  '--color-brand-primary': semanticColorsLight['brand-primary'],
+  '--color-brand-primary-light': semanticColorsLight['brand-primary-light'],
+  '--color-brand-primary-dark': semanticColorsLight['brand-primary-dark'],
+  '--color-brand-primary-subtle': semanticColorsLight['brand-primary-subtle'],
+  '--color-brand-secondary': semanticColorsLight['brand-secondary'],
+  '--color-brand-secondary-light': semanticColorsLight['brand-secondary-light'],
+  '--color-brand-secondary-dark': semanticColorsLight['brand-secondary-dark'],
+  '--color-brand-secondary-subtle': semanticColorsLight['brand-secondary-subtle'],
+
+  '--color-on-brand-primary': semanticColorsLight['on-brand-primary'],
+  '--color-on-brand-secondary': semanticColorsLight['on-brand-secondary'],
+
+  '--color-status-success': semanticColorsLight['status-success'],
+  '--color-status-success-subtle': semanticColorsLight['status-success-subtle'],
+  '--color-status-error': semanticColorsLight['status-error'],
+  '--color-status-error-subtle': semanticColorsLight['status-error-subtle'],
+  '--color-status-warning': semanticColorsLight['status-warning'],
+  '--color-status-warning-subtle': semanticColorsLight['status-warning-subtle'],
+  '--color-status-info': semanticColorsLight['status-info'],
+  '--color-status-info-subtle': semanticColorsLight['status-info-subtle'],
+
+  '--color-text-primary': semanticColorsLight['text-primary'],
+  '--color-text-secondary': semanticColorsLight['text-secondary'],
+  '--color-text-tertiary': semanticColorsLight['text-tertiary'],
+  '--color-text-disabled': semanticColorsLight['text-disabled'],
+  '--color-text-inverse': semanticColorsLight['text-inverse'],
+  '--color-text-link': semanticColorsLight['text-link'],
+
+  '--color-surface-base': semanticColorsLight['surface-base'],
+  '--color-surface-elevated': semanticColorsLight['surface-elevated'],
+  '--color-surface-raised': semanticColorsLight['surface-raised'],
+
+  '--color-background-base': semanticColorsLight['background-base'],
+  '--color-background-default': semanticColorsLight['background-default'],
+  '--color-background-subtle': semanticColorsLight['background-subtle'],
+
+  '--color-border-default': semanticColorsLight['border-default'],
+  '--color-border-subtle': semanticColorsLight['border-subtle'],
+  '--color-border-strong': semanticColorsLight['border-strong'],
+  '--color-border-focus': semanticColorsLight['border-focus'],
+
+  '--color-interactive-hover': semanticColorsLight['interactive-hover'],
+  '--color-interactive-focus': semanticColorsLight['interactive-focus'],
+  '--color-interactive-active': semanticColorsLight['interactive-active'],
+  '--color-interactive-selected': semanticColorsLight['interactive-selected'],
+  '--color-interactive-disabled': semanticColorsLight['interactive-disabled'],
+
+  '--color-divider': semanticColorsLight['divider'],
+} as const
+
+// CSS custom properties for dark mode (default)
+export const darkThemeCSSVars = {
+  '--color-brand-primary': semanticColorsDark['brand-primary'],
+  '--color-brand-primary-light': semanticColorsDark['brand-primary-light'],
+  '--color-brand-primary-dark': semanticColorsDark['brand-primary-dark'],
+  '--color-brand-primary-subtle': semanticColorsDark['brand-primary-subtle'],
+  '--color-brand-secondary': semanticColorsDark['brand-secondary'],
+  '--color-brand-secondary-light': semanticColorsDark['brand-secondary-light'],
+  '--color-brand-secondary-dark': semanticColorsDark['brand-secondary-dark'],
+  '--color-brand-secondary-subtle': semanticColorsDark['brand-secondary-subtle'],
+
+  '--color-on-brand-primary': semanticColorsDark['on-brand-primary'],
+  '--color-on-brand-secondary': semanticColorsDark['on-brand-secondary'],
+
+  '--color-status-success': semanticColorsDark['status-success'],
+  '--color-status-success-subtle': semanticColorsDark['status-success-subtle'],
+  '--color-status-error': semanticColorsDark['status-error'],
+  '--color-status-error-subtle': semanticColorsDark['status-error-subtle'],
+  '--color-status-warning': semanticColorsDark['status-warning'],
+  '--color-status-warning-subtle': semanticColorsDark['status-warning-subtle'],
+  '--color-status-info': semanticColorsDark['status-info'],
+  '--color-status-info-subtle': semanticColorsDark['status-info-subtle'],
+
+  '--color-text-primary': semanticColorsDark['text-primary'],
+  '--color-text-secondary': semanticColorsDark['text-secondary'],
+  '--color-text-tertiary': semanticColorsDark['text-tertiary'],
+  '--color-text-disabled': semanticColorsDark['text-disabled'],
+  '--color-text-inverse': semanticColorsDark['text-inverse'],
+  '--color-text-link': semanticColorsDark['text-link'],
+
+  '--color-surface-base': semanticColorsDark['surface-base'],
+  '--color-surface-elevated': semanticColorsDark['surface-elevated'],
+  '--color-surface-raised': semanticColorsDark['surface-raised'],
+
+  '--color-background-base': semanticColorsDark['background-base'],
+  '--color-background-default': semanticColorsDark['background-default'],
+  '--color-background-subtle': semanticColorsDark['background-subtle'],
+
+  '--color-border-default': semanticColorsDark['border-default'],
+  '--color-border-subtle': semanticColorsDark['border-subtle'],
+  '--color-border-strong': semanticColorsDark['border-strong'],
+  '--color-border-focus': semanticColorsDark['border-focus'],
+
+  '--color-interactive-hover': semanticColorsDark['interactive-hover'],
+  '--color-interactive-focus': semanticColorsDark['interactive-focus'],
+  '--color-interactive-active': semanticColorsDark['interactive-active'],
+  '--color-interactive-selected': semanticColorsDark['interactive-selected'],
+  '--color-interactive-disabled': semanticColorsDark['interactive-disabled'],
+
+  '--color-divider': semanticColorsDark['divider'],
+} as const
+
+// Helper to get CSS vars for a theme mode
+export function getThemeCSSVars(mode: ThemeMode) {
+  return mode === 'dark' ? darkThemeCSSVars : lightThemeCSSVars
+}
+
+// Gluestack UI theme configuration
+export const gluestackConfig = {
+  tokens: {
+    colors: {
+      // Map to our semantic colors via CSS vars
+      primary500: 'var(--color-brand-primary)',
+      primary600: 'var(--color-brand-primary-dark)',
+      primary400: 'var(--color-brand-primary-light)',
+
+      secondary500: 'var(--color-brand-secondary)',
+      secondary600: 'var(--color-brand-secondary-dark)',
+      secondary400: 'var(--color-brand-secondary-light)',
+
+      success500: 'var(--color-status-success)',
+      error500: 'var(--color-status-error)',
+      warning500: 'var(--color-status-warning)',
+      info500: 'var(--color-status-info)',
+
+      textLight: 'var(--color-text-primary)',
+      textDark: 'var(--color-text-inverse)',
+
+      backgroundLight: 'var(--color-background-default)',
+      backgroundDark: 'var(--color-surface-base)',
+    },
+    space: {
+      '0': 0,
+      '1': 4,
+      '2': 8,
+      '3': 12,
+      '4': 16,
+      '5': 20,
+      '6': 24,
+      '8': 32,
+      '10': 40,
+      '12': 48,
+      '16': 64,
+      '20': 80,
+      '24': 96,
+    },
+    radii: {
+      none: 0,
+      sm: 4,
+      md: 8,
+      lg: 12,
+      xl: 16,
+      '2xl': 24,
+      full: 9999,
+    },
+    fontSizes: {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+      '2xl': 24,
+      '3xl': 30,
+      '4xl': 36,
+      '5xl': 48,
+    },
+  },
+  aliases: {
+    bg: 'backgroundColor',
+    p: 'padding',
+    px: 'paddingHorizontal',
+    py: 'paddingVertical',
+    m: 'margin',
+    mx: 'marginHorizontal',
+    my: 'marginVertical',
+    h: 'height',
+    w: 'width',
+    rounded: 'borderRadius',
+  },
+} as const
+
+export type ThemeConfig = typeof gluestackConfig