@dxos/ui-theme 0.8.4-main.ef1bc66f44 → 0.8.4-main.fcfe5033a5

package/src/styles/layers/main.css

@@ -1,183 +0,0 @@
-@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;
-
-    @media (min-width: theme('screens.lg')) {
-      &[data-sidebar-inline-start-state='collapsed'] {
-        @apply pis-[--l0-size] scroll-ps-[--l0-size];
-      }
-      &[data-sidebar-inline-start-state='expanded'] {
-        @apply pis-[--nav-sidebar-size] scroll-ps-[--nav-sidebar-size];
-      }
-
-      &[data-sidebar-inline-end-state='collapsed'] {
-        @apply pie-[--r0-size] scroll-pe-[--r0-size];
-      }
-      &[data-sidebar-inline-end-state='expanded'] {
-        @apply pie-[--complementary-sidebar-size] scroll-pe-[--complementary-sidebar-size];
-      }
-    }
-  }
-
-  /** TODO(burdon): Reconcile with dx-main-bounce-layout */
-  .dx-main-content-padding-transitions {
-    @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;
-
-    @media (min-width: theme('screens.lg')) {
-      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='closed'] {
-        inline-size: calc(100dvw - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='closed'] {
-        inline-size: calc(100dvw - var(--l0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='closed'] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - 2 * var(--main-spacing));
-      }
-
-      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='collapsed'] {
-        inline-size: calc(100dvw - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='collapsed'] {
-        inline-size: calc(100dvw - var(--l0-size) - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='collapsed'] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--r0-size) - 2 * var(--main-spacing));
-      }
-
-      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='expanded'] {
-        inline-size: calc(100dvw - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='expanded'] {
-        inline-size: calc(100dvw - var(--l0-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='expanded'] {
-        inline-size: calc(
-          100dvw - var(--nav-sidebar-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing)
-        );
-      }
-    }
-  }
-}
-
-@layer dx-components {
-  .dx-main-sidebar {
-    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
-    @apply duration-200 ease-in-out-symmetric;
-    @apply border-landmarkLine border-subduedSeparator rounded-md;
-    @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
-
-    transition-property: inset-inline-start, inset-inline-end, inline-size;
-    inset-block-start: max(0.5rem, env(safe-area-inset-top));
-    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
-    inline-size: calc(100dvw - 3rem);
-    z-index: 7;
-
-    @media (min-width: theme('screens.lg')) {
-      @apply block-start-0 block-end-0 rounded-none border-lb-0;
-    }
-
-    &[data-resizing='false'] {
-      @apply duration-200;
-    }
-
-    &[data-side='is'] {
-      @apply -inline-start-[100vw] border-ie-landmarkLine border-subduedSeparator;
-      z-index: 8;
-
-      &[data-state='expanded'] {
-        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
-        @media (min-width: theme('screens.lg')) {
-          @apply inline-start-0;
-        }
-      }
-
-      @media (min-width: theme('screens.sm')) {
-        @apply is-[--nav-sidebar-size];
-      }
-
-      @media (min-width: theme('screens.lg')) {
-        @apply border-is-0;
-
-        &[data-state='collapsed'] {
-          @apply is-[--l0-size] inline-start-0;
-        }
-        &[data-state='expanded'] {
-          @apply is-[--nav-sidebar-size];
-        }
-      }
-    }
-
-    &[data-side='ie'] {
-      @apply -inline-end-[100vw] border-is-landmarkLine border-separator;
-
-      &[data-state='expanded'] {
-        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
-        @media (min-width: theme('screens.lg')) {
-          @apply inline-end-0;
-        }
-      }
-
-      @media (min-width: theme('screens.sm')) {
-        @apply is-[--complementary-sidebar-size];
-      }
-
-      @media (min-width: theme('screens.lg')) {
-        @apply border-ie-0;
-        &[data-state='collapsed'] {
-          @apply is-[--r0-size] inline-end-0;
-        }
-        &[data-state='expanded'] {
-          @apply is-[--complementary-sidebar-size];
-        }
-      }
-    }
-  }
-
-
-  .dx-main-overlay {
-    @apply fixed inset-0 bg-scrimSurface;
-    @apply transition-opacity duration-200 ease-in-out-symmetric;
-    @apply opacity-0 hidden;
-    z-index: 6;
-
-    &[data-state='open'] {
-      @apply opacity-100 block;
-
-      @media (min-width: theme('screens.lg')) {
-        @apply opacity-100 hidden;
-      }
-    }
-  }
-}

package/src/styles/layers/positioning.css

@@ -1,23 +0,0 @@
-@layer utilities {
-  .snap-inline {
-    scroll-snap-type: inline var(--tw-scroll-snap-strictness);
-  }
-  .snap-block {
-    scroll-snap-type: block var(--tw-scroll-snap-strictness);
-  }
-  .sticky-top-0 {
-    --sticky-top: 0;
-  }
-  .contain-layout {
-    contain: layout;
-  }
-}
-
-@layer dx-components {
-  .sticky-top-from-topbar-bottom {
-    --sticky-top: var(--topbar-size);
-  }
-  .sticky-bottom-from-statusbar-bottom {
-    --sticky-bottom: var(--statusbar-size);
-  }
-}

package/src/styles/layers/scrollbar.css

@@ -1,10 +0,0 @@
-/* Pseudo-classes not supported by Tailwind. */
-@layer components {
-  ::-webkit-scrollbar-thumb:hover {
-    @apply bg-scrollbarThumbHover !important;
-  }
-
-  ::-webkit-scrollbar-thumb:active {
-    @apply bg-scrollbarThumbActive !important;
-  }
-}

package/src/styles/layers/surfaces.css

@@ -1,31 +0,0 @@
-@layer utilities {
-  .base-surface {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-  }
-
-  .dark .base-surface {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-  }
-
-  .sidebar-surface {
-    background-color: var(--dx-sidebarSurface);
-    --surface-bg: var(--dx-sidebarSurface);
-  }
-
-  .dark .sidebar-surface {
-    background-color: var(--dx-sidebarSurface);
-    --surface-bg: var(--dx-sidebarSurface);
-  }
-
-  .modal-surface {
-    background-color: var(--dx-modalSurface);
-    --surface-bg: var(--dx-modalSurface);
-  }
-
-  .dark .modal-surface {
-    background-color: var(--dx-modalSurface);
-    --surface-bg: var(--dx-modalSurface);
-  }
-}

package/src/styles/layers/tag.css

@@ -1,132 +0,0 @@
-@layer dx-tokens {
-  :root {
-    --dx-tag-padding-block: 0.125rem;
-  }
-}
-
-@layer dx-components {
-  .dx-tag {
-    @apply inline-block text-xs font-semibold m-0.5 pli-1 rounded-sm cursor-default truncate;
-    padding-block: var(--dx-tag-padding-block);
-    user-select: none;
-  }
-
-  .dx-tag--anchor {
-    /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
-    @apply inline cursor-pointer -mli-[4px] pli-[3px] plb-0.5 border border-separator rounded-sm bg-groupSurface transition-colors;
-
-    &:hover {
-      @apply bg-hoverSurface;
-    }
-  }
-
-  .dx-tag[data-hue='neutral'],
-  .dx-tag--neutral {
-    @apply bg-separator text-neutral-700 dark:text-neutral-150;
-  }
-
-  .dx-tag[data-hue='red'],
-  .dx-tag--red {
-    @apply bg-redSurface text-redSurfaceText;
-  }
-
-  .dx-tag[data-hue='orange'],
-  .dx-tag--orange {
-    @apply bg-orangeSurface text-orangeSurfaceText;
-  }
-
-  .dx-tag[data-hue='amber'],
-  .dx-tag--amber {
-    @apply bg-amberSurface text-amberSurfaceText;
-  }
-
-  .dx-tag[data-hue='yellow'],
-  .dx-tag--yellow {
-    @apply bg-yellowSurface text-yellowSurfaceText;
-  }
-
-  .dx-tag[data-hue='lime'],
-  .dx-tag--lime {
-    @apply bg-limeSurface text-limeSurfaceText;
-  }
-
-  .dx-tag[data-hue='green'],
-  .dx-tag--green {
-    @apply bg-greenSurface text-greenSurfaceText;
-  }
-
-  .dx-tag[data-hue='emerald'],
-  .dx-tag--emerald {
-    @apply bg-emeraldSurface text-emeraldSurfaceText;
-  }
-
-  .dx-tag[data-hue='teal'],
-  .dx-tag--teal {
-    @apply bg-tealSurface text-tealSurfaceText;
-  }
-
-  .dx-tag[data-hue='cyan'],
-  .dx-tag--cyan {
-    @apply bg-cyanSurface text-cyanSurfaceText;
-  }
-
-  .dx-tag[data-hue='sky'],
-  .dx-tag--sky {
-    @apply bg-skySurface text-skySurfaceText;
-  }
-
-  .dx-tag[data-hue='blue'],
-  .dx-tag--blue {
-    @apply bg-blueSurface text-blueSurfaceText;
-  }
-
-  .dx-tag[data-hue='indigo'],
-  .dx-tag--indigo {
-    @apply bg-indigoSurface text-indigoSurfaceText;
-  }
-
-  .dx-tag[data-hue='violet'],
-  .dx-tag--violet {
-    @apply bg-violetSurface text-violetSurfaceText;
-  }
-
-  .dx-tag[data-hue='purple'],
-  .dx-tag--purple {
-    @apply bg-purpleSurface text-purpleSurfaceText;
-  }
-
-  .dx-tag[data-hue='fuchsia'],
-  .dx-tag--fuchsia {
-    @apply bg-fuchsiaSurface text-fuchsiaSurfaceText;
-  }
-
-  .dx-tag[data-hue='pink'],
-  .dx-tag--pink {
-    @apply bg-pinkSurface text-pinkSurfaceText;
-  }
-
-  .dx-tag[data-hue='rose'],
-  .dx-tag--rose {
-    @apply bg-roseSurface text-roseSurfaceText;
-  }
-
-  .dx-tag[data-hue='info'],
-  .dx-tag--info {
-    @apply bg-cyanSurface text-cyanSurfaceText;
-  }
-
-  .dx-tag[data-hue='success'],
-  .dx-tag--success {
-    @apply bg-emeraldSurface text-emeraldSurfaceText;
-  }
-
-  .dx-tag[data-hue='warning'],
-  .dx-tag--warning {
-    @apply bg-amberSurface text-amberSurfaceText;
-  }
-
-  .dx-tag[data-hue='error'],
-  .dx-tag--error {
-    @apply bg-roseSurface text-roseSurfaceText;
-  }
-}

package/src/styles/layers/tldraw.css

@@ -1,91 +0,0 @@
-@layer dx-components {
-
-  .tl-container.tl-theme__light {
-    /* Converted */
-    /* General */
-    --color-accent: var(--color-accent);
-    --color-background: var(--surface-bg); /* Main background. */
-
-    /* Panels *
-    --color-panel: theme(colors.neutral.50);
-    --color-divider: theme(colors.neutral.75); /* Separator light. */
-    --color-panel-contrast: var(--dx-separator);
-    --color-panel-overlay: rgba(255, 255, 255, 0.82);
-
-    /* Unmodified.
-    --color-brush-fill: rgba(144, 144, 144, 0.102);
-    --color-brush-stroke: rgba(144, 144, 144, 0.251);
-    --color-grid: rgba(144, 144, 144, 0.902);
-    --color-low: rgb(237, 240, 242);
-    --color-culled: rgb(235, 238, 240);
-    --color-muted-0: rgba(0, 0, 0, 0.02);
-    --color-muted-1: rgba(0, 0, 0, 0.1);
-    --color-muted-2: rgba(0, 0, 0, 0.035);
-    --color-hint: rgba(0, 0, 0, 0.055);
-    --color-overlay: rgba(0, 0, 0, 0.2);
-    --color-focus: #004094;
-    --color-selected: #2f80ed;
-    --color-selected-contrast: #ffffff;
-    --color-selection-fill: #1e90ff06;
-    --color-selection-stroke: #2f80ed;
-    --color-text-0: #1d1d1d;
-    --color-text-1: #2d2d2d;
-    --color-text-2: #5f6369;
-    --color-text-3: #b6b7ba;
-    --color-primary: #2f80ed;
-    --color-warn: #d10b0b;
-    --color-text: #000000;
-    --color-laser: #ff0000;
-    --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.22), 0px 1px 3px rgba(0, 0, 0, 0.09);
-    --shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 3px rgba(0, 0, 0, 0.24), 0px 2px 6px rgba(0, 0, 0, 0.1),
-      inset 0px 0px 0px 1px var(--color-panel-contrast);
-    --shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 2px 6px rgba(0, 0, 0, 0.14),
-      inset 0px 0px 0px 1px var(--color-panel-contrast);
-    --shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.16), 0px 5px 4px rgba(0, 0, 0, 0.16), 0px 2px 16px rgba(0, 0, 0, 0.06),
-      inset 0px 0px 0px 1px var(--color-panel-contrast);
-  */
-  }
-
-  .tl-container.tl-theme__dark {
-    /* Converted */
-    /* General */
-    --color-accent: var(--color-accent);
-    --color-background: var(--surface-bg);
-
-    /* Panels */
-    --color-divider: var(--dx-separator); /* Separator dark. */
-    --color-panel: var(--dx-attention);
-    --color-panel-contrast: var(--dx-separator);
-    --color-panel-overlay: rgba(54, 61, 68, 0.82);
-
-    /* Unmodified.
-    --color-brush-fill: rgba(180, 180, 180, 0.05);
-    --color-brush-stroke: rgba(180, 180, 180, 0.25);
-    --color-grid: #909090e6;
-    --color-low: #2c3136;
-    --color-culled: rgb(47, 52, 57);
-    --color-muted-0: rgba(255, 255, 255, 0.02);
-    --color-muted-1: rgba(255, 255, 255, 0.1);
-    --color-muted-2: rgba(255, 255, 255, 0.05);
-    --color-hint: rgba(255, 255, 255, 0.1);
-    --color-overlay: rgba(0, 0, 0, 0.35);
-    --color-focus: #a5c3f3;
-    --color-selected: #4285f4;
-    --color-selected-contrast: #ffffff;
-    --color-selection-fill: rgba(38, 150, 255, 0.05);
-    --color-selection-stroke: #2f80ed;
-    --color-text-0: #f0eded;
-    --color-text-1: #d9d9d9;
-    --color-text-2: #8e9094;
-    --color-text-3: #515a62;
-    --color-primary: #2f80ed;
-    --color-warn: #d10b0b;
-    --color-text: #f8f9fa;
-    --color-laser: #ff0000;
-    --shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038, inset 0px 0px 0px 1px var(--color-panel-contrast);
-    --shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055, inset 0px 0px 0px 1px var(--color-panel-contrast);
-    --shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22), inset 0px 0px 0px 1px var(--color-panel-contrast);
-    */
-  }
-
-}

package/src/styles/layers/tokens.css

@@ -1,47 +0,0 @@
-@layer dx-tokens {
-  @tokens dx;
-
-  :root {
-    /* Recitations */
-    --sticky-top: 0;
-
-    /* Lengths / sizes */
-    --rail-content: 3rem;
-    --rail-size: calc(var(--rail-content) + 1px);
-    --rail-action: calc(var(--rail-content) - 0.5rem + 1px);
-    --rail-item: calc(var(--rail-content) - 1rem);
-    --line-height: 32px;
-    --topbar-size: var(--rail-size);
-    --toolbar-size: var(--rail-content);
-    --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;
-    --l1-size: calc(var(--nav-sidebar-size) - var(--l0-size));
-    --r0-size: var(--rail-size);
-    --r1-size: calc(var(--complementary-sidebar-size) - var(--r0-size));
-    --text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
-  }
-
-  /* TODO(thure): Support arbitrary values (like for keywords e.g. `auto`, or font families) in @ch-ui/tokens */
-  :root {
-    --dx-calc-auto: auto;
-    --dx-calc-min: min-content;
-    --dx-calc-fit: fit-content;
-    --dx-calc-max: max-content;
-    --dx-calc-content: content;
-  }
-  @supports (block-size: calc-size(fit-content, size)) {
-    :root {
-      --dx-calc-auto: calc-size(auto, size);
-      --dx-calc-min: calc-size(min-content, size);
-      --dx-calc-fit: calc-size(fit-content, size);
-      --dx-calc-max: calc-size(max-content, size);
-      --dx-calc-content: calc-size(content, size);
-    }
-  }
-}

package/src/styles/primitives/container.ts

@@ -1,33 +0,0 @@
-//
-// 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

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

package/src/tailwind.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { tailwindConfig } from './config';
-
-export default tailwindConfig({ content: ['./src/**/*.{ts,tsx}'] });

package/src/theme.css

@@ -1,9 +0,0 @@
-/**
- * Main theme.
- */
-
-@import 'tailwindcss/base' layer(tw-base);
-@import 'tailwindcss/utilities';
-@import 'tailwindcss/components' layer(tw-components);
-
-@import './styles/layers/index.css';

package/src/types.ts

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