@aiaiai-pt/design-system 0.1.0

package/tokens/semantic.css

@@ -0,0 +1,211 @@
+/*
+ * aiaiai Design System — Semantic Tokens (semantic.css)
+ *
+ * Role-based aliases that themes override.
+ * These are what components and layouts should reference.
+ * Never use --raw-* tokens directly in components.
+ *
+ * Naming: --{category}-{role}
+ * Categories: color, type, space, radius, elevation, duration, easing, grid
+ */
+
+:root {
+  /* ═══════════════════════════════════════════════
+     COLOR — Surfaces, Text, Accents, Semantic
+     ═══════════════════════════════════════════════ */
+
+  /* Surfaces */
+  --color-surface: var(--raw-color-neutral-50);
+  --color-surface-secondary: var(--raw-color-neutral-100);
+  --color-surface-tertiary: var(--raw-color-neutral-200);
+  --color-overlay: rgba(44, 40, 37, 0.5);
+
+  /* Borders */
+  --color-border: var(--raw-color-neutral-300);
+  --color-border-strong: var(--raw-color-neutral-400);
+
+  /* Text */
+  --color-text: var(--raw-color-neutral-900);
+  --color-text-secondary: var(--raw-color-neutral-600);
+  --color-text-muted: var(--raw-color-neutral-500);
+  --color-text-on-accent: var(--raw-color-white);
+
+  /* Accent (orange — creation, focus, primary action) */
+  --color-accent: var(--raw-color-orange-500);
+  --color-accent-hover: var(--raw-color-orange-600);
+  --color-accent-subtle: var(--raw-color-orange-100);
+
+  /* Destructive (red — danger, errors, deletion) */
+  --color-destructive: var(--raw-color-red-600);
+  --color-destructive-hover: var(--raw-color-red-700);
+  --color-destructive-subtle: var(--raw-color-red-50);
+
+  /* Success (green — confirmation, positive) */
+  --color-success: var(--raw-color-green-600);
+  --color-success-subtle: var(--raw-color-green-50);
+
+  /* Warning (amber — caution, attention) */
+  --color-warning: var(--raw-color-amber-600);
+  --color-warning-subtle: var(--raw-color-amber-50);
+
+  /* Info (blue — information, links) */
+  --color-info: var(--raw-color-blue-600);
+  --color-info-subtle: var(--raw-color-blue-50);
+
+  /* ═══════════════════════════════════════════════
+     TYPOGRAPHY
+     ═══════════════════════════════════════════════ */
+
+  /* Font families */
+  --font-sans: var(--raw-font-sans);
+  --font-mono: var(--raw-font-mono);
+
+  /* Type scale — categorical */
+  --type-display-size: var(--raw-font-size-36);
+  --type-display-weight: var(--raw-font-weight-semibold);
+  --type-display-leading: var(--raw-line-height-tight);
+  --type-display-tracking: var(--raw-tracking-tight);
+  --type-display-font: var(--font-sans);
+
+  --type-heading-lg-size: var(--raw-font-size-24);
+  --type-heading-lg-weight: var(--raw-font-weight-medium);
+  --type-heading-lg-leading: var(--raw-line-height-snug);
+  --type-heading-lg-tracking: var(--raw-tracking-snug);
+  --type-heading-lg-font: var(--font-sans);
+
+  --type-heading-size: var(--raw-font-size-18);
+  --type-heading-weight: var(--raw-font-weight-medium);
+  --type-heading-leading: var(--raw-line-height-heading);
+  --type-heading-tracking: var(--raw-tracking-heading);
+  --type-heading-font: var(--font-sans);
+
+  --type-heading-sm-size: var(--raw-font-size-15);
+  --type-heading-sm-weight: var(--raw-font-weight-medium);
+  --type-heading-sm-leading: var(--raw-line-height-relaxed);
+  --type-heading-sm-tracking: var(--raw-tracking-normal);
+  --type-heading-sm-font: var(--font-sans);
+
+  --type-body-size: var(--raw-font-size-15);
+  --type-body-weight: var(--raw-font-weight-regular);
+  --type-body-leading: var(--raw-line-height-body);
+  --type-body-tracking: var(--raw-tracking-normal);
+  --type-body-font: var(--font-sans);
+
+  --type-body-sm-size: var(--raw-font-size-13);
+  --type-body-sm-weight: var(--raw-font-weight-regular);
+  --type-body-sm-leading: var(--raw-line-height-body);
+  --type-body-sm-tracking: var(--raw-tracking-micro);
+  --type-body-sm-font: var(--font-sans);
+
+  --type-label-size: var(--raw-font-size-12);
+  --type-label-weight: var(--raw-font-weight-regular);
+  --type-label-leading: var(--raw-line-height-heading);
+  --type-label-tracking: var(--raw-tracking-wider);
+  --type-label-font: var(--font-mono);
+
+  --type-data-size: var(--raw-font-size-14);
+  --type-data-weight: var(--raw-font-weight-regular);
+  --type-data-leading: var(--raw-line-height-relaxed);
+  --type-data-tracking: var(--raw-tracking-normal);
+  --type-data-font: var(--font-mono);
+
+  --type-caption-size: var(--raw-font-size-11);
+  --type-caption-weight: var(--raw-font-weight-regular);
+  --type-caption-leading: var(--raw-line-height-relaxed);
+  --type-caption-tracking: var(--raw-tracking-wide);
+  --type-caption-font: var(--font-sans);
+
+  /* ═══════════════════════════════════════════════
+     SPACING
+     ═══════════════════════════════════════════════ */
+
+  --space-2xs: var(--raw-space-2);
+  --space-xs: var(--raw-space-4);
+  --space-sm: var(--raw-space-8);
+  --space-md: var(--raw-space-16);
+  --space-lg: var(--raw-space-24);
+  --space-xl: var(--raw-space-32);
+  --space-2xl: var(--raw-space-48);
+  --space-3xl: var(--raw-space-64);
+  --space-4xl: var(--raw-space-96);
+
+  /* ═══════════════════════════════════════════════
+     BORDER WIDTH
+     ═══════════════════════════════════════════════ */
+
+  --border-width: var(--raw-border-width-1);
+  --border-width-thick: var(--raw-border-width-2);
+
+  /* ═══════════════════════════════════════════════
+     GRID
+     ═══════════════════════════════════════════════ */
+
+  --grid-columns: var(--raw-grid-columns);
+  --grid-gutter: var(--space-md);
+  --grid-margin: var(--space-md);
+  --content-width-narrow: var(--raw-content-640);
+  --content-width: var(--raw-content-960);
+  --content-width-wide: var(--raw-content-1200);
+  --content-width-full: var(--raw-content-1440);
+
+  /* ═══════════════════════════════════════════════
+     ELEVATION
+     ═══════════════════════════════════════════════ */
+
+  --elevation-border: var(--border-width) solid var(--color-border);
+  --elevation-border-strong: var(--border-width) solid
+    var(--color-border-strong);
+  --elevation-raised: var(--raw-shadow-sm);
+  --elevation-overlay: var(--raw-shadow-md);
+
+  /* ═══════════════════════════════════════════════
+     RADIUS
+     ═══════════════════════════════════════════════ */
+
+  --radius-sm: var(--raw-radius-2);
+  --radius-md: var(--raw-radius-4);
+  --radius-lg: var(--raw-radius-8);
+  --radius-pill: var(--raw-radius-999);
+  --radius-circle: var(--raw-radius-circle);
+
+  /* ═══════════════════════════════════════════════
+     MOTION
+     ═══════════════════════════════════════════════ */
+
+  --duration-instant: var(--raw-duration-100);
+  --duration-fast: var(--raw-duration-150);
+  --duration-normal: var(--raw-duration-250);
+  --duration-slow: var(--raw-duration-400);
+  --duration-dramatic: var(--raw-duration-600);
+
+  --easing-default: var(--raw-easing-default);
+  --easing-enter: var(--raw-easing-enter);
+  --easing-exit: var(--raw-easing-exit);
+  --easing-linear: var(--raw-easing-linear);
+
+  /* ═══════════════════════════════════════════════
+     RESPONSIVE OVERRIDES
+     ═══════════════════════════════════════════════ */
+
+  /* Content area spacing — mobile defaults */
+  --content-padding-x: var(--space-md);
+  --content-padding-y: var(--space-lg);
+}
+
+/* ─── Tablet (768px+) ─── */
+@media (min-width: 768px) {
+  :root {
+    --content-padding-x: var(--space-lg);
+    --content-padding-y: var(--space-xl);
+  }
+}
+
+/* ─── Desktop (1024px+) ─── */
+@media (min-width: 1024px) {
+  :root {
+    --grid-gutter: var(--space-lg);
+    --grid-margin: var(--space-2xl);
+    --content-padding-x: var(--space-xl);
+    --content-padding-y: var(--space-2xl);
+  }
+}

package/tokens/themes/aiaiai.css

@@ -0,0 +1,53 @@
+/*
+ * aiaiai Design System — Default Theme (aiaiai.css)
+ *
+ * The canonical aiaiai studio theme.
+ * This is applied via [data-theme="aiaiai"] on <html> or as the :root default.
+ * All other themes override this baseline.
+ *
+ * Import order:
+ *   @import '../base.css';
+ *   @import '../semantic.css';
+ *   @import '../components.css';
+ *   @import './aiaiai.css';
+ */
+
+[data-theme="aiaiai"],
+:root {
+  /*
+   * The default theme uses all semantic.css values as-is.
+   * This file exists to:
+   *   1. Document that the defaults ARE the aiaiai theme
+   *   2. Serve as the template for creating new themes
+   *   3. Allow runtime theme switching via data-theme attribute
+   *
+   * If you need to tweak the default aiaiai look, change semantic.css.
+   * This file only overrides when the aiaiai theme diverges from
+   * the semantic defaults (which it doesn't, by definition).
+   */
+
+  /* ─── Studio identity markers ─── */
+  /* These are documented here for clarity — they're the values
+     that make something "look like aiaiai" */
+
+  /* Warm paper surface (never clinical white) */
+  /* --color-surface: #f7f5f3 (set in semantic.css) */
+
+  /* Orange accent: creation, focus */
+  /* --color-accent: #ff6b35 (set in semantic.css) */
+
+  /* Warm dark brown text (never pure black) */
+  /* --color-text: #2c2825 (set in semantic.css) */
+
+  /* Borders > shadows (exposed mechanism) */
+  /* --elevation-border: 1px solid var(--color-border) (set in semantic.css) */
+
+  /* Sharp radii (precision instrument) */
+  /* --radius-sm: 2px (set in semantic.css) */
+
+  /* Berkeley Mono for labels and data (the mechanism) */
+  /* --font-mono: 'Berkeley Mono', ... (set in semantic.css) */
+
+  /* Instrument Sans for prose (the Swiss canvas) */
+  /* --font-sans: 'Instrument Sans', ... (set in semantic.css) */
+}

package/tokens/themes/bespoke-example.css

@@ -0,0 +1,148 @@
+/*
+ * aiaiai Design System — Tier 2: Bespoke Theme Example
+ *
+ * Example: A fictional children's learning app "Sprout"
+ *
+ * Tier 2 rules:
+ *   - Override 40-80 tokens (full personality shift)
+ *   - Change: full color palette, typography, surface materials,
+ *     motion personality, elevation style, radius language
+ *   - Keep: spacing scale (8px grid), grid structure,
+ *     accessibility minimums, token naming convention
+ *
+ * Use case: Client-facing consumer products where aiaiai builds
+ * something that doesn't look like aiaiai
+ *
+ * Apply via: <html data-theme="bespoke-example">
+ */
+
+[data-theme="bespoke-example"] {
+  /* ═══════════════════════════════════════════════
+     COLOR — Full palette override (20 tokens)
+     ═══════════════════════════════════════════════ */
+
+  /* Surfaces: brighter, more playful */
+  --color-surface: #fffdf7;
+  --color-surface-secondary: #fef9ec;
+  --color-surface-tertiary: #fdf0d5;
+  --color-overlay: rgba(60, 40, 10, 0.4);
+
+  /* Borders: softer */
+  --color-border: #f0e4c8;
+  --color-border-strong: #dbc89a;
+
+  /* Text: darker for children's readability */
+  --color-text: #2d2006;
+  --color-text-secondary: #6b5c3e;
+  --color-text-muted: #a09070;
+  --color-text-on-accent: #ffffff;
+
+  /* Accent: playful purple */
+  --color-accent: #7c3aed;
+  --color-accent-hover: #6d28d9;
+  --color-accent-subtle: #f5f3ff;
+
+  /* Destructive: softer red */
+  --color-destructive: #e11d48;
+  --color-destructive-hover: #be123c;
+  --color-destructive-subtle: #fff1f2;
+
+  /* Success: brighter green */
+  --color-success: #059669;
+  --color-success-subtle: #ecfdf5;
+
+  /* Warning */
+  --color-warning: #d97706;
+  --color-warning-subtle: #fffbeb;
+
+  /* Info */
+  --color-info: #2563eb;
+  --color-info-subtle: #eff6ff;
+
+  /* ═══════════════════════════════════════════════
+     TYPOGRAPHY — Full override (10 tokens)
+     ═══════════════════════════════════════════════ */
+
+  /* Different font families entirely */
+  --font-sans: "Nunito", "Quicksand", sans-serif;
+  --font-mono: "Space Mono", ui-monospace, monospace;
+
+  /* Slightly larger base sizes for children */
+  --type-body-size: var(--raw-font-size-18);
+  --type-body-sm-size: var(--raw-font-size-15);
+  --type-label-size: var(--raw-font-size-13);
+  --type-data-size: var(--raw-font-size-15);
+  --type-heading-size: var(--raw-font-size-24);
+  --type-heading-lg-size: var(--raw-font-size-36);
+
+  /* Label uses sans, not mono (less technical feel) */
+  --type-label-font: var(--font-sans);
+  --type-label-tracking: var(--raw-tracking-loose);
+
+  /* ═══════════════════════════════════════════════
+     ELEVATION — Shadows instead of borders (4 tokens)
+     ═══════════════════════════════════════════════ */
+
+  --elevation-border: none;
+  --elevation-border-strong: none;
+  --elevation-raised:
+    0 2px 8px rgba(60, 40, 10, 0.1), 0 1px 3px rgba(60, 40, 10, 0.08);
+  --elevation-overlay:
+    0 8px 32px rgba(60, 40, 10, 0.15), 0 4px 8px rgba(60, 40, 10, 0.1);
+
+  /* ═══════════════════════════════════════════════
+     RADIUS — Rounded, friendly (5 tokens)
+     ═══════════════════════════════════════════════ */
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-pill: 999px;
+  --radius-circle: 50%;
+
+  /* ═══════════════════════════════════════════════
+     MOTION — Bouncier, more playful (5 tokens)
+     ═══════════════════════════════════════════════ */
+
+  --duration-instant: 120ms;
+  --duration-fast: 200ms;
+  --duration-normal: 350ms;
+  --duration-slow: 500ms;
+
+  /* Springy easing for playful feel */
+  --easing-default: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --easing-enter: cubic-bezier(0.22, 1.2, 0.36, 1);
+
+  /* ═══════════════════════════════════════════════
+     COMPONENTS — Adjusted for new personality (10 tokens)
+     ═══════════════════════════════════════════════ */
+
+  /* Buttons: larger, rounder, use sans for labels */
+  --button-font: var(--font-sans);
+  --button-tracking: var(--raw-tracking-normal);
+  --button-radius: var(--radius-md);
+  --button-sm-height: 32px;
+  --button-md-height: 44px;
+  --button-lg-height: 52px;
+
+  /* Inputs: rounder, softer */
+  --input-radius: var(--radius-sm);
+
+  /* Cards: elevated instead of bordered */
+  --card-bordered-border: none;
+  --card-bordered-shadow: var(--elevation-raised);
+  --card-radius: var(--radius-md);
+
+  /*
+   * What's preserved from the base system:
+   * - 8px spacing grid (non-negotiable)
+   * - Grid structure and breakpoints
+   * - Token naming convention
+   * - Accessibility minimums (contrast, touch targets)
+   * - Semantic color roles (accent, destructive, success, etc.)
+   *
+   * Total overrides: ~54 tokens
+   * The result is a completely different visual identity
+   * that still uses the same structural foundation.
+   */
+}

package/tokens/themes/branded-example.css

@@ -0,0 +1,55 @@
+/*
+ * aiaiai Design System — Tier 1: Branded Theme Example
+ *
+ * Example: A fictional fintech client "Verdant Finance"
+ *
+ * Tier 1 rules:
+ *   - Override < 20 semantic tokens
+ *   - Change: accent color, secondary color, surface tint direction
+ *   - Keep: typography, spacing, motion, grid, elevation, radius, warmth
+ *
+ * Use case: Client dashboards, whitelabel products, internal tools
+ *
+ * Apply via: <html data-theme="branded-example">
+ */
+
+[data-theme="branded-example"] {
+  /* ─── Accent: teal instead of orange (12 tokens) ─── */
+  --color-accent: #0d9488;
+  --color-accent-hover: #0f766e;
+  --color-accent-subtle: #f0fdfa;
+
+  /* ─── Surface: cooler tint direction ─── */
+  --color-surface: #f8faf9;
+  --color-surface-secondary: #f0f4f2;
+  --color-surface-tertiary: #e4ebe7;
+
+  /* ─── Borders: slightly cooler ─── */
+  --color-border: #d4ddd8;
+  --color-border-strong: #a8b8b0;
+
+  /* ─── Text: still warm, slightly cooled ─── */
+  --color-text: #1a2c25;
+  --color-text-secondary: #4a6358;
+  --color-text-muted: #7a9488;
+
+  /* ─── Overlay: cool-tinted ─── */
+  --color-overlay: rgba(26, 44, 37, 0.5);
+
+  /* ─── Focus ring follows accent ─── */
+  --focus-ring-color: var(--color-accent);
+
+  /*
+   * Everything else stays:
+   * - Typography (Instrument Sans + Berkeley Mono)
+   * - Spacing scale (8px grid)
+   * - Motion language (snappy, functional)
+   * - Radius (sharp, precise)
+   * - Elevation (borders > shadows)
+   * - Component sizing
+   *
+   * Total overrides: 14 tokens
+   * The result still feels like an aiaiai product,
+   * but with the client's color identity.
+   */
+}