@gv-tech/design-tokens 1.1.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@gv-tech/design-tokens",
+  "version": "1.1.0",
+  "description": "Shared design tokens for the GV Tech design system — palette, theme, spacing, typography, shadows",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "lint": "echo 'Linted from workspace root'",
+    "test": "echo 'No tests yet'",
+    "typecheck": "npx tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+// @gv-tech/design-tokens
+// Single source of truth for all design tokens in the GV Tech design system.
+// Consumed by both web (ui-web) and native (ui-native) implementations.
+
+// Color tokens
+export { palette } from './palette';
+export type { PaletteTokens } from './palette';
+
+export { theme } from './theme';
+export type { ThemeTokens } from './theme';
+
+// Layout tokens
+export { spacing } from './spacing';
+export type { SpacingTokens } from './spacing';
+
+export { radii, radiiNumeric } from './radii';
+export type { RadiiNumericTokens, RadiiTokens } from './radii';
+
+// Typography tokens
+export { typography } from './typography';
+export type { TypographyTokens } from './typography';
+
+// Elevation tokens
+export { shadows } from './shadows';
+export type { ShadowTokens } from './shadows';
+
+// Convenience re-export of all tokens as a single object.
+// Mirrors the legacy `tokens` export from `src/theme/tokens.ts`.
+import { palette } from './palette';
+import { theme } from './theme';
+
+export const tokens = {
+  palette,
+  theme,
+} as const;

package/src/palette.ts

@@ -0,0 +1,36 @@
+// Primitive color palette for the GV Tech design system.
+// These are the raw color values. They should NOT be used directly in components —
+// use semantic tokens from `theme.ts` instead.
+
+export const palette = {
+  brand: {
+    blue: 'hsl(225 73% 57%)', // Royal Blue (Intellect)
+    green: 'hsl(151 66% 27%)', // #177245 (Stability)
+    floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
+  },
+  neutral: {
+    white: 'hsl(0 0% 100%)',
+    black: 'hsl(0 0% 0%)', // Pure Black
+    gray50: 'hsl(0 0% 96%)', // White Smoke
+    gray100: 'hsl(0 0% 92%)', // Gainsboro
+    gray200: 'hsl(0 0% 89%)', // Light Gray
+    gray300: 'hsl(0 0% 88%)', // French Gray
+    gray400: 'hsl(0 0% 70%)', // Silver
+    gray500: 'hsl(215 16% 47%)', // Steel Blue
+    gray600: 'hsl(222 47% 11%)', // Oxford Blue
+    gray700: 'hsl(0 0% 18%)', // Raisin Black
+    gray800: 'hsl(0 0% 15%)', // Jet
+    gray900: 'hsl(0 0% 14%)', // Eerie Black
+    gray950: 'hsl(0 0% 11%)', // Night (alt)
+    gray975: 'hsl(0 0% 9%)', // Night
+    gray990: 'hsl(0 0% 6%)', // Black (almost)
+  },
+  semantic: {
+    success: 'hsl(93 28% 54%)', // Asparagus / Pistachio
+    successDark: 'hsl(96 44% 61%)',
+    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
+    destructiveDark: 'hsl(0 62.8% 30.6%)', // Blood Red
+  },
+} as const;
+
+export type PaletteTokens = typeof palette;

package/src/radii.ts

@@ -0,0 +1,26 @@
+// Border radius tokens for the GV Tech design system.
+
+export const radii = {
+  none: '0',
+  sm: 'calc(var(--radius) - 4px)',
+  md: 'calc(var(--radius) - 2px)',
+  lg: 'var(--radius)',
+  xl: 'calc(var(--radius) + 4px)',
+  '2xl': 'calc(var(--radius) + 8px)',
+  full: '9999px',
+} as const;
+
+// Numeric radius values (in px) for React Native, which doesn't support CSS calc().
+// Based on a default --radius of 0.5rem (8px).
+export const radiiNumeric = {
+  none: 0,
+  sm: 4, // 8 - 4
+  md: 6, // 8 - 2
+  lg: 8, // base
+  xl: 12, // 8 + 4
+  '2xl': 16, // 8 + 8
+  full: 9999,
+} as const;
+
+export type RadiiTokens = typeof radii;
+export type RadiiNumericTokens = typeof radiiNumeric;

package/src/shadows.ts

@@ -0,0 +1,16 @@
+// Shadow / elevation tokens for the GV Tech design system.
+// Web values use CSS box-shadow syntax.
+// Native consumers should map these to platform-specific elevation or shadow props.
+
+export const shadows = {
+  none: 'none',
+  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+} as const;
+
+export type ShadowTokens = typeof shadows;

package/src/spacing.ts

@@ -0,0 +1,33 @@
+// Spacing scale for the GV Tech design system.
+// Based on a 4px baseline grid. Values are in rem (assuming 16px root font size).
+
+export const spacing = {
+  px: '1px',
+  0: '0',
+  0.5: '0.125rem', // 2px
+  1: '0.25rem', // 4px
+  1.5: '0.375rem', // 6px
+  2: '0.5rem', // 8px
+  2.5: '0.625rem', // 10px
+  3: '0.75rem', // 12px
+  3.5: '0.875rem', // 14px
+  4: '1rem', // 16px
+  5: '1.25rem', // 20px
+  6: '1.5rem', // 24px
+  7: '1.75rem', // 28px
+  8: '2rem', // 32px
+  9: '2.25rem', // 36px
+  10: '2.5rem', // 40px
+  12: '3rem', // 48px
+  14: '3.5rem', // 56px
+  16: '4rem', // 64px
+  20: '5rem', // 80px
+  24: '6rem', // 96px
+  32: '8rem', // 128px
+  40: '10rem', // 160px
+  48: '12rem', // 192px
+  56: '14rem', // 224px
+  64: '16rem', // 256px
+} as const;
+
+export type SpacingTokens = typeof spacing;

package/src/theme.ts

@@ -0,0 +1,54 @@
+// Semantic theme tokens for the GV Tech design system.
+// These map primitive palette values to semantic roles (background, foreground, etc.)
+// for both light and dark modes. Components should reference these tokens, not palette directly.
+
+import { palette } from './palette';
+
+export const theme = {
+  light: {
+    background: palette.neutral.gray50,
+    foreground: palette.neutral.gray600,
+    card: palette.neutral.white,
+    cardForeground: palette.neutral.gray600,
+    popover: palette.neutral.white,
+    popoverForeground: palette.neutral.gray600,
+    primary: palette.brand.blue,
+    primaryForeground: palette.neutral.white,
+    secondary: palette.semantic.success,
+    secondaryForeground: palette.neutral.white,
+    muted: palette.neutral.gray100,
+    mutedForeground: palette.neutral.gray500,
+    accent: palette.neutral.gray300,
+    accentForeground: palette.neutral.gray600,
+    destructive: palette.semantic.destructive,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray200,
+    input: palette.neutral.gray200,
+    ring: palette.neutral.gray600,
+    radius: '0.5rem',
+  },
+  dark: {
+    background: palette.neutral.gray975,
+    foreground: palette.neutral.white,
+    card: palette.neutral.gray900,
+    cardForeground: palette.neutral.white,
+    popover: palette.neutral.gray950,
+    popoverForeground: palette.neutral.white,
+    primary: 'hsl(227 96% 71%)', // Keeping as specific HSL to match original
+    primaryForeground: palette.neutral.gray975,
+    secondary: palette.semantic.successDark,
+    secondaryForeground: palette.neutral.gray975,
+    muted: palette.neutral.gray990,
+    mutedForeground: palette.neutral.gray400,
+    accent: palette.neutral.gray800,
+    accentForeground: palette.neutral.white,
+    destructive: palette.semantic.destructiveDark,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray700,
+    input: palette.neutral.gray700,
+    ring: 'hsl(0 0% 90%)', // Platinum
+    radius: '0.5rem',
+  },
+} as const;
+
+export type ThemeTokens = typeof theme.light;

package/src/typography.ts

@@ -0,0 +1,36 @@
+// Typography tokens for the GV Tech design system.
+// Defines font families, sizes, weights, and line heights.
+
+export const typography = {
+  fontFamily: {
+    sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  },
+  fontSize: {
+    xs: '0.75rem', // 12px
+    sm: '0.875rem', // 14px
+    base: '1rem', // 16px
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
+    '2xl': '1.5rem', // 24px
+    '3xl': '1.875rem', // 30px
+    '4xl': '2.25rem', // 36px
+    '5xl': '3rem', // 48px
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  lineHeight: {
+    none: '1',
+    tight: '1.25',
+    snug: '1.375',
+    normal: '1.5',
+    relaxed: '1.625',
+    loose: '2',
+  },
+} as const;
+
+export type TypographyTokens = typeof typography;