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

package/dist/styles.css

@@ -2806,6 +2806,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;
   }

package/dist/theme.css

@@ -0,0 +1,198 @@
+/*
+ * @exsto/ds design tokens and their Tailwind mapping, uncompiled.
+ *
+ * Import this from your own Tailwind entry when you want to use the design
+ * system vocabulary (bg-card, text-muted-foreground, rounded-lg, ...) in your
+ * OWN markup. `@exsto/ds/styles.css` styles the components; this file gives
+ * your Tailwind build the tokens behind them.
+ *
+ *   @import "tailwindcss";
+ *   @import "@exsto/ds/theme.css";
+ *   @import "@exsto/ds/styles.css";
+ */
+
+@custom-variant dark (&:is(.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.2",
   "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": {