@dxos/ui-theme 0.0.0 → 0.8.4-main.52d7546f51

package/src/config/tokens/tokens.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type TailwindAdapterConfig } from '@ch-ui/tailwind-tokens';
+import adapter from '@ch-ui/tailwind-tokens';
+import { type TokenSet } from '@ch-ui/tokens';
+
+import { aliasColors, huePalettes, physicalColors, semanticColors, systemAliases, systemSememes } from './colors';
+import { lengthsFacet, maxSizesFacet } from './lengths';
+
+const adapterConfig: TailwindAdapterConfig = {
+  colors: {
+    facet: 'colors',
+    disposition: 'overwrite',
+    tokenization: 'recursive',
+  },
+  borderWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  ringWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  ringOffsetWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  outlineWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  spacing: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'keep-series',
+  },
+};
+
+export const hues = Object.keys(huePalettes);
+
+export const tokenSet = {
+  colors: {
+    physical: physicalColors,
+    semantic: semanticColors,
+    alias: aliasColors,
+  },
+  lengths: lengthsFacet,
+  maxSizes: maxSizesFacet,
+} satisfies TokenSet;
+
+export const userDefaultTokenSet = {
+  colors: {
+    physical: {
+      definitions: {
+        series: {
+          neutral: physicalColors.definitions!.series!.neutral,
+          primary: physicalColors.definitions!.series!.primary,
+        },
+        accompanyingSeries: physicalColors.definitions!.accompanyingSeries,
+      },
+      conditions: physicalColors.conditions,
+      series: {
+        neutral: physicalColors.series.neutral,
+        primary: physicalColors.series.primary,
+      },
+      namespace: physicalColors.namespace,
+    },
+    semantic: {
+      conditions: semanticColors.conditions,
+      sememes: systemSememes,
+      namespace: semanticColors.namespace,
+    },
+    alias: {
+      conditions: aliasColors.conditions,
+      aliases: systemAliases,
+      namespace: aliasColors.namespace,
+    },
+  },
+} satisfies TokenSet;
+
+export const tokensTailwindConfig = adapter(tokenSet, adapterConfig);

package/src/index.ts

@@ -2,14 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type TailwindConfig, tailwindConfig } from './config';
+import { tailwindConfig } from './config';
 
-export { cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
+// TODO(burdon): Factor out public vs. internals.
+export { cardDefaultInlineSize, cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
 export * from './styles';
 export * from './types';
 export * from './util';
 
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+const { theme: tokens } = tailwindConfig({});
 
 export { tokens };
 

package/src/styles/components/dialog.ts

@@ -7,20 +7,41 @@ import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-typ
 import { mx } from '../../util';
 import { descriptionText } from '../fragments';
 
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeMap: Record<DialogSize, string> = {
+  sm: 'md:!max-is-[24rem]',
+  md: 'md:!max-is-[32rem]',
+  lg: 'md:!max-is-[40rem]',
+  xl: 'md:!max-is-[60rem]',
+};
+
 export type DialogStyleProps = {
   srOnly?: boolean;
   inOverlayLayout?: boolean;
   elevation?: Elevation;
+  size?: DialogSize;
 };
 
 export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
 
-export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout }, ...etc) =>
-  mx(
-    '@container dx-dialog__content dx-focus-ring modal-surface density-coarse',
+export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size }, ...etc) => {
+  return mx(
+    '@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-4',
     !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    size && sizeMap[size],
     ...etc,
   );
+};
+
+export const dialogHeader: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__header flex items-center justify-between', ...etc);
+
+export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body flex flex-col gap-4 bs-full overflow-hidden', ...etc);
+
+export const dialogActionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__actionbar flex items-center density-coarse', ...etc);
 
 export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
   mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
@@ -31,6 +52,9 @@ export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly
 export const dialogTheme: Theme<DialogStyleProps> = {
   overlay: dialogOverlay,
   content: dialogContent,
+  header: dialogHeader,
+  body: dialogBody,
+  actionbar: dialogActionBar,
   title: dialogTitle,
   description: dialogDescription,
 };

package/src/styles/components/index.ts

@@ -19,6 +19,7 @@ export * from './popover';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';
+export * from './skeleton';
 export * from './status';
 export * from './tag';
 export * from './toast';

package/src/styles/components/input.ts

@@ -47,6 +47,7 @@ export type InputMetaStyleProps = Partial<{
   validationValence: MessageValence;
 }>;
 
+// TODO(burdon): Use semantic tokens.
 export const neutralInputValence = '';
 export const successInputValence = 'shadow-emerald-500/50 dark:shadow-emerald-600/50';
 export const infoInputValence = 'shadow-cyan-500/50 dark:shadow-cyan-600/50';
@@ -64,8 +65,7 @@ const booleanInputSurface =
 const booleanInputSurfaceHover =
   'hover:bg-unAccentHover hover:aria-checked:bg-accentSurfaceHover hover:aria-[checked=mixed]:bg-accentSurfaceHover';
 
-export const inputTextLabel =
-  'text-description text-xs font-medium mbs-inputSpacingBlock mbe-labelSpacingBlock first:mbs-0';
+const inputTextLabel = 'text-sm text-description plb-1';
 
 export const inputValence = (valence?: MessageValence) => {
   switch (valence) {

package/src/styles/components/main.ts

@@ -6,26 +6,24 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-// Padding to apply to in-flow elements which need to clear the fixed topbar / bottombar.
+// Padding to apply to in-flow elements which need to clear the fixed topbar/bottombar.
 export const topbarBlockPaddingStart = 'pbs-[--topbar-size] sticky-top-from-topbar-bottom';
 export const bottombarBlockPaddingEnd = 'pbe-[--statusbar-size] sticky-bottom-from-statusbar-bottom';
 
+export const mainPadding = 'dx-main-content-padding';
+export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
+export const mainIntrinsicSize = 'dx-main-intrinsic-size';
+
 export type MainStyleProps = Partial<{
   bounce: boolean;
   handlesFocus: boolean;
 }>;
 
-export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
-  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
-
-export const mainPadding = 'dx-main-content-padding';
-
-export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
-
 export const mainContent: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
   mx(mainPadding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
 
-export const mainIntrinsicSize = 'dx-main-intrinsic-size';
+export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
 
 export const mainOverlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
 

package/src/styles/components/menu.ts

@@ -5,15 +5,7 @@
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import {
-  dataDisabled,
-  descriptionText,
-  modalSurface,
-  popperMotion,
-  subduedFocus,
-  surfaceShadow,
-  surfaceZIndex,
-} from '../fragments';
+import { dataDisabled, descriptionText, modalSurface, subduedFocus, surfaceShadow, surfaceZIndex } from '../fragments';
 
 export type MenuStyleProps = Partial<{
   constrainBlockSize: boolean;
@@ -29,7 +21,7 @@ export const menuContent: ComponentFunction<MenuStyleProps> = ({ elevation }, ..
     surfaceZIndex({ elevation, level: 'menu' }),
     surfaceShadow({ elevation: 'positioned' }),
     modalSurface,
-    popperMotion,
+    // popperMotion,
     ...etc,
   );
 

package/src/styles/components/popover.ts

@@ -15,9 +15,9 @@ export type PopoverStyleProps = Partial<{
 
 export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
   mx(
-    'rounded-md',
-    constrainBlock && 'max-bs-[--radix-popover-content-available-height] overflow-y-auto',
-    constrainInline && 'max-is-[--radix-popover-content-available-width] overflow-x-auto',
+    'flex flex-col rounded-md',
+    constrainBlock && 'max-bs-[--radix-popover-content-available-height] overflow-hidden',
+    constrainInline && 'max-is-[--radix-popover-content-available-width] overflow-hidden',
     ...etc,
   );
 

package/src/styles/components/scroll-area.ts

@@ -1,43 +1,90 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-export type ScrollAreaStyleProps = {};
+export type ScrollAreaStyleProps = {
+  orientation?: AllowedAxis;
+  autoHide?: boolean;
+  margin?: boolean;
+  padding?: boolean;
+  thin?: boolean;
+  snap?: boolean;
+};
 
-export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
-  mx('__bs-full __is-full overflow-hidden', ...etc);
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation, margin, thin }, ...etc) =>
+  mx(
+    'overflow-hidden',
 
-export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
-  // mx('bs-full is-full [&>div]:is-full [&>div]:bs-auto', ...etc);
-  mx('bs-full is-full [&>div]:table-fixed [&>div]:is-full', ...etc);
+    orientation === 'vertical' && 'group/scroll-v bs-full is-full min-bs-0',
+    orientation === 'horizontal' && 'group/scroll-h bs-full is-full min-is-0',
+    orientation === 'all' && 'group/scroll-all bs-full is-full min-bs-0 min-is-0',
+
+    // Balance left/right, top/bottom "margin" with scrollbar.
+    margin && [
+      orientation === 'vertical' && (thin ? 'pis-[4px]' : 'pis-[8px]'),
+      orientation === 'horizontal' && (thin ? 'pbs-[4px]' : 'pbs-[8px]'),
+      orientation === 'all' && (thin ? 'pis-[4px] pbs-[8px]' : 'pis-[8px] pbs-[8px]'),
+    ],
 
-export const scrollAreaScrollbar: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
-  mx(
-    'flex select-none touch-none p-0.5 ease-out',
-    'data-[orientation=vertical]:is-1.5 sm:data-[orientation=vertical]:data-[variant=coarse]:is-3',
-    'data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:bs-1.5 sm:data-[orientation=horizontal]:data-[variant=coarse]:bs-3',
-    'sm:data-[variant=coarse]:bg-separator rounded-full',
-    '[&>div]:bg-unAccent sm:[&[data-variant=coarse]>div]:bg-attention',
     ...etc,
   );
 
-export const scrollAreaThumb: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+/**
+ * NOTE: The browser reserves space for scrollbars.
+ */
+export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
+  { orientation, autoHide, padding, snap, thin },
+  ...etc
+) =>
   mx(
-    'flex-1 rounded-full relative',
-    "before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:is-full before:bs-full before:min-w-[6px] before:min-h-[6px]",
+    'bs-full is-full',
+
+    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
+    orientation === 'horizontal' && 'flex overflow-x-scroll',
+    orientation === 'all' && 'overflow-scroll',
+
+    thin
+      ? '[&::-webkit-scrollbar]:is-[4px] [&::-webkit-scrollbar]:bs-[4px]'
+      : '[&::-webkit-scrollbar]:is-[8px] [&::-webkit-scrollbar]:bs-[8px]',
+
+    // '[&::-webkit-scrollbar-thumb]:rounded-full',
+    '[&::-webkit-scrollbar-thumb]:bg-transparent',
+    '[&::-webkit-scrollbar-corner]:bg-transparent',
+
+    // TODO(burdon): Define token.
+    autoHide
+      ? [
+          orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+        ]
+      : [
+          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+        ],
+
+    // TODO(burdon): Are scrollbars reserved on native devices?
+    padding && [
+      orientation === 'vertical' && 'pli-[4px]',
+      orientation === 'horizontal' && 'pbe-[4px]',
+      orientation === 'all' && 'pis-[4px] pbe-[4px]',
+    ],
+
+    snap && [
+      orientation === 'vertical' && 'snap-y snap-mandatory',
+      orientation === 'horizontal' && 'snap-x snap-mandatory',
+      orientation === 'all' && 'snap-both snap-mandatory',
+    ],
+
     ...etc,
   );
 
-export const scrollAreaCorner: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) => mx(...etc);
-
 export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
   root: scrollAreaRoot,
   viewport: scrollAreaViewport,
-  scrollbar: scrollAreaScrollbar,
-  thumb: scrollAreaThumb,
-  corner: scrollAreaCorner,
 };

package/src/styles/components/skeleton.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type SkeletonStyleProps = {
+  variant?: 'default' | 'circle' | 'text';
+};
+
+export const skeletonRoot: ComponentFunction<SkeletonStyleProps> = ({ variant = 'default' }, ...etc) =>
+  mx(
+    'animate-pulse bg-neutral-250 dark:bg-neutral-750 rounded-md',
+    variant === 'circle' && 'rounded-full',
+    variant === 'text' && 'rounded',
+    ...etc,
+  );
+
+export const skeletonTheme: Theme<SkeletonStyleProps> = {
+  root: skeletonRoot,
+};

package/src/styles/components/tag.ts

@@ -16,7 +16,7 @@ export type TagStyleProps = {
   palette?: ChromaticPalette | NeutralPalette | MessageValence;
 };
 
-export const tagRoot: ComponentFunction<TagStyleProps> = ({ palette = 'neutral' }, ...etc) => mx('dx-tag', ...etc);
+export const tagRoot: ComponentFunction<TagStyleProps> = (_, ...etc) => mx('dx-tag', ...etc);
 
 export const tagTheme: Theme<TagStyleProps> = {
   root: tagRoot,

package/src/styles/components/toolbar.ts

@@ -2,21 +2,28 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 import { textBlockWidth } from '../fragments';
 
-export type ToolbarStyleProps = Partial<{ layoutManaged: boolean; disabled: boolean }>;
+export type ToolbarStyleProps = Partial<{
+  density: Density;
+  disabled: boolean;
+  layoutManaged: boolean;
+}>;
 
 export const toolbarLayout =
-  'is-full shrink-0 flex flex-nowrap items-center gap-1 p-1 overflow-x-auto scrollbar-none contain-layout';
-
-// TODO(burdon): Detect: &:not([data-is-attention-source]_&)]:
-export const toolbarInactive = '*:opacity-20';
-
-export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged, disabled }, ...etc) => {
-  return mx('bg-toolbarSurface dx-toolbar', !layoutManaged && toolbarLayout, disabled && toolbarInactive, ...etc);
+  'is-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none contain-layout';
+
+export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ density, disabled, layoutManaged }, ...etc) => {
+  return mx(
+    'bg-toolbarSurface dx-toolbar',
+    density === 'coarse' && 'bs-[var(--rail-size)] !pli-3',
+    disabled && '*:opacity-20',
+    !layoutManaged && toolbarLayout,
+    ...etc,
+  );
 };
 
 export const toolbarInner: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {

package/src/styles/components/tooltip.ts

@@ -5,7 +5,7 @@
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import { chromeText, popperMotion, surfaceShadow, surfaceZIndex } from '../fragments';
+import { chromeText, surfaceShadow, surfaceZIndex } from '../fragments';
 
 export type TooltipStyleProps = Partial<{
   elevation: Elevation;
@@ -14,7 +14,7 @@ export type TooltipStyleProps = Partial<{
 export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
   mx(
     'inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText',
-    popperMotion,
+    // popperMotion,
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'tooltip' }),
     chromeText,

package/src/styles/fragments/motion.ts

@@ -3,4 +3,4 @@
 //
 
 export const popperMotion =
-  'will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade';
+  'will-change-[opacity,transform] data-[side=top]:animate-slide-down-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade';

package/src/styles/fragments/size.ts

@@ -8,7 +8,7 @@ import { mx } from '../../util';
 
 export const sizeWidthMap = new Map<Size, string>([
   [0, 'is-0'],
-  ['px', 'is-px'],
+  ['px', 'is-px'], // 1px
   [0.5, 'is-0.5'],
   [1, 'is-1'],
   [1.5, 'is-1.5'],
@@ -46,7 +46,7 @@ export const sizeWidthMap = new Map<Size, string>([
 
 export const sizeHeightMap = new Map<Size, string>([
   [0, 'bs-0'],
-  ['px', 'bs-px'],
+  ['px', 'bs-px'], // 1px
   [0.5, 'bs-0.5'],
   [1, 'bs-1'],
   [1.5, 'bs-1.5'],

package/src/styles/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './fragments';
 export * from './components';
+export * from './fragments';
+export * from './primitives';
 export * from './theme';

package/src/styles/layers/dialog.css

@@ -1,42 +1,73 @@
 @layer dx-components {
   .dx-dialog__overlay {
-    @apply fixed z-50 inset-inline-0 block-start-0 bs-dvh bg-scrimSurface overflow-auto grid place-items-center pbs-[env(safe-area-inset-top)];
-    @media (min-width: theme('screens.sm')) {
-      @apply p-[calc(env(safe-area-inset-top)+.6rem)];
+    @apply z-50 fixed grid inset-inline-0 block-start-0 bs-dvh pbs-[env(safe-area-inset-top)] place-items-center overflow-auto bg-scrimSurface;
+    
+    &[data-state='open'] {
+      @apply animate-fade-in;
     }
-    @media (min-width: theme('screens.md')) {
-      @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
+
+    &[data-state='closed'] {
+      @apply animate-fade-out;
     }
-    @media (min-width: theme('screens.lg')) {
-      @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
-    }
-    &[data-block-align="start"]{
+
+    &[data-block-align='start'] {
       align-items: start;
       justify-items: center;
     }
-    &[data-block-align="center"]{
+
+    &[data-block-align='center'] {
       place-items: center;
     }
-    &[data-block-align="end"]{
+
+    &[data-block-align='end'] {
       align-items: end;
       justify-items: center;
     }
   }
+
+  @media (min-width: theme('screens.sm')) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+.6rem)];
+    }
+  }
+
+  @media (min-width: theme('screens.md')) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
+    }
+  }
+
+  @media (min-width: theme('screens.lg')) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
+    }
+  }
+
   .dx-dialog__content {
-    /* TODO(thure): `flex` should not be default. */
-    @apply flex flex-col is-dvw max-is-full p-4 animate-slideUpAndFade shadow-md backdrop-blur;
-    will-change: opacity, transform;
-    @media (min-width: theme('screens.sm')) {
+    @apply flex flex-col is-dvw max-bs-full max-is-full p-4 overflow-hidden shadow-md backdrop-blur;
+
+    &[data-state='open'] {
+      @apply animate-slide-up-and-fade;
+    }
+
+    &[data-state='closed'] {
+      @apply animate-slide-down-and-fade;
+    }
+  }
+
+  @media (min-width: theme('screens.sm')) {
+    .dx-dialog__content {
       @apply is-[95vw] border rounded-md border-separator;
     }
-    @media (min-width: theme('screens.md')) {
+  }
+
+  @media (min-width: theme('screens.md')) {
+    .dx-dialog__content {
       @apply max-is-[24rem];
     }
   }
+
   .dx-dialog__title {
-    @apply rounded shrink-0 text-xl font-medium;
-  }
-  .dx-dialog__description {
-    @apply mlb-2;
+    @apply shrink-0 text-xl font-medium;
   }
-}
+}

package/src/styles/layers/index.css

@@ -16,6 +16,7 @@
 @import './positioning.css';
 @import './main.css';
 @import './native.css';
+@import './scrollbar.css';
 @import './size.css';
 @import './surfaces.css';
 @import './tag.css';