@dxos/ui-theme 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/{styles/layers → css/layout}/size.css

@@ -1,404 +1,435 @@
 /**
- * @layer dx-components
+ * Sizes
  */
 
-/** 
- * Container query root.
- */
-.size-container {
-  container-type: size;
-}
-
-.container-max-width {
-  @apply is-full max-is-container-max-width mli-auto;
-}
-
-.card-default-width {
-  @apply is-card-default-width;
-}
-
-.card-min-width {
-  @apply min-is-card-min-width;
-}
-
-.card-max-width {
-  @apply is-full max-is-card-max-width;
-}
-
-.popover-max-width {
-  @apply is-max max-is-popover-max-width;
-}
-
-.popover-card-width {
-  inline-size: min(var(--radix-popper-available-width), calc(var(--dx-popover-max-width) - 2 * var(--dx-hairLine)));
-}
-
-.popover-card-height {
-  block-size: min(var(--radix-popper-available-height), 100dvh);
-}
-
-.popover-square {
-  inline-size: min(min(var(--radix-popper-available-width), var(--dx-popover-max-width)),
-      min(var(--radix-popper-available-height), 100dvh));
-  block-size: min(min(var(--radix-popper-available-width), var(--dx-popover-max-width)),
-      min(var(--radix-popper-available-height), 100dvh));
-}
-
-.popover-card-max-width {
-  max-inline-size: min(var(--radix-popper-available-width), var(--dx-popover-max-width));
+@layer dx-components {
+  /** 
+   * Registers the element as a size query container. 
+   * Children can use @container queries to apply styles based on the container's dimensions (both width and height).
+   */
+  .dx-size-container {
+    container-type: size;
+  }
+
+  /**
+   * Layout rules for flex-based scroll containment:
+   * `flex flex-col`
+   *   On a container: makes it a flex column so children stack and can use `flex-1`.
+   * `flex-1`
+   *   On a child: grows to fill the flex parent. Requires the parent to be `flex`.
+   * `min-h-0` (alongside `flex-1`):
+   *   Overrides default flex children: `min-height:auto` (sized to content), which prevents shrinking.
+   *   Allows element to shrink and trigger overflow/scrolling.
+   *   Always pair with `flex-1` when scroll is needed.
+   * `h-full`:
+   *   Fills 100% of the parent's *computed* height.
+   *   Use when the parent has a definite height but is not a flex container (e.g. `overflow:hidden` wrapper).
+   *   Unlike `flex-1`, does not require the parent to be flex.
+   *
+   * Pattern for a scrollable region inside a flex ancestor:
+   *   ancestor         → `flex flex-col`             (or `flex flex-row`)
+   *   scroll root      → `flex-1 min-h-0`            (fills ancestor, can shrink)
+   *   scroll viewport  → `h-full overflow-y-scroll`  (fills root, scrolls)
+   */
+
+  /**
+   * Container that fills the available space.
+   */
+  .dx-container {
+    @apply flex-1 min-h-0 min-w-0 h-full w-full;
+  }
+
+  /**
+   * Article width.
+   */
+  .dx-article {
+    @apply mx-auto w-full max-w-article-max-width;
+  }
+
+  /**
+   * Card
+   */
+
+  .dx-card-square {
+    inline-size: min(
+      min(var(--radix-popper-available-width), var(--spacing-card-max-width)),
+      min(var(--radix-popper-available-height), 100dvh)
+    );
+    block-size: min(
+      min(var(--radix-popper-available-width), var(--spacing-card-max-width)),
+      min(var(--radix-popper-available-height), 100dvh)
+    );
+  }
+
+  .dx-card-default-width {
+    @apply w-card-default-width;
+  }
+
+  .dx-card-min-width {
+    @apply min-w-card-min-width;
+  }
+
+  .dx-card-max-width {
+    @apply w-full max-w-card-max-width;
+  }
+
+  .dx-card-popover {
+    @apply inline-card-max-width bg-card-surface;
+    max-width: min(var(--radix-popper-available-width), var(--spacing-card-max-width));
+    max-height: min(var(--radix-popper-available-height), var(--spacing-card-max-height));
+  }
 }
 
 @layer dx-components {
-
   /* Block size */
   [data-size='0'],
   [data-block-size='0'] {
-    @apply bs-0;
+    @apply h-0;
   }
 
   [data-size='px'],
   [data-block-size='px'] {
-    @apply bs-px;
+    @apply h-px;
   }
 
   [data-size='0.5'],
   [data-block-size='0.5'] {
-    @apply bs-0.5;
+    @apply h-0.5;
   }
 
   [data-size='1'],
   [data-block-size='1'] {
-    @apply bs-1;
+    @apply h-1;
   }
 
   [data-size='1.5'],
   [data-block-size='1.5'] {
-    @apply bs-1.5;
+    @apply h-1.5;
   }
 
   [data-size='2'],
   [data-block-size='2'] {
-    @apply bs-2;
+    @apply h-2;
   }
 
   [data-size='2.5'],
   [data-block-size='2.5'] {
-    @apply bs-2.5;
+    @apply h-2.5;
   }
 
   [data-size='3'],
   [data-block-size='3'] {
-    @apply bs-3;
+    @apply h-3;
   }
 
   [data-size='3.5'],
   [data-block-size='3.5'] {
-    @apply bs-3.5;
+    @apply h-3.5;
   }
 
   [data-size='4'],
   [data-block-size='4'] {
-    @apply bs-4;
+    @apply h-4;
   }
 
   [data-size='5'],
   [data-block-size='5'] {
-    @apply bs-5;
+    @apply h-5;
   }
 
   [data-size='6'],
   [data-block-size='6'] {
-    @apply bs-6;
+    @apply h-6;
   }
 
   [data-size='7'],
   [data-block-size='7'] {
-    @apply bs-7;
+    @apply h-7;
   }
 
   [data-size='8'],
   [data-block-size='8'] {
-    @apply bs-8;
+    @apply h-8;
   }
 
   [data-size='9'],
   [data-block-size='9'] {
-    @apply bs-9;
+    @apply h-9;
   }
 
   [data-size='10'],
   [data-block-size='10'] {
-    @apply bs-10;
+    @apply h-10;
   }
 
   [data-size='11'],
   [data-block-size='11'] {
-    @apply bs-11;
+    @apply h-11;
   }
 
   [data-size='12'],
   [data-block-size='12'] {
-    @apply bs-12;
+    @apply h-12;
   }
 
   [data-size='14'],
   [data-block-size='14'] {
-    @apply bs-14;
+    @apply h-14;
   }
 
   [data-size='16'],
   [data-block-size='16'] {
-    @apply bs-16;
+    @apply h-16;
   }
 
   [data-size='20'],
   [data-block-size='20'] {
-    @apply bs-20;
+    @apply h-20;
   }
 
   [data-size='24'],
   [data-block-size='24'] {
-    @apply bs-24;
+    @apply h-24;
   }
 
   [data-size='28'],
   [data-block-size='28'] {
-    @apply bs-28;
+    @apply h-28;
   }
 
   [data-size='32'],
   [data-block-size='32'] {
-    @apply bs-32;
+    @apply h-32;
   }
 
   [data-size='36'],
   [data-block-size='36'] {
-    @apply bs-36;
+    @apply h-36;
   }
 
   [data-size='40'],
   [data-block-size='40'] {
-    @apply bs-40;
+    @apply h-40;
   }
 
   [data-size='44'],
   [data-block-size='44'] {
-    @apply bs-44;
+    @apply h-44;
   }
 
   [data-size='48'],
   [data-block-size='48'] {
-    @apply bs-48;
+    @apply h-48;
   }
 
   [data-size='52'],
   [data-block-size='52'] {
-    @apply bs-52;
+    @apply h-52;
   }
 
   [data-size='56'],
   [data-block-size='56'] {
-    @apply bs-56;
+    @apply h-56;
   }
 
   [data-size='60'],
   [data-block-size='60'] {
-    @apply bs-60;
+    @apply h-60;
   }
 
   [data-size='64'],
   [data-block-size='64'] {
-    @apply bs-64;
+    @apply h-64;
   }
 
   [data-size='72'],
   [data-block-size='72'] {
-    @apply bs-72;
+    @apply h-72;
   }
 
   [data-size='80'],
   [data-block-size='80'] {
-    @apply bs-80;
+    @apply h-80;
   }
 
   [data-size='96'],
   [data-block-size='96'] {
-    @apply bs-96;
+    @apply h-96;
   }
 
   /* Inline size */
   [data-size='0'],
   [data-inline-size='0'] {
-    @apply is-0;
+    @apply w-0;
   }
 
   [data-size='px'],
   [data-inline-size='px'] {
-    @apply is-px;
+    @apply w-px;
   }
 
   [data-size='0.5'],
   [data-inline-size='0.5'] {
-    @apply is-0.5;
+    @apply w-0.5;
   }
 
   [data-size='1'],
   [data-inline-size='1'] {
-    @apply is-1;
+    @apply w-1;
   }
 
   [data-size='1.5'],
   [data-inline-size='1.5'] {
-    @apply is-1.5;
+    @apply w-1.5;
   }
 
   [data-size='2'],
   [data-inline-size='2'] {
-    @apply is-2;
+    @apply w-2;
   }
 
   [data-size='2.5'],
   [data-inline-size='2.5'] {
-    @apply is-2.5;
+    @apply w-2.5;
   }
 
   [data-size='3'],
   [data-inline-size='3'] {
-    @apply is-3;
+    @apply w-3;
   }
 
   [data-size='3.5'],
   [data-inline-size='3.5'] {
-    @apply is-3.5;
+    @apply w-3.5;
   }
 
   [data-size='4'],
   [data-inline-size='4'] {
-    @apply is-4;
+    @apply w-4;
   }
 
   [data-size='5'],
   [data-inline-size='5'] {
-    @apply is-5;
+    @apply w-5;
   }
 
   [data-size='6'],
   [data-inline-size='6'] {
-    @apply is-6;
+    @apply w-6;
   }
 
   [data-size='7'],
   [data-inline-size='7'] {
-    @apply is-7;
+    @apply w-7;
   }
 
   [data-size='8'],
   [data-inline-size='8'] {
-    @apply is-8;
+    @apply w-8;
   }
 
   [data-size='9'],
   [data-inline-size='9'] {
-    @apply is-9;
+    @apply w-9;
   }
 
   [data-size='10'],
   [data-inline-size='10'] {
-    @apply is-10;
+    @apply w-10;
   }
 
   [data-size='11'],
   [data-inline-size='11'] {
-    @apply is-11;
+    @apply w-11;
   }
 
   [data-size='12'],
   [data-inline-size='12'] {
-    @apply is-12;
+    @apply w-12;
   }
 
   [data-size='14'],
   [data-inline-size='14'] {
-    @apply is-14;
+    @apply w-14;
   }
 
   [data-size='16'],
   [data-inline-size='16'] {
-    @apply is-16;
+    @apply w-16;
   }
 
   [data-size='20'],
   [data-inline-size='20'] {
-    @apply is-20;
+    @apply w-20;
   }
 
   [data-size='24'],
   [data-inline-size='24'] {
-    @apply is-24;
+    @apply w-24;
   }
 
   [data-size='28'],
   [data-inline-size='28'] {
-    @apply is-28;
+    @apply w-28;
   }
 
   [data-size='32'],
   [data-inline-size='32'] {
-    @apply is-32;
+    @apply w-32;
   }
 
   [data-size='36'],
   [data-inline-size='36'] {
-    @apply is-36;
+    @apply w-36;
   }
 
   [data-size='40'],
   [data-inline-size='40'] {
-    @apply is-40;
+    @apply w-40;
   }
 
   [data-size='44'],
   [data-inline-size='44'] {
-    @apply is-44;
+    @apply w-44;
   }
 
   [data-size='48'],
   [data-inline-size='48'] {
-    @apply is-48;
+    @apply w-48;
   }
 
   [data-size='52'],
   [data-inline-size='52'] {
-    @apply is-52;
+    @apply w-52;
   }
 
   [data-size='56'],
   [data-inline-size='56'] {
-    @apply is-56;
+    @apply w-56;
   }
 
   [data-size='60'],
   [data-inline-size='60'] {
-    @apply is-60;
+    @apply w-60;
   }
 
   [data-size='64'],
   [data-inline-size='64'] {
-    @apply is-64;
+    @apply w-64;
   }
 
   [data-size='72'],
   [data-inline-size='72'] {
-    @apply is-72;
+    @apply w-72;
   }
 
   [data-size='80'],
   [data-inline-size='80'] {
-    @apply is-80;
+    @apply w-80;
   }
 
   [data-size='96'],
   [data-inline-size='96'] {
-    @apply is-96;
+    @apply w-96;
   }
-}
+}