@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/src/{styles/layers → css/components}/focus-ring.css

@@ -1,24 +1,28 @@
-@layer utilities {
+/**
+ * Focus ring
+ */
+
+@layer dx-components {
   .dx-focus-ring,
   .dx-focus-ring-inset {
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus-visible {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
 
         &[data-variant='primary'] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -30,21 +34,21 @@
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
 
         &[data-variant='primary'] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -60,7 +64,7 @@
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -68,17 +72,17 @@
   .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
-    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
 
     &[data-variant='primary'] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-accent-focus-indicator)];
     }
 
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
 
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -86,17 +90,17 @@
   .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
-    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
 
     &[data-variant='primary'] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-accent-focus-indicator)];
     }
 
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
 
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -129,23 +133,23 @@
       }
 
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus-visible {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -162,30 +166,31 @@
       }
 
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
     }
   }
 
-  .dx-focus-ring-inset-over-all, .dx-focus-ring-inset-over-all-always {
+  .dx-focus-ring-inset-over-all,
+  .dx-focus-ring-inset-over-all-always {
     &:not([disabled]),
     &[disabled='false'] {
       &::after {
@@ -202,21 +207,21 @@
         inset: 0;
       }
 
-      @media screen(lg) {
-        &[data-sidebar-inline-start-state='expanded']::after {
-          inset-inline-start: var(--nav-sidebar-size);
+      @media (width >= theme(--breakpoint-lg)) {
+        &[data-sidebar-left-state='expanded']::after {
+          inset-inline-start: var(--dx-nav-sidebar-size);
         }
 
-        &[data-sidebar-inline-start-state='collapsed']::after {
-          inset-inline-start: var(--l0-size);
+        &[data-sidebar-left-state='collapsed']::after {
+          inset-inline-start: var(--dx-l0-size);
         }
 
-        &[data-sidebar-inline-end-state='expanded']::after {
-          inset-inline-end: var(--complementary-sidebar-size);
+        &[data-sidebar-right-state='expanded']::after {
+          inset-inline-end: var(--dx-complementary-sidebar-size);
         }
 
-        &[data-sidebar-inline-end-state='collapsed']::after {
-          inset-inline-end: var(--r0-size);
+        &[data-sidebar-right-state='collapsed']::after {
+          inset-inline-end: var(--dx-r0-size);
         }
       }
     }

package/src/css/components/link.css

@@ -0,0 +1,9 @@
+/**
+ * Link component styles.
+ */
+
+@layer dx-components {
+  .dx-link {
+    @apply text-accent-text hover:text-accent-text-hover;
+  }
+}

package/src/css/components/panel.css

@@ -0,0 +1,117 @@
+/**
+ * Panel — applies bg-{hue}-surface / text-{hue}-surface-text / border-{hue}-border tokens via data-hue attribute or BEM modifier.
+ * Example: <div className='dx-panel' data-hue='blue'>...</div>
+ * Example: <div className='dx-panel dx-panel--blue'>...</div>
+ */
+
+@layer dx-components {
+  .dx-panel[data-hue='neutral'],
+  .dx-panel--neutral {
+    @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
+  }
+
+  .dx-panel[data-hue='red'],
+  .dx-panel--red {
+    @apply bg-red-surface text-red-surface-text border-red-border;
+  }
+
+  .dx-panel[data-hue='orange'],
+  .dx-panel--orange {
+    @apply bg-orange-surface text-orange-surface-text border-orange-border;
+  }
+
+  .dx-panel[data-hue='amber'],
+  .dx-panel--amber {
+    @apply bg-amber-surface text-amber-surface-text border-amber-border;
+  }
+
+  .dx-panel[data-hue='yellow'],
+  .dx-panel--yellow {
+    @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
+  }
+
+  .dx-panel[data-hue='lime'],
+  .dx-panel--lime {
+    @apply bg-lime-surface text-lime-surface-text border-lime-border;
+  }
+
+  .dx-panel[data-hue='green'],
+  .dx-panel--green {
+    @apply bg-green-surface text-green-surface-text border-green-border;
+  }
+
+  .dx-panel[data-hue='emerald'],
+  .dx-panel--emerald {
+    @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
+  }
+
+  .dx-panel[data-hue='teal'],
+  .dx-panel--teal {
+    @apply bg-teal-surface text-teal-surface-text border-teal-border;
+  }
+
+  .dx-panel[data-hue='cyan'],
+  .dx-panel--cyan {
+    @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
+  }
+
+  .dx-panel[data-hue='sky'],
+  .dx-panel--sky {
+    @apply bg-sky-surface text-sky-surface-text border-sky-border;
+  }
+
+  .dx-panel[data-hue='blue'],
+  .dx-panel--blue {
+    @apply bg-blue-surface text-blue-surface-text border-blue-border;
+  }
+
+  .dx-panel[data-hue='indigo'],
+  .dx-panel--indigo {
+    @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
+  }
+
+  .dx-panel[data-hue='violet'],
+  .dx-panel--violet {
+    @apply bg-violet-surface text-violet-surface-text border-violet-border;
+  }
+
+  .dx-panel[data-hue='purple'],
+  .dx-panel--purple {
+    @apply bg-purple-surface text-purple-surface-text border-purple-border;
+  }
+
+  .dx-panel[data-hue='fuchsia'],
+  .dx-panel--fuchsia {
+    @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
+  }
+
+  .dx-panel[data-hue='pink'],
+  .dx-panel--pink {
+    @apply bg-pink-surface text-pink-surface-text border-pink-border;
+  }
+
+  .dx-panel[data-hue='rose'],
+  .dx-panel--rose {
+    @apply bg-rose-surface text-rose-surface-text border-rose-border;
+  }
+
+  .dx-panel[data-hue='info'],
+  .dx-panel--info {
+    @apply bg-info-surface text-info-surface-text border-info-border;
+  }
+
+  .dx-panel[data-hue='success'],
+  .dx-panel--success {
+    @apply bg-success-surface text-success-surface-text border-success-border;
+  }
+
+  .dx-panel[data-hue='warning'],
+  .dx-panel--warning {
+    @apply bg-warning-surface text-warning-surface-text border-warning-border;
+  }
+
+  .dx-panel[data-hue='error'],
+  .dx-panel--error {
+    @apply bg-error-surface text-error-surface-text border-error-border;
+  }
+}

package/src/css/components/scrollbar.css

@@ -0,0 +1,24 @@
+/**
+ * Scrolling 
+ * Pseudo-classes are not supported by Tailwind.
+ */
+
+@layer dx-components {
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-scrollbar-thumb-hover!;
+  }
+  ::-webkit-scrollbar-thumb:active {
+    @apply bg-scrollbar-thumb-active!;
+  }
+
+  .dx-scrollbar-thin::-webkit-scrollbar {
+    @apply w-[4px];
+  }
+  .dx-scrollbar-thin::-webkit-scrollbar-thumb {
+    @apply bg-transparent;
+    transition: background 0.15s;
+  }
+  .dx-scrollbar-thin:hover::-webkit-scrollbar-thumb {
+    @apply bg-scrollbar-thumb;
+  }
+}

package/src/css/components/surface.css

@@ -0,0 +1,34 @@
+/**
+ * Surfaces
+ */
+
+@layer dx-components {
+  .dx-base-surface {
+    @apply bg-base-surface text-base-surface-text;
+    --surface-bg: var(--color-base-surface);
+  }
+
+  .dx-sidebar-surface {
+    @apply bg-sidebar-surface text-base-surface-text;
+    --surface-bg: var(--color-sidebar-surface);
+  }
+
+  .dx-modal-surface {
+    @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
+    --surface-bg: var(--color-modal-surface);
+  }
+
+  .dx-attention-surface {
+    @apply bg-attention-surface text-base-surface-text;
+    --surface-bg: var(--color-attention-surface);
+  }
+}
+
+/* TODO(burdon): Resolve. */
+/* @layer dx-tokens {
+  .dx-sidebar-surface, .dx-modal-surface {
+    --color-hover-surface: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+    --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+    --color-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  }
+} */

package/src/css/components/tag.css

@@ -0,0 +1,130 @@
+/**
+ * Tag
+ */
+
+@layer dx-components {
+  .dx-tag {
+    @apply inline-block text-xs font-semibold m-0.5 px-1 rounded-sm cursor-default truncate;
+    padding-block: var(--spacing-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 -mx-[4px] px-[3px] py-0.5 border border-separator rounded-xs bg-group-surface transition-colors;
+
+    &:hover {
+      @apply bg-hover-surface;
+    }
+  }
+
+  .dx-tag[data-hue='neutral'],
+  .dx-tag--neutral {
+    @apply bg-neutral-surface text-neutral-surface-text;
+  }
+
+  .dx-tag[data-hue='red'],
+  .dx-tag--red {
+    @apply bg-red-surface text-red-surface-text;
+  }
+
+  .dx-tag[data-hue='orange'],
+  .dx-tag--orange {
+    @apply bg-orange-surface text-orange-surface-text;
+  }
+
+  .dx-tag[data-hue='amber'],
+  .dx-tag--amber {
+    @apply bg-amber-surface text-amber-surface-text;
+  }
+
+  .dx-tag[data-hue='yellow'],
+  .dx-tag--yellow {
+    @apply bg-yellow-surface text-yellow-surface-text;
+  }
+
+  .dx-tag[data-hue='lime'],
+  .dx-tag--lime {
+    @apply bg-lime-surface text-lime-surface-text;
+  }
+
+  .dx-tag[data-hue='green'],
+  .dx-tag--green {
+    @apply bg-green-surface text-green-surface-text;
+  }
+
+  .dx-tag[data-hue='emerald'],
+  .dx-tag--emerald {
+    @apply bg-emerald-surface text-emerald-surface-text;
+  }
+
+  .dx-tag[data-hue='teal'],
+  .dx-tag--teal {
+    @apply bg-teal-surface text-teal-surface-text;
+  }
+
+  .dx-tag[data-hue='cyan'],
+  .dx-tag--cyan {
+    @apply bg-cyan-surface text-cyan-surface-text;
+  }
+
+  .dx-tag[data-hue='sky'],
+  .dx-tag--sky {
+    @apply bg-sky-surface text-sky-surface-text;
+  }
+
+  .dx-tag[data-hue='blue'],
+  .dx-tag--blue {
+    @apply bg-blue-surface text-blue-surface-text;
+  }
+
+  .dx-tag[data-hue='indigo'],
+  .dx-tag--indigo {
+    @apply bg-indigo-surface text-indigo-surface-text;
+  }
+
+  .dx-tag[data-hue='violet'],
+  .dx-tag--violet {
+    @apply bg-violet-surface text-violet-surface-text;
+  }
+
+  .dx-tag[data-hue='purple'],
+  .dx-tag--purple {
+    @apply bg-purple-surface text-purple-surface-text;
+  }
+
+  .dx-tag[data-hue='fuchsia'],
+  .dx-tag--fuchsia {
+    @apply bg-fuchsia-surface text-fuchsia-surface-text;
+  }
+
+  .dx-tag[data-hue='pink'],
+  .dx-tag--pink {
+    @apply bg-pink-surface text-pink-surface-text;
+  }
+
+  .dx-tag[data-hue='rose'],
+  .dx-tag--rose {
+    @apply bg-rose-surface text-rose-surface-text;
+  }
+
+  .dx-tag[data-hue='info'],
+  .dx-tag--info {
+    @apply bg-cyan-surface text-cyan-surface-text;
+  }
+
+  .dx-tag[data-hue='success'],
+  .dx-tag--success {
+    @apply bg-emerald-surface text-emerald-surface-text;
+  }
+
+  .dx-tag[data-hue='warning'],
+  .dx-tag--warning {
+    @apply bg-amber-surface text-amber-surface-text;
+  }
+
+  .dx-tag[data-hue='error'],
+  .dx-tag--error {
+    @apply bg-rose-surface text-rose-surface-text;
+  }
+}

package/src/css/components/text.css

@@ -0,0 +1,124 @@
+/**
+ * Text
+ * Example: <span className='dx-text' data-hue={getHashHue(object.id)}>
+ */
+
+@layer dx-components {
+  /*
+   * System
+   */
+
+  .dx-text[data-hue='info'],
+  .dx-text--info {
+    @apply text-cyan-text;
+  }
+
+  .dx-text[data-hue='success'],
+  .dx-text--success {
+    @apply text-emerald-text;
+  }
+
+  .dx-text[data-hue='warning'],
+  .dx-text--warning {
+    @apply text-amber-text;
+  }
+
+  .dx-text[data-hue='error'],
+  .dx-text--error {
+    @apply text-rose-text;
+  }
+
+  /*
+   * Colors
+   */
+
+  .dx-text[data-hue='neutral'],
+  .dx-text--neutral {
+    @apply text-neutral-text;
+  }
+
+  .dx-text[data-hue='red'],
+  .dx-text--red {
+    @apply text-red-text;
+  }
+
+  .dx-text[data-hue='orange'],
+  .dx-text--orange {
+    @apply text-orange-text;
+  }
+
+  .dx-text[data-hue='amber'],
+  .dx-text--amber {
+    @apply text-amber-text;
+  }
+
+  .dx-text[data-hue='yellow'],
+  .dx-text--yellow {
+    @apply text-yellow-text;
+  }
+
+  .dx-text[data-hue='lime'],
+  .dx-text--lime {
+    @apply text-lime-text;
+  }
+
+  .dx-text[data-hue='green'],
+  .dx-text--green {
+    @apply text-green-text;
+  }
+
+  .dx-text[data-hue='emerald'],
+  .dx-text--emerald {
+    @apply text-emerald-text;
+  }
+
+  .dx-text[data-hue='teal'],
+  .dx-text--teal {
+    @apply text-teal-text;
+  }
+
+  .dx-text[data-hue='cyan'],
+  .dx-text--cyan {
+    @apply text-cyan-text;
+  }
+
+  .dx-text[data-hue='sky'],
+  .dx-text--sky {
+    @apply text-sky-text;
+  }
+
+  .dx-text[data-hue='blue'],
+  .dx-text--blue {
+    @apply text-blue-text;
+  }
+
+  .dx-text[data-hue='indigo'],
+  .dx-text--indigo {
+    @apply text-indigo-text;
+  }
+
+  .dx-text[data-hue='violet'],
+  .dx-text--violet {
+    @apply text-violet-text;
+  }
+
+  .dx-text[data-hue='purple'],
+  .dx-text--purple {
+    @apply text-purple-text;
+  }
+
+  .dx-text[data-hue='fuchsia'],
+  .dx-text--fuchsia {
+    @apply text-fuchsia-text;
+  }
+
+  .dx-text[data-hue='pink'],
+  .dx-text--pink {
+    @apply text-pink-text;
+  }
+
+  .dx-text[data-hue='rose'],
+  .dx-text--rose {
+    @apply text-rose-text;
+  }
+}

package/src/css/integrations/codemirror.css

@@ -0,0 +1,32 @@
+/**
+ * CodeMirror
+ * Uses @theme (not @layer) so Tailwind generates text-cm-* / bg-cm-* utility classes
+ * consumed by ui-editor. Compare: tldraw.css uses @layer to map tokens onto tldraw's
+ * own variables without generating utilities.
+ * TODO(burdon): This could move into the ui-editor package (similar to graph.css).
+ */
+
+@theme {
+  --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1);
+  --color-cm-active-line: light-dark(
+    oklch(from var(--color-neutral-200) l c h / 0.5),
+    oklch(from var(--color-neutral-800) l c h / 0.5)
+  );
+  --color-cm-separator: var(--color-blue-500);
+  --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  --color-cm-selection: light-dark(
+    oklch(from var(--color-blue-400) l c h / 0.5),
+    oklch(from var(--color-blue-600) l c h / 0.5)
+  );
+  --color-cm-focused-selection: light-dark(var(--color-blue-400), var(--color-blue-600));
+  --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800));
+  --color-cm-comment-text: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200));
+
+  /* Markdown syntax highlighting */
+  --color-cm-code: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  --color-cm-code-mark: var(--color-blue-500);
+  --color-cm-mark-opacity: 0.5;
+  --color-cm-heading: light-dark(var(--color-neutral-900), var(--color-neutral-400));
+}

package/src/css/integrations/tldraw.css

@@ -0,0 +1,13 @@
+/**
+ * Tldraw
+ */
+
+.tl-background {
+  --color-background: var(--color-base-surface);
+}
+.tl-container.tl-theme__light,
+.tl-container.tl-theme__dark {
+  --color-selected: var(--color-accent-surface);
+  --color-panel: var(--color-modal-surface);
+  --color-panel-contrast: var(--color-separator);
+}