@dxos/ui-theme 0.0.0 → 0.8.4-main.16b68245aa

package/src/css/components/tag.css

@@ -0,0 +1,132 @@
+/**
+ * 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-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
+    /** TODO(burdon): Configure secondary color. */
+    @apply bg-group-surface text-sky-surface-text border-sky-border;
+
+    &: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,34 @@
+/**
+ * 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).
+ */
+
+/** TODO(burdon): Move to ui-editor */
+@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-stone-600), var(--color-stone-400));
+  --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500));
+  --color-cm-code-mark: var(--color-blue-500);
+  --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400));
+}

package/src/css/integrations/tldraw.css

@@ -0,0 +1,14 @@
+/**
+ * Tldraw
+ */
+
+/** TODO(burdon): Move to 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);
+}

package/src/css/layout/main.css

@@ -0,0 +1,205 @@
+/**
+ * Main
+ */
+
+@layer dx-components {
+  /**
+   * Main Web app.
+   */
+  .dx-main-bounce-layout {
+    @apply fixed overflow-auto overscroll-auto;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    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;
+  }
+
+  /** TODO(burdon): Reconcile with dx-main-bounce-layout */
+  .dx-main-content-padding-transitions {
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
+  }
+
+  /**
+   *
+   */
+  .dx-main-intrinsic-size {
+    inline-size: calc(100dvw - 2 * var(--main-spacing));
+    transition-property: inline-size;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+
+    @media (width >= theme(--breakpoint-lg)) {
+      &[data-sidebar-left-state='closed'][data-sidebar-right-state='closed'] {
+        inline-size: calc(100dvw - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='closed'] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='closed'] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - 2 * var(--main-spacing));
+      }
+
+      &[data-sidebar-left-state='closed'][data-sidebar-right-state='collapsed'] {
+        inline-size: calc(100dvw - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='collapsed'] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='collapsed'] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+
+      &[data-sidebar-left-state='closed'][data-sidebar-right-state='expanded'] {
+        inline-size: calc(100dvw - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='expanded'] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='expanded'] {
+        inline-size: calc(
+          100dvw - var(--dx-nav-sidebar-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing)
+        );
+      }
+    }
+  }
+}
+
+@layer dx-components {
+  .dx-main-sidebar {
+    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @apply border-primary-separator rounded-md;
+    @apply backdrop-blur-md;
+    .dark & {
+      @apply backdrop-blur-lg;
+    }
+    background-color: var(--color-sidebar-surface);
+    --surface-bg: var(--color-sidebar-surface);
+
+    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 (width >= theme(--breakpoint-lg)) {
+      @apply top-0 bottom-0 rounded-none border-y-0;
+    }
+
+    &[data-resizing='false'] {
+      @apply duration-200;
+    }
+
+    &[data-side='is'] {
+      @apply -start-[100vw] border-e;
+      border-inline-end-width: var(--border-width-landmark-line) !important;
+      border-inline-end-style: solid;
+      z-index: 8;
+
+      &[data-state='expanded'] {
+        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
+        @media (width >= theme(--breakpoint-lg)) {
+          @apply start-0;
+        }
+      }
+
+      @media (width >= theme(--breakpoint-sm)) {
+        @apply w-(--dx-nav-sidebar-size);
+      }
+
+      @media (width >= theme(--breakpoint-lg)) {
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
+
+        &[data-state='collapsed'] {
+          @apply w-(--dx-l0-size) start-0;
+        }
+        &[data-state='expanded'] {
+          @apply w-(--dx-nav-sidebar-size);
+        }
+      }
+    }
+
+    &[data-side='ie'] {
+      @apply -end-[100vw] border-s;
+      border-inline-start-width: var(--border-width-landmark-line);
+      border-inline-start-style: solid;
+
+      &[data-state='expanded'] {
+        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
+        @media (width >= theme(--breakpoint-lg)) {
+          @apply end-0;
+        }
+      }
+
+      @media (width >= theme(--breakpoint-sm)) {
+        @apply w-(--dx-complementary-sidebar-size);
+      }
+
+      @media (width >= theme(--breakpoint-lg)) {
+        border-inline-end-width: 0;
+
+        &[data-state='collapsed'] {
+          @apply w-(--dx-r0-size) end-0;
+        }
+        &[data-state='expanded'] {
+          @apply w-(--dx-complementary-sidebar-size);
+        }
+      }
+    }
+  }
+
+  .dx-main-overlay {
+    @apply fixed inset-0 bg-scrim-surface;
+    transition-property: opacity;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @apply opacity-0 hidden;
+    z-index: 6;
+
+    &[data-state='open'] {
+      @apply opacity-100 block;
+
+      @media (width >= theme(--breakpoint-lg)) {
+        @apply opacity-100 hidden;
+      }
+    }
+  }
+
+  /**
+   * Main content padding.
+   */
+  .dx-main-content-padding {
+    padding-inline-start: 0;
+    scroll-padding-inline-start: 0;
+    padding-inline-end: 0;
+    scroll-padding-inline-end: 0;
+
+    @media (width >= theme(--breakpoint-lg)) {
+      &[data-sidebar-left-state='collapsed'] {
+        padding-inline-start: var(--dx-l0-size);
+        scroll-padding-inline-start: var(--dx-l0-size);
+      }
+      &[data-sidebar-left-state='expanded'] {
+        padding-inline-start: var(--dx-nav-sidebar-size);
+        scroll-padding-inline-start: var(--dx-nav-sidebar-size);
+      }
+
+      &[data-sidebar-right-state='collapsed'] {
+        padding-inline-end: var(--dx-r0-size);
+        scroll-padding-inline-end: var(--dx-r0-size);
+      }
+      &[data-sidebar-right-state='expanded'] {
+        padding-inline-end: var(--dx-complementary-sidebar-size);
+        scroll-padding-inline-end: var(--dx-complementary-sidebar-size);
+      }
+    }
+  }
+}

package/src/{styles/layers → css/layout}/native.css

@@ -1,20 +1,22 @@
-@layer utilities {
+/**
+ * Native app
+ */
 
+@layer dx-components {
   /**
    * Native app drag regions.
    * For Tauri apps, the data-tauri-drag-region attribute is applied
    * automatically by plugin-native (Tauri doesn't support -webkit-app-region).
    * The CSS properties below are for Electron/PWA compatibility.
    */
-  .app-drag {
+  .dx-app-drag {
     -webkit-user-select: none;
     -webkit-app-region: drag;
     --app-region: drag;
   }
 
-  .app-no-drag {
+  .dx-app-no-drag {
     -webkit-app-region: no-drag;
     --app-region: no-drag;
   }
-
 }

package/src/css/layout/positioning.css

@@ -0,0 +1,19 @@
+/**
+ * Positioning
+ */
+
+@layer dx-components {
+  .dx-contain-layout {
+    contain: layout;
+  }
+
+  .dx-sticky-top-0 {
+    --sticky-top: 0;
+  }
+  .dx-sticky-top-from-topbar-bottom {
+    --sticky-top: var(--dx-topbar-size);
+  }
+  .dx-sticky-bottom-from-statusbar-bottom {
+    --sticky-bottom: var(--dx-statusbar-size);
+  }
+}