@amulet-laboratories/hex 0.3.0

package/src/themes/vscode/tokens.css

@@ -0,0 +1,346 @@
+/* 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
+ */
+
+@theme {
+  /* Surface colors — mapped from editor.background, sideBar.background, etc. */
+  --color-background: #1f1f1f;
+  --color-foreground: #cccccc;
+  --color-card: #181818;
+  --color-card-foreground: #cccccc;
+  --color-popover: #202020;
+  --color-popover-foreground: #cccccc;
+
+  /* Brand — focusBorder / button.background */
+  --color-primary: #0078d4;
+  --color-primary-foreground: #ffffff;
+
+  /* Soft accents — sideBar.background, dropdown.background */
+  --color-secondary: #313131;
+  --color-secondary-foreground: #cccccc;
+  --color-muted: #181818;
+  --color-muted-foreground: #9d9d9d;
+  --color-accent: #2b2b2b;
+  --color-accent-foreground: #cccccc;
+
+  /* Semantic status — mapped from errorForeground, editorGutter colors */
+  --color-destructive: #f85149;
+  --color-destructive-foreground: #cccccc;
+  --color-success: #2ea043;
+  --color-warning: #cca700;
+  --color-info: #75beff;
+
+  /* Extended palette — semantic accents beyond the core four */
+  --color-purple: #8b5cf6;
+  --color-teal: #14b8a6;
+  --color-orange: #f97316;
+  --color-rose: #f43f5e;
+  --color-neutral: #78716c;
+
+  /* Borders and focus — widget.border, input.border, focusBorder */
+  --color-border: #2b2b2b;
+  --color-input: #3c3c3c;
+  --color-ring: #0078d4;
+
+  /* Typography — VSCode system font stacks */
+  --font-mono:
+    'SF Mono', Monaco, Menlo, Consolas, 'Ubuntu Mono', 'Liberation Mono', 'DejaVu Sans Mono',
+    'Courier New', monospace;
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans',
+    sans-serif;
+
+  /* Typography — IDE-density type scale */
+  --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;
+
+  /* Display font family */
+  --font-display: var(--font-sans);
+
+  /* Radius — VSCode uses 4px for buttons, 5px for menubar, etc. */
+  --radius: 4px;
+}
+
+:root {
+  --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;
+  --radius: 4px;
+  --font-mono:
+    'SF Mono', Monaco, Menlo, Consolas, 'Ubuntu Mono', 'Liberation Mono', 'DejaVu Sans Mono',
+    'Courier New', monospace;
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans',
+    sans-serif;
+  --font-display: var(--font-sans);
+
+  /* Typography — IDE-density type scale (shorthand aliases) */
+  --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;
+
+  /* ── Extended VSCode tokens ──────────────────────────────────────────
+   * Additional tokens for 1:1 VSCode fidelity, not in shadcn contract.
+   */
+
+  /* Button */
+  --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;
+
+  /* Input */
+  --vsc-input-bg: #313131;
+  --vsc-input-border: #3c3c3c;
+  --vsc-input-fg: #cccccc;
+  --vsc-input-placeholder: #989898;
+
+  /* Dropdown / Select */
+  --vsc-dropdown-bg: #313131;
+  --vsc-dropdown-border: #3c3c3c;
+  --vsc-dropdown-fg: #cccccc;
+  --vsc-dropdown-list-bg: #1f1f1f;
+
+  /* Checkbox */
+  --vsc-checkbox-bg: #313131;
+  --vsc-checkbox-border: #3c3c3c;
+
+  /* Badge */
+  --vsc-badge-bg: #616161;
+  --vsc-badge-fg: #f8f8f8;
+
+  /* Activity Bar */
+  --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;
+
+  /* Sidebar */
+  --vsc-sidebar-bg: #181818;
+  --vsc-sidebar-fg: #cccccc;
+  --vsc-sidebar-border: #2b2b2b;
+  --vsc-sidebar-section-header-bg: #181818;
+  --vsc-sidebar-section-header-border: #2b2b2b;
+
+  /* Panel */
+  --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;
+
+  /* Editor tabs */
+  --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;
+
+  /* Status Bar */
+  --vsc-statusbar-bg: #181818;
+  --vsc-statusbar-fg: #cccccc;
+  --vsc-statusbar-border: #2b2b2b;
+  --vsc-statusbar-hover-bg: rgba(241, 241, 241, 0.2);
+
+  /* Quick Input / Command Palette */
+  --vsc-quickinput-bg: #222222;
+  --vsc-quickinput-fg: #cccccc;
+
+  /* Menu */
+  --vsc-menu-bg: #1f1f1f;
+  --vsc-menu-selection-bg: #0078d4;
+
+  /* Notifications */
+  --vsc-notification-bg: #1f1f1f;
+  --vsc-notification-fg: #cccccc;
+  --vsc-notification-border: #2b2b2b;
+
+  /* Widget */
+  --vsc-widget-bg: #202020;
+  --vsc-widget-border: #313131;
+
+  /* Scrollbar */
+  --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);
+
+  /* Selection */
+  --vsc-selection-bg: rgba(38, 79, 120, 0.6);
+
+  /* Sash */
+  --vsc-sash-hover: #0078d4;
+
+  /* List */
+  --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);
+
+  /* Keybinding */
+  --vsc-keybinding-fg: #cccccc;
+
+  /* Editor */
+  --vsc-editor-bg: #1f1f1f;
+  --vsc-editor-fg: #cccccc;
+  --vsc-editor-line-number-fg: #6e7681;
+  --vsc-editor-line-number-active-fg: #cccccc;
+
+  /* Progress bar */
+  --vsc-progress-bg: #0078d4;
+
+  /* Description / muted text */
+  --vsc-description-fg: #9d9d9d;
+
+  /* ── Rig semantic token bridge ─────────────────────────────────────────────
+   * Maps --rig-* (used by all shared component CSS) to VSCode values.
+   * Other themes define --rig-* in their own tokens file.
+   */
+  --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);
+}