devglide 0.1.1

package/src/packages/design-tokens/dist/tailwind-preset.js

@@ -0,0 +1,115 @@
+/* @devglide/design-tokens v2.0 — Tailwind v3 preset — generated, do not edit */
+/** @type {import('tailwindcss').Config} */
+export default {
+  theme: {
+    extend: {
+      colors: {
+        'df-base':       '#1c2128',
+        'df-surface':    '#22272e',
+        'df-raised':     '#2d333b',
+        'df-overlay':    '#353b44',
+        'df-sunken':     '#161b22',
+        'df-border':     '#373e47',
+        'df-border-subtle': '#2d333b',
+        'df-border-strong': '#444c56',
+        'df-text':       '#adbac7',
+        'df-muted':      '#768390',
+        'df-accent':     '#7ee787',
+        'df-accent-subtle': '#0d1f12',
+        'df-accent-dim': '#1a3d1e',
+        'df-accent-bright': '#a0f0a8',
+        'df-idle':       '#7ee787',
+        'df-active':     '#56d364',
+        'df-recording':  '#ff1500',
+        'df-processing': '#e3b341',
+        'df-success':    '#4ade80',
+        'df-error':      '#ff3333',
+        'df-warning':    '#d29922',
+        'df-info':       '#58a6ff',
+        'df-link':       '#58a6ff',
+      },
+      fontFamily: {
+        'df-mono': ["JetBrains Mono","Fira Code","Cascadia Code","monospace"],
+        'df-ui':   ["system-ui","-apple-system","Segoe UI","Roboto","sans-serif"],
+        'df-display': ["Inter Variable","Inter","system-ui","sans-serif"],
+      },
+      spacing: {
+        "df-1": "4px",
+        "df-2": "8px",
+        "df-3": "12px",
+        "df-4": "16px",
+        "df-5": "20px",
+        "df-6": "24px",
+        "df-8": "32px",
+        "df-10": "40px",
+        "df-12": "48px",
+        "df-16": "64px",
+        "df-20": "80px",
+        "df-24": "96px",
+        "df-px": "1px"
+},
+      borderRadius: {
+        'df-xs': '2px',
+        'df-sm': '4px',
+        'df-md': '6px',
+        'df-lg': '8px',
+        'df-xl': '12px',
+        'df-full': '9999px',
+      },
+      boxShadow: {
+        'df-sm': '0 1px 3px rgba(0,0,0,0.4)',
+        'df-md': '0 2px 8px rgba(0,0,0,0.5)',
+        'df-lg': '0 4px 16px rgba(0,0,0,0.6)',
+        'df-xl': '0 8px 32px rgba(0,0,0,0.7)',
+        'df-glow': '0 0 8px rgba(126,231,135,0.4)',
+        'df-glow-strong': '0 0 16px rgba(126,231,135,0.7)',
+        'df-error-glow': '0 0 8px rgba(255,51,51,0.6)',
+      },
+      transitionDuration: {
+        'df-fast':   '150ms',
+        'df-base':   '250ms',
+        'df-slow':   '400ms',
+        'df-slower': '600ms',
+      },
+      transitionTimingFunction: {
+        'df-spring': "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.058, 1.066 24%, 1.058, 1.037 31%, 0.99 38%, 0.977 42%, 0.975, 0.978 48.9%, 1)",
+        'df-spring-bouncy': "linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1.006 30.7%, 1.119 34.8%, 1.17 38.4%, 1.177, 1.152 44.4%, 1.029 53%, 0.988 57.5%, 0.984, 0.989 63.2%, 1.006 69.3%, 1.012 75.4%, 1.007, 1)",
+      },
+      letterSpacing: {
+        'df-tight':  '0',
+        'df-normal': '0.05em',
+        'df-wide':   '0.12em',
+        'df-wider':  '0.2em',
+      },
+      opacity: {
+        "df-5": "0.05",
+        "df-10": "0.1",
+        "df-20": "0.2",
+        "df-40": "0.4",
+        "df-60": "0.6",
+        "df-80": "0.8"
+},
+      zIndex: {
+        'df-base':    '0',
+        'df-raised':  '10',
+        'df-overlay': '100',
+        'df-modal':   '200',
+        'df-toast':   '300',
+      },
+      maxWidth: {
+        'df-prose': '65ch',
+        'df-sm':    '720px',
+        'df-md':    '960px',
+        'df-lg':    '1200px',
+        'df-xl':    '1440px',
+      },
+      screens: {
+        'df-sm':  '640px',
+        'df-md':  '1024px',
+        'df-lg':  '1440px',
+        'df-xl':  '1920px',
+        'df-2xl': '2560px',
+      },
+    },
+  },
+};

package/src/packages/design-tokens/dist/tokens.css

@@ -0,0 +1,345 @@
+/* @devglide/design-tokens v2.0 — generated, do not edit */
+/* Modern CSS architecture: @layer cascade, @property declarations, spring easings */
+
+@layer df-tokens, df-keyframes, df-components, df-utilities;
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   Layer: df-tokens — Design token custom properties
+   ══════════════════════════════════════════════════════════════════════════════ */
+@layer df-tokens {
+  :root {
+    /* ── Primitive Palette ──────────────────────────────────────────────── */
+    --df-primitive-neutral-0: #0d1117;
+    --df-primitive-neutral-1: #161b22;
+    --df-primitive-neutral-2: #1c2128;
+    --df-primitive-neutral-3: #22272e;
+    --df-primitive-neutral-4: #2d333b;
+    --df-primitive-neutral-5: #353b44;
+    --df-primitive-neutral-6: #444c56;
+    --df-primitive-neutral-7: #545d68;
+    --df-primitive-neutral-8: #636e7b;
+    --df-primitive-neutral-9: #768390;
+    --df-primitive-neutral-10: #8b949e;
+    --df-primitive-neutral-11: #adbac7;
+    --df-primitive-neutral-12: #cdd9e5;
+    --df-primitive-green-1: #0d1f12;
+    --df-primitive-green-2: #1a3d1e;
+    --df-primitive-green-3: #1f6328;
+    --df-primitive-green-4: #2ea043;
+    --df-primitive-green-5: #3fb950;
+    --df-primitive-green-6: #56d364;
+    --df-primitive-green-7: #7ee787;
+    --df-primitive-green-8: #a0f0a8;
+    --df-primitive-green-9: #b7f5bd;
+    --df-primitive-red-1: #3d0d0d;
+    --df-primitive-red-2: #6e1616;
+    --df-primitive-red-3: #a82020;
+    --df-primitive-red-4: #d32f2f;
+    --df-primitive-red-5: #ff3333;
+    --df-primitive-red-6: #ff6b6b;
+    --df-primitive-amber-1: #3d2600;
+    --df-primitive-amber-2: #6e4400;
+    --df-primitive-amber-3: #9e6a03;
+    --df-primitive-amber-4: #d29922;
+    --df-primitive-amber-5: #e3b341;
+    --df-primitive-amber-6: #f0c84d;
+    --df-primitive-blue-1: #0d2240;
+    --df-primitive-blue-2: #1a3d6e;
+    --df-primitive-blue-3: #2f73b8;
+    --df-primitive-blue-4: #58a6ff;
+    --df-primitive-blue-5: #79c0ff;
+
+    /* ── Semantic Tokens ───────────────────────────────────────────────── */
+    --df-color-bg-base: #1c2128;
+    --df-color-bg-surface: #22272e;
+    --df-color-bg-raised: #2d333b;
+    --df-color-bg-overlay: #353b44;
+    --df-color-bg-sunken: #161b22;
+    --df-color-bg-invert: #adbac7;
+    --df-color-border-subtle: #2d333b;
+    --df-color-border-default: #373e47;
+    --df-color-border-strong: #444c56;
+    --df-color-border-accent: #4d5560;
+    --df-color-text-primary: #adbac7;
+    --df-color-text-secondary: #768390;
+    --df-color-text-muted: #636e7b;
+    --df-color-text-accent: #7ee787;
+    --df-color-text-inverse: #1c2128;
+    --df-color-text-link: #58a6ff;
+    --df-color-accent-subtle: #0d1f12;
+    --df-color-accent-dim: #1a3d1e;
+    --df-color-accent-muted: #2ea043;
+    --df-color-accent-default: #7ee787;
+    --df-color-accent-bright: #a0f0a8;
+    --df-color-accent-contrast: #1c2128;
+    --df-color-state-idle: #7ee787;
+    --df-color-state-active: #56d364;
+    --df-color-state-recording: #ff1500;
+    --df-color-state-processing: #e3b341;
+    --df-color-state-success: #4ade80;
+    --df-color-state-error: #ff3333;
+    --df-color-state-warning: #d29922;
+    --df-color-state-info: #58a6ff;
+    --df-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+    --df-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --df-font-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
+    --df-font-size-xs: clamp(9px, calc(9px + 4 * (100vw - 720px) / 1840), 13px);
+    --df-font-size-sm: clamp(11px, calc(11px + 5 * (100vw - 720px) / 1840), 16px);
+    --df-font-size-md: clamp(12px, calc(12px + 7 * (100vw - 720px) / 1840), 19px);
+    --df-font-size-lg: clamp(15px, calc(15px + 10 * (100vw - 720px) / 1840), 25px);
+    --df-font-size-xl: clamp(19px, calc(19px + 14 * (100vw - 720px) / 1840), 33px);
+    --df-font-size-2xl: clamp(27px, calc(27px + 18 * (100vw - 720px) / 1840), 45px);
+    --df-font-size-3xl: clamp(35px, calc(35px + 28 * (100vw - 720px) / 1840), 63px);
+    --df-letter-spacing-tight: 0;
+    --df-letter-spacing-normal: 0.05em;
+    --df-letter-spacing-wide: 0.12em;
+    --df-letter-spacing-wider: 0.2em;
+    --df-line-height-tight: 1.1;
+    --df-line-height-normal: 1.4;
+    --df-line-height-loose: 1.7;
+    --df-space-1: 4px;
+    --df-space-2: 8px;
+    --df-space-3: 12px;
+    --df-space-4: 16px;
+    --df-space-5: 20px;
+    --df-space-6: 24px;
+    --df-space-8: 32px;
+    --df-space-10: 40px;
+    --df-space-12: 48px;
+    --df-space-16: 64px;
+    --df-space-20: 80px;
+    --df-space-24: 96px;
+    --df-space-px: 1px;
+    --df-radius-none: 0;
+    --df-radius-xs: 2px;
+    --df-radius-sm: 4px;
+    --df-radius-md: 6px;
+    --df-radius-lg: 8px;
+    --df-radius-xl: 12px;
+    --df-radius-full: 9999px;
+    --df-clip-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
+    --df-clip-md: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
+    --df-clip-lg: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+    --df-clip-xl: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
+    --df-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
+    --df-shadow-md: 0 2px 8px rgba(0,0,0,0.5);
+    --df-shadow-lg: 0 4px 16px rgba(0,0,0,0.6);
+    --df-shadow-xl: 0 8px 32px rgba(0,0,0,0.7);
+    --df-glow-accent: 0 0 8px rgba(126,231,135,0.4);
+    --df-glow-accent-strong: 0 0 16px rgba(126,231,135,0.7);
+    --df-glow-error: 0 0 8px rgba(255,51,51,0.6);
+    --df-glow-success: 0 0 8px rgba(74,222,128,0.4);
+    --df-glow-processing: 0 0 8px rgba(227,179,65,0.4);
+    --df-opacity-5: 0.05;
+    --df-opacity-10: 0.1;
+    --df-opacity-20: 0.2;
+    --df-opacity-40: 0.4;
+    --df-opacity-60: 0.6;
+    --df-opacity-80: 0.8;
+    --df-duration-fast: 150ms;
+    --df-duration-base: 250ms;
+    --df-duration-slow: 400ms;
+    --df-duration-slower: 600ms;
+    --df-easing-default: ease;
+    --df-easing-in: ease-in;
+    --df-easing-out: ease-out;
+    --df-easing-linear: linear;
+    --df-easing-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.058, 1.066 24%, 1.058, 1.037 31%, 0.99 38%, 0.977 42%, 0.975, 0.978 48.9%, 1);
+    --df-easing-spring-bouncy: linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1.006 30.7%, 1.119 34.8%, 1.17 38.4%, 1.177, 1.152 44.4%, 1.029 53%, 0.988 57.5%, 0.984, 0.989 63.2%, 1.006 69.3%, 1.012 75.4%, 1.007, 1);
+    --df-focus-ring-width: 2px;
+    --df-focus-ring-offset: 2px;
+    --df-focus-ring-color: #7ee787;
+    --df-z-index-base: 0;
+    --df-z-index-raised: 10;
+    --df-z-index-overlay: 100;
+    --df-z-index-modal: 200;
+    --df-z-index-toast: 300;
+    --df-breakpoint-sm: 640px;
+    --df-breakpoint-md: 1024px;
+    --df-breakpoint-lg: 1440px;
+    --df-breakpoint-xl: 1920px;
+    --df-breakpoint-2xl: 2560px;
+    --df-max-width-prose: 65ch;
+    --df-max-width-sm: 720px;
+    --df-max-width-md: 960px;
+    --df-max-width-lg: 1200px;
+    --df-max-width-xl: 1440px;
+  }
+
+  /* ── @property declarations for animatable tokens ──────────────────── */
+  @property --df-hue {
+    syntax: '<number>';
+    initial-value: 150;
+    inherits: true;
+  }
+
+  @property --df-glow-opacity {
+    syntax: '<number>';
+    initial-value: 0.4;
+    inherits: true;
+  }
+
+  @property --df-scale {
+    syntax: '<number>';
+    initial-value: 1;
+    inherits: true;
+  }
+
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   Layer: df-keyframes — Animations
+   ══════════════════════════════════════════════════════════════════════════════ */
+@layer df-keyframes {
+  /* CRT scanline sweep */
+  @keyframes df-crt-sweep {
+    0%   { background-position: 0 -100%; }
+    100% { background-position: 0 200%; }
+  }
+
+  /* Accent glow pulse */
+  @keyframes df-glow-pulse {
+    0%, 100% { filter: drop-shadow(0 0 6px rgba(126,231,135,0.4)); }
+    50%      { filter: drop-shadow(0 0 14px rgba(126,231,135,0.7)); }
+  }
+
+  /* Error/recording alert pulse */
+  @keyframes df-alert-pulse {
+    0%, 100% { box-shadow: 0 0 6px rgba(255,51,51,0.4); }
+    50%      { box-shadow: 0 0 16px rgba(255,51,51,0.8); }
+  }
+
+  /* Processing amber pulse */
+  @keyframes df-processing-pulse {
+    0%, 100% { box-shadow: 0 0 6px rgba(227,179,65,0.3); }
+    50%      { box-shadow: 0 0 12px rgba(227,179,65,0.6); }
+  }
+
+  /* Cursor blink */
+  @keyframes df-blink {
+    0%, 100% { opacity: 1; }
+    50%      { opacity: 0; }
+  }
+
+  /* Fade in (for @starting-style fallback) */
+  @keyframes df-fade-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  /* Slide up entrance */
+  @keyframes df-slide-up {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  /* Spin (for loading indicators) */
+  @keyframes df-spin {
+    to { transform: rotate(360deg); }
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   Layer: df-components — Reusable component classes
+   ══════════════════════════════════════════════════════════════════════════════ */
+@layer df-components {
+  /* ── CRT scanline overlay ──────────────────────────────────────────── */
+  .df-crt {
+    position: relative;
+    overflow: hidden;
+  }
+  .df-crt::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(126,231,135,0.03) 50%,
+      transparent 100%
+    );
+    background-size: 100% 40px;
+    animation: df-crt-sweep 4s linear infinite;
+    pointer-events: none; z-index: 9;
+  }
+
+  /* ── Diagonal grid texture ─────────────────────────────────────────── */
+  .df-grid {
+    background-image: repeating-linear-gradient(
+      -45deg,
+      rgba(126,231,135,0.02) 0px,
+      rgba(126,231,135,0.02) 1px,
+      transparent 1px,
+      transparent 8px
+    );
+  }
+
+  /* ── Corner brackets ───────────────────────────────────────────────── */
+  .df-brackets {
+    position: relative;
+  }
+  .df-brackets::before,
+  .df-brackets::after {
+    content: '';
+    position: absolute;
+    width: 12px; height: 12px;
+    border-color: var(--df-color-accent-default);
+    border-style: solid;
+    pointer-events: none;
+  }
+  .df-brackets::before {
+    top: 0; left: 0;
+    border-width: 2px 0 0 2px;
+  }
+  .df-brackets::after {
+    bottom: 0; right: 0;
+    border-width: 0 2px 2px 0;
+  }
+
+  /* ── Focus ring (WCAG 2.2 compliant) ───────────────────────────────── */
+  .df-focus-ring:focus-visible {
+    outline: var(--df-focus-ring-width) solid var(--df-focus-ring-color);
+    outline-offset: var(--df-focus-ring-offset);
+  }
+
+  /* ── Panel component ───────────────────────────────────────────────── */
+  .df-panel {
+    background: var(--df-color-bg-surface);
+    border: 1px solid var(--df-color-border-default);
+    clip-path: var(--df-clip-md);
+    padding: var(--df-space-4) var(--df-space-6);
+  }
+
+  /* ── Spinner ───────────────────────────────────────────────────────── */
+  .df-spinner {
+    width: 1em; height: 1em;
+    border: 2px solid var(--df-color-border-default);
+    border-top-color: var(--df-color-accent-default);
+    border-radius: var(--df-radius-full);
+    animation: df-spin 0.6s linear infinite;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   Layer: df-utilities — Utility classes
+   ══════════════════════════════════════════════════════════════════════════════ */
+@layer df-utilities {
+  /* Screen reader only */
+  .df-sr-only {
+    position: absolute;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* Reduced motion: disable animations for users who prefer it */
+  @media (prefers-reduced-motion: reduce) {
+    .df-crt::after,
+    .df-grid {
+      animation: none;
+      background-image: none;
+    }
+  }
+}

package/src/packages/design-tokens/dist/tokens.d.ts

@@ -0,0 +1,229 @@
+/* @devglide/design-tokens v2.0 — generated, do not edit */
+export declare const tokens: {
+  primitive: {
+    neutral: {
+      0: string,
+      1: string,
+      2: string,
+      3: string,
+      4: string,
+      5: string,
+      6: string,
+      7: string,
+      8: string,
+      9: string,
+      10: string,
+      11: string,
+      12: string
+    },
+    green: {
+      1: string,
+      2: string,
+      3: string,
+      4: string,
+      5: string,
+      6: string,
+      7: string,
+      8: string,
+      9: string
+    },
+    red: {
+      1: string,
+      2: string,
+      3: string,
+      4: string,
+      5: string,
+      6: string
+    },
+    amber: {
+      1: string,
+      2: string,
+      3: string,
+      4: string,
+      5: string,
+      6: string
+    },
+    blue: {
+      1: string,
+      2: string,
+      3: string,
+      4: string,
+      5: string
+    }
+  },
+  color: {
+    bg: {
+      base: string,
+      surface: string,
+      raised: string,
+      overlay: string,
+      sunken: string,
+      invert: string
+    },
+    border: {
+      subtle: string,
+      default: string,
+      strong: string,
+      accent: string
+    },
+    text: {
+      primary: string,
+      secondary: string,
+      muted: string,
+      accent: string,
+      inverse: string,
+      link: string
+    },
+    accent: {
+      subtle: string,
+      dim: string,
+      muted: string,
+      default: string,
+      bright: string,
+      contrast: string
+    },
+    state: {
+      idle: string,
+      active: string,
+      recording: string,
+      processing: string,
+      success: string,
+      error: string,
+      warning: string,
+      info: string
+    }
+  },
+  font: {
+    mono: string,
+    ui: string,
+    display: string
+  },
+  fontSize: {
+    xs: string,
+    sm: string,
+    md: string,
+    lg: string,
+    xl: string,
+    2xl: string,
+    3xl: string
+  },
+  letterSpacing: {
+    tight: string,
+    normal: string,
+    wide: string,
+    wider: string
+  },
+  lineHeight: {
+    tight: string,
+    normal: string,
+    loose: string
+  },
+  space: {
+    1: string,
+    2: string,
+    3: string,
+    4: string,
+    5: string,
+    6: string,
+    8: string,
+    10: string,
+    12: string,
+    16: string,
+    20: string,
+    24: string,
+    px: string
+  },
+  radius: {
+    none: string,
+    xs: string,
+    sm: string,
+    md: string,
+    lg: string,
+    xl: string,
+    full: string
+  },
+  clip: {
+    sm: string,
+    md: string,
+    lg: string,
+    xl: string
+  },
+  shadow: {
+    sm: string,
+    md: string,
+    lg: string,
+    xl: string
+  },
+  glow: {
+    accent: string,
+    accent-strong: string,
+    error: string,
+    success: string,
+    processing: string
+  },
+  opacity: {
+    5: string,
+    10: string,
+    20: string,
+    40: string,
+    60: string,
+    80: string
+  },
+  duration: {
+    fast: string,
+    base: string,
+    slow: string,
+    slower: string
+  },
+  easing: {
+    default: string,
+    in: string,
+    out: string,
+    linear: string,
+    spring: string,
+    spring-bouncy: string
+  },
+  focus: {
+    ring-width: string,
+    ring-offset: string,
+    ring-color: string
+  },
+  zIndex: {
+    base: string,
+    raised: string,
+    overlay: string,
+    modal: string,
+    toast: string
+  },
+  breakpoint: {
+    sm: string,
+    md: string,
+    lg: string,
+    xl: string,
+    2xl: string
+  },
+  maxWidth: {
+    prose: string,
+    sm: string,
+    md: string,
+    lg: string,
+    xl: string
+  }
+};
+
+export declare const cssVars: Record<string, string>;
+export declare const primitives: typeof tokens.primitive;
+export declare const colors: typeof tokens.color;
+export declare const fonts: typeof tokens.font;
+export declare const fontSizes: typeof tokens.fontSize;
+export declare const spacing: typeof tokens.space;
+export declare const radii: typeof tokens.radius;
+export declare const clips: typeof tokens.clip;
+export declare const shadows: typeof tokens.shadow;
+export declare const glows: typeof tokens.glow;
+export declare const opacities: typeof tokens.opacity;
+export declare const durations: typeof tokens.duration;
+export declare const easings: typeof tokens.easing;
+export declare const focusRing: typeof tokens.focus;
+export declare const breakpoints: typeof tokens.breakpoint;
+export declare const maxWidths: typeof tokens.maxWidth;