@memobit/themes 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/README.md +1 -1
  2. package/dist/authoredThemes.d.ts +138 -0
  3. package/dist/authoredThemes.js +852 -1
  4. package/dist/themeConfig.js +6 -48
  5. package/dist/themes/atelier-media-darkroom.css +83 -0
  6. package/dist/themes/atelier-media-studio.css +83 -0
  7. package/dist/themes/atlas-of-time-chronicle.css +83 -0
  8. package/dist/themes/atlas-of-time-night-archive.css +83 -0
  9. package/dist/themes/basket-emerald.css +83 -0
  10. package/dist/themes/basket-greenmarket.css +83 -0
  11. package/dist/themes/faviconify-glow-stick.css +83 -0
  12. package/dist/themes/faviconify-sticker-sheet.css +83 -0
  13. package/dist/themes/global-pulse-atlas-paper.css +83 -0
  14. package/dist/themes/global-pulse-orbital.css +83 -0
  15. package/dist/themes/health-iq-lab-glass.css +83 -0
  16. package/dist/themes/health-iq-signal.css +83 -0
  17. package/dist/themes/holdings-ledger.css +83 -0
  18. package/dist/themes/holdings-night-ledger.css +83 -0
  19. package/dist/themes/iot-harbor.css +83 -0
  20. package/dist/themes/iot-wall-panel.css +83 -0
  21. package/dist/themes/lifeline-album.css +83 -0
  22. package/dist/themes/lifeline-starlit.css +83 -0
  23. package/dist/themes/lifespan-aurora.css +83 -0
  24. package/dist/themes/lifespan-long-evening.css +83 -0
  25. package/dist/themes/llm-lab-bench.css +83 -0
  26. package/dist/themes/llm-lab-inference.css +83 -0
  27. package/dist/themes/lumen-contact-sheet.css +83 -0
  28. package/dist/themes/lumen-lantern.css +83 -0
  29. package/dist/themes/mirror-reflection.css +83 -0
  30. package/dist/themes/mirror-still-lake.css +83 -0
  31. package/dist/themes/network-audit-clarity.css +83 -0
  32. package/dist/themes/network-audit-report.css +83 -0
  33. package/dist/themes/nexus-console.css +83 -0
  34. package/dist/themes/nexus-switchboard.css +83 -0
  35. package/dist/themes/pinhole-darkroom.css +83 -0
  36. package/dist/themes/pinhole-lightbox.css +83 -0
  37. package/dist/themes/quiz-lab-chalkboard.css +83 -0
  38. package/dist/themes/quiz-lab-whiteboard.css +83 -0
  39. package/dist/themes/realestate-blueprint.css +83 -0
  40. package/dist/themes/realestate-night-plan.css +83 -0
  41. package/dist/themes/reels-marquee.css +83 -0
  42. package/dist/themes/reels-matinee.css +83 -0
  43. package/dist/themes/resume-graphite.css +83 -0
  44. package/dist/themes/resume-letterpress.css +83 -0
  45. package/dist/themes/reverb-after-hours.css +83 -0
  46. package/dist/themes/reverb-liner-notes.css +83 -0
  47. package/dist/themes/tessera-keycard.css +83 -0
  48. package/dist/themes/tessera-vault.css +83 -0
  49. package/dist/themes/voyage-field-guide.css +83 -0
  50. package/dist/themes/voyage-midnight-atlas.css +83 -0
  51. package/dist/themes.css +4139 -275
  52. package/package.json +1 -1
package/dist/themes/quiz-lab-whiteboard.css ADDED
@@ -0,0 +1,83 @@
1
+ [data-theme='quiz-lab-whiteboard']{color-scheme:light;--font-body:'Nunito', 'Avenir', sans-serif;--font-display:'Exo 2', 'Nunito', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:700;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:0.02em;--label-weight:700;--label-transform:none;--label-tracking:normal;--header-weight:700;--canvas-layers:repeating-linear-gradient(0deg, rgba(20, 32, 26, 0.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(20, 32, 26, 0.03) 0 1px, transparent 1px 28px);--surface-canvas:#f3f5f2;--surface-card:#ffffff;--surface-raised:#ffffff;--surface-raised-alt:#f5f8f4;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#ffffff;--surface-sunken:#e0e7df;--control-hover:#e8eee7;--surface-hover:color-mix(in oklab, #65a30d 8%, transparent);--surface-stripe:#f8faf7;--rating-empty:color-mix(in oklab, #e0e7df 85%, #111a14);--surface-selected:color-mix(in oklab, #65a30d 18%, transparent);--surface-blur:none;--text-strong:#111a14;--text-default:#202b24;--text-soft:#38453d;--text-muted:#55625a;--text-subtle:#839088;--text-link:#3a630b;--text-link-hover:#294707;--border-subtle:rgba(17, 26, 20, 0.08);--border-default:rgba(17, 26, 20, 0.14);--border-strong:rgba(17, 26, 20, 0.14);--border-card:rgba(17, 26, 20, 0.1);--border-card-hover:rgba(63, 107, 12, 0.4);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #111a14);--field-fg:#202b24;--field-border:rgba(17, 26, 20, 0.2);--field-border-hover:#3f6b0c;--field-border-focus:#65a30d;--field-placeholder:#839088;--field-label:#55625a;--field-ring:color-mix(in oklab, #65a30d 24%, transparent);--tone-neutral-solid:#111a14;--tone-neutral-solid-hover:color-mix(in oklab, #111a14 70%, #202b24);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e8eee7;--tone-neutral-soft-hover:color-mix(in oklab, #e8eee7 92%, #111a14);--tone-neutral-on-soft:#111a14;--tone-neutral-border:rgba(17, 26, 20, 0.14);--tone-neutral-text:#38453d;--tone-accent-solid:#3f6b0c;--tone-accent-mark:#65a30d;--tone-accent-solid-hover:#335809;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #65a30d 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #65a30d 24%, transparent);--tone-accent-on-soft:#3a630b;--tone-accent-border:color-mix(in oklab, #65a30d 40%, transparent);--tone-accent-text:#3a630b;--tone-success-solid:#15803d;--tone-success-mark:#22c55e;--tone-success-solid-hover:#166534;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #22c55e 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #22c55e 24%, transparent);--tone-success-on-soft:#15703a;--tone-success-border:color-mix(in oklab, #22c55e 40%, transparent);--tone-success-text:#15703a;--tone-warning-solid:#a16207;--tone-warning-mark:#eab308;--tone-warning-solid-hover:#854d0e;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #eab308 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #eab308 24%, transparent);--tone-warning-on-soft:#8a5306;--tone-warning-border:color-mix(in oklab, #eab308 40%, transparent);--tone-warning-text:#8a5306;--tone-danger-solid:#c42b2b;--tone-danger-mark:#ef4444;--tone-danger-solid-hover:#a32323;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #ef4444 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #ef4444 24%, transparent);--tone-danger-on-soft:#b32727;--tone-danger-border:color-mix(in oklab, #ef4444 40%, transparent);--tone-danger-text:#b32727;--accent-glow:#a3e635;--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, color-mix(in oklab, #111a14 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #111a14 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(17, 26, 20, 0.06);--shadow-md:0 1px 2px rgba(17, 26, 20, 0.06), 0 8px 22px -12px rgba(17, 26, 20, 0.18);--shadow-lg:0 24px 60px rgba(17, 26, 20, 0.2);--scrim:color-mix(in oklab, #111a14 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-display);--modal-title-font-size:var(--font-size-lg);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:0.02em;--modal-title-text-transform:none;--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)}
2
+ /*
3
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
4
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
5
+ * "success" chip and a success toast carry the same three colours.
6
+ *
7
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
8
+ * the same components. Once the classic themes are retired they move into the lib.
9
+ */
10
+
11
+ [data-theme='quiz-lab-whiteboard'] .badge-variant--default {
12
+ --recipe-soft: var(--tone-neutral-soft);
13
+ --recipe-soft-hover: var(--tone-neutral-soft-hover);
14
+ --recipe-on-soft: var(--tone-neutral-on-soft);
15
+ --recipe-border: var(--tone-neutral-border);
16
+ }
17
+
18
+ [data-theme='quiz-lab-whiteboard'] :is(.badge-variant--info, .chip--info) {
19
+ --recipe-soft: var(--tone-accent-soft);
20
+ --recipe-soft-hover: var(--tone-accent-soft-hover);
21
+ --recipe-on-soft: var(--tone-accent-on-soft);
22
+ --recipe-border: var(--tone-accent-border);
23
+ }
24
+
25
+ [data-theme='quiz-lab-whiteboard'] :is(.badge-variant--success, .chip--success) {
26
+ --recipe-soft: var(--tone-success-soft);
27
+ --recipe-soft-hover: var(--tone-success-soft-hover);
28
+ --recipe-on-soft: var(--tone-success-on-soft);
29
+ --recipe-border: var(--tone-success-border);
30
+ }
31
+
32
+ [data-theme='quiz-lab-whiteboard'] :is(.badge-variant--warning, .chip--warning) {
33
+ --recipe-soft: var(--tone-warning-soft);
34
+ --recipe-soft-hover: var(--tone-warning-soft-hover);
35
+ --recipe-on-soft: var(--tone-warning-on-soft);
36
+ --recipe-border: var(--tone-warning-border);
37
+ }
38
+
39
+ [data-theme='quiz-lab-whiteboard'] :is(.badge-variant--danger, .chip--danger) {
40
+ --recipe-soft: var(--tone-danger-soft);
41
+ --recipe-soft-hover: var(--tone-danger-soft-hover);
42
+ --recipe-on-soft: var(--tone-danger-on-soft);
43
+ --recipe-border: var(--tone-danger-border);
44
+ }
45
+
46
+ [data-theme='quiz-lab-whiteboard']
47
+ .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
48
+ border-color: var(--recipe-border);
49
+ background-color: var(--recipe-soft);
50
+ color: var(--recipe-on-soft);
51
+ }
52
+
53
+ [data-theme='quiz-lab-whiteboard'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
54
+ border-color: var(--border-default);
55
+ background: transparent;
56
+ color: var(--text-default);
57
+ }
58
+
59
+ [data-theme='quiz-lab-whiteboard'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
60
+ border-color: var(--recipe-border);
61
+ background: var(--surface-hover);
62
+ color: var(--text-strong);
63
+ }
64
+
65
+ [data-theme='quiz-lab-whiteboard'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
66
+ border-color: var(--recipe-border);
67
+ background: var(--recipe-soft);
68
+ color: var(--recipe-on-soft);
69
+ }
70
+
71
+ [data-theme='quiz-lab-whiteboard'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
72
+ border-color: var(--recipe-border);
73
+ background: var(--recipe-soft-hover);
74
+ color: var(--recipe-on-soft);
75
+ }
76
+
77
+ /* A default chip carries no tone, so its selected state is the theme's selection style. */
78
+ [data-theme='quiz-lab-whiteboard'] .chip.chip--default {
79
+ --recipe-soft: var(--selected-bg);
80
+ --recipe-soft-hover: var(--selected-bg-hover);
81
+ --recipe-on-soft: var(--selected-fg);
82
+ --recipe-border: var(--selected-border);
83
+ }
package/dist/themes/realestate-blueprint.css ADDED
@@ -0,0 +1,83 @@
1
+ [data-theme='realestate-blueprint']{color-scheme:light;--font-body:'Josefin Sans', 'Helvetica Neue', sans-serif;--font-display:'Libre Baskerville', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:400;--display-size:var(--font-size-md);--display-transform:none;--display-tracking:0.01em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(93, 122, 138, 0.12) 0%, transparent 65%), radial-gradient(50% 45% at 0% 100%, rgba(184, 134, 11, 0.06) 0%, transparent 65%), radial-gradient(130% 110% at 15% 0%, #eee8e0 0%, #f4efe9 55%, #f0ebe4 100%);--surface-canvas:#f2ede8;--surface-card:rgba(255, 252, 248, 0.8);--surface-raised:rgba(255, 252, 248, 0.9);--surface-raised-alt:rgba(246, 242, 236, 0.7);--surface-overlay:rgba(255, 252, 248, 0.97);--button-fill:rgba(255, 252, 248, 0.8);--surface-overlay-card:rgba(255, 252, 248, 0.94);--surface-sunken:rgba(93, 122, 138, 0.14);--control-hover:rgba(93, 122, 138, 0.1);--surface-hover:color-mix(in oklab, #5d7a8a 8%, transparent);--surface-stripe:rgba(232, 226, 218, 0.4);--rating-empty:color-mix(in oklab, rgba(93, 122, 138, 0.14) 85%, #1a2a34);--surface-selected:color-mix(in oklab, #5d7a8a 18%, transparent);--surface-blur:blur(12px) saturate(1.3);--text-strong:#1a2a34;--text-default:#33434f;--text-soft:#4e6878;--text-muted:#5c6d79;--text-subtle:#7f909b;--text-link:#405a6b;--text-link-hover:#2c4252;--border-subtle:rgba(93, 122, 138, 0.18);--border-default:rgba(93, 122, 138, 0.28);--border-strong:rgba(93, 122, 138, 0.28);--border-card:rgba(93, 122, 138, 0.18);--border-card-hover:rgba(93, 122, 138, 0.4);--field-bg:rgba(255, 252, 248, 0.9);--field-bg-focus:rgba(255, 252, 248, 0.98);--field-bg-disabled:color-mix(in oklab, rgba(255, 252, 248, 0.9) 94%, #1a2a34);--field-fg:#33434f;--field-border:rgba(93, 122, 138, 0.3);--field-border-hover:#4a6478;--field-border-focus:#5d7a8a;--field-placeholder:#7f909b;--field-label:#5c6d79;--field-ring:color-mix(in oklab, #5d7a8a 24%, transparent);--tone-neutral-solid:#1a2a34;--tone-neutral-solid-hover:color-mix(in oklab, #1a2a34 70%, #33434f);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:rgba(93, 122, 138, 0.1);--tone-neutral-soft-hover:color-mix(in oklab, rgba(93, 122, 138, 0.1) 92%, #1a2a34);--tone-neutral-on-soft:#1a2a34;--tone-neutral-border:rgba(93, 122, 138, 0.28);--tone-neutral-text:#4e6878;--tone-accent-solid:#4a6478;--tone-accent-mark:#5d7a8a;--tone-accent-solid-hover:#3a5262;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #5d7a8a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #5d7a8a 24%, transparent);--tone-accent-on-soft:#405a6b;--tone-accent-border:color-mix(in oklab, #5d7a8a 40%, transparent);--tone-accent-text:#405a6b;--tone-success-solid:#386850;--tone-success-mark:#4a8a6a;--tone-success-solid-hover:#2c5440;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #4a8a6a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #4a8a6a 24%, transparent);--tone-success-on-soft:#33604a;--tone-success-border:color-mix(in oklab, #4a8a6a 40%, transparent);--tone-success-text:#33604a;--tone-warning-solid:#9c5228;--tone-warning-mark:#c8874a;--tone-warning-solid-hover:#80431f;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #c8874a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #c8874a 24%, transparent);--tone-warning-on-soft:#8e4a22;--tone-warning-border:color-mix(in oklab, #c8874a 40%, transparent);--tone-warning-text:#8e4a22;--tone-danger-solid:#a82820;--tone-danger-mark:#c0392b;--tone-danger-solid-hover:#8a201a;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #c0392b 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #c0392b 24%, transparent);--tone-danger-on-soft:#9e261e;--tone-danger-border:color-mix(in oklab, #c0392b 40%, transparent);--tone-danger-text:#9e261e;--accent-glow:#90b0c0;--selected-bg:var(--tone-accent-soft);--selected-bg-hover:var(--tone-accent-soft-hover);--selected-fg:var(--tone-accent-on-soft);--selected-border:var(--tone-accent-border);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, rgba(30, 42, 50, 0.12) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(30, 42, 50, 0.12) 62%, transparent);--shadow-sm:0 4px 18px rgba(30, 42, 50, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);--shadow-md:0 4px 18px rgba(30, 42, 50, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);--shadow-lg:0 10px 40px rgba(30, 42, 50, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);--scrim:rgba(30, 42, 50, 0.6);--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-display);--modal-title-font-size:var(--font-size-lg);--modal-title-font-style:italic;--modal-title-font-weight:400;--modal-title-letter-spacing:0.01em;--modal-title-text-transform:none;--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)}
2
+ /*
3
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
4
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
5
+ * "success" chip and a success toast carry the same three colours.
6
+ *
7
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
8
+ * the same components. Once the classic themes are retired they move into the lib.
9
+ */
10
+
11
+ [data-theme='realestate-blueprint'] .badge-variant--default {
12
+ --recipe-soft: var(--tone-neutral-soft);
13
+ --recipe-soft-hover: var(--tone-neutral-soft-hover);
14
+ --recipe-on-soft: var(--tone-neutral-on-soft);
15
+ --recipe-border: var(--tone-neutral-border);
16
+ }
17
+
18
+ [data-theme='realestate-blueprint'] :is(.badge-variant--info, .chip--info) {
19
+ --recipe-soft: var(--tone-accent-soft);
20
+ --recipe-soft-hover: var(--tone-accent-soft-hover);
21
+ --recipe-on-soft: var(--tone-accent-on-soft);
22
+ --recipe-border: var(--tone-accent-border);
23
+ }
24
+
25
+ [data-theme='realestate-blueprint'] :is(.badge-variant--success, .chip--success) {
26
+ --recipe-soft: var(--tone-success-soft);
27
+ --recipe-soft-hover: var(--tone-success-soft-hover);
28
+ --recipe-on-soft: var(--tone-success-on-soft);
29
+ --recipe-border: var(--tone-success-border);
30
+ }
31
+
32
+ [data-theme='realestate-blueprint'] :is(.badge-variant--warning, .chip--warning) {
33
+ --recipe-soft: var(--tone-warning-soft);
34
+ --recipe-soft-hover: var(--tone-warning-soft-hover);
35
+ --recipe-on-soft: var(--tone-warning-on-soft);
36
+ --recipe-border: var(--tone-warning-border);
37
+ }
38
+
39
+ [data-theme='realestate-blueprint'] :is(.badge-variant--danger, .chip--danger) {
40
+ --recipe-soft: var(--tone-danger-soft);
41
+ --recipe-soft-hover: var(--tone-danger-soft-hover);
42
+ --recipe-on-soft: var(--tone-danger-on-soft);
43
+ --recipe-border: var(--tone-danger-border);
44
+ }
45
+
46
+ [data-theme='realestate-blueprint']
47
+ .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
48
+ border-color: var(--recipe-border);
49
+ background-color: var(--recipe-soft);
50
+ color: var(--recipe-on-soft);
51
+ }
52
+
53
+ [data-theme='realestate-blueprint'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
54
+ border-color: var(--border-default);
55
+ background: transparent;
56
+ color: var(--text-default);
57
+ }
58
+
59
+ [data-theme='realestate-blueprint'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
60
+ border-color: var(--recipe-border);
61
+ background: var(--surface-hover);
62
+ color: var(--text-strong);
63
+ }
64
+
65
+ [data-theme='realestate-blueprint'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
66
+ border-color: var(--recipe-border);
67
+ background: var(--recipe-soft);
68
+ color: var(--recipe-on-soft);
69
+ }
70
+
71
+ [data-theme='realestate-blueprint'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
72
+ border-color: var(--recipe-border);
73
+ background: var(--recipe-soft-hover);
74
+ color: var(--recipe-on-soft);
75
+ }
76
+
77
+ /* A default chip carries no tone, so its selected state is the theme's selection style. */
78
+ [data-theme='realestate-blueprint'] .chip.chip--default {
79
+ --recipe-soft: var(--selected-bg);
80
+ --recipe-soft-hover: var(--selected-bg-hover);
81
+ --recipe-on-soft: var(--selected-fg);
82
+ --recipe-border: var(--selected-border);
83
+ }
package/dist/themes/realestate-night-plan.css ADDED
@@ -0,0 +1,83 @@
1
+ [data-theme='realestate-night-plan']{color-scheme:dark;--font-body:'Josefin Sans', 'Helvetica Neue', sans-serif;--font-display:'Libre Baskerville', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:400;--display-size:var(--font-size-md);--display-transform:none;--display-tracking:0.01em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:repeating-linear-gradient(0deg, rgba(190, 215, 235, 0.05) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(190, 215, 235, 0.05) 0 1px, transparent 1px 32px), radial-gradient(55% 50% at 100% 0%, rgba(224, 168, 122, 0.07) 0%, transparent 65%);--surface-canvas:#0f2236;--surface-card:#14293f;--surface-raised:#112539;--surface-raised-alt:#183048;--surface-overlay:#1a3149;--button-fill:#1c344d;--surface-overlay-card:#152a40;--surface-sunken:#1f3a55;--control-hover:#1e3852;--surface-hover:color-mix(in oklab, #e0a87a 8%, transparent);--surface-stripe:#162c43;--rating-empty:color-mix(in oklab, #1f3a55 85%, #f4f8fb);--surface-selected:color-mix(in oklab, #e0a87a 18%, transparent);--surface-blur:none;--text-strong:#f4f8fb;--text-default:#dbe6ee;--text-soft:#b8cad8;--text-muted:#93a8ba;--text-subtle:#6e869a;--text-link:#ecbb94;--text-link-hover:#f6d6bb;--border-subtle:rgba(219, 230, 238, 0.1);--border-default:rgba(219, 230, 238, 0.16);--border-strong:rgba(219, 230, 238, 0.16);--border-card:rgba(219, 230, 238, 0.1);--border-card-hover:rgba(224, 168, 122, 0.5);--field-bg:#112539;--field-bg-focus:#112539;--field-bg-disabled:color-mix(in oklab, #112539 94%, #f4f8fb);--field-fg:#dbe6ee;--field-border:rgba(219, 230, 238, 0.2);--field-border-hover:#e0a87a;--field-border-focus:#e0a87a;--field-placeholder:#6e869a;--field-label:#93a8ba;--field-ring:color-mix(in oklab, #e0a87a 24%, transparent);--tone-neutral-solid:#f4f8fb;--tone-neutral-solid-hover:color-mix(in oklab, #f4f8fb 70%, #dbe6ee);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#1e3852;--tone-neutral-soft-hover:color-mix(in oklab, #1e3852 92%, #f4f8fb);--tone-neutral-on-soft:#f4f8fb;--tone-neutral-border:rgba(219, 230, 238, 0.16);--tone-neutral-text:#b8cad8;--tone-accent-solid:#a3572f;--tone-accent-mark:#e0a87a;--tone-accent-solid-hover:#b56437;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #e0a87a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #e0a87a 24%, transparent);--tone-accent-on-soft:#ecbb94;--tone-accent-border:color-mix(in oklab, #e0a87a 40%, transparent);--tone-accent-text:#ecbb94;--tone-success-solid:#2f7a55;--tone-success-mark:#6cc79a;--tone-success-solid-hover:#378b61;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #6cc79a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #6cc79a 24%, transparent);--tone-success-on-soft:#86d3ab;--tone-success-border:color-mix(in oklab, #6cc79a 40%, transparent);--tone-success-text:#86d3ab;--tone-warning-solid:#8a6612;--tone-warning-mark:#e3b85a;--tone-warning-solid-hover:#9e761a;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #e3b85a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e3b85a 24%, transparent);--tone-warning-on-soft:#ecc773;--tone-warning-border:color-mix(in oklab, #e3b85a 40%, transparent);--tone-warning-text:#ecc773;--tone-danger-solid:#b0362e;--tone-danger-mark:#f07f75;--tone-danger-solid-hover:#c3433a;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #f07f75 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f07f75 24%, transparent);--tone-danger-on-soft:#f4968d;--tone-danger-border:color-mix(in oklab, #f07f75 40%, transparent);--tone-danger-text:#f4968d;--accent-glow:#f2c9a6;--selected-bg:var(--tone-accent-soft);--selected-bg-hover:var(--tone-accent-soft-hover);--selected-fg:var(--tone-accent-on-soft);--selected-border:var(--tone-accent-border);--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(219, 230, 238, 0.05) inset, 0 2px 8px rgba(3, 10, 20, 0.45);--shadow-md:0 12px 30px -14px rgba(3, 10, 20, 0.75);--shadow-lg:0 28px 70px rgba(3, 10, 20, 0.65);--scrim:color-mix(in oklab, #f4f8fb 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-display);--modal-title-font-size:var(--font-size-lg);--modal-title-font-style:italic;--modal-title-font-weight:400;--modal-title-letter-spacing:0.01em;--modal-title-text-transform:none;--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)}
2
+ /*
3
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
4
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
5
+ * "success" chip and a success toast carry the same three colours.
6
+ *
7
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
8
+ * the same components. Once the classic themes are retired they move into the lib.
9
+ */
10
+
11
+ [data-theme='realestate-night-plan'] .badge-variant--default {
12
+ --recipe-soft: var(--tone-neutral-soft);
13
+ --recipe-soft-hover: var(--tone-neutral-soft-hover);
14
+ --recipe-on-soft: var(--tone-neutral-on-soft);
15
+ --recipe-border: var(--tone-neutral-border);
16
+ }
17
+
18
+ [data-theme='realestate-night-plan'] :is(.badge-variant--info, .chip--info) {
19
+ --recipe-soft: var(--tone-accent-soft);
20
+ --recipe-soft-hover: var(--tone-accent-soft-hover);
21
+ --recipe-on-soft: var(--tone-accent-on-soft);
22
+ --recipe-border: var(--tone-accent-border);
23
+ }
24
+
25
+ [data-theme='realestate-night-plan'] :is(.badge-variant--success, .chip--success) {
26
+ --recipe-soft: var(--tone-success-soft);
27
+ --recipe-soft-hover: var(--tone-success-soft-hover);
28
+ --recipe-on-soft: var(--tone-success-on-soft);
29
+ --recipe-border: var(--tone-success-border);
30
+ }
31
+
32
+ [data-theme='realestate-night-plan'] :is(.badge-variant--warning, .chip--warning) {
33
+ --recipe-soft: var(--tone-warning-soft);
34
+ --recipe-soft-hover: var(--tone-warning-soft-hover);
35
+ --recipe-on-soft: var(--tone-warning-on-soft);
36
+ --recipe-border: var(--tone-warning-border);
37
+ }
38
+
39
+ [data-theme='realestate-night-plan'] :is(.badge-variant--danger, .chip--danger) {
40
+ --recipe-soft: var(--tone-danger-soft);
41
+ --recipe-soft-hover: var(--tone-danger-soft-hover);
42
+ --recipe-on-soft: var(--tone-danger-on-soft);
43
+ --recipe-border: var(--tone-danger-border);
44
+ }
45
+
46
+ [data-theme='realestate-night-plan']
47
+ .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
48
+ border-color: var(--recipe-border);
49
+ background-color: var(--recipe-soft);
50
+ color: var(--recipe-on-soft);
51
+ }
52
+
53
+ [data-theme='realestate-night-plan'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
54
+ border-color: var(--border-default);
55
+ background: transparent;
56
+ color: var(--text-default);
57
+ }
58
+
59
+ [data-theme='realestate-night-plan'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
60
+ border-color: var(--recipe-border);
61
+ background: var(--surface-hover);
62
+ color: var(--text-strong);
63
+ }
64
+
65
+ [data-theme='realestate-night-plan'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
66
+ border-color: var(--recipe-border);
67
+ background: var(--recipe-soft);
68
+ color: var(--recipe-on-soft);
69
+ }
70
+
71
+ [data-theme='realestate-night-plan'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
72
+ border-color: var(--recipe-border);
73
+ background: var(--recipe-soft-hover);
74
+ color: var(--recipe-on-soft);
75
+ }
76
+
77
+ /* A default chip carries no tone, so its selected state is the theme's selection style. */
78
+ [data-theme='realestate-night-plan'] .chip.chip--default {
79
+ --recipe-soft: var(--selected-bg);
80
+ --recipe-soft-hover: var(--selected-bg-hover);
81
+ --recipe-on-soft: var(--selected-fg);
82
+ --recipe-border: var(--selected-border);
83
+ }
package/dist/themes/reels-marquee.css ADDED
@@ -0,0 +1,83 @@
1
+ [data-theme='reels-marquee']{color-scheme:dark;--font-body:'Manrope', 'Inter', sans-serif;--font-display:'Bebas Neue', 'Barlow Condensed', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:400;--display-size:var(--font-size-xl);--display-transform:uppercase;--display-tracking:0.04em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:repeating-linear-gradient(180deg, rgba(255, 240, 214, 0.06) 0 10px, transparent 10px 24px) right 7px top 0 / 9px 100% no-repeat, linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)) right 0 top 0 / 23px 100% no-repeat, radial-gradient(38% 70% at 50% -8%, rgba(255, 236, 200, 0.1) 0%, transparent 70%), radial-gradient(28% 80% at 0% 50%, rgba(150, 18, 36, 0.2) 0%, transparent 70%), radial-gradient(28% 80% at 100% 50%, rgba(150, 18, 36, 0.2) 0%, transparent 70%);--surface-canvas:#0b0809;--surface-card:#151012;--surface-raised:#100c0d;--surface-raised-alt:#1b1517;--surface-overlay:#1d1719;--button-fill:#201a1c;--surface-overlay-card:#171214;--surface-sunken:#261e20;--control-hover:#241c1e;--surface-hover:color-mix(in oklab, #f2c14e 8%, transparent);--surface-stripe:#171214;--rating-empty:color-mix(in oklab, #261e20 85%, #fff6e6);--surface-selected:color-mix(in oklab, #f2c14e 18%, transparent);--surface-blur:none;--text-strong:#fff6e6;--text-default:#e9e0d4;--text-soft:#c9bfb2;--text-muted:#a2988b;--text-subtle:#776e64;--text-link:#f1c45c;--text-link-hover:#ffd98a;--border-subtle:rgba(233, 224, 212, 0.08);--border-default:rgba(233, 224, 212, 0.13);--border-strong:rgba(233, 224, 212, 0.2);--border-card:rgba(233, 224, 212, 0.07);--border-card-hover:rgba(242, 193, 78, 0.45);--field-bg:#100c0d;--field-bg-focus:#100c0d;--field-bg-disabled:color-mix(in oklab, #100c0d 94%, #fff6e6);--field-fg:#e9e0d4;--field-border:rgba(233, 224, 212, 0.16);--field-border-hover:#f2c14e;--field-border-focus:#f2c14e;--field-placeholder:#776e64;--field-label:#a2988b;--field-ring:color-mix(in oklab, #f2c14e 24%, transparent);--tone-neutral-solid:#fff6e6;--tone-neutral-solid-hover:color-mix(in oklab, #fff6e6 70%, #e9e0d4);--tone-neutral-on-solid:#140d05;--tone-neutral-soft:#241c1e;--tone-neutral-soft-hover:color-mix(in oklab, #241c1e 92%, #fff6e6);--tone-neutral-on-soft:#fff6e6;--tone-neutral-border:rgba(233, 224, 212, 0.13);--tone-neutral-text:#c9bfb2;--tone-accent-solid:#e8b64c;--tone-accent-mark:#f2c14e;--tone-accent-solid-hover:#f2c766;--tone-accent-on-solid:#140d05;--tone-accent-soft:color-mix(in oklab, #f2c14e 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #f2c14e 24%, transparent);--tone-accent-on-soft:#f1c45c;--tone-accent-border:color-mix(in oklab, #f2c14e 40%, transparent);--tone-accent-text:#f1c45c;--tone-success-solid:#5fcf9d;--tone-success-mark:#5fcf9d;--tone-success-solid-hover:#7ad9ae;--tone-success-on-solid:#140d05;--tone-success-soft:color-mix(in oklab, #5fcf9d 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #5fcf9d 24%, transparent);--tone-success-on-soft:#7ad9ae;--tone-success-border:color-mix(in oklab, #5fcf9d 40%, transparent);--tone-success-text:#7ad9ae;--tone-warning-solid:#f59a52;--tone-warning-mark:#f59a52;--tone-warning-solid-hover:#f8ae70;--tone-warning-on-solid:#140d05;--tone-warning-soft:color-mix(in oklab, #f59a52 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #f59a52 24%, transparent);--tone-warning-on-soft:#f8ae70;--tone-warning-border:color-mix(in oklab, #f59a52 40%, transparent);--tone-warning-text:#f8ae70;--tone-danger-solid:#f0707c;--tone-danger-mark:#e0414f;--tone-danger-solid-hover:#f48a94;--tone-danger-on-solid:#140d05;--tone-danger-soft:color-mix(in oklab, #e0414f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #e0414f 24%, transparent);--tone-danger-on-soft:#f48a94;--tone-danger-border:color-mix(in oklab, #e0414f 40%, transparent);--tone-danger-text:#f48a94;--accent-glow:#ffe08f;--selected-bg:var(--tone-accent-soft);--selected-bg-hover:var(--tone-accent-soft-hover);--selected-fg:var(--tone-accent-on-soft);--selected-border:var(--tone-accent-border);--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(255, 246, 230, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.5);--shadow-md:0 14px 34px -16px rgba(0, 0, 0, 0.85);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.75);--scrim:color-mix(in oklab, #fff6e6 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-display);--modal-title-font-size:var(--font-size-xl);--modal-title-font-style:normal;--modal-title-font-weight:400;--modal-title-letter-spacing:0.04em;--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)}
2
+ /*
3
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
4
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
5
+ * "success" chip and a success toast carry the same three colours.
6
+ *
7
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
8
+ * the same components. Once the classic themes are retired they move into the lib.
9
+ */
10
+
11
+ [data-theme='reels-marquee'] .badge-variant--default {
12
+ --recipe-soft: var(--tone-neutral-soft);
13
+ --recipe-soft-hover: var(--tone-neutral-soft-hover);
14
+ --recipe-on-soft: var(--tone-neutral-on-soft);
15
+ --recipe-border: var(--tone-neutral-border);
16
+ }
17
+
18
+ [data-theme='reels-marquee'] :is(.badge-variant--info, .chip--info) {
19
+ --recipe-soft: var(--tone-accent-soft);
20
+ --recipe-soft-hover: var(--tone-accent-soft-hover);
21
+ --recipe-on-soft: var(--tone-accent-on-soft);
22
+ --recipe-border: var(--tone-accent-border);
23
+ }
24
+
25
+ [data-theme='reels-marquee'] :is(.badge-variant--success, .chip--success) {
26
+ --recipe-soft: var(--tone-success-soft);
27
+ --recipe-soft-hover: var(--tone-success-soft-hover);
28
+ --recipe-on-soft: var(--tone-success-on-soft);
29
+ --recipe-border: var(--tone-success-border);
30
+ }
31
+
32
+ [data-theme='reels-marquee'] :is(.badge-variant--warning, .chip--warning) {
33
+ --recipe-soft: var(--tone-warning-soft);
34
+ --recipe-soft-hover: var(--tone-warning-soft-hover);
35
+ --recipe-on-soft: var(--tone-warning-on-soft);
36
+ --recipe-border: var(--tone-warning-border);
37
+ }
38
+
39
+ [data-theme='reels-marquee'] :is(.badge-variant--danger, .chip--danger) {
40
+ --recipe-soft: var(--tone-danger-soft);
41
+ --recipe-soft-hover: var(--tone-danger-soft-hover);
42
+ --recipe-on-soft: var(--tone-danger-on-soft);
43
+ --recipe-border: var(--tone-danger-border);
44
+ }
45
+
46
+ [data-theme='reels-marquee']
47
+ .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
48
+ border-color: var(--recipe-border);
49
+ background-color: var(--recipe-soft);
50
+ color: var(--recipe-on-soft);
51
+ }
52
+
53
+ [data-theme='reels-marquee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
54
+ border-color: var(--border-default);
55
+ background: transparent;
56
+ color: var(--text-default);
57
+ }
58
+
59
+ [data-theme='reels-marquee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
60
+ border-color: var(--recipe-border);
61
+ background: var(--surface-hover);
62
+ color: var(--text-strong);
63
+ }
64
+
65
+ [data-theme='reels-marquee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
66
+ border-color: var(--recipe-border);
67
+ background: var(--recipe-soft);
68
+ color: var(--recipe-on-soft);
69
+ }
70
+
71
+ [data-theme='reels-marquee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
72
+ border-color: var(--recipe-border);
73
+ background: var(--recipe-soft-hover);
74
+ color: var(--recipe-on-soft);
75
+ }
76
+
77
+ /* A default chip carries no tone, so its selected state is the theme's selection style. */
78
+ [data-theme='reels-marquee'] .chip.chip--default {
79
+ --recipe-soft: var(--selected-bg);
80
+ --recipe-soft-hover: var(--selected-bg-hover);
81
+ --recipe-on-soft: var(--selected-fg);
82
+ --recipe-border: var(--selected-border);
83
+ }
package/dist/themes/reels-matinee.css ADDED
@@ -0,0 +1,83 @@
1
+ [data-theme='reels-matinee']{color-scheme:light;--font-body:'Manrope', 'Inter', sans-serif;--font-display:'Bebas Neue', 'Barlow Condensed', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:400;--display-size:var(--font-size-xl);--display-transform:uppercase;--display-tracking:0.04em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:repeating-linear-gradient(180deg, rgba(245, 238, 226, 0.9) 0 10px, transparent 10px 24px) right 7px top 0 / 9px 100% no-repeat, linear-gradient(rgba(36, 22, 18, 0.14), rgba(36, 22, 18, 0.14)) right 0 top 0 / 23px 100% no-repeat, radial-gradient(38% 70% at 50% -8%, rgba(255, 214, 140, 0.22) 0%, transparent 70%), radial-gradient(28% 80% at 0% 50%, rgba(159, 29, 44, 0.07) 0%, transparent 70%), radial-gradient(28% 80% at 100% 50%, rgba(159, 29, 44, 0.07) 0%, transparent 70%);--surface-canvas:#f5eee2;--surface-card:#fffcf6;--surface-raised:#ffffff;--surface-raised-alt:#f7f1e6;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#fffcf6;--surface-sunken:#e7dccb;--control-hover:#efe6d7;--surface-hover:color-mix(in oklab, #c8283a 8%, transparent);--surface-stripe:#fbf7ef;--rating-empty:color-mix(in oklab, #e7dccb 85%, #1a1012);--surface-selected:color-mix(in oklab, #c8283a 18%, transparent);--surface-blur:none;--text-strong:#1a1012;--text-default:#2a2023;--text-soft:#433739;--text-muted:#625557;--text-subtle:#8d8082;--text-link:#931b29;--text-link-hover:#6e1420;--border-subtle:rgba(26, 16, 18, 0.08);--border-default:rgba(26, 16, 18, 0.14);--border-strong:rgba(26, 16, 18, 0.14);--border-card:rgba(26, 16, 18, 0.09);--border-card-hover:rgba(159, 29, 44, 0.4);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #1a1012);--field-fg:#2a2023;--field-border:rgba(26, 16, 18, 0.2);--field-border-hover:#9f1d2c;--field-border-focus:#c8283a;--field-placeholder:#8d8082;--field-label:#625557;--field-ring:color-mix(in oklab, #c8283a 24%, transparent);--tone-neutral-solid:#1a1012;--tone-neutral-solid-hover:color-mix(in oklab, #1a1012 70%, #2a2023);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#efe6d7;--tone-neutral-soft-hover:color-mix(in oklab, #efe6d7 92%, #1a1012);--tone-neutral-on-soft:#1a1012;--tone-neutral-border:rgba(26, 16, 18, 0.14);--tone-neutral-text:#433739;--tone-accent-solid:#9f1d2c;--tone-accent-mark:#c8283a;--tone-accent-solid-hover:#851725;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #c8283a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #c8283a 24%, transparent);--tone-accent-on-soft:#931b29;--tone-accent-border:color-mix(in oklab, #c8283a 40%, transparent);--tone-accent-text:#931b29;--tone-success-solid:#14705f;--tone-success-mark:#1fa088;--tone-success-solid-hover:#0f5a4c;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #1fa088 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #1fa088 24%, transparent);--tone-success-on-soft:#12665a;--tone-success-border:color-mix(in oklab, #1fa088 40%, transparent);--tone-success-text:#12665a;--tone-warning-solid:#93650f;--tone-warning-mark:#e0a82e;--tone-warning-solid-hover:#7a540c;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #e0a82e 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e0a82e 24%, transparent);--tone-warning-on-soft:#7e570c;--tone-warning-border:color-mix(in oklab, #e0a82e 40%, transparent);--tone-warning-text:#7e570c;--tone-danger-solid:#b83a12;--tone-danger-mark:#e0531f;--tone-danger-solid-hover:#982f0e;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #e0531f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #e0531f 24%, transparent);--tone-danger-on-soft:#a8350f;--tone-danger-border:color-mix(in oklab, #e0531f 40%, transparent);--tone-danger-text:#a8350f;--accent-glow:#e8b64c;--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, color-mix(in oklab, #1a1012 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #1a1012 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(26, 16, 18, 0.06);--shadow-md:0 1px 2px rgba(26, 16, 18, 0.06), 0 10px 26px -14px rgba(26, 16, 18, 0.24);--shadow-lg:0 24px 60px rgba(26, 16, 18, 0.22);--scrim:color-mix(in oklab, #1a1012 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-display);--modal-title-font-size:var(--font-size-xl);--modal-title-font-style:normal;--modal-title-font-weight:400;--modal-title-letter-spacing:0.04em;--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)}
2
+ /*
3
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
4
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
5
+ * "success" chip and a success toast carry the same three colours.
6
+ *
7
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
8
+ * the same components. Once the classic themes are retired they move into the lib.
9
+ */
10
+
11
+ [data-theme='reels-matinee'] .badge-variant--default {
12
+ --recipe-soft: var(--tone-neutral-soft);
13
+ --recipe-soft-hover: var(--tone-neutral-soft-hover);
14
+ --recipe-on-soft: var(--tone-neutral-on-soft);
15
+ --recipe-border: var(--tone-neutral-border);
16
+ }
17
+
18
+ [data-theme='reels-matinee'] :is(.badge-variant--info, .chip--info) {
19
+ --recipe-soft: var(--tone-accent-soft);
20
+ --recipe-soft-hover: var(--tone-accent-soft-hover);
21
+ --recipe-on-soft: var(--tone-accent-on-soft);
22
+ --recipe-border: var(--tone-accent-border);
23
+ }
24
+
25
+ [data-theme='reels-matinee'] :is(.badge-variant--success, .chip--success) {
26
+ --recipe-soft: var(--tone-success-soft);
27
+ --recipe-soft-hover: var(--tone-success-soft-hover);
28
+ --recipe-on-soft: var(--tone-success-on-soft);
29
+ --recipe-border: var(--tone-success-border);
30
+ }
31
+
32
+ [data-theme='reels-matinee'] :is(.badge-variant--warning, .chip--warning) {
33
+ --recipe-soft: var(--tone-warning-soft);
34
+ --recipe-soft-hover: var(--tone-warning-soft-hover);
35
+ --recipe-on-soft: var(--tone-warning-on-soft);
36
+ --recipe-border: var(--tone-warning-border);
37
+ }
38
+
39
+ [data-theme='reels-matinee'] :is(.badge-variant--danger, .chip--danger) {
40
+ --recipe-soft: var(--tone-danger-soft);
41
+ --recipe-soft-hover: var(--tone-danger-soft-hover);
42
+ --recipe-on-soft: var(--tone-danger-on-soft);
43
+ --recipe-border: var(--tone-danger-border);
44
+ }
45
+
46
+ [data-theme='reels-matinee']
47
+ .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
48
+ border-color: var(--recipe-border);
49
+ background-color: var(--recipe-soft);
50
+ color: var(--recipe-on-soft);
51
+ }
52
+
53
+ [data-theme='reels-matinee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
54
+ border-color: var(--border-default);
55
+ background: transparent;
56
+ color: var(--text-default);
57
+ }
58
+
59
+ [data-theme='reels-matinee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
60
+ border-color: var(--recipe-border);
61
+ background: var(--surface-hover);
62
+ color: var(--text-strong);
63
+ }
64
+
65
+ [data-theme='reels-matinee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
66
+ border-color: var(--recipe-border);
67
+ background: var(--recipe-soft);
68
+ color: var(--recipe-on-soft);
69
+ }
70
+
71
+ [data-theme='reels-matinee'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
72
+ border-color: var(--recipe-border);
73
+ background: var(--recipe-soft-hover);
74
+ color: var(--recipe-on-soft);
75
+ }
76
+
77
+ /* A default chip carries no tone, so its selected state is the theme's selection style. */
78
+ [data-theme='reels-matinee'] .chip.chip--default {
79
+ --recipe-soft: var(--selected-bg);
80
+ --recipe-soft-hover: var(--selected-bg-hover);
81
+ --recipe-on-soft: var(--selected-fg);
82
+ --recipe-border: var(--selected-border);
83
+ }