@marigold/theme-rui 5.2.0 → 5.2.2

package/dist/styles.css

@@ -1973,6 +1973,9 @@
   [data-theme="rui"] .grid-cols-\[repeat\(auto-fit\,var\(--column\)\)\] {
     grid-template-columns: repeat(auto-fit,var(--column));
   }
+  [data-theme="rui"] .grid-rows-\[3\.5rem_1fr\] {
+    grid-template-rows: 3.5rem 1fr;
+  }
   [data-theme="rui"] .grid-rows-\[auto_1fr_auto\] {
     grid-template-rows: auto 1fr auto;
   }
@@ -2644,6 +2647,9 @@
   [data-theme="rui"] .fill-none {
     fill: none;
   }
+  [data-theme="rui"] .fill-surface {
+    fill: var(--color-white);
+  }
   [data-theme="rui"] .fill-white {
     fill: var(--color-white);
   }
@@ -3918,18 +3924,10 @@
     --tw-shadow: 0px 0.3px 0.8px var(--tw-shadow-color, oklch(0 0 0 / 0.28)), 0px 1.4px 1.3px -2px var(--tw-shadow-color, oklch(0 0 0 / 0.21)), 0px 6.7px 6px -4px var(--tw-shadow-color, oklch(0 0 0 / 0.15));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  [data-theme="rui"] .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   [data-theme="rui"] .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  [data-theme="rui"] .shadow-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   [data-theme="rui"] .ui-state-focus {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4202,12 +4200,18 @@
   [data-theme="rui"] .\[grid-area\:label\] {
     grid-area: label;
   }
+  [data-theme="rui"] .\[grid-area\:main\] {
+    grid-area: main;
+  }
   [data-theme="rui"] .\[grid-area\:middle\] {
     grid-area: middle;
   }
   [data-theme="rui"] .\[grid-area\:remove\] {
     grid-area: remove;
   }
+  [data-theme="rui"] .\[grid-area\:sidebar\] {
+    grid-area: sidebar;
+  }
   [data-theme="rui"] .\[grid-area\:start\] {
     grid-area: start;
   }
@@ -4232,6 +4236,9 @@
   [data-theme="rui"] .\[grid-template-areas\:\'label_remove\'_\'description_remove\'\] {
     grid-template-areas: 'label remove' 'description remove';
   }
+  [data-theme="rui"] .\[grid-template-areas\:\'sidebar_header\'_\'sidebar_main\'\] {
+    grid-template-areas: 'sidebar header' 'sidebar main';
+  }
   [data-theme="rui"] .\[grid-template-areas\:\'title\'_\'content\'\] {
     grid-template-areas: 'title' 'content';
   }
@@ -5900,9 +5907,9 @@
       color: var(--color-stone-50);
     }
   }
-  [data-theme="rui"] .aria-selected\:shadow-xs {
+  [data-theme="rui"] .aria-selected\:shadow-elevation-border {
     [data-theme="rui"] &[aria-selected="true"] {
-      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+      --tw-shadow: 0px 0.3px 0.3px var(--tw-shadow-color, oklch(0 0 0 / 0.14)), 0px 1px 1.2px -3px var(--tw-shadow-color, oklch(0 0 0 / 0.12));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
@@ -6680,11 +6687,6 @@
       color: var(--color-stone-950);
     }
   }
-  [data-theme="rui"] .selected\:text-white {
-    [data-theme="rui"] &[data-selected] {
-      color: var(--color-white);
-    }
-  }
   [data-theme="rui"] .selected\:shadow-none {
     [data-theme="rui"] &[data-selected] {
       --tw-shadow: 0 0 #0000;
@@ -6899,6 +6901,11 @@
       flex-shrink: 0;
     }
   }
+  [data-theme="rui"] .\[\&_svg\]\:text-muted-foreground {
+    [data-theme="rui"] & svg {
+      color: var(--color-stone-600);
+    }
+  }
   [data-theme="rui"] .\[\&_svg\]\:opacity-60 {
     [data-theme="rui"] & svg {
       opacity: 60%;

package/dist/theme.css

@@ -140,18 +140,24 @@
   /*       ELEVATION      */
   /* ==================== */
   /* Based on https://www.joshwcomeau.com/shadow-palette/ */
+  /*
+    Three-tier shadow hierarchy:
+      - border:  small interactive controls (Input, Checkbox, Radio, Switch, Tag, Button)
+      - raised:  container surfaces (Card, Accordion)
+      - overlay: floating elements (Dialog, Drawer, Menu, Popover, Toast)
+  */
 
-  /* Border elevation - subtle shadow for input elements and cards */
+  /* Border elevation - subtle shadow */
   --shadow-elevation-border:
     0px 0.3px 0.3px oklch(0 0 0 / 0.14), 0px 1px 1.2px -3px oklch(0 0 0 / 0.12);
 
-  /* Raised elevation - moderate shadow for cards, tiles, and containers */
+  /* Raised elevation - moderate shadow  */
   --shadow-elevation-raised:
     0px 0.3px 0.8px oklch(0 0 0 / 0.28),
     0px 1.4px 1.3px -2px oklch(0 0 0 / 0.21),
     0px 6.7px 6px -4px oklch(0 0 0 / 0.15);
 
-  /* Overlay elevation - prominent shadow for modals, dialogs, popovers */
+  /* Overlay elevation - prominent shadow */
   --shadow-elevation-overlay:
     0px 0.1px 0.1px oklch(0 0 0 / 0.32),
     0px 1px 0.9px -1.3px oklch(0 0 0 / 0.26),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-rui",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -62,8 +62,8 @@
   },
   "dependencies": {
     "tailwindcss-react-aria-components": "^2.0.1",
-    "@marigold/components": "17.2.0",
-    "@marigold/system": "17.2.0"
+    "@marigold/system": "17.3.0",
+    "@marigold/components": "17.3.0"
   },
   "scripts": {
     "build": "node ./scripts/build-appearances.mjs && cross-env NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && shx cp src/theme.css src/global.css src/utils.css src/variants.css src/ui.css dist/"