@hraness/design-kit 0.36.3 → 0.36.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.36.3",
+  "version": "0.36.4",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.36.3"
+      "version": "0.36.4"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/palette-bridge.css

@@ -101,7 +101,7 @@
   .hraness-palette.hraness-palette[data-palette],
   :root[data-palette][data-theme],
   [data-palette][data-theme],
-  :root[data-palette]:not([data-theme]),
+  :root[data-palette][data-palette]:not([data-theme]),
   [data-palette]:not([data-theme]),
   :root.hraness-palette.hraness-palette[data-theme],
   .hraness-palette.hraness-palette[data-theme] {

package/src/palette-system.css

@@ -1,5 +1,5 @@
 /* Generated by scripts/generate-palettes.ts. System-first palette paint without JavaScript. */
-:root[data-palette="catppuccin"]:not([data-theme]),
+:root[data-palette][data-palette="catppuccin"]:not([data-theme]),
 [data-palette="catppuccin"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#eff1f5, #1e1e2e);
@@ -143,7 +143,7 @@
   --hraness-palette-chart4: #f9e2af;
   --hraness-palette-chart5: #cda9f7;
 }
-:root[data-palette="gruvbox"]:not([data-theme]),
+:root[data-palette][data-palette="gruvbox"]:not([data-theme]),
 [data-palette="gruvbox"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#fbf1c7, #282828);
@@ -287,7 +287,7 @@
   --hraness-palette-chart4: #fabd2f;
   --hraness-palette-chart5: #e2aebc;
 }
-:root[data-palette="rose-pine"]:not([data-theme]),
+:root[data-palette][data-palette="rose-pine"]:not([data-theme]),
 [data-palette="rose-pine"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#faf4ed, #191724);
@@ -431,7 +431,7 @@
   --hraness-palette-chart4: #f6c177;
   --hraness-palette-chart5: #c4a7e7;
 }
-:root[data-palette="tokyo-night"]:not([data-theme]),
+:root[data-palette][data-palette="tokyo-night"]:not([data-theme]),
 [data-palette="tokyo-night"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#e1e2e7, #1a1b26);
@@ -575,7 +575,7 @@
   --hraness-palette-chart4: #e0af68;
   --hraness-palette-chart5: #bb9af7;
 }
-:root[data-palette="paper"]:not([data-theme]),
+:root[data-palette][data-palette="paper"]:not([data-theme]),
 [data-palette="paper"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#f8f7f4, #12100f);

package/src/react/design-gallery.tsx

@@ -286,14 +286,14 @@ export function DesignSystemGallery({
       <section className="design-gallery__section" id="paper-theme">
         <h2>Paper theme</h2>
         <p>Import paper-theme.css to share warm neutral colors and compact typography without replacing layouts or saved appearance choices.</p>
-        <div className="design-gallery__paper" data-hraness-theme="paper" data-theme="light">
+        <div className="design-gallery__paper" data-hraness-theme="paper" data-palette="paper" data-theme="light">
           <MarketingSiteHeader brand="Light paper" brandHref="#paper-theme" links={[{ href: "#foundation", label: "Foundation" }]} sticky={false} />
           <TopBar surface="glass" title="Glass application header" data-gallery-glass-top-bar="" />
           <h3>Light paper</h3><p>Headers blur scrolling content and become opaque when reduced transparency is preferred.</p>
           <p><a className="design-gallery__paper-link" href="#foundation">Read about the foundation</a></p>
           <Button variant="primary">Create note</Button>
         </div>
-        <div className="design-gallery__paper" data-hraness-theme="paper" data-theme="dark">
+        <div className="design-gallery__paper" data-hraness-theme="paper" data-palette="paper" data-theme="dark">
           <MarketingSiteHeader brand="Dark paper" brandHref="#paper-theme" links={[{ href: "#foundation", label: "Foundation" }]} sticky={false} />
           <TopBar surface="glass" title="Glass application header" data-gallery-glass-top-bar="" />
           <h3>Dark paper</h3><p>The same header treatment follows an explicit dark preference.</p>