skiddie

Theming & tokens

Change colors, radius, spacing and motion in one place.

Pre-release

skiddie is being built. Commands and APIs on this page are the planned design and may change before v0.1.

Every value lives in components/skiddie/core/tokens.ts. The skiddie Tailwind preset turns those tokens into classes, so components use bg-sk-background, text-sk-active, rounded-sk-bar and so on.

core/tokens.ts (excerpt)
export const tokens = {
  colors: {
    light: { background: '#FFFFFF', active: '#0A0A0A', inactive: '#A1A1AA', indicator: '#0A0A0A', badge: '#EF4444' },
    dark: { background: '#0A0A0A', active: '#FAFAFA', inactive: '#71717A', indicator: '#FAFAFA', badge: '#EF4444' },
  },
  radius: { bar: 28, item: 20, indicator: 999 },
  motion: { spring: { damping: 18, stiffness: 220, mass: 1 }, durationMs: 220 },
} as const;

Token classes

TokenClasses
Colorsbg-sk-background, bg-sk-surface, text-sk-active, text-sk-inactive, bg-sk-indicator, bg-sk-badge, text-sk-badge-text, border-sk-border (any color utility works: text-, bg-, border-…, with /50 opacity)
Radiusrounded-sk-bar, rounded-sk-item, rounded-sk-indicator
Spacingpx-sk-bar-x, py-sk-bar-y, gap-sk-gap, inset-x-sk-inset, min-h-sk-touch
Typetext-sk-label

Colors are CSS variables, so light and dark switch on their own. System appearance works out of the box, and so do apps that toggle dark manually with darkMode: 'class'.

Three ways to theme

  1. Edit tokens.ts for app-wide defaults, then restart Metro (expo start -c).

  2. Override variables for a subtree with NativeWind's vars():

    import { vars } from 'nativewind';

<View style={vars({ '--sk-indicator': '125 211 252' })}>
  <FloatingTabBar {...props} />
</View>

  3. Classes on one instance, through className and classNames. See Customization.