@c2n/theme 0.0.6 → 0.0.7

package/dist/tokens.js

@@ -19,6 +19,7 @@ export const tokens = [
     token('color-primary-active', 'color', '#01469a', 'Accent colour while pressed.', '#9cc9ff'),
     token('color-on-primary', 'color', '#ffffff', 'Text and icons drawn on the accent colour.', '#032a5c'),
     token('color-primary-container', 'color', '#edf1fe', 'Soft accent surface, e.g. a selected list item.', '#0f2d5c'),
+    token('color-primary-glow', 'color', 'rgba(2, 101, 220, 0.2)', 'Accent tint for luminous borders and decorative glows.', 'rgba(90, 163, 255, 0.28)'),
     token('color-surface', 'color', '#ffffff', 'Default surface of inputs, lists, cards, dialogs.', '#18181b'),
     token('color-surface-container-low', 'color', '#fafafa', 'Slightly raised surface: side navigation, read-only fields, subtle hover.', '#1f1f23'),
     token('color-surface-container', 'color', '#f4f4f5', 'Hover surface for rows and icon buttons.', '#27272a'),
@@ -53,6 +54,20 @@ export const tokens = [
     // Elevation
     token('shadow-md', 'shadow', '0 8px 24px rgba(24, 24, 27, 0.08)', 'Shadow of popovers, menus and tooltips.', '0 8px 24px rgba(0, 0, 0, 0.45)'),
     token('shadow-lg', 'shadow', '0 24px 60px rgba(0, 0, 0, 0.25)', 'Shadow of dialogs and drawers.', '0 24px 60px rgba(0, 0, 0, 0.6)'),
+    // Data visualisation. The categorical palette is a set: recolour it as a whole, never one slot at a time.
+    // Slots 1-4 are the Okabe-Ito core and stay distinguishable under protanopia, deuteranopia and tritanopia;
+    // 5-7 add hue and lightness separation, and slot 8 is neutral grey, which no colour deficiency collapses
+    // into a chromatic slot. Past four series, label the marks directly rather than relying on hue alone.
+    token('chart-series-1', 'chart', '#0265dc', 'First categorical series. Matches the accent, so a single-series chart reads as brand.', '#5aa3ff'),
+    token('chart-series-2', 'chart', '#ea580c', 'Second categorical series: orange, the Okabe-Ito counterpart to the blue.', '#fb923c'),
+    token('chart-series-3', 'chart', '#0f766e', 'Third categorical series: teal.', '#2dd4bf'),
+    token('chart-series-4', 'chart', '#db2777', 'Fourth categorical series: pink.', '#f472b6'),
+    token('chart-series-5', 'chart', '#a16207', 'Fifth categorical series: gold, dark enough not to collapse into the orange.', '#fbbf24'),
+    token('chart-series-6', 'chart', '#7c3aed', 'Sixth categorical series: violet.', '#a78bfa'),
+    token('chart-series-7', 'chart', '#0891b2', 'Seventh categorical series: cyan.', '#22d3ee'),
+    token('chart-series-8', 'chart', '#52525b', 'Eighth categorical series: neutral grey, for an "other" or residual bucket.', '#a1a1aa'),
+    token('chart-positive', 'chart', '#16a34a', 'Rising values: an up candle, a positive sparkline. Separate from the accent so direction and brand move independently.', '#4ade80'),
+    token('chart-negative', 'chart', '#dc2626', 'Falling values: a down candle, a negative sparkline. Separate from `color-error` so a brand can recolour direction without recolouring failure.', '#f87171'),
 ];
 export const tokenNames = tokens.map((t) => t.name);
 /** Look up a token by its full name. */

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The `@c2n/theme` design tokens.\n *\n * Tokens follow the component variable grammar with the pseudo-component prefix `c2-theme` and no part\n * segment: `--c2-theme--<name>`. The generated `base.css` maps every `@c2n/*` component variable onto one\n * of them, keeping the component's own default as the innermost fallback, e.g.\n * `--c2-list--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #e4e4e7))`.\n *\n * Keep this file to erasable TypeScript syntax: the theme generator imports it directly under Node.\n */\n\nexport const TOKEN_PREFIX = '--c2-theme--'\n\nexport type TokenCategory = 'color' | 'font' | 'radius' | 'border' | 'focus' | 'disabled' | 'motion' | 'shadow'\n\nexport interface TokenDef {\n  /** Full custom property name, e.g. `--c2-theme--color-primary`. */\n  name: string\n  category: TokenCategory\n  /** Light value. `null` means \"not set by default\" (the component fallback applies). */\n  light: string | null\n  /** Dark value; omitted when the token is theme-invariant. */\n  dark?: string\n  description: string\n}\n\nfunction token(name: string, category: TokenCategory, light: string | null, description: string, dark?: string): TokenDef {\n  return { name: `${TOKEN_PREFIX}${name}`, category, light, dark, description }\n}\n\nexport const tokens: TokenDef[] = [\n  // Colour roles\n  token('color-primary', 'color', '#0265dc', 'Accent colour: filled buttons, selected states, focused borders, links.', '#5aa3ff'),\n  token('color-primary-hover', 'color', '#0154b8', 'Accent colour on hover.', '#7bb6ff'),\n  token('color-primary-active', 'color', '#01469a', 'Accent colour while pressed.', '#9cc9ff'),\n  token('color-on-primary', 'color', '#ffffff', 'Text and icons drawn on the accent colour.', '#032a5c'),\n  token('color-primary-container', 'color', '#edf1fe', 'Soft accent surface, e.g. a selected list item.', '#0f2d5c'),\n  token('color-surface', 'color', '#ffffff', 'Default surface of inputs, lists, cards, dialogs.', '#18181b'),\n  token('color-surface-container-low', 'color', '#fafafa', 'Slightly raised surface: side navigation, read-only fields, subtle hover.', '#1f1f23'),\n  token('color-surface-container', 'color', '#f4f4f5', 'Hover surface for rows and icon buttons.', '#27272a'),\n  token('color-on-surface', 'color', '#18181b', 'Primary text colour.', '#f4f4f5'),\n  token('color-on-surface-variant', 'color', '#71717a', 'Secondary text, placeholders, icons, supporting text.', '#a1a1aa'),\n  token('color-outline', 'color', '#d4d4d8', 'Resting border colour of inputs, cards and lists.', '#3f3f46'),\n  token('color-outline-variant', 'color', '#e4e4e7', 'Hairline dividers and light borders.', '#27272a'),\n  token('color-outline-strong', 'color', '#a1a1aa', 'Border colour on hover.', '#52525b'),\n  token('color-error', 'color', '#dc2626', 'Error borders, error text, required indicators.', '#f87171'),\n  token('color-scrim', 'color', 'rgba(9, 9, 11, 0.45)', 'Backdrop behind dialogs and drawers.', 'rgba(0, 0, 0, 0.6)'),\n  token('color-inverse-surface', 'color', '#18181b', 'High-contrast surface, e.g. tooltips.', '#f4f4f5'),\n  token('color-on-inverse-surface', 'color', '#fafafa', 'Text drawn on the inverse surface.', '#18181b'),\n  // Typography\n  token('font-family', 'font', null, 'Font family of every component. Unset by default so components inherit the page font.'),\n  token('font-size-sm', 'font', '12px', 'Small text: supporting text, tooltips, descriptions, timestamps.'),\n  token('font-size-md', 'font', '14px', 'Body text: buttons, inputs, list items, dialog content.'),\n  token('font-weight-medium', 'font', '500', 'Medium weight: buttons, headers, tooltips.'),\n  token('font-weight-semibold', 'font', '600', 'Semibold weight: dialog titles, list headings, avatars.'),\n  // Shape\n  token('radius-sm', 'radius', '4px', 'Small radius: checkboxes, link buttons, inline controls.'),\n  token('radius-md', 'radius', '6px', 'Default radius: buttons, inputs, list items, tooltips.'),\n  token('radius-lg', 'radius', '8px', 'Large radius: cards, panels, popovers.'),\n  token('radius-xl', 'radius', '14px', 'Extra large radius: dialogs.'),\n  token('radius-full', 'radius', '999px', 'Pill / circle radius: avatars, icon buttons.'),\n  // Borders\n  token('border-width', 'border', '1px', 'Width of every themed border.'),\n  token('border', 'border', null, 'Complete resting border shorthand. Unset by default: it falls back to `border-width solid color-outline`.'),\n  // Interaction\n  token('focus-ring', 'focus', '2px solid rgba(2, 101, 220, 0.4)', 'Focus-visible outline of every component.', '2px solid rgba(90, 163, 255, 0.5)'),\n  token('disabled-opacity', 'disabled', '0.38', 'Opacity of disabled components.'),\n  token('motion-scale', 'motion', '1', 'Multiplier applied to every transition and animation duration (0 disables motion).'),\n  // Elevation\n  token('shadow-md', 'shadow', '0 8px 24px rgba(24, 24, 27, 0.08)', 'Shadow of popovers, menus and tooltips.', '0 8px 24px rgba(0, 0, 0, 0.45)'),\n  token('shadow-lg', 'shadow', '0 24px 60px rgba(0, 0, 0, 0.25)', 'Shadow of dialogs and drawers.', '0 24px 60px rgba(0, 0, 0, 0.6)'),\n]\n\nexport const tokenNames = tokens.map((t) => t.name)\n\n/** Look up a token by its full name. */\nexport function getToken(name: string): TokenDef | undefined {\n  return tokens.find((t) => t.name === name)\n}\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The `@c2n/theme` design tokens.\n *\n * Tokens follow the component variable grammar with the pseudo-component prefix `c2-theme` and no part\n * segment: `--c2-theme--<name>`. The generated `base.css` maps every `@c2n/*` component variable onto one\n * of them, keeping the component's own default as the innermost fallback, e.g.\n * `--c2-list--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #e4e4e7))`.\n *\n * Keep this file to erasable TypeScript syntax: the theme generator imports it directly under Node.\n */\n\nexport const TOKEN_PREFIX = '--c2-theme--'\n\nexport type TokenCategory = 'color' | 'font' | 'radius' | 'border' | 'focus' | 'disabled' | 'motion' | 'shadow' | 'chart'\n\nexport interface TokenDef {\n  /** Full custom property name, e.g. `--c2-theme--color-primary`. */\n  name: string\n  category: TokenCategory\n  /** Light value. `null` means \"not set by default\" (the component fallback applies). */\n  light: string | null\n  /** Dark value; omitted when the token is theme-invariant. */\n  dark?: string\n  description: string\n}\n\nfunction token(name: string, category: TokenCategory, light: string | null, description: string, dark?: string): TokenDef {\n  return { name: `${TOKEN_PREFIX}${name}`, category, light, dark, description }\n}\n\nexport const tokens: TokenDef[] = [\n  // Colour roles\n  token('color-primary', 'color', '#0265dc', 'Accent colour: filled buttons, selected states, focused borders, links.', '#5aa3ff'),\n  token('color-primary-hover', 'color', '#0154b8', 'Accent colour on hover.', '#7bb6ff'),\n  token('color-primary-active', 'color', '#01469a', 'Accent colour while pressed.', '#9cc9ff'),\n  token('color-on-primary', 'color', '#ffffff', 'Text and icons drawn on the accent colour.', '#032a5c'),\n  token('color-primary-container', 'color', '#edf1fe', 'Soft accent surface, e.g. a selected list item.', '#0f2d5c'),\n  token('color-primary-glow', 'color', 'rgba(2, 101, 220, 0.2)', 'Accent tint for luminous borders and decorative glows.', 'rgba(90, 163, 255, 0.28)'),\n  token('color-surface', 'color', '#ffffff', 'Default surface of inputs, lists, cards, dialogs.', '#18181b'),\n  token('color-surface-container-low', 'color', '#fafafa', 'Slightly raised surface: side navigation, read-only fields, subtle hover.', '#1f1f23'),\n  token('color-surface-container', 'color', '#f4f4f5', 'Hover surface for rows and icon buttons.', '#27272a'),\n  token('color-on-surface', 'color', '#18181b', 'Primary text colour.', '#f4f4f5'),\n  token('color-on-surface-variant', 'color', '#71717a', 'Secondary text, placeholders, icons, supporting text.', '#a1a1aa'),\n  token('color-outline', 'color', '#d4d4d8', 'Resting border colour of inputs, cards and lists.', '#3f3f46'),\n  token('color-outline-variant', 'color', '#e4e4e7', 'Hairline dividers and light borders.', '#27272a'),\n  token('color-outline-strong', 'color', '#a1a1aa', 'Border colour on hover.', '#52525b'),\n  token('color-error', 'color', '#dc2626', 'Error borders, error text, required indicators.', '#f87171'),\n  token('color-scrim', 'color', 'rgba(9, 9, 11, 0.45)', 'Backdrop behind dialogs and drawers.', 'rgba(0, 0, 0, 0.6)'),\n  token('color-inverse-surface', 'color', '#18181b', 'High-contrast surface, e.g. tooltips.', '#f4f4f5'),\n  token('color-on-inverse-surface', 'color', '#fafafa', 'Text drawn on the inverse surface.', '#18181b'),\n  // Typography\n  token('font-family', 'font', null, 'Font family of every component. Unset by default so components inherit the page font.'),\n  token('font-size-sm', 'font', '12px', 'Small text: supporting text, tooltips, descriptions, timestamps.'),\n  token('font-size-md', 'font', '14px', 'Body text: buttons, inputs, list items, dialog content.'),\n  token('font-weight-medium', 'font', '500', 'Medium weight: buttons, headers, tooltips.'),\n  token('font-weight-semibold', 'font', '600', 'Semibold weight: dialog titles, list headings, avatars.'),\n  // Shape\n  token('radius-sm', 'radius', '4px', 'Small radius: checkboxes, link buttons, inline controls.'),\n  token('radius-md', 'radius', '6px', 'Default radius: buttons, inputs, list items, tooltips.'),\n  token('radius-lg', 'radius', '8px', 'Large radius: cards, panels, popovers.'),\n  token('radius-xl', 'radius', '14px', 'Extra large radius: dialogs.'),\n  token('radius-full', 'radius', '999px', 'Pill / circle radius: avatars, icon buttons.'),\n  // Borders\n  token('border-width', 'border', '1px', 'Width of every themed border.'),\n  token('border', 'border', null, 'Complete resting border shorthand. Unset by default: it falls back to `border-width solid color-outline`.'),\n  // Interaction\n  token('focus-ring', 'focus', '2px solid rgba(2, 101, 220, 0.4)', 'Focus-visible outline of every component.', '2px solid rgba(90, 163, 255, 0.5)'),\n  token('disabled-opacity', 'disabled', '0.38', 'Opacity of disabled components.'),\n  token('motion-scale', 'motion', '1', 'Multiplier applied to every transition and animation duration (0 disables motion).'),\n  // Elevation\n  token('shadow-md', 'shadow', '0 8px 24px rgba(24, 24, 27, 0.08)', 'Shadow of popovers, menus and tooltips.', '0 8px 24px rgba(0, 0, 0, 0.45)'),\n  token('shadow-lg', 'shadow', '0 24px 60px rgba(0, 0, 0, 0.25)', 'Shadow of dialogs and drawers.', '0 24px 60px rgba(0, 0, 0, 0.6)'),\n  // Data visualisation. The categorical palette is a set: recolour it as a whole, never one slot at a time.\n  // Slots 1-4 are the Okabe-Ito core and stay distinguishable under protanopia, deuteranopia and tritanopia;\n  // 5-7 add hue and lightness separation, and slot 8 is neutral grey, which no colour deficiency collapses\n  // into a chromatic slot. Past four series, label the marks directly rather than relying on hue alone.\n  token('chart-series-1', 'chart', '#0265dc', 'First categorical series. Matches the accent, so a single-series chart reads as brand.', '#5aa3ff'),\n  token('chart-series-2', 'chart', '#ea580c', 'Second categorical series: orange, the Okabe-Ito counterpart to the blue.', '#fb923c'),\n  token('chart-series-3', 'chart', '#0f766e', 'Third categorical series: teal.', '#2dd4bf'),\n  token('chart-series-4', 'chart', '#db2777', 'Fourth categorical series: pink.', '#f472b6'),\n  token('chart-series-5', 'chart', '#a16207', 'Fifth categorical series: gold, dark enough not to collapse into the orange.', '#fbbf24'),\n  token('chart-series-6', 'chart', '#7c3aed', 'Sixth categorical series: violet.', '#a78bfa'),\n  token('chart-series-7', 'chart', '#0891b2', 'Seventh categorical series: cyan.', '#22d3ee'),\n  token('chart-series-8', 'chart', '#52525b', 'Eighth categorical series: neutral grey, for an \"other\" or residual bucket.', '#a1a1aa'),\n  token(\n    'chart-positive',\n    'chart',\n    '#16a34a',\n    'Rising values: an up candle, a positive sparkline. Separate from the accent so direction and brand move independently.',\n    '#4ade80',\n  ),\n  token(\n    'chart-negative',\n    'chart',\n    '#dc2626',\n    'Falling values: a down candle, a negative sparkline. Separate from `color-error` so a brand can recolour direction without recolouring failure.',\n    '#f87171',\n  ),\n]\n\nexport const tokenNames = tokens.map((t) => t.name)\n\n/** Look up a token by its full name. */\nexport function getToken(name: string): TokenDef | undefined {\n  return tokens.find((t) => t.name === name)\n}\n"]}

package/dist/tokens.json

@@ -35,6 +35,13 @@
       "dark": "#0f2d5c",
       "description": "Soft accent surface, e.g. a selected list item."
     },
+    {
+      "name": "--c2-theme--color-primary-glow",
+      "category": "color",
+      "light": "rgba(2, 101, 220, 0.2)",
+      "dark": "rgba(90, 163, 255, 0.28)",
+      "description": "Accent tint for luminous borders and decorative glows."
+    },
     {
       "name": "--c2-theme--color-surface",
       "category": "color",
@@ -223,11 +230,126 @@
       "light": "0 24px 60px rgba(0, 0, 0, 0.25)",
       "dark": "0 24px 60px rgba(0, 0, 0, 0.6)",
       "description": "Shadow of dialogs and drawers."
+    },
+    {
+      "name": "--c2-theme--chart-series-1",
+      "category": "chart",
+      "light": "#0265dc",
+      "dark": "#5aa3ff",
+      "description": "First categorical series. Matches the accent, so a single-series chart reads as brand."
+    },
+    {
+      "name": "--c2-theme--chart-series-2",
+      "category": "chart",
+      "light": "#ea580c",
+      "dark": "#fb923c",
+      "description": "Second categorical series: orange, the Okabe-Ito counterpart to the blue."
+    },
+    {
+      "name": "--c2-theme--chart-series-3",
+      "category": "chart",
+      "light": "#0f766e",
+      "dark": "#2dd4bf",
+      "description": "Third categorical series: teal."
+    },
+    {
+      "name": "--c2-theme--chart-series-4",
+      "category": "chart",
+      "light": "#db2777",
+      "dark": "#f472b6",
+      "description": "Fourth categorical series: pink."
+    },
+    {
+      "name": "--c2-theme--chart-series-5",
+      "category": "chart",
+      "light": "#a16207",
+      "dark": "#fbbf24",
+      "description": "Fifth categorical series: gold, dark enough not to collapse into the orange."
+    },
+    {
+      "name": "--c2-theme--chart-series-6",
+      "category": "chart",
+      "light": "#7c3aed",
+      "dark": "#a78bfa",
+      "description": "Sixth categorical series: violet."
+    },
+    {
+      "name": "--c2-theme--chart-series-7",
+      "category": "chart",
+      "light": "#0891b2",
+      "dark": "#22d3ee",
+      "description": "Seventh categorical series: cyan."
+    },
+    {
+      "name": "--c2-theme--chart-series-8",
+      "category": "chart",
+      "light": "#52525b",
+      "dark": "#a1a1aa",
+      "description": "Eighth categorical series: neutral grey, for an \"other\" or residual bucket."
+    },
+    {
+      "name": "--c2-theme--chart-positive",
+      "category": "chart",
+      "light": "#16a34a",
+      "dark": "#4ade80",
+      "description": "Rising values: an up candle, a positive sparkline. Separate from the accent so direction and brand move independently."
+    },
+    {
+      "name": "--c2-theme--chart-negative",
+      "category": "chart",
+      "light": "#dc2626",
+      "dark": "#f87171",
+      "description": "Falling values: a down candle, a negative sparkline. Separate from `color-error` so a brand can recolour direction without recolouring failure."
     }
   ],
   "mapping": {
     "--c2-accordion--border-radius": "--c2-theme--radius-lg",
     "--c2-accordion--transition-duration": "--c2-theme--motion-scale",
+    "--c2-attachment--background": "--c2-theme--color-surface",
+    "--c2-attachment--border": "--c2-theme--color-outline-variant",
+    "--c2-attachment--border-radius": "--c2-theme--radius-xl",
+    "--c2-attachment--color": "--c2-theme--color-on-surface",
+    "--c2-attachment__media--background": "--c2-theme--color-surface-container",
+    "--c2-attachment__media--color": "--c2-theme--color-on-surface-variant",
+    "--c2-attachment__name--font-size": "--c2-theme--font-size-md",
+    "--c2-attachment__name--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-attachment__metadata--color": "--c2-theme--color-on-surface-variant",
+    "--c2-attachment__metadata--font-size": "--c2-theme--font-size-sm",
+    "--c2-attachment__status--color": "--c2-theme--color-on-surface-variant",
+    "--c2-attachment__status__error--color": "--c2-theme--color-error",
+    "--c2-attachment__progress--background": "--c2-theme--color-outline-variant",
+    "--c2-attachment__progress--color": "--c2-theme--color-primary",
+    "--c2-attachment__action--color": "--c2-theme--color-on-surface-variant",
+    "--c2-attachment__action__hover--background": "--c2-theme--color-surface-container",
+    "--c2-attachment__action__focus--outline": "--c2-theme--focus-ring",
+    "--c2-attachment__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-autocomplete--background": "--c2-theme--color-surface",
+    "--c2-autocomplete--color": "--c2-theme--color-on-surface",
+    "--c2-autocomplete--font-size": "--c2-theme--font-size-md",
+    "--c2-autocomplete--border": "--c2-theme--border",
+    "--c2-autocomplete--border-radius": "--c2-theme--radius-lg",
+    "--c2-autocomplete__hover--border": "--c2-theme--color-outline-strong",
+    "--c2-autocomplete__focus--border": "--c2-theme--color-primary",
+    "--c2-autocomplete__focus--outline": "--c2-theme--focus-ring",
+    "--c2-autocomplete__placeholder--color": "--c2-theme--color-on-surface-variant",
+    "--c2-autocomplete__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-autocomplete__icon--color": "--c2-theme--color-on-surface-variant",
+    "--c2-autocomplete__panel--background": "--c2-theme--color-surface",
+    "--c2-autocomplete__panel--border": "--c2-theme--color-outline-variant",
+    "--c2-autocomplete__panel--border-radius": "--c2-theme--radius-lg",
+    "--c2-autocomplete__panel--box-shadow": "--c2-theme--shadow-md",
+    "--c2-autocomplete__header--color": "--c2-theme--color-on-surface-variant",
+    "--c2-autocomplete__header--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-autocomplete__footer--color": "--c2-theme--color-on-surface-variant",
+    "--c2-autocomplete__footer--border-top": "--c2-theme--color-outline-variant",
+    "--c2-autocomplete__option--border-radius": "--c2-theme--radius-md",
+    "--c2-autocomplete__option__active--background": "--c2-theme--color-surface-container",
+    "--c2-autocomplete__option__active--color": "--c2-theme--color-on-surface",
+    "--c2-autocomplete__description--color": "--c2-theme--color-on-surface-variant",
+    "--c2-autocomplete__description--font-size": "--c2-theme--font-size-sm",
+    "--c2-autocomplete__highlight--color": "--c2-theme--color-primary",
+    "--c2-autocomplete__highlight--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-autocomplete__status--color": "--c2-theme--color-on-surface-variant",
     "--c2-avatar--border-top-left-radius": "--c2-theme--radius-full",
     "--c2-avatar--border-top-right-radius": "--c2-theme--radius-full",
     "--c2-avatar--border-bottom-left-radius": "--c2-theme--radius-full",
@@ -274,18 +396,67 @@
     "--c2-card--background": "--c2-theme--color-surface",
     "--c2-card__focus--outline": "--c2-theme--focus-ring",
     "--c2-card__disabled--opacity": "--c2-theme--disabled-opacity",
-    "--c2-chat-input--border-top-left-radius": "--c2-theme--radius-sm",
-    "--c2-chat-input--border-top-right-radius": "--c2-theme--radius-sm",
-    "--c2-chat-input--border-bottom-left-radius": "--c2-theme--radius-sm",
-    "--c2-chat-input--border-bottom-right-radius": "--c2-theme--radius-sm",
-    "--c2-chat-input--border-top": "--c2-theme--border",
-    "--c2-chat-input--border-right": "--c2-theme--border",
-    "--c2-chat-input--border-bottom": "--c2-theme--border",
-    "--c2-chat-input--border-left": "--c2-theme--border",
-    "--c2-chat-input--color": "--c2-theme--color-on-surface",
-    "--c2-chat-input--background": "--c2-theme--color-surface",
-    "--c2-chat-input--font-size": "--c2-theme--font-size-md",
+    "--c2-chart__axis-line--color": "--c2-theme--color-outline-variant",
+    "--c2-chart--background": "--c2-theme--color-surface",
+    "--c2-chart--color": "--c2-theme--color-on-surface",
+    "--c2-chart--font-size": "--c2-theme--font-size-sm",
+    "--c2-chart--border-top": "--c2-theme--color-outline-variant",
+    "--c2-chart--border-right": "--c2-theme--color-outline-variant",
+    "--c2-chart--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-chart--border-left": "--c2-theme--color-outline-variant",
+    "--c2-chart--border-top-left-radius": "--c2-theme--radius-lg",
+    "--c2-chart--border-top-right-radius": "--c2-theme--radius-lg",
+    "--c2-chart--border-bottom-left-radius": "--c2-theme--radius-lg",
+    "--c2-chart--border-bottom-right-radius": "--c2-theme--radius-lg",
+    "--c2-chart__series-1--color": "--c2-theme--chart-series-1",
+    "--c2-chart__series-2--color": "--c2-theme--chart-series-2",
+    "--c2-chart__series-3--color": "--c2-theme--chart-series-3",
+    "--c2-chart__series-4--color": "--c2-theme--chart-series-4",
+    "--c2-chart__series-5--color": "--c2-theme--chart-series-5",
+    "--c2-chart__series-6--color": "--c2-theme--chart-series-6",
+    "--c2-chart__series-7--color": "--c2-theme--chart-series-7",
+    "--c2-chart__series-8--color": "--c2-theme--chart-series-8",
+    "--c2-chart__axis--color": "--c2-theme--color-on-surface-variant",
+    "--c2-chart__axis--font-size": "--c2-theme--font-size-sm",
+    "--c2-chart__grid--color": "--c2-theme--color-outline-variant",
+    "--c2-chart__crosshair--color": "--c2-theme--color-on-surface-variant",
+    "--c2-chart__surface--color": "--c2-theme--color-surface",
+    "--c2-chart__muted--color": "--c2-theme--color-on-surface-variant",
+    "--c2-chart__positive--color": "--c2-theme--chart-positive",
+    "--c2-chart__negative--color": "--c2-theme--chart-negative",
+    "--c2-chart__legend--color": "--c2-theme--color-on-surface-variant",
+    "--c2-chart__legend--font-size": "--c2-theme--font-size-sm",
+    "--c2-chart__legend__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-chart__legend-marker--border-radius": "--c2-theme--radius-full",
+    "--c2-chart__tooltip--background-color": "--c2-theme--color-inverse-surface",
+    "--c2-chart__tooltip--color": "--c2-theme--color-on-inverse-surface",
+    "--c2-chart__tooltip--font-size": "--c2-theme--font-size-sm",
+    "--c2-chart__tooltip--border-radius": "--c2-theme--radius-md",
+    "--c2-chart__tooltip--box-shadow": "--c2-theme--shadow-md",
+    "--c2-chart__state--color": "--c2-theme--color-on-surface-variant",
+    "--c2-chart__state--font-size": "--c2-theme--font-size-md",
+    "--c2-chart__tone-positive--color": "--c2-theme--chart-positive",
+    "--c2-chart__tone-negative--color": "--c2-theme--chart-negative",
+    "--c2-chart__slice--border": "--c2-theme--color-surface",
+    "--c2-chat-input__container--border": "--c2-theme--border",
+    "--c2-chat-input__container--background": "--c2-theme--color-surface",
+    "--c2-chat-input__container--color": "--c2-theme--color-on-surface",
+    "--c2-chat-input__container__hover--border": "--c2-theme--color-outline-strong",
+    "--c2-chat-input__container__focus--border": "--c2-theme--color-primary",
+    "--c2-chat-input__container__invalid--border": "--c2-theme--color-error",
+    "--c2-chat-input__container__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-chat-input__textarea--font-size": "--c2-theme--font-size-md",
+    "--c2-chat-input__placeholder--color": "--c2-theme--color-on-surface-variant",
+    "--c2-chat-input__send-button--background": "--c2-theme--color-primary",
+    "--c2-chat-input__send-button--color": "--c2-theme--color-on-primary",
+    "--c2-chat-input__send-button__hover--background": "--c2-theme--color-primary-hover",
+    "--c2-chat-input__send-button__active--background": "--c2-theme--color-primary-active",
+    "--c2-chat-input__send-button__focus--outline": "--c2-theme--focus-ring",
+    "--c2-chat-input__send-button__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-chat-message--font-size": "--c2-theme--font-size-md",
+    "--c2-chat-message__header__title--color": "--c2-theme--color-on-surface",
+    "--c2-chat-message__header__title--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-chat-message__time--color": "--c2-theme--color-on-surface-variant",
     "--c2-chat-message__time--font-size": "--c2-theme--font-size-sm",
     "--c2-checkbox__container--border-top-left-radius": "--c2-theme--radius-sm",
     "--c2-checkbox__container--border-top-right-radius": "--c2-theme--radius-sm",
@@ -367,11 +538,20 @@
     "--c2-details__header__hover--background": "--c2-theme--color-surface-container-low",
     "--c2-details__header__focus--outline": "--c2-theme--focus-ring",
     "--c2-details__header__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-header--background": "--c2-theme--color-surface",
+    "--c2-header--color": "--c2-theme--color-on-surface",
+    "--c2-header--border-bottom": "--c2-theme--color-outline-variant",
     "--c2-icon-button--border-radius": "--c2-theme--radius-full",
     "--c2-icon-button__hover--background-color": "--c2-theme--color-surface-container",
     "--c2-icon-button__focus--outline": "--c2-theme--focus-ring",
     "--c2-icon-button__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-icon-button__selected--background-color": "--c2-theme--color-surface-container",
+    "--c2-kbd--background-color": "--c2-theme--color-surface-container",
+    "--c2-kbd--color": "--c2-theme--color-on-surface-variant",
+    "--c2-kbd--border": "--c2-theme--border",
+    "--c2-kbd--font-family": "--c2-theme--font-family",
+    "--c2-kbd--font-size": "--c2-theme--font-size-sm",
+    "--c2-kbd--font-weight": "--c2-theme--font-weight-medium",
     "--c2-label__container__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-label__required-indicator--color": "--c2-theme--color-error",
     "--c2-link-button__container--border-radius": "--c2-theme--radius-sm",
@@ -401,6 +581,33 @@
     "--c2-list-item__selected__hover--background": "--c2-theme--color-primary-container",
     "--c2-list-item__focus--outline": "--c2-theme--focus-ring",
     "--c2-list-item__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-menu--background": "--c2-theme--color-surface",
+    "--c2-menu--border-top": "--c2-theme--color-outline-variant",
+    "--c2-menu--border-right": "--c2-theme--color-outline-variant",
+    "--c2-menu--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-menu--border-left": "--c2-theme--color-outline-variant",
+    "--c2-menu--border-top-left-radius": "--c2-theme--radius-lg",
+    "--c2-menu--border-top-right-radius": "--c2-theme--radius-lg",
+    "--c2-menu--border-bottom-left-radius": "--c2-theme--radius-lg",
+    "--c2-menu--border-bottom-right-radius": "--c2-theme--radius-lg",
+    "--c2-menu--box-shadow": "--c2-theme--shadow-md",
+    "--c2-menu__separator--color": "--c2-theme--color-outline-variant",
+    "--c2-menu__heading--color": "--c2-theme--color-on-surface-variant",
+    "--c2-menu__heading--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-menu-item--border-top-left-radius": "--c2-theme--radius-md",
+    "--c2-menu-item--border-top-right-radius": "--c2-theme--radius-md",
+    "--c2-menu-item--border-bottom-left-radius": "--c2-theme--radius-md",
+    "--c2-menu-item--border-bottom-right-radius": "--c2-theme--radius-md",
+    "--c2-menu-item--font-size": "--c2-theme--font-size-md",
+    "--c2-menu-item--color": "--c2-theme--color-on-surface",
+    "--c2-menu-item__hover--background": "--c2-theme--color-surface-container",
+    "--c2-menu-item__description--color": "--c2-theme--color-on-surface-variant",
+    "--c2-menu-item__description--font-size": "--c2-theme--font-size-sm",
+    "--c2-menu-item__shortcut--color": "--c2-theme--color-on-surface-variant",
+    "--c2-menu-item__icon--color": "--c2-theme--color-on-surface-variant",
+    "--c2-menu-item__destructive--color": "--c2-theme--color-error",
+    "--c2-menu-item__focus--outline": "--c2-theme--focus-ring",
+    "--c2-menu-item__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-modal--background": "--c2-theme--color-surface",
     "--c2-modal--color": "--c2-theme--color-on-surface",
     "--c2-modal--border-top-left-radius": "--c2-theme--radius-xl",
@@ -417,7 +624,97 @@
     "--c2-modal__close__hover--color": "--c2-theme--color-on-surface",
     "--c2-modal__close__focus--outline": "--c2-theme--focus-ring",
     "--c2-modal__backdrop--background": "--c2-theme--color-scrim",
+    "--c2-navigation-menu__mobile-trigger--color": "--c2-theme--color-on-surface",
+    "--c2-navigation-menu__mobile-trigger--border": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu__mobile-trigger--border-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu__mobile-trigger__hover--background": "--c2-theme--color-surface-container",
+    "--c2-navigation-menu__mobile-trigger__focus--outline": "--c2-theme--focus-ring",
+    "--c2-navigation-menu__mobile-panel--background": "--c2-theme--color-surface",
+    "--c2-navigation-menu__mobile-panel--border-top": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu__mobile-panel--border-right": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu__mobile-panel--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu__mobile-panel--border-left": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu__mobile-panel--border-top-left-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu__mobile-panel--border-top-right-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu__mobile-panel--border-bottom-left-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu__mobile-panel--border-bottom-right-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu__mobile-panel--box-shadow": "--c2-theme--shadow-md",
+    "--c2-navigation-menu-item--border-top-left-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-item--border-top-right-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-item--border-bottom-left-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-item--border-bottom-right-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-item--font-size": "--c2-theme--font-size-md",
+    "--c2-navigation-menu-item--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-navigation-menu-item--color": "--c2-theme--color-on-surface-variant",
+    "--c2-navigation-menu-item__hover--color": "--c2-theme--color-on-surface",
+    "--c2-navigation-menu-item__hover--background": "--c2-theme--color-surface-container",
+    "--c2-navigation-menu-item__expanded--color": "--c2-theme--color-on-surface",
+    "--c2-navigation-menu-item__expanded--background": "--c2-theme--color-surface-container",
+    "--c2-navigation-menu-item__current--color": "--c2-theme--color-on-surface",
+    "--c2-navigation-menu-item__current--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-navigation-menu-item__indicator--color": "--c2-theme--color-primary",
+    "--c2-navigation-menu-item__indicator--border-radius": "--c2-theme--radius-full",
+    "--c2-navigation-menu-item__focus--outline": "--c2-theme--focus-ring",
+    "--c2-navigation-menu-item__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-navigation-menu-item__mobile-heading--color": "--c2-theme--color-on-surface-variant",
+    "--c2-navigation-menu-item__mobile-heading--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-navigation-menu-item__panel--background": "--c2-theme--color-surface",
+    "--c2-navigation-menu-item__panel--border-top": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu-item__panel--border-right": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu-item__panel--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu-item__panel--border-left": "--c2-theme--color-outline-variant",
+    "--c2-navigation-menu-item__panel--border-top-left-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu-item__panel--border-top-right-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu-item__panel--border-bottom-left-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu-item__panel--border-bottom-right-radius": "--c2-theme--radius-lg",
+    "--c2-navigation-menu-item__panel--box-shadow": "--c2-theme--shadow-md",
+    "--c2-navigation-menu-link--border-top-left-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-link--border-top-right-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-link--border-bottom-left-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-link--border-bottom-right-radius": "--c2-theme--radius-md",
+    "--c2-navigation-menu-link--font-size": "--c2-theme--font-size-md",
+    "--c2-navigation-menu-link--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-navigation-menu-link--color": "--c2-theme--color-on-surface",
+    "--c2-navigation-menu-link__hover--background": "--c2-theme--color-surface-container",
+    "--c2-navigation-menu-link__current--color": "--c2-theme--color-primary",
+    "--c2-navigation-menu-link__current--background": "--c2-theme--color-primary-container",
+    "--c2-navigation-menu-link__description--color": "--c2-theme--color-on-surface-variant",
+    "--c2-navigation-menu-link__description--font-size": "--c2-theme--font-size-sm",
+    "--c2-navigation-menu-link__icon--color": "--c2-theme--color-on-surface-variant",
+    "--c2-navigation-menu-link__focus--outline": "--c2-theme--focus-ring",
+    "--c2-navigation-menu-link__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-overlay--transition-duration": "--c2-theme--motion-scale",
+    "--c2-pagination__item--color": "--c2-theme--color-on-surface",
+    "--c2-pagination__item--border-radius": "--c2-theme--radius-lg",
+    "--c2-pagination__item--font-size": "--c2-theme--font-size-md",
+    "--c2-pagination__item--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-pagination__item__hover--color": "--c2-theme--color-on-surface",
+    "--c2-pagination__item__hover--background-color": "--c2-theme--color-surface-container",
+    "--c2-pagination__item__selected--color": "--c2-theme--color-on-surface",
+    "--c2-pagination__item__selected--background-color": "--c2-theme--color-surface",
+    "--c2-pagination__item__selected--border": "--c2-theme--color-outline-variant",
+    "--c2-pagination__item__selected--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-pagination__item__focus--outline": "--c2-theme--focus-ring",
+    "--c2-pagination__item__disabled--opacity": "--c2-theme--disabled-opacity",
+    "--c2-pagination__nav--color": "--c2-theme--color-on-surface",
+    "--c2-pagination__nav--border-radius": "--c2-theme--radius-lg",
+    "--c2-pagination__nav--font-size": "--c2-theme--font-size-md",
+    "--c2-pagination__nav--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-pagination__nav__hover--color": "--c2-theme--color-on-surface",
+    "--c2-pagination__nav__hover--background-color": "--c2-theme--color-surface-container",
+    "--c2-pagination__ellipsis--color": "--c2-theme--color-on-surface-variant",
+    "--c2-pagination__label--color": "--c2-theme--color-on-surface-variant",
+    "--c2-pagination__label--font-size": "--c2-theme--font-size-md",
+    "--c2-pagination__label--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-progress--border-radius": "--c2-theme--radius-full",
+    "--c2-progress__track--background-color": "--c2-theme--color-outline-variant",
+    "--c2-progress__indicator--background-color": "--c2-theme--color-primary",
+    "--c2-progress--animation-duration": "--c2-theme--motion-scale",
+    "--c2-progress__label--color": "--c2-theme--color-on-surface-variant",
+    "--c2-progress__label--font-size": "--c2-theme--font-size-md",
+    "--c2-progress__value--color": "--c2-theme--color-on-surface",
+    "--c2-progress__value--font-size": "--c2-theme--font-size-md",
+    "--c2-progress__value--font-weight": "--c2-theme--font-weight-medium",
     "--c2-radio__container--border-radius": "--c2-theme--radius-lg",
     "--c2-radio__control--border-radius": "--c2-theme--radius-full",
     "--c2-radio__control--border": "--c2-theme--border",
@@ -478,11 +775,26 @@
     "--c2-seperator__label--color": "--c2-theme--color-on-surface-variant",
     "--c2-seperator__label--font-size": "--c2-theme--font-size-sm",
     "--c2-seperator__label--font-weight": "--c2-theme--font-weight-medium",
+    "--c2-sheet--background": "--c2-theme--color-surface",
+    "--c2-sheet--color": "--c2-theme--color-on-surface",
+    "--c2-sheet--box-shadow": "--c2-theme--shadow-lg",
+    "--c2-sheet--transition-duration": "--c2-theme--motion-scale",
+    "--c2-sheet__header--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-sheet__body--font-size": "--c2-theme--font-size-md",
+    "--c2-sheet__close--border-radius": "--c2-theme--radius-lg",
+    "--c2-sheet__close--color": "--c2-theme--color-on-surface-variant",
+    "--c2-sheet__close__hover--background": "--c2-theme--color-surface-container",
+    "--c2-sheet__close__hover--color": "--c2-theme--color-on-surface",
+    "--c2-sheet__close__focus--outline": "--c2-theme--focus-ring",
+    "--c2-sheet__backdrop--background": "--c2-theme--color-scrim",
     "--c2-side-nav--transition-duration": "--c2-theme--motion-scale",
     "--c2-side-nav--background-color": "--c2-theme--color-surface-container-low",
     "--c2-side-nav__divider--color": "--c2-theme--color-outline-variant",
     "--c2-side-nav__over--box-shadow": "--c2-theme--shadow-lg",
     "--c2-side-nav__backdrop--background-color": "--c2-theme--color-scrim",
+    "--c2-skeleton--border-radius": "--c2-theme--radius-sm",
+    "--c2-skeleton--background-color": "--c2-theme--color-outline-variant",
+    "--c2-skeleton--animation-duration": "--c2-theme--motion-scale",
     "--c2-slider__container__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-slider__track--border-radius": "--c2-theme--radius-full",
     "--c2-slider__track--color": "--c2-theme--color-outline-variant",
@@ -503,6 +815,18 @@
     "--c2-spinner--animation-duration": "--c2-theme--motion-scale",
     "--c2-spinner__label--color": "--c2-theme--color-on-surface-variant",
     "--c2-spinner__label--font-size": "--c2-theme--font-size-md",
+    "--c2-stat--background": "--c2-theme--color-surface",
+    "--c2-stat--color": "--c2-theme--color-on-surface",
+    "--c2-stat--border": "--c2-theme--color-outline-variant",
+    "--c2-stat--border-radius": "--c2-theme--radius-lg",
+    "--c2-stat__icon--background": "--c2-theme--color-surface-container",
+    "--c2-stat__icon--color": "--c2-theme--color-on-surface-variant",
+    "--c2-stat__icon--border-radius": "--c2-theme--radius-lg",
+    "--c2-stat__value--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-stat__label--font-size": "--c2-theme--font-size-md",
+    "--c2-stat__label--color": "--c2-theme--color-on-surface-variant",
+    "--c2-stat__description--font-size": "--c2-theme--font-size-sm",
+    "--c2-stat__description--color": "--c2-theme--color-on-surface-variant",
     "--c2-switch__container__disabled--opacity": "--c2-theme--disabled-opacity",
     "--c2-switch__track--border-radius": "--c2-theme--radius-full",
     "--c2-switch__track--color": "--c2-theme--color-outline-variant",
@@ -517,6 +841,45 @@
     "--c2-switch__description--color": "--c2-theme--color-on-surface-variant",
     "--c2-switch__description--font-size": "--c2-theme--font-size-sm",
     "--c2-switch--transition-duration": "--c2-theme--motion-scale",
+    "--c2-table--background": "--c2-theme--color-surface",
+    "--c2-table--color": "--c2-theme--color-on-surface",
+    "--c2-table--font-size": "--c2-theme--font-size-md",
+    "--c2-table--border-top": "--c2-theme--color-outline-variant",
+    "--c2-table--border-right": "--c2-theme--color-outline-variant",
+    "--c2-table--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-table--border-left": "--c2-theme--color-outline-variant",
+    "--c2-table--border-top-left-radius": "--c2-theme--radius-lg",
+    "--c2-table--border-top-right-radius": "--c2-theme--radius-lg",
+    "--c2-table--border-bottom-left-radius": "--c2-theme--radius-lg",
+    "--c2-table--border-bottom-right-radius": "--c2-theme--radius-lg",
+    "--c2-table__header--background": "--c2-theme--color-surface-container-low",
+    "--c2-table__header--color": "--c2-theme--color-on-surface-variant",
+    "--c2-table__header--font-size": "--c2-theme--font-size-sm",
+    "--c2-table__header--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-table__header--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-table__header-cell__hover--background": "--c2-theme--color-surface-container",
+    "--c2-table__header-cell__sorted--color": "--c2-theme--color-on-surface",
+    "--c2-table__sort-icon--color": "--c2-theme--color-on-surface-variant",
+    "--c2-table__sort-icon__active--color": "--c2-theme--color-primary",
+    "--c2-table__resizer--color": "--c2-theme--color-outline-variant",
+    "--c2-table__resizer__hover--color": "--c2-theme--color-primary",
+    "--c2-table__row--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-table__row__hover--background": "--c2-theme--color-surface-container-low",
+    "--c2-table__row__odd--background": "--c2-theme--color-surface-container-low",
+    "--c2-table__row__selected--background": "--c2-theme--color-primary-container",
+    "--c2-table__row__selected--color": "--c2-theme--color-on-surface",
+    "--c2-table__cell--font-size": "--c2-theme--font-size-md",
+    "--c2-table__cell--color": "--c2-theme--color-on-surface",
+    "--c2-table__cell__focus--outline": "--c2-theme--focus-ring",
+    "--c2-table__pinned-start--box-shadow": "--c2-theme--color-outline-variant",
+    "--c2-table__pinned-end--box-shadow": "--c2-theme--color-outline-variant",
+    "--c2-table__skeleton--background": "--c2-theme--color-surface-container",
+    "--c2-table__skeleton--border-radius": "--c2-theme--radius-sm",
+    "--c2-table__state--color": "--c2-theme--color-on-surface-variant",
+    "--c2-table__state--font-size": "--c2-theme--font-size-md",
+    "--c2-table__state__error--color": "--c2-theme--color-error",
+    "--c2-table__toolbar--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-table__footer--border-top": "--c2-theme--color-outline-variant",
     "--c2-tabs--box-shadow": "--c2-theme--color-outline-variant",
     "--c2-tabs__indicator--color": "--c2-theme--color-primary",
     "--c2-tabs__tab__hover--color": "--c2-theme--color-primary",
@@ -592,6 +955,25 @@
     "--c2-tooltip--box-shadow": "--c2-theme--shadow-md",
     "--c2-tooltip--font-size": "--c2-theme--font-size-sm",
     "--c2-tooltip--font-weight": "--c2-theme--font-weight-medium",
-    "--c2-tooltip--transition-duration": "--c2-theme--motion-scale"
+    "--c2-tooltip--transition-duration": "--c2-theme--motion-scale",
+    "--c2-virtual-list--background": "--c2-theme--color-surface",
+    "--c2-virtual-list--color": "--c2-theme--color-on-surface",
+    "--c2-virtual-list--font-size": "--c2-theme--font-size-md",
+    "--c2-virtual-list--border-top-left-radius": "--c2-theme--radius-lg",
+    "--c2-virtual-list--border-top-right-radius": "--c2-theme--radius-lg",
+    "--c2-virtual-list--border-bottom-left-radius": "--c2-theme--radius-lg",
+    "--c2-virtual-list--border-bottom-right-radius": "--c2-theme--radius-lg",
+    "--c2-virtual-list__search--border-bottom": "--c2-theme--color-outline-variant",
+    "--c2-virtual-list__search-field--background": "--c2-theme--color-surface",
+    "--c2-virtual-list__search-field--border": "--c2-theme--color-outline-variant",
+    "--c2-virtual-list__search-field--border-radius": "--c2-theme--radius-md",
+    "--c2-virtual-list__highlight--font-weight": "--c2-theme--font-weight-semibold",
+    "--c2-virtual-list__highlight--border-radius": "--c2-theme--radius-sm",
+    "--c2-virtual-list__skeleton--background": "--c2-theme--color-surface-container",
+    "--c2-virtual-list__skeleton--border-radius": "--c2-theme--radius-sm",
+    "--c2-virtual-list__state--color": "--c2-theme--color-on-surface-variant",
+    "--c2-virtual-list__state--font-size": "--c2-theme--font-size-md",
+    "--c2-virtual-list__state__error--color": "--c2-theme--color-error",
+    "--c2-virtual-list__footer--border-top": "--c2-theme--color-outline-variant"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/theme",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Design tokens (--c2-theme--*) and a generated base theme that maps every @c2n component CSS variable onto them",
   "type": "module",
   "main": "dist/tokens.js",
@@ -54,6 +54,20 @@
     "build": {
       "dependencies": [
         "type-check",
+        "../../components/chart:build",
+        "../../components/autocomplete:build",
+        "../../components/header:build",
+        "../../components/stat:build",
+        "../../components/attachment:build",
+        "../../components/virtual-list:build",
+        "../../components/sheet:build",
+        "../../components/skeleton:build",
+        "../../components/progress:build",
+        "../../components/pagination:build",
+        "../../components/navigation-menu:build",
+        "../../components/menu:build",
+        "../../components/kbd:build",
+        "../../components/table:build",
         "../../components/copy-button:build",
         "../../components/textarea:build",
         "../../components/switch:build",
@@ -93,6 +107,7 @@
         "../../components/text-field:build",
         "../../components/tooltip:build",
         "../../icons/feather-icons:build",
+        "../../icons/phosphor-icons:build",
         "../../../open-packages/chatbot:build"
       ],
       "command": "tsc -p tsconfig.lib.json && node scripts/theme-generator/index.ts"
@@ -102,5 +117,5 @@
     "@c2n/config": "*",
     "prettier": "3.9.6"
   },
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
 }