@svgrid/grid 2.2.30 → 2.2.32

package/src/tree-row-model.test.ts

@@ -0,0 +1,169 @@
+import { describe, expect, it } from 'vitest'
+import { createTreeRowModel, flattenTreeData } from './core'
+
+type Node = { id: number; parent: number | null; name: string }
+
+/** Minimal Row stand-ins - the model only reads `original`, `id` and spreads. */
+function rowsFrom(data: Node[]) {
+  return data.map((original, index) => ({
+    id: String(original.id),
+    index,
+    original,
+    depth: 0,
+    getCanExpand: () => false,
+    getIsExpanded: () => false,
+    toggleExpanded: () => {},
+    getIsSelected: () => false,
+    toggleSelected: () => {},
+    getAllCells: () => [],
+    getCellValueByColumnId: (c: string) => (original as never as Record<string, unknown>)[c],
+  })) as never[]
+}
+
+let expandedState: Record<string, boolean> = {}
+const table = {
+  getState: () => ({ expanded: expandedState }),
+  setExpanded: (fn: (p: Record<string, boolean>) => Record<string, boolean>) => {
+    expandedState = fn(expandedState)
+  },
+} as never
+
+const run = (data: Node[], opts = { parentField: 'parent' }) =>
+  createTreeRowModel<never>(opts)({ table, rows: rowsFrom(data) } as never)
+
+const ids = (rows: readonly { id: string }[]) => rows.map((r) => r.id)
+
+describe('createTreeRowModel', () => {
+  const data: Node[] = [
+    { id: 1, parent: null, name: 'root' },
+    { id: 2, parent: 1, name: 'child a' },
+    { id: 3, parent: 1, name: 'child b' },
+    { id: 4, parent: 2, name: 'grandchild' },
+    { id: 5, parent: null, name: 'other root' },
+  ]
+
+  it('nests by parent id and returns only roots', () => {
+    const out = run(data)
+    expect(ids(out)).toEqual(['1', '5'])
+  })
+
+  it('records depth down the chain', () => {
+    const [root] = run(data) as never as Array<{ depth: number; subRows: never[] }>
+    expect(root!.depth).toBe(0)
+    const child = (root!.subRows as never as Array<{ id: string; depth: number; subRows: never[] }>)[0]!
+    expect(child.depth).toBe(1)
+    expect((child.subRows as never as Array<{ depth: number }>)[0]!.depth).toBe(2)
+  })
+
+  it('marks rows with children expandable and leaves not', () => {
+    const [root, other] = run(data) as never as Array<{ getCanExpand: () => boolean }>
+    expect(root!.getCanExpand()).toBe(true)
+    expect(other!.getCanExpand()).toBe(false)
+  })
+
+  it('counts descendants, not just direct children', () => {
+    const [root] = run(data) as never as Array<{ leafCount: number }>
+    // children a + b, plus a's grandchild
+    expect(root!.leafCount).toBe(3)
+  })
+
+  it('tags rows so they are not mistaken for group banners', async () => {
+    const { isGroupRow } = await import('./cell-values')
+    const [root] = run(data) as never as Array<never>
+    expect((root as never as { __treeRow: boolean }).__treeRow).toBe(true)
+    // Expandable, but must NOT render as a full-width banner.
+    expect(isGroupRow(root!)).toBe(false)
+  })
+
+  it('drives expansion through the table state', () => {
+    expandedState = {}
+    const [root] = run(data) as never as Array<{
+      getIsExpanded: () => boolean
+      toggleExpanded: () => void
+    }>
+    expect(root!.getIsExpanded()).toBe(false)
+    root!.toggleExpanded()
+    expect(expandedState['1']).toBe(true)
+  })
+
+  it('promotes a row whose parent is missing rather than dropping it', () => {
+    // Parent 99 does not exist - e.g. the filter removed it. The row must still
+    // be reachable.
+    const orphaned: Node[] = [
+      { id: 1, parent: null, name: 'root' },
+      { id: 2, parent: 99, name: 'orphan' },
+    ]
+    expect(ids(run(orphaned))).toEqual(['1', '2'])
+  })
+
+  it('survives a parent cycle', () => {
+    const cyclic: Node[] = [
+      { id: 1, parent: 2, name: 'a' },
+      { id: 2, parent: 1, name: 'b' },
+    ]
+    // Neither is a root by parent link, so nothing is emitted rather than
+    // recursing forever. The guard is what matters.
+    expect(() => run(cyclic)).not.toThrow()
+  })
+
+  it('treats a self-parenting row as a root', () => {
+    expect(ids(run([{ id: 1, parent: 1, name: 'self' }]))).toEqual(['1'])
+  })
+
+  it('passes an empty set straight through', () => {
+    expect(run([])).toEqual([])
+  })
+
+  it('honours a custom idField', () => {
+    type K = { key: number; parent: number | null }
+    const keyed = [
+      { key: 10, parent: null },
+      { key: 11, parent: 10 },
+    ] as never as Node[]
+    const out = createTreeRowModel<never>({ parentField: 'parent', idField: 'key' })({
+      table,
+      rows: rowsFrom(keyed),
+    } as never) as never as Array<{ subRows: never[] }>
+    expect(out).toHaveLength(1)
+    expect(out[0]!.subRows).toHaveLength(1)
+  })
+})
+
+describe('flattenTreeData', () => {
+  const nested = [
+    { id: 1, name: 'a', kids: [{ id: 2, name: 'a1', kids: [{ id: 3, name: 'a1a' }] }] },
+    { id: 4, name: 'b' },
+  ]
+
+  it('emits children directly after their parent', () => {
+    const flat = flattenTreeData(nested as never, { childrenField: 'kids' })
+    expect(flat.map((r) => (r as never as { id: number }).id)).toEqual([1, 2, 3, 4])
+  })
+
+  it('stamps the parent link the tree model reads', () => {
+    const flat = flattenTreeData(nested as never, { childrenField: 'kids' }) as never as Array<
+      Record<string, unknown>
+    >
+    expect(flat[0]!.__parentId).toBeNull()
+    expect(flat[1]!.__parentId).toBe(1)
+    expect(flat[2]!.__parentId).toBe(2)
+  })
+
+  it('round-trips into createTreeRowModel', () => {
+    const flat = flattenTreeData(nested as never, { childrenField: 'kids' })
+    const out = createTreeRowModel<never>({ parentField: '__parentId' })({
+      table,
+      rows: rowsFrom(flat as never as Node[]),
+    } as never) as never as Array<{ id: string; subRows: never[] }>
+    expect(out.map((r) => r.id)).toEqual(['1', '4'])
+    expect(out[0]!.subRows).toHaveLength(1)
+  })
+
+  it('accepts a custom parent field name', () => {
+    const flat = flattenTreeData(nested as never, {
+      childrenField: 'kids',
+      parentField: 'pid',
+    }) as never as Array<Record<string, unknown>>
+    expect(flat[1]!.pid).toBe(1)
+  })
+})

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;