@amulet-laboratories/hex 0.3.0

package/src/scoped/themes/saltsignal.css

@@ -0,0 +1,114 @@
+/* Hex — saltsignal (scoped) */
+
+/* Hex — Saltsignal Design Tokens
+ * Warm indie retail. Handmade feeling, earthy palette with golden amber
+ * and forest green accents. Light mode storefront theme — suited for
+ * small business sites, coffee shops, and indie retail.
+ *
+ * Full palette (8 swatch colors):
+ *   #FAF6EE  cream       — background
+ *   #EDE4D4  parchment   — secondary, muted
+ *   #FFFCF4  warm white  — card, popover
+ *   #2A2210  dark roast  — foreground text
+ *   #7A6A4A  leather     — muted foreground
+ *   #846008  amber       — primary, ring
+ *   #3D6B4F  green       — accent, success
+ *   #B84233  red         — destructive
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='saltsignal'] {
+  --color-background: #faf6ee;
+  --color-foreground: #2a2210;
+  --color-card: #fffcf4;
+  --color-card-foreground: #2a2210;
+  --color-popover: #fffcf4;
+  --color-popover-foreground: #2a2210;
+  --color-primary: #846008;
+  --color-primary-foreground: #fffcf4;
+  --color-secondary: #ede4d4;
+  --color-secondary-foreground: #2a2210;
+  --color-muted: #ede4d4;
+  --color-muted-foreground: #7a6a4a;
+  --color-accent: #3d6b4f;
+  --color-accent-foreground: #fffcf4;
+  --color-destructive: #b84233;
+  --color-destructive-foreground: #fffcf4;
+  --color-success: #3d6b4f;
+  --color-warning: #d4a843;
+  --color-info: #5a7aaa;
+  --color-border: #d8ccb0;
+  --color-input: #d8ccb0;
+  --color-ring: #846008;
+  --font-sans: 'Nunito Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Anybody', 'DM Mono', ui-monospace, monospace;
+  --font-serif: 'Fraunces', Georgia, serif;
+  --font-heading: 'Fraunces', Georgia, serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 10px;
+  --background: #faf6ee;
+  --foreground: #2a2210;
+  --card: #fffcf4;
+  --card-foreground: #2a2210;
+  --popover: #fffcf4;
+  --popover-foreground: #2a2210;
+  --primary: #846008;
+  --primary-foreground: #fffcf4;
+  --secondary: #ede4d4;
+  --secondary-foreground: #2a2210;
+  --muted: #ede4d4;
+  --muted-foreground: #7a6a4a;
+  --accent: #3d6b4f;
+  --accent-foreground: #fffcf4;
+  --destructive: #b84233;
+  --destructive-foreground: #fffcf4;
+  --success: #3d6b4f;
+  --warning: #d4a843;
+  --info: #5a7aaa;
+  --border: #d8ccb0;
+  --input: #d8ccb0;
+  --ring: #846008;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --ss-cream: #faf6ee;
+  --ss-parchment: #ede4d4;
+  --ss-warm-white: #fffcf4;
+  --ss-dark-roast: #2a2210;
+  --ss-leather: #7a6a4a;
+  --ss-amber: #846008;
+  --ss-green: #3d6b4f;
+  --ss-red: #b84233;
+  --rig-button-hover-bg: #ede4d4;
+  --rig-scrollbar-thumb: rgba(42, 34, 16, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(42, 34, 16, 0.25);
+}

package/src/scoped/themes/spacewizard.css

@@ -0,0 +1,115 @@
+/* Hex — spacewizard (scoped) */
+
+/* Hex — Spacewizard Design Tokens
+ * Deep space blue background with acid green accents.
+ * Dark mode personal/portfolio theme — suited for developer portfolios.
+ *
+ * Palette:
+ *   #060d2b  space navy      — background
+ *   #0a1440  deep navy       — card, popover
+ *   #111d52  surface         — secondary, borders
+ *   #1e2a6b  border          — input borders
+ *   #7b88b8  muted text      — muted foreground
+ *   #aef66d  acid green      — primary brand
+ *   #c4f99a  light green     — accent hover
+ *   #cad3f7  ice blue        — foreground text
+ *   #f87171  red             — destructive
+ *   #fbbf24  amber           — warning
+ *   #34d399  emerald         — success
+ *   #60a5fa  blue            — info
+ *
+ * @theme feeds Tailwind v4 utility generation.
+ * :root provides standalone CSS custom property access.
+ */
+
+[data-hex-theme='spacewizard'] {
+  --color-background: #060d2b;
+  --color-foreground: #cad3f7;
+  --color-card: #0a1440;
+  --color-card-foreground: #cad3f7;
+  --color-popover: #0a1440;
+  --color-popover-foreground: #cad3f7;
+  --color-primary: #aef66d;
+  --color-primary-foreground: #060d2b;
+  --color-secondary: #111d52;
+  --color-secondary-foreground: #cad3f7;
+  --color-muted: #111d52;
+  --color-muted-foreground: #7b88b8;
+  --color-accent: #c4f99a;
+  --color-accent-foreground: #060d2b;
+  --color-destructive: #f87171;
+  --color-destructive-foreground: #060d2b;
+  --color-success: #34d399;
+  --color-warning: #fbbf24;
+  --color-info: #60a5fa;
+  --color-border: #1e2a6b;
+  --color-input: #1e2a6b;
+  --color-ring: #aef66d;
+  --font-mono: 'Fira Code', 'SF Mono', 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
+  --font-sans: 'Open Sans', 'Inter', system-ui, sans-serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 6px;
+  --background: #060d2b;
+  --foreground: #cad3f7;
+  --card: #0a1440;
+  --card-foreground: #cad3f7;
+  --popover: #0a1440;
+  --popover-foreground: #cad3f7;
+  --primary: #aef66d;
+  --primary-foreground: #060d2b;
+  --secondary: #111d52;
+  --secondary-foreground: #cad3f7;
+  --muted: #111d52;
+  --muted-foreground: #7b88b8;
+  --accent: #c4f99a;
+  --accent-foreground: #060d2b;
+  --destructive: #f87171;
+  --destructive-foreground: #060d2b;
+  --success: #34d399;
+  --warning: #fbbf24;
+  --info: #60a5fa;
+  --border: #1e2a6b;
+  --input: #1e2a6b;
+  --ring: #aef66d;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --sw-space: #060d2b;
+  --sw-deep: #0a1440;
+  --sw-surface: #111d52;
+  --sw-border: #1e2a6b;
+  --sw-muted: #7b88b8;
+  --sw-green: #aef66d;
+  --sw-green-light: #c4f99a;
+  --sw-ice: #cad3f7;
+  --rig-button-hover-bg: #111d52;
+  --rig-scrollbar-thumb: rgba(202, 211, 247, 0.18);
+  --rig-scrollbar-thumb-hover: rgba(202, 211, 247, 0.35);
+}

package/src/scoped/themes/tidemark.css

@@ -0,0 +1,119 @@
+/* Hex — tidemark (scoped) */
+
+/* Hex — Tidemark Design Tokens
+ * Coastal luxury real estate. Warm light mode with cyan accents.
+ * Linen white background, charcoal brown text, true cyan primary, terracotta accent.
+ * Light mode real estate theme — suited for property listings and luxury brand sites.
+ *
+ * Full palette (8 swatch colors):
+ *   #FAF7F2  linen white     — background
+ *   #E8E0D4  warm sand       — secondary, muted
+ *   #B5A898  driftwood       — soft neutral
+ *   #5B7575  muted cyan      — muted foreground
+ *   #2C2420  charcoal brown  — foreground text
+ *   #1A7A7A  true cyan       — primary brand
+ *   #B7523D  terracotta      — accent, destructive
+ *   #7A9E7E  sage            — success
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='tidemark'] {
+  --color-background: #faf7f2;
+  --color-foreground: #2c2420;
+  --color-card: #fffdf8;
+  --color-card-foreground: #2c2420;
+  --color-popover: #fffdf8;
+  --color-popover-foreground: #2c2420;
+  --color-primary: #1a7a7a;
+  --color-primary-foreground: #fffdf8;
+  --color-secondary: #e8e0d4;
+  --color-secondary-foreground: #2c2420;
+  --color-muted: #e8e0d4;
+  --color-muted-foreground: #5b7575;
+  --color-accent: #b7523d;
+  --color-accent-foreground: #fffdf8;
+  --color-destructive: #b7523d;
+  --color-destructive-foreground: #fffdf8;
+  --color-success: #7a9e7e;
+  --color-warning: #d4a843;
+  --color-info: #1a7a7a;
+  --color-border: #d4c9b8;
+  --color-input: #d4c9b8;
+  --color-ring: #1a7a7a;
+  --font-sans: 'Source Sans 3', 'Inter', system-ui, sans-serif;
+  --font-mono: 'DM Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Cormorant Garamond', Georgia, serif;
+  --font-heading: 'Cormorant Garamond', Georgia, serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 7px;
+  --background: #faf7f2;
+  --foreground: #2c2420;
+  --card: #fffdf8;
+  --card-foreground: #2c2420;
+  --popover: #fffdf8;
+  --popover-foreground: #2c2420;
+  --primary: #1a7a7a;
+  --primary-foreground: #fffdf8;
+  --secondary: #e8e0d4;
+  --secondary-foreground: #2c2420;
+  --muted: #e8e0d4;
+  --muted-foreground: #5b7575;
+  --accent: #b7523d;
+  --accent-foreground: #fffdf8;
+  --destructive: #b7523d;
+  --destructive-foreground: #fffdf8;
+  --success: #7a9e7e;
+  --warning: #d4a843;
+  --info: #1a7a7a;
+  --border: #d4c9b8;
+  --input: #d4c9b8;
+  --ring: #1a7a7a;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --tm-linen: #faf7f2;
+  --tm-sand: #e8e0d4;
+  --tm-driftwood: #b5a898;
+  --tm-charcoal: #2c2420;
+  --tm-clay: #5b7575;
+  --tm-cyan: #1a7a7a;
+  --tm-terracotta: #b7523d;
+  --tm-sage: #7a9e7e;
+  --rig-button-hover-bg: #156a6a;
+  --rig-button-hover-fg: #fffdf8;
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-foreground);
+  --rig-button-secondary-hover-bg: #e8e0d4;
+  --rig-button-secondary-hover-fg: var(--color-foreground);
+  --rig-scrollbar-thumb: rgba(44, 36, 32, 0.15);
+  --rig-scrollbar-thumb-hover: rgba(44, 36, 32, 0.3);
+}

package/src/scoped/themes/undertow.css

@@ -0,0 +1,113 @@
+/* Hex — undertow (scoped) */
+
+/* Hex — Undertow Design Tokens
+ * Industrial craft brewery. Gritty dark mode with blaze orange and grain gold.
+ * Warehouse taproom energy — loud, unpretentious, industrial warm.
+ *
+ * Full palette (7 swatch colors):
+ *   #1C1917  tar             — background
+ *   #292524  soot            — card, popover
+ *   #3B3633  worn iron       — secondary, muted
+ *   #F5F0EB  bone            — foreground text
+ *   #A8A09A  ash             — muted foreground
+ *   #D95F2A  blaze orange    — primary, ring
+ *   #C9B458  grain gold      — accent
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='undertow'] {
+  --color-background: #1c1917;
+  --color-foreground: #f5f0eb;
+  --color-card: #292524;
+  --color-card-foreground: #f5f0eb;
+  --color-popover: #292524;
+  --color-popover-foreground: #f5f0eb;
+  --color-primary: #d95f2a;
+  --color-primary-foreground: #1c1917;
+  --color-secondary: #3b3633;
+  --color-secondary-foreground: #f5f0eb;
+  --color-muted: #3b3633;
+  --color-muted-foreground: #a8a09a;
+  --color-accent: #c9b458;
+  --color-accent-foreground: #1c1917;
+  --color-destructive: #cc3333;
+  --color-destructive-foreground: #f5f0eb;
+  --color-success: #5a8a5a;
+  --color-warning: #c9b458;
+  --color-info: #6b8faa;
+  --color-border: #4a4440;
+  --color-input: #4a4440;
+  --color-ring: #d95f2a;
+  --font-sans: 'Work Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Archivo Black', 'Archivo', Impact, sans-serif;
+  --font-heading: 'Archivo Black', 'Archivo', Impact, sans-serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 4px;
+  --background: #1c1917;
+  --foreground: #f5f0eb;
+  --card: #292524;
+  --card-foreground: #f5f0eb;
+  --popover: #292524;
+  --popover-foreground: #f5f0eb;
+  --primary: #d95f2a;
+  --primary-foreground: #1c1917;
+  --secondary: #3b3633;
+  --secondary-foreground: #f5f0eb;
+  --muted: #3b3633;
+  --muted-foreground: #a8a09a;
+  --accent: #c9b458;
+  --accent-foreground: #1c1917;
+  --destructive: #cc3333;
+  --destructive-foreground: #f5f0eb;
+  --success: #5a8a5a;
+  --warning: #c9b458;
+  --info: #6b8faa;
+  --border: #4a4440;
+  --input: #4a4440;
+  --ring: #d95f2a;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --uw-tar: #1c1917;
+  --uw-soot: #292524;
+  --uw-iron: #3b3633;
+  --uw-bone: #f5f0eb;
+  --uw-ash: #a8a09a;
+  --uw-blaze: #d95f2a;
+  --uw-gold: #c9b458;
+  --site-footer-bg: var(--color-card);
+  --site-footer-color: var(--color-foreground);
+  --rig-button-hover-bg: #3b3633;
+  --rig-scrollbar-thumb: rgba(245, 240, 235, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(245, 240, 235, 0.25);
+}

package/src/scoped/themes/vscode.css

@@ -0,0 +1,230 @@
+/* Hex — vscode (scoped) */
+
+/* Hex — VSCode Design Tokens
+ * VSCode Dark Modern theme — mapped 1:1 from microsoft/vscode dark_modern.json.
+ * Token names follow shadcn conventions for cross-ecosystem portability.
+ *
+ * Source: extensions/theme-defaults/themes/dark_modern.json
+ */
+
+[data-hex-theme='vscode'] {
+  --color-background: #1f1f1f;
+  --color-foreground: #cccccc;
+  --color-card: #181818;
+  --color-card-foreground: #cccccc;
+  --color-popover: #202020;
+  --color-popover-foreground: #cccccc;
+  --color-primary: #0078d4;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #313131;
+  --color-secondary-foreground: #cccccc;
+  --color-muted: #181818;
+  --color-muted-foreground: #9d9d9d;
+  --color-accent: #2b2b2b;
+  --color-accent-foreground: #cccccc;
+  --color-destructive: #f85149;
+  --color-destructive-foreground: #cccccc;
+  --color-success: #2ea043;
+  --color-warning: #cca700;
+  --color-info: #75beff;
+  --color-border: #2b2b2b;
+  --color-input: #3c3c3c;
+  --color-ring: #0078d4;
+  --font-mono: --font-sans: --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 4px;
+  --background: #1f1f1f;
+  --foreground: #cccccc;
+  --card: #181818;
+  --card-foreground: #cccccc;
+  --popover: #202020;
+  --popover-foreground: #cccccc;
+  --primary: #0078d4;
+  --primary-foreground: #ffffff;
+  --secondary: #313131;
+  --secondary-foreground: #cccccc;
+  --muted: #181818;
+  --muted-foreground: #9d9d9d;
+  --accent: #2b2b2b;
+  --accent-foreground: #cccccc;
+  --destructive: #f85149;
+  --destructive-foreground: #cccccc;
+  --success: #2ea043;
+  --warning: #cca700;
+  --info: #75beff;
+  --border: #2b2b2b;
+  --input: #3c3c3c;
+  --ring: #0078d4;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --vsc-button-bg: #0078d4;
+  --vsc-button-fg: #ffffff;
+  --vsc-button-hover-bg: #026ec1;
+  --vsc-button-border: rgba(255, 255, 255, 0.1);
+  --vsc-button-secondary-bg: transparent;
+  --vsc-button-secondary-fg: #cccccc;
+  --vsc-button-secondary-hover-bg: #2b2b2b;
+  --vsc-input-bg: #313131;
+  --vsc-input-border: #3c3c3c;
+  --vsc-input-fg: #cccccc;
+  --vsc-input-placeholder: #989898;
+  --vsc-dropdown-bg: #313131;
+  --vsc-dropdown-border: #3c3c3c;
+  --vsc-dropdown-fg: #cccccc;
+  --vsc-dropdown-list-bg: #1f1f1f;
+  --vsc-checkbox-bg: #313131;
+  --vsc-checkbox-border: #3c3c3c;
+  --vsc-badge-bg: #616161;
+  --vsc-badge-fg: #f8f8f8;
+  --vsc-activitybar-bg: #181818;
+  --vsc-activitybar-fg: #d7d7d7;
+  --vsc-activitybar-inactive-fg: #868686;
+  --vsc-activitybar-active-border: #0078d4;
+  --vsc-activitybar-border: #2b2b2b;
+  --vsc-activitybar-badge-bg: #0078d4;
+  --vsc-activitybar-badge-fg: #ffffff;
+  --vsc-sidebar-bg: #181818;
+  --vsc-sidebar-fg: #cccccc;
+  --vsc-sidebar-border: #2b2b2b;
+  --vsc-sidebar-section-header-bg: #181818;
+  --vsc-sidebar-section-header-border: #2b2b2b;
+  --vsc-panel-bg: #181818;
+  --vsc-panel-border: #2b2b2b;
+  --vsc-panel-title-active-border: #0078d4;
+  --vsc-panel-title-active-fg: #cccccc;
+  --vsc-panel-title-inactive-fg: #9d9d9d;
+  --vsc-tab-active-bg: #1f1f1f;
+  --vsc-tab-active-fg: #ffffff;
+  --vsc-tab-active-border-top: #0078d4;
+  --vsc-tab-inactive-bg: #181818;
+  --vsc-tab-inactive-fg: #9d9d9d;
+  --vsc-tab-border: #2b2b2b;
+  --vsc-editor-group-header-bg: #181818;
+  --vsc-statusbar-bg: #181818;
+  --vsc-statusbar-fg: #cccccc;
+  --vsc-statusbar-border: #2b2b2b;
+  --vsc-statusbar-hover-bg: rgba(241, 241, 241, 0.2);
+  --vsc-quickinput-bg: #222222;
+  --vsc-quickinput-fg: #cccccc;
+  --vsc-menu-bg: #1f1f1f;
+  --vsc-menu-selection-bg: #0078d4;
+  --vsc-notification-bg: #1f1f1f;
+  --vsc-notification-fg: #cccccc;
+  --vsc-notification-border: #2b2b2b;
+  --vsc-widget-bg: #202020;
+  --vsc-widget-border: #313131;
+  --vsc-scrollbar-thumb: rgba(121, 121, 121, 0.4);
+  --vsc-scrollbar-thumb-hover: rgba(100, 100, 100, 0.7);
+  --vsc-scrollbar-thumb-active: rgba(191, 191, 191, 0.4);
+  --vsc-selection-bg: rgba(38, 79, 120, 0.6);
+  --vsc-sash-hover: #0078d4;
+  --vsc-list-hover-bg: rgba(255, 255, 255, 0.04);
+  --vsc-list-active-bg: #0078d4;
+  --vsc-list-active-fg: #ffffff;
+  --vsc-list-inactive-bg: rgba(255, 255, 255, 0.06);
+  --vsc-keybinding-fg: #cccccc;
+  --vsc-editor-bg: #1f1f1f;
+  --vsc-editor-fg: #cccccc;
+  --vsc-editor-line-number-fg: #6e7681;
+  --vsc-editor-line-number-active-fg: #cccccc;
+  --vsc-progress-bg: #0078d4;
+  --vsc-description-fg: #9d9d9d;
+  --rig-activitybar-bg: var(--vsc-activitybar-bg);
+  --rig-activitybar-border: var(--vsc-activitybar-border);
+  --rig-activitybar-fg: var(--vsc-activitybar-fg);
+  --rig-activitybar-inactive-fg: var(--vsc-activitybar-inactive-fg);
+  --rig-activitybar-active-border: var(--vsc-activitybar-active-border);
+  --rig-activitybar-active-border-width: 3px;
+  --rig-activitybar-active-fg: var(--color-foreground);
+  --rig-activitybar-badge-bg: var(--vsc-activitybar-badge-bg);
+  --rig-activitybar-badge-fg: var(--vsc-activitybar-badge-fg);
+  --rig-sidebar-active-bg: var(--vsc-list-hover-bg);
+  --rig-badge-bg: var(--vsc-badge-bg);
+  --rig-badge-fg: var(--vsc-badge-fg);
+  --rig-button-bg: var(--vsc-button-bg);
+  --rig-button-fg: var(--vsc-button-fg);
+  --rig-button-hover-bg: var(--vsc-button-hover-bg);
+  --rig-button-border: var(--vsc-button-border);
+  --rig-button-secondary-bg: var(--vsc-button-secondary-bg);
+  --rig-button-secondary-fg: var(--vsc-button-secondary-fg);
+  --rig-button-secondary-hover-bg: var(--vsc-button-secondary-hover-bg);
+  --rig-checkbox-bg: var(--vsc-checkbox-bg);
+  --rig-checkbox-border: var(--vsc-checkbox-border);
+  --rig-description-fg: var(--vsc-description-fg);
+  --rig-highlight-bg: #623800;
+  --rig-highlight-fg: #cccccc;
+  --rig-dropdown-bg: var(--vsc-dropdown-bg);
+  --rig-dropdown-border: var(--vsc-dropdown-border);
+  --rig-dropdown-fg: var(--vsc-dropdown-fg);
+  --rig-dropdown-list-bg: var(--vsc-dropdown-list-bg);
+  --rig-editor-bg: var(--vsc-editor-bg);
+  --rig-editor-fg: var(--vsc-editor-fg);
+  --rig-editor-group-header-bg: var(--vsc-editor-group-header-bg);
+  --rig-editor-line-number-fg: var(--vsc-editor-line-number-fg);
+  --rig-input-bg: var(--vsc-input-bg);
+  --rig-input-border: var(--vsc-input-border);
+  --rig-input-fg: var(--vsc-input-fg);
+  --rig-input-placeholder: var(--vsc-input-placeholder);
+  --rig-keybinding-fg: var(--vsc-keybinding-fg);
+  --rig-list-active-bg: var(--vsc-list-active-bg);
+  --rig-list-active-fg: var(--vsc-list-active-fg);
+  --rig-list-hover-bg: var(--vsc-list-hover-bg);
+  --rig-list-inactive-bg: var(--vsc-list-inactive-bg);
+  --rig-menu-bg: var(--vsc-menu-bg);
+  --rig-menu-selection-bg: var(--vsc-menu-selection-bg);
+  --rig-notification-bg: var(--vsc-notification-bg);
+  --rig-notification-fg: var(--vsc-notification-fg);
+  --rig-notification-border: var(--vsc-notification-border);
+  --rig-panel-border: var(--vsc-panel-border);
+  --rig-panel-title-active-border: var(--vsc-panel-title-active-border);
+  --rig-panel-title-active-fg: var(--vsc-panel-title-active-fg);
+  --rig-panel-title-inactive-fg: var(--vsc-panel-title-inactive-fg);
+  --rig-progress-bg: var(--vsc-progress-bg);
+  --rig-quickinput-bg: var(--vsc-quickinput-bg);
+  --rig-sash-hover: var(--vsc-sash-hover);
+  --rig-scrollbar-thumb: var(--vsc-scrollbar-thumb);
+  --rig-scrollbar-thumb-hover: var(--vsc-scrollbar-thumb-hover);
+  --rig-sidebar-bg: var(--vsc-sidebar-bg);
+  --rig-sidebar-border: var(--vsc-sidebar-border);
+  --rig-sidebar-fg: var(--vsc-sidebar-fg);
+  --rig-sidebar-section-header-border: var(--vsc-sidebar-section-header-border);
+  --rig-statusbar-bg: var(--vsc-statusbar-bg);
+  --rig-statusbar-border: var(--vsc-statusbar-border);
+  --rig-statusbar-fg: var(--vsc-statusbar-fg);
+  --rig-statusbar-hover-bg: var(--vsc-statusbar-hover-bg);
+  --rig-tab-active-bg: var(--vsc-tab-active-bg);
+  --rig-tab-active-border-top: var(--vsc-tab-active-border-top);
+  --rig-tab-active-fg: var(--vsc-tab-active-fg);
+  --rig-tab-border: var(--vsc-tab-border);
+  --rig-tab-inactive-bg: var(--vsc-tab-inactive-bg);
+  --rig-tab-inactive-fg: var(--vsc-tab-inactive-fg);
+  --rig-widget-bg: var(--vsc-widget-bg);
+  --rig-widget-border: var(--vsc-widget-border);
+}