@darthcharles/greda 1.0.0 → 1.2.0

package/dist/themes/comal.css

@@ -0,0 +1,37 @@
+/* Optional Comal theme: override generic base colors only. Greda owns
+   all surface, text, border, and component color assignments. Fonts and shape
+   are separate, optional customizations. */
+:where([data-theme="comal"]) {
+  --base-white: 40 60% 96.078%;
+  --base-black: 37.5 10.256% 15.294%;
+  --base-gray-50: 42.857 100% 98.627%;
+  --base-gray-100: 36.923 37.143% 93.137%;
+  --base-gray-200: 38.824 27.869% 88.039%;
+  --base-gray-300: 33.103 19.205% 70.392%;
+  --base-gray-500: 41.25 7.273% 43.137%;
+  --base-gray-600: 30 15.476% 32.941%;
+  --base-gray-800: 30 16.216% 14.51%;
+  --base-gray-900: 30 17.857% 10.98%;
+  --base-primary: 9.5 55.556% 42.353%;
+  --base-primary-hover: 9.714 56.15% 36.667%;
+  --base-secondary: 25.385 56.522% 90.98%;
+  --base-tertiary: 85.714 29.167% 90.588%;
+  --base-accent: 85.714 29.167% 90.588%;
+  --base-destructive: 6.512 57.848% 43.725%;
+  --font-sans: "DM Sans Variable", "DM Sans", sans-serif;
+  --font-heading: "Fraunces Variable", "Fraunces", serif;
+  --radius: 0.75rem;
+  --radius-sm: 0.375rem;
+  --radius-lg: 1.5rem;
+}
+
+/* Complementary dark palette. Put both attributes on the theme boundary. */
+:where([data-theme="comal"][data-color-scheme="dark"]) {
+  --base-white: 34.286 51.22% 91.961%;
+  --base-primary: 15.625 75% 74.902%;
+  --base-primary-hover: 15.789 77.551% 80.784%;
+  --base-secondary: 22.5 24.49% 19.216%;
+  --base-tertiary: 108 14.286% 20.588%;
+  --base-accent: 108 14.286% 20.588%;
+  --base-destructive: 7.174 79.31% 77.255%;
+}

package/dist/tokens.css

@@ -64,6 +64,41 @@
   --z-toast: 70;
 }
 
+/* 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]) {
@@ -227,6 +262,54 @@
 
 @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%));

package/dist/utils.js

@@ -1,16 +1,22 @@
-import { clsx as e } from "clsx";
-import { extendTailwindMerge as o } from "tailwind-merge";
-const t = o({
+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"] }]
+      "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 s(...r) {
-  return t(e(r));
+function a(...e) {
+  return o(r(e));
 }
 export {
-  s 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 { 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;"}
+{"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,9 +1,16 @@
 {
   "name": "@darthcharles/greda",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Generic React components with a complete, overridable base theme.",
   "type": "module",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DarthCharles/greda.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist",
     "README.md",
@@ -24,7 +31,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"
@@ -46,7 +55,7 @@
     "validate:package": "node scripts/validate-package.mjs",
     "check": "npm run typecheck && npm test && npm run validate:stories && npm run build && npm run validate:package && npm run build-storybook",
     "changeset": "changeset",
-    "version-packages": "changeset version",
+    "version-packages": "changeset version && npm install --package-lock-only --ignore-scripts",
     "release": "npm run check && changeset publish",
     "prepack": "npm run build",
     "test:browser": "playwright test",
@@ -56,6 +65,7 @@
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-label": "^2.1.17",
+    "@radix-ui/react-popover": "^1.3.1",
     "@radix-ui/react-select": "^2.4.1",
     "@radix-ui/react-slot": "^1.0.0",
     "@radix-ui/react-tabs": "^1.0.0",