@k2b/cloud 0.6.0-rc.0

package/src/styles/global.css

@@ -0,0 +1,268 @@
+@import "tailwindcss";
+@import "@k2b/ui/styles.css";
+@plugin "@tailwindcss/typography";
+
+/* global.css carries the Cloud shell, integration surfaces, and shared app
+   utilities. Portable UI primitives live in @k2b/ui. This stylesheet is
+   served to every container via the gateway; per-app classes belong in each
+   app's own app.css and must not be scanned here. */
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (html:not(.dark) &);
+
+/* IBM Plex font-face rules are emitted as `/public/fonts.css` during the core
+   build. Keeping them out of global.css avoids Bun inlining the font binaries
+   as base64 into the render-blocking stylesheet. */
+/* Tabler icon font rules are emitted as `/public/tabler-icons.css` during the
+   core build and preloaded by the shared HTML template to reduce icon flicker
+   without changing icon layout semantics. */
+
+@import "./tokens.css";
+@import "./utilities-buttons.css";
+@import "./utilities-layout.css";
+@import "./utilities-navigation.css";
+@import "./utilities-feedback.css";
+@import "./utilities-data.css";
+@import "./utilities-markdown-table.css";
+@import "./utilities-markdown-editor.css";
+@import "./base-popover.css";
+@import "./effects.css";
+@import "./input.css";
+
+@theme {
+  --color-dark: rgb(9 9 11);
+  --color-selection-bg: rgb(147 197 253 / 0.45);
+  --color-selection-fg: rgb(15 23 42);
+
+  /* Type system — IBM Plex family.
+     - Sans: default body / UI text (readable, neutral, slight personality)
+     - Mono: code, IDs, technical values (matches sans proportions)
+     - Condensed: badges, tags, dense labels where Sans is too wide
+
+     Tailwind 4 derives `font-sans` / `font-mono` / `font-condensed`
+     utilities from these tokens. CSS consumers can also reference them
+     via `var(--font-sans)` etc. (e.g. CodeMirror theme overrides). */
+  --font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
+}
+
+.cloud-app-canvas {
+  padding: var(--ui-space-shell);
+  background: linear-gradient(
+    var(--app-canvas-angle, 135deg),
+    color-mix(in srgb, var(--app-canvas-from, var(--color-zinc-50)) var(--app-canvas-strength, 0%), var(--color-zinc-50)),
+    color-mix(
+        in srgb,
+        var(--app-canvas-via, var(--app-canvas-from, var(--color-zinc-50))) var(--app-canvas-strength, 0%),
+        var(--color-zinc-50)
+      )
+      50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--color-zinc-50)) var(--app-canvas-strength, 0%), var(--color-zinc-50))
+  );
+}
+
+.cloud-app-canvas > :is(.layout-rail, .layout-shell-content) {
+  gap: var(--ui-space-shell);
+}
+
+/* The authenticated rail is part of the canvas. Keeping it transparent also
+   covers shell-only routes such as 404 pages that have no app workspace. */
+.cloud-app-canvas > .layout-rail {
+  width: calc(2.5rem + var(--ui-space-shell));
+  margin-inline-start: calc(-1 * var(--ui-space-shell));
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+.dark .cloud-app-canvas {
+  background: linear-gradient(
+    var(--app-canvas-angle, 135deg),
+    color-mix(in srgb, var(--app-canvas-from, var(--ui-canvas)) var(--app-canvas-dark-strength, 0%), var(--ui-canvas)),
+    color-mix(in srgb, var(--app-canvas-via-dark, var(--ui-canvas)) var(--app-canvas-dark-strength, 0%), var(--ui-canvas)) 50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--ui-canvas)) var(--app-canvas-dark-strength, 0%), var(--ui-canvas))
+  );
+}
+
+:root {
+  color-scheme: light;
+}
+
+* {
+  font-variant-ligatures: contextual;
+  font-family: var(--font-sans);
+  scrollbar-width: thin;
+  scrollbar-color: rgb(161 161 170 / 0.4) transparent;
+}
+
+.dark * {
+  scrollbar-color: rgb(82 82 91 / 0.5) transparent;
+}
+
+/* stdlib charts: make the SVG fill its wrapping element.
+   stdlib emits `<svg viewBox="0 0 W H">` without `width`/`height`
+   attributes, which would otherwise fall back to the browser's
+   replaced-element default (300×150) and either overflow tiny
+   containers or sit dwarfed inside wider ones. `display: block`
+   stops the inline-baseline gap; `width/height: 100%` lets the
+   container's CSS box drive the SVG size, and the `<Chart>`
+   wrapper passes the measured pixel dimensions back to stdlib so
+   the viewBox matches — no aspect distortion, no letterboxing. */
+.stdlib-chart {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:root .stdlib-chart {
+  --stdlib-chart-c1: #14b8a6;
+  --stdlib-chart-c2: #f97316;
+  --stdlib-chart-c3: #8b5cf6;
+  --stdlib-chart-c4: #ec4899;
+  --stdlib-chart-c5: #22c55e;
+  --stdlib-chart-c6: #eab308;
+  --stdlib-chart-c7: #06b6d4;
+  --stdlib-chart-c8: #ef4444;
+}
+
+/* stdlib charts — dark-mode overrides.
+
+   stdlib's embedded <style> hardcodes a light-mode `color: #1f2937`
+   on .stdlib-chart and `stroke: white` on slice/point/outlier
+   separators. The hardcoded color leaves axis labels / tick text
+   unreadable on a dark background, and white slice strokes look
+   harsh against zinc-950. We override BOTH from outside the SVG
+   with higher specificity (parent `.dark` selector beats the
+   embedded one-class rule).
+
+   Why specificity matters: stdlib's <style> lives INSIDE the SVG,
+   so its rules are part of the document. Both rule sets have one
+   class selector each (`.stdlib-chart`), and the embedded one is
+   parsed AFTER global.css — without raising specificity here, the
+   embedded rule would win and dark mode would stay broken. The
+   `.dark` parent on `<html>` (set by the platform's theme toggle)
+   bumps these rules to two classes, beating stdlib's one-class
+   embedded defaults cleanly. */
+.dark .stdlib-chart {
+  color: rgb(228 228 231); /* zinc-200 — readable on zinc-950 */
+}
+.dark .stdlib-chart .stdlib-chart-slice,
+.dark .stdlib-chart .stdlib-chart-point,
+.dark .stdlib-chart .stdlib-chart-box-outlier {
+  /* zinc-950 to match the dark page background, so slice / point
+     separators read as "gaps between segments" rather than visible
+     white lines against a dark surface. */
+  stroke: rgb(9 9 11);
+}
+
+/* stdlib charts — scientific data-viz refinement.
+
+   stdlib already renders the structure (gridlines, axes, ticks, flat
+   fills); the only thing missing for a precise "measurement" look is
+   the typography. Numeric axis ticks + bar values read as monospaced,
+   tabular figures so columns of numbers line up the way they do in a
+   plotting tool. Two-class selectors (`.stdlib-chart .stdlib-chart-…`)
+   beat stdlib's one-class embedded <style> the same way the dark-mode
+   overrides above do. font-family is otherwise unset by stdlib, so the
+   chart would inherit the app sans — we pin the numeric labels to the
+   platform mono stack (IBM Plex Mono via `/public/fonts.css`). */
+.stdlib-chart .stdlib-chart-tick-label,
+.stdlib-chart .stdlib-chart-bar-value,
+.stdlib-chart .stdlib-chart-axis-label {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.stdlib-chart a {
+  cursor: pointer;
+}
+
+.stdlib-chart a:hover .stdlib-chart-state-region,
+.stdlib-chart a:focus .stdlib-chart-state-region {
+  opacity: 0.8;
+  outline: none;
+}
+
+*::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 9999px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgb(161 161 170 / 0.35);
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgb(161 161 170 / 0.55);
+}
+
+.dark *::-webkit-scrollbar-thumb {
+  background: rgb(82 82 91 / 0.5);
+}
+
+.dark *::-webkit-scrollbar-thumb:hover {
+  background: rgb(82 82 91 / 0.7);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.multi-select-pill-strip {
+  scrollbar-width: thin;
+}
+
+body {
+  /* Explicit values — avoids @apply layer ordering issues with multiple CSS files */
+  background-color: rgb(250 250 250); /* zinc-50 */
+  color: rgb(24 24 27); /* zinc-900 */
+}
+
+.dark body {
+  background-color: rgb(9 9 11); /* zinc-950 */
+  color: rgb(244 244 245); /* zinc-100 */
+}
+
+.dark {
+  color-scheme: dark;
+  --color-selection-bg: rgb(59 130 246 / 0.5);
+  --color-selection-fg: rgb(239 246 255);
+}
+
+@view-transition {
+  navigation: auto;
+}
+
+::selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-fg);
+}
+
+::-moz-selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-fg);
+}
+
+/* SSR island wrappers should not break flex layout */
+solid-client,
+solid-island {
+  display: contents;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/styles/input.css

@@ -0,0 +1,58 @@
+/* Global Button Styling */
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+button[disabled],
+[role="button"][disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+/* Global Checkbox Styling */
+input[type="checkbox"] {
+  @apply appearance-none w-4 h-4 border cursor-pointer transition-all duration-200 inline-flex items-center justify-center m-0 align-middle rounded;
+  border-color: var(--ui-check-border);
+  background: var(--ui-check-surface);
+  box-shadow: var(--ui-check-shadow);
+}
+
+input[type="checkbox"]::before {
+  content: "\ea5e";
+  font-family: "tabler-icons";
+  @apply text-transparent text-xs leading-none transition-colors duration-200;
+}
+
+input[type="checkbox"]:checked {
+  @apply bg-blue-500 border-blue-500;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.35);
+}
+
+input[type="checkbox"]:checked::before {
+  @apply text-white;
+}
+
+input[type="checkbox"]:hover {
+  transform: var(--ui-check-hover-transform);
+}
+
+input[type="checkbox"]:focus {
+  @apply outline-none;
+}
+
+input[type="checkbox"]:focus-visible {
+  @apply focus-ui;
+}
+
+input[type="checkbox"]:disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+input[type="checkbox"]:disabled:hover {
+  transform: none;
+}

package/src/styles/tokens.css

@@ -0,0 +1,230 @@
+/* Theme tokens and core text utilities */
+:root {
+  /* Semantic UI roles. This is the single owner of production values; apps
+     and primitives consume roles instead of redefining visual foundations. */
+  --ui-canvas: var(--color-zinc-50);
+  --ui-surface: rgb(255 255 255 / 0.96);
+  --ui-surface-subtle: rgb(248 248 248 / 0.96);
+  --ui-surface-muted: rgb(243 244 243 / 0.96);
+  --ui-surface-raised: rgb(255 255 255 / 0.99);
+  --ui-border: rgb(218 220 219 / 0.68);
+  --ui-border-strong: rgb(207 210 208 / 0.9);
+  --ui-hover: rgb(239 240 239 / 0.9);
+  --ui-active: rgb(229 231 230 / 0.94);
+  --ui-selected: color-mix(in srgb, var(--color-blue-500) 7%, var(--ui-surface));
+  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
+  --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-500) 45%, transparent);
+  --ui-action-primary-surface: var(--color-zinc-900);
+  --ui-action-primary-hover: var(--color-black);
+  --ui-action-primary-active: var(--color-zinc-800);
+  --ui-action-primary-text: var(--color-white);
+  --ui-action-primary-border: transparent;
+  --ui-action-primary-hover-border: transparent;
+  --ui-field: var(--ui-surface-muted);
+  --ui-field-border: transparent;
+  --ui-field-hover: var(--ui-hover);
+  --ui-field-hover-border: var(--ui-border);
+  --ui-field-focus: var(--ui-surface);
+  --ui-field-focus-border: transparent;
+  --ui-divider: var(--ui-border);
+  --ui-control-recess: none;
+  /* A transparent no-op shadow keeps composite box-shadow lists valid. */
+  --ui-control-bevel: 0 0 0 transparent;
+  --ui-control-press: inset 0 1px 2px rgb(22 38 29 / 0.12);
+  --ui-check-surface: var(--ui-field);
+  --ui-check-border: var(--ui-border-strong);
+  --ui-check-shadow: none;
+  --ui-check-hover-transform: none;
+  --ui-data-header: var(--ui-surface-subtle);
+  --ui-data-divider: var(--ui-border);
+  --ui-data-row-divider: color-mix(in srgb, var(--ui-border) 72%, transparent);
+  --ui-data-row-hover: rgb(9 9 11 / 0.025);
+  --ui-data-row-selected: var(--ui-selected);
+  --ui-data-column-hover: rgb(9 9 11 / 0.012);
+  --ui-dialog-surface: var(--ui-surface-raised);
+  --ui-dialog-border: var(--ui-border-strong);
+  --ui-dialog-section: var(--ui-surface-subtle);
+  --ui-dialog-section-border: transparent;
+  --ui-dialog-section-icon: var(--ui-surface-muted);
+  --ui-dialog-radius: var(--ui-radius-frame);
+  /* Fallback for browsers without dynamic viewport units. The @supports
+     override below also accounts for notches and mobile browser chrome. */
+  --ui-dialog-available-height: calc(100vh - 1.5rem);
+  --ui-dialog-available-width: calc(100vw - 1.5rem);
+  --ui-context-menu-surface: var(--ui-surface-raised);
+  --ui-context-menu-radius: var(--ui-radius-surface);
+  --ui-context-menu-shadow: var(--ui-shadow-float);
+  --ui-dropdown-menu-surface: rgb(246 247 246 / 0.94);
+  --ui-dropdown-menu-radius: var(--ui-radius-surface);
+  --ui-dropdown-menu-shadow: var(--ui-shadow-float);
+  --ui-menu-hover: var(--ui-hover);
+  --ui-state-icon-surface: var(--ui-surface-muted);
+  --ui-state-icon-border: var(--ui-border);
+  --ui-state-error-icon-surface: color-mix(in srgb, var(--color-red-500) 8%, var(--ui-surface));
+  --ui-state-error-icon-border: color-mix(in srgb, var(--color-red-500) 18%, var(--ui-border));
+  --ui-progress-track: var(--ui-surface-muted);
+  --ui-progress-track-shadow: none;
+  --ui-progress-primary: var(--color-blue-500);
+  --ui-progress-success: var(--color-green-500);
+  --ui-progress-danger: var(--color-red-500);
+  --ui-tooltip-surface: var(--color-zinc-900);
+  --ui-tooltip-border: var(--color-zinc-800);
+  --ui-tooltip-text: var(--color-white);
+  --ui-tooltip-radius: var(--ui-radius-control);
+  --ui-tooltip-shadow: var(--ui-shadow-float);
+  --ui-segment-surface: var(--ui-surface-muted);
+  --ui-segment-border: transparent;
+  --ui-segment-shadow: none;
+  --ui-segment-divider: var(--ui-border);
+  --ui-segment-hover: var(--ui-hover);
+  --ui-segment-inactive-text: var(--color-zinc-600);
+  --ui-segment-hover-text: var(--color-zinc-900);
+  --ui-segment-active-surface: var(--ui-surface-raised);
+  --ui-segment-active-text: var(--color-zinc-900);
+  --ui-segment-active-shadow: 0 0 0 1px var(--ui-border);
+  --ui-segment-item-radius: var(--ui-radius-control);
+  --ui-segment-active-radius: var(--ui-radius-control);
+  --ui-pagination-hover: var(--ui-hover);
+  --ui-pagination-current-surface: var(--ui-selected);
+  --ui-pagination-current-border: transparent;
+  --ui-pagination-current-text: var(--color-blue-700);
+  --ui-radius-frame: 0.875rem;
+  --ui-radius-surface: 0.75rem;
+  --ui-radius-control: 0.5rem;
+  --ui-control-sm: 2rem;
+  --ui-control-md: 2.375rem;
+  --ui-input-padding-x: 0.5rem;
+  --ui-input-padding-y: 0.375rem;
+  --ui-space-shell: 0.5rem;
+  --ui-space-section: 0.75rem;
+  --ui-space-control: 0.375rem;
+  --ui-shadow-surface: none;
+  /* Mail is under active parallel development. Remove this one compatibility
+     alias when MailOverview migrates to --ui-shadow-surface. */
+  --theme-shadow-elevated: var(--ui-shadow-surface);
+  --ui-shadow-frame:
+    0 -3px 10px -8px rgb(15 23 19 / 0.16), 0 0 16px -9px rgb(15 23 19 / 0.16), 0 14px 36px -32px rgb(15 23 19 / 0.22),
+    0 1px 5px rgb(15 23 19 / 0.04);
+  --ui-shadow-float: 0 18px 46px -18px rgb(0 0 0 / 0.22), 0 5px 16px rgb(0 0 0 / 0.08);
+  --ui-shadow-hover: 0 12px 28px -24px rgb(22 38 29 / 0.28), 0 3px 12px rgb(22 38 29 / 0.06);
+  --ui-shadow-workspace-edge: -3px 0 6px -5px rgb(0 0 0 / 0.1), 3px 0 6px -5px rgb(0 0 0 / 0.1);
+  --ui-paper-highlighted: var(--ui-surface-subtle);
+}
+
+@supports (height: 100dvh) and (width: 100dvw) {
+  :root {
+    --ui-dialog-available-height: calc(
+      100dvh -
+      max(0.75rem, env(safe-area-inset-top, 0px)) -
+      max(0.75rem, env(safe-area-inset-bottom, 0px))
+    );
+    --ui-dialog-available-width: calc(
+      100dvw -
+      max(0.75rem, env(safe-area-inset-left, 0px)) -
+      max(0.75rem, env(safe-area-inset-right, 0px))
+    );
+  }
+}
+
+.dark {
+  /* Mirror the portable UI ink hierarchy through Cloud-owned roles. Keeping
+     the two namespaces explicit preserves their package ownership boundary. */
+  --ui-canvas: #090d12;
+  --ui-surface: #11151b;
+  --ui-surface-subtle: color-mix(in srgb, var(--ui-surface) 68%, var(--ui-surface-muted));
+  --ui-surface-muted: #20242a;
+  --ui-surface-raised: #181d24;
+  --ui-border: #29313a;
+  --ui-border-strong: #3a4552;
+  --ui-hover: #252c35;
+  --ui-active: color-mix(in srgb, var(--ui-hover) 72%, var(--ui-border-strong));
+  --ui-selected: color-mix(in srgb, var(--color-blue-400) 12%, var(--ui-surface));
+  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-400) 55%, transparent);
+  --ui-action-primary-surface: var(--color-zinc-100);
+  --ui-action-primary-hover: var(--color-white);
+  --ui-action-primary-active: var(--color-zinc-200);
+  --ui-action-primary-text: var(--color-zinc-950);
+  --ui-action-primary-border: transparent;
+  --ui-action-primary-hover-border: transparent;
+  --ui-field: var(--ui-surface-muted);
+  --ui-field-border: transparent;
+  --ui-field-hover: var(--ui-hover);
+  --ui-field-hover-border: var(--ui-border);
+  --ui-field-focus: var(--ui-surface);
+  --ui-field-focus-border: transparent;
+  --ui-divider: var(--ui-border);
+  --ui-control-recess: none;
+  --ui-control-press: inset 0 1px 3px rgb(0 0 0 / 0.48);
+  --ui-check-surface: var(--ui-field);
+  --ui-check-border: var(--ui-border-strong);
+  --ui-check-shadow: none;
+  --ui-check-hover-transform: none;
+  --ui-data-row-hover: rgb(255 255 255 / 0.045);
+  --ui-data-column-hover: rgb(255 255 255 / 0.018);
+  --ui-dropdown-menu-surface: var(--ui-surface-raised);
+  --ui-progress-primary: var(--color-blue-400);
+  --ui-progress-success: var(--color-green-400);
+  --ui-progress-danger: var(--color-red-400);
+  --ui-tooltip-surface: var(--ui-surface-muted);
+  --ui-tooltip-border: var(--ui-border-strong);
+  --ui-tooltip-text: var(--color-zinc-100);
+  --ui-segment-inactive-text: var(--color-zinc-400);
+  --ui-segment-hover-text: var(--color-zinc-200);
+  --ui-segment-active-text: var(--color-zinc-100);
+  --ui-pagination-current-text: var(--color-blue-200);
+  --ui-shadow-surface: none;
+  --ui-shadow-frame:
+    inset 0 0 0 1px var(--ui-border), 0 -3px 10px -8px rgb(0 0 0 / 0.32), 0 0 16px -9px rgb(0 0 0 / 0.56),
+    0 16px 40px -30px rgb(0 0 0 / 0.48), 0 1px 7px rgb(0 0 0 / 0.14);
+  --ui-shadow-float: 0 22px 54px -18px rgb(0 0 0 / 0.72), 0 6px 18px rgb(0 0 0 / 0.3);
+  --ui-shadow-hover: 0 14px 32px -24px rgb(0 0 0 / 0.8), 0 3px 12px rgb(0 0 0 / 0.22);
+  --ui-shadow-workspace-edge: -3px 0 6px -5px rgb(0 0 0 / 0.28), 3px 0 6px -5px rgb(0 0 0 / 0.28);
+}
+
+/* App appearance is applied on the canvas rather than :root. Recompute the
+   derived accent roles here so an app never inherits the platform fallback. */
+.cloud-app-canvas,
+.app-accent-scope {
+  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
+  /* Portable UI components consume their own optional hook; Cloud alone maps
+     it to the active app appearance. */
+  --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-detail-panel-accent: var(--ui-app-accent-text);
+}
+
+.dark :is(.cloud-app-canvas, .app-accent-scope) {
+  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-detail-panel-accent: var(--ui-app-accent-text);
+}
+
+@utility slider-track-colors {
+  --slider-fill: var(--color-blue-500);
+  --slider-track: var(--ui-field);
+}
+
+.dark .slider-track-colors,
+.dark.slider-track-colors {
+  --slider-fill: var(--color-blue-400);
+}
+
+@utility text-primary {
+  @apply text-zinc-900 dark:text-zinc-100;
+}
+
+@utility text-secondary {
+  @apply text-zinc-700 dark:text-zinc-300;
+}
+
+@utility text-dimmed {
+  @apply text-zinc-500 dark:text-zinc-500;
+}
+
+@utility text-label {
+  @apply text-sm font-medium text-zinc-700 dark:text-zinc-300;
+}