@exsto/ds 0.0.1-rc.1 → 0.0.1-rc.3

package/dist/styles.css

@@ -124,6 +124,8 @@
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --text-2xs: 10px;
+    --text-2xs--line-height: 14px;
     --color-border: var(--border);
   }
 }
@@ -2277,6 +2279,11 @@
     font-family: var(--font-sans);
   }
 
+  .text-2xs {
+    font-size: var(--text-2xs);
+    line-height: var(--tw-leading, var(--text-2xs--line-height));
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2806,6 +2813,10 @@
     --tw-exit-opacity: 0;
   }
 
+  .running {
+    animation-play-state: running;
+  }
+
   .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
     opacity: 1;
   }
@@ -5451,6 +5462,10 @@
       display: flex;
     }
 
+    .md\:table-cell {
+      display: table-cell;
+    }
+
     .md\:flex-row {
       flex-direction: row;
     }

package/dist/theme.css

@@ -0,0 +1,241 @@
+/*
+ * @exsto/ds design tokens and their Tailwind mapping, uncompiled.
+ *
+ * Import this when you want the design system vocabulary (bg-card,
+ * text-muted-foreground, rounded-lg, font-sans, text-2xs, ...) in your OWN
+ * markup. styles.css styles the components; this gives your Tailwind build
+ * the tokens behind them.
+ *
+ * ORDER MATTERS. styles.css goes FIRST, before your Tailwind entry:
+ *
+ *   @import "@exsto/ds/styles.css";
+ *   @import "tailwindcss";
+ *   @import "@exsto/ds/theme.css";
+ *
+ * styles.css is a compiled Tailwind build, so its utilities land in the same
+ * cascade layer as yours and whichever comes last wins. Import it after your
+ * Tailwind and its unconditional .hidden beats your .md:table-cell, which
+ * silently drops responsive markup.
+ */
+
+@custom-variant dark (&:is(.dark *));
+/*
+ * Brand layer.
+ *
+ * The colour ramps come from Tailwind v4 unchanged. The design system is built on
+ * the stock palette so the Figma library (Tailwind v4 + shadcn, style Nova) and the
+ * code cannot drift apart: there is no value here to keep in sync, because nothing
+ * here redefines a colour. The exact shadcn neutral semantic theme lives in
+ * tokens.css.
+ *
+ * The legacy Exsto palette this file used to carry was dropped when the design team
+ * moved to Tailwind defaults. It is in git history if a legacy surface ever needs it.
+ */
+
+@theme {
+  /* Inter is the typeface for the whole system. */
+  --font-sans: 'Inter', sans-serif;
+
+  /*
+   * The one step Tailwind's type scale does not have: a 10/14 footnote, used by
+   * badges, chips and dense table headers. Everything else is stock.
+   */
+  --text-2xs: 10px;
+  --text-2xs--line-height: 14px;
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark,
+  .dark {
+    color-scheme: dark;
+  }
+}
+
+/* Current shadcn Base Nova neutral theme. Product branding belongs in a separate layer. */
+/* Base Nova deliberately uses the same black/10 backdrop in both modes; component-level backdrop blur supplies the remaining separation. */
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --overlay: oklch(0 0 0 / 10%);
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --destructive: oklch(0.505 0.213 27.518);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --success: oklch(0.448 0.119 151.328);
+  --success-foreground: oklch(0.979 0.021 166.113);
+  --success-ring: oklch(0.905 0.093 164.15);
+
+  --warning: oklch(0.473 0.137 46.201);
+  --warning-foreground: oklch(0.987 0.022 95.277);
+  --warning-ring: oklch(0.924 0.12 95.746);
+
+  --info: oklch(0.5 0.134 242.749);
+  --info-foreground: oklch(0.977 0.013 236.62);
+  --info-ring: oklch(0.901 0.058 230.902);
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --overlay: oklch(0 0 0 / 10%);
+
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --success: oklch(0.792 0.209 151.711);
+  --success-foreground: oklch(0.262 0.051 172.552);
+  --success-ring: oklch(0.432 0.095 166.913);
+
+  --warning: oklch(0.879 0.169 91.605);
+  --warning-foreground: oklch(0.279 0.077 45.635);
+  --warning-ring: oklch(0.473 0.137 46.201);
+
+  --info: oklch(0.828 0.111 230.318);
+  --info-foreground: oklch(0.293 0.066 243.157);
+  --info-ring: oklch(0.443 0.11 240.79);
+
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-overlay: var(--overlay);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-ring: var(--success-ring);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-ring: var(--warning-ring);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-ring: var(--info-ring);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* Indeterminate progress: a one-third-width bar sweeping the track.
+   Percentages are relative to the indicator's own width (w-1/3 of the track),
+   so -100% starts fully off the left edge and 300% exits the right edge. */
+@keyframes progress-indeterminate {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 300% 0;
+  }
+}

package/dist/theme.css.d.ts

@@ -0,0 +1,2 @@
+// Side-effect stylesheet; importing it has no type surface.
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.1",
+  "version": "0.0.1-rc.3",
   "description": "The eDynamix design system: React components, design tokens, and optional web components.",
   "license": "Apache-2.0",
   "keywords": [
@@ -36,6 +36,10 @@
       "types": "./dist/styles.css.d.ts",
       "default": "./dist/styles.css"
     },
+    "./theme.css": {
+      "types": "./dist/theme.css.d.ts",
+      "default": "./dist/theme.css"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {