@ojiepermana/angular 0.0.2

package/theme/README.md

@@ -0,0 +1,382 @@
+# Theme Library
+
+Reusable theme state, theme controls, and shared styling tokens for `@ojiepermana/angular/theme`.
+
+Layout runtime and shell components now live in `@ojiepermana/angular/layout`.
+
+## Package Shape
+
+`@ojiepermana/angular/theme` is intentionally a namespace marker and exports nothing.
+
+Import from the secondary entry points instead:
+
+- `@ojiepermana/angular/theme/service`
+- `@ojiepermana/angular/theme/component`
+- `@ojiepermana/angular/theme/directive`
+
+If you want one convenience provider that wires theme and layout together, use `@ojiepermana/angular/shell`.
+
+Use `@ojiepermana/angular/layout` for layout state, layout controls, layout host mirroring, and shell components.
+Use `@ojiepermana/angular/styles/index.css` for styles in consumer applications.
+If a consumer wants the library's optional application-level reset helpers, they can additionally import `@ojiepermana/angular/styles/resets.css`.
+
+## What This Library Owns
+
+- Global theme state with Angular signals through `ThemeService`
+- Theme runtime DOM contract on `document.documentElement`
+- Standalone theme controls for scheme, color, and style
+- Shared semantic tokens and the Angular Material adapter layer
+- Optional theme-only host mirroring through `ThemeHostDirective`
+
+## Styling Rules
+
+- Semantic tokens are the visual source of truth.
+- Angular Material acts as the behavior layer and reads from shared semantic tokens.
+- Style presets feed a role-token layer so shell, navigation, overlay, data, and control groups can change material treatment without duplicating per-component selectors.
+- Style presets now also own the active typeface tokens, so `flat` and `glass` can ship different font stacks while still flowing through shared runtime variables.
+- In application code, prefer Tailwind utility classes directly in templates.
+- In library code, shared and cross-cutting styles belong in CSS token layers, utilities, or adapters.
+- Dark mode must resolve through the global runtime contract and shared variables, not component-local dark-mode classes.
+- The shared bundle includes reduced-motion-aware chrome transitions so scheme, preset, and style changes feel smoother without animating structural layout geometry.
+- The legacy `_*.css` files and the old `styles/overrides/` tree have been removed.
+
+## Token Usage Model
+
+Use tokens from the most specific stable layer available.
+
+1. Raw palette tokens: `--theme-*` and `--theme-on-*`
+   Use for swatches, previews, charts, and theme-picking UI where the preset color itself must stay stable.
+2. Semantic intent tokens: `--*-solid`, `--*-container`, and their `*-foreground` companions
+   Use for reusable application or library components that need semantic meaning without being tied to one shell role.
+3. Role tokens: `--nav-*`, `--sidebar-*`, `--container-*`, `--overlay-*`, `--data-*`, `--control-*`
+   Use for shipped shell/layout primitives and larger component groups.
+4. Typography tokens: `--typeface-plain`, `--typeface-brand`, `--typeface-mono`
+   Use for base body text, emphasis or heading text, and code text. The active style preset decides their concrete font stacks.
+
+Compatibility aliases remain available:
+
+- `--primary` maps to `--primary-solid`
+- `--secondary` maps to `--secondary-container`
+- `--tertiary` maps to `--tertiary-container`
+- `--neutral` maps to `--neutral-container`
+- `--accent` maps to `--tertiary-container`
+- `--destructive` remains the destructive solid token
+
+Additional semantic families are available for future system work:
+
+- `success`
+- `warning`
+- `info`
+- `disabled`
+- `inverse`
+
+## Runtime Contract
+
+When `ThemeService` is active, it writes the current state to `document.documentElement`.
+
+- `.dark` is added when the resolved scheme is dark.
+- `style.color-scheme` is set to the resolved browser scheme.
+- `data-theme-scheme` stores the selected scheme: `light`, `dark`, or `system`.
+- `data-theme-color` stores the active preset color.
+- `data-theme-style` stores the active style preset.
+
+`ThemeHostDirective` mirrors the same theme-only contract onto any host element with `ngtThemeHost`.
+
+## Supported Values
+
+- `ThemeScheme`: `light`, `dark`, `system`
+- `ThemeColor`: `brand`, `blue`, `green`, `red`, `cyan`, `purple`, `orange`
+- `ThemeStyle`: `flat`, `glass`
+
+## Public API
+
+### Service Entry Point
+
+Import from `@ojiepermana/angular/theme/service`.
+
+- `ThemeService`
+- `provideNgTheme`
+- `NG_THEME_CONFIG`
+- `ThemeScheme`
+- `ThemeColor`
+- `ThemeColorOption`
+- `ThemeStyle`
+- `NgThemeConfig`
+
+`provideNgTheme()` currently defaults to:
+
+- `defaultScheme: 'system'`
+- `defaultColor: 'brand'`
+- `defaultStyle: 'flat'`
+
+Persistence keys are fixed by the runtime. Deprecated config fields such as `storageKey` and `storageVersion` have been removed from `NgThemeConfig`.
+
+Use the optional `colors` config to limit the available color presets exposed by `ThemeService.colorOptions()` and `ColorPickerComponent`.
+Use `colorLabels` to relabel the built-in color presets for localized or product-specific UI copy.
+
+```ts
+provideNgTheme({
+  colors: ['brand', 'green'],
+  colorLabels: {
+    brand: 'Merek',
+    green: 'Hijau',
+  },
+});
+```
+
+`colorLabels` only relabels the built-in preset IDs. If you need a brand-new preset value, add the corresponding CSS token preset first and keep the runtime contract aligned with the supported `ThemeColor` union.
+
+`ThemeService` also exposes `reset()` to clear persisted theme state and restore the configured defaults.
+
+### Component Entry Point
+
+Import from `@ojiepermana/angular/theme/component`.
+
+- `StyleSwitcherComponent` with selector `style-switcher`. Toggles `flat` and `glass`.
+- `ColorPickerComponent` with selector `color-picker`. Renders the configured preset list from `ThemeService.colorOptions()`.
+- `SchemeSwitcherComponent` with selector `scheme-switcher`. Switches between `light`, `dark`, and `system`.
+
+All built-in controls are standalone components with no required inputs.
+
+## SSR Notes
+
+- Providers can be registered on the server safely.
+- Theme DOM writes and `localStorage` persistence remain no-op until the browser runtime is available.
+- `system` scheme resolves from `matchMedia('(prefers-color-scheme: dark)')` only in the browser.
+
+## Troubleshooting
+
+- If theme changes do not appear visually, verify that `@ojiepermana/angular/styles/index.css` is actually imported by the consuming application.
+- If a color never becomes active, make sure `defaultColor` is included in the configured `colors` list. The provider now normalizes invalid combinations back to a safe default.
+- If consumer-facing labels need localization, use `colorLabels` instead of wrapping `ColorPickerComponent` just to rename built-in presets.
+- If a custom design needs a new preset beyond the built-in IDs, add the CSS preset first; `colorLabels` only renames existing preset keys.
+
+### Directive Entry Point
+
+Import from `@ojiepermana/angular/theme/directive`.
+
+- `ThemeHostDirective` with selector `[ngtThemeHost]`. Mirrors the current theme contract onto the host element.
+
+## Related Layout Package
+
+Import from `@ojiepermana/angular/layout`.
+
+- `LayoutService`
+- `provideNgLayout`
+- `NG_LAYOUT_CONFIG`
+- `LayoutMode`
+- `LayoutContainer`
+- `NgLayoutConfig`
+- `LayoutHostDirective` with selector `[ngtLayoutHost]`
+- `LayoutVerticalComponent` with selector `vertical`
+- `LayoutHorizontalComponent` with selector `horizontal`
+- `LayoutContainerSwitcherComponent` with selector `layout-container-switcher`
+- `LayoutModeSwitcherComponent` with selector `layout-mode-switcher`
+
+## Active Stylesheet Bundles
+
+The theme stylesheet source remains `projects/library/theme/styles/index.css` inside this workspace.
+
+It imports the current structure in this order:
+
+- `tokens/foundation.css`
+- `tokens/semantic.css`
+- `modes/dark.css`
+- `presets/colors/index.css`
+- `presets/styles/index.css`
+- `roles/index.css`
+- `utilities/index.css`
+- `adapters/material-ui/index.css`
+
+Layout selectors now live in `projects/library/layout/styles/index.css` inside this workspace.
+
+For applications that consume the published package, use the aggregate bundle at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package. The aggregate bundle imports theme first, then layout.
+
+Application-level resets are intentionally opt-in. If a consumer wants them, import `projects/library/styles/resets.css` in this workspace or `@ojiepermana/angular/styles/resets.css` from the published package in addition to the aggregate bundle.
+
+Preset coverage currently includes:
+
+- Colors: `brand`, `blue`, `green`, `red`, `cyan`, `purple`, `orange`
+- Styles: `flat`, `glass`
+
+Style presets also control typography. The shared bundle maps the active style to:
+
+- `--typeface-plain`
+- `--typeface-brand`
+- `--typeface-mono`
+
+Those runtime tokens are then forwarded to Tailwind font tokens (`font-sans`, `font-display`, `font-mono`) and Angular Material typography tokens.
+
+Consumers can override each style preset independently without changing the `ThemeStyle` union:
+
+```css
+:root {
+  --theme-style-flat-plain-font: 'Segoe UI', sans-serif;
+  --theme-style-flat-brand-font: 'Segoe UI', sans-serif;
+  --theme-style-glass-plain-font: 'Avenir Next', 'Helvetica Neue', sans-serif;
+  --theme-style-glass-brand-font: ui-rounded, 'Avenir Next', sans-serif;
+}
+```
+
+The active color preset exposes these raw palette variables on the root contract:
+
+- `--theme-primary`
+- `--theme-on-primary`
+- `--theme-secondary`
+- `--theme-on-secondary`
+- `--theme-tertiary`
+- `--theme-on-tertiary`
+- `--theme-neutral`
+- `--theme-on-neutral`
+
+The semantic layer maps them to `--primary`, `--secondary`, `--tertiary`, and `--neutral`.
+`--accent` remains as a compatibility alias for `--tertiary`.
+
+Use the raw palette pair when you need a direct preset swatch that does not change with the
+light or dark semantic surface mapping:
+
+```css
+.theme-chip {
+  background: var(--theme-secondary);
+  color: var(--theme-on-secondary);
+}
+```
+
+Use `--secondary-container`, `--tertiary-container`, `--neutral-container`, or the compatibility
+aliases `--secondary`, `--tertiary`, and `--neutral` when you need scheme-aware semantic surfaces.
+
+For stronger emphasis, use the semantic solid tokens directly:
+
+```css
+.status-badge {
+  background: var(--success-solid);
+  color: var(--success-solid-foreground);
+}
+
+.callout {
+  background: var(--info-container);
+  color: var(--info-container-foreground);
+  border: 1px solid color-mix(in oklab, var(--info-solid) 24%, var(--border));
+}
+```
+
+## Usage
+
+### 1. Register the Providers
+
+```ts
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideNgLayout } from '@ojiepermana/angular/layout';
+import { provideNgTheme } from '@ojiepermana/angular/theme/service';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideNgTheme({
+      defaultScheme: 'system',
+      defaultColor: 'brand',
+      defaultStyle: 'flat',
+    }),
+    provideNgLayout({
+      defaultMode: 'vertical',
+      defaultContainer: 'boxed',
+    }),
+  ],
+};
+```
+
+### 2. Register the Shared Styles
+
+Inside this workspace, a consuming application can wire the aggregate source bundle through its Angular build config:
+
+```json
+{
+  "styles": ["projects/library/styles/index.css"]
+}
+```
+
+For a package consumer, use the published aggregate bundle instead:
+
+```css
+@import '@ojiepermana/angular/styles/index.css';
+@import 'tailwindcss';
+```
+
+### 3. Compose a Shell and Controls
+
+```ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  LayoutContainerSwitcherComponent,
+  LayoutVerticalComponent,
+} from '@ojiepermana/angular/layout';
+import {
+  StyleSwitcherComponent,
+  ColorPickerComponent,
+  SchemeSwitcherComponent,
+} from '@ojiepermana/angular/theme/component';
+
+@Component({
+  selector: 'app-shell',
+  imports: [
+    StyleSwitcherComponent,
+    ColorPickerComponent,
+    LayoutContainerSwitcherComponent,
+    LayoutVerticalComponent,
+    SchemeSwitcherComponent,
+  ],
+  template: `
+    <vertical>
+      <nav navigation class="flex h-full w-full flex-col gap-6 px-4 py-5">
+        <div class="flex items-center gap-1">
+          <style-switcher />
+          <layout-container-switcher />
+          <scheme-switcher />
+        </div>
+
+        <color-picker />
+      </nav>
+    </vertical>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppShellComponent {}
+```
+
+### 4. Mirror Theme and Layout State to a Subtree
+
+```html
+<section ngtThemeHost ngtLayoutHost>
+  <ng-content />
+</section>
+```
+
+## Persistence
+
+Theme state is persisted in `localStorage` per axis using fixed flat keys.
+
+The theme package owns these keys:
+
+- `theme-scheme`
+- `theme-color`
+- `theme-style`
+
+The layout package owns:
+
+- `layout-mode`
+- `layout-container`
+
+Legacy `ng-theme:v2:*` entries are migrated automatically to the flat keys when they are read by their owning runtime service.
+
+## Notes for Contributors
+
+- Do not add exports to `@ojiepermana/angular/theme` unless the package contract changes intentionally.
+- Keep imports domain-based through the secondary entry points.
+- Use `@ojiepermana/angular/layout` for layout runtime, layout controls, and shell components.
+- Prefer Tailwind utility classes in templates before adding local or shared CSS.
+- Put shared visual decisions in semantic tokens or shared stylesheets instead of Angular Material tokens.
+- If a new theme axis or preset is added, update the types, service validation, styles, tests, and this README together.

package/theme/styles/adapters/material-ui/index.css

@@ -0,0 +1,210 @@
+:root {
+  --mat-sys-primary: var(--primary);
+  --mat-sys-on-primary: var(--primary-foreground);
+  --mat-sys-secondary: var(--secondary-solid);
+  --mat-sys-on-secondary: var(--secondary-solid-foreground);
+  --mat-sys-tertiary: var(--tertiary-solid);
+  --mat-sys-on-tertiary: var(--tertiary-solid-foreground);
+  --mat-sys-brand-font-family: var(--typeface-brand);
+  --mat-sys-plain-font-family: var(--typeface-plain);
+  --mat-sys-body-large-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-large-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-title-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-title-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-small-font: var(--mat-sys-brand-font-family);
+  --mat-sys-background: var(--background);
+  --mat-sys-on-background: var(--foreground);
+  --mat-sys-surface: var(--container-surface);
+  --mat-sys-on-surface: var(--container-foreground);
+  --mat-sys-surface-container: var(--overlay-surface);
+  --mat-sys-surface-container-high: var(--overlay-surface);
+  --mat-sys-surface-container-highest: color-mix(
+    in oklab,
+    var(--overlay-surface) 90%,
+    var(--muted)
+  );
+  --mat-sys-surface-variant: var(--data-header-surface);
+  --mat-sys-on-surface-variant: var(--data-header-foreground);
+  --mat-sys-inverse-surface: var(--inverse);
+  --mat-sys-inverse-on-surface: var(--inverse-foreground);
+  --mat-sys-outline: var(--container-border);
+  --mat-sys-outline-variant: var(--data-border);
+  --mat-sys-error: var(--destructive);
+  --mat-sys-on-error: var(--destructive-foreground);
+}
+
+.mat-mdc-icon-button.ngt-icon-button {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  padding: 0.625rem;
+  font-family: var(--mat-sys-plain-font-family);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-md);
+  background: var(--control-surface);
+  color: var(--control-foreground);
+  box-shadow: var(--control-shadow);
+  backdrop-filter: var(--control-backdrop);
+  -webkit-backdrop-filter: var(--control-backdrop);
+}
+
+.mat-mdc-icon-button.ngt-icon-button:hover {
+  background: var(--control-hover-surface);
+  color: var(--control-hover-foreground);
+  transform: translateY(-1px);
+}
+
+.mat-mdc-icon-button.ngt-icon-button[aria-pressed='true'] {
+  border-color: color-mix(in oklab, var(--control-focus-ring) 48%, var(--control-border));
+  background: var(--control-active-surface);
+  color: var(--control-active-foreground);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--control-focus-ring) 42%, transparent);
+}
+
+.mat-mdc-icon-button.ngt-icon-button:focus-visible {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+}
+
+.mat-mdc-menu-panel,
+.mat-mdc-select-panel,
+.mat-datepicker-content,
+.mat-mdc-dialog-surface {
+  border: 1px solid var(--overlay-border);
+  border-radius: var(--radius-lg);
+  background: var(--overlay-surface);
+  color: var(--overlay-foreground);
+  box-shadow: var(--overlay-shadow);
+  backdrop-filter: var(--overlay-backdrop);
+  -webkit-backdrop-filter: var(--overlay-backdrop);
+  transition: var(--ngt-chrome-transition);
+}
+
+.mat-mdc-menu-content {
+  padding: 0.375rem;
+}
+
+.mat-mdc-menu-item {
+  min-block-size: 2.5rem;
+  border-radius: var(--radius-md);
+  color: inherit;
+  transition:
+    background-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+.mat-mdc-menu-item .lucide {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.mat-mdc-menu-item:hover,
+.mat-mdc-menu-item.cdk-program-focused,
+.mat-mdc-menu-item.cdk-keyboard-focused {
+  background: var(--tertiary-container);
+  color: var(--tertiary-container-foreground);
+}
+
+.mat-mdc-menu-item[aria-checked='true'] {
+  background: var(--secondary-container);
+  color: var(--secondary-container-foreground);
+}
+
+.mat-mdc-tooltip-surface,
+.mat-mdc-snack-bar-container .mdc-snackbar__surface {
+  border: 1px solid var(--overlay-border);
+  border-radius: var(--radius-md);
+  background: var(--overlay-surface);
+  color: var(--overlay-foreground);
+  box-shadow: var(--overlay-shadow);
+  backdrop-filter: var(--overlay-backdrop);
+  -webkit-backdrop-filter: var(--overlay-backdrop);
+  transition: var(--ngt-chrome-transition);
+}
+
+.mat-mdc-card,
+.mat-expansion-panel,
+.mat-drawer,
+.mat-tree {
+  background: var(--container-surface);
+  color: var(--container-foreground);
+}
+
+.mat-mdc-card,
+.mat-expansion-panel,
+.mat-drawer,
+.mat-tree {
+  border: 1px solid var(--container-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--container-shadow);
+  transition: var(--ngt-shell-transition);
+}
+
+.mat-mdc-table {
+  background: var(--data-surface);
+  color: var(--data-foreground);
+  transition: var(--ngt-chrome-transition);
+}
+
+.mat-toolbar {
+  background: var(--nav-surface);
+  color: var(--nav-foreground);
+  transition: var(--ngt-chrome-transition);
+}
+
+.mat-mdc-header-row {
+  background: var(--data-header-surface);
+  color: var(--data-header-foreground);
+  transition: var(--ngt-chrome-transition);
+}
+
+.mat-mdc-row:hover {
+  background: var(--data-row-hover-surface);
+}
+
+.mat-mdc-header-row,
+.mat-mdc-row,
+.mat-mdc-paginator,
+.mat-divider,
+.mat-drawer,
+.mat-expansion-panel-header {
+  border-color: var(--data-border);
+}
+
+.mat-mdc-row,
+.mat-mdc-paginator,
+.mat-divider,
+.mat-expansion-panel-header,
+.mat-mdc-form-field .mat-mdc-text-field-wrapper,
+.mat-mdc-form-field .mat-mdc-floating-label,
+.mat-mdc-select-trigger,
+.mat-mdc-chip,
+.mat-mdc-tab,
+.mat-mdc-slide-toggle {
+  transition: var(--ngt-chrome-transition);
+}
+
+.mat-mdc-unelevated-button,
+.mat-mdc-raised-button,
+.mat-mdc-fab,
+.mat-mdc-mini-fab {
+  border-radius: var(--radius-md);
+}
+
+.mat-mdc-form-field .mat-mdc-text-field-wrapper,
+.mat-mdc-form-field .mat-mdc-floating-label,
+.mat-mdc-select-trigger,
+.mat-mdc-chip,
+.mat-mdc-tab,
+.mat-mdc-slide-toggle {
+  color: inherit;
+}

package/theme/styles/index.css

@@ -0,0 +1,8 @@
+@import './tokens/foundation.css';
+@import './tokens/semantic.css';
+@import './modes/dark.css';
+@import './presets/colors/index.css';
+@import './presets/styles/index.css';
+@import './roles/index.css';
+@import './utilities/index.css';
+@import './adapters/material-ui/index.css';

package/theme/styles/layout/index.css

@@ -0,0 +1 @@
+@import '../../../layout/styles/index.css';

package/theme/styles/modes/dark.css

@@ -0,0 +1,84 @@
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.19 0.014 286.1);
+  --foreground: oklch(0.966 0.003 286.3);
+  --card: oklch(0.236 0.013 286.3);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.245 0.013 286.2);
+  --popover-foreground: var(--foreground);
+  --primary-solid: color-mix(in oklab, var(--theme-primary) 86%, white 14%);
+  --primary-solid-foreground: oklch(0.19 0.014 286.1);
+  --primary-container: color-mix(in oklab, var(--primary-solid) 22%, var(--background));
+  --primary-container-foreground: var(--foreground);
+  --primary: var(--primary-solid);
+  --primary-foreground: var(--primary-solid-foreground);
+  --secondary-solid: color-mix(in oklab, var(--theme-secondary) 84%, white 16%);
+  --secondary-solid-foreground: oklch(0.19 0.014 286.1);
+  --secondary-container: color-mix(in oklab, var(--secondary-solid) 16%, var(--background));
+  --secondary-container-foreground: var(--foreground);
+  --secondary: var(--secondary-container);
+  --secondary-foreground: var(--secondary-container-foreground);
+  --tertiary-solid: color-mix(in oklab, var(--theme-tertiary) 84%, white 16%);
+  --tertiary-solid-foreground: oklch(0.19 0.014 286.1);
+  --tertiary-container: color-mix(in oklab, var(--tertiary-solid) 20%, var(--background));
+  --tertiary-container-foreground: var(--foreground);
+  --tertiary: var(--tertiary-container);
+  --tertiary-foreground: var(--tertiary-container-foreground);
+  --neutral-solid: color-mix(in oklab, var(--theme-neutral) 78%, white 22%);
+  --neutral-solid-foreground: oklch(0.19 0.014 286.1);
+  --neutral-container: color-mix(in oklab, var(--neutral-solid) 26%, var(--background));
+  --neutral-container-foreground: var(--foreground);
+  --neutral: var(--neutral-container);
+  --neutral-foreground: var(--neutral-container-foreground);
+  --muted: oklch(0.28 0.012 286.4);
+  --muted-foreground: oklch(0.74 0.01 286.4);
+  --accent: var(--tertiary-container);
+  --accent-foreground: var(--tertiary-container-foreground);
+  --destructive-solid: color-mix(in oklab, oklch(0.637 0.237 25.5) 86%, white 14%);
+  --destructive-solid-foreground: oklch(0.19 0.014 286.1);
+  --destructive-container: color-mix(in oklab, var(--destructive-solid) 18%, var(--background));
+  --destructive-container-foreground: var(--foreground);
+  --destructive: var(--destructive-solid);
+  --destructive-foreground: var(--destructive-solid-foreground);
+  --success-solid: color-mix(in oklab, oklch(0.673 0.152 151.5) 84%, white 16%);
+  --success-solid-foreground: oklch(0.19 0.014 286.1);
+  --success-container: color-mix(in oklab, var(--success-solid) 18%, var(--background));
+  --success-container-foreground: var(--foreground);
+  --success: var(--success-container);
+  --success-foreground: var(--success-container-foreground);
+  --warning-solid: color-mix(in oklab, oklch(0.796 0.136 82.4) 82%, white 18%);
+  --warning-solid-foreground: oklch(0.19 0.014 286.1);
+  --warning-container: color-mix(in oklab, var(--warning-solid) 20%, var(--background));
+  --warning-container-foreground: var(--foreground);
+  --warning: var(--warning-container);
+  --warning-foreground: var(--warning-container-foreground);
+  --info-solid: color-mix(in oklab, oklch(0.69 0.116 239.4) 84%, white 16%);
+  --info-solid-foreground: oklch(0.19 0.014 286.1);
+  --info-container: color-mix(in oklab, var(--info-solid) 18%, var(--background));
+  --info-container-foreground: var(--foreground);
+  --info: var(--info-container);
+  --info-foreground: var(--info-container-foreground);
+  --disabled: color-mix(in oklab, var(--neutral-solid) 18%, var(--background));
+  --disabled-foreground: color-mix(in oklab, var(--foreground) 52%, var(--background));
+  --disabled-border: color-mix(in oklab, var(--border) 84%, var(--background));
+  --inverse: var(--foreground);
+  --inverse-foreground: var(--background);
+  --inverse-border: color-mix(in oklab, var(--inverse) 84%, var(--inverse-foreground));
+  --border: oklch(1 0 0 / 0.12);
+  --input: oklch(1 0 0 / 0.16);
+  --ring: color-mix(in oklab, var(--primary-solid) 78%, white 22%);
+  --sidebar: oklch(0.214 0.014 286.2);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: color-mix(in oklab, var(--tertiary-solid) 16%, var(--sidebar));
+  --sidebar-accent-foreground: var(--sidebar-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  /* Shell surfaces continue to derive from the active style preset and semantic card tokens. */
+  --shell-shadow: var(--shadow-sm);
+  --surface-elevated: oklch(0.262 0.012 286.3);
+  --surface-elevated-foreground: var(--foreground);
+  --surface-elevated-border: var(--border);
+  --surface-elevated-shadow: var(--shadow-md);
+}

package/theme/styles/presets/colors/blue.css

@@ -0,0 +1,10 @@
+[data-theme-color='blue'] {
+  --theme-primary: oklch(0.58 0.16 248.8);
+  --theme-on-primary: oklch(0.985 0 0);
+  --theme-secondary: oklch(0.647 0.122 251.04);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.715 0.085 253.037);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.735 0.031 260.347);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}