@filipgutica/ui 1.0.0 → 1.1.0

package/README.md

@@ -48,6 +48,10 @@ import { UiButton } from '@filipgutica/ui'
 </script>
 ```
 
+`UiSelect` retains native form and keyboard behavior. Browsers with
+`appearance: base-select` support show a themed menu; other browsers use their
+native menu.
+
 `UiButton`, `UiInput`, `UiSelect`, `UiCheckbox`, and `UiSlider` share
 `size="sm | md | lg"`
 and default to the tighter `md` density. Existing `UiButton` values remain
@@ -78,7 +82,7 @@ should use `UiCard`.
 
 ## Design conventions
 
-Use a compact, Geist-inspired hierarchy: 14px for UI body text, 13px for
+Use a compact system-font 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.
@@ -96,6 +100,11 @@ these once at the application root rather than restyling each component.
   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.
+- Select menus use the same surface, type, radius, and spacing tokens as other
+  controls. Keep option rows compact, show a checkmark for the selected value, and
+  use quiet hover fills with visible keyboard focus.
+- Use raised surfaces and subtle borders for standalone cards. Align title, content,
+  and footer insets; use a quiet divider for footer metadata and avoid card shadows.
 - 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.
@@ -147,13 +156,29 @@ Build the provider-neutral static assets:
 pnpm docs:build
 ```
 
-The docs use hash routes, so the static assets do not require rewrite rules.
+The docs use hash routes and relative asset paths, so the static assets work
+under a repository path without 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.
+### GitHub Pages
+
+The GitHub Pages site URL is [filipgutica.github.io/ui](https://filipgutica.github.io/ui/).
+The `docs.yml` workflow builds and deploys `docs-dist` on every push to `main`.
+It can also be started manually from the Actions tab. In the repository's
+**Settings → Pages**, select **GitHub Actions** as the build and deployment source.
+
+GitHub Pages serves static files and cannot run the Open VSX API. The workflow
+sets `VITE_STATIC_HOST=true` to disable live Open VSX search and imports;
+built-in themes and local theme-file imports remain available. To build the
+same static configuration locally:
+
+```sh
+VITE_STATIC_HOST=true pnpm docs:build
+```
+
+Other production hosts must provide `/api/open-vsx` for live Open VSX imports.
+Netlify and Amplify can use a serverless adapter.
 
 ## Development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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 {