@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/theme/css/base.css

@@ -0,0 +1,92 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-display);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: var(--tracking-tight);
+  text-wrap: balance;
+  border-bottom: none;
+}
+
+@layer base {
+
+  a:not(:where([class*="flex"], [class*="grid"], [class*="w-"], [class*="h-"], [class*="p-"])) {
+    @apply text-brand-pink visited:text-brand-pink/80;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-normal);
+    /* mona sans swaps to display letterforms (single-storey "a") from 18px up;
+       pinning the optical size keeps one set of letters at every size */
+    font-variation-settings: "opsz" 16;
+    font-feature-settings: "tnum" 1;
+    hanging-punctuation: first last;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  .logo {
+    font-family: var(--font-hack);
+  }
+
+  .legible {
+    font-family: var(--font-sans);
+  }
+
+  /* Text is selectable as on any page. Controls that must not select on
+     click (drag handles, canvases) say so themselves with select-none; a
+     global rule guessing from a div's children made plain text in divs
+     (list titles, notices) uncopyable. */
+
+  ::selection {
+    background-color: var(--color-brand-pink);
+    color: var(--color-primary-foreground);
+  }
+
+  .pintura-editor {
+    --color-background: 245, 245, 245 !important;
+    --color-foreground: 15, 15, 15 !important;
+    --color-primary: var(--color-brand-pink) !important;
+    --color-primary-dark: var(--color-brand-pink) !important;
+    --color-primary-text: var(--color-foreground) !important;
+    --color-secondary: var(--color-brand-green) !important;
+    --color-secondary-dark: var(--color-brand-green) !important;
+  }
+
+  .pintura-editor button,
+  .pintura-editor span,
+  .pintura-editor [role="tab"] span {
+    text-transform: lowercase !important;
+  }
+
+  .nodrag {
+    cursor: default;
+  }
+
+  /* Buttons read as clickable; the shadcn components leave the cursor to the
+     platform, and ui/shadcn is not hand-edited. */
+  button:not(:disabled),
+  [role="button"]:not(:disabled, [aria-disabled="true"]) {
+    cursor: pointer;
+  }
+  button:disabled,
+  [role="button"][aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+}
+
+@utility no-scrollbar {
+  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+}

package/src/theme/css/bitboy.css

@@ -0,0 +1,75 @@
+@custom-variant bitboy (&:where([data-theme="bitboy"], [data-theme="bitboy"] *, .bitboy, .bitboy *));
+
+@layer base {
+  @variant bitboy {
+    /* Classic bitboy's 4-color palette */
+    --gb-darkest: 66 31% 12%;     /* #0f380f */
+    --gb-dark: 69 19% 33%;        /* #306230 */
+    --gb-light: 68 26% 56%;       /* #8bac0f */
+    --gb-lightest: 68 31% 71%;    /* #9bbc0f */
+
+    --background: var(--gb-darkest);
+    --foreground: var(--gb-lightest);
+    --card: var(--gb-dark);
+    --card-foreground: var(--gb-lightest);
+    --popover: var(--gb-dark);
+    --popover-foreground: var(--gb-lightest);
+    --primary: var(--gb-light);
+    --primary-foreground: var(--gb-darkest);
+    --secondary: var(--gb-dark);
+    --secondary-foreground: var(--gb-lightest);
+    --muted: var(--gb-dark);
+    --muted-foreground: var(--gb-light);
+    --accent: var(--gb-light);
+    --accent-foreground: var(--gb-darkest);
+    --destructive: var(--gb-darkest);
+    --destructive-foreground: var(--gb-lightest);
+    --border: var(--gb-light);
+    --input: var(--gb-dark);
+    --ring: var(--gb-light);
+
+    /* All brand colors using bitboy palette */
+    --brand-pink: var(--gb-light);
+    --brand-green: var(--gb-light);
+    --brand-purple: var(--gb-light);
+    --brand-lavender: var(--gb-lightest);
+    --brand-yellow: var(--gb-lightest);
+    --brand-lime: var(--gb-light);
+    --brand-blue: var(--gb-light);
+    --brand-red: var(--gb-darkest);
+    --brand-orange: var(--gb-light);
+    --brand-teal: var(--gb-light);
+
+    --radius: 0px;
+
+    /* Optional: Add pixel-perfect scaling */
+    image-rendering: pixelated;
+    font-family: "Press Start 2P", monospace; /* If you want to use a pixel font */
+  }
+
+  /* Optional: Add scanlines effect */
+  .bitboy .scanlines {
+    background: repeating-linear-gradient(
+      0deg,
+      var(--gb-darkest),
+      var(--gb-darkest) 2px,
+      transparent 2px,
+      transparent 4px
+    );
+  }
+
+  .bitboy ::selection {
+    background-color: var(--gb-dark);
+    color: var(--gb-lightest);
+  }
+
+  .bitboy .pintura-editor {
+    --color-background: 38, 40, 21 !important;
+    --color-foreground: 198, 204, 158 !important;
+    --color-primary: var(--color-brand-pink) !important;
+    --color-primary-dark: var(--color-brand-pink) !important;
+    --color-primary-text: var(--color-foreground) !important;
+    --color-secondary: var(--color-brand-green) !important;
+    --color-secondary-dark: var(--color-brand-green) !important;
+  }
+} 

package/src/theme/css/dark.css

@@ -0,0 +1,47 @@
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
+
+@layer base {
+  @variant dark {
+    --background: 0 0% 5.9%;
+    --foreground: 0 0% 96%;
+    --card: 0 0% 5.9%;
+    --card-foreground: 0 0% 96%;
+    --popover: 0 0% 5.9%;
+    --popover-foreground: 0 0% 96%;
+    --primary: 0 0% 96%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 96%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 65.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 96%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 96%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 65.9%;
+    --chart-1: var(--brand-pink);  /* brand.pink: #FF569D */
+    --chart-2: var(--brand-green);  /* brand.green: #00D08A */
+    --chart-3: var(--brand-purple);  /* brand.purple: #5415FF */
+    --chart-4: var(--brand-lavender);  /* brand.lavender: #F08AFF */
+    --chart-5: var(--brand-yellow);   /* brand.yellow: #FFF14C */
+    --radius: 0.5rem;
+
+  }
+
+  .dark .pintura-editor {
+    --color-background: 15, 15, 15 !important;
+    --color-foreground: 245, 245, 245 !important;
+    --color-primary: var(--color-brand-pink) !important;
+    --color-primary-dark: var(--color-brand-pink) !important;
+    --color-primary-text: var(--color-foreground) !important;
+    --color-secondary: var(--color-brand-green) !important;
+    --color-secondary-dark: var(--color-brand-green) !important;
+  }
+
+  .dark ::selection {
+    background-color: var(--color-brand-pink);
+    color:  var(--color-primary-foreground);
+  }
+}

package/src/theme/css/designer.css

@@ -0,0 +1,122 @@
+@custom-variant designer (&:where([data-theme="designer"], [data-theme="designer"] *, .designer, .designer *));
+
+@layer base {
+  @variant designer {
+    /* Classic 90s web colors */
+    --hot-pink: 330 100% 71%;     /* #FF69B4 */
+    --web-purple: 300 76% 72%;    /* #800080 */
+    --web-yellow: 60 100% 50%;    /* #FFFF00 */
+    --web-cyan: 180 100% 50%;     /* #00FFFF */
+    --web-lime: 120 100% 50%;     /* #00FF00 */
+    --web-blue: 240 100% 50%;     /* #0000FF */
+    --marquee-bg: 0 0% 0%;        /* #000000 */
+
+    /* Theme mapping */
+    --background: 60 100% 97%;     /* Nearly white background */
+    --foreground: 0 0% 0%;        /* Black text */
+    --card: 180 100% 97%;         /* Light cyan cards */
+    --card-foreground: 0 0% 0%;
+    --popover: 300 100% 97%;      /* Light purple popovers */
+    --popover-foreground: 0 0% 0%;
+    --primary: var(--hot-pink);
+    --primary-foreground: 0 0% 100%;
+    --secondary: var(--web-purple);
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 90%;
+    --muted-foreground: 0 0% 40%;
+    --accent: var(--web-yellow);
+    --accent-foreground: 0 0% 0%;
+    --destructive: 0 100% 50%;     /* Pure red */
+    --destructive-foreground: 0 0% 100%;
+    --border: var(--hot-pink);
+    --input: 0 0% 100%;           /* White inputs */
+    --ring: var(--web-cyan);
+
+    /* Brand colors in their full 90s glory */
+    --brand-pink: var(--hot-pink);
+    --brand-green: var(--web-lime);
+    --brand-purple: var(--web-purple);
+    --brand-lavender: 270 100% 86%;
+    --brand-yellow: var(--web-yellow);
+    --brand-lime: var(--web-lime);
+    --brand-blue: var(--web-blue);
+    --brand-red: 0 100% 50%;
+    --brand-orange: 39 100% 50%;
+    --brand-teal: 180 100% 25%;
+
+    /* Classic 90s styling */
+    --radius: 0px;  /* Sharp corners forever! */
+  }
+
+  /* Override ALL font families when designer theme is active */
+  .designer,
+  .designer body,
+  .designer .logo,
+  .designer * {
+    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
+  }
+
+  /* Even headers get the Comic Sans treatment */
+  .designer h1,
+  .designer h2,
+  .designer h3,
+  .designer h4,
+  .designer h5,
+  .designer h6 {
+    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
+    font-weight: bold; /* Make headers stand out a bit */
+  }
+
+  /* Nostalgic under construction animation */
+  .designer .construction {
+    background: repeating-linear-gradient(
+      45deg,
+      60 100% 50%,
+      60 100% 50% 10px,
+      0 0% 0% 10px,
+      0 0% 0% 20px
+    );
+  }
+
+  /* Marquee-style animation background */
+  .designer .marquee {
+    background: var(--marquee-bg);
+    color: var(--web-yellow);
+    text-transform: uppercase;
+    text-shadow: 2px 2px var(--hot-pink);
+  }
+
+  /* Classic link styling */
+  .designer a:not(.button) {
+    color: var(--web-blue);
+    text-decoration: underline;
+  }
+
+  .designer a:not(.button):visited {
+    color: var(--web-purple);
+  }
+
+  /* Blinking text effect */
+  .designer .blink {
+    animation: blink 1s step-end infinite;
+  }
+
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+
+  .designer ::selection {
+    background-color: var(--hot-pink);
+    color: 0 0% 100%;
+  }
+
+  .designer .pintura-editor {
+    --color-background: 255, 255, 240 !important;
+    --color-foreground: 0, 0, 0 !important;
+    --color-primary: var(--color-brand-pink) !important;
+    --color-primary-dark: var(--color-brand-pink) !important;
+    --color-primary-text: var(--color-foreground) !important;
+    --color-secondary: var(--color-brand-green) !important;
+    --color-secondary-dark: var(--color-brand-green) !important;
+  }
+} 

package/src/theme/css/fonts.css

@@ -0,0 +1,33 @@
+/*
+ * Self-hosted fonts, bundled by each app's Vite build from ../fonts.
+ * Licences sit next to the files (SIL OFL 1.1; Hack is MIT + Bitstream Vera).
+ *
+ * - Mona Sans (headings, body, UI)
+ * - Fira Code (commands, terminal, small labels)
+ * - Hack (the wordmark), regular only, from hack-font 3.3.0
+ *
+ * Only app and web import this file; mcp-apps gets the family names from
+ * theme.css and falls back to system fonts.
+ */
+
+@font-face {
+  font-family: "Mona Sans";
+  src: url("../fonts/Mona-Sans.woff2") format("woff2");
+  font-weight: 200 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("../fonts/FiraCode-VF.woff2") format("woff2");
+  font-weight: 300 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "hack";
+  src: url("../fonts/Hack-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

package/src/theme/css/globals.css

@@ -0,0 +1,14 @@
+/* Shared styles - import AFTER tailwindcss */
+/* NOTE: safelist.css is NOT imported here - import it separately in apps that need dynamic classes */
+
+/* Shadcn component styles (managed by shadcn CLI) */
+@import "./shadcn.css";
+
+/* Shared themes */
+@import "./theme.css";
+@import "./base.css";
+@import "./dark.css";
+@import "./llama.css";
+@import "./hackintosh.css";
+@import "./bitboy.css";
+@import "./designer.css";

package/src/theme/css/hackintosh.css

@@ -0,0 +1,57 @@
+@custom-variant hackintosh (&:where([data-theme="hackintosh"], [data-theme="hackintosh"] *, .hackintosh, .hackintosh *));
+
+@layer base {
+  @variant hackintosh {
+    --background: 0 0% 100%;      /* Classic Mac white */
+    --foreground: 0 0% 0%;        /* Black text */
+    --card: 0 0% 93%;             /* Light gray for windows */
+    --card-foreground: 0 0% 0%;
+    --popover: 0 0% 93%;
+    --popover-foreground: 0 0% 0%;
+    --primary: 0 0% 0%;           /* Black for UI elements */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 85%;        /* Lighter gray for buttons */
+    --secondary-foreground: 0 0% 0%;
+    --muted: 0 0% 85%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 75%;           /* Menu bar gray */
+    --accent-foreground: 0 0% 0%;
+    --destructive: 0 100% 45%;    /* Red for close buttons */
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 0%;            /* Black borders */
+    --input: 0 0% 100%;
+    --ring: 0 0% 0%;
+
+    /* Mac-specific styles */
+    --mac-titlebar: 0 0% 65%;     /* Title bar gray */
+    --mac-stripes: repeating-linear-gradient(
+      180deg,
+      0 0% 65%,
+      0 0% 65% 1px,
+      0 0% 75% 1px,
+      0 0% 75% 2px
+    );
+
+    --radius: 0px;  /* Changed from 8px to match classic Mac UI */
+  }
+
+  /* Hackintosh-specific utility classes */
+  .hackintosh .window-title {
+    background: var(--mac-stripes);
+  }
+
+  .hackintosh ::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  .hackintosh .pintura-editor {
+    --color-background: 255, 255, 255 !important;
+    --color-foreground: 0, 0, 0 !important;
+    --color-primary: var(--color-brand-pink) !important;
+    --color-primary-dark: var(--color-brand-pink) !important;
+    --color-primary-text: var(--color-foreground) !important;
+    --color-secondary: var(--color-brand-green) !important;
+    --color-secondary-dark: var(--color-brand-green) !important;
+  }
+} 

package/src/theme/css/llama.css

@@ -0,0 +1,103 @@
+@custom-variant llama (&:where([data-theme="llama"], [data-theme="llama"] *, .llama, .llama *));
+
+@layer base {
+  .llama {
+    --llama-darkest: 220 13% 15%;    /* Main Llama gray */ 
+    --llama-dark: 220 14% 18%;       /* Slightly darker panel areas */
+    --llama-light: 120 100% 20%;      /* Button surface gray */
+    --llama-lightest: 120 100% 50%;  /* Classic Llama green text */
+
+    --background: var(--llama-darkest);
+    --foreground: var(--llama-lightest);
+    --card: var(--llama-dark);
+    --card-foreground: var(--llama-lightest);
+    --popover: var(--llama-dark);
+    --popover-foreground: var(--llama-lightest);
+    --primary: var(--llama-light);
+    --primary-foreground: var(--llama-darkest);
+    --secondary: var(--llama-dark);
+    --secondary-foreground: var(--llama-lightest);
+    --muted: var(--llama-dark);
+    --muted-foreground: var(--llama-light);
+    --accent: var(--llama-light);
+    --accent-foreground: var(--llama-darkest);
+    --destructive: var(--llama-darkest);
+    --destructive-foreground: var(--llama-lightest);
+    --border: var(--llama-light);
+    --input: var(--llama-light);
+    --ring: var(--llama-light);
+
+    /* Llama-specific styles */
+    --llama-bevel-light: 220 14% 35%;
+    --llama-bevel-dark: 220 14% 8%;
+    --llama-metal: linear-gradient(180deg, 
+                    var(--llama-bevel-light),
+                    var(--llama-bevel-dark),
+                    var(--llama-bevel-dark)
+    );
+    --llama-inset: inset 1px 1px var(--llama-bevel-dark), 
+                    inset -1px -1px var(--llama-bevel-light);
+    --llama-outset: -1px -1px var(--llama-bevel-dark), 
+                     1px 1px var(--llama-bevel-light);
+    --llama-display-bg: 0 0% 0%;  /* Black display background */
+    
+    /* Brand colors adjusted for Llama theme */
+    --brand-pink: var(--llama-lightest);    /* Classic Llama green */
+    --brand-green: var(--llama-lightest);   /* Classic Llama green */
+    --brand-purple: var(--llama-lightest);  /* Classic Llama green */
+    --brand-lavender: var(--llama-lightest); /* Classic Llama green */
+    --brand-yellow: var(--llama-lightest);   /* Classic Llama green */
+    --brand-lime: var(--llama-lightest);     /* Classic Llama green */
+    --brand-blue: var(--llama-lightest);    /* Classic Llama green */
+    --brand-red: var(--llama-darkest);       /* Keep red for destructive actions */
+    --brand-orange: var(--llama-lightest);   /* Classic Llama green */
+    --brand-teal: var(--llama-lightest);    /* Classic Llama green */
+
+    --radius: 0px;
+  }
+
+  /* Llama-specific utility classes */
+  .llama .bevel-outset {
+    background: var(--llama-metal);
+    box-shadow: var(--llama-outset);
+  }
+
+  .llama .bevel-inset {
+    background: var(--llama-metal);
+    box-shadow: var(--llama-inset);
+  }
+
+  .llama .metal-bg {
+    background: var(--llama-metal);
+  }
+
+  .llama .display-bg {
+    background: var(--llama-display-bg);
+    color: var(--llama-lightest);     /* Classic green text */
+    font-family: "LCD", monospace; /* Add if you have an LCD-style font */
+  }
+
+  .llama body {
+    background-image: linear-gradient(45deg, hsl(var(--secondary) / 0.1) 25%, transparent 25%), 
+                      linear-gradient(-45deg, hsl(var(--secondary) / 0.1) 25%, transparent 25%),
+                      linear-gradient(45deg, transparent 75%, hsl(var(--secondary) / 0.1) 75%),
+                      linear-gradient(-45deg, transparent 75%, hsl(var(--secondary) / 0.1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  }
+
+  .llama ::selection {
+    background-color: var(--llama-lightest);
+    color: var(--llama-darkest);
+  }
+
+  .llama .pintura-editor {
+    --color-background: 33, 37, 43 !important; /* rgb(38,41,44) is hsl(220,13%,15%) */
+    --color-foreground: 0, 255, 0 !important;
+    --color-primary: var(--llama-lightest) !important;
+    --color-primary-dark: var(--llama-light) !important;
+    --color-primary-text: var(--llama-darkest) !important;
+    --color-secondary: var(--llama-light) !important;
+    --color-secondary-dark: var(--llama-dark) !important;
+  }
+} 

package/src/theme/css/safelist.css

@@ -0,0 +1,39 @@
+@source inline("grid-{cols,rows}-{1..24}");
+@source inline("gap-{1..24}");
+@source inline("{col,row}-span-{1..24}");
+
+
+/* bg/text/border colors */
+@source inline("{bg,text,border,fill,stroke,from,to,via}-{blue,green,yellow,red,purple,pink,indigo,cyan,teal,lime,amber,orange,emerald,violet,fuchsia,rose,sky,gray,slate,zinc,neutral,stone,black,white}");
+@source inline("{bg,text,border,fill,stroke,from,to,via}-{blue,green,yellow,red,purple,pink,indigo,cyan,teal,lime,amber,orange,emerald,violet,fuchsia,rose,sky,gray,slate,zinc,neutral,stone,black,white}-{50,{100..900..100},950}");
+@source inline("{bg,text,border,fill,stroke,from,to,via}-{blue,green,yellow,red,purple,pink,indigo,cyan,teal,lime,amber,orange,emerald,violet,fuchsia,rose,sky,gray,slate,zinc,neutral,stone,black,white}/{5..95..5}");
+@source inline("{bg,text,border,fill,stroke,from,to,via}-{blue,green,yellow,red,purple,pink,indigo,cyan,teal,lime,amber,orange,emerald,violet,fuchsia,rose,sky,gray,slate,zinc,neutral,stone,black,white}-{50,{100..900..100},950}/{5..95..5}");
+/* gradients */
+@source inline("bg-gradient-{to-r,to-l,to-t,to-b,to-tr,to-tl,to-br,to-bl}");
+@source inline("bg-gradient-{to-t,to-b,to-l,to-r,to-tl,to-tr,to-bl,to-br}");
+/* spacing - integers and fractional values */
+@source inline("{p,m}{x,y,t,b,l,r,-}-{0..24}");
+@source inline("{p,m}{x,y,t,b,l,r,-}-{0.5,1.5,2.5,3.5}");
+@source inline("{p,m}-{0..24}");
+@source inline("{p,m}-{0.5,1.5,2.5,3.5}");
+
+/* size utilities */
+@source inline("{w,h,min-w,min-h,max-w,max-h}-{0..24}");
+@source inline("{w,h,min-w,min-h,max-w,max-h}-{full,auto}");
+@source inline("{w,h,min-w,min-h,max-w,max-h}-[{0..1200..50}px]");
+
+
+@source inline("bg-opacity-{0..100}");
+
+@source inline("opacity-{0..100}");
+@source inline("backdrop-blur-{sm,md,lg,xl,2xl,3xl}");
+@source inline("rounded{-none,sm,md,lg,xl,2xl,3xl,full}");
+@source inline("border-{0..8}");
+@source inline("flex{,-col,-row,-wrap,-nowrap}");
+@source inline("items-{start,center,end,baseline,stretch}");
+@source inline("justify-{start,center,end,between,around,evenly}");
+@source inline("flex-{1,auto,none,initial}");
+@source inline("text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl}");
+@source inline("font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}");
+@source inline("gap-{0..24}");
+@source inline("shadow{-sm,,md,lg,xl,2xl,inner}");

package/src/theme/css/shadcn.css

@@ -0,0 +1,77 @@
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Shadcn UI component styles */
+/* This file is managed by shadcn CLI - avoid manual edits */
+/* New component installations will add styles here */
+
+@layer base {
+  /* shadcn base styles go here */
+}
+
+:root {
+
+  --sidebar: hsl(0 0% 98%);
+
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+
+  --sidebar-primary: hsl(240 5.9% 10%);
+
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+
+  --sidebar-border: hsl(220 13% 91%);
+
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+
+  --sidebar: hsl(240 5.9% 10%);
+
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+
+  --sidebar-border: hsl(240 3.7% 15.9%);
+
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+
+  --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}