canny-ui 1.0.0

package/src/components/_text.scss

@@ -0,0 +1,132 @@
+@use '../tokens/primitives' as *;
+
+// ── Text / Typography primitives ─────────────────────────────────────────
+// Consumed by the React <Text> component. Each variant is a self-contained
+// typographic style; the component picks the default element (h1, p, etc.)
+// but consumers can override via `as`.
+
+.cny-text {
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.cny-text-display {
+  font-family: var(--font-display);
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+}
+
+.cny-text-h1 {
+  font-family: var(--font-display);
+  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
+  font-weight: 500;
+  line-height: 1.15;
+  letter-spacing: -0.025em;
+}
+
+.cny-text-h2 {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.cny-text-h3 {
+  font-family: var(--font-body);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+}
+
+.cny-text-h4 {
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+}
+
+.cny-text-h5 {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+}
+
+.cny-text-h6 {
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: var(--track-wide);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.cny-text-lead {
+  font-family: var(--font-body);
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+
+.cny-text-body {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+.cny-text-small {
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.cny-text-caption {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+.cny-text-code {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-xs);
+  background: var(--bg-surface-low);
+  color: var(--text-primary);
+}
+
+.cny-text-kbd {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  padding: 0.1em 0.4em;
+  border-radius: var(--radius-xs);
+  background: var(--bg-surface-lowest);
+  color: var(--text-primary);
+  box-shadow: inset 0 0 0 1px var(--border-color), 0 1px 0 0 var(--border-color);
+}
+
+// ── Weight modifiers ─────────────────────────────────────────────────────
+.cny-weight-regular  { font-weight: 400; }
+.cny-weight-medium   { font-weight: 500; }
+.cny-weight-semibold { font-weight: 600; }
+.cny-weight-bold     { font-weight: 700; }
+
+// ── Alignment ────────────────────────────────────────────────────────────
+.cny-text-left    { text-align: left; }
+.cny-text-center  { text-align: center; }
+.cny-text-right   { text-align: right; }
+.cny-text-justify { text-align: justify; }

package/src/components/_tooltip.scss

@@ -0,0 +1,72 @@
+@use '../tokens/primitives' as *;
+
+// Tooltip — CSS-only, powered by `data-tooltip` attribute on the trigger.
+// Usage: <button class="has-tooltip" data-tooltip="Hello">?</button>
+
+.has-tooltip {
+  position: relative;
+
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--transition-fast),
+      transform var(--transition-fast);
+    z-index: 50;
+  }
+
+  &::before {
+    content: attr(data-tooltip);
+    bottom: calc(100% + 8px);
+    transform: translate(-50%, 4px);
+    padding: 6px 10px;
+    background: var(--color-neutral);
+    color: var(--color-neutral-on);
+    font-family: var(--font-body);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.3;
+    white-space: nowrap;
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-md);
+    max-width: 240px;
+  }
+
+  &::after {
+    content: '';
+    bottom: calc(100% + 2px);
+    transform: translate(-50%, 4px);
+    border: 4px solid transparent;
+    border-top-color: var(--color-neutral);
+  }
+
+  &:hover::before,
+  &:hover::after,
+  &:focus-visible::before,
+  &:focus-visible::after {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+
+  // Position variants
+  &.tooltip-bottom {
+    &::before {
+      bottom: auto;
+      top: calc(100% + 8px);
+    }
+    &::after {
+      bottom: auto;
+      top: calc(100% + 2px);
+      border-top-color: transparent;
+      border-bottom-color: var(--color-neutral);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .has-tooltip::before,
+  .has-tooltip::after { transition: opacity var(--transition-fast); }
+}

package/src/scripts/table-resize.js

@@ -0,0 +1,104 @@
+/**
+ * Canny UI — table column resizer.
+ * Attaches drag handles to every `.table.resizable` on the page.
+ *
+ * Usage:
+ *   <script src="canny-ui/dist/table-resize.js" defer></script>
+ *   <table class="table resizable"> ... </table>
+ *
+ * Or, for dynamically inserted tables:
+ *   window.CannyUI.makeTableResizable(tableEl);
+ */
+(function () {
+  var MIN_WIDTH = 40;
+
+  function measureAndFix(table, ths) {
+    // Measure under auto layout, then freeze with table-layout: fixed.
+    var widths = [];
+    for (var i = 0; i < ths.length; i++) widths.push(ths[i].offsetWidth);
+    table.style.tableLayout = 'fixed';
+    for (var j = 0; j < ths.length; j++) ths[j].style.width = widths[j] + 'px';
+  }
+
+  function makeResizable(table) {
+    if (table.dataset.resizableInit === '1') return;
+    var ths = table.querySelectorAll('thead th');
+    if (!ths.length) return;
+
+    measureAndFix(table, ths);
+    table.dataset.resizableInit = '1';
+
+    for (var i = 0; i < ths.length; i++) {
+      // Last column has nothing to drag against.
+      if (i === ths.length - 1) continue;
+      attachHandle(table, ths[i]);
+    }
+  }
+
+  function attachHandle(table, th) {
+    var resizer = th.querySelector('.th-resizer');
+    if (!resizer) {
+      resizer = document.createElement('span');
+      resizer.className = 'th-resizer';
+      resizer.setAttribute('aria-hidden', 'true');
+      th.appendChild(resizer);
+    }
+
+    function pointerDown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var isTouch = e.type === 'touchstart';
+      var startX = isTouch ? e.touches[0].clientX : e.clientX;
+      var startWidth = th.offsetWidth;
+
+      resizer.classList.add('resizing');
+      table.classList.add('is-resizing');
+      document.body.style.cursor = 'col-resize';
+
+      function move(ev) {
+        var clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
+        var next = Math.max(MIN_WIDTH, startWidth + (clientX - startX));
+        th.style.width = next + 'px';
+      }
+
+      function stop() {
+        resizer.classList.remove('resizing');
+        table.classList.remove('is-resizing');
+        document.body.style.cursor = '';
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('mouseup', stop);
+        document.removeEventListener('touchmove', move);
+        document.removeEventListener('touchend', stop);
+        document.removeEventListener('touchcancel', stop);
+      }
+
+      document.addEventListener('mousemove', move);
+      document.addEventListener('mouseup', stop);
+      document.addEventListener('touchmove', move, { passive: false });
+      document.addEventListener('touchend', stop);
+      document.addEventListener('touchcancel', stop);
+    }
+
+    resizer.addEventListener('mousedown', pointerDown);
+    resizer.addEventListener('touchstart', pointerDown, { passive: false });
+  }
+
+  function init() {
+    var tables = document.querySelectorAll('.table.resizable');
+    for (var i = 0; i < tables.length; i++) makeResizable(tables[i]);
+  }
+
+  if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  }
+
+  if (typeof window !== 'undefined') {
+    window.CannyUI = window.CannyUI || {};
+    window.CannyUI.makeTableResizable = makeResizable;
+  }
+})();

package/src/tokens/_primitives.scss

@@ -0,0 +1,73 @@
+// Canny-UI primitive tokens — Enterprise palette.
+// Zinc neutrals, indigo primary. Calibrated for trust, not fashion.
+// Inspired by proven enterprise systems: Linear, Stripe, Vercel.
+
+// ── Zinc — cool neutral scale (surfaces + text) ─────────────────────────
+$zinc-50:  #fafafa;
+$zinc-100: #f4f4f5;
+$zinc-200: #e4e4e7;
+$zinc-300: #d4d4d8;
+$zinc-400: #a1a1aa;
+$zinc-500: #71717a;
+$zinc-600: #52525b;
+$zinc-700: #3f3f46;
+$zinc-800: #27272a;
+$zinc-900: #18181b;
+$zinc-950: #09090b;
+
+// ── Indigo — primary brand ──────────────────────────────────────────────
+// #4f46e5 at 600 is the Linear/Vercel-adjacent "serious" indigo.
+$indigo-50:  #eef2ff;
+$indigo-100: #e0e7ff;
+$indigo-200: #c7d2fe;
+$indigo-400: #818cf8;
+$indigo-500: #6366f1;
+$indigo-600: #4f46e5;
+$indigo-700: #4338ca;
+$indigo-800: #3730a3;
+
+// ── Semantic — standard enterprise, not editorial ───────────────────────
+$red-50:   #fef2f2;
+$red-500:  #ef4444;
+$red-600:  #dc2626;
+$red-700:  #b91c1c;
+
+$amber-50:  #fffbeb;
+$amber-500: #f59e0b;
+$amber-600: #d97706;
+$amber-700: #b45309;
+
+$emerald-50:  #ecfdf5;
+$emerald-500: #10b981;
+$emerald-600: #059669;
+$emerald-700: #047857;
+
+$sky-50:   #f0f9ff;
+$sky-500:  #0ea5e9;
+$sky-600:  #0284c7;
+$sky-700:  #0369a1;
+
+// ── Spacing — 4px grid ──────────────────────────────────────────────────
+$space-0:  0;
+$space-1:  4px;
+$space-2:  8px;
+$space-3:  12px;
+$space-4:  16px;
+$space-5:  20px;
+$space-6:  24px;
+$space-8:  32px;
+$space-10: 40px;
+$space-12: 48px;
+$space-16: 64px;
+
+// ── Radii — enterprise-conservative ─────────────────────────────────────
+$radius-xs: 3px;
+$radius-sm: 5px;
+$radius-md: 7px;
+$radius-lg: 10px;
+$radius-xl: 14px;
+$radius-full: 9999px;
+
+// ── Grid & hairline ─────────────────────────────────────────────────────
+$hairline:   1px;
+$grid-unit:  4px;

package/src/tokens/_semantic.scss

@@ -0,0 +1,199 @@
+@use 'primitives' as *;
+
+:root {
+  // ── Surfaces ──────────────────────────────────────────────────────────
+  --bg-base:            #{$zinc-50};
+  --bg-surface-low:     #{$zinc-100};
+  --bg-surface-lowest:  #ffffff;
+  --bg-surface-edge:    #{$zinc-200};
+
+  // ── Text ──────────────────────────────────────────────────────────────
+  --text-primary:       #{$zinc-950};
+  --text-secondary:     #{$zinc-700};
+  --text-muted:         #{$zinc-500};
+  --text-disabled:      #{$zinc-400};
+  --text-on-solid:      #ffffff;
+  --text-accent:        #{$indigo-600};
+
+  // ── Brand (primary) ───────────────────────────────────────────────────
+  --color-primary:       #{$indigo-600};
+  --color-primary-hover: #{$indigo-700};
+  --color-primary-active:#{$indigo-800};
+  --color-primary-soft:  #{$indigo-50};
+  --color-primary-on:    #ffffff;
+
+  // ── Neutral solid (secondary button) ──────────────────────────────────
+  --color-neutral:       #{$zinc-900};
+  --color-neutral-hover: #{$zinc-800};
+  --color-neutral-soft:  #{$zinc-100};
+  --color-neutral-on:    #ffffff;
+
+  // ── Semantic — roles ──────────────────────────────────────────────────
+  --color-danger:        #{$red-600};
+  --color-danger-hover:  #{$red-700};
+  --color-danger-soft:   #{$red-50};
+  --color-danger-on:     #ffffff;
+
+  --color-warning:       #{$amber-600};
+  --color-warning-hover: #{$amber-700};
+  --color-warning-soft:  #{$amber-50};
+  --color-warning-on:    #ffffff;
+
+  --color-success:       #{$emerald-600};
+  --color-success-hover: #{$emerald-700};
+  --color-success-soft:  #{$emerald-50};
+  --color-success-on:    #ffffff;
+
+  --color-info:          #{$sky-600};
+  --color-info-hover:    #{$sky-700};
+  --color-info-soft:     #{$sky-50};
+  --color-info-on:       #ffffff;
+
+  // ── Borders (enterprise uses real borders, unlike the paper edition) ──
+  --border-color:        #{$zinc-200};
+  --border-color-strong: #{$zinc-300};
+  --border-focus:        #{$indigo-500};
+
+  // ── Ring (focus halo) ─────────────────────────────────────────────────
+  --ring-color:          rgba(79, 70, 229, 0.28);
+  --ring-width:          3px;
+
+  // ── Shadows — subtle, predictable ─────────────────────────────────────
+  --shadow-xs:    0 1px 2px 0 rgba(9, 9, 11, 0.05);
+  --shadow-sm:    0 1px 2px 0 rgba(9, 9, 11, 0.06),
+                  0 1px 3px 0 rgba(9, 9, 11, 0.04);
+  --shadow-md:    0 4px 6px -1px rgba(9, 9, 11, 0.07),
+                  0 2px 4px -2px rgba(9, 9, 11, 0.05);
+  --shadow-lg:    0 10px 15px -3px rgba(9, 9, 11, 0.08),
+                  0 4px 6px -4px rgba(9, 9, 11, 0.05);
+
+  // Legacy aliases (kept for backward compatibility with prior demo)
+  --shadow-card:     var(--shadow-sm);
+  --shadow-lift:     var(--shadow-lg);
+  --shadow-ambient:  0 0 0 3px var(--ring-color);
+
+  // ── Motion ────────────────────────────────────────────────────────────
+  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
+  --transition-fast: 120ms var(--ease-standard);
+  --transition-base: 180ms var(--ease-standard);
+  --transition-slow: 260ms var(--ease-standard);
+
+  // ── Radii ─────────────────────────────────────────────────────────────
+  --radius-xs: #{$radius-xs};
+  --radius-sm: #{$radius-sm};
+  --radius-md: #{$radius-md};
+  --radius-lg: #{$radius-lg};
+  --radius-xl: #{$radius-xl};
+  --radius-full: #{$radius-full};
+
+  // ── Fonts ─────────────────────────────────────────────────────────────
+  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-display: 'Fraunces', Georgia, serif;
+
+  // ── Hairline (for dividers) ───────────────────────────────────────────
+  --hairline-color:  #{$zinc-200};
+  --hairline-strong: #{$zinc-300};
+
+  // ── Type scale ────────────────────────────────────────────────────────
+  --text-xs:   0.75rem;
+  --text-sm:   0.875rem;
+  --text-base: 0.9375rem;
+  --text-lg:   1.0625rem;
+  --text-xl:   1.25rem;
+  --text-2xl:  1.5rem;
+  --text-3xl:  1.875rem;
+  --text-4xl:  2.25rem;
+
+  --track-tight:  -0.015em;
+  --track-normal: 0;
+  --track-wide:   0.04em;
+  --track-wider:  0.08em;
+}
+
+// ── Dark theme ──────────────────────────────────────────────────────────
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-base:            #{$zinc-950};
+    --bg-surface-low:     #{$zinc-900};
+    --bg-surface-lowest:  #{$zinc-800};
+    --bg-surface-edge:    #{$zinc-700};
+
+    --text-primary:       #{$zinc-50};
+    --text-secondary:     #{$zinc-300};
+    --text-muted:         #{$zinc-400};
+    --text-disabled:      #{$zinc-600};
+    --text-accent:        #{$indigo-400};
+
+    --color-primary:       #{$indigo-500};
+    --color-primary-hover: #{$indigo-400};
+    --color-primary-active:#{$indigo-600};
+    --color-primary-soft:  rgba(99, 102, 241, 0.15);
+
+    --color-neutral:       #{$zinc-50};
+    --color-neutral-hover: #ffffff;
+    --color-neutral-soft:  #{$zinc-800};
+    --color-neutral-on:    #{$zinc-950};
+
+    --color-danger-soft:   rgba(220, 38, 38, 0.16);
+    --color-warning-soft:  rgba(217, 119, 6, 0.16);
+    --color-success-soft:  rgba(5, 150, 105, 0.16);
+    --color-info-soft:     rgba(2, 132, 199, 0.16);
+
+    --border-color:        #{$zinc-800};
+    --border-color-strong: #{$zinc-700};
+    --border-focus:        #{$indigo-400};
+    --ring-color:          rgba(99, 102, 241, 0.45);
+
+    --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.4),
+                    0 1px 3px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg:    0 16px 32px -8px rgba(0, 0, 0, 0.6);
+
+    --hairline-color:  #{$zinc-800};
+    --hairline-strong: #{$zinc-700};
+  }
+}
+
+.cny-dark {
+  --bg-base:            #{$zinc-950};
+  --bg-surface-low:     #{$zinc-900};
+  --bg-surface-lowest:  #{$zinc-800};
+  --bg-surface-edge:    #{$zinc-700};
+
+  --text-primary:       #{$zinc-50};
+  --text-secondary:     #{$zinc-300};
+  --text-muted:         #{$zinc-400};
+  --text-disabled:      #{$zinc-600};
+  --text-accent:        #{$indigo-400};
+
+  --color-primary:       #{$indigo-500};
+  --color-primary-hover: #{$indigo-400};
+  --color-primary-active:#{$indigo-600};
+  --color-primary-soft:  rgba(99, 102, 241, 0.15);
+
+  --color-neutral:       #{$zinc-50};
+  --color-neutral-hover: #ffffff;
+  --color-neutral-soft:  #{$zinc-800};
+  --color-neutral-on:    #{$zinc-950};
+
+  --color-danger-soft:   rgba(220, 38, 38, 0.16);
+  --color-warning-soft:  rgba(217, 119, 6, 0.16);
+  --color-success-soft:  rgba(5, 150, 105, 0.16);
+  --color-info-soft:     rgba(2, 132, 199, 0.16);
+
+  --border-color:        #{$zinc-800};
+  --border-color-strong: #{$zinc-700};
+  --border-focus:        #{$indigo-400};
+  --ring-color:          rgba(99, 102, 241, 0.45);
+
+  --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.4),
+                  0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.5);
+  --shadow-lg:    0 16px 32px -8px rgba(0, 0, 0, 0.6);
+
+  --hairline-color:  #{$zinc-800};
+  --hairline-strong: #{$zinc-700};
+}