@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-main.fcc0d83b33

package/src/css/theme/animation.css

@@ -0,0 +1,260 @@
+/**
+ * Animation
+ */
+
+@theme {
+  /* Transition timing function */
+  --ease-in-out-symmetric: cubic-bezier(0.5, 0, 0.5, 1);
+
+  /** 
+   * Fade
+   */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  --animate-fade-in: fade-in 200ms ease-out;
+  --animate-fade-out: fade-out 400ms ease-out;
+
+  /** 
+   * Popper/dialog slide 
+   */
+  @keyframes slide-down-and-fade {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+  }
+  @keyframes slide-left-and-fade {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes slide-up-and-fade {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slide-right-and-fade {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  --animate-slide-down-and-fade: slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-left-and-fade: slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-up-and-fade: slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-right-and-fade: slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  /** 
+   * Toast 
+   */
+  @keyframes toast-hide {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes toast-slide-in-right {
+    0% {
+      transform: translateX(calc(100% + 1rem));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  @keyframes toast-slide-in-bottom {
+    0% {
+      transform: translateY(calc(100% + 1rem));
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  @keyframes toast-swipe-out {
+    0% {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+    100% {
+      transform: translateX(calc(100% + 1rem));
+    }
+  }
+  --animate-toast-hide: toast-hide 100ms ease-in forwards;
+  --animate-toast-slide-in-right: toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-toast-slide-in-bottom: toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards;
+
+  /** 
+   * Accordion 
+   */
+  @keyframes slide-down {
+    from {
+      height: 0px;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes slide-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0px;
+    }
+  }
+  --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1);
+
+  /** 
+   * Shimmer 
+   */
+  @keyframes shimmer-loop {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  --animate-shimmer: shimmer-loop 2s infinite;
+
+  /** 
+   * Halo pulse 
+   */
+  @keyframes halo-pulse {
+    0% {
+      opacity: 0.3;
+    }
+    5% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.3;
+    }
+  }
+  --animate-halo-pulse: halo-pulse 2s ease-out infinite;
+
+  /** 
+   * Progress 
+   */
+  @keyframes progress-indeterminate {
+    0% {
+      left: 0;
+      width: 0%;
+    }
+    25% {
+      left: 25%;
+      width: 50%;
+    }
+    75% {
+      left: 50%;
+      width: 100%;
+    }
+    100% {
+      left: 100%;
+      width: 0%;
+    }
+  }
+  --animate-progress-indeterminate: progress-indeterminate 2s ease-out infinite;
+
+  /** 
+   * Border trail 
+   */
+  @keyframes trail {
+    to {
+      offset-distance: 100%;
+    }
+  }
+  @keyframes trail-offset {
+    0% {
+      offset-distance: 50%;
+    }
+    100% {
+      offset-distance: 150%;
+    }
+  }
+  --animate-trail: trail 6s linear infinite;
+  --animate-trail-offset: trail-offset 6s linear infinite;
+
+  /** 
+   * Spin 
+   */
+  --animate-spin-slow: spin 3s linear infinite;
+
+  /** 
+   * Blink 
+   */
+  @keyframes blink {
+    0%,
+    50%,
+    100% {
+      opacity: 1;
+    }
+    25%,
+    75% {
+      opacity: 0;
+    }
+  }
+  --animate-blink: blink 1s step-start infinite;
+}
+
+/**
+ * Shimmer (text)
+ * Sweeps a brighter band across text via mask alpha — preserves the consumer's color.
+ * Translates exactly one tile period (2× element width) per cycle so the loop seam is invisible.
+ */
+@keyframes shimmer-text {
+  from {
+    mask-position-x: 100%;
+    -webkit-mask-position-x: 100%;
+  }
+  to {
+    mask-position-x: -100%;
+    -webkit-mask-position-x: -100%;
+  }
+}
+
+/**
+ * Honor user reduced-motion preference for decorative animations.
+ * Functional transitions (fade/slide/toast/blink) are intentionally excluded —
+ * suppressing them would hide UI state changes.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .animate-halo-pulse,
+  .animate-spin-slow,
+  .animate-trail,
+  .animate-trail-offset,
+  .animate-shimmer {
+    animation: none;
+  }
+}

package/src/css/theme/border.css

@@ -0,0 +1,23 @@
+/**
+ * Border
+ */
+
+@theme {
+  /* Custom spacing/sizing values - for ring, ring-offset, border-width, etc. */
+  --ring-offset-width-focus-offset: var(--dx-focus-offset);
+  --ring-width-focus-line: var(--dx-focus-line);
+  --ring-width-hair-line: var(--dx-hair-line);
+  --ring-width-thick-line: var(--dx-thick-line);
+  --ring-width-no-line: var(--dx-no-line);
+  --border-width-landmark-line: var(--dx-landmark-line);
+
+  /* Border radius scale */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+
+  /* Box shadow */
+  --shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3);
+}

package/src/css/theme/palette.css

@@ -0,0 +1,36 @@
+/**
+ * Color theme tokens.
+ * https://tailwindcss.com/docs/colors
+ * 
+ * NOTE: The following are equivalent:
+ *   text-red-500
+ *   text-(--color-red-500)
+ *   text-[var(--color-red-500)]
+ */
+
+@theme {
+  --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%);
+  --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%);
+  --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%);
+  --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%);
+  --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%);
+  --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%);
+
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+
+  /* Composer logo colors */
+  --color-composer-100: rgb(5 40 61);
+  --color-composer-200: rgb(10 75 105);
+  --color-composer-300: rgb(1 122 183);
+  --color-composer-400: rgb(6 197 253);
+}

package/src/css/theme/semantic.css

@@ -0,0 +1,116 @@
+/**
+ * Tokens
+ */
+
+@theme {
+  /**
+   * Surfaces 
+   *
+   * TODO(burdon): Align suffix with styles.css?
+   * -xxx-surface
+   * -xxx-surface-text
+   */
+
+  --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+
+  --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-scrim-surface: light-dark(
+    oklch(from var(--color-neutral-50) l c h / 0.5),
+    oklch(from var(--color-neutral-950) l c h / 0.25)
+  );
+
+  --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925));
+  --color-card-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925));
+
+  --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+
+  --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /** TODO(burdon): current vs active vs selected */
+  --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /** TODO(burdon): Merge overlay/surface? */
+  --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
+  --color-attention-surface: var(--color-focus-surface);
+  --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3);
+  --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+
+  /* Highlight and Selected */
+
+  --color-highlight-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-highlight-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-highlight-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850));
+  --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-selected-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* Accent (primary) */
+  /* TODO(burdon): Rename primary */
+
+  --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700));
+  --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800));
+  --color-accent-surface-text: var(--color-blue-100);
+  --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400));
+  --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500));
+  --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600));
+
+  --color-un-accent: var(--color-neutral-400);
+  --color-un-accent-hover: var(--color-neutral-500);
+
+  /* Separator */
+
+  --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850));
+  --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700));
+  --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));
+
+  /* Scrollbar */
+
+  --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600));
+  --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
+
+  /* Sheet */
+
+  --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800));
+  --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+
+  /* Grid */
+
+  --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5);
+  --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600));
+  --color-grid-comment-active: light-dark(
+    oklch(from var(--color-green-400) l c h / 0.5),
+    oklch(from var(--color-green-600) l c h / 0.5)
+  );
+  --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1);
+  --color-grid-selection-overlay: var(--color-blue-500);
+  --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600));
+
+  /* Text */
+
+  --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+  --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500));
+  --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+}

package/src/css/theme/spacing.css

@@ -0,0 +1,147 @@
+/**
+ * Tokens
+ */
+
+/**
+ * Utility classes 
+ */
+@theme {
+  /** Minimum inset from the viewport edge for floating surfaces. */
+  --spacing-screen-border: 2rem;
+
+  --spacing-popover-default-width: 20rem;
+  --spacing-popover-min-width: 16rem;
+
+  --spacing-document-max-width: 50rem;
+  --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
+
+  --spacing-card-default-width: 20rem;
+  --spacing-card-min-width: 18rem;
+  --spacing-card-max-width: 22rem;
+  --spacing-card-min-height: 18rem;
+  --spacing-card-max-height: 30rem;
+
+  --spacing-tag-padding-block: 0.125rem;
+
+  --spacing-trim-xs: 0.25rem;
+  --spacing-trim-sm: 0.5rem;
+  --spacing-trim-md: 0.75rem;
+  --spacing-trim-lg: 1.5rem;
+
+  /** Minimal trim to allow for ring/outline. */
+  --spacing-form-chrome: var(--spacing-trim-xs);
+  --spacing-form-gap: var(--spacing-trim-sm);
+  --spacing-form-section-gap: var(--spacing-trim-lg);
+
+  /**
+   * Density: fine
+   */
+  --spacing-form-padding: var(--spacing-trim-sm);
+  --spacing-icon-button-padding: var(--spacing-trim-xs);
+  --spacing-scroll-padding: 4px;
+}
+
+@layer dx-tokens {
+  /**
+   * TODO(burdon): Density: coarse
+   */
+  /*
+  .dx-density-coarse {
+    --spacing-form-padding: var(--spacing-trim-md);
+    --spacing-icon-button-padding: var(--spacing-trim-sm);
+    --spacing-scroll-padding: 8px;
+  }
+  */
+}
+
+/**
+ * CSS variables.
+ */
+@layer dx-tokens {
+  :root {
+    --dx-line-0: 0px;
+    --dx-line-1: 1px;
+    --dx-line-2: 2px;
+
+    --dx-lacuna-12: 1.5rem;
+    --dx-lacuna-3: 0.375rem;
+    --dx-lacuna-4: 0.5rem;
+    --dx-lacuna-6: 0.75rem;
+
+    --dx-gutter-xs: 0.25rem; /* Input rings */
+    --dx-gutter-sm: 1rem;
+    --dx-gutter-md: 2rem; /* 32px (fine card) */
+    --dx-gutter-lg: 2.5rem; /* 40px (dialog, coarse card) */
+  }
+
+  :root {
+    --dx-hair-line: 1px;
+    --dx-landmark-line: 1px;
+    --dx-modal-line: 1px;
+    --dx-no-line: 0px;
+    --dx-thick-line: 2px;
+    --dx-focus-line: 2px;
+
+    --dx-no-line: var(--dx-line-0);
+    --dx-hair-line: var(--dx-line-1);
+    --dx-thick-line: var(--dx-line-2);
+
+    --dx-focus-offset: var(--dx-no-line);
+    --dx-focus-line: var(--dx-thick-line);
+    --dx-modal-line: var(--dx-hair-line);
+    --dx-grid-focus-indicator-width: var(--dx-hair-line);
+
+    --dx-input-fine: var(--dx-lacuna-3);
+    --dx-input-coarse: var(--dx-lacuna-4);
+
+    --dx-default-icons-size: 1rem; /* size=4 */
+  }
+
+  [data-grid-focus-indicator-variant='stack'] {
+    --dx-grid-focus-indicator-width: var(--dx-thick-line);
+  }
+
+  :root {
+    --dx-rail-content: 3rem;
+    /** TODO(burdon): Audit. */
+    /** TODO(burdon): Density (2 sizes). */
+    --dx-rail-size: calc(var(--dx-rail-content) + 1px);
+    --dx-rail-item: calc(var(--dx-rail-content) - 1rem);
+    /* TODO(burdon): Added 1px for border. */
+    /* TODO(burdon): Remove direct usage. */
+    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);
+
+    --dx-topbar-size: var(--dx-rail-size); /* 50px */
+    --dx-toolbar-size: var(--dx-rail-action); /* 40px */
+    --dx-statusbar-size: var(--dx-rail-item); /* 32px */
+
+    /** NOTE: Sidebar optimized to show plank + companion with sidebar open on 16" MBP. */
+    --dx-nav-sidebar-size: 350px;
+    --dx-complementary-sidebar-size: 25rem;
+    --dx-drawer-size: 50dvh;
+
+    --dx-l0-size: 72px;
+    --dx-l0-avatar-size: 3rem;
+    --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
+    --dx-r0-size: var(--dx-rail-size);
+    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
+  }
+
+  :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);
+    }
+  }
+}