@memobit/themes 2.2.0 → 2.3.0

package/dist/themeConfig.js

@@ -24,8 +24,7 @@ var THEME_CONFIGS = [
 	{
 		value: "cyber-forest",
 		label: "Cyber Forest",
-		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
-		recommendedApps: ["Basket"]
+		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
 	},
 	{
 		value: "dashdarkx",
@@ -35,7 +34,6 @@ var THEME_CONFIGS = [
 	{
 		value: "lumen",
 		label: "Lumen",
-		recommendedApps: ["Lumen"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap",
 		fontUrlMono: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
@@ -63,13 +61,12 @@ var THEME_CONFIGS = [
 	{
 		value: "tailwind-vue-dark",
 		label: "Tailwind View Dark",
-		fontUrl: "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swa",
-		recommendedApps: ["Basket"]
+		fontUrl: "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swa"
 	},
 	{
 		value: "sandy-parchment",
 		label: "Sandy Parchment",
-		recommendedApps: ["Shelf", "Basket"],
+		recommendedApps: ["Shelf"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&display=swap"
 	},
@@ -83,20 +80,17 @@ var THEME_CONFIGS = [
 		value: "cobalt-pulse",
 		label: "Cobalt Pulse",
 		fontUrl: "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap",
-		fontUrlMono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
-		recommendedApps: ["Basket"]
+		fontUrlMono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
 	},
 	{
 		value: "carbon-velocity",
 		label: "Carbon Velocity",
-		recommendedApps: ["Resume"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap"
 	},
 	{
 		value: "signal-burst",
 		label: "Signal Burst",
-		recommendedApps: ["Basket", "Resume"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"
 	},
@@ -109,7 +103,6 @@ var THEME_CONFIGS = [
 	{
 		value: "noir-marquee",
 		label: "Noir Marquee",
-		recommendedApps: ["Reels", "Resume"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap"
 	},
@@ -128,18 +121,12 @@ var THEME_CONFIGS = [
 	{
 		value: "horizon-amber",
 		label: "Horizon Amber",
-		recommendedApps: ["Basket"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap"
 	},
 	{
 		value: "chalk-circuit",
 		label: "Chalk & Circuit",
-		recommendedApps: [
-			"Quiz Lab",
-			"Basket",
-			"Resume"
-		],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"
 	},
@@ -152,7 +139,6 @@ var THEME_CONFIGS = [
 	{
 		value: "slate-bazaar",
 		label: "Slate Bazaar",
-		recommendedApps: ["Basket"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
 	},
@@ -164,22 +150,13 @@ var THEME_CONFIGS = [
 	{
 		value: "midnight-atlas",
 		label: "Midnight Atlas",
-		recommendedApps: [
-			"Voyage",
-			"Basket",
-			"Resume"
-		],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&display=swap"
 	},
 	{
 		value: "vault-guard",
 		label: "Vault Guard",
-		recommendedApps: [
-			"Backup",
-			"Basket",
-			"Resume"
-		],
+		recommendedApps: ["Backup"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
 	},
@@ -192,7 +169,7 @@ var THEME_CONFIGS = [
 	{
 		value: "asphalt-code",
 		label: "Asphalt Code",
-		recommendedApps: ["Cars Crawler", "Resume"],
+		recommendedApps: ["Cars Crawler"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
 	},
@@ -206,25 +183,18 @@ var THEME_CONFIGS = [
 	{
 		value: "vital-signal",
 		label: "Vital Signal",
-		recommendedApps: [
-			"Health-IQ",
-			"Basket",
-			"Resume"
-		],
 		fontUrl: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap"
 	},
 	{
 		value: "mesh-circuit",
 		label: "Mesh Circuit",
-		recommendedApps: ["Resume"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap"
 	},
 	{
 		value: "vital-aurora",
 		label: "Vital Aurora",
-		recommendedApps: ["Lifespan"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
 	},
@@ -237,21 +207,18 @@ var THEME_CONFIGS = [
 	{
 		value: "signal-clarity",
 		label: "Signal Clarity",
-		recommendedApps: ["Network Audit"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
 	},
 	{
 		value: "audit-ember",
 		label: "Audit Ember",
-		recommendedApps: ["Network Audit", "Resume"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap",
 		fontUrlMono: "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap"
 	},
 	{
 		value: "blueprint-clay",
 		label: "Blueprint Clay",
-		recommendedApps: ["Real Estate Crawler"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
 	},
@@ -264,7 +231,6 @@ var THEME_CONFIGS = [
 	{
 		value: "screening-room",
 		label: "Screening Room",
-		recommendedApps: ["Reels"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800&display=swap"
 	},
@@ -277,25 +243,18 @@ var THEME_CONFIGS = [
 	{
 		value: "atelier-media",
 		label: "Atelier Media",
-		recommendedApps: ["Atelier Media"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap"
 	},
 	{
 		value: "chrono-atlas",
 		label: "Chrono Atlas",
-		recommendedApps: [
-			"Atlas of Time",
-			"Basket",
-			"Resume"
-		],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
 	},
 	{
 		value: "orbital-night",
 		label: "Orbital Night",
-		recommendedApps: ["Global Pulse"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap",
 		fontUrlMono: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
 	},
@@ -327,7 +286,6 @@ var THEME_CONFIGS = [
 	{
 		value: "circuit-harbor",
 		label: "Circuit Harbor",
-		recommendedApps: ["IoT"],
 		fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
 		fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
 	}

package/dist/themes/atelier-media-darkroom.css

@@ -0,0 +1,83 @@
+[data-theme='atelier-media-darkroom']{color-scheme:dark;--font-body:'Inter', 'Avenir Next', sans-serif;--font-display:'Source Serif 4', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:500;--display-size:var(--font-size-xl);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.16em;--header-weight:600;--canvas-layers:radial-gradient(50% 45% at 0% 100%, rgba(192, 116, 42, 0.08) 0%, transparent 65%), radial-gradient(55% 50% at 100% 0%, rgba(31, 92, 68, 0.18) 0%, transparent 65%);--surface-canvas:#0d1311;--surface-card:#141c19;--surface-raised:#101714;--surface-raised-alt:#19221f;--surface-overlay:#1b2521;--button-fill:#1d2824;--surface-overlay-card:#151d1a;--surface-sunken:#222d29;--control-hover:#212c28;--surface-hover:color-mix(in oklab, #6cc49c 8%, transparent);--surface-stripe:#16201c;--rating-empty:color-mix(in oklab, #222d29 85%, #f5f2ea);--surface-selected:color-mix(in oklab, #6cc49c 18%, transparent);--surface-blur:none;--text-strong:#f5f2ea;--text-default:#e0ddd4;--text-soft:#c1beb4;--text-muted:#9c9a91;--text-subtle:#76766e;--text-link:#86d0ae;--text-link-hover:#b0e2ca;--border-subtle:rgba(224, 221, 212, 0.08);--border-default:rgba(224, 221, 212, 0.13);--border-strong:rgba(224, 221, 212, 0.13);--border-card:rgba(224, 221, 212, 0.07);--border-card-hover:rgba(108, 196, 156, 0.4);--field-bg:#101714;--field-bg-focus:#101714;--field-bg-disabled:color-mix(in oklab, #101714 94%, #f5f2ea);--field-fg:#e0ddd4;--field-border:rgba(224, 221, 212, 0.16);--field-border-hover:#6cc49c;--field-border-focus:#6cc49c;--field-placeholder:#76766e;--field-label:#9c9a91;--field-ring:color-mix(in oklab, #6cc49c 24%, transparent);--tone-neutral-solid:#f5f2ea;--tone-neutral-solid-hover:color-mix(in oklab, #f5f2ea 70%, #e0ddd4);--tone-neutral-on-solid:#f8f5ec;--tone-neutral-soft:#212c28;--tone-neutral-soft-hover:color-mix(in oklab, #212c28 92%, #f5f2ea);--tone-neutral-on-soft:#f5f2ea;--tone-neutral-border:rgba(224, 221, 212, 0.13);--tone-neutral-text:#c1beb4;--tone-accent-solid:#2b7556;--tone-accent-mark:#6cc49c;--tone-accent-solid-hover:#338865;--tone-accent-on-solid:#f8f5ec;--tone-accent-soft:color-mix(in oklab, #6cc49c 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #6cc49c 24%, transparent);--tone-accent-on-soft:#86d0ae;--tone-accent-border:color-mix(in oklab, #6cc49c 40%, transparent);--tone-accent-text:#86d0ae;--tone-success-solid:#4a7a2c;--tone-success-mark:#9ccc72;--tone-success-solid-hover:#568c34;--tone-success-on-solid:#f8f5ec;--tone-success-soft:color-mix(in oklab, #9ccc72 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #9ccc72 24%, transparent);--tone-success-on-soft:#b0d88c;--tone-success-border:color-mix(in oklab, #9ccc72 40%, transparent);--tone-success-text:#b0d88c;--tone-warning-solid:#93591a;--tone-warning-mark:#e0a35e;--tone-warning-solid-hover:#a76620;--tone-warning-on-solid:#f8f5ec;--tone-warning-soft:color-mix(in oklab, #e0a35e 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e0a35e 24%, transparent);--tone-warning-on-soft:#ebb87d;--tone-warning-border:color-mix(in oklab, #e0a35e 40%, transparent);--tone-warning-text:#ebb87d;--tone-danger-solid:#ad3e3c;--tone-danger-mark:#f08a86;--tone-danger-solid-hover:#c04a48;--tone-danger-on-solid:#f8f5ec;--tone-danger-soft:color-mix(in oklab, #f08a86 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f08a86 24%, transparent);--tone-danger-on-soft:#f4a09c;--tone-danger-border:color-mix(in oklab, #f08a86 40%, transparent);--tone-danger-text:#f4a09c;--accent-glow:#e0a35e;--selected-bg:var(--tone-accent-solid);--selected-bg-hover:var(--tone-accent-solid-hover);--selected-fg:var(--tone-accent-on-solid);--selected-border:var(--tone-accent-solid);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(245, 242, 234, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 14px 34px -16px rgba(0, 0, 0, 0.75);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f5f2ea 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.16em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
+/*
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
+ * "success" chip and a success toast carry the same three colours.
+ *
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
+ * the same components. Once the classic themes are retired they move into the lib.
+ */
+
+[data-theme='atelier-media-darkroom'] .badge-variant--default {
+    --recipe-soft: var(--tone-neutral-soft);
+    --recipe-soft-hover: var(--tone-neutral-soft-hover);
+    --recipe-on-soft: var(--tone-neutral-on-soft);
+    --recipe-border: var(--tone-neutral-border);
+}
+
+[data-theme='atelier-media-darkroom'] :is(.badge-variant--info, .chip--info) {
+    --recipe-soft: var(--tone-accent-soft);
+    --recipe-soft-hover: var(--tone-accent-soft-hover);
+    --recipe-on-soft: var(--tone-accent-on-soft);
+    --recipe-border: var(--tone-accent-border);
+}
+
+[data-theme='atelier-media-darkroom'] :is(.badge-variant--success, .chip--success) {
+    --recipe-soft: var(--tone-success-soft);
+    --recipe-soft-hover: var(--tone-success-soft-hover);
+    --recipe-on-soft: var(--tone-success-on-soft);
+    --recipe-border: var(--tone-success-border);
+}
+
+[data-theme='atelier-media-darkroom'] :is(.badge-variant--warning, .chip--warning) {
+    --recipe-soft: var(--tone-warning-soft);
+    --recipe-soft-hover: var(--tone-warning-soft-hover);
+    --recipe-on-soft: var(--tone-warning-on-soft);
+    --recipe-border: var(--tone-warning-border);
+}
+
+[data-theme='atelier-media-darkroom'] :is(.badge-variant--danger, .chip--danger) {
+    --recipe-soft: var(--tone-danger-soft);
+    --recipe-soft-hover: var(--tone-danger-soft-hover);
+    --recipe-on-soft: var(--tone-danger-on-soft);
+    --recipe-border: var(--tone-danger-border);
+}
+
+[data-theme='atelier-media-darkroom']
+    .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
+    border-color: var(--recipe-border);
+    background-color: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='atelier-media-darkroom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
+    border-color: var(--border-default);
+    background: transparent;
+    color: var(--text-default);
+}
+
+[data-theme='atelier-media-darkroom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--surface-hover);
+    color: var(--text-strong);
+}
+
+[data-theme='atelier-media-darkroom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='atelier-media-darkroom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft-hover);
+    color: var(--recipe-on-soft);
+}
+
+/* A default chip carries no tone, so its selected state is the theme's selection style. */
+[data-theme='atelier-media-darkroom'] .chip.chip--default {
+    --recipe-soft: var(--selected-bg);
+    --recipe-soft-hover: var(--selected-bg-hover);
+    --recipe-on-soft: var(--selected-fg);
+    --recipe-border: var(--selected-border);
+}

package/dist/themes/atelier-media-studio.css

@@ -0,0 +1,83 @@
+[data-theme='atelier-media-studio']{color-scheme:light;--font-body:'Inter', 'Avenir Next', sans-serif;--font-display:'Source Serif 4', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:500;--display-size:var(--font-size-xl);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.16em;--header-weight:600;--canvas-layers:radial-gradient(50% 45% at 100% 0%, rgba(31, 92, 68, 0.08) 0%, transparent 65%), radial-gradient(55% 50% at 0% 100%, rgba(192, 116, 42, 0.07) 0%, transparent 65%), radial-gradient(120% 100% at 0% 0%, #f8f5ec 0%, #f1ede1 50%, #e8e3d2 100%);--surface-canvas:#f1ede1;--surface-card:rgba(255, 254, 250, 0.96);--surface-raised:#f8f5ec;--surface-raised-alt:rgba(246, 243, 235, 0.7);--surface-overlay:#fbf9f3;--button-fill:#efe9dc;--surface-overlay-card:rgba(255, 254, 250, 0.94);--surface-sunken:#e3ddcc;--control-hover:#e2ebe1;--surface-hover:color-mix(in oklab, #2a7a5a 8%, transparent);--surface-stripe:#f6f3eb;--rating-empty:color-mix(in oklab, #e3ddcc 85%, #161310);--surface-selected:color-mix(in oklab, #2a7a5a 18%, transparent);--surface-blur:blur(20px) saturate(1.25);--text-strong:#161310;--text-default:#2b2823;--text-soft:#4d4840;--text-muted:#655e53;--text-subtle:#8a8274;--text-link:#1f5c44;--text-link-hover:#16452f;--border-subtle:rgba(31, 92, 68, 0.14);--border-default:rgba(45, 40, 33, 0.18);--border-strong:rgba(45, 40, 33, 0.18);--border-card:rgba(255, 255, 252, 0.9);--border-card-hover:rgba(31, 92, 68, 0.4);--field-bg:#f8f5ec;--field-bg-focus:#fffdf7;--field-bg-disabled:color-mix(in oklab, #f8f5ec 94%, #161310);--field-fg:#2b2823;--field-border:rgba(45, 40, 33, 0.24);--field-border-hover:#1f5c44;--field-border-focus:#2a7a5a;--field-placeholder:#8a8274;--field-label:#655e53;--field-ring:color-mix(in oklab, #2a7a5a 24%, transparent);--tone-neutral-solid:#161310;--tone-neutral-solid-hover:color-mix(in oklab, #161310 70%, #2b2823);--tone-neutral-on-solid:#f8f5ec;--tone-neutral-soft:#e2ebe1;--tone-neutral-soft-hover:color-mix(in oklab, #e2ebe1 92%, #161310);--tone-neutral-on-soft:#161310;--tone-neutral-border:rgba(45, 40, 33, 0.18);--tone-neutral-text:#4d4840;--tone-accent-solid:#1f5c44;--tone-accent-mark:#2a7a5a;--tone-accent-solid-hover:#16452f;--tone-accent-on-solid:#f8f5ec;--tone-accent-soft:color-mix(in oklab, #2a7a5a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #2a7a5a 24%, transparent);--tone-accent-on-soft:#1f5c44;--tone-accent-border:color-mix(in oklab, #2a7a5a 40%, transparent);--tone-accent-text:#1f5c44;--tone-success-solid:#2d7d52;--tone-success-mark:#2d7d52;--tone-success-solid-hover:#226241;--tone-success-on-solid:#f8f5ec;--tone-success-soft:color-mix(in oklab, #2d7d52 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #2d7d52 24%, transparent);--tone-success-on-soft:#2a7049;--tone-success-border:color-mix(in oklab, #2d7d52 40%, transparent);--tone-success-text:#2a7049;--tone-warning-solid:#9a5a1c;--tone-warning-mark:#c0742a;--tone-warning-solid-hover:#7f4a17;--tone-warning-on-solid:#f8f5ec;--tone-warning-soft:color-mix(in oklab, #c0742a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #c0742a 24%, transparent);--tone-warning-on-soft:#8e521a;--tone-warning-border:color-mix(in oklab, #c0742a 40%, transparent);--tone-warning-text:#8e521a;--tone-danger-solid:#b23b3b;--tone-danger-mark:#b23b3b;--tone-danger-solid-hover:#97312f;--tone-danger-on-solid:#f8f5ec;--tone-danger-soft:color-mix(in oklab, #b23b3b 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #b23b3b 24%, transparent);--tone-danger-on-soft:#a33636;--tone-danger-border:color-mix(in oklab, #b23b3b 40%, transparent);--tone-danger-text:#a33636;--accent-glow:#c0742a;--selected-bg:var(--tone-accent-solid);--selected-bg-hover:var(--tone-accent-solid-hover);--selected-fg:var(--tone-accent-on-solid);--selected-border:var(--tone-accent-solid);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, rgba(22, 19, 16, 0.14) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(22, 19, 16, 0.14) 62%, transparent);--shadow-sm:0 1px 0 rgba(255, 255, 252, 0.95) inset, 0 0 0 1px rgba(22, 19, 16, 0.06), 0 14px 36px -18px rgba(22, 19, 16, 0.28);--shadow-md:0 14px 36px rgba(22, 19, 16, 0.1), 0 2px 6px rgba(22, 19, 16, 0.07);--shadow-lg:0 20px 60px rgba(22, 19, 16, 0.18), 0 4px 14px rgba(22, 19, 16, 0.1);--scrim:rgba(22, 19, 16, 0.4);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.16em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
+/*
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
+ * "success" chip and a success toast carry the same three colours.
+ *
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
+ * the same components. Once the classic themes are retired they move into the lib.
+ */
+
+[data-theme='atelier-media-studio'] .badge-variant--default {
+    --recipe-soft: var(--tone-neutral-soft);
+    --recipe-soft-hover: var(--tone-neutral-soft-hover);
+    --recipe-on-soft: var(--tone-neutral-on-soft);
+    --recipe-border: var(--tone-neutral-border);
+}
+
+[data-theme='atelier-media-studio'] :is(.badge-variant--info, .chip--info) {
+    --recipe-soft: var(--tone-accent-soft);
+    --recipe-soft-hover: var(--tone-accent-soft-hover);
+    --recipe-on-soft: var(--tone-accent-on-soft);
+    --recipe-border: var(--tone-accent-border);
+}
+
+[data-theme='atelier-media-studio'] :is(.badge-variant--success, .chip--success) {
+    --recipe-soft: var(--tone-success-soft);
+    --recipe-soft-hover: var(--tone-success-soft-hover);
+    --recipe-on-soft: var(--tone-success-on-soft);
+    --recipe-border: var(--tone-success-border);
+}
+
+[data-theme='atelier-media-studio'] :is(.badge-variant--warning, .chip--warning) {
+    --recipe-soft: var(--tone-warning-soft);
+    --recipe-soft-hover: var(--tone-warning-soft-hover);
+    --recipe-on-soft: var(--tone-warning-on-soft);
+    --recipe-border: var(--tone-warning-border);
+}
+
+[data-theme='atelier-media-studio'] :is(.badge-variant--danger, .chip--danger) {
+    --recipe-soft: var(--tone-danger-soft);
+    --recipe-soft-hover: var(--tone-danger-soft-hover);
+    --recipe-on-soft: var(--tone-danger-on-soft);
+    --recipe-border: var(--tone-danger-border);
+}
+
+[data-theme='atelier-media-studio']
+    .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
+    border-color: var(--recipe-border);
+    background-color: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='atelier-media-studio'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
+    border-color: var(--border-default);
+    background: transparent;
+    color: var(--text-default);
+}
+
+[data-theme='atelier-media-studio'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--surface-hover);
+    color: var(--text-strong);
+}
+
+[data-theme='atelier-media-studio'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='atelier-media-studio'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft-hover);
+    color: var(--recipe-on-soft);
+}
+
+/* A default chip carries no tone, so its selected state is the theme's selection style. */
+[data-theme='atelier-media-studio'] .chip.chip--default {
+    --recipe-soft: var(--selected-bg);
+    --recipe-soft-hover: var(--selected-bg-hover);
+    --recipe-on-soft: var(--selected-fg);
+    --recipe-border: var(--selected-border);
+}

package/dist/themes/atlas-of-time-chronicle.css

@@ -0,0 +1,83 @@
+[data-theme='atlas-of-time-chronicle']{color-scheme:light;--font-body:'Spectral', 'Source Serif Pro', Georgia, serif;--font-display:'Newsreader', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-xl);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.2em;--header-weight:600;--canvas-layers:radial-gradient(60% 50% at 100% 0%, rgba(46, 82, 102, 0.08) 0%, transparent 65%), radial-gradient(50% 45% at 0% 100%, rgba(168, 71, 42, 0.06) 0%, transparent 65%);--surface-canvas:#ede0c8;--surface-card:#f5ece0;--surface-raised:#f8f1e6;--surface-raised-alt:#ebdfc8;--surface-overlay:#f8f1e6;--button-fill:#f5ece0;--surface-overlay-card:#f3e9db;--surface-sunken:#e0d0b0;--control-hover:#e4d6bb;--surface-hover:color-mix(in oklab, #2e5266 8%, transparent);--surface-stripe:#efe4d0;--rating-empty:color-mix(in oklab, #e0d0b0 85%, #1f1810);--surface-selected:color-mix(in oklab, #2e5266 18%, transparent);--surface-blur:none;--text-strong:#1f1810;--text-default:#3b2e1f;--text-soft:#55432c;--text-muted:#6e5a3c;--text-subtle:#94805c;--text-link:#963d22;--text-link-hover:#6e2c18;--border-subtle:#d6c4a2;--border-default:#c9b48d;--border-strong:#c9b48d;--border-card:#d0bd98;--border-card-hover:#b8924a;--field-bg:#f8f1e6;--field-bg-focus:#f8f1e6;--field-bg-disabled:color-mix(in oklab, #f8f1e6 94%, #1f1810);--field-fg:#3b2e1f;--field-border:#c3ad85;--field-border-hover:#8a7350;--field-border-focus:#2e5266;--field-placeholder:#94805c;--field-label:#6e5a3c;--field-ring:color-mix(in oklab, #2e5266 24%, transparent);--tone-neutral-solid:#1f1810;--tone-neutral-solid-hover:color-mix(in oklab, #1f1810 70%, #3b2e1f);--tone-neutral-on-solid:#f5ece0;--tone-neutral-soft:#e4d6bb;--tone-neutral-soft-hover:color-mix(in oklab, #e4d6bb 92%, #1f1810);--tone-neutral-on-soft:#1f1810;--tone-neutral-border:#c9b48d;--tone-neutral-text:#55432c;--tone-accent-solid:#a8472a;--tone-accent-mark:#2e5266;--tone-accent-solid-hover:#8a3820;--tone-accent-on-solid:#f5ece0;--tone-accent-soft:color-mix(in oklab, #2e5266 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #2e5266 24%, transparent);--tone-accent-on-soft:#963d22;--tone-accent-border:color-mix(in oklab, #2e5266 40%, transparent);--tone-accent-text:#963d22;--tone-success-solid:#3d5a3a;--tone-success-mark:#3d5a3a;--tone-success-solid-hover:#2f472d;--tone-success-on-solid:#f5ece0;--tone-success-soft:color-mix(in oklab, #3d5a3a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #3d5a3a 24%, transparent);--tone-success-on-soft:#36513a;--tone-success-border:color-mix(in oklab, #3d5a3a 40%, transparent);--tone-success-text:#36513a;--tone-warning-solid:#7f6128;--tone-warning-mark:#b8924a;--tone-warning-solid-hover:#6a5021;--tone-warning-on-solid:#f5ece0;--tone-warning-soft:color-mix(in oklab, #b8924a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #b8924a 24%, transparent);--tone-warning-on-soft:#7a5d26;--tone-warning-border:color-mix(in oklab, #b8924a 40%, transparent);--tone-warning-text:#7a5d26;--tone-danger-solid:#9a2b2b;--tone-danger-mark:#9a2b2b;--tone-danger-solid-hover:#7d2222;--tone-danger-on-solid:#f5ece0;--tone-danger-soft:color-mix(in oklab, #9a2b2b 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #9a2b2b 24%, transparent);--tone-danger-on-soft:#902828;--tone-danger-border:color-mix(in oklab, #9a2b2b 40%, transparent);--tone-danger-text:#902828;--accent-glow:#b8924a;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, rgba(31, 24, 16, 0.18) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(31, 24, 16, 0.18) 62%, transparent);--shadow-sm:0 0 0 1px rgba(31, 24, 16, 0.06), 0 14px 36px -18px rgba(31, 24, 16, 0.3);--shadow-md:0 8px 24px rgba(31, 24, 16, 0.16), 0 2px 6px rgba(31, 24, 16, 0.08);--shadow-lg:0 16px 48px rgba(31, 24, 16, 0.24), 0 4px 12px rgba(31, 24, 16, 0.14);--scrim:rgba(31, 24, 16, 0.42);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-xs);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.2em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
+/*
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
+ * "success" chip and a success toast carry the same three colours.
+ *
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
+ * the same components. Once the classic themes are retired they move into the lib.
+ */
+
+[data-theme='atlas-of-time-chronicle'] .badge-variant--default {
+    --recipe-soft: var(--tone-neutral-soft);
+    --recipe-soft-hover: var(--tone-neutral-soft-hover);
+    --recipe-on-soft: var(--tone-neutral-on-soft);
+    --recipe-border: var(--tone-neutral-border);
+}
+
+[data-theme='atlas-of-time-chronicle'] :is(.badge-variant--info, .chip--info) {
+    --recipe-soft: var(--tone-accent-soft);
+    --recipe-soft-hover: var(--tone-accent-soft-hover);
+    --recipe-on-soft: var(--tone-accent-on-soft);
+    --recipe-border: var(--tone-accent-border);
+}
+
+[data-theme='atlas-of-time-chronicle'] :is(.badge-variant--success, .chip--success) {
+    --recipe-soft: var(--tone-success-soft);
+    --recipe-soft-hover: var(--tone-success-soft-hover);
+    --recipe-on-soft: var(--tone-success-on-soft);
+    --recipe-border: var(--tone-success-border);
+}
+
+[data-theme='atlas-of-time-chronicle'] :is(.badge-variant--warning, .chip--warning) {
+    --recipe-soft: var(--tone-warning-soft);
+    --recipe-soft-hover: var(--tone-warning-soft-hover);
+    --recipe-on-soft: var(--tone-warning-on-soft);
+    --recipe-border: var(--tone-warning-border);
+}
+
+[data-theme='atlas-of-time-chronicle'] :is(.badge-variant--danger, .chip--danger) {
+    --recipe-soft: var(--tone-danger-soft);
+    --recipe-soft-hover: var(--tone-danger-soft-hover);
+    --recipe-on-soft: var(--tone-danger-on-soft);
+    --recipe-border: var(--tone-danger-border);
+}
+
+[data-theme='atlas-of-time-chronicle']
+    .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
+    border-color: var(--recipe-border);
+    background-color: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='atlas-of-time-chronicle'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
+    border-color: var(--border-default);
+    background: transparent;
+    color: var(--text-default);
+}
+
+[data-theme='atlas-of-time-chronicle'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--surface-hover);
+    color: var(--text-strong);
+}
+
+[data-theme='atlas-of-time-chronicle'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='atlas-of-time-chronicle'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft-hover);
+    color: var(--recipe-on-soft);
+}
+
+/* A default chip carries no tone, so its selected state is the theme's selection style. */
+[data-theme='atlas-of-time-chronicle'] .chip.chip--default {
+    --recipe-soft: var(--selected-bg);
+    --recipe-soft-hover: var(--selected-bg-hover);
+    --recipe-on-soft: var(--selected-fg);
+    --recipe-border: var(--selected-border);
+}