@svgrid/grid 2.2.31 → 2.2.33

package/src/ui-localization.test.ts

@@ -0,0 +1,113 @@
+/**
+ * Every user-facing string in the kit must be overridable.
+ *
+ * These components shipped chrome copy - toolbar tooltips, "No matches", the
+ * lazy-load placeholder, search-box labels - baked in as literals, so an app in
+ * any other language had English fragments it could not reach. Each is now a
+ * prop; these tests pin that down so the strings cannot quietly go back to
+ * being hard-coded.
+ */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvRichText from './SvRichText.svelte'
+import SvMultiSelect from './SvMultiSelect.svelte'
+import SvGridSelect from './SvGridSelect.svelte'
+import SvTree from './SvTree.svelte'
+
+function mnt(Comp: unknown, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const app = mount(Comp as any, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => {
+  cleanup?.()
+  cleanup = null
+  document.querySelectorAll('.sv-ms__panel, .sv-gs__panel').forEach((n) => n.remove())
+})
+
+describe('SvRichText localization', () => {
+  it('defaults to English toolbar labels', () => {
+    const g = mnt(SvRichText, {})
+    cleanup = g.destroy
+    const bold = g.target.querySelector('[data-tool="bold"]')!
+    expect(bold.getAttribute('title')).toBe('Bold')
+    expect(bold.getAttribute('aria-label')).toBe('Bold')
+    expect(g.target.querySelector('[role="toolbar"]')!.getAttribute('aria-label')).toBe('Formatting')
+  })
+
+  it('takes per-tool overrides through `messages`', () => {
+    const g = mnt(SvRichText, { messages: { bold: 'Fett', italic: 'Kursiv', toolbar: 'Formatierung' } })
+    cleanup = g.destroy
+    const bold = g.target.querySelector('[data-tool="bold"]')!
+    expect(bold.getAttribute('title')).toBe('Fett')
+    expect(bold.getAttribute('aria-label')).toBe('Fett')
+    expect(g.target.querySelector('[data-tool="italic"]')!.getAttribute('title')).toBe('Kursiv')
+    expect(g.target.querySelector('[role="toolbar"]')!.getAttribute('aria-label')).toBe('Formatierung')
+    // An un-overridden key keeps its default rather than going blank.
+    expect(g.target.querySelector('[data-tool="underline"]')!.getAttribute('title')).toBe('Underline')
+  })
+
+  it('keeps the glyphs fixed - they are not language-dependent', () => {
+    const g = mnt(SvRichText, { messages: { bold: 'Fett' } })
+    cleanup = g.destroy
+    expect(g.target.querySelector('[data-tool="bold"]')!.textContent?.trim()).toBe('B')
+  })
+})
+
+describe('empty / search text is overridable', () => {
+  it('SvMultiSelect emptyText + search chrome', () => {
+    const g = mnt(SvMultiSelect, {
+      options: [],
+      emptyText: 'Keine Treffer',
+      searchPlaceholder: 'Suchen…',
+      searchLabel: 'Optionen suchen',
+    })
+    cleanup = g.destroy
+    g.target.querySelector<HTMLButtonElement>('.sv-ms__trigger')?.click()
+    flushSync()
+    const panel = document.querySelector('.sv-ms__panel')
+    expect(panel?.textContent).toContain('Keine Treffer')
+    const search = panel?.querySelector('input')
+    expect(search?.getAttribute('placeholder')).toBe('Suchen…')
+    expect(search?.getAttribute('aria-label')).toBe('Optionen suchen')
+  })
+
+  it('SvGridSelect emptyText + search chrome', () => {
+    const g = mnt(SvGridSelect, {
+      columns: [{ field: 'name', header: 'Name' }],
+      options: [],
+      emptyText: 'Sin resultados',
+      searchPlaceholder: 'Buscar…',
+      searchLabel: 'Buscar opciones',
+    })
+    cleanup = g.destroy
+    g.target.querySelector<HTMLButtonElement>('.sv-gs__trigger')?.click()
+    flushSync()
+    const panel = document.querySelector('.sv-gs__panel')
+    expect(panel?.textContent).toContain('Sin resultados')
+    const search = panel?.querySelector('input')
+    expect(search?.getAttribute('placeholder')).toBe('Buscar…')
+    expect(search?.getAttribute('aria-label')).toBe('Buscar opciones')
+  })
+
+  it('SvTree lazy-load placeholder', async () => {
+    let resolveKids: (v: Array<{ id: string; label: string }>) => void = () => {}
+    const g = mnt(SvTree, {
+      nodes: [{ id: 'root', label: 'Root', lazy: true }],
+      loadChildren: () => new Promise<Array<{ id: string; label: string }>>((r) => { resolveKids = r }),
+      loadingText: 'Chargement…',
+    })
+    cleanup = g.destroy
+    g.target.querySelector<HTMLElement>('.sv-tree__twist')?.click()
+    flushSync()
+    await Promise.resolve()
+    flushSync()
+    expect(g.target.textContent).toContain('Chargement…')
+    resolveKids([{ id: 'kid', label: 'Child' }])
+  })
+})

package/themes/ag-alpine.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 3px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #2196f3;
+  --sg-muted-bg: rgba(33, 150, 243, 0.1);
+  --sg-skeleton-bg: rgba(33, 150, 243, 0.1);
+  --sg-radius-lg: 6px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #babfc7;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f8f8f8;
   --sg-scrollbar-border: #babfc7;
   --sg-scrollbar-thumb: rgba(24, 29, 31, 0.5);
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 3px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #2196f3;
+  --sg-muted-bg: rgba(33, 150, 243, 0.1);
+  --sg-skeleton-bg: rgba(33, 150, 243, 0.1);
+  --sg-radius-lg: 6px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #68686e;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #222628;
   --sg-scrollbar-border: #68686e;
   --sg-scrollbar-thumb: rgba(255, 255, 255, 0.5);

package/themes/antd.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #1677ff;
+  --sg-muted-bg: #f5f5f5;
+  --sg-skeleton-bg: #f5f5f5;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #d9d9d9;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #fafafa;
   --sg-scrollbar-border: #d9d9d9;
   --sg-scrollbar-thumb: rgba(0, 0, 0, 0.65);
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #177ddc;
+  --sg-muted-bg: #262626;
+  --sg-skeleton-bg: #262626;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #424242;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #1f1f1f;
   --sg-scrollbar-border: #424242;
   --sg-scrollbar-thumb: rgba(255, 255, 255, 0.65);

package/themes/atlassian.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 3px;
   --sg-font: "Charlie Display", "Atlassian Sans", -apple-system, "Segoe UI", sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #0c66e4;
+  --sg-muted-bg: #f1f2f4;
+  --sg-skeleton-bg: #f1f2f4;
+  --sg-radius-lg: 6px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #dcdfe4;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #fafbfc;
   --sg-scrollbar-border: #dcdfe4;
   --sg-scrollbar-thumb: #44546f;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 3px;
   --sg-font: "Charlie Display", "Atlassian Sans", -apple-system, "Segoe UI", sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #579dff;
+  --sg-muted-bg: #2c333a;
+  --sg-skeleton-bg: #2c333a;
+  --sg-radius-lg: 6px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #38414a;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #22272b;
   --sg-scrollbar-border: #38414a;
   --sg-scrollbar-thumb: #8590a2;

package/themes/bootstrap.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #0d6efd;
+  --sg-muted-bg: #f2f2f2;
+  --sg-skeleton-bg: #f2f2f2;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #dee2e6;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f8f9fa;
   --sg-scrollbar-border: #dee2e6;
   --sg-scrollbar-thumb: #6c757d;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #0d6efd;
+  --sg-muted-bg: #2c3034;
+  --sg-skeleton-bg: #2c3034;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #495057;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #2b3035;
   --sg-scrollbar-border: #495057;
   --sg-scrollbar-thumb: #adb5bd;

package/themes/carbon.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 0px;
   --sg-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #0f62fe;
+  --sg-muted-bg: #e8e8e8;
+  --sg-skeleton-bg: #e8e8e8;
+  --sg-radius-lg: 0px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #e0e0e0;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #e0e0e0;
   --sg-scrollbar-border: #e0e0e0;
   --sg-scrollbar-thumb: #525252;
@@ -45,6 +56,17 @@
   --sg-on-accent: #18181b;
   --sg-radius: 0px;
   --sg-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #78a9ff;
+  --sg-muted-bg: #333333;
+  --sg-skeleton-bg: #333333;
+  --sg-radius-lg: 0px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #393939;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #393939;
   --sg-scrollbar-border: #393939;
   --sg-scrollbar-thumb: #c6c6c6;

package/themes/catppuccin.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 8px;
   --sg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #8839ef;
+  --sg-muted-bg: #dce0e8;
+  --sg-skeleton-bg: #dce0e8;
+  --sg-radius-lg: 16px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #ccd0da;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #e6e9ef;
   --sg-scrollbar-border: #ccd0da;
   --sg-scrollbar-thumb: #6c6f85;
@@ -45,6 +56,17 @@
   --sg-on-accent: #18181b;
   --sg-radius: 8px;
   --sg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #cba6f7;
+  --sg-muted-bg: #313244;
+  --sg-skeleton-bg: #313244;
+  --sg-radius-lg: 16px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #313244;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #181825;
   --sg-scrollbar-border: #313244;
   --sg-scrollbar-thumb: #a6adc8;

package/themes/dracula.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #644ac9;
+  --sg-muted-bg: #f2efe3;
+  --sg-skeleton-bg: #f2efe3;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #dedccf;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #ece9df;
   --sg-scrollbar-border: #dedccf;
   --sg-scrollbar-thumb: #6c664b;
@@ -45,6 +56,17 @@
   --sg-on-accent: #18181b;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #bd93f9;
+  --sg-muted-bg: #343746;
+  --sg-skeleton-bg: #343746;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #44475a;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #21222c;
   --sg-scrollbar-border: #44475a;
   --sg-scrollbar-thumb: #6272a4;

package/themes/ember.css

@@ -22,6 +22,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #ff3e00;
+  --sg-muted-bg: #f5f5f4;
+  --sg-skeleton-bg: #f5f5f4;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #e7e5e4;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #fafaf9;
   --sg-scrollbar-border: #e7e5e4;
   --sg-scrollbar-thumb: #78716c;
@@ -57,6 +68,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #ff5a1f;
+  --sg-muted-bg: #1c1917;
+  --sg-skeleton-bg: #1c1917;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #292524;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #1c1917;
   --sg-scrollbar-border: #292524;
   --sg-scrollbar-thumb: #a8a29e;

package/themes/excel.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 0px;
   --sg-font: "Aptos", "Segoe UI", Calibri, Arial, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #107c41;
+  --sg-muted-bg: #edebe9;
+  --sg-skeleton-bg: #edebe9;
+  --sg-radius-lg: 0px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #d2d0ce;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f3f2f1;
   --sg-scrollbar-border: #d2d0ce;
   --sg-scrollbar-thumb: #605e5c;
@@ -45,6 +56,17 @@
   --sg-on-accent: #18181b;
   --sg-radius: 0px;
   --sg-font: "Aptos", "Segoe UI", Calibri, Arial, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #58c188;
+  --sg-muted-bg: #323130;
+  --sg-skeleton-bg: #323130;
+  --sg-radius-lg: 0px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #3b3a39;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #252423;
   --sg-scrollbar-border: #3b3a39;
   --sg-scrollbar-thumb: #c8c6c4;

package/themes/fluent.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #0f6cbd;
+  --sg-muted-bg: #f0f0f0;
+  --sg-skeleton-bg: #f0f0f0;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #e0e0e0;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f5f5f5;
   --sg-scrollbar-border: #e0e0e0;
   --sg-scrollbar-thumb: #616161;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #479ef5;
+  --sg-muted-bg: #3d3d3d;
+  --sg-skeleton-bg: #3d3d3d;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #666666;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #141414;
   --sg-scrollbar-border: #666666;
   --sg-scrollbar-thumb: #d6d6d6;

package/themes/github.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #0969da;
+  --sg-muted-bg: #f6f8fa;
+  --sg-skeleton-bg: #f6f8fa;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #d1d9e0;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f6f8fa;
   --sg-scrollbar-border: #d1d9e0;
   --sg-scrollbar-thumb: #59636e;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #4493f8;
+  --sg-muted-bg: #151b23;
+  --sg-skeleton-bg: #151b23;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #3d444d;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #151b23;
   --sg-scrollbar-border: #3d444d;
   --sg-scrollbar-thumb: #9198a1;

package/themes/linear.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #5e6ad2;
+  --sg-muted-bg: #f4f4f5;
+  --sg-skeleton-bg: #f4f4f5;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #e9e9eb;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f7f8f8;
   --sg-scrollbar-border: #e9e9eb;
   --sg-scrollbar-thumb: #6b6f76;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 6px;
   --sg-font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #5e6ad2;
+  --sg-muted-bg: #1a1b1e;
+  --sg-skeleton-bg: #1a1b1e;
+  --sg-radius-lg: 12px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #23252a;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #0f1011;
   --sg-scrollbar-border: #23252a;
   --sg-scrollbar-thumb: #8a8f98;

package/themes/material.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 8px;
   --sg-font: "Roboto Flex", Roboto, "Segoe UI", system-ui, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #6750a4;
+  --sg-muted-bg: #ece6f0;
+  --sg-skeleton-bg: #ece6f0;
+  --sg-radius-lg: 16px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #cac4d0;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f3edf7;
   --sg-scrollbar-border: #cac4d0;
   --sg-scrollbar-thumb: #49454f;
@@ -45,6 +56,17 @@
   --sg-on-accent: #18181b;
   --sg-radius: 8px;
   --sg-font: "Roboto Flex", Roboto, "Segoe UI", system-ui, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #d0bcff;
+  --sg-muted-bg: #2b2930;
+  --sg-skeleton-bg: #2b2930;
+  --sg-radius-lg: 16px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #49454f;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #211f26;
   --sg-scrollbar-border: #49454f;
   --sg-scrollbar-thumb: #cac4d0;

package/themes/nord.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #5e81ac;
+  --sg-muted-bg: #dde3ec;
+  --sg-skeleton-bg: #dde3ec;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #d8dee9;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #e5e9f0;
   --sg-scrollbar-border: #d8dee9;
   --sg-scrollbar-thumb: #4c566a;
@@ -45,6 +56,17 @@
   --sg-on-accent: #18181b;
   --sg-radius: 4px;
   --sg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #88c0d0;
+  --sg-muted-bg: #3b4252;
+  --sg-skeleton-bg: #3b4252;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #434c5e;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #3b4252;
   --sg-scrollbar-border: #434c5e;
   --sg-scrollbar-thumb: #4c566a;

package/themes/notion.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #2383e2;
+  --sg-muted-bg: #f1f1ef;
+  --sg-skeleton-bg: #f1f1ef;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #e9e9e7;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f7f6f3;
   --sg-scrollbar-border: #e9e9e7;
   --sg-scrollbar-thumb: #787774;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #529cca;
+  --sg-muted-bg: #252525;
+  --sg-skeleton-bg: #252525;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #2f2f2f;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #202020;
   --sg-scrollbar-border: #2f2f2f;
   --sg-scrollbar-thumb: #9b9b9b;

package/themes/salesforce.css

@@ -16,6 +16,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: "Salesforce Sans", "SF Pro", Helvetica, Arial, sans-serif;
+  --sg-danger: #dc2626;
+  --sg-success: #16a34a;
+  --sg-warning: #d97706;
+  --sg-info: #0891b2;
+  --sg-focus-ring: #0176d3;
+  --sg-muted-bg: #f3f3f3;
+  --sg-skeleton-bg: #f3f3f3;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #d97706;
+  --sg-rating-empty: #c9c9c9;
+  --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f3f3f3;
   --sg-scrollbar-border: #c9c9c9;
   --sg-scrollbar-thumb: #757575;
@@ -45,6 +56,17 @@
   --sg-on-accent: #ffffff;
   --sg-radius: 4px;
   --sg-font: "Salesforce Sans", "SF Pro", Helvetica, Arial, sans-serif;
+  --sg-danger: #f87171;
+  --sg-success: #4ade80;
+  --sg-warning: #fbbf24;
+  --sg-info: #22d3ee;
+  --sg-focus-ring: #1b96ff;
+  --sg-muted-bg: #2e2e2e;
+  --sg-skeleton-bg: #2e2e2e;
+  --sg-radius-lg: 8px;
+  --sg-rating-on: #fbbf24;
+  --sg-rating-empty: #3e3e3c;
+  --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #2e2e2e;
   --sg-scrollbar-border: #3e3e3c;
   --sg-scrollbar-thumb: #c9c9c9;