@dxos/ui-theme 0.8.4-main.937b3ca → 0.8.4-main.bc674ce

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.bc674ce",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -64,8 +64,8 @@
     "tailwindcss": "~3.4.1",
     "tailwindcss-logical": "^3.0.0",
     "tailwindcss-radix": "^2.8.0",
-    "@dxos/node-std": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@dxos/util": "0.8.4-main.bc674ce",
+    "@dxos/node-std": "0.8.4-main.bc674ce"
   },
   "devDependencies": {
     "@ch-ui/colors": "1.2.1",
@@ -73,7 +73,7 @@
     "@types/postcss-import": "^14.0.3",
     "esbuild": "0.25.10",
     "vite": "7.1.9",
-    "@dxos/ui-types": "0.8.4-main.937b3ca"
+    "@dxos/ui-types": "0.8.4-main.bc674ce"
   },
   "publishConfig": {
     "access": "public"

package/src/styles/components/main.ts

@@ -6,31 +6,33 @@ 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 mainDrawer: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx('dx-main-drawer', 'dx-focus-ring-inset-over-all', ...etc);
 
 export const mainOverlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
 
 export const mainTheme = {
   content: mainContent,
   sidebar: mainSidebar,
+  drawer: mainDrawer,
   overlay: mainOverlay,
 };

package/src/styles/layers/main.css

@@ -1,9 +1,20 @@
-/* Main component classes */
-
 @layer utilities {
   .dx-main-content-padding {
     @apply pis-0 scroll-ps-0 pie-0 scroll-pe-0;
 
+    /* Constrain content height when drawer is expanded. */
+    &[data-drawer-state='expanded'] {
+      max-block-size: calc(100dvh - var(--drawer-size));
+    }
+
+    /* Hide content when drawer is full. */
+    &[data-drawer-state='full'] {
+      max-block-size: 0;
+      overflow: hidden !important;
+      visibility: hidden;
+      pointer-events: none;
+    }
+ 
     @media (min-width: theme('screens.lg')) {
       &[data-sidebar-inline-start-state='collapsed'] {
         @apply pis-[--l0-size] scroll-ps-[--l0-size];
@@ -65,7 +76,23 @@
   }
 
   .dx-main-bounce-layout {
-    @apply fixed inset-0 z-0 overflow-auto overscroll-auto;
+    @apply fixed overflow-auto overscroll-auto;
+    @apply duration-200 ease-in-out-symmetric;
+    transition-property: inset-block-end;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    z-index: 0;
+
+    &[data-drawer-state='expanded'] {
+      inset-block-end: var(--drawer-size);
+    }
+
+    &[data-drawer-state='full'] {
+      inset-block-end: var(--visual-viewport-height, 100dvh);
+      pointer-events: none;
+    }
   }
 }
 
@@ -143,6 +170,46 @@
     }
   }
 
+  .dx-main-drawer {
+    @apply fixed overflow-hidden;
+    @apply duration-200 ease-in-out-symmetric;
+    @apply border-bs-landmarkLine border-subduedSeparator;
+    @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
+    overscroll-behavior: contain;
+    touch-action: pan-y;
+
+    /* Ensure scrollable children contain their scroll. */
+    & [class*='overflow-y-auto'],
+    & [class*='overflow-auto'] {
+      overscroll-behavior-y: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    transition-property: inset-block-end, block-size;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+
+    &[data-resizing='false'] {
+      @apply duration-200;
+    }
+
+    &[data-state='closed'] {
+      block-size: var(--drawer-size);
+      inset-block-end: calc(-1 * var(--drawer-size));
+    }
+
+    &[data-state='expanded'] {
+      block-size: var(--drawer-size);
+      inset-block-end: max(0px, env(safe-area-inset-bottom));
+    }
+
+    &[data-state='full'] {
+      block-size: var(--visual-viewport-height, 100dvh);
+      inset-block-end: max(0px, env(safe-area-inset-bottom));
+    }
+  }
+
   .dx-main-overlay {
     @apply fixed inset-0 bg-scrimSurface;
     @apply transition-opacity duration-200 ease-in-out-symmetric;

package/src/styles/layers/tokens.css

@@ -16,6 +16,7 @@
     --statusbar-size: theme(spacing.8);
     --nav-sidebar-size: 22.5rem;
     --complementary-sidebar-size: 25rem;
+    --drawer-size: 50dvh;
     /* NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls. */
     --l0-size: 74px;
     --l0-avatar-size: 3rem;