@svgrid/grid 2.4.0 → 2.5.0

package/dist/themes/index.js

@@ -66,8 +66,8 @@ export const themePresets = [
         light: { bg: '#ffffff', fg: '#1f2328', muted: '#59636e', border: '#d1d9e0', headerBg: '#f6f8fa', headerFg: '#59636e', accent: '#0969da', rowAlt: '#ffffff', rowHover: '#f6f8fa', selectionBg: '#ddf4ff' },
         dark: { bg: '#0d1117', fg: '#f0f6fc', muted: '#9198a1', border: '#3d444d', headerBg: '#151b23', headerFg: '#9198a1', accent: '#4493f8', rowAlt: '#0d1117', rowHover: '#151b23', selectionBg: 'rgba(56, 139, 253, 0.10)' } },
     { id: 'antd', name: 'Ant Design', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif',
-        light: { bg: '#ffffff', fg: 'rgba(0, 0, 0, 0.88)', muted: 'rgba(0, 0, 0, 0.65)', border: '#d9d9d9', headerBg: '#fafafa', headerFg: 'rgba(0, 0, 0, 0.88)', accent: '#1677ff', rowAlt: '#ffffff', rowHover: '#f5f5f5', selectionBg: '#e6f4ff' },
-        dark: { bg: '#141414', fg: 'rgba(255, 255, 255, 0.85)', muted: 'rgba(255, 255, 255, 0.65)', border: '#424242', headerBg: '#1f1f1f', headerFg: 'rgba(255, 255, 255, 0.85)', accent: '#177ddc', rowAlt: '#141414', rowHover: '#262626', selectionBg: '#111a2c' } },
+        light: { bg: '#ffffff', fg: 'rgba(0, 0, 0, 0.88)', muted: 'rgba(0, 0, 0, 0.65)', border: '#d9d9d9', headerBg: '#fafafa', headerFg: 'rgba(0, 0, 0, 0.88)', accent: '#066dff', rowAlt: '#ffffff', rowHover: '#f5f5f5', selectionBg: '#e6f4ff' },
+        dark: { bg: '#141414', fg: 'rgba(255, 255, 255, 0.85)', muted: 'rgba(255, 255, 255, 0.65)', border: '#424242', headerBg: '#1f1f1f', headerFg: 'rgba(255, 255, 255, 0.85)', accent: '#1678d3', rowAlt: '#141414', rowHover: '#262626', selectionBg: '#111a2c' } },
     { id: 'ag-alpine', name: 'Alpine', radius: 3, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         light: { bg: '#ffffff', fg: '#181d1f', muted: 'rgba(24, 29, 31, 0.5)', border: '#babfc7', headerBg: '#f8f8f8', headerFg: '#181d1f', accent: '#2196f3', rowAlt: '#fcfcfc', rowHover: 'rgba(33, 150, 243, 0.1)', selectionBg: 'rgba(33, 150, 243, 0.3)' },
         dark: { bg: '#181d1f', fg: '#ffffff', muted: 'rgba(255, 255, 255, 0.5)', border: '#68686e', headerBg: '#222628', headerFg: '#ffffff', accent: '#2196f3', rowAlt: '#222628', rowHover: 'rgba(33, 150, 243, 0.1)', selectionBg: 'rgba(33, 150, 243, 0.3)' } },
@@ -84,7 +84,7 @@ export const themePresets = [
         light: { bg: '#ffffff', fg: '#37352f', muted: '#787774', border: '#e9e9e7', headerBg: '#f7f6f3', headerFg: '#787774', accent: '#2383e2', rowAlt: '#fbfbfa', rowHover: '#f1f1ef', selectionBg: '#d9eaf7' },
         dark: { bg: '#191919', fg: '#d4d4d4', muted: '#9b9b9b', border: '#2f2f2f', headerBg: '#202020', headerFg: '#9b9b9b', accent: '#529cca', rowAlt: '#1c1c1c', rowHover: '#252525', selectionBg: '#20415c' } },
     { id: 'nord', name: 'Nord', radius: 4, font: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        light: { bg: '#eceff4', fg: '#2e3440', muted: '#4c566a', border: '#d8dee9', headerBg: '#e5e9f0', headerFg: '#2e3440', accent: '#5e81ac', rowAlt: '#e5e9f0', rowHover: '#dde3ec', selectionBg: '#d8dee9' },
+        light: { bg: '#eceff4', fg: '#2e3440', muted: '#4c566a', border: '#d8dee9', headerBg: '#e5e9f0', headerFg: '#2e3440', accent: '#5579a5', rowAlt: '#e5e9f0', rowHover: '#dde3ec', selectionBg: '#d8dee9' },
         dark: { bg: '#2e3440', fg: '#d8dee9', muted: '#4c566a', border: '#434c5e', headerBg: '#3b4252', headerFg: '#e5e9f0', accent: '#88c0d0', rowAlt: '#333b48', rowHover: '#3b4252', selectionBg: '#434c5e' } },
     { id: 'dracula', name: 'Dracula', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         light: { bg: '#fffbeb', fg: '#1f1f1f', muted: '#6c664b', border: '#dedccf', headerBg: '#ece9df', headerFg: '#1f1f1f', accent: '#644ac9', rowAlt: '#fffdf5', rowHover: '#f2efe3', selectionBg: '#cfcfde' },
@@ -97,16 +97,35 @@ export const themePresets = [
 export const defaultThemePreset = themePresets.find((t) => t.id === 'tailwind') ?? themePresets[0];
 /** Look up a preset by id. */
 export const getThemePreset = (id) => id ? themePresets.find((t) => t.id === id) : undefined;
-/** A readable (near-black / white) foreground for text placed on the accent. */
+/** WCAG 2.1 relative luminance. */
+function relativeLuminance(hex) {
+    const n = parseInt(hex, 16);
+    const chan = (v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * chan((n >> 16) & 255) + 0.7152 * chan((n >> 8) & 255) + 0.0722 * chan(n & 255);
+}
+/** WCAG contrast ratio between two 6-digit hex colors, 1 (identical) to 21. */
+function contrastRatio(a, b) {
+    const [x, y] = [relativeLuminance(a), relativeLuminance(b)];
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+/**
+ * A readable (near-black / white) foreground for text placed on the accent.
+ *
+ * Picks whichever candidate has the higher WCAG contrast against the accent.
+ * This used to threshold a YIQ luminance approximation at 0.6, which handed
+ * white text to every mid-tone accent - Tailwind's indigo in dark mode scored
+ * 2.98:1 against white where AA wants 4.5. Comparing real contrast ratios fixes
+ * that class of preset without touching any palette.
+ */
 function onAccent(accent) {
     const m = /^#?([0-9a-f]{6})$/i.exec(accent.trim());
     if (!m)
         return '#ffffff';
-    const n = parseInt(m[1], 16);
-    const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
-    // Perceived luminance (sRGB, quick approximation).
-    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return lum > 0.6 ? '#18181b' : '#ffffff';
+    const hex = m[1];
+    return contrastRatio('18181b', hex) >= contrastRatio('ffffff', hex) ? '#18181b' : '#ffffff';
 }
 /** Resolve the effective `--sg-*` tokens for a preset in a given mode, with an
  *  optional accent override applied. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/svgrid.filter-menu-listbox.svelte.test.ts

@@ -93,11 +93,20 @@ async function openFilterMenu(target: HTMLElement) {
   // failed once that way in a full-suite run. Every caller here opens a menu on
   // a column that has values, so a populated list is the settled state to wait
   // for, and each test's own assertions are unchanged.
-  await vi.waitFor(() => {
-    const menu = target.querySelector('.sv-grid-filter-menu')
-    expect(menu).not.toBeNull()
-    expect(menu!.querySelectorAll('[role="option"]').length).toBeGreaterThan(0)
-  })
+  //
+  // The 1s default is not enough for the lazy chunk when `test:lib` runs the
+  // whole suite with `--coverage`: instrumentation plus parallel load pushes
+  // the import past a second and the menu is still null when the clock runs
+  // out. The assertions are unchanged - this only waits longer for a dynamic
+  // import, so a slow machine reports a real failure rather than a timeout.
+  await vi.waitFor(
+    () => {
+      const menu = target.querySelector('.sv-grid-filter-menu')
+      expect(menu).not.toBeNull()
+      expect(menu!.querySelectorAll('[role="option"]').length).toBeGreaterThan(0)
+    },
+    { timeout: 5000 },
+  )
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 

package/src/themes/index.ts

@@ -126,8 +126,8 @@ export const themePresets: ThemePreset[] = [
     light: { bg: '#ffffff', fg: '#1f2328', muted: '#59636e', border: '#d1d9e0', headerBg: '#f6f8fa', headerFg: '#59636e', accent: '#0969da', rowAlt: '#ffffff', rowHover: '#f6f8fa', selectionBg: '#ddf4ff' },
     dark: { bg: '#0d1117', fg: '#f0f6fc', muted: '#9198a1', border: '#3d444d', headerBg: '#151b23', headerFg: '#9198a1', accent: '#4493f8', rowAlt: '#0d1117', rowHover: '#151b23', selectionBg: 'rgba(56, 139, 253, 0.10)' } },
   { id: 'antd', name: 'Ant Design', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif',
-    light: { bg: '#ffffff', fg: 'rgba(0, 0, 0, 0.88)', muted: 'rgba(0, 0, 0, 0.65)', border: '#d9d9d9', headerBg: '#fafafa', headerFg: 'rgba(0, 0, 0, 0.88)', accent: '#1677ff', rowAlt: '#ffffff', rowHover: '#f5f5f5', selectionBg: '#e6f4ff' },
-    dark: { bg: '#141414', fg: 'rgba(255, 255, 255, 0.85)', muted: 'rgba(255, 255, 255, 0.65)', border: '#424242', headerBg: '#1f1f1f', headerFg: 'rgba(255, 255, 255, 0.85)', accent: '#177ddc', rowAlt: '#141414', rowHover: '#262626', selectionBg: '#111a2c' } },
+    light: { bg: '#ffffff', fg: 'rgba(0, 0, 0, 0.88)', muted: 'rgba(0, 0, 0, 0.65)', border: '#d9d9d9', headerBg: '#fafafa', headerFg: 'rgba(0, 0, 0, 0.88)', accent: '#066dff', rowAlt: '#ffffff', rowHover: '#f5f5f5', selectionBg: '#e6f4ff' },
+    dark: { bg: '#141414', fg: 'rgba(255, 255, 255, 0.85)', muted: 'rgba(255, 255, 255, 0.65)', border: '#424242', headerBg: '#1f1f1f', headerFg: 'rgba(255, 255, 255, 0.85)', accent: '#1678d3', rowAlt: '#141414', rowHover: '#262626', selectionBg: '#111a2c' } },
   { id: 'ag-alpine', name: 'Alpine', radius: 3, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     light: { bg: '#ffffff', fg: '#181d1f', muted: 'rgba(24, 29, 31, 0.5)', border: '#babfc7', headerBg: '#f8f8f8', headerFg: '#181d1f', accent: '#2196f3', rowAlt: '#fcfcfc', rowHover: 'rgba(33, 150, 243, 0.1)', selectionBg: 'rgba(33, 150, 243, 0.3)' },
     dark: { bg: '#181d1f', fg: '#ffffff', muted: 'rgba(255, 255, 255, 0.5)', border: '#68686e', headerBg: '#222628', headerFg: '#ffffff', accent: '#2196f3', rowAlt: '#222628', rowHover: 'rgba(33, 150, 243, 0.1)', selectionBg: 'rgba(33, 150, 243, 0.3)' } },
@@ -144,7 +144,7 @@ export const themePresets: ThemePreset[] = [
     light: { bg: '#ffffff', fg: '#37352f', muted: '#787774', border: '#e9e9e7', headerBg: '#f7f6f3', headerFg: '#787774', accent: '#2383e2', rowAlt: '#fbfbfa', rowHover: '#f1f1ef', selectionBg: '#d9eaf7' },
     dark: { bg: '#191919', fg: '#d4d4d4', muted: '#9b9b9b', border: '#2f2f2f', headerBg: '#202020', headerFg: '#9b9b9b', accent: '#529cca', rowAlt: '#1c1c1c', rowHover: '#252525', selectionBg: '#20415c' } },
   { id: 'nord', name: 'Nord', radius: 4, font: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    light: { bg: '#eceff4', fg: '#2e3440', muted: '#4c566a', border: '#d8dee9', headerBg: '#e5e9f0', headerFg: '#2e3440', accent: '#5e81ac', rowAlt: '#e5e9f0', rowHover: '#dde3ec', selectionBg: '#d8dee9' },
+    light: { bg: '#eceff4', fg: '#2e3440', muted: '#4c566a', border: '#d8dee9', headerBg: '#e5e9f0', headerFg: '#2e3440', accent: '#5579a5', rowAlt: '#e5e9f0', rowHover: '#dde3ec', selectionBg: '#d8dee9' },
     dark: { bg: '#2e3440', fg: '#d8dee9', muted: '#4c566a', border: '#434c5e', headerBg: '#3b4252', headerFg: '#e5e9f0', accent: '#88c0d0', rowAlt: '#333b48', rowHover: '#3b4252', selectionBg: '#434c5e' } },
   { id: 'dracula', name: 'Dracula', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     light: { bg: '#fffbeb', fg: '#1f1f1f', muted: '#6c664b', border: '#dedccf', headerBg: '#ece9df', headerFg: '#1f1f1f', accent: '#644ac9', rowAlt: '#fffdf5', rowHover: '#f2efe3', selectionBg: '#cfcfde' },
@@ -161,15 +161,36 @@ export const defaultThemePreset: ThemePreset = themePresets.find((t) => t.id ===
 export const getThemePreset = (id?: string): ThemePreset | undefined =>
   id ? themePresets.find((t) => t.id === id) : undefined
 
-/** A readable (near-black / white) foreground for text placed on the accent. */
+/** WCAG 2.1 relative luminance. */
+function relativeLuminance(hex: string): number {
+  const n = parseInt(hex, 16)
+  const chan = (v: number) => {
+    const c = v / 255
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * chan((n >> 16) & 255) + 0.7152 * chan((n >> 8) & 255) + 0.0722 * chan(n & 255)
+}
+
+/** WCAG contrast ratio between two 6-digit hex colors, 1 (identical) to 21. */
+function contrastRatio(a: string, b: string): number {
+  const [x, y] = [relativeLuminance(a), relativeLuminance(b)]
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05)
+}
+
+/**
+ * A readable (near-black / white) foreground for text placed on the accent.
+ *
+ * Picks whichever candidate has the higher WCAG contrast against the accent.
+ * This used to threshold a YIQ luminance approximation at 0.6, which handed
+ * white text to every mid-tone accent - Tailwind's indigo in dark mode scored
+ * 2.98:1 against white where AA wants 4.5. Comparing real contrast ratios fixes
+ * that class of preset without touching any palette.
+ */
 function onAccent(accent: string): string {
   const m = /^#?([0-9a-f]{6})$/i.exec(accent.trim())
   if (!m) return '#ffffff'
-  const n = parseInt(m[1]!, 16)
-  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255
-  // Perceived luminance (sRGB, quick approximation).
-  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-  return lum > 0.6 ? '#18181b' : '#ffffff'
+  const hex = m[1]!
+  return contrastRatio('18181b', hex) >= contrastRatio('ffffff', hex) ? '#18181b' : '#ffffff'
 }
 
 /** Resolve the effective `--sg-*` tokens for a preset in a given mode, with an

package/themes/ag-alpine.css

@@ -13,7 +13,7 @@
   --sg-input-bg: #ffffff;
   --sg-input-border: #babfc7;
   --sg-accent: #2196f3;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 3px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --sg-danger: #dc2626;
@@ -53,7 +53,7 @@
   --sg-input-bg: #181d1f;
   --sg-input-border: #68686e;
   --sg-accent: #2196f3;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 3px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --sg-danger: #f87171;

package/themes/antd.css

@@ -12,7 +12,7 @@
   --sg-selection-bg: #e6f4ff;
   --sg-input-bg: #ffffff;
   --sg-input-border: #d9d9d9;
-  --sg-accent: #1677ff;
+  --sg-accent: #066dff;
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
@@ -20,7 +20,7 @@
   --sg-success: #16a34a;
   --sg-warning: #d97706;
   --sg-info: #0891b2;
-  --sg-focus-ring: #1677ff;
+  --sg-focus-ring: #066dff;
   --sg-muted-bg: #f5f5f5;
   --sg-skeleton-bg: #f5f5f5;
   --sg-radius-lg: 12px;
@@ -52,7 +52,7 @@
   --sg-selection-bg: #111a2c;
   --sg-input-bg: #141414;
   --sg-input-border: #424242;
-  --sg-accent: #177ddc;
+  --sg-accent: #1678d3;
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
@@ -60,7 +60,7 @@
   --sg-success: #4ade80;
   --sg-warning: #fbbf24;
   --sg-info: #22d3ee;
-  --sg-focus-ring: #177ddc;
+  --sg-focus-ring: #1678d3;
   --sg-muted-bg: #262626;
   --sg-skeleton-bg: #262626;
   --sg-radius-lg: 12px;

package/themes/atlassian.css

@@ -53,7 +53,7 @@
   --sg-input-bg: #1d2125;
   --sg-input-border: #38414a;
   --sg-accent: #579dff;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 3px;
   --sg-font: "Charlie Display", "Atlassian Sans", -apple-system, "Segoe UI", sans-serif;
   --sg-danger: #f87171;

package/themes/ember.css

@@ -19,7 +19,7 @@
   --sg-input-bg: #ffffff;
   --sg-input-border: #e7e5e4;
   --sg-accent: #ff3e00;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 6px;
   --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --sg-danger: #dc2626;
@@ -65,7 +65,7 @@
   --sg-input-bg: #0c0a09;
   --sg-input-border: #292524;
   --sg-accent: #ff5a1f;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 6px;
   --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --sg-danger: #f87171;

package/themes/fluent.css

@@ -53,7 +53,7 @@
   --sg-input-bg: #1f1f1f;
   --sg-input-border: #666666;
   --sg-accent: #479ef5;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 4px;
   --sg-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
   --sg-danger: #f87171;

package/themes/github.css

@@ -53,7 +53,7 @@
   --sg-input-bg: #0d1117;
   --sg-input-border: #3d444d;
   --sg-accent: #4493f8;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
   --sg-danger: #f87171;

package/themes/nord.css

@@ -12,7 +12,7 @@
   --sg-selection-bg: #d8dee9;
   --sg-input-bg: #eceff4;
   --sg-input-border: #d8dee9;
-  --sg-accent: #5e81ac;
+  --sg-accent: #5579a5;
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -20,7 +20,7 @@
   --sg-success: #16a34a;
   --sg-warning: #d97706;
   --sg-info: #0891b2;
-  --sg-focus-ring: #5e81ac;
+  --sg-focus-ring: #5579a5;
   --sg-muted-bg: #dde3ec;
   --sg-skeleton-bg: #dde3ec;
   --sg-radius-lg: 8px;

package/themes/notion.css

@@ -13,7 +13,7 @@
   --sg-input-bg: #ffffff;
   --sg-input-border: #e9e9e7;
   --sg-accent: #2383e2;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 4px;
   --sg-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --sg-danger: #dc2626;
@@ -53,7 +53,7 @@
   --sg-input-bg: #191919;
   --sg-input-border: #2f2f2f;
   --sg-accent: #529cca;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 4px;
   --sg-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --sg-danger: #f87171;

package/themes/salesforce.css

@@ -53,7 +53,7 @@
   --sg-input-bg: #181818;
   --sg-input-border: #3e3e3c;
   --sg-accent: #1b96ff;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 4px;
   --sg-font: "Salesforce Sans", "SF Pro", Helvetica, Arial, sans-serif;
   --sg-danger: #f87171;

package/themes/tailwind.css

@@ -53,7 +53,7 @@
   --sg-input-bg: #0f172a;
   --sg-input-border: #334155;
   --sg-accent: #818cf8;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 6px;
   --sg-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --sg-danger: #f87171;

package/themes/vercel.css

@@ -53,7 +53,7 @@
   --sg-input-bg: #000000;
   --sg-input-border: #333333;
   --sg-accent: #3291ff;
-  --sg-on-accent: #ffffff;
+  --sg-on-accent: #18181b;
   --sg-radius: 6px;
   --sg-font: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --sg-danger: #f87171;