@dxos/ui-theme 0.0.0 → 0.8.4-main.59c2e9b

package/src/config/tailwind.ts

@@ -36,13 +36,14 @@ export const tailwindConfig = ({
     },
     extend: merge(
       {
+        // Generates is-card-default-width, is-card-min-width, etc.
         spacing: {
-          prose: 'var(--dx-prose)',
-          containerMaxWidth: 'var(--dx-containerMaxWidth)',
-          cardDefaultWidth: 'var(--dx-cardDefaultWidth)',
-          cardMinWidth: 'var(--dx-cardMinWidth)',
-          cardMaxWidth: 'var(--dx-cardMaxWidth)',
-          popoverMaxWidth: 'var(--dx-popoverMaxWidth)',
+          'card-default-width': 'var(--dx-card-default-width)',
+          'card-min-width': 'var(--dx-card-min-width)',
+          'card-max-width': 'var(--dx-card-max-width)',
+          'container-max-width': 'var(--dx-container-max-width)',
+          'popover-max-width': 'var(--dx-popover-max-width)',
+          'prose-max-width': 'var(--dx-prose-max-width)',
         },
         backgroundImage: {
           'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
@@ -52,23 +53,23 @@ export const tailwindConfig = ({
           none: '0',
           sm: '0.25rem',
           DEFAULT: '0.5rem',
-          md: '.75rem',
+          md: '0.75rem',
           lg: '1rem',
         },
         screens: {
           'pointer-fine': { raw: '(pointer: fine)' },
           'hover-hover': { raw: '(hover: hover)' },
-          md: '768px',
-          lg: '1024px',
+          'md': '768px',
+          'lg': '1024px',
         },
         fontSize: {
           // Base size 16px
           // Scale 1.125
-          xs: ['0.790rem', { lineHeight: '1rem' }],
-          sm: ['0.889rem', { lineHeight: '1.25rem' }],
-          base: ['1rem', { lineHeight: '1.5rem' }],
-          lg: ['1.125rem', { lineHeight: '1.75rem' }],
-          xl: ['1.266rem', { lineHeight: '1.75rem' }],
+          'xs': ['0.790rem', { lineHeight: '1rem' }],
+          'sm': ['0.889rem', { lineHeight: '1.25rem' }],
+          'base': ['1rem', { lineHeight: '1.5rem' }],
+          'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+          'xl': ['1.266rem', { lineHeight: '1.75rem' }],
           '2xl': ['1.424rem', { lineHeight: '2rem' }],
           '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
           '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
@@ -79,46 +80,42 @@ export const tailwindConfig = ({
           '9xl': ['3.247rem', { lineHeight: '3.25rem' }],
         },
         boxShadow: {
-          slider: '0 0 0 5px rgba(0, 0, 0, 0.3)',
+          'slider': '0 0 0 5px rgba(0, 0, 0, 0.3)',
         },
         transitionProperty: {
           'max-height': 'max-height',
         },
         transitionTimingFunction: {
-          'in-out-symmetric': 'cubic-bezier(0.5,0,0.5,1)',
+          'in-out-symmetric': 'cubic-bezier(0.5, 0, 0.5, 1)',
         },
         keyframes: {
+          // Fade
+          'fade-in': {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+          },
+          'fade-out': {
+            from: { opacity: 1 },
+            to: { opacity: 0 },
+          },
+
           // Popper chrome
-          slideDownAndFade: {
-            from: { opacity: 0, transform: 'translateY(-2px)' },
-            to: { opacity: 1, transform: 'translateY(0)' },
+          'slide-down-and-fade': {
+            from: { opacity: 1, transform: 'translateY(0)' },
+            to: { opacity: 0, transform: 'translateY(16px)' },
           },
-          slideLeftAndFade: {
-            from: { opacity: 0, transform: 'translateX(2px)' },
+          'slide-left-and-fade': {
+            from: { opacity: 0, transform: 'translateX(-16px)' },
             to: { opacity: 1, transform: 'translateX(0)' },
           },
-          slideUpAndFade: {
-            from: { opacity: 0, transform: 'translateY(2px)' },
+          'slide-up-and-fade': {
+            from: { opacity: 0, transform: 'translateY(16px)' },
             to: { opacity: 1, transform: 'translateY(0)' },
           },
-          slideRightAndFade: {
-            from: { opacity: 0, transform: 'translateX(-2px)' },
+          'slide-right-and-fade': {
+            from: { opacity: 0, transform: 'translateX(16px)' },
             to: { opacity: 1, transform: 'translateX(0)' },
           },
-          fadeIn: {
-            from: { opacity: 0 },
-            to: { opacity: 1 },
-          },
-
-          // Accordion
-          slideDown: {
-            from: { height: '0px' },
-            to: { height: 'var(--radix-accordion-content-height)' },
-          },
-          slideUp: {
-            from: { height: 'var(--radix-accordion-content-height)' },
-            to: { height: '0px' },
-          },
 
           // Toast
           'toast-hide': {
@@ -142,6 +139,16 @@ export const tailwindConfig = ({
             },
           },
 
+          // Accordion
+          'slide-down': {
+            from: { height: '0px' },
+            to: { height: 'var(--radix-accordion-content-height)' },
+          },
+          'slide-up': {
+            from: { height: 'var(--radix-accordion-content-height)' },
+            to: { height: '0px' },
+          },
+
           // Shimmer
           'shimmer-loop': {
             '100%': {
@@ -149,6 +156,7 @@ export const tailwindConfig = ({
             },
           },
 
+          // HALO
           'halo-pulse': {
             '0%': {
               opacity: 0.3,
@@ -161,6 +169,7 @@ export const tailwindConfig = ({
             },
           },
 
+          // Progress
           'progress-indeterminate': {
             '0%': {
               left: 0,
@@ -180,45 +189,47 @@ export const tailwindConfig = ({
             },
           },
 
-          // Border trail
-          ['trail']: {
+          // Border trail effect
+          'trail': {
             to: { 'offset-distance': '100%' },
           },
-          ['trail-offset']: {
+          'trail-offset': {
             '0%': { 'offset-distance': '50%' },
             '100%': { 'offset-distance': '150%' },
           },
         },
         animation: {
-          ['fade-in']: 'fadeIn 100ms ease-in forwards',
-
-          // Border trail
-          ['trail']: 'trail 6s linear infinite',
-          ['trail-offset']: 'trail-offset 6s linear infinite',
+          // Fade
+          'fade-in': 'fade-in 200ms ease-out',
+          'fade-out': 'fade-out 400ms ease-out',
 
           // Popper chrome
-          ['slideDownAndFade']: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideLeftAndFade']: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideUpAndFade']: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideRightAndFade']: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-down-and-fade': 'slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-left-and-fade': 'slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-up-and-fade': 'slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-right-and-fade': 'slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
 
           // Toast
-          ['toast-hide']: 'toast-hide 100ms ease-in forwards',
-          ['toast-slide-in-right']: 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['toast-slide-in-bottom']: 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['toast-swipe-out']: 'toast-swipe-out 100ms ease-out forwards',
+          'toast-hide': 'toast-hide 100ms ease-in forwards',
+          'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
 
           // Accordion
-          ['slideDown']: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-          ['slideUp']: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          'slide-down': 'slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          'slide-up': 'slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)',
 
-          ['spin']: 'spin 1.5s linear infinite',
-          ['spin-slow']: 'spin 3s linear infinite',
+          // Border trail effect
+          'trail': 'trail 6s linear infinite',
+          'trail-offset': 'trail-offset 6s linear infinite',
 
-          ['shimmer']: 'shimmer-loop 2s infinite',
-          ['halo-pulse']: 'halo-pulse 2s ease-out infinite',
-          ['progress-indeterminate']: 'progress-indeterminate 2s ease-out infinite',
-          ['progress-linear']: 'progress-linear 2s ease-out infinite',
+          // Progress effects
+          'spin': 'spin 1.5s linear infinite',
+          'spin-slow': 'spin 3s linear infinite',
+          'shimmer': 'shimmer-loop 2s infinite',
+          'halo-pulse': 'halo-pulse 2s ease-out infinite',
+          'progress-indeterminate': 'progress-indeterminate 2s ease-out infinite',
+          'progress-linear': 'progress-linear 2s ease-out infinite',
         },
       },
       extendTokens,
@@ -240,7 +251,10 @@ export const tailwindConfig = ({
     tailwindcssLogical,
     tailwindcssRadix(),
     // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar,
+    tailwindScrollbar({
+      nocompatible: true,
+      preferredStrategy: 'pseudoelements',
+    }),
   ],
   ...(env === 'development' && { mode: 'jit' }),
   content,

package/src/config/tokens/lengths.ts

@@ -86,12 +86,12 @@ export const maxSizesFacet = {
     namespace: 'dx-',
     conditions: { root: [':root'] },
     sememes: {
-      prose: { root: ['size', 50] },
-      containerMaxWidth: { root: ['size', 50] },
-      popoverMaxWidth: { root: ['size', cardDefaultInlineSize] },
-      cardDefaultWidth: { root: ['size', cardDefaultInlineSize] },
-      cardMinWidth: { root: ['size', cardMinInlineSize] },
-      cardMaxWidth: { root: ['size', cardMaxInlineSize] },
+      'prose-max-width': { root: ['size', 50] },
+      'container-max-width': { root: ['size', 50] },
+      'popover-max-width': { root: ['size', cardDefaultInlineSize] },
+      'card-default-width': { root: ['size', cardDefaultInlineSize] },
+      'card-min-width': { root: ['size', cardMinInlineSize] },
+      'card-max-width': { root: ['size', cardMaxInlineSize] },
     },
   },
 } satisfies Facet;

package/src/config/tokens/sizes.ts

@@ -2,6 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+/**
+ * Cards should be no larger than 320px per WCAG 2.1 SC 1.4.10.
+ */
 export const cardMinInlineSize = 18;
-export const cardDefaultInlineSize = 20;
-export const cardMaxInlineSize = 25;
+export const cardDefaultInlineSize = 20; // 320px
+export const cardMaxInlineSize = 22;

package/src/index.ts

@@ -4,7 +4,7 @@
 
 import { type TailwindConfig, tailwindConfig } from './config';
 
-export { cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
+export { cardDefaultInlineSize, cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
 export * from './styles';
 export * from './types';
 export * from './util';

package/src/styles/components/dialog.ts

@@ -7,20 +7,35 @@ 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-2',
     !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 dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
   mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
@@ -31,6 +46,7 @@ export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly
 export const dialogTheme: Theme<DialogStyleProps> = {
   overlay: dialogOverlay,
   content: dialogContent,
+  header: dialogHeader,
   title: dialogTitle,
   description: dialogDescription,
 };

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/layers/dialog.css

@@ -1,42 +1,77 @@
 @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-is-full p-4 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;
+    @apply shrink-0 text-xl font-medium;
   }
+
   .dx-dialog__description {
     @apply mlb-2;
   }
-}
+}

package/src/styles/layers/size.css

@@ -2,24 +2,35 @@
  * @layer dx-components
  */
 
+/** 
+ * Container query root.
+ */
+.size-container {
+  container-type: size;
+}
+
 .container-max-width {
-  @apply is-full max-is-containerMaxWidth mli-auto;
+  @apply is-full max-is-container-max-width mli-auto;
+}
+
+.card-default-width {
+  @apply is-card-default-width;
 }
 
 .card-min-width {
-  @apply min-is-cardMinWidth;
+  @apply min-is-card-min-width;
 }
 
 .card-max-width {
-  @apply is-full max-is-cardMaxWidth;
+  @apply is-full max-is-card-max-width;
 }
 
 .popover-max-width {
-  @apply is-max max-is-popoverMaxWidth;
+  @apply is-max max-is-popover-max-width;
 }
 
 .popover-card-width {
-  inline-size: min(var(--radix-popper-available-width), calc(var(--dx-popoverMaxWidth) - 2 * var(--dx-hairLine)));
+  inline-size: min(var(--radix-popper-available-width), calc(var(--dx-popover-max-width) - 2 * var(--dx-hairLine)));
 }
 
 .popover-card-height {
@@ -27,18 +38,14 @@
 }
 
 .popover-square {
-  inline-size: min(min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth)),
+  inline-size: min(min(var(--radix-popper-available-width), var(--dx-popover-max-width)),
       min(var(--radix-popper-available-height), 100dvh));
-  block-size: min(min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth)),
+  block-size: min(min(var(--radix-popper-available-width), var(--dx-popover-max-width)),
       min(var(--radix-popper-available-height), 100dvh));
 }
 
 .popover-card-max-width {
-  max-inline-size: min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth));
-}
-
-.size-container {
-  container-type: size;
+  max-inline-size: min(var(--radix-popper-available-width), var(--dx-popover-max-width));
 }
 
 @layer dx-components {

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/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}'] });