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

package/src/styles/layers/main.css

@@ -1,6 +1,28 @@
-/* Main component classes */
-
 @layer utilities {
+  /**
+   * Main Web app.
+   */
+  .dx-main-bounce-layout {
+    @apply fixed overflow-auto overscroll-auto;
+    @apply duration-200 ease-in-out-symmetric;
+    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    z-index: 0;
+  }
+
+  /**
+   * Main Mobile app.
+   */
+  .dx-main-mobile-layout {
+    @apply absolute inset-0 overflow-hidden flex flex-col;
+  }
+
+  /**
+   * Main content padding.
+   */
   .dx-main-content-padding {
     @apply pis-0 scroll-ps-0 pie-0 scroll-pe-0;
 
@@ -21,11 +43,15 @@
     }
   }
 
+  /** TODO(burdon): Reconcile with dx-main-bounce-layout */
   .dx-main-content-padding-transitions {
-    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
     @apply duration-200 ease-in-out-symmetric;
+    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
   }
 
+  /**
+   *
+   */
   .dx-main-intrinsic-size {
     @apply is-[calc(100dvw)-2*var(--main-spacing)] transition-[inline-size] ease-in-out-symmetric duration-200;
 
@@ -63,10 +89,6 @@
       }
     }
   }
-
-  .dx-main-bounce-layout {
-    @apply fixed inset-0 z-0 overflow-auto overscroll-auto;
-  }
 }
 
 @layer dx-components {
@@ -143,6 +165,7 @@
     }
   }
 
+
   .dx-main-overlay {
     @apply fixed inset-0 bg-scrimSurface;
     @apply transition-opacity duration-200 ease-in-out-symmetric;

package/src/styles/layers/scrollbar.css

@@ -0,0 +1,11 @@
+/* Pseudo-classes not supported by Tailwind. */
+/* TODO(burdon): Scope with dx- class. */
+@layer components {
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-scrollbarThumbHover !important;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    @apply bg-scrollbarThumbActive !important;
+  }
+}

package/src/styles/layers/size.css

@@ -1,44 +1,49 @@
 /**
  * @layer dx-components
+ * See lengths.ts for dx- sememes.
  */
 
-.container-max-width {
-  @apply is-full max-is-containerMaxWidth mli-auto;
-}
+/** 
+ * Container query root.
+ */
 
-.card-min-width {
-  @apply min-is-cardMinWidth;
+.size-container {
+  container-type: size;
 }
 
-.card-max-width {
-  @apply is-full max-is-cardMaxWidth;
+.container-max-width {
+  @apply is-full max-is-container-max-width mli-auto;
 }
 
-.popover-max-width {
-  @apply is-max max-is-popoverMaxWidth;
+/**
+ * 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));
 }
 
-.popover-card-width {
-  inline-size: min(var(--radix-popper-available-width), calc(var(--dx-popoverMaxWidth) - 2 * var(--dx-hairLine)));
+.card-default-width {
+  @apply is-card-default-width;
 }
 
-.popover-card-height {
-  block-size: min(var(--radix-popper-available-height), 100dvh);
+.card-min-width {
+  @apply min-is-card-min-width;
 }
 
-.popover-square {
-  inline-size: min(min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth)),
-      min(var(--radix-popper-available-height), 100dvh));
-  block-size: min(min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth)),
-      min(var(--radix-popper-available-height), 100dvh));
+.card-max-width {
+  @apply is-full max-is-card-max-width;
 }
 
 .popover-card-max-width {
-  max-inline-size: min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth));
+  inline-size: min(var(--radix-popper-available-width), var(--dx-card-max-width));
 }
 
-.size-container {
-  container-type: size;
+.popover-card-max-height {
+  block-size: min(var(--radix-popper-available-height), var(--dx-card-max-height));
 }
 
 @layer dx-components {

package/src/styles/layers/tokens.css

@@ -13,9 +13,11 @@
     --line-height: 32px;
     --topbar-size: var(--rail-size);
     --toolbar-size: var(--rail-content);
-    --statusbar-size: theme(spacing.8);
+    --statusbar-size: var(--rail-content);
+    /* --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;

package/src/styles/layers/typography.css

@@ -4,16 +4,18 @@
 
 @import '@fontsource-variable/jetbrains-mono/wght-italic.css';
 @import '@fontsource-variable/jetbrains-mono/wght.css';
-@import '@fontsource-variable/inter/slnt.css';
+/* @import '@fontsource-variable/inter/slnt.css'; */
 @import '@fontsource/poiret-one';
 
 @layer utilities {
+
   /* Font weights & `italic` handling */
   .not-italic {
     font-variation-settings:
       'wght' 400,
       'slnt' 0;
   }
+
   .font-thin,
   .not-italic.font-thin,
   .not-italic .font-thin,
@@ -22,6 +24,7 @@
       'wght' 100,
       'slnt' 0;
   }
+
   .font-extralight,
   .not-italic.font-extralight,
   .not-italic .font-extralight,
@@ -30,6 +33,7 @@
       'wght' 200,
       'slnt' 0;
   }
+
   .font-light,
   .not-italic.font-light,
   .not-italic .font-light,
@@ -38,6 +42,7 @@
       'wght' 300,
       'slnt' 0;
   }
+
   .font-normal,
   .not-italic.font-normal,
   .not-italic .font-normal,
@@ -46,6 +51,7 @@
       'wght' 400,
       'slnt' 0;
   }
+
   .font-medium,
   .not-italic.font-medium,
   .not-italic .font-medium,
@@ -54,6 +60,7 @@
       'wght' 500,
       'slnt' 0;
   }
+
   .font-semibold,
   .not-italic.font-semibold,
   .not-italic .font-semibold,
@@ -62,6 +69,7 @@
       'wght' 600,
       'slnt' 0;
   }
+
   .font-bold,
   .not-italic.font-bold,
   .not-italic .font-bold,
@@ -70,6 +78,7 @@
       'wght' 700,
       'slnt' 0;
   }
+
   .font-extrabold,
   .not-italic.font-extrabold,
   .not-italic .font-extrabold,
@@ -78,6 +87,7 @@
       'wght' 800,
       'slnt' 0;
   }
+
   .font-black,
   .not-italic.font-black,
   .not-italic .font-black,
@@ -86,11 +96,13 @@
       'wght' 900,
       'slnt' 0;
   }
+
   .italic {
     font-variation-settings:
       'wght' 400,
       'slnt' -10;
   }
+
   .italic.font-thin,
   .italic .font-thin,
   .font-thin .italic {
@@ -98,6 +110,7 @@
       'wght' 100,
       'slnt' -10;
   }
+
   .italic.font-extralight,
   .italic .font-extralight,
   .font-extralight .italic {
@@ -105,6 +118,7 @@
       'wght' 200,
       'slnt' -10;
   }
+
   .italic.font-light,
   .italic .font-light,
   .font-light .italic {
@@ -112,6 +126,7 @@
       'wght' 300,
       'slnt' -10;
   }
+
   .italic.font-normal,
   .italic .font-normal,
   .font-normal .italic {
@@ -119,6 +134,7 @@
       'wght' 400,
       'slnt' -10;
   }
+
   .italic.font-medium,
   .italic .font-medium,
   .font-medium .italic {
@@ -126,6 +142,7 @@
       'wght' 500,
       'slnt' -10;
   }
+
   .italic.font-semibold,
   .italic .font-semibold,
   .font-semibold .italic {
@@ -133,6 +150,7 @@
       'wght' 600,
       'slnt' -10;
   }
+
   .italic.font-bold,
   .italic .font-bold,
   .font-bold .italic {
@@ -140,6 +158,7 @@
       'wght' 700,
       'slnt' -10;
   }
+
   .italic.font-extrabold,
   .italic .font-extrabold,
   .font-extrabold .italic {
@@ -147,6 +166,7 @@
       'wght' 800,
       'slnt' -10;
   }
+
   .italic.font-black,
   .italic .font-black,
   .font-black .italic {
@@ -154,4 +174,4 @@
       'wght' 900,
       'slnt' -10;
   }
-}
+}

package/src/styles/primitives/container.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+/**
+ * Padding variants:
+ * - sm: Default padding for inputs, forms, etc.
+ * - md: Padding for cards.
+ * - lg: Padding for dialogs.
+ */
+export type ColumnPadding = 'sm' | 'md' | 'lg';
+
+export type ColumnStyleProps = {
+  variant?: ColumnPadding;
+};
+
+// TODO(burdon): Remove these TW types and just define here.
+const padding: Record<ColumnPadding, string> = {
+  sm: 'pli-2',
+  md: 'pli-3',
+  lg: 'pli-6',
+};
+
+const containerColumn: ComponentFunction<ColumnStyleProps> = ({ variant }, ...etc) =>
+  mx(variant && padding[variant], ...etc);
+
+export const containerTheme = {
+  column: containerColumn,
+};

package/src/styles/primitives/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './container';

package/src/styles/theme.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
 import { get } from '@dxos/util';
 
 import {
@@ -23,6 +23,7 @@ import {
   scrollAreaTheme,
   selectTheme,
   separatorTheme,
+  skeletonTheme,
   statusTheme,
   tagTheme,
   toastTheme,
@@ -30,10 +31,21 @@ import {
   tooltipTheme,
   treegridTheme,
 } from './components';
+import { containerTheme } from './primitives';
 
 export const defaultTheme: Theme<Record<string, any>> = {
   themeName: () => 'default',
 
+  //
+  // Primitives
+  //
+
+  container: containerTheme,
+
+  //
+  // Components
+  //
+
   anchoredOverflow: anchoredOverflowTheme,
   avatar: avatarTheme,
   breadcrumb: breadcrumbTheme,
@@ -48,9 +60,10 @@ export const defaultTheme: Theme<Record<string, any>> = {
   message: messageTheme,
   menu: menuTheme,
   popover: popoverTheme,
-  select: selectTheme,
   scrollArea: scrollAreaTheme,
+  select: selectTheme,
   separator: separatorTheme,
+  skeleton: skeletonTheme,
   status: statusTheme,
   tag: tagTheme,
   toast: toastTheme,
@@ -59,10 +72,10 @@ export const defaultTheme: Theme<Record<string, any>> = {
   treegrid: treegridTheme,
 };
 
-export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>) => {
-  return (path: string, defaultClassName: string, styleProps: P, ...options: any[]): string => {
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>): ThemeFunction<P> => {
+  return (path: string, styleProps?: P, ...etc: ClassNameArray) => {
     const result: Theme<P> | ComponentFunction<P> = get(theme, path);
-    return typeof result === 'function' ? result(styleProps, ...options) : defaultClassName;
+    return typeof result === 'function' ? result(styleProps ?? ({} as P), ...etc) : undefined;
   };
 };
 

package/src/tailwind.ts

@@ -2,4 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-// Empty for vscode tooling.
+import { tailwindConfig } from './config';
+
+export default tailwindConfig({ content: ['./src/**/*.{ts,tsx}'] });

package/src/types.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type huePalettes } from './config/tokens/physical-colors';
+import { type huePalettes } from './config/tokens/colors';
 
 export type HuePalette = keyof typeof huePalettes;