feat(presets): introduce dynamic theme presets (Default, Brutalism, Matrix) and token architecture

public/llms-full.txt

@@ -202,6 +202,7 @@ import { BentoGrid, BentoGridItem } from '@/dashkit/BentoGrid';
 
 By default, `BentoGrid` uses `gap="none"` to render a continuous `1px` hairline divider between cells without double borders—even when combining multi-row vertical spans (`rowSpan={2}`) and full-width spans (`colSpan="full"`).
 
+
 
 
       01 / Ingestion
@@ -259,6 +260,7 @@ By default, `BentoGrid` uses `gap="none"` to render a continuous `1px` hairline
 
 
 
+
 ```tsx
 <BentoGrid cols={{ base: 1, sm: 2, lg: 12 }} autoRows="minmax(140px, auto)">
   <BentoGridItem colSpan={{ base: 1, sm: 1, lg: 4 }}>Cell 1</BentoGridItem>
@@ -279,6 +281,7 @@ By default, `BentoGrid` uses `gap="none"` to render a continuous `1px` hairline
 
 Set `rounded="none"` for a sharp editorial or architectural blueprint layout where every outer corner and inner intersection meets at 90 degrees.
 
+
 
 
       col-span-4
@@ -300,6 +303,7 @@ Set `rounded="none"` for a sharp editorial or architectural blueprint layout whe
 
 
 
+
 ```tsx
 <BentoGrid cols={{ base: 1, md: 12 }} rounded="none" autoRows="minmax(120px, auto)">
   <BentoGridItem colSpan={{ base: 1, md: 4 }}>col-span-4</BentoGridItem>
@@ -317,6 +321,7 @@ Set `rounded="none"` for a sharp editorial or architectural blueprint layout whe
 
 Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shared hairline borders.
 
+
 
 
       Detached Bento Card (2 cols)
@@ -328,6 +333,7 @@ Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shar
 
 
 
+
 ```tsx
 <BentoGrid cols={3} gap="md">
   <BentoGridItem colSpan={2}>Detached Bento Card</BentoGridItem>
@@ -337,6 +343,7 @@ Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shar
 
 ### BentoGrid Props
 
+
 | Property | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `cols` | `BentoResponsiveValue` | `3` | Number of grid columns. Accepts a direct number (stacks on mobile, applies at md+) or a responsive breakpoint object ({ base, sm, md, lg, xl }). |
@@ -345,8 +352,10 @@ Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shar
 | `rounded` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'xl'` | Controls the outer corner radius of the grid container. |
 | `autoRows` | `string` | - | Sets the CSS grid-auto-rows property (e.g., 'minmax(140px, auto)'). |
 
+
 ### BentoGridItem Props
 
+
 | Property | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `colSpan` | `BentoResponsiveValue<1..12 \| 'full'>` | `1` | Number of columns the cell spans. Accepts a direct value or a responsive breakpoint object. |
@@ -1566,6 +1575,60 @@ The component is highly accessible and supports a fluid layout for its triggers.
 </Tabs>
 ```
 
+### Pills Variant (Segmented Control)
+
+Use `variant="pills"` to render tabs inside a compact, segmented track with an elevated floating indicator that smoothly slides between options.
+
+
+
+
+      Overview
+      Analytics
+      Reports
+      Notifications
+
+
+
+        Platform Overview
+        General metric summary across all edge environments.
+
+
+
+
+        Live Analytics
+        Real-time latency, request rate, and error rate telemetry.
+
+
+
+
+        Generated Reports
+        Weekly and monthly compliance export records.
+
+
+
+
+        Notification Feeds
+        System warnings and deployment completion triggers.
+
+
+
+
+
+```tsx
+<Tabs defaultValue="overview" variant="pills">
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+    <TabsTrigger value="reports">Reports</TabsTrigger>
+    <TabsTrigger value="notifications">Notifications</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview metrics</TabsContent>
+  <TabsContent value="analytics">Analytics telemetry</TabsContent>
+  <TabsContent value="reports">Generated reports</TabsContent>
+  <TabsContent value="notifications">Notification feeds</TabsContent>
+</Tabs>
+```
+
 ### Icons & Advanced Previews
 
 You can easily integrate icons and complex child layouts within your tabs.
@@ -1649,6 +1712,7 @@ The indicator uses Framer Motion's `layoutId` to achieve a "sliding" effect when
 | `defaultValue` | `string` | - | The value of the tab that should be active on mount. |
 | `value` | `string` | - | The controlled value of the active tab. |
 | `onValueChange` | `(val: string) => void` | - | Callback fired when the active tab changes. |
+| `variant` | `'line' \| 'pills'` | `'line'` | Visual styling variant: 'line' for standard bottom-bordered tabs, 'pills' for segmented control. |
 | `children` | `ReactNode` | - | Content of the tabs container. |
 | `className` | `string` | - | Additional CSS classes for the container. |
 

public/llms.txt

@@ -47,6 +47,10 @@ Dashkit uses a two-layer token system in `dashkit.css`: `@theme inline` maps sem
 - `--ds-danger`, `--ds-success`, `--ds-warning`, `--ds-info` (plus `*-fg` pairs): Semantic feedback states.
 - `--ds-chart-1` through `--ds-chart-5`: Categorical data visualization palette.
 - `--radius`: Master border radius (`0.75rem` default). `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, and `--radius-2xl` scale proportionally from `--radius` (set `--radius: 0rem` for sharp corners).
+- `--ds-pill-radius`: Pill radius for `Button`, `Switch`, `Chip`, `Slider`, and `ProgressBar` (`calc(var(--radius) * 9999)` default; automatically becomes `0rem` when `--radius: 0rem`, or set explicitly e.g. `--ds-pill-radius: var(--radius-md)`).
+- `--ds-border-width`: Structural border width for Cards, Buttons, Chips, and Inputs (`1px` default; set to `2px` for Neo-Brutalism).
+- `--ds-button-border`: Border color for filled and soft Buttons (`transparent` default; set to `var(--ds-border)` or `var(--ds-primary)` for bordered buttons).
+- `--ds-button-shadow`, `--ds-button-outlined-shadow`, `--ds-button-soft-shadow`, `--ds-card-shadow`, `--ds-input-shadow`: Elevation or hard Neo-Brutalist offset shadows (e.g. `3px 3px 0px 0px var(--ds-border)`) or CRT glow shadows.
 - `--ds-primary-gradient` / `--ds-danger-gradient`: Optional gradient overrides (set to `none` for flat buttons).
 
 ### Dynamic Runtime Theme Attributes

public/registry.json

@@ -209,8 +209,8 @@
         "BentoGridItem"
       ],
       "propsDefinitions": [
-        "export interface BentoGridProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof bentoGridVariants> {\n  cols?: BentoResponsiveValue<BentoCols>;\n  autoRows?: string;\n}",
-        "export interface BentoGridItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<VariantProps<typeof bentoGridItemVariants>, 'divided'> {\n  colSpan?: BentoResponsiveValue<BentoColSpan>;\n  rowSpan?: BentoResponsiveValue<BentoRowSpan>;\n}"
+        "export interface BentoGridProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof bentoGridVariants> {\r\n  cols?: BentoResponsiveValue<BentoCols>;\r\n  autoRows?: string;\r\n}",
+        "export interface BentoGridItemProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    Omit<VariantProps<typeof bentoGridItemVariants>, 'divided'> {\r\n  colSpan?: BentoResponsiveValue<BentoColSpan>;\r\n  rowSpan?: BentoResponsiveValue<BentoRowSpan>;\r\n}"
       ]
     },
     "breadcrumb": {

scripts/commands.ts

@@ -800,7 +800,7 @@ async function writeAiRulesFile(
     `- **Available Components (${allSlugs.length})**: ${allSlugs.map((s) => `\`${s}\``).join(', ')}`,
     '',
     '### 3-Tier AI Customization Protocol',
-    `1. **Global Theme (\`${cssFile}\`)**: Edit \`:root\` / \`.dark\` variables (\`--ds-primary\`, \`--ds-bg\`, \`--ds-card\`, \`--radius\`, \`--ds-primary-gradient\`) or set \`data-primary\` / \`data-base\` attributes. Never scatter inline theme classes across pages.`,
+    `1. **Global Theme (\`${cssFile}\`)**: Edit \`:root\` / \`.dark\` variables (\`--ds-primary\`, \`--ds-bg\`, \`--ds-card\`, \`--radius\`, \`--ds-pill-radius\`, \`--ds-border-width\`, \`--ds-button-border\`, \`--ds-button-shadow\`, \`--ds-card-shadow\`, \`--ds-input-shadow\`, \`--ds-primary-gradient\`) or set \`data-primary\` / \`data-base\` attributes. Never scatter inline theme classes across pages.`,
     `2. **Component Variants (\`${componentsDir}/<Component>/<Component>.tsx\`)**: Edit \`cva(...)\` variants directly inside the component file when changing a component across the app.`,
     '3. **Instance Overrides (`className` & `data-slot`)**: Use `className` (merged via `cn()`) or `data-slot` selectors (`className="[&_[data-slot=label]]:uppercase"`) for one-off tweaks.',
     '',

scripts/generate-llms.ts

@@ -257,6 +257,10 @@ export function generateLlmsTxt(): string {
   lines.push('- `--ds-danger`, `--ds-success`, `--ds-warning`, `--ds-info` (plus `*-fg` pairs): Semantic feedback states.');
   lines.push('- `--ds-chart-1` through `--ds-chart-5`: Categorical data visualization palette.');
   lines.push('- `--radius`: Master border radius (`0.75rem` default). `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, and `--radius-2xl` scale proportionally from `--radius` (set `--radius: 0rem` for sharp corners).');
+  lines.push('- `--ds-pill-radius`: Pill radius for `Button`, `Switch`, `Chip`, `Slider`, and `ProgressBar` (`calc(var(--radius) * 9999)` default; automatically becomes `0rem` when `--radius: 0rem`, or set explicitly e.g. `--ds-pill-radius: var(--radius-md)`).');
+  lines.push('- `--ds-border-width`: Structural border width for Cards, Buttons, Chips, and Inputs (`1px` default; set to `2px` for Neo-Brutalism).');
+  lines.push('- `--ds-button-border`: Border color for filled and soft Buttons (`transparent` default; set to `var(--ds-border)` or `var(--ds-primary)` for bordered buttons).');
+  lines.push('- `--ds-button-shadow`, `--ds-button-outlined-shadow`, `--ds-button-soft-shadow`, `--ds-card-shadow`, `--ds-input-shadow`: Elevation or hard Neo-Brutalist offset shadows (e.g. `3px 3px 0px 0px var(--ds-border)`) or CRT glow shadows.');
   lines.push('- `--ds-primary-gradient` / `--ds-danger-gradient`: Optional gradient overrides (set to `none` for flat buttons).\n');
 
   lines.push('### Dynamic Runtime Theme Attributes');

scripts/tests/registry.test.ts

@@ -19,10 +19,10 @@ describe('Registry Integrity', () => {
   });
 
   it('should ensure all files in component folders are registered in registry.ts', () => {
-    // Get all subdirectories in src/dashkit, except 'utils'
+    // Get all subdirectories in src/dashkit, except 'utils' and 'presets'
     const subdirs = fs.readdirSync(componentsDir).filter((file) => {
       const fullPath = path.join(componentsDir, file);
-      return fs.statSync(fullPath).isDirectory() && file !== 'utils';
+      return fs.statSync(fullPath).isDirectory() && file !== 'utils' && file !== 'presets';
     });
 
     // Collect all registered files across all components, normalized to forward slashes

src/dashkit/Avatar/AvatarGroup.tsx

@@ -42,7 +42,7 @@ export function AvatarGroup({ children, max, size = 'md', spacing = 'md', classN
         <Avatar
           fallback={`+${remainingCount}`}
           size={size}
-          className="bg-ds-900 text-white z-0 text-[10px] dark:bg-white dark:text-ds-900"
+          className="bg-ds-900 text-ds-50 z-0 text-[10px] dark:bg-ds-100 dark:text-ds-900"
         />
       )}
     </div>

src/dashkit/Badge/Badge.tsx

@@ -27,7 +27,7 @@ const badgeVariants = cva(
     },
     compoundVariants: [
       // Base
-      { variant: 'solid', color: 'base', className: 'bg-ds-500 text-white' },
+      { variant: 'solid', color: 'base', className: 'bg-ds-600 text-ds-50 dark:bg-ds-500 dark:text-ds-950' },
       { variant: 'soft', color: 'base', className: 'bg-ds-500/15 text-ds-600 dark:text-ds-400 dark:bg-ds-500/20' },
       // Success
       { variant: 'solid', color: 'success', className: 'bg-ds-success-600 text-ds-success-50 dark:bg-ds-success-500 dark:text-ds-success-950' },

src/dashkit/Breadcrumb/BreadcrumbItem.tsx

@@ -20,8 +20,8 @@ export const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProp
           href={href}
           className={cn(
             'flex items-center gap-1.5 text-sm transition-colors',
-            href ? 'text-ds-500 hover:text-ds-900 dark:text-ds-400 dark:hover:text-white' : 'text-ds-500 font-medium',
-            active && 'font-semibold text-ds-900 dark:text-white'
+            href ? 'text-ds-500 hover:text-ds-900 dark:text-ds-400 dark:hover:text-ds-100' : 'text-ds-500 font-medium',
+            active && 'font-semibold text-ds-900 dark:text-ds-100'
           )}
         >
           {children}

src/dashkit/Button/Button.tsx

@@ -16,9 +16,9 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        filled: '',
-        outlined: 'bg-card text-foreground border',
-        soft: '',
+        filled: 'border ds-button-surface',
+        outlined: 'bg-card text-foreground border ds-button-outlined-surface',
+        soft: 'border ds-button-soft-surface',
         ghost: 'bg-transparent border border-transparent',
       },
       color: {
@@ -31,7 +31,7 @@ const buttonVariants = cva(
         lg: 'h-11 text-base',
       },
       rounded: {
-        true: 'rounded-full',
+        true: 'rounded-full ds-pill',
         false: 'rounded-md',
       },
     },
@@ -40,7 +40,7 @@ const buttonVariants = cva(
       {
         variant: 'filled',
         color: 'primary',
-        className: 'ds-primary-gradient text-primary-foreground shadow-xs hover:brightness-105',
+        className: 'ds-primary-gradient text-primary-foreground hover:brightness-105',
       },
       {
         variant: 'filled',
@@ -51,7 +51,7 @@ const buttonVariants = cva(
       {
         variant: 'outlined',
         color: 'primary',
-        className: 'border-ds-300 hover:bg-ds-50 dark:border-ds-700 dark:hover:bg-ds-800/50 dark:hover:brightness-110',
+        className: 'border-border hover:bg-muted/60 dark:hover:bg-muted/60 dark:hover:brightness-110',
       },
       {
         variant: 'outlined',

src/dashkit/ButtonGroup/ButtonGroup.tsx

@@ -45,9 +45,8 @@ export function ButtonGroupItem({
     <button
       className={cn(
         'ds-rounded relative inline-flex items-center justify-center font-medium text-sm h-9 px-4',
-        'bg-ds-0 text-foreground border border-ds-300 hover:bg-ds-50 transition-all cursor-pointer',
+        'bg-card text-foreground border border-border ds-border-width hover:bg-muted/60 transition-all cursor-pointer',
         'focus:outline-none focus:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring active:scale-[0.98]',
-        'dark:bg-ds-900 dark:border-ds-700 dark:hover:bg-ds-800',
         selected && 'bg-ds-200 text-foreground font-semibold z-10 shadow-xs dark:bg-ds-700 dark:text-foreground',
         className
       )}

src/dashkit/Card/Card.tsx

@@ -8,12 +8,12 @@ const cardVariants = cva(
   {
     variants: {
       bordered: {
-        true: 'border border-border/80',
+        true: 'border border-border/80 ds-border-width',
         false: 'border-0',
       },
       shadowed: {
         true: 'shadow-sm',
-        false: 'shadow-none',
+        false: 'shadow-none ds-card-shadow',
       },
     },
     defaultVariants: {