@dxos/ui-theme 0.8.4-main.ef1bc66f44 → 0.8.4-main.fcc0d83b33

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

@@ -1,402 +1,425 @@
 /**
- * @layer dx-components
- * See lengths.ts for dx- sememes.
+ * Sizes
  */
 
-/** 
- * Container query root.
- */
+@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).
+   * Also enables children to use cqi/cqb units (e.g., max-w-[100cqi]).
+   * NOTE: `container-type: size` implies layout/size containment, which breaks CodeMirror's
+   * coordinate measurement (causes blank viewport sections during scroll until a click forces
+   * a re-measure). For editor content where only inline (width-based) queries are needed,
+   * use `.dx-inline-size-container` instead.
+   */
+  .dx-size-container {
+    container-type: size;
+  }
 
-.size-container {
-  container-type: size;
-}
+  /**
+   * Inline-only size query container. Provides cqi units for children without the layout
+   * containment side-effects of `container-type: size`. Use this in CodeMirror content
+   * wrappers where size containment would break viewport measurement.
+   */
+  .dx-inline-size-container {
+    container-type: inline-size;
+  }
 
-.container-max-width {
-  @apply is-full max-is-container-max-width mli-auto;
-}
+  /**
+   * Document width.
+   */
+  .dx-document {
+    @apply mx-auto w-full max-w-document-max-width;
+  }
 
-/**
- * Card
- */
+  /**
+   * Card
+   */
 
-.card-square {
-  inline-size: min(min(var(--radix-popper-available-width), var(--dx-card-max-width)),
-      min(var(--radix-popper-available-height), 100dvh));
-  block-size: min(min(var(--radix-popper-available-width), var(--dx-card-max-width)),
-      min(var(--radix-popper-available-height), 100dvh));
-}
+  .dx-card {
+    @apply flex flex-col w-full;
+  }
 
-.card-default-width {
-  @apply is-card-default-width;
-}
+  .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)
+    );
+  }
 
-.card-min-width {
-  @apply min-is-card-min-width;
-}
+  .dx-card-default-width {
+    @apply w-card-default-width;
+  }
 
-.card-max-width {
-  @apply is-full max-is-card-max-width;
-}
+  .dx-card-min-width {
+    @apply min-w-card-min-width;
+  }
 
-.popover-card-max-width {
-  inline-size: min(var(--radix-popper-available-width), var(--dx-card-max-width));
-}
+  .dx-card-max-width {
+    @apply w-full max-w-card-max-width;
+  }
 
-.popover-card-max-height {
-  block-size: min(var(--radix-popper-available-height), var(--dx-card-max-height));
+  .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;
   }
-}
+}