@darthcharles/greda 0.1.0 → 1.0.0

package/dist/tokens.css

@@ -1,28 +1,22 @@
-/* Colors are space-separated HSL channels. All other tokens use CSS values.
-   Low-specificity defaults let consumer :root rules win in either import order. */
-:where(:root) {
-  color-scheme: light;
-  --background: 0 0% 100%;
-  --foreground: 222 47% 11%;
-  --card: 0 0% 100%;
-  --card-foreground: 222 47% 11%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222 47% 11%;
-  --accent: 220 20% 94%;
-  --accent-foreground: 222 35% 20%;
-  --primary: 220 80% 45%;
-  --primary-foreground: 0 0% 100%;
-  --primary-hover: 220 80% 38%;
-  --secondary: 220 20% 94%;
-  --secondary-foreground: 222 35% 20%;
-  --muted: 220 15% 96%;
-  --muted-foreground: 220 10% 42%;
-  --border: 220 15% 82%;
-  --input: 220 15% 82%;
-  --ring: 220 80% 45%;
-  --destructive: 0 72% 43%;
-  --destructive-foreground: 0 0% 100%;
-  --overlay: 222 47% 11% / 0.4;
+/* Consumers customize only the generic --base-* colors. All color values are
+   space-separated HSL channels. Role assignments are owned by Greda. */
+:where(:root, [data-color-scheme="light"]) {
+  --base-white: 0 0% 100%;
+  --base-black: 222 47% 11%;
+  --base-gray-50: 220 15% 96%;
+  --base-gray-100: 220 20% 94%;
+  --base-gray-200: 220 15% 82%;
+  --base-gray-300: 220 15% 72%;
+  --base-gray-500: 220 10% 42%;
+  --base-gray-600: 220 15% 36%;
+  --base-gray-800: 222 20% 18%;
+  --base-gray-900: 222 30% 9%;
+  --base-primary: 220 80% 45%;
+  --base-primary-hover: 220 80% 38%;
+  --base-secondary: 220 20% 94%;
+  --base-tertiary: 214 100% 96.863%;
+  --base-accent: 220 20% 94%;
+  --base-destructive: 0 72% 43%;
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   --font-heading: var(--font-sans);
@@ -61,9 +55,6 @@
   --dialog-width: 32.5rem;
   --tooltip-width: 20rem;
   --toast-width: 24rem;
-  --shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.08);
-  --shadow: 0 8px 24px hsl(222 47% 11% / 0.12);
-  --shadow-dialog: 0 24px 70px hsl(222 47% 11% / 0.24);
   --focus-width: 2px;
   --focus-offset: 2px;
   --disabled-opacity: 0.5;
@@ -72,31 +63,206 @@
   --z-popover: 60;
   --z-toast: 70;
 }
-:where([data-color-scheme="light"]) {
+
+/* Rebind roles at theme boundaries so scoped base overrides update every role.
+   Low specificity lets consumers supply base colors in either import order. */
+:where(:root, [data-theme], [data-color-scheme]) {
   color-scheme: light;
+  --surface-primary: var(--base-white);
+  --surface-secondary: var(--base-gray-100);
+  --surface-tertiary: var(--base-tertiary);
+  --surface-raised: var(--base-gray-50);
+  --surface-inverse: var(--base-black);
+  --text-primary: var(--base-black);
+  --text-secondary: var(--base-gray-600);
+  --text-muted: var(--base-gray-500);
+  --text-inverse: var(--base-white);
+  --text-action: var(--base-primary);
+  --border-primary: var(--base-gray-200);
+  --border-secondary: var(--base-gray-100);
+  --border-inverse: var(--base-gray-600);
+  --border-action: var(--base-primary);
+
+  /* Existing component tokens derive from the same generic base palette. */
+  --background: var(--surface-primary);
+  --foreground: var(--text-primary);
+  --card: var(--surface-raised);
+  --card-foreground: var(--text-primary);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--text-primary);
+  --accent: var(--base-accent);
+  --accent-foreground: var(--text-primary);
+  --primary: var(--base-primary);
+  --primary-foreground: var(--base-white);
+  --primary-hover: var(--base-primary-hover);
+  --secondary: var(--base-secondary);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--surface-secondary);
+  --muted-foreground: var(--text-muted);
+  --border: var(--border-primary);
+  --input: var(--border-primary);
+  --ring: var(--base-primary);
+  --destructive: var(--base-destructive);
+  --destructive-foreground: var(--base-white);
+  --overlay: var(--base-black) / 0.4;
+  --shadow-sm: 0 1px 2px hsl(var(--base-black) / 0.08);
+  --shadow: 0 8px 24px hsl(var(--base-black) / 0.12);
+  --shadow-dialog: 0 24px 70px hsl(var(--base-black) / 0.24);
 }
+
 /* Opt in independently of the consumer's brand theme. */
 :where([data-color-scheme="dark"]) {
   color-scheme: dark;
-  --background: 222 30% 9%;
-  --foreground: 220 20% 96%;
-  --card: 222 25% 13%;
-  --card-foreground: 220 20% 96%;
-  --popover: 222 25% 13%;
-  --popover-foreground: 220 20% 96%;
-  --accent: 222 20% 22%;
-  --accent-foreground: 220 20% 96%;
-  --primary: 217 90% 70%;
-  --primary-foreground: 222 47% 11%;
-  --primary-hover: 217 90% 78%;
-  --secondary: 222 20% 22%;
-  --secondary-foreground: 220 20% 96%;
-  --muted: 222 20% 18%;
-  --muted-foreground: 220 15% 72%;
-  --border: 220 15% 36%;
-  --input: 220 15% 36%;
-  --ring: 217 90% 70%;
-  --destructive: 0 80% 72%;
-  --destructive-foreground: 222 47% 11%;
-  --overlay: 222 47% 3% / 0.7;
+  --base-primary: 217 90% 70%;
+  --base-primary-hover: 217 90% 78%;
+  --base-secondary: 222 20% 22%;
+  --base-tertiary: 218 40% 18%;
+  --base-accent: 222 20% 22%;
+  --base-destructive: 0 80% 72%;
+  --surface-primary: var(--base-gray-900);
+  --surface-secondary: var(--base-gray-800);
+  --surface-raised: var(--base-gray-800);
+  --surface-inverse: var(--base-white);
+  --text-primary: var(--base-white);
+  --text-secondary: var(--base-gray-300);
+  --text-muted: var(--base-gray-300);
+  --text-inverse: var(--base-black);
+  --border-primary: var(--base-gray-600);
+  --border-secondary: var(--base-gray-800);
+  --border-inverse: var(--base-gray-200);
+  --primary-foreground: var(--base-black);
+  --destructive-foreground: var(--base-black);
+  --overlay: var(--base-black) / 0.7;
+}
+
+
+/* Tailwind 4: import this file from your Tailwind CSS entry point. */
+@layer theme {
+  @theme inline {
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --greda-bg-primary: var(--primary);
+    --greda-text-primary: var(--text-primary);
+    --greda-border-primary: var(--border-primary);
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-primary-hover: hsl(var(--primary-hover));
+    --greda-bg-secondary: var(--secondary);
+    --greda-text-secondary: var(--text-secondary);
+    --greda-border-secondary: var(--border-secondary);
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --greda-bg-muted: var(--muted);
+    --greda-text-muted: var(--text-muted);
+    --greda-border-muted: var(--muted);
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-overlay: hsl(var(--overlay));
+    --greda-surface-primary: var(--surface-primary);
+    --greda-surface-secondary: var(--surface-secondary);
+    --greda-surface-tertiary: var(--surface-tertiary);
+    --greda-surface-raised: var(--surface-raised);
+    --greda-surface-inverse: var(--surface-inverse);
+    --greda-text-inverse: var(--text-inverse);
+    --greda-text-action: var(--text-action);
+    --greda-border-inverse: var(--border-inverse);
+    --greda-border-action: var(--border-action);
+    --spacing: var(--spacing-unit);
+    --spacing-0: var(--space-0);
+    --spacing-0\.5: var(--space-0-5);
+    --spacing-1: var(--space-1);
+    --spacing-1\.5: var(--space-1-5);
+    --spacing-2: var(--space-2);
+    --spacing-2\.5: var(--space-2-5);
+    --spacing-3: var(--space-3);
+    --spacing-3\.5: var(--space-3-5);
+    --spacing-4: var(--space-4);
+    --spacing-5: var(--space-5);
+    --spacing-6: var(--space-6);
+    --spacing-8: var(--space-8);
+    --spacing-9: var(--space-9);
+    --spacing-10: var(--space-10);
+    --spacing-12: var(--space-12);
+    --spacing-16: var(--space-16);
+    --spacing-20: var(--space-20);
+    --spacing-24: var(--space-24);
+    --spacing-32: var(--space-32);
+    --font-sans: var(--font-sans);
+    --font-heading: var(--font-heading);
+    --text-xs: var(--font-size-xs);
+    --text-xs--line-height: var(--line-height);
+    --text-sm: var(--font-size-sm);
+    --text-sm--line-height: var(--line-height);
+    --text-base: var(--font-size-md);
+    --text-base--line-height: var(--line-height);
+    --text-lg: var(--font-size-lg);
+    --text-lg--line-height: var(--line-height);
+    --font-weight-medium: var(--font-weight-medium);
+    --font-weight-semibold: var(--font-weight-bold);
+    --radius-sm: var(--radius-sm);
+    --radius-md: var(--radius);
+    --radius-lg: var(--radius-lg);
+    --radius-xl: var(--radius-lg);
+    --radius-full: var(--radius-full);
+    --shadow: var(--shadow);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow);
+    --shadow-lg: var(--shadow-dialog);
+    --container-lg: var(--dialog-width);
+    --default-transition-duration: var(--duration);
+    --default-border-width: var(--border-width);
+    --ring-width-1: var(--focus-width);
+    --ring-width-2: var(--focus-width);
+    --ring-offset-width-2: var(--focus-offset);
+  }
+}
+
+@custom-variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
+
+@utility bg-* {
+  background-color: hsl(--value(--greda-bg-*));
+  background-color: hsl(--value(--greda-bg-*) / calc(--modifier(integer) * 1%));
+  background-color: hsl(--value(--greda-bg-*) / --modifier([number], [percentage]));
+}
+
+@utility surface-* {
+  background-color: hsl(--value(--greda-surface-*));
+  background-color: hsl(--value(--greda-surface-*) / calc(--modifier(integer) * 1%));
+  background-color: hsl(--value(--greda-surface-*) / --modifier([number], [percentage]));
+}
+
+@utility text-* {
+  color: hsl(--value(--greda-text-*));
+  color: hsl(--value(--greda-text-*) / calc(--modifier(integer) * 1%));
+  color: hsl(--value(--greda-text-*) / --modifier([number], [percentage]));
+}
+
+@utility border-* {
+  border-color: hsl(--value(--greda-border-*));
+  border-color: hsl(--value(--greda-border-*) / calc(--modifier(integer) * 1%));
+  border-color: hsl(--value(--greda-border-*) / --modifier([number], [percentage]));
+}
+
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+
+@utility z-popover {
+  z-index: var(--z-popover);
+}
+
+@utility z-toast {
+  z-index: var(--z-toast);
+}
+
+@utility opacity-disabled {
+  opacity: var(--disabled-opacity);
 }

package/dist/utils.js

@@ -1,10 +1,16 @@
 import { clsx as e } from "clsx";
-import { extendTailwindMerge as n } from "tailwind-merge";
-const o = n({ prefix: "ds-" });
-function m(...r) {
-  return o(e(r));
+import { extendTailwindMerge as o } from "tailwind-merge";
+const t = o({
+  extend: {
+    classGroups: {
+      "bg-color": [{ surface: ["primary", "secondary", "tertiary", "raised", "inverse"] }]
+    }
+  }
+});
+function s(...r) {
+  return t(e(r));
 }
 export {
-  m as cn
+  s as cn
 };
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst merge = extendTailwindMerge({ prefix: \"ds-\" });\n/** Combine conditional classes and resolve conflicting prefixed utilities. */\nexport function cn(...inputs: ClassValue[]) {\n  return merge(clsx(inputs));\n}\n"],"names":["merge","extendTailwindMerge","cn","inputs","clsx"],"mappings":";;AAGA,MAAMA,IAAQC,EAAoB,EAAE,QAAQ,OAAO;AAE5C,SAASC,KAAMC,GAAsB;AAC1C,SAAOH,EAAMI,EAAKD,CAAM,CAAC;AAC3B;"}
+{"version":3,"file":"utils.js","sources":["../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"bg-color\": [{ surface: [\"primary\", \"secondary\", \"tertiary\", \"raised\", \"inverse\"] }],\n    },\n  },\n});\n\n/** Combine conditional classes and resolve conflicting Tailwind utilities. */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"names":["twMerge","extendTailwindMerge","cn","inputs","clsx"],"mappings":";;AAGA,MAAMA,IAAUC,EAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,aAAa,YAAY,UAAU,SAAS,EAAA,CAAG;AAAA,IAAA;AAAA,EACrF;AAEJ,CAAC;AAGM,SAASC,KAAMC,GAAsB;AAC1C,SAAOH,EAAQI,EAAKD,CAAM,CAAC;AAC7B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darthcharles/greda",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Generic React components with a complete, overridable base theme.",
   "type": "module",
   "license": "MIT",
@@ -50,8 +50,7 @@
     "release": "npm run check && changeset publish",
     "prepack": "npm run build",
     "test:browser": "playwright test",
-    "validate:stories": "node scripts/validate-stories.mjs",
-    "docs:tokens": "node scripts/generate-token-reference.mjs"
+    "validate:stories": "node scripts/validate-stories.mjs"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.0",
@@ -91,6 +90,7 @@
     "storybook": "^10.6.3",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-v4": "npm:tailwindcss@^4.3.3",
     "typescript": "^5.9.0",
     "vite": "^7.0.0",
     "vitest": "^3.2.0"