@adea-ai/ui 0.94.0 → 0.95.0

package/src/styles/base.css

@@ -250,6 +250,18 @@
   }
 }
 
+/**
+ * Opt into the stable 2xl control rung only when a coarse pointer is available.
+ * `any-pointer` intentionally includes hybrid devices without changing the
+ * glyph or desktop density of the selected Button size.
+ */
+@utility touch-target-comfortable {
+  @media (any-pointer: coarse) {
+    min-inline-size: var(--control-height-2xl);
+    min-block-size: var(--control-height-2xl);
+  }
+}
+
 /**
  * The drag region of a frameless desktop window.
  *
@@ -422,9 +434,9 @@
   }
 }
 
-/* The glass treatment used by the top bar, the rail, and floating overlays.
-   `--glass-*` are private: a consumer chooses *whether* to be glassy through
-   the component prop, not by reaching for these. */
+/* Glass treatments used by the top bar, rail, scene-control groups and floating
+   overlays. Consumers use the owning component; shared composites use the
+   named utility instead of restyling a primitive. */
 @utility glass-panel {
   background: color-mix(in oklch, var(--chrome) calc(var(--chrome-alpha) * 100%), transparent);
   backdrop-filter: blur(18px) saturate(1.6);
@@ -438,6 +450,12 @@
   -webkit-backdrop-filter: blur(12px) saturate(1.4);
 }
 
+@utility glass-scrim {
+  background: color-mix(in oklch, var(--scrim) 20%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
 /* The focus ring. Applied by components that cannot use the global outline
    because they need the ring to follow their own radius. */
 @utility focus-ring {
@@ -657,7 +675,8 @@
 
 @media (prefers-reduced-transparency: reduce) {
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     background: var(--background) !important;
@@ -670,18 +689,19 @@
   }
 
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     background: var(--background) !important;
     border: 1px solid var(--foreground) !important;
   }
 }
 
-/* An engine without backdrop-filter would render the glass tint alone, which
-   is 3-8% alpha — effectively a transparent panel. Fall back to a solid
-   surface instead, keeping borders and shadows so panels stay delimited. */
+/* Without backdrop-filter there is no blurred context behind a glass surface.
+   Fall back to a solid surface so glass panels and scrim groups stay legible. */
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     background: var(--background) !important;
   }
 }

package/src/styles/theme.css

@@ -582,6 +582,7 @@
   --control-height-md: 2rem; /* 32px — form default */
   --control-height-lg: 2.25rem; /* 36px */
   --control-height-xl: 2.5rem; /* 40px */
+  --control-height-2xl: 3rem; /* 48px — stable touch target */
 
   --control-padding-2xs: 0.375rem;
   --control-padding-xs: 0.5rem;
@@ -589,6 +590,7 @@
   --control-padding-md: 0.75rem;
   --control-padding-lg: 0.875rem;
   --control-padding-xl: 1rem;
+  --control-padding-2xl: 1.125rem;
 
   --row-height-sm: 1.75rem;
   --row-height-md: 2rem;
@@ -646,14 +648,15 @@
   --z-toast: 180;
 }
 
-/* Compact density: the whole control ladder one rung tighter.
+/* Compact density: the standard control ladder one rung tighter.
  *
  * It is a *shift* rather than a second set of numbers chosen by eye, so the
  * relationship between the rungs is identical at either density and a control keeps
  * its place in the ladder. Height moves by 4px per rung and padding by 2px, which is
  * the step each already uses, and the row heights move by the same 4px. A `sm`
  * control goes from 28px to 24px — the `xs` control's comfortable height. That is the
- * intended meaning, not an oversight.
+ * intended meaning, not an oversight. The `2xl` touch target is intentionally
+ * omitted here so it stays at least 48px at either density.
  *
  * 16px at `2xs` is the floor. One rung below it would be 12px, under the minimum
  * comfortable touch target, so the ladder compresses from the bottom rather than
@@ -833,6 +836,7 @@
   --height-control-md: var(--control-height-md);
   --height-control-lg: var(--control-height-lg);
   --height-control-xl: var(--control-height-xl);
+  --height-control-2xl: var(--control-height-2xl);
   /* Tailwind `size-*` prefers --size-* and then --spacing-*. Without this
      bridge, square icon controls use the padding ladder below for both axes.
      Height, square size and inline padding remain distinct semantic contracts. */
@@ -842,6 +846,7 @@
   --size-control-md: var(--control-height-md);
   --size-control-lg: var(--control-height-lg);
   --size-control-xl: var(--control-height-xl);
+  --size-control-2xl: var(--control-height-2xl);
   --height-row-sm: var(--row-height-sm);
   --height-row-md: var(--row-height-md);
   --height-row-lg: var(--row-height-lg);
@@ -855,6 +860,7 @@
   --spacing-control-md: var(--control-padding-md);
   --spacing-control-lg: var(--control-padding-lg);
   --spacing-control-xl: var(--control-padding-xl);
+  --spacing-control-2xl: var(--control-padding-2xl);
 
   --width-rail: var(--rail-width);
   --width-rail-expanded: var(--rail-width-expanded);