@darthcharles/greda 0.2.0 → 1.1.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,33 +63,111 @@
   --z-popover: 60;
   --z-toast: 70;
 }
-:where([data-color-scheme="light"]) {
+
+/* Complete typography roles. Rebind font and scale aliases at theme boundaries
+   so scoped font overrides resolve locally. Colors and casing stay independent. */
+:where(:root, [data-theme], [data-color-scheme]) {
+  --type-display-family: var(--font-heading);
+  --type-display-size: clamp(2.25rem, 4.8vw, 3.5rem);
+  --type-display-weight: 500;
+  --type-display-leading: 1.1;
+  --type-display-tracking: -0.04em;
+  --type-title-family: var(--font-heading);
+  --type-title-size: clamp(1.75rem, 3vw, 2.25rem);
+  --type-title-weight: 500;
+  --type-title-leading: 1.2;
+  --type-title-tracking: normal;
+  --type-body-family: var(--font-sans);
+  --type-body-size: 1rem;
+  --type-body-weight: 400;
+  --type-body-leading: 1.5;
+  --type-body-tracking: normal;
+  --type-label-family: var(--font-sans);
+  --type-label-size: var(--font-size-sm);
+  --type-label-weight: var(--font-weight-medium);
+  --type-label-leading: var(--line-height);
+  --type-label-tracking: normal;
+  --type-caption-family: var(--font-sans);
+  --type-caption-size: var(--font-size-xs);
+  --type-caption-weight: 400;
+  --type-caption-leading: var(--line-height);
+  --type-caption-tracking: normal;
+  --type-eyebrow-family: var(--font-sans);
+  --type-eyebrow-size: var(--font-size-xs);
+  --type-eyebrow-weight: var(--font-weight-bold);
+  --type-eyebrow-leading: var(--line-height);
+  --type-eyebrow-tracking: 0.1em;
+}
+
+/* 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;
 }
 
 
@@ -113,12 +182,18 @@
     --color-popover-foreground: hsl(var(--popover-foreground));
     --color-accent: hsl(var(--accent));
     --color-accent-foreground: hsl(var(--accent-foreground));
-    --color-primary: hsl(var(--primary));
+    --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));
-    --color-secondary: hsl(var(--secondary));
+    --greda-bg-secondary: var(--secondary);
+    --greda-text-secondary: var(--text-secondary);
+    --greda-border-secondary: var(--border-secondary);
     --color-secondary-foreground: hsl(var(--secondary-foreground));
-    --color-muted: hsl(var(--muted));
+    --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));
@@ -126,6 +201,15 @@
     --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);
@@ -178,6 +262,78 @@
 
 @custom-variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
 
+@utility text-display {
+  font-family: var(--type-display-family);
+  font-size: var(--type-display-size);
+  font-weight: var(--type-display-weight);
+  line-height: var(--type-display-leading);
+  letter-spacing: var(--type-display-tracking);
+}
+
+@utility text-title {
+  font-family: var(--type-title-family);
+  font-size: var(--type-title-size);
+  font-weight: var(--type-title-weight);
+  line-height: var(--type-title-leading);
+  letter-spacing: var(--type-title-tracking);
+}
+
+@utility text-body {
+  font-family: var(--type-body-family);
+  font-size: var(--type-body-size);
+  font-weight: var(--type-body-weight);
+  line-height: var(--type-body-leading);
+  letter-spacing: var(--type-body-tracking);
+}
+
+@utility text-label {
+  font-family: var(--type-label-family);
+  font-size: var(--type-label-size);
+  font-weight: var(--type-label-weight);
+  line-height: var(--type-label-leading);
+  letter-spacing: var(--type-label-tracking);
+}
+
+@utility text-caption {
+  font-family: var(--type-caption-family);
+  font-size: var(--type-caption-size);
+  font-weight: var(--type-caption-weight);
+  line-height: var(--type-caption-leading);
+  letter-spacing: var(--type-caption-tracking);
+}
+
+@utility text-eyebrow {
+  font-family: var(--type-eyebrow-family);
+  font-size: var(--type-eyebrow-size);
+  font-weight: var(--type-eyebrow-weight);
+  line-height: var(--type-eyebrow-leading);
+  letter-spacing: var(--type-eyebrow-tracking);
+}
+
+@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);
 }

package/dist/utils.js

@@ -1,9 +1,22 @@
-import { clsx as o } from "clsx";
-import { twMerge as t } from "tailwind-merge";
-function n(...r) {
-  return t(o(r));
+import { clsx as r } from "clsx";
+import { extendTailwindMerge as t } from "tailwind-merge";
+const o = t({
+  extend: {
+    classGroups: {
+      "bg-color": [{ surface: ["primary", "secondary", "tertiary", "raised", "inverse"] }],
+      typography: [{ text: ["display", "title", "body", "label", "caption", "eyebrow"] }]
+    },
+    // A later complete role replaces earlier typography axes. A later single
+    // axis keeps the role so its other properties still apply.
+    conflictingClassGroups: {
+      typography: ["font-family", "font-size", "font-weight", "leading", "tracking"]
+    }
+  }
+});
+function a(...e) {
+  return o(r(e));
 }
 export {
-  n as cn
+  a 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 { twMerge } from \"tailwind-merge\";\n\n/** Combine conditional classes and resolve conflicting Tailwind utilities. */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;AAIO,SAASA,KAAMC,GAAsB;AAC1C,SAAOC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;"}
+{"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<\"typography\">({\n  extend: {\n    classGroups: {\n      \"bg-color\": [{ surface: [\"primary\", \"secondary\", \"tertiary\", \"raised\", \"inverse\"] }],\n      typography: [{ text: [\"display\", \"title\", \"body\", \"label\", \"caption\", \"eyebrow\"] }],\n    },\n    // A later complete role replaces earlier typography axes. A later single\n    // axis keeps the role so its other properties still apply.\n    conflictingClassGroups: {\n      typography: [\"font-family\", \"font-size\", \"font-weight\", \"leading\", \"tracking\"],\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,EAAkC;AAAA,EAChD,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,aAAa,YAAY,UAAU,SAAS,GAAG;AAAA,MACnF,YAAY,CAAC,EAAE,MAAM,CAAC,WAAW,SAAS,QAAQ,SAAS,WAAW,SAAS,EAAA,CAAG;AAAA,IAAA;AAAA;AAAA;AAAA,IAIpF,wBAAwB;AAAA,MACtB,YAAY,CAAC,eAAe,aAAa,eAAe,WAAW,UAAU;AAAA,IAAA;AAAA,EAC/E;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.2.0",
+  "version": "1.1.0",
   "description": "Generic React components with a complete, overridable base theme.",
   "type": "module",
   "license": "MIT",
@@ -24,7 +24,9 @@
       "import": "./dist/utils.js"
     },
     "./styles.css": "./dist/styles.css",
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./themes/cobalto.css": "./dist/themes/cobalto.css",
+    "./themes/comal.css": "./dist/themes/comal.css"
   },
   "sideEffects": [
     "**/*.css"