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

package/src/css/theme/styles.css

@@ -0,0 +1,145 @@
+/**
+ * Color styles
+ */
+
+@theme {
+  /*
+   * Semantic
+   */
+
+  --color-info-fill: var(--color-cyan-fill);
+  --color-info-surface: var(--color-cyan-surface);
+  --color-info-surface-text: var(--color-cyan-surface-text);
+  --color-info-text: var(--color-cyan-text);
+  --color-info-border: var(--color-cyan-border);
+
+  --color-success-fill: var(--color-emerald-fill);
+  --color-success-surface: var(--color-emerald-surface);
+  --color-success-surface-text: var(--color-emerald-surface-text);
+  --color-success-text: var(--color-emerald-text);
+  --color-success-border: var(--color-emerald-border);
+
+  --color-warning-fill: var(--color-amber-fill);
+  --color-warning-surface: var(--color-amber-surface);
+  --color-warning-surface-text: var(--color-amber-surface-text);
+  --color-warning-text: var(--color-amber-text);
+  --color-warning-border: var(--color-amber-border);
+
+  --color-error-fill: var(--color-rose-fill);
+  --color-error-surface: var(--color-rose-surface);
+  --color-error-surface-text: var(--color-rose-surface-text);
+  --color-error-text: var(--color-rose-text);
+  --color-error-border: var(--color-rose-border);
+
+  /**
+   * Hue
+   */
+
+  --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-neutral-surface-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+
+  --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700));
+  --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800));
+  --color-red-surface-text: light-dark(var(--color-red-800), var(--color-red-200));
+  --color-red-text: light-dark(var(--color-red-700), var(--color-red-300));
+  --color-red-border: light-dark(var(--color-red-400), var(--color-red-600));
+
+  --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700));
+  --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800));
+  --color-orange-surface-text: light-dark(var(--color-orange-800), var(--color-orange-200));
+  --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300));
+  --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600));
+
+  --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700));
+  --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800));
+  --color-amber-surface-text: light-dark(var(--color-amber-800), var(--color-amber-200));
+  --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300));
+  --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600));
+
+  --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700));
+  --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800));
+  --color-yellow-surface-text: light-dark(var(--color-yellow-800), var(--color-yellow-200));
+  --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300));
+  --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600));
+
+  --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700));
+  --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800));
+  --color-lime-surface-text: light-dark(var(--color-lime-800), var(--color-lime-200));
+  --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300));
+  --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600));
+
+  --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700));
+  --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800));
+  --color-green-surface-text: light-dark(var(--color-green-800), var(--color-green-200));
+  --color-green-text: light-dark(var(--color-green-700), var(--color-green-300));
+  --color-green-border: light-dark(var(--color-green-400), var(--color-green-600));
+
+  --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700));
+  --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800));
+  --color-emerald-surface-text: light-dark(var(--color-emerald-800), var(--color-emerald-200));
+  --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300));
+  --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600));
+
+  --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700));
+  --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800));
+  --color-teal-surface-text: light-dark(var(--color-teal-800), var(--color-teal-200));
+  --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300));
+  --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600));
+
+  --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700));
+  --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800));
+  --color-cyan-surface-text: light-dark(var(--color-cyan-800), var(--color-cyan-200));
+  --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300));
+  --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600));
+
+  --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700));
+  --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800));
+  --color-sky-surface-text: light-dark(var(--color-sky-800), var(--color-sky-200));
+  --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300));
+  --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600));
+
+  --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700));
+  --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800));
+  --color-blue-surface-text: light-dark(var(--color-blue-800), var(--color-blue-200));
+  --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600));
+
+  --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700));
+  --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800));
+  --color-indigo-surface-text: light-dark(var(--color-indigo-800), var(--color-indigo-200));
+  --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300));
+  --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600));
+
+  --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700));
+  --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800));
+  --color-violet-surface-text: light-dark(var(--color-violet-800), var(--color-violet-200));
+  --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300));
+  --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600));
+
+  --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700));
+  --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800));
+  --color-purple-surface-text: light-dark(var(--color-purple-800), var(--color-purple-200));
+  --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300));
+  --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600));
+
+  --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700));
+  --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800));
+  --color-fuchsia-surface-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200));
+  --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300));
+  --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600));
+
+  --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700));
+  --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800));
+  --color-pink-surface-text: light-dark(var(--color-pink-800), var(--color-pink-200));
+  --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300));
+  --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600));
+
+  --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700));
+  --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800));
+  --color-rose-surface-text: light-dark(var(--color-rose-800), var(--color-rose-200));
+  --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300));
+  --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600));
+}

package/src/css/theme/text.css

@@ -0,0 +1,37 @@
+/**
+ * Text
+ */
+
+@theme {
+  /* Font families */
+  --font-body: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
+
+  /* Font size scale (Tailwind v4 defaults — clean rem/px values) */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+}

package/src/css/utilities.css

@@ -0,0 +1,118 @@
+/**
+ * Tailwind utility classes.
+ */
+
+/**
+ * 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)
+ */
+
+/**
+ * Fills the available space.
+ */
+@utility dx-expander {
+  @apply flex-1 min-h-0 min-w-0 h-full w-full;
+}
+
+/**
+ * Container that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-container {
+  @apply dx-expander overflow-hidden;
+}
+
+/**
+ * Column that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-column {
+  @apply flex-1 min-w-0 w-full;
+}
+
+/**
+ * Fullscreen
+ */
+@utility dx-fullscreen {
+  @apply absolute inset-0;
+}
+
+/**
+ * Visual warning to indicate incorrect usage of `slottable`.
+ */
+@utility dx-slot-warning {
+  @apply border border-rose-500 border-dashed;
+}
+
+/**
+ * Pseudo-element overlay for ring indicators (focus, current, etc.).
+ *
+ * A standard CSS `box-shadow` ring is painted behind child content, so children with
+ * opaque backgrounds (e.g., cards, avatars) obscure it. By painting the ring on an
+ * absolutely-positioned `::after` pseudo-element that sits above the element's children
+ * in stacking order, the ring is always visible regardless of child backgrounds.
+ *
+ * The pseudo-element inherits `border-radius` from its parent and is `pointer-events-none`
+ * so it doesn't interfere with interactions. The ring starts transparent; consumers
+ * activate it conditionally (e.g., `focus:after:ring-*`, `aria-[current=true]:after:ring-*`).
+ */
+@utility dx-ring-pseudo {
+  @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit]
+    after:pointer-events-none after:ring after:ring-inset after:ring-transparent;
+}
+
+/**
+ * Shimmer text — animates opacity left → right across the contained text.
+ * See @keyframes shimmer-text in theme/animation.css for the keyframe definition.
+ * Geometry: mask-size 200% 100% with mask-repeat: repeat-x means each tile is
+ * 2× the element width; the keyframe slides mask-position-x by 200% (one full
+ * tile period), giving a seamless loop. The 5-stop gradient (0.4 → 1.0 → 0.4)
+ * produces a single bright pulse per cycle that traverses left → right during
+ * the first half, with a brief calm interval during the second half.
+ */
+@utility shimmer-text {
+  mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  mask-size: 200% 100%;
+  -webkit-mask-size: 200% 100%;
+  mask-repeat: repeat-x;
+  -webkit-mask-repeat: repeat-x;
+  animation: shimmer-text 2s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    animation: none;
+    mask-image: none;
+    -webkit-mask-image: none;
+    opacity: 0.6;
+  }
+}

package/src/defs.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ChromaticPalette } from '@dxos/ui-types';
+
+/**
+ * Translation namespace for OS-level translations.
+ */
+export const osTranslations = 'org.dxos.i18n.os';
+
+/**
+ * Available color hues for UI components.
+ */
+export const hues: ChromaticPalette[] = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+] as const;
+
+export const hueShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
+
+export const roles = ['fill', 'surface', 'surface-text', 'text', 'border'] as const;
+
+/**
+ * Card size constants (Tailwind spacing units).
+ * Cards should be no larger than 320px per WCAG 2.1 SC 1.4.10.
+ */
+// TODO(burdon): Replace usage of these with semantic tokens.
+export const cardMinInlineSize = 18;
+export const cardDefaultInlineSize = 20; // 320px
+export const cardMaxInlineSize = 22;
+export const cardMinBlockSize = 18;
+export const cardMaxBlockSize = 30;

package/src/fragments/AUDIT.md

@@ -0,0 +1,57 @@
+# Fragment Definitions Audit
+
+External packages importing fragment definitions from `ui-theme/src/fragments`.
+
+## Current Fragment Exports
+
+| File          | Definition                            | External | Internal |
+| ------------- | ------------------------------------- | -------- | -------- |
+| `density.ts`  | `densityBlockSize`                    | -        | 1        |
+| `density.ts`  | `coarseBlockSize`                     | -        | 1        |
+| `density.ts`  | `coarseDimensions`                    | -        | 1        |
+| `density.ts`  | `fineBlockSize`                       | -        | 1        |
+| `density.ts`  | `fineDimensions`                      | -        | 1        |
+| `disabled.ts` | `staticDisabled`                      | -        | 1        |
+| `disabled.ts` | `dataDisabled`                        | -        | 1        |
+| `focus.ts`    | `focusRing`                           | 2        | 5        |
+| `focus.ts`    | `subduedFocus`                        | -        | 2        |
+| `focus.ts`    | `staticFocusRing`                     | -        | 1        |
+| `hover.ts`    | `subtleHover`                         | 4        | -        |
+| `hover.ts`    | `ghostHover`                          | 8        | 2        |
+| `hover.ts`    | `ghostFocusWithin`                    | 1        | -        |
+| `hover.ts`    | `hoverableControls`                   | 9        | -        |
+| `hover.ts`    | `groupHoverControlItemWithTransition` | 2        | -        |
+| `hover.ts`    | `hoverableFocusedKeyboardControls`    | 1        | -        |
+| `hover.ts`    | `hoverableFocusedWithinControls`      | 9        | -        |
+| `hover.ts`    | `hoverableOpenControlItem`            | 3        | -        |
+| `hover.ts`    | `hoverableControlItem`                | 7        | -        |
+| `text.ts`     | `descriptionTextPrimary`              | 1        | -        |
+| `text.ts`     | `descriptionMessage`                  | 5        | -        |
+
+## Summary
+
+**Total fragments:** 21
+**Total imports (external + internal):** 96
+
+- **External:** 63
+- **Internal:** 33
+
+**Most imported overall:**
+
+- `hoverableControls` (9 external)
+- `hoverableFocusedWithinControls` (9 external)
+- `ghostHover` (8 external + 2 internal = 10 total)
+- `hoverableControlItem` (7 external)
+- `focusRing` (2 external + 5 internal = 7 total)
+
+**Internal imports by file:**
+
+- `input.ts`: 8 definitions (coarseBlockSize, coarseDimensions, fineBlockSize, fineDimensions, focusRing, staticDisabled, staticFocusRing, subduedFocus)
+- `list.ts`: 3 definitions (densityBlockSize, focusRing, ghostHover)
+- `menu.ts`: 2 definitions (dataDisabled, subduedFocus)
+- `button.ts`, `link.ts`, `popover.ts`, `toast.ts`: 1 definition each (ghostHover, focusRing, focusRing, focusRing)
+
+**Completely unused:** 7 fragments
+
+- `subtleHover` from `hover.ts`
+- `hoverableOpenControlItem`, `groupHoverControlItemWithTransition` from `hover.ts` (only 2-3 uses)

package/src/fragments/density.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Density } from '@dxos/ui-types';
+
+const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
+const coarseBlockSize = 'min-h-[2.5rem]';
+
+const fineDimensions = `${fineBlockSize} px-2`;
+const coarseDimensions = `${coarseBlockSize} px-3`;
+
+export const densityDimensions = (density: Density = 'fine') =>
+  density === 'fine' ? fineDimensions : coarseDimensions;
+
+export const densityBlockSize = (density: Density = 'fine') => (density === 'fine' ? fineBlockSize : coarseBlockSize);

package/src/fragments/hover.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const subtleHover = 'hover:bg-hover-overlay';
+
+export const ghostHover = 'hover:bg-hover-surface';
+export const ghostFocusWithin = 'focus-within:bg-hover-surface';
+
+export const hoverableControls =
+  '[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]';
+
+export const groupHoverControlItemWithTransition = 'transition-opacity duration-200 opacity-0 group-hover:opacity-100';
+
+export const hoverableFocusedKeyboardControls = 'focus-visible:[--controls-opacity:1]';
+export const hoverableFocusedWithinControls = 'focus-within:[--controls-opacity:1]';
+export const hoverableOpenControlItem = 'hover-hover:aria-[expanded=true]:[--controls-opacity:1]';
+export const hoverableControlItem = 'opacity-(--controls-opacity)';

package/src/fragments/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// TODO(burdon): Remove export of fragments.
+
+export * from './density';
+export * from './disabled';
+export * from './hover';
+export * from './text';

package/src/fragments/text.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// TODO(burdon): Replace with Message component.
+export const descriptionMessage = 'text-description border border-dashed border-separator rounded-sm p-4';

package/src/index.ts

@@ -2,18 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type TailwindConfig, tailwindConfig } from './config';
-
-export { cardDefaultInlineSize, cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
-export * from './styles';
-export * from './types';
+export * from './defs';
+export * from './fragments';
+export * from './theme';
 export * from './util';
-
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
-
-export { tokens };
-
-/**
- * Translation namespace for OS-level translations.
- */
-export const osTranslations = 'dxos.org/i18n/os';

package/src/main.css

@@ -0,0 +1,87 @@
+/**
+ * Main theme.
+ */
+
+/**
+ * Establish CSS cascade layer order before Tailwind sets its own.
+ * First mention of a layer name wins its position in the order.
+ *
+ * NOTE: `utilities` must be last so it overrides all base and component layers.
+ * NOTE: This must be in sync with the `transformIndexHtml` function in `packages/ui/ui-theme/src/plugins/plugin.ts`.
+ */
+@layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
+
+@import 'tailwindcss';
+
+/* @theme extensions */
+@import './css/theme/animation.css';
+@import './css/theme/border.css';
+@import './css/theme/palette.css';
+@import './css/theme/semantic.css';
+@import './css/theme/spacing.css';
+@import './css/theme/styles.css';
+@import './css/theme/text.css';
+
+/* @layer dx-base, dx-tokens */
+@import './css/base/base.css';
+@import './css/base/typography.css';
+
+/* @layer dx-components (components) */
+@import './css/components/button.css';
+@import './css/components/checkbox.css';
+@import './css/components/dialog.css';
+@import './css/components/focus.css';
+@import './css/components/icon.css';
+@import './css/components/panel.css';
+@import './css/components/link.css';
+@import './css/components/scrollbar.css';
+@import './css/components/selected.css';
+@import './css/components/surface.css';
+@import './css/components/tag.css';
+@import './css/components/text.css';
+
+/* @layer dx-components (layout) */
+@import './css/layout/main.css';
+@import './css/layout/native.css';
+@import './css/layout/positioning.css';
+@import './css/layout/size.css';
+
+/* @layer dx-utilities */
+@import './css/utilities.css';
+
+/* Third-party integrations */
+@import './css/integrations/codemirror.css';
+@import './css/integrations/tldraw.css';
+
+/**
+ * Force-emit CSS variables for the full color palette for all: 
+ * --color-{hue}-{shade}
+ * --color-{hue}-{style}
+ */
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
+@source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
+@source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
+@source inline("border-{info,success,warning,error}-border");
+
+/**
+ * Plugins must come after all imports.
+ */
+@plugin '@tailwindcss/forms';
+@plugin 'tailwind-scrollbar';
+@plugin 'tailwindcss-radix';
+
+/**
+ * Class-based dark mode.
+ * The `.dark` class on an ancestor toggles `dark:` utilities.
+ */
+@variant dark (&:where(.dark, .dark *));
+
+/** Mobile */
+@custom-variant pointer-coarse (@media (pointer: coarse));
+/** Web */
+@custom-variant pointer-fine (@media (pointer: fine));
+/** Supports mouse/trackpad (Web) */
+@custom-variant hover-hover (@media (hover: hover));
+/** Active navigation */
+@custom-variant is-current (&[aria-current]:not([aria-current="false"]));