@marigold/theme-rui 5.1.0 → 5.2.0

package/dist/theme.css

@@ -16,7 +16,6 @@
 */
 
 @plugin 'tailwindcss-react-aria-components';
-@plugin 'tailwindcss-animate';
 
 @theme static {
   --font-sans: Inter, system-ui, sans-serif;
@@ -101,13 +100,13 @@
     Currently used for: helptext, icons inside inputs, readonly background inside inputs, variant for text 
   */
   --color-muted: var(--color-stone-100);
-  --color-muted-foreground: var(--color-stone-500);
+  --color-muted-foreground: var(--color-stone-600);
 
   --color-disabled: var(--color-stone-200);
-  --color-disabled-foreground: var(--color-stone-400);
+  --color-disabled-foreground: var(--color-stone-500);
 
   /* used for placeholder color */
-  --color-placeholder: var(--color-stone-500);
+  --color-placeholder: var(--color-stone-600);
   /* used for outline/border as ring*/
   --color-ring: var(--color-stone-400);
 
@@ -144,14 +143,13 @@
 
   /* Border elevation - subtle shadow for input elements and cards */
   --shadow-elevation-border:
-    0px 0.3px 0.3px oklch(0 0 0 / 0.19),
-    0.1px 1.1px 1.2px -3px oklch(0 0 0 / 0.16);
+    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 */
   --shadow-elevation-raised:
-    0px 0.3px 0.3px oklch(0 0 0 / 0.23),
-    0px 1.4px 1.3px -2px oklch(0 0 0 / 0.17),
-    0px 6.7px 6px -4px oklch(0 0 0 / 0.12);
+    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 */
   --shadow-elevation-overlay:
@@ -192,13 +190,11 @@
 
   /* RELATIONAL SPACING */
 
-  --spacing-joined: --spacing(0.25);
-  --spacing-tight: --spacing(1);
+  --spacing-tight: --spacing(1.5);
   --spacing-related: --spacing(2);
-  --spacing-peer: --spacing(4);
-  --spacing-group: --spacing(8);
-  --spacing-section: --spacing(16);
-  --spacing-context: --spacing(32);
+  --spacing-regular: --spacing(6);
+  --spacing-group: --spacing(12);
+  --spacing-section: --spacing(24);
 
   /* INSET SPACING */
 
@@ -245,20 +241,18 @@
   --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
 
-  --fade-in-duration: 0.25s;
-  --fade-out-duration: 0.15s;
+  --fade-in-duration: 0.3s;
+  --fade-out-duration: 0.2s;
 
-  --animate-fade-in: fade-in var(--fade-in-duration) var(--ease-out-cubic);
-  --animate-fade-out: fade-in var(--fade-out-duration) reverse;
+  --animate-fade-in: fade-in var(--fade-in-duration) ease-out;
+  --animate-fade-out: fade-in var(--fade-out-duration) ease-in reverse;
 
   @keyframes fade-in {
     from {
       opacity: 0;
-      filter: blur(6px);
     }
     to {
       opacity: 1;
-      filter: blur(0);
     }
   }
 
@@ -267,13 +261,39 @@
   @keyframes fade-in-up {
     from {
       opacity: 0;
-      transform: translateY(15px);
       filter: blur(6px);
+      transform: translateY(15px);
     }
     to {
       opacity: 1;
-      transform: translateY(0);
       filter: blur(0);
+      transform: translateY(0);
+    }
+  }
+
+  /* ActionBar enter/exit */
+  --animate-slide-in: slide-in 0.25s var(--ease-out-quart) forwards;
+  --animate-slide-out: slide-out 0.2s var(--ease-out-quart) forwards;
+
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(16px);
     }
   }
 
@@ -283,11 +303,12 @@
 
   --animate-slide-in-right: slide-in-right var(--slide-in-duration)
     var(--ease-out-expo);
-  --animate-slide-out-right: slide-in-right var(--slide-out-duration) reverse;
+  --animate-slide-out-right: slide-in-right var(--slide-out-duration) reverse
+    forwards;
 
   @keyframes slide-in-right {
     from {
-      transform: translateX(100%);
+      transform: translateX(calc(100% + var(--slide-offset, 0px)));
     }
 
     to {
@@ -298,11 +319,12 @@
   /* animation slide in left*/
   --animate-slide-in-left: slide-in-left var(--slide-in-duration)
     var(--ease-out-expo);
-  --animate-slide-out-left: slide-in-left var(--slide-out-duration) reverse;
+  --animate-slide-out-left: slide-in-left var(--slide-out-duration) reverse
+    forwards;
 
   @keyframes slide-in-left {
     from {
-      transform: translateX(-100%);
+      transform: translateX(calc(-100% - var(--slide-offset, 0px)));
     }
 
     to {
@@ -313,11 +335,12 @@
   /* animation slide in top*/
   --animate-slide-in-top: slide-in-top var(--slide-in-duration)
     var(--ease-out-expo);
-  --animate-slide-out-top: slide-in-top var(--slide-out-duration) reverse;
+  --animate-slide-out-top: slide-in-top var(--slide-out-duration) reverse
+    forwards;
 
   @keyframes slide-in-top {
     from {
-      transform: translateY(-100%);
+      transform: translateY(calc(-100% - var(--slide-offset, 0px)));
     }
 
     to {
@@ -328,11 +351,12 @@
   /* animation slide in bottom*/
   --animate-slide-in-bottom: slide-in-bottom var(--slide-in-duration)
     var(--ease-out-expo);
-  --animate-slide-out-bottom: slide-in-bottom var(--slide-out-duration) reverse;
+  --animate-slide-out-bottom: slide-in-bottom var(--slide-out-duration) reverse
+    forwards;
 
   @keyframes slide-in-bottom {
     from {
-      transform: translateY(100%);
+      transform: translateY(calc(100% + var(--slide-offset, 0px)));
     }
 
     to {

package/dist/ui.css

@@ -24,12 +24,9 @@
 /*          Surface          */
 /* ========================= */
 
-/*
- * The "ui-surface" utility defines visual surfaces with distinct background colors.
- * Apply elevation levels to them when needed (uses raised as default).
- * 
- * This utility uses background-clip and background-origin with gradient borders.
- * The gradient border transitions from top (lighter) to bottom (darker).
+/* 
+ * Use for interactive UI elements like inputs, selects, and cards. Anything that
+ * sits on the page background and needs a clear visual boundary. 
  */
 @utility ui-surface {
   @apply rounded-surface relative transition-[background,border,box-shadow];
@@ -46,11 +43,41 @@
         var(--ui-border-color, var(--color-surface-border)),
         oklch(from var(--ui-border-color, var(--color-surface-border)) calc(l - 0.1) c h)
       );
+
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
   border: 1px solid transparent;
 }
 
+/* 
+ * Use when the surface must stand out against the page. Toolbars, action bars,
+ * or anything that uses the brand color to signal prominence.
+ */
+@utility ui-surface-contrast {
+  @apply rounded-surface relative transition-[background,border,box-shadow];
+  @apply text-brand-foreground;
+
+  @apply inset-shadow-[0_1px_0_0_var(--ui-highlight-color,oklch(from_var(--color-brand)_calc(l+0.4)_c_h))];
+
+  /* prettier-ignore */
+  background:
+      radial-gradient(ellipse 120% 60% at 50% -25%, var(--ui-highlight-color, oklch(from var(--color-brand) calc(l + 0.4) c h)), transparent 90%),
+      linear-gradient(
+        to bottom,
+        var(--ui-background-color, var(--color-brand)),
+        var(--ui-background-color, var(--color-brand))
+      ),
+      linear-gradient(
+        to bottom,
+        oklch(from var(--ui-border-color, var(--color-brand)) calc(l + 0.2) c h),
+        oklch(from var(--ui-border-color, var(--color-brand)) calc(l + 0.15) c h)
+      );
+
+  background-clip: padding-box, padding-box, border-box;
+  background-origin: padding-box, padding-box, border-box;
+  border: 1px solid transparent;
+}
+
 /* ========================= */
 /*           State           */
 /* ========================= */
@@ -77,7 +104,10 @@
  * Applies a consistent visual style for disabled elements.
  */
 @utility ui-state-disabled {
-  @apply text-disabled-foreground bg-disabled cursor-not-allowed;
+  @apply text-disabled-foreground cursor-not-allowed;
+  background: var(--color-disabled);
+  background-clip: border-box;
+  box-shadow: none;
 }
 
 /*
@@ -86,3 +116,117 @@
 @utility ui-state-readonly {
   --ui-background-color: var(--color-muted);
 }
+
+/*
+ * Applies focus ring, disabled state, and pointer cursor to any interactive element.
+ * Combines: focus-visible:ui-state-focus, outline-none, disabled:ui-state-disabled, cursor-pointer
+ */
+@utility ui-interactive {
+  @apply cursor-pointer outline-none;
+  @apply focus-visible:ui-state-focus;
+  @apply disabled:ui-state-disabled;
+}
+
+/*
+ * Base styles shared by all button-like elements (Button, ToggleButton, Menu.button,
+ * Pagination buttons, IconButton).
+ */
+@utility ui-button-base {
+  @apply inline-flex items-center justify-center;
+  @apply rounded-surface font-medium whitespace-nowrap transition-[color,box-shadow,transform];
+  @apply ui-interactive;
+  @apply border border-transparent;
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+}
+
+/*
+ * Applies press/tap scale feedback (150ms, 97% scale on :active and [data-pressed]).
+ * Used by button-like elements that are not regular Buttons (which have a different
+ * pressed:not-aria-expanded variant).
+ */
+@utility ui-press {
+  transition-duration: 150ms;
+  &:active {
+    scale: 0.97;
+  }
+  &[data-pressed] {
+    scale: 0.97;
+  }
+}
+
+/*
+ * Standard panel header slot — shared by Drawer and Tray.
+ */
+@utility ui-panel-header {
+  @apply border-border border-b px-6 py-4;
+}
+
+/*
+ * Standard panel actions slot — shared by Drawer and Tray.
+ */
+@utility ui-panel-actions {
+  @apply border-border flex flex-row justify-end gap-3 border-t px-6 py-4;
+}
+
+/* ========================= */
+/*       Touch & Scroll      */
+/* ========================= */
+
+/*
+ * Applies a touch-friendly hitbox to elements, ensuring they are easily tappable on touch devices.
+ * This is important for accessibility, as it helps meet WCAG guidelines for minimum touch target size
+ * and improves usability for users with motor impairments.
+ */
+@utility ui-touch-hitbox {
+  position: relative;
+  &:before {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    /* Touch target minimum 24x24px (WCAG 2.1 AA) */
+    /* For WCAG 2.2 compliance, update to 44x44px */
+    /* Uses z-100 to ensure hitbox is above content but below system overlays */
+    min-height: 24px;
+    min-width: 24px;
+    z-index: 100;
+  }
+}
+
+/*
+ * Custom scrollbar styling to match the theme's design.
+ * This utility provides a consistent look for scrollbars across different browsers.
+ */
+@utility ui-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/dist/utils.css

@@ -5,63 +5,6 @@
  * encapsulate common design decisions across the theme.
  */
 
-/*
- * Applies a touch-friendly hitbox to elements, ensuring they are easily tappable on touch devices. 
- * This is important for accessibility, as it helps meet WCAG guidelines for minimum touch target size 
- * and improves usability for users with motor impairments.
- */
-@utility util-touch-hitbox {
-  position: relative;
-  &:before {
-    content: '';
-    position: absolute;
-    display: block;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    /* Touch target minimum 24x24px (WCAG 2.1 AA) */
-    /* For WCAG 2.2 compliance, update to 44x44px */
-    /* Uses z-100 to ensure hitbox is above content but below system overlays */
-    min-height: 24px;
-    min-width: 24px;
-    z-index: 100;
-  }
-}
-
-/*
- * 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);
-  }
-}
-
-/* ==========================================================  */
-
 /* ========================= */
 /*    Surface & Elevation    */
 /* ========================= */

package/dist/variants.css

@@ -3,3 +3,4 @@
 * Meaning they are not disabled, not focused, and not marked as invalid.
 */
 @custom-variant default-state (&:where(:not(:disabled, :focus-visible, :read-only, [aria-invalid="true"], [data-rac][data-invalid="true"], [aria-readonly="true"])));
+@custom-variant in-field (:is(.group\/field) > &);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-rui",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -14,9 +14,15 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.mts",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./appearances": {
+      "types": "./dist/appearances.d.mts",
+      "require": "./dist/appearances.js",
+      "import": "./dist/appearances.mjs"
+    },
     "./*": {
       "require": "./dist/*.js",
       "import": "./dist/*.mjs"
@@ -43,22 +49,23 @@
     "directory": "themes/theme-rui"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.1.18",
+    "@tailwindcss/postcss": "4.2.1",
     "cross-env": "^10.0.0",
-    "cssnano": "7.1.2",
+    "cssnano": "7.1.3",
     "postcss-cli": "11.0.1",
+    "postcss-prefix-selector": "2.1.1",
     "shx": "^0.4.0",
-    "tailwindcss": "4.1.18",
-    "tsdown": "0.16.8",
+    "tailwindcss": "4.2.1",
+    "tsdown": "0.20.3",
+    "typescript": "5.9.3",
     "@marigold/tsconfig": "0.4.2"
   },
   "dependencies": {
-    "tailwindcss-animate": "1.0.7",
     "tailwindcss-react-aria-components": "^2.0.1",
-    "@marigold/components": "17.1.0",
-    "@marigold/system": "17.1.0"
+    "@marigold/components": "17.2.0",
+    "@marigold/system": "17.2.0"
   },
   "scripts": {
-    "build": "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/"
+    "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/"
   }
 }