@moldable-ai/ui 0.2.20 → 0.2.21

package/src/styles/index.css

@@ -823,6 +823,42 @@
   --material-blur-toolbar: 16px;
   --material-blur-overlay: 20px;
   --material-saturation: 1.12;
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--background) 76%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 94%,
+    var(--foreground) 6%
+  );
+  --material-regular-border: color-mix(
+    in oklch,
+    var(--foreground) 10%,
+    transparent
+  );
+  --material-regular-highlight: oklch(1 0 0 / 42%);
+  --material-regular-blur: 20px;
+  --material-regular-saturation: 1.18;
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--background) 24%,
+    transparent
+  );
+  --material-clear-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-clear-border: color-mix(
+    in oklch,
+    var(--foreground) 14%,
+    transparent
+  );
+  --material-clear-highlight: oklch(1 0 0 / 28%);
+  --material-clear-blur: 12px;
+  --material-clear-saturation: 1.24;
   --material-shadow-panel:
     0 1px 2px oklch(0.15 0.005 285 / 6%), 0 4px 12px oklch(0.15 0.005 285 / 4%);
   --material-shadow-overlay:
@@ -943,6 +979,30 @@
   --status-stopped: oklch(0.705 0.015 286.067);
   --status-pending: oklch(0.8 0.12 75);
   --status-error: oklch(0.704 0.191 22.216);
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--background) 68%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-regular-border: oklch(1 0 0 / 14%);
+  --material-regular-highlight: oklch(1 0 0 / 12%);
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--background) 20%,
+    transparent
+  );
+  --material-clear-fallback: color-mix(
+    in oklch,
+    var(--background) 78%,
+    var(--foreground) 22%
+  );
+  --material-clear-border: oklch(1 0 0 / 18%);
+  --material-clear-highlight: oklch(1 0 0 / 10%);
   --material-shadow-panel:
     0 1px 2px oklch(0 0 0 / 24%), 0 6px 16px oklch(0 0 0 / 16%);
   --material-shadow-overlay:
@@ -976,10 +1036,52 @@
     --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
     --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
     --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+    --material-regular-fill: color-mix(
+      in oklch,
+      var(--material-regular-fallback) 92%,
+      transparent
+    );
+    --material-regular-border: var(--separator-strong);
+    --material-clear-fill: color-mix(
+      in oklch,
+      var(--material-clear-fallback) 84%,
+      transparent
+    );
+    --material-clear-border: var(--separator-strong);
     --window-border: var(--separator-strong);
   }
 }
 
+:where([data-contrast='increased']) {
+  --text-tertiary: color-mix(
+    in oklch,
+    var(--muted-foreground) 92%,
+    var(--foreground)
+  );
+  --text-disabled: color-mix(
+    in oklch,
+    var(--muted-foreground) 72%,
+    transparent
+  );
+  --separator: color-mix(in oklch, var(--foreground) 32%, transparent);
+  --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
+  --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
+  --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--material-regular-fallback) 92%,
+    transparent
+  );
+  --material-regular-border: var(--separator-strong);
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--material-clear-fallback) 84%,
+    transparent
+  );
+  --material-clear-border: var(--separator-strong);
+  --window-border: var(--separator-strong);
+}
+
 @media (forced-colors: active) {
   :root {
     --text-primary: CanvasText;
@@ -1002,6 +1104,18 @@
     --control-disabled: transparent;
     --control-focus: Highlight;
     --control-invalid: Mark;
+    --material-regular-fill: Canvas;
+    --material-regular-fallback: Canvas;
+    --material-regular-border: ButtonBorder;
+    --material-regular-highlight: transparent;
+    --material-regular-blur: 0px;
+    --material-regular-saturation: 1;
+    --material-clear-fill: Canvas;
+    --material-clear-fallback: Canvas;
+    --material-clear-border: ButtonBorder;
+    --material-clear-highlight: transparent;
+    --material-clear-blur: 0px;
+    --material-clear-saturation: 1;
     --material-blur-toolbar: 0px;
     --material-blur-overlay: 0px;
     --material-saturation: 1;
@@ -1014,6 +1128,12 @@
 :where([data-transparency='reduced']) {
   --surface-toolbar: var(--background);
   --surface-overlay: var(--popover);
+  --material-regular-fill: var(--material-regular-fallback);
+  --material-regular-blur: 0px;
+  --material-regular-saturation: 1;
+  --material-clear-fill: var(--material-clear-fallback);
+  --material-clear-blur: 0px;
+  --material-clear-saturation: 1;
   --material-blur-toolbar: 0px;
   --material-blur-overlay: 0px;
   --material-saturation: 1;
@@ -1023,6 +1143,12 @@
   :root {
     --surface-toolbar: var(--background);
     --surface-overlay: var(--popover);
+    --material-regular-fill: var(--material-regular-fallback);
+    --material-regular-blur: 0px;
+    --material-regular-saturation: 1;
+    --material-clear-fill: var(--material-clear-fallback);
+    --material-clear-blur: 0px;
+    --material-clear-saturation: 1;
     --material-blur-toolbar: 0px;
     --material-blur-overlay: 0px;
     --material-saturation: 1;
@@ -1042,6 +1168,84 @@
   }
 }
 
+@layer components {
+  /*
+   * Adaptive material is reserved for navigation and control chrome. The
+   * opaque background is the baseline; capable renderers opt into backdrop
+   * sampling below.
+   */
+  .moldable-material {
+    --material-active-fill: var(--material-regular-fill);
+    --material-active-fallback: var(--material-regular-fallback);
+    --material-active-border: var(--material-regular-border);
+    --material-active-highlight: var(--material-regular-highlight);
+    --material-active-blur: var(--material-regular-blur);
+    --material-active-saturation: var(--material-regular-saturation);
+    --material-active-shadow: none;
+
+    position: relative;
+    isolation: isolate;
+    background-color: var(--material-active-fallback);
+    border-color: var(--material-active-border);
+    box-shadow:
+      inset 0 1px 0 var(--material-active-highlight),
+      var(--material-active-shadow);
+  }
+
+  .moldable-material[data-material='clear'] {
+    --material-active-fill: var(--material-clear-fill);
+    --material-active-fallback: var(--material-clear-fallback);
+    --material-active-border: var(--material-clear-border);
+    --material-active-highlight: var(--material-clear-highlight);
+    --material-active-blur: var(--material-clear-blur);
+    --material-active-saturation: var(--material-clear-saturation);
+  }
+
+  .moldable-material[data-material-elevation='panel'] {
+    --material-active-shadow: var(--material-shadow-panel);
+  }
+
+  .moldable-material[data-material-elevation='overlay'] {
+    --material-active-shadow: var(--material-shadow-overlay);
+  }
+
+  .moldable-material[data-material-interactive='true'] {
+    transition:
+      transform var(--motion-duration-fast) var(--motion-ease-standard),
+      background-color var(--motion-duration-fast) var(--motion-ease-standard),
+      border-color var(--motion-duration-fast) var(--motion-ease-standard);
+  }
+
+  .moldable-material[data-material-interactive='true']:hover {
+    background-color: color-mix(
+      in oklch,
+      var(--material-active-fill),
+      var(--control-hover)
+    );
+  }
+
+  .moldable-material[data-material-interactive='true']:active {
+    background-color: color-mix(
+      in oklch,
+      var(--material-active-fill),
+      var(--control-pressed)
+    );
+    transform: scale(0.98);
+  }
+
+  @supports (
+    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+  ) {
+    .moldable-material {
+      background-color: var(--material-active-fill);
+      -webkit-backdrop-filter: blur(var(--material-active-blur))
+        saturate(var(--material-active-saturation));
+      backdrop-filter: blur(var(--material-active-blur))
+        saturate(var(--material-active-saturation));
+    }
+  }
+}
+
 @layer utilities {
   .scrollbar-hide {
     &::-webkit-scrollbar {
@@ -1075,6 +1279,10 @@
   .model-effort-max-burst {
     display: none;
   }
+
+  .moldable-material[data-material-interactive='true']:active {
+    transform: none;
+  }
 }
 
 :where([data-motion='reduced']) {
@@ -1088,6 +1296,11 @@
   --motion-ease-spring: linear;
 }
 
+:where([data-motion='reduced'])
+  .moldable-material[data-material-interactive='true']:active {
+  transform: none;
+}
+
 /* Shiki dual-theme support: override inline styles in dark mode */
 .dark .shiki,
 .dark .shiki span {