@nwartz/design-system 0.1.0

package/index.ts

@@ -0,0 +1,89 @@
+// Tokens
+export {
+  darkColors,
+  lightColors,
+  typography,
+  elevation,
+  spacing,
+  radius,
+  colorMap,
+  spacingMap,
+  radiusMap,
+} from './tokens';
+export type {
+  ColorToken,
+  ResolvedColors,
+  BrandColors,
+  TypographyToken,
+  ElevationToken,
+  SpacingToken,
+  RadiusToken,
+} from './tokens';
+
+// Theme
+export { ThemeProvider, useTheme } from './theme';
+export type { ThemeContextValue, ThemeMode, ThemeProviderProps } from './theme';
+
+// Components
+export {
+  Box,
+  Text,
+  Card,
+  Button,
+  Icon,
+  DropdownSelect,
+  Autocomplete,
+  SegmentedTabs,
+  Badge,
+  InputField,
+  Tag,
+  Toggle,
+  DatePicker,
+  Checkbox,
+  TablePagination,
+  LinkButton,
+  BottomNavBar,
+  ProgressBar,
+  SearchBar,
+  Slider,
+  TabMenu,
+} from './components';
+export type {
+  BoxProps,
+  TextProps,
+  CardProps,
+  ButtonProps,
+  ButtonVariant,
+  IconProps,
+  IconName,
+  DropdownSelectProps,
+  DropdownItem,
+  AutocompleteProps,
+  AutocompleteSize,
+  AutocompleteState,
+  SegmentedTabsProps,
+  SegmentedTabItem,
+  BadgeProps,
+  BadgeSize,
+  BadgeColor,
+  BadgeMode,
+  InputFieldProps,
+  InputFieldSize,
+  TagProps,
+  TagSize,
+  ToggleProps,
+  ToggleSize,
+  DatePickerProps,
+  CheckboxProps,
+  CheckboxSize,
+  CheckboxType,
+  TablePaginationProps,
+  LinkButtonProps,
+  BottomNavBarProps,
+  BottomNavBarItem,
+  ProgressBarProps,
+  SearchBarProps,
+  SliderProps,
+  TabMenuProps,
+  TabMenuItem,
+} from './components';

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@nwartz/design-system",
+  "version": "0.1.0",
+  "description": "Shared design system tokens and components for rotta.am clients",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist/",
+    "tokens/",
+    "theme/",
+    "components/",
+    "index.ts",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "phosphor-react-native": ">=2.0.0",
+    "react": ">=18",
+    "react-native": ">=0.70"
+  },
+  "peerDependenciesMeta": {
+    "phosphor-react-native": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@types/react": "~19.2.2",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-security": "^4.0.0",
+    "eslint-plugin-sonarjs": "^4.0.0",
+    "globals": "^16.0.0",
+    "phosphor-react-native": "^3.0.6",
+    "prettier": "^3.0.0",
+    "react-native": "^0.87.1",
+    "tsup": "^8.0.0",
+    "typescript": "~5.7.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^4.0.0"
+  }
+}

package/theme/index.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from './theme';
+export type { ThemeContextValue, ThemeMode, ThemeProviderProps } from './theme';

package/theme/theme.tsx

@@ -0,0 +1,61 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
+
+import { darkColors, lightColors, type ResolvedColors } from '../tokens/colors';
+
+export type ThemeMode = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  mode: ThemeMode;
+  colors: ResolvedColors;
+  /** Convenience: is the current mode dark? */
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  /** Override the system color scheme. */
+  mode?: ThemeMode;
+  /** Override the full color set (e.g. from an org manifest). */
+  colors?: Partial<ResolvedColors>;
+}
+
+/**
+ * Wraps the app and provides the resolved color palette to all
+ * design-system components via `useTheme()`.
+ */
+export function ThemeProvider({ children, mode: modeOverride, colors: colorOverrides }: ThemeProviderProps) {
+  const systemScheme = useColorScheme();
+  const mode: ThemeMode = modeOverride ?? (systemScheme === 'light' ? 'light' : 'dark');
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      mode,
+      isDark: mode === 'dark',
+      colors: { ...(mode === 'dark' ? darkColors : lightColors), ...colorOverrides } as ResolvedColors,
+    }),
+    [mode, colorOverrides],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/**
+ * Access the current theme. Must be used inside a `<ThemeProvider>`.
+ *
+ * ```tsx
+ * const { colors, mode } = useTheme();
+ * ```
+ */
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+
+  if (!ctx) {
+    // Graceful fallback when used outside a provider — default to dark mode.
+    return { mode: 'dark', isDark: true, colors: darkColors };
+  }
+
+  return ctx;
+}

package/tokens/colors.ts

@@ -0,0 +1,55 @@
+/**
+ * Nwartz DS — Dark Mode color tokens.
+ *
+ * Source: Figma "Nwartz DS | Foundations Dark Mode"
+ * These are the base neutrals; brand-specific colors (primary, accent)
+ * are supplied per-org via the theme provider.
+ */
+
+export const darkColors = {
+  /** App background — the deepest layer. */
+  backgroundScreen: '#131313',
+  /** Raised surfaces (cards, sheets, modals). */
+  shapePrimary: '#1A1A1A',
+  /** Inset surfaces, secondary containers, chips. */
+  shapeSecondary: '#2D2D2D',
+  /** Borders, dividers, disabled outlines. */
+  shapeTertiary: '#404040',
+  /** Primary text on dark backgrounds. */
+  textPrimary: '#FFFFFF',
+  /** Secondary / muted text. */
+  textSecondary: '#E1E1E1',
+  /** Tertiary / placeholder text. */
+  textTertiary: '#A0A0A0',
+  /** Brand primary — neon lime accent. */
+  primaryPure: '#CEFE00',
+  /** Brand primary — darker shade for hover/pressed. */
+  primaryMid: '#87AD00',
+  /** Destructive actions. */
+  dangerMid: '#BB4355',
+} as const;
+
+export const lightColors = {
+  backgroundScreen: '#F6F5F4',
+  shapePrimary: '#FAF9F7',
+  shapeSecondary: '#E9E8E7',
+  shapeTertiary: '#D9D8D7',
+  textPrimary: '#141414',
+  textSecondary: '#737271',
+  textTertiary: '#8E8D8B',
+  primaryPure: '#CEFE00',
+  primaryMid: '#87AD00',
+  dangerMid: '#BB4355',
+} as const;
+
+export type ColorToken = keyof typeof darkColors;
+
+/** Semantic color set resolved by the active color mode. */
+export type ResolvedColors = typeof darkColors;
+
+/** Brand colors supplied per-org. */
+export interface BrandColors {
+  primaryPure: string;
+  primaryMid: string;
+  onPrimary?: string;
+}

package/tokens/elevation.ts

@@ -0,0 +1,52 @@
+import { Platform } from 'react-native';
+
+/**
+ * Nwartz DS — Elevation (shadow) tokens.
+ *
+ * Each level maps to a named token used across the system. On Android the
+ * numeric `elevation` property is used; on iOS/web the shadow properties
+ * are applied.
+ */
+
+interface ElevationEntry {
+  elevation?: number;
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+}
+
+function makeElevation(
+  androidElevation: number,
+  iOSShadow: { radius: number; offsetX: number; offsetY: number; opacity: number },
+): ElevationEntry {
+  if (Platform.OS === 'android') {
+    return { elevation: androidElevation };
+  }
+
+  return {
+    shadowColor: '#101828',
+    shadowOffset: { width: iOSShadow.offsetX, height: iOSShadow.offsetY },
+    shadowOpacity: iOSShadow.opacity,
+    shadowRadius: iOSShadow.radius,
+  };
+}
+
+export const elevation: Record<string, ElevationEntry> = {
+  /** $elevation-level-xs — subtle lift for inline elements. */
+  xs: makeElevation(1, { radius: 2, offsetX: 0, offsetY: 1, opacity: 0.05 }),
+  /** $elevation-level-sm — cards at rest. */
+  sm: makeElevation(2, { radius: 3, offsetX: 0, offsetY: 1, opacity: 0.1 }),
+  /** $elevation-level-md — raised panels, dropdowns. */
+  md: makeElevation(4, { radius: 8, offsetX: 0, offsetY: 4, opacity: 0.1 }),
+  /** $elevation-level-lg — modals, floating sheets. */
+  lg: makeElevation(8, { radius: 16, offsetX: 0, offsetY: 12, opacity: 0.08 }),
+  /** $elevation-level-xl — bottom sheets, popover menus. */
+  xl: makeElevation(12, { radius: 24, offsetX: 0, offsetY: 20, opacity: 0.08 }),
+  /** $elevation-level-xxl — full-screen overlays. */
+  xxl: makeElevation(16, { radius: 48, offsetX: 0, offsetY: 24, opacity: 0.08 }),
+  /** $elevation-level-xxxl — deepest layer. */
+  xxxl: makeElevation(24, { radius: 64, offsetX: 0, offsetY: 32, opacity: 0.08 }),
+};
+
+export type ElevationToken = keyof typeof elevation;

package/tokens/index.ts

@@ -0,0 +1,11 @@
+export { darkColors, lightColors } from './colors';
+export type { ColorToken, ResolvedColors, BrandColors } from './colors';
+export { typography } from './typography';
+export type { TypographyToken } from './typography';
+export { elevation } from './elevation';
+export type { ElevationToken } from './elevation';
+export { spacing } from './spacing';
+export type { SpacingToken } from './spacing';
+export { radius } from './radius';
+export type { RadiusToken } from './radius';
+export { colorMap, spacingMap, radiusMap } from './mapping';

package/tokens/mapping.ts

@@ -0,0 +1,57 @@
+/**
+ * Token mapping: bridges the mobile app's legacy color token names to the
+ * design system's semantic token keys. Used when migrating mobile components
+ * from the old `useTheme()` to `@nwartz/design-system`'s `useTheme()`.
+ */
+import type { ResolvedColors } from './colors';
+import type { SpacingToken } from './spacing';
+import type { RadiusToken } from './radius';
+
+/** Mobile-app color key → design-system color key. */
+export const colorMap: Record<string, keyof ResolvedColors> = {
+  background: 'backgroundScreen',
+  backgroundElement: 'shapeSecondary',
+  backgroundSelected: 'shapeSecondary',
+  surfaceLowest: 'shapePrimary',
+  surfaceHigh: 'shapeSecondary',
+  outline: 'shapeTertiary',
+  outlineVariant: 'shapeTertiary',
+  text: 'textPrimary',
+  textSecondary: 'textSecondary',
+  secondary: 'textSecondary',
+  secondaryContainer: 'shapeSecondary',
+  onSecondaryContainer: 'textSecondary',
+  success: 'primaryPure',
+  danger: 'dangerMid',
+  info: 'textSecondary',
+  warning: 'textSecondary',
+} as const;
+
+/** Mobile-app spacing value → design-system spacing token. */
+export const spacingMap: Record<number, SpacingToken> = {
+  2: 'xxs',
+  4: 'xs',
+  8: 'sm',
+  12: 'md',
+  16: 'lg',
+  20: 'xl',
+  24: '2xl',
+  32: '3xl',
+  40: '4xl',
+  48: '5xl',
+  64: '6xl',
+  80: '7xl',
+} as const;
+
+/** Mobile-app radius value → design-system radius token. */
+export const radiusMap: Record<number, RadiusToken> = {
+  4: 'xs',
+  8: 'sm',
+  10: 'sm',
+  12: 'md',
+  14: 'md',
+  16: 'lg',
+  24: 'xl',
+  32: 'xl',
+  9999: 'full',
+} as const;

package/tokens/radius.ts

@@ -0,0 +1,19 @@
+/**
+ * Nwartz DS — Border radius tokens.
+ */
+export const radius = {
+  /** 4px — tiny elements: badges, tags. */
+  xs: 4,
+  /** 8px — small controls: inputs, chips. */
+  sm: 8,
+  /** 12px — medium elements: tiles, list rows. */
+  md: 12,
+  /** 16px — cards, panels. */
+  lg: 16,
+  /** 24px — large cards, modals. */
+  xl: 24,
+  /** Full circle / pill shape. */
+  full: 9999,
+} as const;
+
+export type RadiusToken = keyof typeof radius;

package/tokens/spacing.ts

@@ -0,0 +1,36 @@
+/**
+ * Nwartz DS — Spacing scale.
+ *
+ * Based on a 4px base unit. Use these values for padding, margin, and gaps
+ * to maintain consistent rhythm across the UI.
+ */
+export const spacing = {
+  /** 0px */
+  none: 0,
+  /** 2px — hairline gaps. */
+  xxs: 2,
+  /** 4px — tight inset (icon-to-label). */
+  xs: 4,
+  /** 8px — compact gaps, small padding. */
+  sm: 8,
+  /** 12px — default inner padding for small controls. */
+  md: 12,
+  /** 16px — standard card padding, list row gaps. */
+  lg: 16,
+  /** 20px — generous spacing. */
+  xl: 20,
+  /** 24px — section gaps, card outer padding. */
+  '2xl': 24,
+  /** 32px — large section spacing. */
+  '3xl': 32,
+  /** 40px — page-level horizontal padding. */
+  '4xl': 40,
+  /** 48px — hero spacing. */
+  '5xl': 48,
+  /** 64px — page-level vertical spacing. */
+  '6xl': 64,
+  /** 80px — maximum spacing. */
+  '7xl': 80,
+} as const;
+
+export type SpacingToken = keyof typeof spacing;

package/tokens/typography.ts

@@ -0,0 +1,53 @@
+import { Platform, type TextStyle } from 'react-native';
+
+/**
+ * Nwartz DS — Typography tokens.
+ *
+ * Font family references the Archivo typeface. On native, the font must be
+ * loaded (e.g. via expo-font) before rendering; the web falls back to the
+ * CSS @font-face or Google Fonts import.
+ */
+const fontFamilyBase = Platform.select({
+  ios: 'Archivo',
+  android: 'Archivo',
+  default: 'Archivo, system-ui, sans-serif',
+});
+
+type FontWeight = TextStyle['fontWeight'];
+
+/** Base typography tokens as a plain object (safe to spread into StyleSheet). */
+export const typography: Record<string, TextStyle> = {
+  /** 56px / 900 / 1.15 — hero display, stat rings. */
+  display: {
+    fontFamily: fontFamilyBase,
+    fontSize: 56,
+    fontWeight: '900' as FontWeight,
+    lineHeight: 64,
+  },
+
+  /** 20px / 700 / 1.0 — section headings, card titles. */
+  heading: {
+    fontFamily: fontFamilyBase,
+    fontSize: 20,
+    fontWeight: '700' as FontWeight,
+    lineHeight: 20,
+  },
+
+  /** 16px / 400 / 1.5 — body copy, list items. */
+  body: {
+    fontFamily: fontFamilyBase,
+    fontSize: 16,
+    fontWeight: '400' as FontWeight,
+    lineHeight: 24,
+  },
+
+  /** 12px / 400 / 1.5 — captions, helper text, overlines. */
+  caption: {
+    fontFamily: fontFamilyBase,
+    fontSize: 12,
+    fontWeight: '400' as FontWeight,
+    lineHeight: 18,
+  },
+};
+
+export type TypographyToken = keyof typeof typography;