@skdx/docs-kit 0.35.0

package/dist/themes/FluentDark.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+import { createTheme } from './DefaultTheme';
+import { fluentLight } from './FluentLight';
+
+/** Dark counterpart of `fluent`, with Fluent 2 dark neutral backgrounds (#1f1f1f/#292929) and the brighter Fluent blue shade. @public */
+export const fluentDark: Theme = createTheme(
+  'fluent-dark',
+  {
+    mode: 'dark',
+    colors: {
+      primary: {
+        50: '#f4f9fe',
+        100: '#e5f1fe',
+        200: '#c8e2fc',
+        300: '#a3cffa',
+        400: '#82bdf8',
+        500: '#64aef7',
+        600: '#479ef5',
+        700: '#3b80c7',
+        800: '#3169a2',
+        900: '#295482',
+        950: '#1b334f',
+      },
+      neutral: { 200: '#3d3d3d', 300: '#525252', 800: '#292929', 900: '#1f1f1f', 950: '#141414' },
+      semantic: {
+        background: '#1f1f1f',
+        surface: '#292929',
+        surfaceHover: '#333333',
+        overlay: 'rgb(0 0 0 / 0.6)',
+        text: '#ffffff',
+        textMuted: '#adadad',
+        textInverted: '#061724',
+        border: '#3d3d3d',
+        borderStrong: '#737373',
+        focusRing: '#479ef5',
+      },
+    },
+    shadow: { color: '0 0 0', strength: '4.7' },
+  },
+  fluentLight,
+);

package/dist/themes/FluentLight.md

@@ -0,0 +1,8 @@
+---
+upstream: Microsoft Fluent 2
+deviations: []
+---
+
+# themes/fluent-light.ts
+
+Character: Fluent's "communication blue" primary ramp (`600: #0f6cbd`), Segoe UI as the lead font with Cascadia Code for mono, near-neutral grays for text (`#242424`) and surfaces, and Fluent's own motion curve. Corner radii come from the shared scale — they are no longer per-theme.

package/dist/themes/FluentLight.ts

@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+
+/** Microsoft Fluent 2 inspired: communication blue, Segoe UI, tight 2–8px corners. @public */
+export const fluentLight: Theme = {
+  name: 'fluent',
+  mode: 'light',
+  colors: {
+    primary: {
+      50: '#ebf3fc',
+      100: '#cfe4fa',
+      200: '#b4d6fa',
+      300: '#77b7f7',
+      400: '#479ef5',
+      500: '#2886de',
+      600: '#0f6cbd',
+      700: '#115ea3',
+      800: '#0f548c',
+      900: '#0c3b5e',
+      950: '#082338',
+    },
+    neutral: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+      950: '#020617',
+    },
+    success: {
+      50: '#f0fdf4',
+      100: '#dcfce7',
+      200: '#bbf7d0',
+      300: '#86efac',
+      400: '#4ade80',
+      500: '#22c55e',
+      600: '#16a34a',
+      700: '#15803d',
+      800: '#166534',
+      900: '#14532d',
+      950: '#052e16',
+    },
+    warning: {
+      50: '#fffbeb',
+      100: '#fef3c7',
+      200: '#fde68a',
+      300: '#fcd34d',
+      400: '#fbbf24',
+      500: '#f59e0b',
+      600: '#d97706',
+      700: '#b45309',
+      800: '#92400e',
+      900: '#78350f',
+      950: '#451a03',
+    },
+    danger: {
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+      950: '#450a0a',
+    },
+    semantic: {
+      background: '#ffffff',
+      surface: '#fafafa',
+      surfaceHover: '#f5f5f5',
+      overlay: 'rgb(0 0 0 / 0.4)',
+      text: '#242424',
+      textMuted: '#616161',
+      textInverted: '#ffffff',
+      border: '#e0e0e0',
+      borderStrong: '#919191',
+      focusRing: '#0f6cbd',
+    },
+  },
+  shadow: { color: '0 0 0', strength: '1.6' },
+  // System stacks only, so a machine without Segoe UI or Cascadia Code falls through to the shared stack.
+  typography: {
+    fontFamily:
+      "'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif",
+    fontFamilyMono: "'Cascadia Code', Consolas, ui-monospace, Menlo, monospace",
+  },
+  motion: { easing: 'cubic-bezier(0.33, 0, 0.1, 1)' },
+};

package/dist/themes/GraphiteDark.md

@@ -0,0 +1,8 @@
+---
+upstream: shadcn/ui zinc
+deviations: []
+---
+
+# themes/graphite-dark.ts
+
+Exports **`graphiteDark`** — a dark theme registered as `data-skdx-theme="graphite-dark"`, the `graphite` brand's dark mode, in the spirit of shadcn/ui's dark zinc look — primary actions invert to light-on-dark (`#fafafa` at 600 with near-black inverted text) on zinc surfaces (`background: #09090b`, `surface: #18181b`).

package/dist/themes/GraphiteDark.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+import { createTheme } from './DefaultTheme';
+import { graphiteLight } from './GraphiteLight';
+
+/** Dark counterpart of `graphite` (shadcn/ui dark zinc look): primary actions invert to light-on-dark. @public */
+export const graphiteDark: Theme = createTheme(
+  'graphite-dark',
+  {
+    mode: 'dark',
+    colors: {
+      primary: { 500: '#d4d4d8', 600: '#fafafa', 700: '#e4e4e7' },
+      neutral: { 200: '#27272a', 300: '#3f3f46', 800: '#18181b', 900: '#111113', 950: '#09090b' },
+      semantic: {
+        background: '#09090b',
+        surface: '#18181b',
+        surfaceHover: '#27272a',
+        overlay: 'rgb(0 0 0 / 0.7)',
+        text: '#fafafa',
+        textMuted: '#a1a1aa',
+        textInverted: '#18181b',
+        border: '#27272a',
+        borderStrong: '#666671',
+        focusRing: '#d4d4d8',
+      },
+    },
+    shadow: { color: '0 0 0', strength: '4.7' },
+  },
+  graphiteLight,
+);

package/dist/themes/GraphiteLight.md

@@ -0,0 +1,14 @@
+---
+upstream: shadcn/ui zinc
+deviations:
+  - token: text-muted
+    upstream: #71717a
+    ours: #67676f
+    reason: Read 4.40:1 against hover and 3.92:1 against pressed, under the 4.5:1
+      floor for body text. Darkened on lightness alone, hue and saturation kept,
+      to clear 4.5:1 against both fills.
+---
+
+# themes/graphite-light.ts
+
+Character: the "primary" ramp is itself a gray scale with near-black action colors (`600: #27272a`, `700: #18181b`), quiet zinc surfaces (`surface: #fafafa`), near-black text (`#09090b`), and slightly tighter corners than the default (`md: 0.375rem`). Demonstrates that a brand can be entirely neutral — no hue at all — within the same theme contract.

package/dist/themes/GraphiteLight.ts

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+
+/** Monochrome theme in the spirit of shadcn/ui's zinc palette: near-black actions, quiet grays. @public */
+export const graphiteLight: Theme = {
+  name: 'graphite',
+  mode: 'light',
+  colors: {
+    primary: {
+      50: '#fafafa',
+      100: '#f4f4f5',
+      200: '#e4e4e7',
+      300: '#d4d4d8',
+      400: '#a1a1aa',
+      500: '#52525b',
+      600: '#27272a',
+      700: '#18181b',
+      800: '#121215',
+      900: '#0c0c0e',
+      950: '#09090b',
+    },
+    neutral: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+      950: '#020617',
+    },
+    success: {
+      50: '#f0fdf4',
+      100: '#dcfce7',
+      200: '#bbf7d0',
+      300: '#86efac',
+      400: '#4ade80',
+      500: '#22c55e',
+      600: '#16a34a',
+      700: '#15803d',
+      800: '#166534',
+      900: '#14532d',
+      950: '#052e16',
+    },
+    warning: {
+      50: '#fffbeb',
+      100: '#fef3c7',
+      200: '#fde68a',
+      300: '#fcd34d',
+      400: '#fbbf24',
+      500: '#f59e0b',
+      600: '#d97706',
+      700: '#b45309',
+      800: '#92400e',
+      900: '#78350f',
+      950: '#451a03',
+    },
+    danger: {
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+      950: '#450a0a',
+    },
+    semantic: {
+      background: '#ffffff',
+      surface: '#fafafa',
+      surfaceHover: '#f4f4f5',
+      overlay: 'rgb(9 9 11 / 0.6)',
+      text: '#09090b',
+      textMuted: '#67676f',
+      textInverted: '#fafafa',
+      border: '#e4e4e7',
+      borderStrong: '#8e8e99',
+      focusRing: '#18181b',
+    },
+  },
+  shadow: { color: '2 6 23', strength: '1' },
+};

package/dist/themes/GruvboxDark.md

@@ -0,0 +1,14 @@
+---
+upstream: Gruvbox
+deviations:
+  - token: danger-600
+    upstream: #cc241d (neutral_red)
+    ours: #db271f
+    reason: Read 2.69:1 against the theme background, under the 3:1 floor for status
+      ramps. Lightened on lightness alone, hue and saturation kept, to reach 3.03:1
+      contrast against the theme background.
+---
+
+# themes/gruvbox-dark.ts
+
+Character: warm `#282828` background with brown-gray surfaces (`#3c3836`, `#504945`), gruvbox's bright blue actions (`#83a598` at 600, the shade gruvbox itself pairs with a dark background), the bright gruvbox green/yellow/red status hues, cream text (`#ebdbb2`), tighter retro corners (md `0.25rem`), and dark inverted text on filled actions. Typography follows the default theme.

package/dist/themes/GruvboxDark.ts

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+
+/** Gruvbox Dark inspired theme: retro-groove warm browns, cream text, faded blue actions. Palette source: morhetz/gruvbox (MIT/X11). @public */
+export const gruvboxDark: Theme = {
+  name: 'gruvbox-dark',
+  mode: 'dark',
+  colors: {
+    primary: {
+      50: '#f8faf9',
+      100: '#eef2f1',
+      200: '#dae4e0',
+      300: '#c1d2cc',
+      400: '#abc2b9',
+      500: '#97b3a8',
+      600: '#83a598',
+      700: '#6b867d',
+      800: '#576d67',
+      900: '#475854',
+      950: '#2c3535',
+    },
+    neutral: {
+      50: '#f9f5d7',
+      100: '#ebdbb2',
+      200: '#3c3836',
+      300: '#504945',
+      400: '#bdae93',
+      500: '#a89984',
+      600: '#928374',
+      700: '#665c54',
+      800: '#3c3836',
+      900: '#1d2021',
+      950: '#1d2021',
+    },
+    success: {
+      50: '#fafbe8',
+      100: '#f2f4c8',
+      200: '#e5e995',
+      300: '#d3d95c',
+      400: '#b8bb26',
+      500: '#a8ab20',
+      600: '#98971a',
+      700: '#757415',
+      800: '#5d5c16',
+      900: '#4e4d16',
+      950: '#2a2a09',
+    },
+    warning: {
+      50: '#fefbea',
+      100: '#fdf3c4',
+      200: '#fbe58c',
+      300: '#fabd2f',
+      400: '#f0a818',
+      500: '#d79921',
+      600: '#b97a12',
+      700: '#945a12',
+      800: '#7a4716',
+      900: '#683a17',
+      950: '#3c1e0a',
+    },
+    danger: {
+      50: '#fef3f1',
+      100: '#fde5e1',
+      200: '#fccfc8',
+      300: '#faaca0',
+      400: '#fb4934',
+      500: '#e33723',
+      600: '#db271f',
+      700: '#a91c17',
+      800: '#8c1b17',
+      900: '#741d1a',
+      950: '#3f0b09',
+    },
+    semantic: {
+      background: '#282828',
+      surface: '#3c3836',
+      surfaceHover: '#504945',
+      overlay: 'rgb(0 0 0 / 0.6)',
+      text: '#ebdbb2',
+      textMuted: '#aea08d',
+      textInverted: '#282828',
+      border: '#504945',
+      borderStrong: '#8f8277',
+      focusRing: '#83a598',
+    },
+  },
+  shadow: { color: '0 0 0', strength: '4.7' },
+};

package/dist/themes/GruvboxLight.md

@@ -0,0 +1,27 @@
+---
+upstream: Gruvbox
+deviations:
+  - token: success-600
+    upstream: #98971a (neutral_green)
+    ours: #959419
+    reason: Gruvbox's neutral_green reaches 2.96:1 on the light wash, a hair under
+      the 3:1 the status icon needs. Darkened by half a point of lightness, the
+      smallest change that clears it. gruvbox-dark still carries neutral_green
+      unchanged, since its icon reads step 400.
+  - token: success-600
+    upstream: #98971a
+    ours: #908f18
+    reason: Read 2.84:1 against the theme background, under the 3:1 floor for status
+      ramps. Darkened again on lightness alone, hue and saturation kept, to reach
+      3.02:1 contrast against the theme background.
+  - token: neutral-600
+    upstream: #928374
+    ours: #887a6c
+    reason: Gruvbox light's disabled ink read 2.92:1 against surface and 2.68:1
+      against pressed, under the 3:1 floor for disabled ink. Darkened on lightness
+      alone, hue and saturation kept, to clear 3:1 against both fills.
+---
+
+# themes/gruvbox-light.ts
+
+Exports **`gruvboxLight`** — a light theme registered as `data-skdx-theme="gruvbox-light"`, the `gruvbox` brand's light mode, built on Gruvbox's light palette — `background: #fbf1c7` cream, warm gray text (`#3c3836`), and gruvbox's own `faded_blue` (`#076678`) at 600 with `neutral_blue` (`#458588`) at 500 — the blues gruvbox picks for a light background, not the dark theme's `bright_blue`.

package/dist/themes/GruvboxLight.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+import { createTheme } from './DefaultTheme';
+import { gruvboxDark } from './GruvboxDark';
+
+/** Light counterpart of `gruvbox-dark` (#fbf1c7 cream background); uses `faded_blue`/`neutral_blue` rather than the dark theme's `bright_blue`, which washes out on cream. @public */
+export const gruvboxLight: Theme = createTheme(
+  'gruvbox-light',
+  {
+    mode: 'light',
+    colors: {
+      primary: {
+        50: '#f0f6f7',
+        100: '#dceaec',
+        200: '#b5d1d7',
+        300: '#83b3bc',
+        400: '#5697a3',
+        500: '#458588',
+        600: '#076678',
+        700: '#085463',
+        800: '#084552',
+        900: '#093844',
+        950: '#09242c',
+      },
+      neutral: { 200: '#ebdbb2', 300: '#d5c4a1', 600: '#887a6c' },
+      // gruvbox-dark's neutral_green (#98971a) falls just under 3:1 (WCAG 1.4.11) on the light wash at step 600.
+      success: { 600: '#908f18' },
+      semantic: {
+        background: '#fbf1c7',
+        surface: '#f2e5bc',
+        surfaceHover: '#ebdbb2',
+        overlay: 'rgb(40 40 40 / 0.4)',
+        text: '#3c3836',
+        textMuted: '#665c54',
+        textInverted: '#ffffff',
+        border: '#ebdbb2',
+        borderStrong: '#997d44',
+        focusRing: '#076678',
+      },
+    },
+    shadow: { color: '2 6 23', strength: '1' },
+  },
+  gruvboxDark,
+);

package/dist/themes/MaterialDark.md

@@ -0,0 +1,8 @@
+---
+upstream: Material Design 3
+deviations: []
+---
+
+# themes/material-you-dark.ts
+
+Exports **`materialDark`** — a dark theme registered as `data-skdx-theme="material-you-dark"`, the `material` brand's dark mode, following Material Design 3 dark surfaces (`background: #1c1b1f`) with M3's light-lavender focus accent (`#d0bcff`) and the same purple primary ramp as `material-you`.

package/dist/themes/MaterialDark.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+import { createTheme } from './DefaultTheme';
+import { materialLight } from './MaterialLight';
+
+/** Dark counterpart of Material Design 3 dark surfaces (#1c1b1f) with light-lavender accents, shifting primary from tone 40 to tone 80. @public */
+export const materialDark: Theme = createTheme(
+  'material-you-dark',
+  {
+    mode: 'dark',
+    colors: {
+      primary: {
+        50: '#fcfbff',
+        100: '#f8f6ff',
+        200: '#f1ebff',
+        300: '#e8deff',
+        400: '#dfd1ff',
+        500: '#d8c7ff',
+        600: '#d0bcff',
+        700: '#a898cf',
+        800: '#897ca9',
+        900: '#6d6387',
+        950: '#413c52',
+      },
+      neutral: { 200: '#49454f', 300: '#605d66', 800: '#211f26', 900: '#1c1b1f', 950: '#141317' },
+      semantic: {
+        background: '#1c1b1f',
+        surface: '#211f26',
+        surfaceHover: '#2b2930',
+        overlay: 'rgb(0 0 0 / 0.6)',
+        text: '#e6e1e5',
+        textMuted: '#cac4d0',
+        textInverted: '#381e72',
+        border: '#49454f',
+        borderStrong: '#6d6973',
+        focusRing: '#d0bcff',
+      },
+    },
+    shadow: { color: '0 0 0', strength: '4.7' },
+  },
+  materialLight,
+);

package/dist/themes/MaterialLight.md

@@ -0,0 +1,8 @@
+---
+upstream: Material Design 3
+deviations: []
+---
+
+# themes/material-light.ts
+
+Character: M3's tonal purple primary ramp (`600: #6750a4`), lavender-tinted surfaces (`background: #fffbfe`, `surface: #f7f2fa`), Roboto as the primary font, plus M3's emphasized easing and its longer 150/300/500ms durations. Corner radii come from the shared scale — they are no longer per-theme.

package/dist/themes/MaterialLight.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+
+/** Tonal purple light theme. @public */
+export const materialLight: Theme = {
+  name: 'material-you',
+  mode: 'light',
+  colors: {
+    primary: {
+      50: '#f6edff',
+      100: '#eaddff',
+      200: '#d0bcff',
+      300: '#b69df8',
+      400: '#9a82db',
+      500: '#7f67be',
+      600: '#6750a4',
+      700: '#4f378b',
+      800: '#381e72',
+      900: '#21005d',
+      950: '#150042',
+    },
+    neutral: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+      950: '#020617',
+    },
+    success: {
+      50: '#f0fdf4',
+      100: '#dcfce7',
+      200: '#bbf7d0',
+      300: '#86efac',
+      400: '#4ade80',
+      500: '#22c55e',
+      600: '#16a34a',
+      700: '#15803d',
+      800: '#166534',
+      900: '#14532d',
+      950: '#052e16',
+    },
+    warning: {
+      50: '#fffbeb',
+      100: '#fef3c7',
+      200: '#fde68a',
+      300: '#fcd34d',
+      400: '#fbbf24',
+      500: '#f59e0b',
+      600: '#d97706',
+      700: '#b45309',
+      800: '#92400e',
+      900: '#78350f',
+      950: '#451a03',
+    },
+    danger: {
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+      950: '#450a0a',
+    },
+    semantic: {
+      background: '#fffbfe',
+      surface: '#f7f2fa',
+      surfaceHover: '#ece6f0',
+      overlay: 'rgb(28 27 31 / 0.5)',
+      text: '#1c1b1f',
+      textMuted: '#49454f',
+      textInverted: '#ffffff',
+      border: '#e7e0ec',
+      borderStrong: '#9488a1',
+      focusRing: '#6750a4',
+    },
+  },
+  shadow: { color: '2 6 23', strength: '1' },
+  // The only theme that retunes duration: M3 motion is deliberately slower than this system's default.
+  typography: {
+    fontFamily:
+      "Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
+  },
+  motion: {
+    durationFast: '150ms',
+    durationNormal: '300ms',
+    durationSlow: '500ms',
+    easing: 'cubic-bezier(0.2, 0, 0, 1)',
+  },
+};

package/dist/themes/MidnightDark.md

@@ -0,0 +1,8 @@
+---
+upstream: none
+deviations: []
+---
+
+# themes/midnight-dark.ts
+
+Character: violet/purple primary ramp (`#a855f7` at 600) on deep indigo surfaces — near-black purple background (`#16131b`), dark violet `surface`/`surfaceHover`, pale lavender text (`#efedf2`), and a heavier overlay (65% black) suited to dark mode. Only the palette differs from its light twin; type, space, radii and motion are shared by every theme.