@marigold/theme-rui 2.3.0 → 3.0.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -175,13 +175,12 @@
     --color-ring: var(--color-stone-400);
     --color-link: var(--color-blue-600);
     --color-input: var(--color-stone-300);
-    --spacing-input: 2.25rem;
-    --spacing-button: 2.25rem;
-    --spacing-button-small: 2rem;
-    --spacing-button-large: 2.5rem;
     --color-border: var(--color-stone-200);
     --color-focus: var(--color-stone-100);
     --color-selected: var(--color-stone-100);
+    --color-scrollbar: var(--color-stone-300);
+    --color-scrollbar-hover: var(--color-stone-950);
+    --color-scrollbar-track: transparent;
     --surface-sunken: var(--color-muted);
     --surface-sunken-shadow: 0 0 #0000;
     --surface-body: var(--color-background);
@@ -192,6 +191,15 @@
     --surface-overlay: var(--color-background);
     --surface-overlay-shadow: var(--shadow-lg);
     --surface-overlay-border: var(--color-input);
+    --spacing-input: 2.25rem;
+    --spacing-button: 2.25rem;
+    --spacing-button-small: 2rem;
+    --spacing-button-large: 2.5rem;
+    --spacing-container: 50rem;
+    --spacing-section: 3.5rem;
+    --spacing-field-Y: 2rem;
+    --spacing-field-X: 1.25rem;
+    --spacing-group: 1rem;
     --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
     --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
     --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -467,9 +475,6 @@
   [data-theme="rui"] .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  [data-theme="rui"] .right-1 {
-    right: calc(var(--spacing) * 1);
-  }
   [data-theme="rui"] .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -500,6 +505,9 @@
   [data-theme="rui"] .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  [data-theme="rui"] .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
   [data-theme="rui"] .left-4 {
     left: calc(var(--spacing) * 4);
   }
@@ -602,6 +610,9 @@
   [data-theme="rui"] .mb-\[10px\] {
     margin-bottom: 10px;
   }
+  [data-theme="rui"] .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   [data-theme="rui"] .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -614,6 +625,28 @@
   [data-theme="rui"] .box-content {
     box-sizing: content-box;
   }
+  [data-theme="rui"] .util-scrollbar {
+    scrollbar-width: auto;
+    scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
+    [data-theme="rui"] &::-webkit-scrollbar {
+      display: block;
+      width: 12px;
+      height: 12px;
+    }
+    [data-theme="rui"] &::-webkit-scrollbar-track {
+      background-color: var(--color-scrollbar-track);
+      border-radius: var(--radius-full);
+    }
+    [data-theme="rui"] &::-webkit-scrollbar-thumb {
+      transition: background-color 0.2s var(--ease-out-quad);
+      background-color: var(--color-scrollbar);
+      border-radius: var(--radius-full);
+      border: 0px solid transparent;
+    }
+    [data-theme="rui"] &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-scrollbar-hover);
+    }
+  }
   [data-theme="rui"] .block {
     display: block;
   }
@@ -662,10 +695,6 @@
   [data-theme="rui"] .aspect-square {
     aspect-ratio: 1 / 1;
   }
-  [data-theme="rui"] .size-2\.5 {
-    width: calc(var(--spacing) * 2.5);
-    height: calc(var(--spacing) * 2.5);
-  }
   [data-theme="rui"] .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -977,12 +1006,18 @@
   [data-theme="rui"] .h-svh {
     height: 100svh;
   }
+  [data-theme="rui"] .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
   [data-theme="rui"] .max-h-\[300px\] {
     max-height: 300px;
   }
   [data-theme="rui"] .max-h-fit\! {
     max-height: fit-content !important;
   }
+  [data-theme="rui"] .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   [data-theme="rui"] .min-h-7 {
     min-height: calc(var(--spacing) * 7);
   }
@@ -1418,9 +1453,15 @@
   [data-theme="rui"] .max-w-96 {
     max-width: calc(var(--spacing) * 96);
   }
+  [data-theme="rui"] .max-w-\[90vw\] {
+    max-width: 90vw;
+  }
   [data-theme="rui"] .max-w-\[var\(--maxWidth\)\] {
     max-width: var(--maxWidth);
   }
+  [data-theme="rui"] .max-w-\[var\(--spacing-container\)\] {
+    max-width: var(--spacing-container);
+  }
   [data-theme="rui"] .max-w-dvh {
     max-width: 100dvh;
   }
@@ -1652,8 +1693,8 @@
   [data-theme="rui"] .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
-  [data-theme="rui"] .grid-cols-\[auto_1fr_auto\] {
-    grid-template-columns: auto 1fr auto;
+  [data-theme="rui"] .grid-cols-\[auto_1fr_auto_auto\] {
+    grid-template-columns: auto 1fr auto auto;
   }
   [data-theme="rui"] .grid-cols-\[min-content_auto_min-content\] {
     grid-template-columns: min-content auto min-content;
@@ -1847,6 +1888,21 @@
   [data-theme="rui"] .gap-\[inherit\] {
     gap: inherit;
   }
+  [data-theme="rui"] .gap-\[var\(--spacing-container\)\] {
+    gap: var(--spacing-container);
+  }
+  [data-theme="rui"] .gap-\[var\(--spacing-field-X\)\] {
+    gap: var(--spacing-field-X);
+  }
+  [data-theme="rui"] .gap-\[var\(--spacing-field-Y\)\] {
+    gap: var(--spacing-field-Y);
+  }
+  [data-theme="rui"] .gap-\[var\(--spacing-group\)\] {
+    gap: var(--spacing-group);
+  }
+  [data-theme="rui"] .gap-\[var\(--spacing-section\)\] {
+    gap: var(--spacing-section);
+  }
   [data-theme="rui"] .space-y-1 {
     [data-theme="rui"] :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1861,6 +1917,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  [data-theme="rui"] .space-y-px {
+    [data-theme="rui"] :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(1px * var(--tw-space-y-reverse));
+      margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   [data-theme="rui"] .gap-x-1 {
     column-gap: calc(var(--spacing) * 1);
   }
@@ -1889,6 +1952,11 @@
   [data-theme="rui"] .justify-self-center {
     justify-self: center;
   }
+  [data-theme="rui"] .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   [data-theme="rui"] .overflow-auto {
     overflow: auto;
   }
@@ -1916,9 +1984,6 @@
   [data-theme="rui"] .rounded-\[40\] {
     border-radius: 40;
   }
-  [data-theme="rui"] .rounded-\[50\%\] {
-    border-radius: 50%;
-  }
   [data-theme="rui"] .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -2101,6 +2166,9 @@
   [data-theme="rui"] .bg-brand {
     background-color: var(--color-stone-950);
   }
+  [data-theme="rui"] .bg-current {
+    background-color: currentcolor;
+  }
   [data-theme="rui"] .bg-destructive {
     background-color: var(--color-red-600);
   }
@@ -2569,6 +2637,21 @@
   [data-theme="rui"] .py-96 {
     padding-block: calc(var(--spacing) * 96);
   }
+  [data-theme="rui"] .py-\[var\(--spacing-container\)\] {
+    padding-block: var(--spacing-container);
+  }
+  [data-theme="rui"] .py-\[var\(--spacing-field-X\)\] {
+    padding-block: var(--spacing-field-X);
+  }
+  [data-theme="rui"] .py-\[var\(--spacing-field-Y\)\] {
+    padding-block: var(--spacing-field-Y);
+  }
+  [data-theme="rui"] .py-\[var\(--spacing-group\)\] {
+    padding-block: var(--spacing-group);
+  }
+  [data-theme="rui"] .py-\[var\(--spacing-section\)\] {
+    padding-block: var(--spacing-section);
+  }
   [data-theme="rui"] .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -2992,9 +3075,6 @@
   [data-theme="rui"] .align-middle {
     vertical-align: middle;
   }
-  [data-theme="rui"] .align-super {
-    vertical-align: super;
-  }
   [data-theme="rui"] .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -3484,6 +3564,9 @@
   [data-theme="rui"] .\[--dialog-width\:768px\] {
     --dialog-width: 768px;
   }
+  [data-theme="rui"] .\[grid-area\:action\] {
+    grid-area: action;
+  }
   [data-theme="rui"] .\[grid-area\:actions\] {
     grid-area: actions;
   }
@@ -3502,12 +3585,12 @@
   [data-theme="rui"] .\[grid-area\:title\] {
     grid-area: title;
   }
+  [data-theme="rui"] .\[grid-template-areas\:\"icon_title_action_close\"\"icon_description_action_close\"\] {
+    grid-template-areas: "icon title action close""icon description action close";
+  }
   [data-theme="rui"] .\[grid-template-areas\:\"icon_title_close\"\"icon_content_content\"\] {
     grid-template-areas: "icon title close""icon content content";
   }
-  [data-theme="rui"] .\[grid-template-areas\:\"icon_title_close\"\"icon_description_description\"\] {
-    grid-template-areas: "icon title close""icon description description";
-  }
   [data-theme="rui"] .\[grid-template-areas\:\"title\"_\"content\"_\"actions\"\] {
     grid-template-areas: "title" "content" "actions";
   }
@@ -4328,6 +4411,14 @@
       }
     }
   }
+  [data-theme="rui"] .focus-visible\:z-1 {
+    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
+      z-index: 1;
+    }
+    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
+      z-index: 1;
+    }
+  }
   [data-theme="rui"] .focus-visible\:util-focus-ring {
     [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
       border-color: var(--color-stone-400);
@@ -4976,6 +5067,11 @@
       width: 100%;
     }
   }
+  [data-theme="rui"] .data-\[react-aria-pressable\=\"true\"\]\:cursor-pointer {
+    [data-theme="rui"] &[data-react-aria-pressable="true"] {
+      cursor: pointer;
+    }
+  }
   [data-theme="rui"] .data-\[selected\=true\]\:border {
     [data-theme="rui"] &[data-selected="true"] {
       border-style: var(--tw-border-style);
@@ -5553,13 +5649,13 @@
       align-items: flex-end;
     }
   }
-  [data-theme="rui"] .\[\&\:has\(\[slot\=description\]\)_button\]\:mb-6 {
-    [data-theme="rui"] &:has([slot=description]) button {
+  [data-theme="rui"] .\[\&\:has\(\[slot\=description\]\)_\>\*\:not\(\:has\(\[slot\=description\]\)\)\]\:mb-6 {
+    [data-theme="rui"] &:has([slot=description]) >*:not(:has([slot=description])) {
       margin-bottom: calc(var(--spacing) * 6);
     }
   }
-  [data-theme="rui"] .\[\&\:has\(\[slot\=errorMessage\]\)\]\:mb-6 {
-    [data-theme="rui"] &:has([slot=errorMessage]) {
+  [data-theme="rui"] .\[\&\:has\(\[slot\=errorMessage\]\)_\>\*\:not\(\:has\(\[slot\=errorMessage\]\)\)\]\:mb-6 {
+    [data-theme="rui"] &:has([slot=errorMessage]) >*:not(:has([slot=errorMessage])) {
       margin-bottom: calc(var(--spacing) * 6);
     }
   }

package/dist/theme.css

@@ -120,14 +120,6 @@
   /* color input used for inputs as border or e.g. in switch as bg track color */
   --color-input: var(--color-stone-300);
 
-  /* TODO: Rename them to "component"? */
-  /* component height for input elements */
-  --spacing-input: 2.25rem;
-  /* component height for button elements */
-  --spacing-button: 2.25rem;
-  --spacing-button-small: 2rem;
-  --spacing-button-large: 2.5rem;
-
   --color-border: var(--color-stone-200);
 
   /* Focus color is used for focusing an element (e.g. segment on Datefield)*/
@@ -136,6 +128,10 @@
   /* Selected color is used when there is an active selection in the component */
   --color-selected: var(--color-stone-100);
 
+  --color-scrollbar: var(--color-stone-300);
+  --color-scrollbar-hover: var(--color-stone-950);
+  --color-scrollbar-track: transparent;
+
   /* ==================== */
   /*        SURFACE       */
   /* ==================== */
@@ -154,9 +150,27 @@
   --surface-overlay-border: var(--color-input);
 
   /* ==================== */
-  /*       ANIMATION      */
+  /*        SPACING       */
   /* ==================== */
 
+  /* TODO: Rename them to "component"? */
+  /* component height for input elements */
+  --spacing-input: 2.25rem;
+  /* component height for button elements */
+  --spacing-button: 2.25rem;
+  --spacing-button-small: 2rem;
+  --spacing-button-large: 2.5rem;
+
+  /* spacing between elements */
+  --spacing-container: 50rem; /* e.g. form container */
+  --spacing-section: 3.5rem; /* e.g. between form sections */
+  --spacing-field-Y: 2rem; /* e.g. between fields vertically */
+  --spacing-field-X: 1.25rem; /* e.g. between fields horizontally */
+  --spacing-group: 1rem; /* e.g. between related fields to group them */
+
+  /* ==================== */
+  /*       ANIMATION      */
+  /* ==================== */
   /* easing functions (https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d)*/
   --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

package/dist/utils.css

@@ -123,3 +123,33 @@
     z-index: 9999;
   }
 }
+
+/*
+ * Custom scrollbar styling to match the theme's design.
+ * This utility provides a consistent look for scrollbars across different browsers.
+ */
+@utility util-scrollbar {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
+
+  &::-webkit-scrollbar {
+    display: block;
+    width: 12px;
+    height: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+    border-radius: var(--radius-full);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    transition: background-color 0.2s var(--ease-out-quad);
+    background-color: var(--color-scrollbar);
+    border-radius: var(--radius-full);
+    border: 0px solid transparent;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-hover);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-rui",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -43,21 +43,21 @@
     "directory": "themes/theme-rui"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.1.12",
+    "@tailwindcss/postcss": "4.1.14",
     "cssnano": "7.1.1",
     "postcss-cli": "11.0.1",
-    "tailwindcss": "4.1.12",
-    "tsup": "8.5.0",
+    "tailwindcss": "4.1.14",
+    "tsdown": "0.15.6",
     "@marigold/tsconfig": "0.4.1"
   },
   "dependencies": {
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-react-aria-components": "^2.0.1",
-    "@marigold/components": "15.3.0",
-    "@marigold/system": "15.3.0",
-    "@marigold/theme-plugins": "1.0.2"
+    "@marigold/system": "15.4.0",
+    "@marigold/theme-plugins": "1.0.2",
+    "@marigold/components": "15.4.0"
   },
   "scripts": {
-    "build": "NODE_ENV=production tsup && postcss -o dist/styles.css src/styles.css && cp src/theme.css src/global.css src/utils.css dist/"
+    "build": "NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && cp src/theme.css src/global.css src/utils.css dist/"
   }
 }