@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/core/utils/textarea.ts

@@ -0,0 +1,15 @@
+/**
+ * Splice "\n" at the caret in a controlled textarea, then restore the caret
+ * position after React re-renders with the new value. Used for the modifier+Enter
+ * combos (Cmd/Ctrl/Alt+Enter) that browsers don't natively turn into a newline.
+ */
+export function insertNewlineAtCursor(textarea: HTMLTextAreaElement, onChange?: (text: string) => void): void {
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const value = textarea.value;
+    const next = `${value.slice(0, start)}\n${value.slice(end)}`;
+    onChange?.(next);
+    requestAnimationFrame(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+    });
+}

package/src/css/base.css

@@ -1,31 +1,31 @@
 @layer base {
-  * {
-    @apply border-border;
-    box-sizing: border-box;
-  }
+    * {
+        @apply border-border;
+        box-sizing: border-box;
+    }
 
-  html {
-    height: 100%;
-  }
+    html {
+        height: 100%;
+    }
 
-  body {
-    @apply bg-background text-foreground selection:bg-blue-300 selection:text-blue-900;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    scrollbar-color: var(--color-muted) var(--color-background);
-  }
+    body {
+        @apply bg-background text-foreground selection:bg-blue-300 selection:text-blue-900;
+        min-height: 100%;
+        margin: 0;
+        padding: 0;
+        scrollbar-color: var(--color-muted) var(--color-background);
+    }
 
-  #root {
-    height: 100%;
-  }
+    #root {
+        height: 100%;
+    }
 
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
 
-  .no-scrollbar {
-    -ms-overflow-style: none;   /* IE and Edge */
-    scrollbar-width: none;      /* Firefox */
-  }
+    .no-scrollbar {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
 }

package/src/css/color.css

@@ -1,136 +1,134 @@
 :root {
-  --background: oklch(1 0 0); /* White */
-  --foreground: oklch(0.145 0 0);
-
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --tooltips: oklch(97% 0.014 254.604); /* Light Blue */
-
-  --primary: oklch(44.72% 0.193316 261.0044); /* Dark Blue */
-  --primary-background: oklch(99.26% 0.0105 196.99); /* Light Blue */
-
-  --secondary: oklch(0.205 0 0);
-  --secondary-background: oklch(0.97 0 0);
-
-  --muted: oklch(0.556 0 0);
-  --muted-background: oklch(0.97 0 0);
-
-  --destructive: oklch(50.5% 0.213 27.518); /* Dark Red */
-  --destructive-background: oklch(97.1% 0.013 17.38); /* Light Red */
-
-  --success: oklch(52.7% 0.154 150.069); /* Dark Green */
-  --success-background: oklch(98.2% 0.018 155.826); /* Light Green */
-
-  --attention: oklch(55.48% 0.12708 62.5245); /* Dark Yellow */
-  --attention-background: oklch(98.7% 0.026 102.212); /* Light Yellow */
-
-  --done: oklch(49.6% 0.265 301.924); /* Dark Purple */
-  --done-background: oklch(97.7% 0.014 308.299); /* Light Purple */
-
-  --info: oklch(48.8% 0.243 264.376); /* Dark Blue */
-  --info-background: oklch(97% 0.014 254.604); /* Light Blue */
-
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-
-  --topnav-background: oklch(0.985 0 0);
-  --topnav-foreground: oklch(0.145 0 0);
-  --topnav-primary: oklch(0.205 0 0);
-  --topnav-primary-foreground: oklch(0.985 0 0);
-  --topnav-accent: oklch(0.97 0 0);
-  --topnav-accent-foreground: oklch(0.205 0 0);
-  --topnav-border: oklch(0.922 0 0);
-  --topnav-ring: oklch(0.708 0 0);
-
-  --preview: oklch(46.95% 0.233 303.17);
-  --staging: oklch(63.89% 0.103 201.59);
-  --development: oklch(44.30% 0.193 261.11);
-
+    --background: oklch(1 0 0); /* White */
+    --foreground: oklch(0.145 0 0);
+
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --tooltips: oklch(97% 0.014 254.604); /* Light Blue */
+
+    --primary: oklch(44.72% 0.193316 261.0044); /* Dark Blue */
+    --primary-background: oklch(99.26% 0.0105 196.99); /* Light Blue */
+
+    --secondary: oklch(0.205 0 0);
+    --secondary-background: oklch(0.97 0 0);
+
+    --muted: oklch(0.5 0 0);
+    --muted-background: oklch(0.97 0 0);
+
+    --destructive: oklch(50.5% 0.213 27.518); /* Dark Red */
+    --destructive-background: oklch(97.1% 0.013 17.38); /* Light Red */
+
+    --success: oklch(52.7% 0.154 150.069); /* Dark Green */
+    --success-background: oklch(98.2% 0.018 155.826); /* Light Green */
+
+    --attention: oklch(55.48% 0.12708 62.5245); /* Dark Yellow */
+    --attention-background: oklch(98.7% 0.026 102.212); /* Light Yellow */
+
+    --done: oklch(49.6% 0.265 301.924); /* Dark Purple */
+    --done-background: oklch(97.7% 0.014 308.299); /* Light Purple */
+
+    --info: oklch(48.8% 0.243 264.376); /* Dark Blue */
+    --info-background: oklch(97% 0.014 254.604); /* Light Blue */
+
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+
+    --topnav-background: oklch(0.985 0 0);
+    --topnav-foreground: oklch(0.145 0 0);
+    --topnav-primary: oklch(0.205 0 0);
+    --topnav-primary-foreground: oklch(0.985 0 0);
+    --topnav-accent: oklch(0.97 0 0);
+    --topnav-accent-foreground: oklch(0.205 0 0);
+    --topnav-border: oklch(0.922 0 0);
+    --topnav-ring: oklch(0.708 0 0);
+
+    --preprod: oklch(63.89% 0.103 201.59);
+    --preview: oklch(46.95% 0.233 303.17);
+    --development: oklch(44.30% 0.193 261.11);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-
-  --tooltips: oklch(70.7% 0.165 254.624); /* Mid Blue */
-
-  --primary: oklch(60.05% 0.1735 260.17); /* Mid Blue */
-  --primary-background: oklch(1 0 0); /* White */
-
-  --secondary: oklch(0.985 0 0);
-  --secondary-background: oklch(0.269 0 0);
-
-  --muted: oklch(0.708 0 0);
-  --muted-background: oklch(0.269 0 0); /* Dark Gray */
-
-  --destructive: oklch(70.4% 0.191 22.216); /* Mid Red */
-  --destructive-background: oklch(70.4% 0.191 22.216 / 0.2); /* Mid Red */
-
-  --success: oklch(79.2% 0.209 151.711); /* Mid Green */
-  --success-background: oklch(79.2% 0.209 151.711 / 0.2); /* Mid Green */
-
-  --attention: oklch(85.2% 0.199 91.936); /* Mid Yellow */
-  --attention-background: oklch(85.2% 0.199 91.936 / 0.2); /* Mid Yellow */
-
-  --done: oklch(71.4% 0.203 305.504); /* Mid Purple */
-  --done-background: oklch(71.4% 0.203 305.504 / 0.2); /* Mid Purple */
-
-  --info: oklch(70.7% 0.165 254.624); /* Mid Blue */
-  --info-background: oklch(70.7% 0.165 254.624 / 0.2); /* Mid Blue */
-
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-
-  --topnav-background: oklch(0.205 0 0);
-  --topnav-foreground: oklch(0.985 0 0);
-  --topnav-primary: oklch(0.488 0.243 264.376);
-  --topnav-primary-foreground: oklch(0.985 0 0);
-  --topnav-accent: oklch(0.269 0 0);
-  --topnav-accent-foreground: oklch(0.985 0 0);
-  --topnav-border: oklch(0.269 0 0);
-  --topnav-ring: oklch(0.439 0 0);
-
-  --preview: oklch(46.95% 0.233 303.17);
-  --staging: oklch(63.89% 0.103 201.59);
-  --development: oklch(44.30% 0.193 261.11);
-
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+
+    --tooltips: oklch(70.7% 0.165 254.624); /* Mid Blue */
+
+    --primary: oklch(54% 0.1735 260.17); /* Mid Blue (darkened to clear AA on white) */
+    --primary-background: oklch(1 0 0); /* White */
+
+    --secondary: oklch(0.985 0 0);
+    --secondary-background: oklch(0.269 0 0);
+
+    --muted: oklch(0.708 0 0);
+    --muted-background: oklch(0.269 0 0); /* Dark Gray */
+
+    --destructive: oklch(70.4% 0.191 22.216); /* Mid Red */
+    --destructive-background: oklch(70.4% 0.191 22.216 / 0.2); /* Mid Red */
+
+    --success: oklch(79.2% 0.209 151.711); /* Mid Green */
+    --success-background: oklch(79.2% 0.209 151.711 / 0.2); /* Mid Green */
+
+    --attention: oklch(85.2% 0.199 91.936); /* Mid Yellow */
+    --attention-background: oklch(85.2% 0.199 91.936 / 0.2); /* Mid Yellow */
+
+    --done: oklch(71.4% 0.203 305.504); /* Mid Purple */
+    --done-background: oklch(71.4% 0.203 305.504 / 0.2); /* Mid Purple */
+
+    --info: oklch(70.7% 0.165 254.624); /* Mid Blue */
+    --info-background: oklch(70.7% 0.165 254.624 / 0.2); /* Mid Blue */
+
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+
+    --topnav-background: oklch(0.205 0 0);
+    --topnav-foreground: oklch(0.985 0 0);
+    --topnav-primary: oklch(0.488 0.243 264.376);
+    --topnav-primary-foreground: oklch(0.985 0 0);
+    --topnav-accent: oklch(0.269 0 0);
+    --topnav-accent-foreground: oklch(0.985 0 0);
+    --topnav-border: oklch(0.269 0 0);
+    --topnav-ring: oklch(0.439 0 0);
+
+    --preprod: oklch(63.89% 0.103 201.59);
+    --preview: oklch(46.95% 0.233 303.17);
+    --development: oklch(44.30% 0.193 261.11);
 }

package/src/css/custom-tooltips.css

@@ -1,64 +1,71 @@
 /* Custom styling for title attribute tooltips */
-button[title], a[title] {
-  position: relative !important;
+button[title],
+a[title] {
+    position: relative;
 }
 
-button[title]::before, a[title]::before {
-  content: "";
-  display: none;
+button[title]::before,
+a[title]::before {
+    content: "";
+    display: none;
 }
 
-button[title]:hover::before, a[title]:hover::before {
-  content: attr(title);
-  display: block;
-  position: absolute;
-  top: -42px; /* Position tooltip above the element */
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 80px;
-  max-width: 200px;
-  padding: 6px 8px;
-  background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
-  color: white;
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-  line-height: 1.4;
-  border-radius: 4px;
-  white-space: nowrap;
-  z-index: 1000;
-  pointer-events: none;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(100, 116, 139, 0.2); /* slate-400 with opacity */
+button[title]:hover::before,
+a[title]:hover::before {
+    content: attr(title);
+    display: block;
+    position: absolute;
+    top: -42px; /* Position tooltip above the element */
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 80px;
+    max-width: 200px;
+    padding: 6px 8px;
+    background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 1.4;
+    border-radius: 4px;
+    white-space: nowrap;
+    z-index: 1000;
+    pointer-events: none;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(100, 116, 139, 0.2); /* slate-400 with opacity */
 }
 
 /* Arrow for the tooltip */
-button[title]:hover::after, a[title]:hover::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -6px; /* Position arrow at the bottom of tooltip */
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 6px;
-  border-style: solid;
-  border-color: transparent transparent rgba(15, 23, 42, 0.95) transparent; /* Arrow pointing down */
-  z-index: 1000;
+button[title]:hover::after,
+a[title]:hover::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -6px; /* Position arrow at the bottom of tooltip */
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 6px;
+    border-style: solid;
+    border-color: transparent transparent rgba(15, 23, 42, 0.95) transparent; /* Arrow pointing down */
+    z-index: 1000;
 }
 
 /* Light mode specific styles */
-button[title]:hover::before, a[title]:hover::before {
-  background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
-  color: rgba(248, 250, 252, 1); /* slate-50 */
+button[title]:hover::before,
+a[title]:hover::before {
+    background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
+    color: rgba(248, 250, 252, 1); /* slate-50 */
 }
 
 /* Dark mode adjustment */
-.dark button[title]:hover::before, .dark a[title]:hover::before {
-  background-color: rgba(30, 41, 59, 0.95); /* slate-800 with opacity */
-  color: rgba(248, 250, 252, 1); /* slate-50 */
-  border: 1px solid rgba(71, 85, 105, 0.4); /* slate-600 */
+.dark button[title]:hover::before,
+.dark a[title]:hover::before {
+    background-color: rgba(30, 41, 59, 0.95); /* slate-800 with opacity */
+    color: rgba(248, 250, 252, 1); /* slate-50 */
+    border: 1px solid rgba(71, 85, 105, 0.4); /* slate-600 */
 }
 
-.dark button[title]:hover::after, .dark a[title]:hover::after {
-  border-color: transparent transparent rgba(30, 41, 59, 0.95) transparent;
+.dark button[title]:hover::after,
+.dark a[title]:hover::after {
+    border-color: transparent transparent rgba(30, 41, 59, 0.95) transparent;
 }

package/src/css/theme.css

@@ -1,86 +1,84 @@
 @theme static {
-
-  --radius: 0.625rem;
-  --radius-xs: calc(var(--radius) - 8px);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-tooltips: var(--tooltips);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-
-  --color-link: var(--primary);
-  --color-link-foreground: var(--primary-foreground);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-background: var(--secondary-background);
-
-  --color-muted: var(--muted);
-  --color-muted-background: var(--muted-background);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-background: var(--destructive-background);
-
-  --color-success: var(--success);
-  --color-success-background: var(--success-background);
-
-  --color-attention: var(--attention);
-  --color-attention-background: var(--attention-background);
-
-  --color-done: var(--done);
-  --color-done-background: var(--done-background);
-
-  --color-info: var(--info);
-  --color-info-background: var(--info-background);
-
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --color-topnav: var(--topnav-background);
-  --color-topnav-foreground: var(--topnav-foreground);
-  --color-topnav-primary: var(--topnav-primary);
-  --color-topnav-primary-foreground: var(--topnav-primary-foreground);
-  --color-topnav-accent: var(--topnav-accent);
-  --color-topnav-accent-foreground: var(--topnav-accent-foreground);
-  --color-topnav-border: var(--topnav-border);
-  --color-topnav-ring: var(--topnav-ring);
-
-  --color-preview: var(--preview);
-  --color-staging: var(--staging);
-  --color-development: var(--development);
-
-  --font-sans:
-    Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono:
-    Fira mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
+    --radius: 0.625rem;
+    --radius-xs: calc(var(--radius) - 8px);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-tooltips: var(--tooltips);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-link: var(--primary);
+    --color-link-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-background: var(--secondary-background);
+
+    --color-muted: var(--muted);
+    --color-muted-background: var(--muted-background);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-background: var(--destructive-background);
+
+    --color-success: var(--success);
+    --color-success-background: var(--success-background);
+
+    --color-attention: var(--attention);
+    --color-attention-background: var(--attention-background);
+
+    --color-done: var(--done);
+    --color-done-background: var(--done-background);
+
+    --color-info: var(--info);
+    --color-info-background: var(--info-background);
+
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+
+    --color-topnav: var(--topnav-background);
+    --color-topnav-foreground: var(--topnav-foreground);
+    --color-topnav-primary: var(--topnav-primary);
+    --color-topnav-primary-foreground: var(--topnav-primary-foreground);
+    --color-topnav-accent: var(--topnav-accent);
+    --color-topnav-accent-foreground: var(--topnav-accent-foreground);
+    --color-topnav-border: var(--topnav-border);
+    --color-topnav-ring: var(--topnav-ring);
+
+    --color-preprod: var(--preprod);
+    --color-preview: var(--preview);
+    --color-development: var(--development);
+
+    --font-sans:
+        Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
+    --font-mono:
+        Fira mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }