@keboola/design 6.5.0 → 8.0.0

package/src/styles.css

@@ -1,84 +1,104 @@
-/* react-day-picker structural CSS (the `.rdp-*` grid/layout). Imported here so
- * it is inlined into the compiled `dist/styles.css` by postcss-import, keeping
- * the JS entry free of a bare `.css` side-effect import (which breaks plain
- * Node/Vitest ESM resolution). Consumers get it via `@keboola/design/styles`. */
+/* Tailwind v4, CSS-first. We import `theme` + `utilities` only (NOT the bundled
+ * `tailwindcss`), so no *global* preflight is emitted — the scoped-preflight
+ * @plugin below injects the reset confined to `.tailwindcss-preflight` instead.
+ * The `tw` prefix is declared here (v4 variant-style: `tw:flex`). */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw);
+/* Animation utilities — v4 successor to `tailwindcss-animate`. Imported without a
+ * `layer()` wrapper: it declares `@utility` rules, which cannot be nested in a layer. */
+@import 'tw-animate-css' prefix(tw);
+/* react-day-picker structural CSS (the `.rdp-*` grid/layout). v4 inlines this
+ * `@import` natively (no postcss-import). Consumers get it via `@keboola/design/styles`. */
 @import 'react-day-picker/src/style.css';
-
-@tailwind base;
-@tailwind utilities;
-@tailwind components;
+@import './theme.css';
+
+/* Tokens, the (extended) theme, typography + our custom variants/utilities stay
+ * in JS, loaded via v4's `@config` bridge — this keeps `colors.ts` and the
+ * ThemeProvider/brand runtime-swap model unchanged (channel triples consumed as
+ * `rgb(var(--*) / <alpha>)`). */
+@config '../tailwind.config.js';
+
+/* Scoped, opt-in preflight — the v4 replacement for v3's
+ * `corePlugins.preflight:false` + `isolateInsideOfContainer`. The reset applies
+ * only inside `.tailwindcss-preflight` (and descendants), so host apps with
+ * their own global CSS (e.g. kbc-ui's Bootstrap) are left untouched. */
+@plugin 'tailwindcss-scoped-preflight' {
+  isolation-strategy: inside;
+  selector: '.tailwindcss-preflight';
+}
 
 /*
- * Semantic color tokens — read by Tailwind via rgb(var(--color-*) / <alpha-value>) in
+ * Semantic color tokens — read by Tailwind via rgb(var(--*) / <alpha-value>) in
  * packages/tailwind-config/colors.ts. Channel values are stored as space-separated RGB so
  * Tailwind opacity modifiers (e.g. `tw-bg-muted/50`) resolve correctly.
  * Primitive scales (neutral-*, primary-*, error-*, warning-*, etc.) remain hardcoded in colors.ts.
  */
 :root {
   /* Card — raised container chrome (Modal/Card/Sheet). */
-  --color-card: 255 255 255; /* #ffffff */
-  --color-card-foreground: 30 41 59; /* #1e293b */
-  --color-background: 249 250 251; /* #f9fafb */
-  --color-foreground: 30 41 59; /* #1e293b */
+  --card: 255 255 255; /* #ffffff */
+  --card-foreground: 30 41 59; /* #1e293b */
+  --background: 249 250 251; /* #f9fafb */
+  --foreground: 30 41 59; /* #1e293b */
 
   /* Primary — Keboola blue, AA-tuned to blue-600 (5.17:1 white-on-fill) for
      interactive labels. The dark block keeps the lighter blue-500. */
-  --color-primary: 37 99 235; /* #2563eb */
-  --color-primary-foreground: 255 255 255; /* #ffffff */
+  --primary: 37 99 235; /* #2563eb */
+  --primary-foreground: 255 255 255; /* #ffffff */
 
   /* Secondary */
-  --color-secondary: 226 232 240; /* #e2e8f0 */
-  --color-secondary-foreground: 30 41 59; /* #1e293b */
+  --secondary: 226 232 240; /* #e2e8f0 */
+  --secondary-foreground: 30 41 59; /* #1e293b */
 
   /* Popover */
-  --color-popover: 255 255 255; /* #ffffff */
-  --color-popover-foreground: 30 41 59; /* #1e293b */
+  --popover: 255 255 255; /* #ffffff */
+  --popover-foreground: 30 41 59; /* #1e293b */
 
   /* Accent */
-  --color-accent: 224 242 254; /* #e0f2fe */
-  --color-accent-foreground: 13 65 127; /* #0d417f */
+  --accent: 224 242 254; /* #e0f2fe */
+  --accent-foreground: 13 65 127; /* #0d417f */
 
   /* Border / Input / Ring */
-  --color-border: 229 231 235; /* #e5e7eb */
-  --color-input: 203 213 225; /* #cbd5e1 */
-  --color-ring: var(--color-primary); /* follows brand primary (default #2563eb) */
-  --color-ring-offset: 255 255 255; /* #ffffff — focus-ring offset gap */
+  --border: 229 231 235; /* #e5e7eb */
+  --input: 203 213 225; /* #cbd5e1 */
+  --ring: var(--primary); /* follows brand primary (default #2563eb) */
+  --ring-offset: 255 255 255; /* #ffffff — focus-ring offset gap */
 
   /* Chart — categorical palette (brand-derived, mutually distinct). */
-  --color-chart-1: 31 143 255; /* #1f8fff */
-  --color-chart-2: 0 194 135; /* #00c287 */
-  --color-chart-3: 146 92 255; /* #925cff */
-  --color-chart-4: 245 147 0; /* #f59300 */
-  --color-chart-5: 237 94 223; /* #ed5edf */
+  --chart-1: 31 143 255; /* #1f8fff */
+  --chart-2: 0 194 135; /* #00c287 */
+  --chart-3: 146 92 255; /* #925cff */
+  --chart-4: 245 147 0; /* #f59300 */
+  --chart-5: 237 94 223; /* #ed5edf */
 
   /* Status — themeable semantic tokens; defaults ship AA-legible as text/icon on their own tint. */
-  --color-destructive: 220 38 38; /* #dc2626 */
-  --color-destructive-foreground: 255 255 255; /* #ffffff */
-  --color-success: 24 122 76; /* #187a4c — AA-legible (≥4.5:1) as text/icon on its tint */
-  --color-success-foreground: 255 255 255; /* #ffffff */
-  --color-warning: 138 82 16; /* #8a5210 — AA-legible as text/icon on its tint */
-  --color-warning-foreground: 255 255 255; /* #ffffff — token is now dark, so solid fills take white text */
-  --color-info: 22 104 196; /* #1668c4 — AA-legible as text/icon on its tint (decoupled from brand blue) */
-  --color-info-foreground: 255 255 255; /* #ffffff */
+  --destructive: 220 38 38; /* #dc2626 */
+  --destructive-foreground: 255 255 255; /* #ffffff */
+  --success: 24 122 76; /* #187a4c — AA-legible (≥4.5:1) as text/icon on its tint */
+  --success-foreground: 255 255 255; /* #ffffff */
+  --warning: 138 82 16; /* #8a5210 — AA-legible as text/icon on its tint */
+  --warning-foreground: 255 255 255; /* #ffffff — token is now dark, so solid fills take white text */
+  --info: 22 104 196; /* #1668c4 — AA-legible as text/icon on its tint (decoupled from brand blue) */
+  --info-foreground: 255 255 255; /* #ffffff */
 
   /* Muted */
-  --color-muted: 241 245 249; /* #f1f5f9 */
-  --color-muted-foreground: 100 116 139; /* #64748b */
+  --muted: 241 245 249; /* #f1f5f9 */
+  --muted-foreground: 100 116 139; /* #64748b */
 
   /* Skeleton placeholder fill — a touch darker than `muted` so the loading
      block stays perceptible on white cards / off-white background (muted is
      too close to both), and the shimmer highlight reads against it. */
-  --color-skeleton: 219 225 235; /* #dbe1eb */
+  --skeleton: 219 225 235; /* #dbe1eb */
 
   /* Sidebar */
-  --color-sidebar: 255 255 255; /* #ffffff */
-  --color-sidebar-foreground: 30 41 59; /* #1e293b */
-  --color-sidebar-primary: var(--color-primary); /* follows brand primary (default #2563eb) */
-  --color-sidebar-primary-foreground: 255 255 255; /* #ffffff */
-  --color-sidebar-accent: 219 234 254; /* #dbeafe */
-  --color-sidebar-accent-foreground: 30 41 59; /* #1e293b */
-  --color-sidebar-border: 229 231 235; /* #e5e7eb */
-  --color-sidebar-ring: var(--color-primary); /* follows brand primary (default #2563eb) */
+  --sidebar: 255 255 255; /* #ffffff */
+  --sidebar-foreground: 30 41 59; /* #1e293b */
+  --sidebar-primary: var(--primary); /* follows brand primary (default #2563eb) */
+  --sidebar-primary-foreground: 255 255 255; /* #ffffff */
+  --sidebar-accent: 219 234 254; /* #dbeafe */
+  --sidebar-accent-foreground: 30 41 59; /* #1e293b */
+  --sidebar-border: 229 231 235; /* #e5e7eb */
+  --sidebar-ring: var(--primary); /* follows brand primary (default #2563eb) */
 
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
@@ -149,75 +169,75 @@
   /* Brand gradient — defaults to a primary→accent sweep; override via `theme.gradient`. */
   --gradient-brand: linear-gradient(
     135deg,
-    rgb(var(--color-primary)),
-    rgb(var(--color-accent, var(--color-primary)))
+    rgb(var(--primary)),
+    rgb(var(--accent, var(--primary)))
   );
 }
 
 /* Dark mode (Graphite) — Keboola-blue accent, not reachable until the theme toggle ships. */
 [data-theme='dark'] {
   /* Card — raised container chrome (Modal/Card/Sheet), lifted off background. */
-  --color-card: 34 34 40; /* #222228 */
-  --color-card-foreground: 229 230 236; /* #e5e6ec */
-  --color-background: 19 19 23; /* #131317 */
-  --color-foreground: 229 230 236; /* #e5e6ec */
+  --card: 34 34 40; /* #222228 */
+  --card-foreground: 229 230 236; /* #e5e6ec */
+  --background: 19 19 23; /* #131317 */
+  --foreground: 229 230 236; /* #e5e6ec */
 
   /* Primary — Keboola blue (kept consistent across themes). */
-  --color-primary: 31 143 255; /* #1f8fff */
-  --color-primary-foreground: 255 255 255; /* #ffffff */
+  --primary: 31 143 255; /* #1f8fff */
+  --primary-foreground: 255 255 255; /* #ffffff */
 
   /* Secondary */
-  --color-secondary: 47 48 55; /* #2f3037 */
-  --color-secondary-foreground: 229 230 236; /* #e5e6ec */
+  --secondary: 47 48 55; /* #2f3037 */
+  --secondary-foreground: 229 230 236; /* #e5e6ec */
 
   /* Popover */
-  --color-popover: 38 38 45; /* #26262d */
-  --color-popover-foreground: 229 230 236; /* #e5e6ec */
+  --popover: 38 38 45; /* #26262d */
+  --popover-foreground: 229 230 236; /* #e5e6ec */
 
   /* Accent */
-  --color-accent: 30 58 95; /* #1e3a5f */
-  --color-accent-foreground: 147 197 253; /* #93c5fd */
+  --accent: 30 58 95; /* #1e3a5f */
+  --accent-foreground: 147 197 253; /* #93c5fd */
 
   /* Border / Input / Ring */
-  --color-border: 52 53 62; /* #34353e */
-  --color-input: 60 61 71; /* #3c3d47 */
-  --color-ring: var(--color-primary); /* follows brand primary (default #1f8fff) */
-  --color-ring-offset: 19 19 23; /* #131317 — focus-ring offset gap (dark background) */
+  --border: 52 53 62; /* #34353e */
+  --input: 60 61 71; /* #3c3d47 */
+  --ring: var(--primary); /* follows brand primary (default #1f8fff) */
+  --ring-offset: 19 19 23; /* #131317 — focus-ring offset gap (dark background) */
 
   /* Chart — categorical palette (brand-derived, lightened for dark surfaces). */
-  --color-chart-1: 92 173 255; /* #5cadff */
-  --color-chart-2: 0 230 161; /* #00e6a1 */
-  --color-chart-3: 173 133 255; /* #ad85ff */
-  --color-chart-4: 255 190 92; /* #ffbe5c */
-  --color-chart-5: 242 140 232; /* #f28ce8 */
+  --chart-1: 92 173 255; /* #5cadff */
+  --chart-2: 0 230 161; /* #00e6a1 */
+  --chart-3: 173 133 255; /* #ad85ff */
+  --chart-4: 255 190 92; /* #ffbe5c */
+  --chart-5: 242 140 232; /* #f28ce8 */
 
   /* Status — themeable semantic tokens, tuned lighter for dark surfaces. */
-  --color-destructive: 229 72 77; /* #e5484d */
-  --color-destructive-foreground: 255 255 255; /* #ffffff */
-  --color-success: 62 207 127; /* #3ecf7f */
-  --color-success-foreground: 255 255 255; /* #ffffff */
-  --color-warning: 255 190 92; /* #ffbe5c */
-  --color-warning-foreground: 26 18 5; /* #1a1205 — dark text for legibility on amber */
-  --color-info: 92 173 255; /* #5cadff */
-  --color-info-foreground: 255 255 255; /* #ffffff */
+  --destructive: 229 72 77; /* #e5484d */
+  --destructive-foreground: 255 255 255; /* #ffffff */
+  --success: 62 207 127; /* #3ecf7f */
+  --success-foreground: 255 255 255; /* #ffffff */
+  --warning: 255 190 92; /* #ffbe5c */
+  --warning-foreground: 26 18 5; /* #1a1205 — dark text for legibility on amber */
+  --info: 92 173 255; /* #5cadff */
+  --info-foreground: 255 255 255; /* #ffffff */
 
   /* Muted */
-  --color-muted: 38 38 45; /* #26262d */
-  --color-muted-foreground: 141 144 153; /* #8d9099 */
+  --muted: 38 38 45; /* #26262d */
+  --muted-foreground: 141 144 153; /* #8d9099 */
 
   /* Skeleton — lighter than `muted` so it stays visible on both the dark
      background and the (lighter) card surface. */
-  --color-skeleton: 52 53 62; /* #34353e */
+  --skeleton: 52 53 62; /* #34353e */
 
   /* Sidebar */
-  --color-sidebar: 14 14 18; /* #0e0e12 */
-  --color-sidebar-foreground: 229 230 236; /* #e5e6ec */
-  --color-sidebar-primary: var(--color-primary); /* follows brand primary (default #1f8fff) */
-  --color-sidebar-primary-foreground: 255 255 255; /* #ffffff */
-  --color-sidebar-accent: 38 38 45; /* #26262d */
-  --color-sidebar-accent-foreground: 229 230 236; /* #e5e6ec */
-  --color-sidebar-border: 48 49 57; /* #303139 */
-  --color-sidebar-ring: var(--color-primary); /* follows brand primary (default #1f8fff) */
+  --sidebar: 14 14 18; /* #0e0e12 */
+  --sidebar-foreground: 229 230 236; /* #e5e6ec */
+  --sidebar-primary: var(--primary); /* follows brand primary (default #1f8fff) */
+  --sidebar-primary-foreground: 255 255 255; /* #ffffff */
+  --sidebar-accent: 38 38 45; /* #26262d */
+  --sidebar-accent-foreground: 229 230 236; /* #e5e6ec */
+  --sidebar-border: 48 49 57; /* #303139 */
+  --sidebar-ring: var(--primary); /* follows brand primary (default #1f8fff) */
 
   /* Raised-surface elevation — black shadow instead of the light-tuned pale
      blue-gray, which reads as a halo around Card / Search on dark surfaces. */
@@ -225,7 +245,7 @@
 
   /* Table header — lighter than card so the header row reads as raised on dark
      (light value is the tailwind-config fallback: 219 225 235). */
-  --color-table-header: 54 55 65;
+  --table-header: 54 55 65;
 }
 
 @layer base {
@@ -292,7 +312,7 @@
   }
 
   body {
-    @apply tw-text-sm/[1.42857143];
+    @apply tw:text-sm/[1.42857143];
   }
 
   h1 {
@@ -304,14 +324,14 @@
   h2 {
     font-size: 22px;
     line-height: 32px;
-    @apply tw-text-foreground;
+    @apply tw:text-foreground;
     font-weight: 500;
   }
 
   h3 {
     font-size: 16px;
     line-height: 24px;
-    @apply tw-text-foreground;
+    @apply tw:text-foreground;
     font-weight: 500;
     margin: 0;
   }
@@ -320,7 +340,7 @@
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
-    @apply tw-text-foreground;
+    @apply tw:text-foreground;
     margin: 0;
   }
 
@@ -328,7 +348,7 @@
     font-size: 12px;
     line-height: 20px;
     font-weight: 500;
-    @apply tw-text-foreground;
+    @apply tw:text-foreground;
     margin: 0;
   }
 
@@ -338,27 +358,27 @@
   h4 small,
   h5 small,
   h6 small {
-    @apply tw-text-muted-foreground;
+    @apply tw:text-muted-foreground;
     font-size: 75%;
   }
 
   b,
   strong {
-    @apply tw-font-semibold;
+    @apply tw:font-semibold;
   }
 }
 
 @layer components {
-  [data-tooltip-content='true'] .tw-prose {
-    @apply tw-prose-invert;
+  [data-tooltip-content='true'] .tw\:prose {
+    @apply tw:prose-invert;
   }
 
-  .tw-prose blockquote {
-    border-left: 4px solid theme('colors.border');
-    background-color: theme('colors.muted.DEFAULT');
+  .tw\:prose blockquote {
+    border-left: 4px solid rgb(var(--border));
+    background-color: rgb(var(--muted));
     padding: 12px 16px;
     border-radius: 2px;
-    color: theme('colors.foreground');
+    color: rgb(var(--foreground));
     font-size: 14px;
     font-style: italic;
     font-weight: normal;

package/src/theme.css

@@ -0,0 +1,264 @@
+/* Portable CSS-first design theme (colors today; more tokens as migrated).
+ * Imported by design's own styles.css AND by v4 apps that need to generate
+ * their own themed utilities without pulling design's @config/@plugin. */
+
+/* Custom theme tokens ported from the v3 `@keboola/tailwind-config` `theme.extend`.
+ * The v4 migration ported colors (below) but not these, so app-authored utilities
+ * that reference them (`gap-gutter`, `p-inset`, `bg-brand`, `shadow-lift`,
+ * `font-display`, `tracking-chrome`, the brand animations, legacy breakpoints)
+ * generated NOTHING in every app — collapsing all brand-density spacing/padding
+ * to 0 and leaving the whole UI too compact vs v3. Registered here (imported by
+ * design AND every v4 app) so those utilities resolve again. Each token keeps the
+ * v3 `var(--runtime-var, fallback)` shape so `ThemeProvider` can still re-skin it. */
+@theme {
+  /* Legacy Bootstrap-era breakpoints (screens). */
+  --breakpoint-sm-legacy: 992px;
+  --breakpoint-md-legacy: 1092px;
+
+  /* Brand-driven density — `gap-gutter`, `p-inset`, `m-gutter`, … */
+  --spacing-gutter: var(--space-gutter, 1.5rem);
+  --spacing-inset: var(--space-inset, 1.5rem);
+
+  /* Chrome letter-spacing — `tracking-chrome`. */
+  --tracking-chrome: var(--letter-spacing-chrome, 1px);
+
+  /* App-authored elevation + radius. Fixed values (no runtime-override var), so safe as
+   * @theme tokens. Ported because apps author these DIRECTLY — `shadow-card` (12 files),
+   * `shadow-table` + `hover:shadow-table`, `rounded-card` (19 files) — and can't rely on
+   * design's compiled CSS happening to emit the exact string. v4 gotcha: without
+   * `--shadow-card`, `shadow-card` silently resolves against the `--color-card` token and
+   * emits a shadow *colour* (no elevation) — registering it makes it a box-shadow utility. */
+  --shadow-card: 0px 1px 4px rgba(100, 135, 153, 0.15);
+  --shadow-table: 0px 6px 6px -4px rgba(100, 135, 153, 0.13);
+  --radius-card: 10px;
+
+  /* Brand easing — `ease-brand`. The runtime override var (`--motion-easing`) differs from
+   * this @theme token name, so registering it here drops no fallback (unlike bg-brand /
+   * shadow-lift, whose runtime var name collides → they stay @utility below). */
+  --ease-brand: var(--motion-easing, cubic-bezier(0.2, 0.7, 0.2, 1));
+
+  /* Brand animations used from app source — keyframes defined below. */
+  --animate-progress-bar: progress-bar var(--progress-bar-duration, 3s) linear forwards;
+  --animate-spinner-dots: spinner-dots 1s ease-in-out infinite;
+  --animate-marching-ants: marching-ants 1s linear infinite;
+}
+
+@keyframes progress-bar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+@keyframes spinner-dots {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  12.5% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+}
+@keyframes marching-ants {
+  to {
+    stroke-dashoffset: -12;
+  }
+}
+
+/* Fallback-chain utilities (kept as @utility, not @theme, so the runtime-var +
+ * fallback chain is preserved exactly as v3 emitted it — a @theme token whose name
+ * collides with the brand override var would drop the fallbacks). */
+@utility bg-brand {
+  background-image: var(
+    --gradient-brand,
+    linear-gradient(
+      135deg,
+      rgb(var(--color-primary)),
+      rgb(var(--color-accent, var(--color-primary)))
+    )
+  );
+}
+@utility shadow-lift {
+  box-shadow: var(--shadow-lift, 0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06));
+}
+@utility duration-brand {
+  /* v4 has no themeable transition-duration namespace, so keep this as a fallback-chain
+   * utility (like bg-brand / shadow-lift) to preserve the runtime var + v3 fallback. */
+  transition-duration: var(--motion-duration, 200ms);
+}
+@utility font-display {
+  font-family:
+    var(--font-display, var(--font-sans, Inter)),
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
+
+@theme inline {
+  --color-inherit: inherit;
+  --color-transparent: rgba(255, 255, 255, 0);
+  --color-white: #fff;
+  --color-black: #000;
+  --color-prose-code: #c7254e;
+  --color-prose-preCode: #33373d;
+  --color-prose-preCodeBg: #f5f5f5;
+  --color-background: rgb(var(--background));
+  --color-foreground: rgb(var(--foreground));
+  --color-card: rgb(var(--card));
+  --color-card-foreground: rgb(var(--card-foreground));
+  --color-popover: rgb(var(--popover));
+  --color-popover-foreground: rgb(var(--popover-foreground));
+  --color-accent: rgb(var(--accent));
+  --color-accent-foreground: rgb(var(--accent-foreground));
+  --color-border: rgb(var(--border));
+  --color-input: rgb(var(--input));
+  --color-ring: rgb(var(--ring));
+  --color-ring-offset: rgb(var(--ring-offset));
+  --color-chart-1: rgb(var(--chart-1));
+  --color-chart-2: rgb(var(--chart-2));
+  --color-chart-3: rgb(var(--chart-3));
+  --color-chart-4: rgb(var(--chart-4));
+  --color-chart-5: rgb(var(--chart-5));
+  --color-destructive: rgb(var(--destructive));
+  --color-destructive-foreground: rgb(var(--destructive-foreground));
+  --color-success: rgb(var(--success));
+  --color-success-foreground: rgb(var(--success-foreground));
+  --color-info: rgb(var(--info));
+  --color-info-foreground: rgb(var(--info-foreground));
+  --color-muted: rgb(var(--muted));
+  --color-muted-foreground: rgb(var(--muted-foreground));
+  --color-skeleton: rgb(var(--skeleton));
+  --color-table-header: rgb(var(--table-header, 219 225 235));
+  --color-sidebar: rgb(var(--sidebar));
+  --color-sidebar-foreground: rgb(var(--sidebar-foreground));
+  --color-sidebar-primary: rgb(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: rgb(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
+  --color-sidebar-border: rgb(var(--sidebar-border));
+  --color-sidebar-ring: rgb(var(--sidebar-ring));
+  --color-neutral-50: #f2f4f7;
+  --color-neutral-100: #edf0f5;
+  --color-neutral-150: #d9dde5;
+  --color-neutral-200: #c5cbd6;
+  --color-neutral-300: #a2aab8;
+  --color-neutral-400: #7c8594;
+  --color-neutral-500: #565c66;
+  --color-neutral-600: #454952;
+  --color-neutral-700: #33373d;
+  --color-neutral-800: #222529;
+  --color-neutral-900: #101114;
+  --color-primary-100: #e0ffe0;
+  --color-primary-200: #baf5ba;
+  --color-primary-300: #93f593;
+  --color-primary-400: #51e051;
+  --color-primary-500: #1ec71e;
+  --color-primary-600: #1bb31b;
+  --color-primary-700: #189f18;
+  --color-primary-800: #158b15;
+  --color-primary-900: #0f630f;
+  --color-primary: rgb(var(--primary));
+  --color-primary-foreground: rgb(var(--primary-foreground));
+  --color-secondary-100: #e0f0ff;
+  --color-secondary-200: #c2e0ff;
+  --color-secondary-300: #99ccff;
+  --color-secondary-400: #5cadff;
+  --color-secondary-500: #1f8fff;
+  --color-secondary-600: #0975e0;
+  --color-secondary-700: #075fb8;
+  --color-secondary-800: #064a8f;
+  --color-secondary-900: #043566;
+  --color-secondary: rgb(var(--secondary));
+  --color-secondary-foreground: rgb(var(--secondary-foreground));
+  --color-error-100: #ffe0e6;
+  --color-error-200: #ffc2cc;
+  --color-error-300: #ff99aa;
+  --color-error-400: #ff5c77;
+  --color-error-500: #e00025;
+  --color-error-550: #c40021;
+  --color-error-600: #b8001f;
+  --color-error-700: #a3001b;
+  --color-error-800: #7a0014;
+  --color-error-900: #52000e;
+  --color-warning-100: #fff3e0;
+  --color-warning-200: #ffe7c2;
+  --color-warning-300: #ffd699;
+  --color-warning-400: #ffbe5c;
+  --color-warning-500: #f59300;
+  --color-warning-550: #e38800;
+  --color-warning-600: #d17d00;
+  --color-warning-700: #a36200;
+  --color-warning-800: #7a4900;
+  --color-warning-900: #523100;
+  --color-warning: rgb(var(--warning));
+  --color-warning-foreground: rgb(var(--warning-foreground));
+  --color-purple-100: #ebe0ff;
+  --color-purple-200: #d6c2ff;
+  --color-purple-300: #c9adff;
+  --color-purple-400: #ad85ff;
+  --color-purple-500: #925cff;
+  --color-purple-600: #6f36e0;
+  --color-purple-700: #5b2cb8;
+  --color-purple-800: #46228f;
+  --color-purple-900: #321866;
+  --color-cyan-100: #e0f9ff;
+  --color-cyan-200: #bef3ff;
+  --color-cyan-300: #83ebff;
+  --color-cyan-400: #00def7;
+  --color-cyan-500: #00bbd1;
+  --color-cyan-600: #00a0b2;
+  --color-cyan-700: #007d8c;
+  --color-cyan-800: #005d69;
+  --color-cyan-900: #003f47;
+  --color-teal-100: #cfffe6;
+  --color-teal-200: #96ffce;
+  --color-teal-300: #00faaf;
+  --color-teal-400: #00e6a1;
+  --color-teal-500: #00c287;
+  --color-teal-600: #00a673;
+  --color-teal-700: #008159;
+  --color-teal-800: #006141;
+  --color-teal-900: #00422b;
+  --color-yellow-100: #ffffcc;
+  --color-yellow-200: #ffff99;
+  --color-yellow-300: #ffff33;
+  --color-yellow-400: #f5f500;
+  --color-yellow-500: #e5e500;
+  --color-yellow-600: #cccc00;
+  --color-yellow-700: #b2b200;
+  --color-yellow-800: #999900;
+  --color-yellow-900: #808000;
+  --color-pink-100: #fde8fb;
+  --color-pink-200: #fad1f6;
+  --color-pink-300: #f7bbf2;
+  --color-pink-400: #f28ce8;
+  --color-pink-500: #ed5edf;
+  --color-pink-600: #e619d1;
+  --color-pink-700: #b814a7;
+  --color-pink-800: #8a0f7d;
+  --color-pink-900: #5c0a54;
+  --color-green-100: #e0ffe0;
+  --color-green-200: #baf5ba;
+  --color-green-300: #93f593;
+  --color-green-400: #51e051;
+  --color-green-500: #1ec71e;
+  --color-green-600: #1bb31b;
+  --color-green-700: #189f18;
+  --color-green-800: #158b15;
+  --color-green-900: #0f630f;
+  --color-blue-100: #e0f0ff;
+  --color-blue-200: #c2e0ff;
+  --color-blue-300: #99ccff;
+  --color-blue-400: #5cadff;
+  --color-blue-500: #1f8fff;
+  --color-blue-600: #0975e0;
+  --color-blue-700: #075fb8;
+  --color-blue-800: #064a8f;
+  --color-blue-900: #043566;
+}