@memobit/themes 2.0.0 → 2.2.0

package/dist/themes/tasks-deep-work.css

@@ -0,0 +1,83 @@
+[data-theme='tasks-deep-work']{color-scheme:dark;--font-body:'Onest', system-ui, sans-serif;--font-display:'Onest', system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-md);--display-transform:none;--display-tracking:-0.01em;--label-weight:600;--label-transform:none;--label-tracking:0.01em;--header-weight:600;--canvas-layers:repeating-linear-gradient(0deg, rgba(228, 231, 236, 0.035) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(228, 231, 236, 0.035) 0 1px, transparent 1px 24px);--surface-canvas:#101317;--surface-card:#171b21;--surface-raised:#13161b;--surface-raised-alt:#1c2128;--surface-overlay:#1e232a;--button-fill:#1f242c;--surface-overlay-card:#171b21;--surface-sunken:#232932;--control-hover:#232931;--surface-hover:color-mix(in oklab, #7aa2ff 8%, transparent);--surface-stripe:#191d23;--rating-empty:color-mix(in oklab, #232932 85%, #f2f4f7);--surface-selected:color-mix(in oklab, #7aa2ff 18%, transparent);--surface-blur:none;--text-strong:#f2f4f7;--text-default:#dce1e8;--text-soft:#bcc3cd;--text-muted:#98a1ad;--text-subtle:#747d89;--text-link:#8fb0ff;--text-link-hover:#b3caff;--border-subtle:rgba(220, 225, 232, 0.08);--border-default:rgba(220, 225, 232, 0.13);--border-strong:rgba(220, 225, 232, 0.13);--border-card:rgba(220, 225, 232, 0.07);--border-card-hover:rgba(122, 162, 255, 0.45);--field-bg:#13161b;--field-bg-focus:#13161b;--field-bg-disabled:color-mix(in oklab, #13161b 94%, #f2f4f7);--field-fg:#dce1e8;--field-border:rgba(220, 225, 232, 0.16);--field-border-hover:#7aa2ff;--field-border-focus:#7aa2ff;--field-placeholder:#747d89;--field-label:#98a1ad;--field-ring:color-mix(in oklab, #7aa2ff 24%, transparent);--tone-neutral-solid:#f2f4f7;--tone-neutral-solid-hover:color-mix(in oklab, #f2f4f7 70%, #dce1e8);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#232931;--tone-neutral-soft-hover:color-mix(in oklab, #232931 92%, #f2f4f7);--tone-neutral-on-soft:#f2f4f7;--tone-neutral-border:rgba(220, 225, 232, 0.13);--tone-neutral-text:#bcc3cd;--tone-accent-solid:#3d63d6;--tone-accent-mark:#7aa2ff;--tone-accent-solid-hover:#4a72e6;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #7aa2ff 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #7aa2ff 24%, transparent);--tone-accent-on-soft:#8fb0ff;--tone-accent-border:color-mix(in oklab, #7aa2ff 40%, transparent);--tone-accent-text:#8fb0ff;--tone-success-solid:#2c7d4d;--tone-success-mark:#5ccb8b;--tone-success-solid-hover:#35925b;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #5ccb8b 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #5ccb8b 24%, transparent);--tone-success-on-soft:#72d39b;--tone-success-border:color-mix(in oklab, #5ccb8b 40%, transparent);--tone-success-text:#72d39b;--tone-warning-solid:#995b10;--tone-warning-mark:#f0b45a;--tone-warning-solid-hover:#ad6a16;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #f0b45a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #f0b45a 24%, transparent);--tone-warning-on-soft:#f2c071;--tone-warning-border:color-mix(in oklab, #f0b45a 40%, transparent);--tone-warning-text:#f2c071;--tone-danger-solid:#b6383a;--tone-danger-mark:#f27477;--tone-danger-solid-hover:#c94446;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #f27477 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f27477 24%, transparent);--tone-danger-on-soft:#f58a8c;--tone-danger-border:color-mix(in oklab, #f27477 40%, transparent);--tone-danger-text:#f58a8c;--accent-glow:#9d7bff;--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(220, 225, 232, 0.03) inset, 0 2px 6px rgba(0, 0, 0, 0.35);--shadow-md:0 10px 28px -14px rgba(0, 0, 0, 0.7);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f2f4f7 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-lg);--modal-title-font-style:normal;--modal-title-font-weight:600;--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)}
+/*
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
+ * "success" chip and a success toast carry the same three colours.
+ *
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
+ * the same components. Once the classic themes are retired they move into the lib.
+ */
+
+[data-theme='tasks-deep-work'] .badge-variant--default {
+    --recipe-soft: var(--tone-neutral-soft);
+    --recipe-soft-hover: var(--tone-neutral-soft-hover);
+    --recipe-on-soft: var(--tone-neutral-on-soft);
+    --recipe-border: var(--tone-neutral-border);
+}
+
+[data-theme='tasks-deep-work'] :is(.badge-variant--info, .chip--info) {
+    --recipe-soft: var(--tone-accent-soft);
+    --recipe-soft-hover: var(--tone-accent-soft-hover);
+    --recipe-on-soft: var(--tone-accent-on-soft);
+    --recipe-border: var(--tone-accent-border);
+}
+
+[data-theme='tasks-deep-work'] :is(.badge-variant--success, .chip--success) {
+    --recipe-soft: var(--tone-success-soft);
+    --recipe-soft-hover: var(--tone-success-soft-hover);
+    --recipe-on-soft: var(--tone-success-on-soft);
+    --recipe-border: var(--tone-success-border);
+}
+
+[data-theme='tasks-deep-work'] :is(.badge-variant--warning, .chip--warning) {
+    --recipe-soft: var(--tone-warning-soft);
+    --recipe-soft-hover: var(--tone-warning-soft-hover);
+    --recipe-on-soft: var(--tone-warning-on-soft);
+    --recipe-border: var(--tone-warning-border);
+}
+
+[data-theme='tasks-deep-work'] :is(.badge-variant--danger, .chip--danger) {
+    --recipe-soft: var(--tone-danger-soft);
+    --recipe-soft-hover: var(--tone-danger-soft-hover);
+    --recipe-on-soft: var(--tone-danger-on-soft);
+    --recipe-border: var(--tone-danger-border);
+}
+
+[data-theme='tasks-deep-work']
+    .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
+    border-color: var(--recipe-border);
+    background-color: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='tasks-deep-work'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
+    border-color: var(--border-default);
+    background: transparent;
+    color: var(--text-default);
+}
+
+[data-theme='tasks-deep-work'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--surface-hover);
+    color: var(--text-strong);
+}
+
+[data-theme='tasks-deep-work'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='tasks-deep-work'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft-hover);
+    color: var(--recipe-on-soft);
+}
+
+/* A default chip carries no tone, so its selected state is the theme's selection style. */
+[data-theme='tasks-deep-work'] .chip.chip--default {
+    --recipe-soft: var(--selected-bg);
+    --recipe-soft-hover: var(--selected-bg-hover);
+    --recipe-on-soft: var(--selected-fg);
+    --recipe-border: var(--selected-border);
+}

package/dist/themes/tasks-legal-pad.css

@@ -0,0 +1,83 @@
+[data-theme='tasks-legal-pad']{color-scheme:light;--font-body:'Libre Franklin', system-ui, sans-serif;--font-display:'Libre Franklin', system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:800;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:-0.01em;--label-weight:700;--label-transform:uppercase;--label-tracking:0.08em;--header-weight:700;--canvas-layers:linear-gradient(90deg, transparent 0 56px, rgba(200, 50, 59, 0.3) 56px 57px, transparent 57px), repeating-linear-gradient(180deg, transparent 0 31px, rgba(56, 102, 170, 0.13) 31px 32px);--surface-canvas:#f7f3dc;--surface-card:#fffef6;--surface-raised:#ffffff;--surface-raised-alt:#fbf8e6;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#fffef6;--surface-sunken:#ebe6cc;--control-hover:#f1edd6;--surface-hover:color-mix(in oklab, #2a54a6 8%, transparent);--surface-stripe:#fdfbef;--rating-empty:color-mix(in oklab, #ebe6cc 85%, #18213a);--surface-selected:color-mix(in oklab, #2a54a6 18%, transparent);--surface-blur:none;--text-strong:#18213a;--text-default:#26304a;--text-soft:#3d4762;--text-muted:#525c76;--text-subtle:#7c849a;--text-link:#24499a;--text-link-hover:#1a3876;--border-subtle:rgba(24, 33, 58, 0.1);--border-default:rgba(24, 33, 58, 0.16);--border-strong:rgba(24, 33, 58, 0.16);--border-card:rgba(24, 33, 58, 0.1);--border-card-hover:rgba(42, 84, 166, 0.4);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #18213a);--field-fg:#26304a;--field-border:rgba(24, 33, 58, 0.22);--field-border-hover:#2a54a6;--field-border-focus:#2a54a6;--field-placeholder:#7c849a;--field-label:#525c76;--field-ring:color-mix(in oklab, #2a54a6 24%, transparent);--tone-neutral-solid:#18213a;--tone-neutral-solid-hover:color-mix(in oklab, #18213a 70%, #26304a);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#f1edd6;--tone-neutral-soft-hover:color-mix(in oklab, #f1edd6 92%, #18213a);--tone-neutral-on-soft:#18213a;--tone-neutral-border:rgba(24, 33, 58, 0.16);--tone-neutral-text:#3d4762;--tone-accent-solid:#2a54a6;--tone-accent-mark:#2a54a6;--tone-accent-solid-hover:#20438a;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #2a54a6 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #2a54a6 24%, transparent);--tone-accent-on-soft:#24499a;--tone-accent-border:color-mix(in oklab, #2a54a6 40%, transparent);--tone-accent-text:#24499a;--tone-success-solid:#237a45;--tone-success-mark:#237a45;--tone-success-solid-hover:#1c6238;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #237a45 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #237a45 24%, transparent);--tone-success-on-soft:#1d653a;--tone-success-border:color-mix(in oklab, #237a45 40%, transparent);--tone-success-text:#1d653a;--tone-warning-solid:#a6580b;--tone-warning-mark:#a6580b;--tone-warning-solid-hover:#884709;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #a6580b 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #a6580b 24%, transparent);--tone-warning-on-soft:#8d4b09;--tone-warning-border:color-mix(in oklab, #a6580b 40%, transparent);--tone-warning-text:#8d4b09;--tone-danger-solid:#c0313a;--tone-danger-mark:#c0313a;--tone-danger-solid-hover:#9e2730;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #c0313a 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #c0313a 24%, transparent);--tone-danger-on-soft:#ad2a33;--tone-danger-border:color-mix(in oklab, #c0313a 40%, transparent);--tone-danger-text:#ad2a33;--accent-glow:#c8323b;--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, #18213a 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #18213a 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(24, 33, 58, 0.06);--shadow-md:0 1px 2px rgba(24, 33, 58, 0.06), 0 10px 24px -14px rgba(24, 33, 58, 0.2);--shadow-lg:0 24px 60px rgba(24, 33, 58, 0.24);--scrim:color-mix(in oklab, #18213a 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-xl);--modal-title-font-style:normal;--modal-title-font-weight:800;--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)}
+/*
+ * Component recipes for the authored themes. Badge and Chip take a tone and one shared set
+ * of roles (soft background, ink on soft, border), so a "success" badge, a selected
+ * "success" chip and a success toast carry the same three colours.
+ *
+ * These rules sit here rather than in @memobit/libs while the classic themes still drive
+ * the same components. Once the classic themes are retired they move into the lib.
+ */
+
+[data-theme='tasks-legal-pad'] .badge-variant--default {
+    --recipe-soft: var(--tone-neutral-soft);
+    --recipe-soft-hover: var(--tone-neutral-soft-hover);
+    --recipe-on-soft: var(--tone-neutral-on-soft);
+    --recipe-border: var(--tone-neutral-border);
+}
+
+[data-theme='tasks-legal-pad'] :is(.badge-variant--info, .chip--info) {
+    --recipe-soft: var(--tone-accent-soft);
+    --recipe-soft-hover: var(--tone-accent-soft-hover);
+    --recipe-on-soft: var(--tone-accent-on-soft);
+    --recipe-border: var(--tone-accent-border);
+}
+
+[data-theme='tasks-legal-pad'] :is(.badge-variant--success, .chip--success) {
+    --recipe-soft: var(--tone-success-soft);
+    --recipe-soft-hover: var(--tone-success-soft-hover);
+    --recipe-on-soft: var(--tone-success-on-soft);
+    --recipe-border: var(--tone-success-border);
+}
+
+[data-theme='tasks-legal-pad'] :is(.badge-variant--warning, .chip--warning) {
+    --recipe-soft: var(--tone-warning-soft);
+    --recipe-soft-hover: var(--tone-warning-soft-hover);
+    --recipe-on-soft: var(--tone-warning-on-soft);
+    --recipe-border: var(--tone-warning-border);
+}
+
+[data-theme='tasks-legal-pad'] :is(.badge-variant--danger, .chip--danger) {
+    --recipe-soft: var(--tone-danger-soft);
+    --recipe-soft-hover: var(--tone-danger-soft-hover);
+    --recipe-on-soft: var(--tone-danger-on-soft);
+    --recipe-border: var(--tone-danger-border);
+}
+
+[data-theme='tasks-legal-pad']
+    .badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
+    border-color: var(--recipe-border);
+    background-color: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='tasks-legal-pad'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
+    border-color: var(--border-default);
+    background: transparent;
+    color: var(--text-default);
+}
+
+[data-theme='tasks-legal-pad'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--surface-hover);
+    color: var(--text-strong);
+}
+
+[data-theme='tasks-legal-pad'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft);
+    color: var(--recipe-on-soft);
+}
+
+[data-theme='tasks-legal-pad'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
+    border-color: var(--recipe-border);
+    background: var(--recipe-soft-hover);
+    color: var(--recipe-on-soft);
+}
+
+/* A default chip carries no tone, so its selected state is the theme's selection style. */
+[data-theme='tasks-legal-pad'] .chip.chip--default {
+    --recipe-soft: var(--selected-bg);
+    --recipe-soft-hover: var(--selected-bg-hover);
+    --recipe-on-soft: var(--selected-fg);
+    --recipe-border: var(--selected-border);
+}