@filipgutica/ui 1.0.0 → 1.1.1

package/README.md

@@ -1,7 +1,11 @@
 # @filipgutica/ui
 
-A compact Vue 3.5+ design system built on [Reka UI](https://reka-ui.com), with
-Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
+Compact Vue 3.5+ components built on [Reka UI](https://reka-ui.com), with
+Tailwind CSS 4 and VS Code theme support.
+
+[Docs and playground](https://filipgutica.github.io/ui/) ·
+[GitHub](https://github.com/filipgutica/ui) ·
+[npm](https://www.npmjs.com/package/@filipgutica/ui)
 
 ## Install
 
@@ -9,7 +13,7 @@ Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
 pnpm add @filipgutica/ui
 ```
 
-Import Tailwind and the shared theme files from your application stylesheet:
+Import the styles from your application stylesheet:
 
 ```css
 @import "tailwindcss";
@@ -17,93 +21,27 @@ Import Tailwind and the shared theme files from your application stylesheet:
 @import "@filipgutica/ui/components.css";
 ```
 
-The theme exposes Tailwind utilities such as `bg-ui-bg`, `bg-ui-surface`,
-`text-ui-text`, `text-ui-muted`, `border-ui-border`, and `text-ui-error`.
-
-## Vue components
-
-The first application-focused set includes:
-
-- `UiButton` with primary, secondary, ghost, danger, and text variants
-- `UiInput`, `UiSelect`, and `UiField` for consistent form controls
-- `UiCheckbox`, `UiSlider`, `UiRadioCard`, and `UiRadioCardGroup` for user input
-- `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
-- `UiCard` for structured content, actions, and footer metadata
-- `UiCodeBlock` for copyable, theme-aware source snippets
-- `UiDialog`, built on Reka UI, for accessible modal interaction
-
-Place `UiInput` or `UiSelect` inside `UiField`. The field supplies the control ID
-and automatically connects its description or error through the corresponding
-ARIA relationship.
+## Use
 
 ```vue
+<script setup lang="ts">
+import { UiButton } from '@filipgutica/ui'
+</script>
+
 <template>
   <UiButton variant="secondary" size="sm">
-    Inspect evidence
+    Save changes
   </UiButton>
 </template>
-
-<script setup lang="ts">
-import { UiButton } from '@filipgutica/ui'
-</script>
 ```
 
-`UiButton`, `UiInput`, `UiSelect`, `UiCheckbox`, and `UiSlider` share
-`size="sm | md | lg"`
-and default to the tighter `md` density. Existing `UiButton` values remain
-compatible: `compact` retains its former compact treatment and `default` maps
-to `lg`.
+The [component docs](https://filipgutica.github.io/ui/#/components/button)
+cover examples, props, slots, and events. Place inputs and selects inside
+`UiField` to connect labels, descriptions, and errors automatically.
 
-`UiCodeBlock` accepts source text through `code`, shows a copy action by default,
-and highlights the selected language using the active theme. It can display a
-title, line numbers, or wrapped lines; unknown languages stay readable as plain text:
+## Themes
 
-```vue
-<UiCodeBlock
-  title="Example.vue"
-  language="vue"
-  :code="snippet"
-  :line-numbers="true"
-/>
-```
-
-Highlighting supports Vue, JavaScript (`js`), TypeScript (`ts`), HTML, CSS,
-JSON, and Bash (`sh`/`shell`). Imported TextMate `tokenColors` are normalized
-into a shared syntax palette; language-specific overrides and font styles are
-not reproduced exactly. Themes saved before syntax support should be re-imported
-to recover their syntax colors. Existing saved themes remain usable with themed fallbacks.
-
-`UiSurface` remains exported for compatibility. New structured containers
-should use `UiCard`.
-
-## Design conventions
-
-Use a compact, Geist-inspired hierarchy: 14px for UI body text, 13px for
-secondary text, and 18px for dialog titles. Treat Open VSX/VS Code themes as
-the color authority, and use semantic tokens and package components instead of
-hard-coded provider color keys.
-Typography is package-owned through `--font-ui` and `--font-mono`; override
-these once at the application root rather than restyling each component.
-
-- Use shared control sizes `sm`, `md`, and `lg` (32px, 36px, and 44px); the
-  default is `md`. Keep layout on a 4px rhythm, with 12px, 16px, and 24px as
-  common gaps and insets.
-- Choose `UiCard` for structured content and optional actions or footer data.
-  Choose `UiRadioCardGroup` with `UiRadioCard` for one-of-many rich options;
-  choose `UiDialog` for modal tasks that need focus management.
-- Use one primary action per task, secondary buttons for supporting actions,
-  and danger styling only for destructive actions. Use `UiBadge` for a short
-  status, `UiAlert` for feedback, and `UiCodeBlock` for source code.
-- Put `UiInput` and `UiSelect` in `UiField` with a visible label. Supply help
-  text or an error when needed so the field exposes the matching ARIA relationship.
-- Keep borders quiet and skip decorative grids. Preserve visible
-  `:focus-visible` states, use 44px targets for touch-oriented actions, and provide
-  an accessible name for every interactive control.
-
-## VS Code themes
-
-The browser-safe theme entry point parses VS Code JSON/JSONC and maps supported
-workbench colors into the package's finite semantic token contract:
+Import a VS Code JSON or JSONC theme in the browser:
 
 ```ts
 import { applySemanticTheme, parseVsCodeTheme } from '@filipgutica/ui/theme'
@@ -112,73 +50,14 @@ const theme = parseVsCodeTheme({ source, fileName })
 applySemanticTheme({ root: document.documentElement, theme })
 ```
 
-The Node-only Open VSX entry point searches and imports theme extensions without
-executing extension code:
-
-```ts
-import { createOpenVsxThemeService } from '@filipgutica/ui/open-vsx'
-
-const themes = await createOpenVsxThemeService().search('Catppuccin')
-```
-
-Open VSX packages are untrusted input. The importer restricts origins, validates
-identifiers and archive paths, caps downloaded and expanded sizes, checks the
-advertised SHA-256 checksum, and retains only normalized colors. Consumers that
-redistribute theme assets remain responsible for their licenses.
-
-## Boundaries
-
-- Open VSX themes control color and light/dark/high-contrast appearance only.
-- Typography, spacing, radius, motion, and component structure remain owned by
-  this package so applications keep a consistent design language.
-- `@filipgutica/ui/open-vsx` is Node-only. Do not import it into browser bundles.
-
-## Docs and sandbox
-
-Start the component docs and sandbox:
-
-```sh
-pnpm docs:dev
-```
-
-Build the provider-neutral static assets:
-
-```sh
-pnpm docs:build
-```
-
-The docs use hash routes, so the static assets do not require rewrite rules.
-The local Vite server also provides the same-origin `/api/open-vsx` endpoint.
-The theme picker uses this endpoint to search and import Open VSX themes.
-
-A production host must provide the same API endpoint for live Open VSX imports.
-Netlify and Amplify can use a serverless adapter. GitHub Pages needs an external
-API or a catalog of normalized themes built in advance.
+Themes supply colors; the library keeps typography, spacing, and component
+structure consistent. Open VSX search and imports are available through
+`@filipgutica/ui/open-vsx`, which must run on a Node server.
 
 ## Development
 
 ```sh
 pnpm install
+pnpm docs:dev
 pnpm verify
 ```
-
-Commits follow the Conventional Commits format. Releases run from `main`:
-
-- `fix:` publishes a patch release
-- `feat:` publishes a minor release
-- `feat!:` publishes a major release
-- `BREAKING CHANGE:` or `[BREAKING CHANGE]` anywhere in a commit body publishes
-  a major release
-- the same markers anywhere in an associated merged PR body publish a major
-  release
-
-The `release.yml` workflow runs on every push to `main`. When semantic-release
-finds qualifying commits, it publishes the next version to npm, creates the
-matching `v<version>` tag, and creates a GitHub Release. Configure an `NPM_TOKEN`
-Actions secret with permission to publish `@filipgutica/ui`; contributors do not
-publish locally or add a token to the repository.
-
-Before the first token-backed release, remove the package's existing trusted
-publisher in npm. The workflow retains `id-token: write` only for the provenance
-attestations enabled in `package.json`; npm registry authentication comes from
-the `NPM_TOKEN` secret.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [

package/src/components.css

@@ -4,9 +4,9 @@
   .fg-radio-card, .fg-badge, .fg-alert, .fg-surface, .fg-card,
   .fg-dialog__content, .fg-code-block {
     font-family: var(--font-ui);
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
+    font-size: var(--text-md);
+    font-weight: var(--weight-regular);
+    line-height: var(--leading);
   }
 
   .fg-code-block {
@@ -62,12 +62,7 @@
     border: 1px solid transparent;
     border-radius: var(--radius-control);
     font-family: var(--font-ui);
-    transition:
-      background-color var(--duration-fast) ease,
-      border-color var(--duration-fast) ease,
-      color var(--duration-fast) ease,
-      box-shadow var(--duration-fast) ease,
-      transform var(--duration-fast) ease;
+    transition: transform var(--duration-fast) var(--ease-out);
   }
 
   .fg-button {
@@ -133,15 +128,15 @@
     font-size: 1rem;
   }
 
-  .fg-button[data-size="sm"] { min-height: 2rem; }
-  .fg-button[data-size="md"] { min-height: 2.25rem; }
-  .fg-button[data-size="lg"] { min-height: 2.75rem; }
+  .fg-button[data-size="sm"] { min-height: var(--control-sm); }
+  .fg-button[data-size="md"] { min-height: var(--control-md); }
+  .fg-button[data-size="lg"] { min-height: var(--control-lg); }
   .fg-input[data-size="sm"],
-  .fg-select[data-size="sm"] { height: 2rem; }
+  .fg-select[data-size="sm"] { height: var(--control-sm); }
   .fg-input[data-size="md"],
-  .fg-select[data-size="md"] { height: 2.25rem; }
+  .fg-select[data-size="md"] { height: var(--control-md); }
   .fg-input[data-size="lg"],
-  .fg-select[data-size="lg"] { height: 2.75rem; }
+  .fg-select[data-size="lg"] { height: var(--control-lg); }
 
   .fg-button[data-size="sm"] { padding: 0 0.6rem; }
   .fg-button[data-size="md"] { padding: 0 0.75rem; }
@@ -149,13 +144,13 @@
 
   /* Deprecated UiButton aliases retained for existing consumers. */
   .fg-button[data-size="compact"] {
-    min-height: 2.25rem;
+    min-height: var(--control-md);
     padding: 0 0.7rem;
     font-size: 0.8125rem;
   }
 
   .fg-button[data-size="default"] {
-    min-height: 2.75rem;
+    min-height: var(--control-lg);
     padding: 0 1rem;
     font-size: 1rem;
   }
@@ -163,7 +158,7 @@
   .fg-button[data-variant="secondary"] {
     border-color: var(--color-border);
     color: var(--color-text);
-    background: var(--color-surface-raised);
+    background: transparent;
   }
 
   .fg-button[data-variant="secondary"]:hover:not(:disabled),
@@ -188,7 +183,7 @@
     border-color: var(--color-error);
     color: var(--color-error);
     background: var(--color-error-surface);
-    box-shadow: inset 0 0 0 1px var(--color-error);
+    box-shadow: none;
   }
 
   .fg-button[data-variant="text"] {
@@ -229,6 +224,61 @@
     background-size: 0.3rem 0.3rem;
   }
 
+  /* Keep native form semantics; older browsers retain the native picker. */
+  @supports (appearance: base-select) {
+    .fg-select:not([multiple]):not([size]),
+    .fg-select:not([multiple]):not([size])::picker(select) {
+      appearance: base-select;
+    }
+    .fg-select:not([multiple]):not([size]) {
+      position: relative;
+      align-items: center;
+      background-image: none;
+      cursor: pointer;
+    }
+    .fg-select:not([multiple]):not([size]):disabled { cursor: not-allowed; }
+    .fg-select:not([multiple]):not([size])::picker-icon { display: none; }
+    .fg-select:not([multiple]):not([size])::after {
+      position: absolute;
+      right: var(--space-3);
+      width: var(--space-2);
+      height: var(--space-2);
+      border-right: 1.5px solid var(--color-muted);
+      border-bottom: 1.5px solid var(--color-muted);
+      transform: translateY(-2px) rotate(45deg);
+      content: "";
+    }
+    .fg-select:not([multiple]):not([size])::picker(select) {
+      min-width: anchor-size(width);
+      max-height: min(20rem, 50dvh);
+      overflow: auto;
+      margin-block: var(--space-1);
+      padding: var(--space-1);
+      border: 1px solid var(--color-border-subtle);
+      border-radius: var(--radius-panel);
+      color: var(--color-text);
+      background: var(--color-input-bg);
+      box-shadow: var(--shadow-dialog);
+      font: var(--weight-regular) var(--text-md) / var(--leading) var(--font-ui);
+    }
+    .fg-select:not([multiple]):not([size]) option {
+      min-height: var(--control-sm);
+      gap: var(--space-2);
+      padding: var(--space-2) var(--space-3);
+      border-radius: var(--radius-control);
+      color: var(--color-text);
+      background: transparent;
+      cursor: pointer;
+    }
+    .fg-select:not([multiple]):not([size]) option:checked { color: var(--color-row-selected-text); background: var(--color-row-selected); }
+    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled), .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    .fg-select:not([multiple]):not([size]) option:disabled { color: var(--color-muted); opacity: 0.58; cursor: not-allowed; }
+    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-link); }
+    @media (pointer: coarse) {
+      .fg-select:not([multiple]):not([size]) option { min-height: var(--control-lg); }
+    }
+  }
+
   .fg-input[data-size="sm"] { padding: 0 0.55rem; }
   .fg-input[data-size="md"] { padding: 0 0.65rem; }
   .fg-input[data-size="lg"] { padding: 0 0.7rem; }
@@ -304,21 +354,21 @@
   .fg-checkbox__label { line-height: 1.4; }
 
   .fg-checkbox[data-size="sm"] {
-    min-height: 2rem;
+    min-height: var(--control-sm);
     align-items: center;
     gap: 0.45rem;
     font-size: 0.8125rem;
   }
 
   .fg-checkbox[data-size="md"] {
-    min-height: 2.25rem;
+    min-height: var(--control-md);
     align-items: center;
     gap: 0.55rem;
     font-size: 0.875rem;
   }
 
   .fg-checkbox[data-size="lg"] {
-    min-height: 2.75rem;
+    min-height: var(--control-lg);
     align-items: center;
     gap: 0.65rem;
     font-size: 1rem;
@@ -365,10 +415,7 @@
     box-shadow: none;
     text-align: left;
     cursor: pointer;
-    transition:
-      border-color var(--duration-fast) ease,
-      box-shadow var(--duration-fast) ease,
-      transform var(--duration-fast) ease;
+    transition: transform var(--duration-fast) var(--ease-out);
   }
 
   .fg-radio-card:hover:not([data-disabled]) {
@@ -377,7 +424,8 @@
 
   .fg-radio-card[data-state="checked"] {
     border-color: var(--color-link);
-    box-shadow: 0 0 0 1px var(--color-link);
+    outline: 1px solid var(--color-link);
+    outline-offset: -2px;
   }
 
   .fg-radio-card[data-disabled] {
@@ -461,30 +509,48 @@
   .fg-surface[data-padding="default"] { padding: 1rem; }
 
   .fg-card {
+    min-width: 0;
     overflow: hidden;
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-panel);
+    color: var(--color-text);
     background: var(--color-surface-raised);
     box-shadow: none;
   }
 
-  .fg-card__header,
-  .fg-card__footer {
+  .fg-card__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
+    gap: var(--space-3);
+    padding: var(--space-4);
   }
 
+  .fg-card__title {
+    min-width: 0;
+    margin: 0;
+    color: var(--color-text);
+    font-size: var(--text-md);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading);
+    overflow-wrap: anywhere;
+  }
+  .fg-card__actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-left: auto; }
+  .fg-card__body { min-width: 0; padding: var(--space-4); }
+  .fg-card__header + .fg-card__body { padding-top: 0; }
   .fg-card__footer {
-    background: var(--color-surface);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin-inline: var(--space-4);
+    padding-block: var(--space-3);
+    border-top: 1px solid var(--color-border-subtle);
+    color: var(--color-muted);
+    font-size: var(--text-sm);
   }
 
-  .fg-card__title { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
-  .fg-card__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
-  .fg-card__body { padding: 1rem; }
-
   .fg-progress {
     position: relative;
     height: 0.55rem;
@@ -511,9 +577,9 @@
     user-select: none;
   }
 
-  .fg-slider[data-size="sm"] { min-height: 2rem; }
-  .fg-slider[data-size="md"] { min-height: 2.25rem; }
-  .fg-slider[data-size="lg"] { min-height: 2.75rem; }
+  .fg-slider[data-size="sm"] { min-height: var(--control-sm); }
+  .fg-slider[data-size="md"] { min-height: var(--control-md); }
+  .fg-slider[data-size="lg"] { min-height: var(--control-lg); }
 
   .fg-slider__track {
     position: relative;
@@ -606,7 +672,7 @@
     display: inline-grid;
     flex: none;
     width: 2.75rem;
-    min-height: 2.75rem;
+    min-height: var(--control-lg);
     padding: 0;
     place-items: center;
     color: var(--color-muted);

package/src/theme.css

@@ -2,47 +2,73 @@
 
 :root {
   color-scheme: light;
-  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'SFMono-Regular', Consolas, monospace;
-  --color-bg: #ffffff;
-  --color-surface: #f7f8fa;
+  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-md: 0.875rem;
+  --text-lg: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --leading-tight: 1.25;
+  --leading: 1.5;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --control-sm: 2rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.75rem;
+  --measure: 68ch;
+  --page-max: 60rem;
+  --sidebar: 14rem;
+  --color-bg: #fcfcfd;
+  --color-surface: #f6f6f8;
   --color-surface-raised: #fff;
-  --color-surface-muted: #eef1f5;
-  --color-text: #101828;
-  --color-muted: #5d6979;
-  --color-link: #155eef;
-  --color-accent: #4d7c0f;
-  --color-focus: #155eef;
+  --color-surface-muted: #efeff2;
+  --color-text: #1b1b1f;
+  --color-muted: #62626d;
+  --color-link: #3d63dd;
+  --color-accent: #3d63dd;
+  --color-focus: #3d63dd;
   --color-border: #667085;
-  --color-border-subtle: #d8dee8;
-  --color-button-bg: #155eef;
+  --color-border-subtle: #e9e9ed;
+  --color-button-bg: #3d63dd;
   --color-button-text: #fff;
-  --color-button-hover: #004eeb;
+  --color-button-hover: #3354c4;
   --color-input-bg: #fff;
-  --color-input-text: #101828;
+  --color-input-text: #1b1b1f;
   --color-input-border: #667085;
   --color-input-placeholder: #667085;
-  --color-row-hover: #f2f4f7;
-  --color-row-selected: #eaf1ff;
-  --color-row-selected-text: #143d8f;
-  --color-code: #0c1426;
-  --color-code-text: #edf2ff;
-  --color-syntax-comment: #a8b3c7;
-  --color-syntax-keyword: #cba6f7;
-  --color-syntax-string: #a6e3a1;
-  --color-syntax-number: #fab387;
-  --color-syntax-function: #89b4fa;
-  --color-syntax-type: #f9e2af;
-  --color-syntax-variable: #edf2ff;
-  --color-syntax-operator: #89dceb;
-  --color-syntax-punctuation: #cdd6f4;
-  --color-syntax-tag: #89b4fa;
-  --color-syntax-attribute: #f9e2af;
+  --color-row-hover: #efeff2;
+  --color-row-selected: #e9ebf8;
+  --color-row-selected-text: #3354c4;
+  --color-code: #f6f6f8;
+  --color-code-text: #1b1b1f;
+  --color-syntax-comment: #62626d;
+  --color-syntax-keyword: #3d63dd;
+  --color-syntax-string: #1f7a52;
+  --color-syntax-number: #854a0e;
+  --color-syntax-function: #3d63dd;
+  --color-syntax-type: #854a0e;
+  --color-syntax-variable: #1b1b1f;
+  --color-syntax-operator: #62626d;
+  --color-syntax-punctuation: #62626d;
+  --color-syntax-tag: #3d63dd;
+  --color-syntax-attribute: #854a0e;
   --color-error: #c01048;
   --color-warning: #854a0e;
   --color-success: #067647;
   --color-info: #175cd3;
-  --color-progress: #155eef;
+  --color-progress: #3d63dd;
   --color-shadow: rgb(16 24 40 / 10%);
   --color-overlay: rgb(0 0 0 / 42%);
   --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
@@ -52,43 +78,57 @@
   --radius-control: 0.375rem;
   --radius-panel: 0.5rem;
   --radius-pill: 999px;
-  --duration-fast: 140ms;
-  --shadow-control: 0 1px 2px rgb(16 24 40 / 8%);
-  --shadow-dialog: 0 24px 80px rgb(5 12 24 / 28%);
+  --duration-fast: 120ms;
+  --duration: 180ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --shadow-control: none;
+  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%);
 }
 
 :root.dark {
   color-scheme: dark;
-  --color-bg: #0b1020;
-  --color-surface: #111827;
-  --color-surface-raised: #151d2f;
-  --color-surface-muted: #202a3d;
-  --color-text: #f4f7ff;
-  --color-muted: #a8b3c7;
-  --color-link: #8fb4ff;
-  --color-accent: #b7ef53;
-  --color-focus: #8fb4ff;
+  --color-bg: #0f0f11;
+  --color-surface: #151518;
+  --color-surface-raised: #1a1a1e;
+  --color-surface-muted: #1f1f24;
+  --color-text: #ececf0;
+  --color-muted: #a0a0ab;
+  --color-link: #7d97ff;
+  --color-accent: #7d97ff;
+  --color-focus: #7d97ff;
   --color-border: #647189;
-  --color-border-subtle: #2d384d;
-  --color-button-bg: #6e9cff;
-  --color-button-text: #071126;
-  --color-button-hover: #8fb4ff;
-  --color-input-bg: #0d1526;
-  --color-input-text: #f4f7ff;
+  --color-border-subtle: #222227;
+  --color-button-bg: #7d97ff;
+  --color-button-text: #0d1020;
+  --color-button-hover: #97acff;
+  --color-input-bg: #151518;
+  --color-input-text: #ececf0;
   --color-input-border: #647189;
-  --color-input-placeholder: #8995aa;
-  --color-row-hover: #1b2538;
-  --color-row-selected: #1b315b;
-  --color-row-selected-text: #dbe7ff;
-  --color-code: #070d19;
-  --color-code-text: #edf2ff;
+  --color-input-placeholder: #a0a0ab;
+  --color-row-hover: #1f1f24;
+  --color-row-selected: #1f2233;
+  --color-row-selected-text: #ececf0;
+  --color-code: #151518;
+  --color-code-text: #ececf0;
+  --color-syntax-comment: #a0a0ab;
+  --color-syntax-keyword: #97acff;
+  --color-syntax-string: #6fd3a0;
+  --color-syntax-number: #e8b56a;
+  --color-syntax-function: #97acff;
+  --color-syntax-type: #e8b56a;
+  --color-syntax-variable: #ececf0;
+  --color-syntax-operator: #a0a0ab;
+  --color-syntax-punctuation: #a0a0ab;
+  --color-syntax-tag: #97acff;
+  --color-syntax-attribute: #e8b56a;
   --color-error: #ff8aad;
   --color-warning: #f8c477;
   --color-success: #75e0a7;
   --color-info: #84adff;
-  --color-progress: #8fb4ff;
+  --color-progress: #7d97ff;
   --color-shadow: rgb(0 0 0 / 32%);
   --color-overlay: rgb(0 0 0 / 62%);
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%);
 }
 
 @theme inline {