minm-ui 1.0.0

package/src/styles/tokens.css

@@ -0,0 +1,199 @@
+/* =========================================================================
+   Confast design tokens
+   Brand: "spruce" — a teal-shifted evergreen, thematic to cabins/forest and
+   kept deliberately distinct from the semantic success green.
+   Theme model: role tokens on :root, redefined for dark via both
+   prefers-color-scheme and [data-theme] so the manual toggle always wins.
+   ========================================================================= */
+
+:root {
+  /* --- Brand scale (spruce) --- */
+  --brand-50:  #ecfdf6;
+  --brand-100: #d1fae7;
+  --brand-200: #a7f3d4;
+  --brand-300: #6ee7bb;
+  --brand-400: #34d3a0;
+  --brand-500: #10b285;
+  --brand-600: #0e7c66;
+  --brand-700: #0c6353;
+  --brand-800: #0d4f43;
+  --brand-900: #0c4139;
+  --brand-950: #04251f;
+
+  /* --- Neutral slate (faint green-cool bias) --- */
+  --slate-25:  #fafbfb;
+  --slate-50:  #f6f8f7;
+  --slate-100: #eceff0;
+  --slate-200: #dde3e3;
+  --slate-300: #c3cdcd;
+  --slate-400: #93a1a1;
+  --slate-500: #667474;
+  --slate-600: #4c5959;
+  --slate-700: #3a4545;
+  --slate-800: #232c2c;
+  --slate-900: #151b1b;
+  --slate-950: #0c1010;
+
+  /* --- Semantic (independent of brand accent) --- */
+  --success: #16a34a;
+  --success-bg: #dcfce7;
+  --warning: #d97706;
+  --warning-bg: #fef3c7;
+  --danger:  #dc2626;
+  --danger-bg: #fee2e2;
+  --info:    #2563eb;
+  --info-bg: #dbeafe;
+
+  /* --- Role tokens (LIGHT) --- */
+  --bg:           var(--slate-50);
+  --surface:      #ffffff;
+  --surface-2:    var(--slate-50);
+  --surface-hover: var(--slate-100);
+  --border:       var(--slate-200);
+  --border-strong: var(--slate-300);
+  --text:         var(--slate-900);
+  --text-muted:   var(--slate-500);
+  --text-subtle:  var(--slate-400);
+  --accent:       var(--brand-600);
+  --accent-hover: var(--brand-700);
+  --accent-fg:    #ffffff;
+  --accent-soft:  var(--brand-50);
+  --accent-soft-fg: var(--brand-700);
+  --ring:         color-mix(in srgb, var(--brand-500) 45%, transparent);
+
+  /* --- Elevation --- */
+  --shadow-sm: 0 1px 2px 0 rgb(12 16 16 / 0.05);
+  --shadow:    0 1px 3px 0 rgb(12 16 16 / 0.08), 0 1px 2px -1px rgb(12 16 16 / 0.06);
+  --shadow-md: 0 4px 12px -2px rgb(12 16 16 / 0.10), 0 2px 6px -3px rgb(12 16 16 / 0.08);
+  --shadow-lg: 0 12px 28px -6px rgb(12 16 16 / 0.16), 0 6px 12px -8px rgb(12 16 16 / 0.12);
+
+  /* --- Radii --- */
+  --radius-sm: 6px;
+  --radius:    10px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --radius-full: 9999px;
+
+  color-scheme: light;
+}
+
+/* Dark theme via OS preference … */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:            var(--slate-950);
+    --surface:       var(--slate-900);
+    --surface-2:     #101616;
+    --surface-hover: var(--slate-800);
+    --border:        color-mix(in srgb, var(--slate-700) 70%, transparent);
+    --border-strong: var(--slate-600);
+    --text:          #eef2f1;
+    --text-muted:    var(--slate-400);
+    --text-subtle:   var(--slate-500);
+    --accent:        var(--brand-400);
+    --accent-hover:  var(--brand-300);
+    --accent-fg:     #04251f;
+    --accent-soft:   color-mix(in srgb, var(--brand-500) 16%, transparent);
+    --accent-soft-fg: var(--brand-200);
+    --ring:          color-mix(in srgb, var(--brand-400) 50%, transparent);
+
+    --success-bg: color-mix(in srgb, var(--success) 20%, transparent);
+    --warning-bg: color-mix(in srgb, var(--warning) 20%, transparent);
+    --danger-bg:  color-mix(in srgb, var(--danger) 20%, transparent);
+    --info-bg:    color-mix(in srgb, var(--info) 22%, transparent);
+
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55);
+    --shadow-lg: 0 16px 36px -8px rgb(0 0 0 / 0.6);
+
+    color-scheme: dark;
+  }
+}
+
+/* … and explicit toggle, which must beat the media query in both directions. */
+:root[data-theme="dark"] {
+  --bg:            var(--slate-950);
+  --surface:       var(--slate-900);
+  --surface-2:     #101616;
+  --surface-hover: var(--slate-800);
+  --border:        color-mix(in srgb, var(--slate-700) 70%, transparent);
+  --border-strong: var(--slate-600);
+  --text:          #eef2f1;
+  --text-muted:    var(--slate-400);
+  --text-subtle:   var(--slate-500);
+  --accent:        var(--brand-400);
+  --accent-hover:  var(--brand-300);
+  --accent-fg:     #04251f;
+  --accent-soft:   color-mix(in srgb, var(--brand-500) 16%, transparent);
+  --accent-soft-fg: var(--brand-200);
+  --ring:          color-mix(in srgb, var(--brand-400) 50%, transparent);
+  --success-bg: color-mix(in srgb, var(--success) 20%, transparent);
+  --warning-bg: color-mix(in srgb, var(--warning) 20%, transparent);
+  --danger-bg:  color-mix(in srgb, var(--danger) 20%, transparent);
+  --info-bg:    color-mix(in srgb, var(--info) 22%, transparent);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55);
+  --shadow-lg: 0 16px 36px -8px rgb(0 0 0 / 0.6);
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  --bg:           var(--slate-50);
+  --surface:      #ffffff;
+  --surface-2:    var(--slate-50);
+  --surface-hover: var(--slate-100);
+  --border:       var(--slate-200);
+  --border-strong: var(--slate-300);
+  --text:         var(--slate-900);
+  --text-muted:   var(--slate-500);
+  --text-subtle:  var(--slate-400);
+  --accent:       var(--brand-600);
+  --accent-hover: var(--brand-700);
+  --accent-fg:    #ffffff;
+  --accent-soft:  var(--brand-50);
+  --accent-soft-fg: var(--brand-700);
+  --ring:         color-mix(in srgb, var(--brand-500) 45%, transparent);
+  color-scheme: light;
+}
+
+/* Base element styling driven entirely by tokens. */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Apple Color Emoji", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Numeric alignment helper for tables/metrics. */
+.tabular { font-variant-numeric: tabular-nums; }
+
+/* Consistent, visible keyboard focus. */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Themed, slim scrollbars. */
+* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+  }
+}

package/src/types.ts

@@ -0,0 +1,9 @@
+/** Shared UI types. */
+export interface Column {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  align?: 'left' | 'right' | 'center';
+  width?: string;
+  class?: string;
+}

package/tailwind-preset.cjs

@@ -0,0 +1,94 @@
+/**
+ * Shared Tailwind preset for all Confast web apps.
+ * Colors map to the CSS variables defined in src/styles/tokens.css so utilities
+ * like `bg-surface`, `text-muted`, `bg-accent` are theme-aware automatically.
+ */
+module.exports = {
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: 'var(--brand-50)',
+          100: 'var(--brand-100)',
+          200: 'var(--brand-200)',
+          300: 'var(--brand-300)',
+          400: 'var(--brand-400)',
+          500: 'var(--brand-500)',
+          600: 'var(--brand-600)',
+          700: 'var(--brand-700)',
+          800: 'var(--brand-800)',
+          900: 'var(--brand-900)',
+          950: 'var(--brand-950)',
+        },
+        bg: 'var(--bg)',
+        surface: 'var(--surface)',
+        'surface-2': 'var(--surface-2)',
+        'surface-hover': 'var(--surface-hover)',
+        border: 'var(--border)',
+        'border-strong': 'var(--border-strong)',
+        content: 'var(--text)',
+        muted: 'var(--text-muted)',
+        subtle: 'var(--text-subtle)',
+        accent: 'var(--accent)',
+        'accent-hover': 'var(--accent-hover)',
+        'accent-fg': 'var(--accent-fg)',
+        'accent-soft': 'var(--accent-soft)',
+        'accent-soft-fg': 'var(--accent-soft-fg)',
+        success: 'var(--success)',
+        'success-bg': 'var(--success-bg)',
+        warning: 'var(--warning)',
+        'warning-bg': 'var(--warning-bg)',
+        danger: 'var(--danger)',
+        'danger-bg': 'var(--danger-bg)',
+        info: 'var(--info)',
+        'info-bg': 'var(--info-bg)',
+      },
+      borderColor: {
+        DEFAULT: 'var(--border)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        DEFAULT: 'var(--radius)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        full: 'var(--radius-full)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+      },
+      fontFamily: {
+        sans: [
+          'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI',
+          'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif',
+        ],
+      },
+      ringColor: {
+        DEFAULT: 'var(--ring)',
+      },
+      keyframes: {
+        'fade-in': { from: { opacity: '0' }, to: { opacity: '1' } },
+        'slide-up': {
+          from: { opacity: '0', transform: 'translateY(8px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-in-right': {
+          from: { transform: 'translateX(100%)' },
+          to: { transform: 'translateX(0)' },
+        },
+        shimmer: {
+          '100%': { transform: 'translateX(100%)' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 0.2s ease-out',
+        'slide-up': 'slide-up 0.25s cubic-bezier(0.16,1,0.3,1)',
+        'slide-in-right': 'slide-in-right 0.25s cubic-bezier(0.16,1,0.3,1)',
+      },
+    },
+  },
+  plugins: [],
+};