@memobit/themes 2.1.0 → 2.2.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.
- package/dist/authoredThemes.d.ts +45 -0
- package/dist/authoredThemes.js +277 -0
- package/dist/themeConfig.js +16 -95
- package/dist/themes/cookbook-slate.css +83 -0
- package/dist/themes/cookbook-terracotta.css +83 -0
- package/dist/themes/garage-night-drive.css +83 -0
- package/dist/themes/garage-redline.css +83 -0
- package/dist/themes/garage-workshop.css +83 -0
- package/dist/themes/hub-deep-water.css +83 -0
- package/dist/themes/hub-shallows.css +83 -0
- package/dist/themes/impulse-pause.css +83 -0
- package/dist/themes/impulse-still-water.css +83 -0
- package/dist/themes/nutritrack-fresh-market.css +83 -0
- package/dist/themes/nutritrack-verdant.css +83 -0
- package/dist/themes/pulse-ivory.css +83 -0
- package/dist/themes/pulse-night-chart.css +83 -0
- package/dist/themes/seeds-blossom.css +83 -0
- package/dist/themes/seeds-nightlight.css +83 -0
- package/dist/themes.css +1283 -23
- package/package.json +1 -1
package/dist/themes.css
CHANGED
|
@@ -167,6 +167,930 @@
|
|
|
167
167
|
--recipe-border: var(--selected-border);
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
+
[data-theme='cookbook-slate']{color-scheme:dark;--font-body:'Nunito Sans', 'Avenir', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:500;--display-size:var(--font-size-xl);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 0% 100%, rgba(229, 137, 95, 0.11) 0%, transparent 65%), radial-gradient(45% 40% at 100% 0%, rgba(150, 170, 190, 0.06) 0%, transparent 65%), linear-gradient(160deg, #181c20 0%, #111417 100%);--surface-canvas:#14171a;--surface-card:#1b1f23;--surface-raised:#16191d;--surface-raised-alt:#20252a;--surface-overlay:#23282d;--button-fill:#252a30;--surface-overlay-card:#1c2024;--surface-sunken:#2a2f35;--control-hover:#272c32;--surface-hover:color-mix(in oklab, #e5895f 8%, transparent);--surface-stripe:#1e2226;--rating-empty:color-mix(in oklab, #2a2f35 85%, #f6f3ef);--surface-selected:color-mix(in oklab, #e5895f 18%, transparent);--surface-blur:none;--text-strong:#f6f3ef;--text-default:#e2dfdb;--text-soft:#c4c3c1;--text-muted:#9da0a4;--text-subtle:#777b81;--text-link:#f0a07c;--text-link-hover:#ffc3a3;--border-subtle:rgba(226, 223, 219, 0.08);--border-default:rgba(226, 223, 219, 0.13);--border-strong:rgba(226, 223, 219, 0.13);--border-card:rgba(226, 223, 219, 0.07);--border-card-hover:rgba(229, 137, 95, 0.45);--field-bg:#16191d;--field-bg-focus:#16191d;--field-bg-disabled:color-mix(in oklab, #16191d 94%, #f6f3ef);--field-fg:#e2dfdb;--field-border:rgba(226, 223, 219, 0.16);--field-border-hover:#e5895f;--field-border-focus:#e5895f;--field-placeholder:#777b81;--field-label:#9da0a4;--field-ring:color-mix(in oklab, #e5895f 24%, transparent);--tone-neutral-solid:#f6f3ef;--tone-neutral-solid-hover:color-mix(in oklab, #f6f3ef 70%, #e2dfdb);--tone-neutral-on-solid:#fff8f4;--tone-neutral-soft:#272c32;--tone-neutral-soft-hover:color-mix(in oklab, #272c32 92%, #f6f3ef);--tone-neutral-on-soft:#f6f3ef;--tone-neutral-border:rgba(226, 223, 219, 0.13);--tone-neutral-text:#c4c3c1;--tone-accent-solid:#b0462a;--tone-accent-mark:#e5895f;--tone-accent-solid-hover:#c2522f;--tone-accent-on-solid:#fff8f4;--tone-accent-soft:color-mix(in oklab, #e5895f 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #e5895f 24%, transparent);--tone-accent-on-soft:#f0a07c;--tone-accent-border:color-mix(in oklab, #e5895f 40%, transparent);--tone-accent-text:#f0a07c;--tone-success-solid:#3f7a46;--tone-success-mark:#7cc488;--tone-success-solid-hover:#4a8c52;--tone-success-on-solid:#fff8f4;--tone-success-soft:color-mix(in oklab, #7cc488 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #7cc488 24%, transparent);--tone-success-on-soft:#93d19d;--tone-success-border:color-mix(in oklab, #7cc488 40%, transparent);--tone-success-text:#93d19d;--tone-warning-solid:#93650f;--tone-warning-mark:#e8b04e;--tone-warning-solid-hover:#a87618;--tone-warning-on-solid:#fff8f4;--tone-warning-soft:color-mix(in oklab, #e8b04e 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e8b04e 24%, transparent);--tone-warning-on-soft:#f0c272;--tone-warning-border:color-mix(in oklab, #e8b04e 40%, transparent);--tone-warning-text:#f0c272;--tone-danger-solid:#b3362e;--tone-danger-mark:#f07a6e;--tone-danger-solid-hover:#c6443b;--tone-danger-on-solid:#fff8f4;--tone-danger-soft:color-mix(in oklab, #f07a6e 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f07a6e 24%, transparent);--tone-danger-on-soft:#f59287;--tone-danger-border:color-mix(in oklab, #f07a6e 40%, transparent);--tone-danger-text:#f59287;--accent-glow:#ffb37a;--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, 255, 255, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 14px 34px -16px rgba(0, 0, 0, 0.75);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f6f3ef 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.16em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
171
|
+
/*
|
|
172
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
173
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
174
|
+
* "success" chip and a success toast carry the same three colours.
|
|
175
|
+
*
|
|
176
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
177
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
178
|
+
*/
|
|
179
|
+
|
|
180
|
+
[data-theme='cookbook-slate'] .badge-variant--default {
|
|
181
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
182
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
183
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
184
|
+
--recipe-border: var(--tone-neutral-border);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--info, .chip--info) {
|
|
188
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
189
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
190
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
191
|
+
--recipe-border: var(--tone-accent-border);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--success, .chip--success) {
|
|
195
|
+
--recipe-soft: var(--tone-success-soft);
|
|
196
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
197
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
198
|
+
--recipe-border: var(--tone-success-border);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--warning, .chip--warning) {
|
|
202
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
203
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
204
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
205
|
+
--recipe-border: var(--tone-warning-border);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--danger, .chip--danger) {
|
|
209
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
210
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
211
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
212
|
+
--recipe-border: var(--tone-danger-border);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
[data-theme='cookbook-slate']
|
|
216
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
217
|
+
border-color: var(--recipe-border);
|
|
218
|
+
background-color: var(--recipe-soft);
|
|
219
|
+
color: var(--recipe-on-soft);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
223
|
+
border-color: var(--border-default);
|
|
224
|
+
background: transparent;
|
|
225
|
+
color: var(--text-default);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
229
|
+
border-color: var(--recipe-border);
|
|
230
|
+
background: var(--surface-hover);
|
|
231
|
+
color: var(--text-strong);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
235
|
+
border-color: var(--recipe-border);
|
|
236
|
+
background: var(--recipe-soft);
|
|
237
|
+
color: var(--recipe-on-soft);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
241
|
+
border-color: var(--recipe-border);
|
|
242
|
+
background: var(--recipe-soft-hover);
|
|
243
|
+
color: var(--recipe-on-soft);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
247
|
+
[data-theme='cookbook-slate'] .chip.chip--default {
|
|
248
|
+
--recipe-soft: var(--selected-bg);
|
|
249
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
250
|
+
--recipe-on-soft: var(--selected-fg);
|
|
251
|
+
--recipe-border: var(--selected-border);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
[data-theme='cookbook-terracotta']{color-scheme:light;--font-body:'Nunito Sans', 'Avenir', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:500;--display-size:var(--font-size-xl);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 0% 100%, rgba(194, 82, 47, 0.12) 0%, transparent 65%), radial-gradient(50% 45% at 100% 0%, rgba(194, 82, 47, 0.1) 0%, transparent 65%), radial-gradient(110% 90% at 80% 0%, #fef8f0 0%, #f8eddf 50%, #f0e4d0 100%);--surface-canvas:#f8eddf;--surface-card:rgba(255, 255, 255, 0.95);--surface-raised:#fbf4ea;--surface-raised-alt:rgba(253, 245, 236, 0.6);--surface-overlay:#fffaf4;--button-fill:#f8eedf;--surface-overlay-card:rgba(255, 255, 255, 0.92);--surface-sunken:#e8d4ba;--control-hover:#f0ddc8;--surface-hover:color-mix(in oklab, #c2522f 8%, transparent);--surface-stripe:#fbf3e9;--rating-empty:color-mix(in oklab, #e8d4ba 85%, #1a0c04);--surface-selected:color-mix(in oklab, #c2522f 18%, transparent);--surface-blur:blur(18px) saturate(1.3);--text-strong:#1a0c04;--text-default:#2e1a10;--text-soft:#4e3020;--text-muted:#6e4f3e;--text-subtle:#957563;--text-link:#a3401f;--text-link-hover:#7d3018;--border-subtle:rgba(160, 64, 36, 0.13);--border-default:rgba(160, 64, 36, 0.2);--border-strong:rgba(160, 64, 36, 0.2);--border-card:rgba(255, 255, 255, 0.9);--border-card-hover:rgba(176, 70, 42, 0.4);--field-bg:#fbf4ea;--field-bg-focus:#fffaf4;--field-bg-disabled:color-mix(in oklab, #fbf4ea 94%, #1a0c04);--field-fg:#2e1a10;--field-border:rgba(160, 64, 36, 0.26);--field-border-hover:#b0462a;--field-border-focus:#c2522f;--field-placeholder:#957563;--field-label:#6e4f3e;--field-ring:color-mix(in oklab, #c2522f 24%, transparent);--tone-neutral-solid:#1a0c04;--tone-neutral-solid-hover:color-mix(in oklab, #1a0c04 70%, #2e1a10);--tone-neutral-on-solid:#fff8f4;--tone-neutral-soft:#f0ddc8;--tone-neutral-soft-hover:color-mix(in oklab, #f0ddc8 92%, #1a0c04);--tone-neutral-on-soft:#1a0c04;--tone-neutral-border:rgba(160, 64, 36, 0.2);--tone-neutral-text:#4e3020;--tone-accent-solid:#b0462a;--tone-accent-mark:#c2522f;--tone-accent-solid-hover:#933a22;--tone-accent-on-solid:#fff8f4;--tone-accent-soft:color-mix(in oklab, #c2522f 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #c2522f 24%, transparent);--tone-accent-on-soft:#a3401f;--tone-accent-border:color-mix(in oklab, #c2522f 40%, transparent);--tone-accent-text:#a3401f;--tone-success-solid:#3f6e3d;--tone-success-mark:#4f8a4c;--tone-success-solid-hover:#325a31;--tone-success-on-solid:#fff8f4;--tone-success-soft:color-mix(in oklab, #4f8a4c 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #4f8a4c 24%, transparent);--tone-success-on-soft:#3a663a;--tone-success-border:color-mix(in oklab, #4f8a4c 40%, transparent);--tone-success-text:#3a663a;--tone-warning-solid:#9a6512;--tone-warning-mark:#c98a26;--tone-warning-solid-hover:#7e520e;--tone-warning-on-solid:#fff8f4;--tone-warning-soft:color-mix(in oklab, #c98a26 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #c98a26 24%, transparent);--tone-warning-on-soft:#87570d;--tone-warning-border:color-mix(in oklab, #c98a26 40%, transparent);--tone-warning-text:#87570d;--tone-danger-solid:#a11c1c;--tone-danger-mark:#c23a2e;--tone-danger-solid-hover:#841616;--tone-danger-on-solid:#fff8f4;--tone-danger-soft:color-mix(in oklab, #c23a2e 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #c23a2e 24%, transparent);--tone-danger-on-soft:#961a1a;--tone-danger-border:color-mix(in oklab, #c23a2e 40%, transparent);--tone-danger-text:#961a1a;--accent-glow:#e07050;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, rgba(26, 12, 4, 0.16) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(26, 12, 4, 0.16) 62%, transparent);--shadow-sm:0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 1px rgba(26, 12, 4, 0.06), 0 14px 36px -18px rgba(26, 12, 4, 0.28);--shadow-md:0 14px 36px rgba(26, 12, 4, 0.1), 0 2px 6px rgba(26, 12, 4, 0.08);--shadow-lg:0 22px 65px rgba(26, 12, 4, 0.18), 0 4px 14px rgba(26, 12, 4, 0.12);--scrim:rgba(26, 12, 4, 0.38);--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:#b0462a;--toast-info-border-color:color-mix(in oklab, #b0462a 75%, #fff8f4);--toast-info-color:#fff8f4;--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:#3f6e3d;--toast-success-border-color:color-mix(in oklab, #3f6e3d 75%, #fff8f4);--toast-success-color:#fff8f4;--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:#9a6512;--toast-warning-border-color:color-mix(in oklab, #9a6512 75%, #fff8f4);--toast-warning-color:#fff8f4;--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:#a11c1c;--toast-danger-border-color:color-mix(in oklab, #a11c1c 75%, #fff8f4);--toast-danger-color:#fff8f4;--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.16em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
255
|
+
/*
|
|
256
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
257
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
258
|
+
* "success" chip and a success toast carry the same three colours.
|
|
259
|
+
*
|
|
260
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
261
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
262
|
+
*/
|
|
263
|
+
|
|
264
|
+
[data-theme='cookbook-terracotta'] .badge-variant--default {
|
|
265
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
266
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
267
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
268
|
+
--recipe-border: var(--tone-neutral-border);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--info, .chip--info) {
|
|
272
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
273
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
274
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
275
|
+
--recipe-border: var(--tone-accent-border);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--success, .chip--success) {
|
|
279
|
+
--recipe-soft: var(--tone-success-soft);
|
|
280
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
281
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
282
|
+
--recipe-border: var(--tone-success-border);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--warning, .chip--warning) {
|
|
286
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
287
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
288
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
289
|
+
--recipe-border: var(--tone-warning-border);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--danger, .chip--danger) {
|
|
293
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
294
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
295
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
296
|
+
--recipe-border: var(--tone-danger-border);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
[data-theme='cookbook-terracotta']
|
|
300
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
301
|
+
border-color: var(--recipe-border);
|
|
302
|
+
background-color: var(--recipe-soft);
|
|
303
|
+
color: var(--recipe-on-soft);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
307
|
+
border-color: var(--border-default);
|
|
308
|
+
background: transparent;
|
|
309
|
+
color: var(--text-default);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
313
|
+
border-color: var(--recipe-border);
|
|
314
|
+
background: var(--surface-hover);
|
|
315
|
+
color: var(--text-strong);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
319
|
+
border-color: var(--recipe-border);
|
|
320
|
+
background: var(--recipe-soft);
|
|
321
|
+
color: var(--recipe-on-soft);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
325
|
+
border-color: var(--recipe-border);
|
|
326
|
+
background: var(--recipe-soft-hover);
|
|
327
|
+
color: var(--recipe-on-soft);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
331
|
+
[data-theme='cookbook-terracotta'] .chip.chip--default {
|
|
332
|
+
--recipe-soft: var(--selected-bg);
|
|
333
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
334
|
+
--recipe-on-soft: var(--selected-fg);
|
|
335
|
+
--recipe-border: var(--selected-border);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
[data-theme='garage-night-drive']{color-scheme:dark;--font-body:'Barlow', system-ui, sans-serif;--font-display:'Barlow Condensed', 'Barlow', 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:uppercase;--display-tracking:0.02em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.08em;--header-weight:600;--canvas-layers:radial-gradient(60% 50% at 50% 0%, rgba(92, 200, 255, 0.07) 0%, transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px);--surface-canvas:#0e1012;--surface-card:#16191c;--surface-raised:#121416;--surface-raised-alt:#1b1f23;--surface-overlay:#1e2226;--button-fill:#202429;--surface-overlay-card:#171a1d;--surface-sunken:#252a2f;--control-hover:#23272c;--surface-hover:color-mix(in oklab, #5cc8ff 8%, transparent);--surface-stripe:#181b1f;--rating-empty:color-mix(in oklab, #252a2f 85%, #f4f5f6);--surface-selected:color-mix(in oklab, #5cc8ff 18%, transparent);--surface-blur:none;--text-strong:#f4f5f6;--text-default:#dfe1e4;--text-soft:#bfc3c8;--text-muted:#9a9fa6;--text-subtle:#747980;--text-link:#7fd3ff;--text-link-hover:#b3e6ff;--border-subtle:rgba(223, 225, 228, 0.08);--border-default:rgba(223, 225, 228, 0.13);--border-strong:rgba(223, 225, 228, 0.13);--border-card:rgba(223, 225, 228, 0.07);--border-card-hover:rgba(92, 200, 255, 0.45);--field-bg:#121416;--field-bg-focus:#121416;--field-bg-disabled:color-mix(in oklab, #121416 94%, #f4f5f6);--field-fg:#dfe1e4;--field-border:rgba(223, 225, 228, 0.16);--field-border-hover:#5cc8ff;--field-border-focus:#5cc8ff;--field-placeholder:#747980;--field-label:#9a9fa6;--field-ring:color-mix(in oklab, #5cc8ff 24%, transparent);--tone-neutral-solid:#f4f5f6;--tone-neutral-solid-hover:color-mix(in oklab, #f4f5f6 70%, #dfe1e4);--tone-neutral-on-solid:#0b1218;--tone-neutral-soft:#23272c;--tone-neutral-soft-hover:color-mix(in oklab, #23272c 92%, #f4f5f6);--tone-neutral-on-soft:#f4f5f6;--tone-neutral-border:rgba(223, 225, 228, 0.13);--tone-neutral-text:#bfc3c8;--tone-accent-solid:#5cc8ff;--tone-accent-mark:#5cc8ff;--tone-accent-solid-hover:#86d6ff;--tone-accent-on-solid:#0b1218;--tone-accent-soft:color-mix(in oklab, #5cc8ff 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #5cc8ff 24%, transparent);--tone-accent-on-soft:#7fd3ff;--tone-accent-border:color-mix(in oklab, #5cc8ff 40%, transparent);--tone-accent-text:#7fd3ff;--tone-success-solid:#4cc278;--tone-success-mark:#4cc278;--tone-success-solid-hover:#68cf8e;--tone-success-on-solid:#0b1218;--tone-success-soft:color-mix(in oklab, #4cc278 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #4cc278 24%, transparent);--tone-success-on-soft:#6fd393;--tone-success-border:color-mix(in oklab, #4cc278 40%, transparent);--tone-success-text:#6fd393;--tone-warning-solid:#ffb020;--tone-warning-mark:#ffb020;--tone-warning-solid-hover:#ffc04d;--tone-warning-on-solid:#0b1218;--tone-warning-soft:color-mix(in oklab, #ffb020 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #ffb020 24%, transparent);--tone-warning-on-soft:#ffc04d;--tone-warning-border:color-mix(in oklab, #ffb020 40%, transparent);--tone-warning-text:#ffc04d;--tone-danger-solid:#ff6b5e;--tone-danger-mark:#ff6b5e;--tone-danger-solid-hover:#ff8579;--tone-danger-on-solid:#0b1218;--tone-danger-soft:color-mix(in oklab, #ff6b5e 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #ff6b5e 24%, transparent);--tone-danger-on-soft:#ff8a80;--tone-danger-border:color-mix(in oklab, #ff6b5e 40%, transparent);--tone-danger-text:#ff8a80;--accent-glow:#a8e3ff;--selected-bg:var(--tone-accent-solid);--selected-bg-hover:var(--tone-accent-solid-hover);--selected-fg:var(--tone-accent-on-solid);--selected-border:var(--tone-accent-solid);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.45);--shadow-md:0 12px 30px -14px rgba(0, 0, 0, 0.8);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.7);--scrim:color-mix(in oklab, #f4f5f6 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: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)}
|
|
339
|
+
/*
|
|
340
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
341
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
342
|
+
* "success" chip and a success toast carry the same three colours.
|
|
343
|
+
*
|
|
344
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
345
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
346
|
+
*/
|
|
347
|
+
|
|
348
|
+
[data-theme='garage-night-drive'] .badge-variant--default {
|
|
349
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
350
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
351
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
352
|
+
--recipe-border: var(--tone-neutral-border);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--info, .chip--info) {
|
|
356
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
357
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
358
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
359
|
+
--recipe-border: var(--tone-accent-border);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--success, .chip--success) {
|
|
363
|
+
--recipe-soft: var(--tone-success-soft);
|
|
364
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
365
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
366
|
+
--recipe-border: var(--tone-success-border);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--warning, .chip--warning) {
|
|
370
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
371
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
372
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
373
|
+
--recipe-border: var(--tone-warning-border);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--danger, .chip--danger) {
|
|
377
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
378
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
379
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
380
|
+
--recipe-border: var(--tone-danger-border);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
[data-theme='garage-night-drive']
|
|
384
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
385
|
+
border-color: var(--recipe-border);
|
|
386
|
+
background-color: var(--recipe-soft);
|
|
387
|
+
color: var(--recipe-on-soft);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
391
|
+
border-color: var(--border-default);
|
|
392
|
+
background: transparent;
|
|
393
|
+
color: var(--text-default);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
397
|
+
border-color: var(--recipe-border);
|
|
398
|
+
background: var(--surface-hover);
|
|
399
|
+
color: var(--text-strong);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
403
|
+
border-color: var(--recipe-border);
|
|
404
|
+
background: var(--recipe-soft);
|
|
405
|
+
color: var(--recipe-on-soft);
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
409
|
+
border-color: var(--recipe-border);
|
|
410
|
+
background: var(--recipe-soft-hover);
|
|
411
|
+
color: var(--recipe-on-soft);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
415
|
+
[data-theme='garage-night-drive'] .chip.chip--default {
|
|
416
|
+
--recipe-soft: var(--selected-bg);
|
|
417
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
418
|
+
--recipe-on-soft: var(--selected-fg);
|
|
419
|
+
--recipe-border: var(--selected-border);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
[data-theme='garage-redline']{color-scheme:dark;--font-body:'Rajdhani', 'Barlow', sans-serif;--font-display:'Orbitron', 'Rajdhani', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:700;--display-size:var(--font-size-md);--display-transform:uppercase;--display-tracking:0.08em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:radial-gradient(55% 45% at 100% 0%, rgba(220, 38, 38, 0.14) 0%, transparent 60%), radial-gradient(45% 55% at 0% 100%, rgba(120, 12, 12, 0.18) 0%, transparent 65%), linear-gradient(160deg, #111316 0%, #0a0b0d 60%, #0e0f12 100%);--surface-canvas:#0c0d0f;--surface-card:#141618;--surface-raised:#0e0f12;--surface-raised-alt:#111316;--surface-overlay:#16181c;--button-fill:#1a1d22;--surface-overlay-card:#141618;--surface-sunken:#1d2026;--control-hover:rgba(220, 38, 38, 0.1);--surface-hover:color-mix(in oklab, #ef4444 8%, transparent);--surface-stripe:#121417;--rating-empty:color-mix(in oklab, #1d2026 85%, #ffffff);--surface-selected:color-mix(in oklab, #ef4444 18%, transparent);--surface-blur:none;--text-strong:#ffffff;--text-default:#c8cdd6;--text-soft:#a8afba;--text-muted:#8a909b;--text-subtle:#6a7080;--text-link:#f87171;--text-link-hover:#fca5a5;--border-subtle:#1e2228;--border-default:#282e38;--border-strong:#282e38;--border-card:#1e2228;--border-card-hover:rgba(220, 38, 38, 0.45);--field-bg:#0e0f12;--field-bg-focus:#121417;--field-bg-disabled:color-mix(in oklab, #0e0f12 94%, #ffffff);--field-fg:#c8cdd6;--field-border:#282e38;--field-border-hover:#dc2626;--field-border-focus:#ef4444;--field-placeholder:#6a7080;--field-label:#8a909b;--field-ring:color-mix(in oklab, #ef4444 24%, transparent);--tone-neutral-solid:#ffffff;--tone-neutral-solid-hover:color-mix(in oklab, #ffffff 70%, #c8cdd6);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:rgba(220, 38, 38, 0.1);--tone-neutral-soft-hover:color-mix(in oklab, rgba(220, 38, 38, 0.1) 92%, #ffffff);--tone-neutral-on-soft:#ffffff;--tone-neutral-border:#282e38;--tone-neutral-text:#a8afba;--tone-accent-solid:#dc2626;--tone-accent-mark:#ef4444;--tone-accent-solid-hover:#c81e1e;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #ef4444 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #ef4444 24%, transparent);--tone-accent-on-soft:#f87171;--tone-accent-border:color-mix(in oklab, #ef4444 40%, transparent);--tone-accent-text:#f87171;--tone-success-solid:#15803d;--tone-success-mark:#22c55e;--tone-success-solid-hover:#17924a;--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:#4ade80;--tone-success-border:color-mix(in oklab, #22c55e 40%, transparent);--tone-success-text:#4ade80;--tone-warning-solid:#b45309;--tone-warning-mark:#f59e0b;--tone-warning-solid-hover:#c2600c;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #f59e0b 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #f59e0b 24%, transparent);--tone-warning-on-soft:#fbbf24;--tone-warning-border:color-mix(in oklab, #f59e0b 40%, transparent);--tone-warning-text:#fbbf24;--tone-danger-solid:#dc2626;--tone-danger-mark:#ef4444;--tone-danger-solid-hover:#c81e1e;--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:#f87171;--tone-danger-border:color-mix(in oklab, #ef4444 40%, transparent);--tone-danger-text:#f87171;--accent-glow:#f87171;--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(0, 0, 0, 0.5) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(0, 0, 0, 0.5) 62%, transparent);--shadow-sm:0 4px 16px rgba(0, 0, 0, 0.5);--shadow-md:0 4px 16px rgba(0, 0, 0, 0.5);--shadow-lg:0 8px 32px rgba(0, 0, 0, 0.6);--scrim:rgba(0, 0, 0, 0.78);--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:#dc2626;--toast-info-border-color:color-mix(in oklab, #dc2626 75%, #ffffff);--toast-info-color:#ffffff;--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:#15803d;--toast-success-border-color:color-mix(in oklab, #15803d 75%, #ffffff);--toast-success-color:#ffffff;--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:#b45309;--toast-warning-border-color:color-mix(in oklab, #b45309 75%, #ffffff);--toast-warning-color:#ffffff;--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:#dc2626;--toast-danger-border-color:color-mix(in oklab, #dc2626 75%, #ffffff);--toast-danger-color:#ffffff;--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-md);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:0.08em;--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)}
|
|
423
|
+
/*
|
|
424
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
425
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
426
|
+
* "success" chip and a success toast carry the same three colours.
|
|
427
|
+
*
|
|
428
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
429
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
430
|
+
*/
|
|
431
|
+
|
|
432
|
+
[data-theme='garage-redline'] .badge-variant--default {
|
|
433
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
434
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
435
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
436
|
+
--recipe-border: var(--tone-neutral-border);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
[data-theme='garage-redline'] :is(.badge-variant--info, .chip--info) {
|
|
440
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
441
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
442
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
443
|
+
--recipe-border: var(--tone-accent-border);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
[data-theme='garage-redline'] :is(.badge-variant--success, .chip--success) {
|
|
447
|
+
--recipe-soft: var(--tone-success-soft);
|
|
448
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
449
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
450
|
+
--recipe-border: var(--tone-success-border);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
[data-theme='garage-redline'] :is(.badge-variant--warning, .chip--warning) {
|
|
454
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
455
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
456
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
457
|
+
--recipe-border: var(--tone-warning-border);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
[data-theme='garage-redline'] :is(.badge-variant--danger, .chip--danger) {
|
|
461
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
462
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
463
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
464
|
+
--recipe-border: var(--tone-danger-border);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
[data-theme='garage-redline']
|
|
468
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
469
|
+
border-color: var(--recipe-border);
|
|
470
|
+
background-color: var(--recipe-soft);
|
|
471
|
+
color: var(--recipe-on-soft);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
475
|
+
border-color: var(--border-default);
|
|
476
|
+
background: transparent;
|
|
477
|
+
color: var(--text-default);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
481
|
+
border-color: var(--recipe-border);
|
|
482
|
+
background: var(--surface-hover);
|
|
483
|
+
color: var(--text-strong);
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
487
|
+
border-color: var(--recipe-border);
|
|
488
|
+
background: var(--recipe-soft);
|
|
489
|
+
color: var(--recipe-on-soft);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
493
|
+
border-color: var(--recipe-border);
|
|
494
|
+
background: var(--recipe-soft-hover);
|
|
495
|
+
color: var(--recipe-on-soft);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
499
|
+
[data-theme='garage-redline'] .chip.chip--default {
|
|
500
|
+
--recipe-soft: var(--selected-bg);
|
|
501
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
502
|
+
--recipe-on-soft: var(--selected-fg);
|
|
503
|
+
--recipe-border: var(--selected-border);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
[data-theme='garage-workshop']{color-scheme:light;--font-body:'Barlow', system-ui, sans-serif;--font-display:'Barlow Condensed', 'Barlow', 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:uppercase;--display-tracking:0.02em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.08em;--header-weight:600;--canvas-layers:repeating-linear-gradient(135deg, rgba(22, 24, 27, 0.022) 0 2px, transparent 2px 8px);--surface-canvas:#eae8e4;--surface-card:#f9f8f6;--surface-raised:#ffffff;--surface-raised-alt:#f0eeea;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#f9f8f6;--surface-sunken:#dedad3;--control-hover:#e5e2dc;--surface-hover:color-mix(in oklab, #c2410c 8%, transparent);--surface-stripe:#f4f2ef;--rating-empty:color-mix(in oklab, #dedad3 85%, #16181b);--surface-selected:color-mix(in oklab, #c2410c 18%, transparent);--surface-blur:none;--text-strong:#16181b;--text-default:#25282c;--text-soft:#3d4146;--text-muted:#565b61;--text-subtle:#83888e;--text-link:#b03b0b;--text-link-hover:#8a2e09;--border-subtle:rgba(22, 24, 27, 0.1);--border-default:rgba(22, 24, 27, 0.16);--border-strong:rgba(22, 24, 27, 0.16);--border-card:rgba(22, 24, 27, 0.12);--border-card-hover:rgba(194, 65, 12, 0.45);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #16181b);--field-fg:#25282c;--field-border:rgba(22, 24, 27, 0.22);--field-border-hover:#16181b;--field-border-focus:#c2410c;--field-placeholder:#83888e;--field-label:#565b61;--field-ring:color-mix(in oklab, #c2410c 24%, transparent);--tone-neutral-solid:#16181b;--tone-neutral-solid-hover:color-mix(in oklab, #16181b 70%, #25282c);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e5e2dc;--tone-neutral-soft-hover:color-mix(in oklab, #e5e2dc 92%, #16181b);--tone-neutral-on-soft:#16181b;--tone-neutral-border:rgba(22, 24, 27, 0.16);--tone-neutral-text:#3d4146;--tone-accent-solid:#c2410c;--tone-accent-mark:#c2410c;--tone-accent-solid-hover:#9a3412;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #c2410c 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #c2410c 24%, transparent);--tone-accent-on-soft:#b03b0b;--tone-accent-border:color-mix(in oklab, #c2410c 40%, transparent);--tone-accent-text:#b03b0b;--tone-success-solid:#2d6a3e;--tone-success-mark:#2d6a3e;--tone-success-solid-hover:#235532;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #2d6a3e 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #2d6a3e 24%, transparent);--tone-success-on-soft:#2a6239;--tone-success-border:color-mix(in oklab, #2d6a3e 40%, transparent);--tone-success-text:#2a6239;--tone-warning-solid:#a16207;--tone-warning-mark:#d9a106;--tone-warning-solid-hover:#854d0e;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #d9a106 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #d9a106 24%, transparent);--tone-warning-on-soft:#8a5306;--tone-warning-border:color-mix(in oklab, #d9a106 40%, transparent);--tone-warning-text:#8a5306;--tone-danger-solid:#b91c1c;--tone-danger-mark:#b91c1c;--tone-danger-solid-hover:#991b1b;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #b91c1c 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #b91c1c 24%, transparent);--tone-danger-on-soft:#a91d1d;--tone-danger-border:color-mix(in oklab, #b91c1c 40%, transparent);--tone-danger-text:#a91d1d;--accent-glow:#f97316;--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, #16181b 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #16181b 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(22, 24, 27, 0.06);--shadow-md:0 1px 0 rgba(22, 24, 27, 0.05), 0 2px 6px rgba(22, 24, 27, 0.08);--shadow-lg:0 20px 50px rgba(22, 24, 27, 0.24);--scrim:color-mix(in oklab, #16181b 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: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)}
|
|
507
|
+
/*
|
|
508
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
509
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
510
|
+
* "success" chip and a success toast carry the same three colours.
|
|
511
|
+
*
|
|
512
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
513
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
514
|
+
*/
|
|
515
|
+
|
|
516
|
+
[data-theme='garage-workshop'] .badge-variant--default {
|
|
517
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
518
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
519
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
520
|
+
--recipe-border: var(--tone-neutral-border);
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
[data-theme='garage-workshop'] :is(.badge-variant--info, .chip--info) {
|
|
524
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
525
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
526
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
527
|
+
--recipe-border: var(--tone-accent-border);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
[data-theme='garage-workshop'] :is(.badge-variant--success, .chip--success) {
|
|
531
|
+
--recipe-soft: var(--tone-success-soft);
|
|
532
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
533
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
534
|
+
--recipe-border: var(--tone-success-border);
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
[data-theme='garage-workshop'] :is(.badge-variant--warning, .chip--warning) {
|
|
538
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
539
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
540
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
541
|
+
--recipe-border: var(--tone-warning-border);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
[data-theme='garage-workshop'] :is(.badge-variant--danger, .chip--danger) {
|
|
545
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
546
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
547
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
548
|
+
--recipe-border: var(--tone-danger-border);
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
[data-theme='garage-workshop']
|
|
552
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
553
|
+
border-color: var(--recipe-border);
|
|
554
|
+
background-color: var(--recipe-soft);
|
|
555
|
+
color: var(--recipe-on-soft);
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
559
|
+
border-color: var(--border-default);
|
|
560
|
+
background: transparent;
|
|
561
|
+
color: var(--text-default);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
565
|
+
border-color: var(--recipe-border);
|
|
566
|
+
background: var(--surface-hover);
|
|
567
|
+
color: var(--text-strong);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
571
|
+
border-color: var(--recipe-border);
|
|
572
|
+
background: var(--recipe-soft);
|
|
573
|
+
color: var(--recipe-on-soft);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
577
|
+
border-color: var(--recipe-border);
|
|
578
|
+
background: var(--recipe-soft-hover);
|
|
579
|
+
color: var(--recipe-on-soft);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
583
|
+
[data-theme='garage-workshop'] .chip.chip--default {
|
|
584
|
+
--recipe-soft: var(--selected-bg);
|
|
585
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
586
|
+
--recipe-on-soft: var(--selected-fg);
|
|
587
|
+
--recipe-border: var(--selected-border);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
[data-theme='hub-deep-water']{color-scheme:dark;--font-body:'Inter', system-ui, sans-serif;--font-display:'JetBrains Mono', ui-monospace, monospace;--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:500;--label-transform:none;--label-tracking:normal;--header-weight:500;--canvas-layers:radial-gradient(60% 50% at 100% 0%, rgba(25, 205, 230, 0.12) 0%, transparent 65%), radial-gradient(50% 45% at 0% 100%, rgba(117, 139, 163, 0.1) 0%, transparent 65%), linear-gradient(155deg, #0d1628 0%, #070b15 55%, #0a1020 100%);--surface-canvas:#0a0e1a;--surface-card:#121a27;--surface-raised:#0e1520;--surface-raised-alt:#0f1621;--surface-overlay:#162131;--button-fill:#1a2535;--surface-overlay-card:#111926;--surface-sunken:#1c2838;--control-hover:#1a2637;--surface-hover:color-mix(in oklab, #19cde6 8%, transparent);--surface-stripe:#101824;--rating-empty:color-mix(in oklab, #1c2838 85%, #ffffff);--surface-selected:color-mix(in oklab, #19cde6 18%, transparent);--surface-blur:none;--text-strong:#ffffff;--text-default:#e6edf5;--text-soft:#c3cfdc;--text-muted:#8ea2b8;--text-subtle:#6c8199;--text-link:#4fd8ec;--text-link-hover:#9becf8;--border-subtle:rgba(142, 162, 184, 0.14);--border-default:rgba(142, 162, 184, 0.2);--border-strong:rgba(142, 162, 184, 0.2);--border-card:rgba(142, 162, 184, 0.14);--border-card-hover:rgba(25, 205, 230, 0.5);--field-bg:#0e1520;--field-bg-focus:#132031;--field-bg-disabled:color-mix(in oklab, #0e1520 94%, #ffffff);--field-fg:#e6edf5;--field-border:rgba(142, 162, 184, 0.24);--field-border-hover:#19cde6;--field-border-focus:#19cde6;--field-placeholder:#6c8199;--field-label:#8ea2b8;--field-ring:color-mix(in oklab, #19cde6 24%, transparent);--tone-neutral-solid:#ffffff;--tone-neutral-solid-hover:color-mix(in oklab, #ffffff 70%, #e6edf5);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#1a2637;--tone-neutral-soft-hover:color-mix(in oklab, #1a2637 92%, #ffffff);--tone-neutral-on-soft:#ffffff;--tone-neutral-border:rgba(142, 162, 184, 0.2);--tone-neutral-text:#c3cfdc;--tone-accent-solid:#0e7490;--tone-accent-mark:#19cde6;--tone-accent-solid-hover:#0b86a5;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #19cde6 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #19cde6 24%, transparent);--tone-accent-on-soft:#4fd8ec;--tone-accent-border:color-mix(in oklab, #19cde6 40%, transparent);--tone-accent-text:#4fd8ec;--tone-success-solid:#15803d;--tone-success-mark:#22c55e;--tone-success-solid-hover:#17924a;--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:#4ade80;--tone-success-border:color-mix(in oklab, #22c55e 40%, transparent);--tone-success-text:#4ade80;--tone-warning-solid:#a16207;--tone-warning-mark:#f59e0b;--tone-warning-solid-hover:#b56f0a;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #f59e0b 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #f59e0b 24%, transparent);--tone-warning-on-soft:#fbbf24;--tone-warning-border:color-mix(in oklab, #f59e0b 40%, transparent);--tone-warning-text:#fbbf24;--tone-danger-solid:#b91c1c;--tone-danger-mark:#ef4444;--tone-danger-solid-hover:#cf2626;--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:#f87171;--tone-danger-border:color-mix(in oklab, #ef4444 40%, transparent);--tone-danger-text:#f87171;--accent-glow:#75e1f8;--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(142, 162, 184, 0.05) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 12px 30px -14px rgba(0, 0, 0, 0.7);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.7);--scrim:rgba(10, 14, 26, 0.8);--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:#0e7490;--toast-info-border-color:color-mix(in oklab, #0e7490 75%, #ffffff);--toast-info-color:#ffffff;--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:#15803d;--toast-success-border-color:color-mix(in oklab, #15803d 75%, #ffffff);--toast-success-color:#ffffff;--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:#a16207;--toast-warning-border-color:color-mix(in oklab, #a16207 75%, #ffffff);--toast-warning-color:#ffffff;--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:#b91c1c;--toast-danger-border-color:color-mix(in oklab, #b91c1c 75%, #ffffff);--toast-danger-color:#ffffff;--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:normal;--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)}
|
|
591
|
+
/*
|
|
592
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
593
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
594
|
+
* "success" chip and a success toast carry the same three colours.
|
|
595
|
+
*
|
|
596
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
597
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
598
|
+
*/
|
|
599
|
+
|
|
600
|
+
[data-theme='hub-deep-water'] .badge-variant--default {
|
|
601
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
602
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
603
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
604
|
+
--recipe-border: var(--tone-neutral-border);
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
[data-theme='hub-deep-water'] :is(.badge-variant--info, .chip--info) {
|
|
608
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
609
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
610
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
611
|
+
--recipe-border: var(--tone-accent-border);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
[data-theme='hub-deep-water'] :is(.badge-variant--success, .chip--success) {
|
|
615
|
+
--recipe-soft: var(--tone-success-soft);
|
|
616
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
617
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
618
|
+
--recipe-border: var(--tone-success-border);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
[data-theme='hub-deep-water'] :is(.badge-variant--warning, .chip--warning) {
|
|
622
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
623
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
624
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
625
|
+
--recipe-border: var(--tone-warning-border);
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
[data-theme='hub-deep-water'] :is(.badge-variant--danger, .chip--danger) {
|
|
629
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
630
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
631
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
632
|
+
--recipe-border: var(--tone-danger-border);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
[data-theme='hub-deep-water']
|
|
636
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
637
|
+
border-color: var(--recipe-border);
|
|
638
|
+
background-color: var(--recipe-soft);
|
|
639
|
+
color: var(--recipe-on-soft);
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
[data-theme='hub-deep-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
643
|
+
border-color: var(--border-default);
|
|
644
|
+
background: transparent;
|
|
645
|
+
color: var(--text-default);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
[data-theme='hub-deep-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
649
|
+
border-color: var(--recipe-border);
|
|
650
|
+
background: var(--surface-hover);
|
|
651
|
+
color: var(--text-strong);
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
[data-theme='hub-deep-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
655
|
+
border-color: var(--recipe-border);
|
|
656
|
+
background: var(--recipe-soft);
|
|
657
|
+
color: var(--recipe-on-soft);
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
[data-theme='hub-deep-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
661
|
+
border-color: var(--recipe-border);
|
|
662
|
+
background: var(--recipe-soft-hover);
|
|
663
|
+
color: var(--recipe-on-soft);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
667
|
+
[data-theme='hub-deep-water'] .chip.chip--default {
|
|
668
|
+
--recipe-soft: var(--selected-bg);
|
|
669
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
670
|
+
--recipe-on-soft: var(--selected-fg);
|
|
671
|
+
--recipe-border: var(--selected-border);
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
[data-theme='hub-shallows']{color-scheme:light;--font-body:'Inter', system-ui, sans-serif;--font-display:'JetBrains Mono', ui-monospace, monospace;--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:500;--label-transform:none;--label-tracking:normal;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(14, 116, 144, 0.09) 0%, transparent 65%), linear-gradient(160deg, #f2f7f9 0%, #e6eef2 100%);--surface-canvas:#ebf2f5;--surface-card:#ffffff;--surface-raised:#ffffff;--surface-raised-alt:#f4f8fa;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#ffffff;--surface-sunken:#dbe6ec;--control-hover:#e4edf2;--surface-hover:color-mix(in oklab, #0e7490 8%, transparent);--surface-stripe:#f7fafb;--rating-empty:color-mix(in oklab, #dbe6ec 85%, #0b1622);--surface-selected:color-mix(in oklab, #0e7490 18%, transparent);--surface-blur:none;--text-strong:#0b1622;--text-default:#1c2a38;--text-soft:#344556;--text-muted:#526375;--text-subtle:#7d8c9b;--text-link:#0b6680;--text-link-hover:#084b5e;--border-subtle:rgba(11, 22, 34, 0.08);--border-default:rgba(11, 22, 34, 0.14);--border-strong:rgba(11, 22, 34, 0.14);--border-card:rgba(11, 22, 34, 0.1);--border-card-hover:rgba(14, 116, 144, 0.45);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #0b1622);--field-fg:#1c2a38;--field-border:rgba(11, 22, 34, 0.2);--field-border-hover:#0e7490;--field-border-focus:#0e7490;--field-placeholder:#7d8c9b;--field-label:#526375;--field-ring:color-mix(in oklab, #0e7490 24%, transparent);--tone-neutral-solid:#0b1622;--tone-neutral-solid-hover:color-mix(in oklab, #0b1622 70%, #1c2a38);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e4edf2;--tone-neutral-soft-hover:color-mix(in oklab, #e4edf2 92%, #0b1622);--tone-neutral-on-soft:#0b1622;--tone-neutral-border:rgba(11, 22, 34, 0.14);--tone-neutral-text:#344556;--tone-accent-solid:#0e7490;--tone-accent-mark:#0e7490;--tone-accent-solid-hover:#0b5f77;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #0e7490 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #0e7490 24%, transparent);--tone-accent-on-soft:#0b6680;--tone-accent-border:color-mix(in oklab, #0e7490 40%, transparent);--tone-accent-text:#0b6680;--tone-success-solid:#15803d;--tone-success-mark:#15803d;--tone-success-solid-hover:#166534;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #15803d 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #15803d 24%, transparent);--tone-success-on-soft:#15703a;--tone-success-border:color-mix(in oklab, #15803d 40%, transparent);--tone-success-text:#15703a;--tone-warning-solid:#a16207;--tone-warning-mark:#d98a0b;--tone-warning-solid-hover:#854d0e;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #d98a0b 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #d98a0b 24%, transparent);--tone-warning-on-soft:#8a5306;--tone-warning-border:color-mix(in oklab, #d98a0b 40%, transparent);--tone-warning-text:#8a5306;--tone-danger-solid:#b91c1c;--tone-danger-mark:#b91c1c;--tone-danger-solid-hover:#991b1b;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #b91c1c 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #b91c1c 24%, transparent);--tone-danger-on-soft:#a91d1d;--tone-danger-border:color-mix(in oklab, #b91c1c 40%, transparent);--tone-danger-text:#a91d1d;--accent-glow:#19cde6;--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, #0b1622 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #0b1622 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(11, 22, 34, 0.06);--shadow-md:0 1px 2px rgba(11, 22, 34, 0.06), 0 8px 24px -12px rgba(11, 22, 34, 0.18);--shadow-lg:0 24px 60px rgba(11, 22, 34, 0.22);--scrim:color-mix(in oklab, #0b1622 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:normal;--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)}
|
|
675
|
+
/*
|
|
676
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
677
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
678
|
+
* "success" chip and a success toast carry the same three colours.
|
|
679
|
+
*
|
|
680
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
681
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
682
|
+
*/
|
|
683
|
+
|
|
684
|
+
[data-theme='hub-shallows'] .badge-variant--default {
|
|
685
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
686
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
687
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
688
|
+
--recipe-border: var(--tone-neutral-border);
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
[data-theme='hub-shallows'] :is(.badge-variant--info, .chip--info) {
|
|
692
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
693
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
694
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
695
|
+
--recipe-border: var(--tone-accent-border);
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
[data-theme='hub-shallows'] :is(.badge-variant--success, .chip--success) {
|
|
699
|
+
--recipe-soft: var(--tone-success-soft);
|
|
700
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
701
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
702
|
+
--recipe-border: var(--tone-success-border);
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
[data-theme='hub-shallows'] :is(.badge-variant--warning, .chip--warning) {
|
|
706
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
707
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
708
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
709
|
+
--recipe-border: var(--tone-warning-border);
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
[data-theme='hub-shallows'] :is(.badge-variant--danger, .chip--danger) {
|
|
713
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
714
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
715
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
716
|
+
--recipe-border: var(--tone-danger-border);
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
[data-theme='hub-shallows']
|
|
720
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
721
|
+
border-color: var(--recipe-border);
|
|
722
|
+
background-color: var(--recipe-soft);
|
|
723
|
+
color: var(--recipe-on-soft);
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
[data-theme='hub-shallows'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
727
|
+
border-color: var(--border-default);
|
|
728
|
+
background: transparent;
|
|
729
|
+
color: var(--text-default);
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
[data-theme='hub-shallows'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
733
|
+
border-color: var(--recipe-border);
|
|
734
|
+
background: var(--surface-hover);
|
|
735
|
+
color: var(--text-strong);
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
[data-theme='hub-shallows'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
739
|
+
border-color: var(--recipe-border);
|
|
740
|
+
background: var(--recipe-soft);
|
|
741
|
+
color: var(--recipe-on-soft);
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
[data-theme='hub-shallows'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
745
|
+
border-color: var(--recipe-border);
|
|
746
|
+
background: var(--recipe-soft-hover);
|
|
747
|
+
color: var(--recipe-on-soft);
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
751
|
+
[data-theme='hub-shallows'] .chip.chip--default {
|
|
752
|
+
--recipe-soft: var(--selected-bg);
|
|
753
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
754
|
+
--recipe-on-soft: var(--selected-fg);
|
|
755
|
+
--recipe-border: var(--selected-border);
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
[data-theme='impulse-pause']{color-scheme:light;--font-body:'Schibsted Grotesk', system-ui, sans-serif;--font-display:'Instrument Serif', Georgia, 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:none;--display-tracking:normal;--label-weight:600;--label-transform:none;--label-tracking:0.02em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(91, 63, 166, 0.07) 0%, transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(214, 90, 60, 0.06) 0%, transparent 65%);--surface-canvas:#f4f1ec;--surface-card:#fdfcfa;--surface-raised:#ffffff;--surface-raised-alt:#f6f3ef;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#fdfcfa;--surface-sunken:#e6e0d9;--control-hover:#ece7e1;--surface-hover:color-mix(in oklab, #6d4fc0 8%, transparent);--surface-stripe:#f9f7f4;--rating-empty:color-mix(in oklab, #e6e0d9 85%, #1b1820);--surface-selected:color-mix(in oklab, #6d4fc0 18%, transparent);--surface-blur:none;--text-strong:#1b1820;--text-default:#2b2731;--text-soft:#45404d;--text-muted:#5f5968;--text-subtle:#8c8595;--text-link:#55399d;--text-link-hover:#3d2878;--border-subtle:rgba(27, 24, 32, 0.08);--border-default:rgba(27, 24, 32, 0.14);--border-strong:rgba(27, 24, 32, 0.14);--border-card:rgba(27, 24, 32, 0.09);--border-card-hover:rgba(91, 63, 166, 0.4);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #1b1820);--field-fg:#2b2731;--field-border:rgba(27, 24, 32, 0.2);--field-border-hover:#5b3fa6;--field-border-focus:#6d4fc0;--field-placeholder:#8c8595;--field-label:#5f5968;--field-ring:color-mix(in oklab, #6d4fc0 24%, transparent);--tone-neutral-solid:#1b1820;--tone-neutral-solid-hover:color-mix(in oklab, #1b1820 70%, #2b2731);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#ece7e1;--tone-neutral-soft-hover:color-mix(in oklab, #ece7e1 92%, #1b1820);--tone-neutral-on-soft:#1b1820;--tone-neutral-border:rgba(27, 24, 32, 0.14);--tone-neutral-text:#45404d;--tone-accent-solid:#5b3fa6;--tone-accent-mark:#6d4fc0;--tone-accent-solid-hover:#4a328a;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #6d4fc0 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #6d4fc0 24%, transparent);--tone-accent-on-soft:#55399d;--tone-accent-border:color-mix(in oklab, #6d4fc0 40%, transparent);--tone-accent-text:#55399d;--tone-success-solid:#2f7552;--tone-success-mark:#3f9468;--tone-success-solid-hover:#265f43;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #3f9468 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #3f9468 24%, transparent);--tone-success-on-soft:#2a6a4a;--tone-success-border:color-mix(in oklab, #3f9468 40%, transparent);--tone-success-text:#2a6a4a;--tone-warning-solid:#a5560f;--tone-warning-mark:#d9822b;--tone-warning-solid-hover:#88460b;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #d9822b 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #d9822b 24%, transparent);--tone-warning-on-soft:#8f4a0c;--tone-warning-border:color-mix(in oklab, #d9822b 40%, transparent);--tone-warning-text:#8f4a0c;--tone-danger-solid:#c03a2b;--tone-danger-mark:#e0573f;--tone-danger-solid-hover:#a02f22;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #e0573f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #e0573f 24%, transparent);--tone-danger-on-soft:#ad3427;--tone-danger-border:color-mix(in oklab, #e0573f 40%, transparent);--tone-danger-text:#ad3427;--accent-glow:#a58bf0;--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, #1b1820 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #1b1820 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(27, 24, 32, 0.05);--shadow-md:0 1px 2px rgba(27, 24, 32, 0.05), 0 12px 28px -16px rgba(27, 24, 32, 0.22);--shadow-lg:0 24px 60px rgba(27, 24, 32, 0.2);--scrim:color-mix(in oklab, #1b1820 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:normal;--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)}
|
|
759
|
+
/*
|
|
760
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
761
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
762
|
+
* "success" chip and a success toast carry the same three colours.
|
|
763
|
+
*
|
|
764
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
765
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
766
|
+
*/
|
|
767
|
+
|
|
768
|
+
[data-theme='impulse-pause'] .badge-variant--default {
|
|
769
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
770
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
771
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
772
|
+
--recipe-border: var(--tone-neutral-border);
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
[data-theme='impulse-pause'] :is(.badge-variant--info, .chip--info) {
|
|
776
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
777
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
778
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
779
|
+
--recipe-border: var(--tone-accent-border);
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
[data-theme='impulse-pause'] :is(.badge-variant--success, .chip--success) {
|
|
783
|
+
--recipe-soft: var(--tone-success-soft);
|
|
784
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
785
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
786
|
+
--recipe-border: var(--tone-success-border);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
[data-theme='impulse-pause'] :is(.badge-variant--warning, .chip--warning) {
|
|
790
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
791
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
792
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
793
|
+
--recipe-border: var(--tone-warning-border);
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
[data-theme='impulse-pause'] :is(.badge-variant--danger, .chip--danger) {
|
|
797
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
798
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
799
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
800
|
+
--recipe-border: var(--tone-danger-border);
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
[data-theme='impulse-pause']
|
|
804
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
805
|
+
border-color: var(--recipe-border);
|
|
806
|
+
background-color: var(--recipe-soft);
|
|
807
|
+
color: var(--recipe-on-soft);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
[data-theme='impulse-pause'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
811
|
+
border-color: var(--border-default);
|
|
812
|
+
background: transparent;
|
|
813
|
+
color: var(--text-default);
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
[data-theme='impulse-pause'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
817
|
+
border-color: var(--recipe-border);
|
|
818
|
+
background: var(--surface-hover);
|
|
819
|
+
color: var(--text-strong);
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
[data-theme='impulse-pause'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
823
|
+
border-color: var(--recipe-border);
|
|
824
|
+
background: var(--recipe-soft);
|
|
825
|
+
color: var(--recipe-on-soft);
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
[data-theme='impulse-pause'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
829
|
+
border-color: var(--recipe-border);
|
|
830
|
+
background: var(--recipe-soft-hover);
|
|
831
|
+
color: var(--recipe-on-soft);
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
835
|
+
[data-theme='impulse-pause'] .chip.chip--default {
|
|
836
|
+
--recipe-soft: var(--selected-bg);
|
|
837
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
838
|
+
--recipe-on-soft: var(--selected-fg);
|
|
839
|
+
--recipe-border: var(--selected-border);
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
[data-theme='impulse-still-water']{color-scheme:dark;--font-body:'Schibsted Grotesk', system-ui, sans-serif;--font-display:'Instrument Serif', Georgia, 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:none;--display-tracking:normal;--label-weight:600;--label-transform:none;--label-tracking:0.02em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(124, 199, 184, 0.08) 0%, transparent 65%), radial-gradient(50% 45% at 0% 100%, rgba(140, 170, 200, 0.06) 0%, transparent 65%), linear-gradient(170deg, #111a19 0%, #0d1312 100%);--surface-canvas:#0f1615;--surface-card:#151e1d;--surface-raised:#121a19;--surface-raised-alt:#1a2423;--surface-overlay:#1c2726;--button-fill:#1e2928;--surface-overlay-card:#16201f;--surface-sunken:#22302e;--control-hover:#212d2b;--surface-hover:color-mix(in oklab, #7cc7b8 8%, transparent);--surface-stripe:#182120;--rating-empty:color-mix(in oklab, #22302e 85%, #eef5f3);--surface-selected:color-mix(in oklab, #7cc7b8 18%, transparent);--surface-blur:none;--text-strong:#eef5f3;--text-default:#d6e2df;--text-soft:#b6c6c2;--text-muted:#90a39f;--text-subtle:#6b7d79;--text-link:#94d3c6;--text-link-hover:#bfe8df;--border-subtle:rgba(214, 226, 223, 0.08);--border-default:rgba(214, 226, 223, 0.13);--border-strong:rgba(214, 226, 223, 0.13);--border-card:rgba(214, 226, 223, 0.07);--border-card-hover:rgba(124, 199, 184, 0.4);--field-bg:#121a19;--field-bg-focus:#121a19;--field-bg-disabled:color-mix(in oklab, #121a19 94%, #eef5f3);--field-fg:#d6e2df;--field-border:rgba(214, 226, 223, 0.16);--field-border-hover:#7cc7b8;--field-border-focus:#7cc7b8;--field-placeholder:#6b7d79;--field-label:#90a39f;--field-ring:color-mix(in oklab, #7cc7b8 24%, transparent);--tone-neutral-solid:#eef5f3;--tone-neutral-solid-hover:color-mix(in oklab, #eef5f3 70%, #d6e2df);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#212d2b;--tone-neutral-soft-hover:color-mix(in oklab, #212d2b 92%, #eef5f3);--tone-neutral-on-soft:#eef5f3;--tone-neutral-border:rgba(214, 226, 223, 0.13);--tone-neutral-text:#b6c6c2;--tone-accent-solid:#2f7a6e;--tone-accent-mark:#7cc7b8;--tone-accent-solid-hover:#38897c;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #7cc7b8 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #7cc7b8 24%, transparent);--tone-accent-on-soft:#94d3c6;--tone-accent-border:color-mix(in oklab, #7cc7b8 40%, transparent);--tone-accent-text:#94d3c6;--tone-success-solid:#3d7548;--tone-success-mark:#8fca9f;--tone-success-solid-hover:#468453;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #8fca9f 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #8fca9f 24%, transparent);--tone-success-on-soft:#a3d4b1;--tone-success-border:color-mix(in oklab, #8fca9f 40%, transparent);--tone-success-text:#a3d4b1;--tone-warning-solid:#856519;--tone-warning-mark:#d9b86a;--tone-warning-solid-hover:#977420;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #d9b86a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #d9b86a 24%, transparent);--tone-warning-on-soft:#e3c47f;--tone-warning-border:color-mix(in oklab, #d9b86a 40%, transparent);--tone-warning-text:#e3c47f;--tone-danger-solid:#9e4248;--tone-danger-mark:#e08a8f;--tone-danger-solid-hover:#b04e54;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #e08a8f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #e08a8f 24%, transparent);--tone-danger-on-soft:#e9a1a5;--tone-danger-border:color-mix(in oklab, #e08a8f 40%, transparent);--tone-danger-text:#e9a1a5;--accent-glow:#b5e6dc;--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(238, 245, 243, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.35);--shadow-md:0 14px 34px -16px rgba(0, 0, 0, 0.7);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.6);--scrim:color-mix(in oklab, #eef5f3 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:normal;--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)}
|
|
843
|
+
/*
|
|
844
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
845
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
846
|
+
* "success" chip and a success toast carry the same three colours.
|
|
847
|
+
*
|
|
848
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
849
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
850
|
+
*/
|
|
851
|
+
|
|
852
|
+
[data-theme='impulse-still-water'] .badge-variant--default {
|
|
853
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
854
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
855
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
856
|
+
--recipe-border: var(--tone-neutral-border);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
[data-theme='impulse-still-water'] :is(.badge-variant--info, .chip--info) {
|
|
860
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
861
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
862
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
863
|
+
--recipe-border: var(--tone-accent-border);
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
[data-theme='impulse-still-water'] :is(.badge-variant--success, .chip--success) {
|
|
867
|
+
--recipe-soft: var(--tone-success-soft);
|
|
868
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
869
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
870
|
+
--recipe-border: var(--tone-success-border);
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
[data-theme='impulse-still-water'] :is(.badge-variant--warning, .chip--warning) {
|
|
874
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
875
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
876
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
877
|
+
--recipe-border: var(--tone-warning-border);
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
[data-theme='impulse-still-water'] :is(.badge-variant--danger, .chip--danger) {
|
|
881
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
882
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
883
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
884
|
+
--recipe-border: var(--tone-danger-border);
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
[data-theme='impulse-still-water']
|
|
888
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
889
|
+
border-color: var(--recipe-border);
|
|
890
|
+
background-color: var(--recipe-soft);
|
|
891
|
+
color: var(--recipe-on-soft);
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
[data-theme='impulse-still-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
895
|
+
border-color: var(--border-default);
|
|
896
|
+
background: transparent;
|
|
897
|
+
color: var(--text-default);
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
[data-theme='impulse-still-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
901
|
+
border-color: var(--recipe-border);
|
|
902
|
+
background: var(--surface-hover);
|
|
903
|
+
color: var(--text-strong);
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
[data-theme='impulse-still-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
907
|
+
border-color: var(--recipe-border);
|
|
908
|
+
background: var(--recipe-soft);
|
|
909
|
+
color: var(--recipe-on-soft);
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
[data-theme='impulse-still-water'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
913
|
+
border-color: var(--recipe-border);
|
|
914
|
+
background: var(--recipe-soft-hover);
|
|
915
|
+
color: var(--recipe-on-soft);
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
919
|
+
[data-theme='impulse-still-water'] .chip.chip--default {
|
|
920
|
+
--recipe-soft: var(--selected-bg);
|
|
921
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
922
|
+
--recipe-on-soft: var(--selected-fg);
|
|
923
|
+
--recipe-border: var(--selected-border);
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
[data-theme='nutritrack-fresh-market']{color-scheme:light;--font-body:'Outfit', 'Inter', sans-serif;--font-display:'Bricolage Grotesque', 'Outfit', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:700;--display-size:var(--font-size-md);--display-transform:none;--display-tracking:-0.01em;--label-weight:500;--label-transform:none;--label-tracking:normal;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(52, 199, 89, 0.1) 0%, transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(251, 179, 64, 0.11) 0%, transparent 65%);--surface-canvas:#f3f7f0;--surface-card:#ffffff;--surface-raised:#ffffff;--surface-raised-alt:#f2f7f1;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#ffffff;--surface-sunken:#dfe9de;--control-hover:#e7f0e6;--surface-hover:color-mix(in oklab, #2f9e55 8%, transparent);--surface-stripe:#f7faf6;--rating-empty:color-mix(in oklab, #dfe9de 85%, #0f1d14);--surface-selected:color-mix(in oklab, #2f9e55 18%, transparent);--surface-blur:none;--text-strong:#0f1d14;--text-default:#1f3126;--text-soft:#3a4d41;--text-muted:#55665b;--text-subtle:#83928a;--text-link:#1b6d36;--text-link-hover:#124d26;--border-subtle:rgba(15, 29, 20, 0.08);--border-default:rgba(15, 29, 20, 0.14);--border-strong:rgba(15, 29, 20, 0.14);--border-card:rgba(15, 29, 20, 0.09);--border-card-hover:rgba(31, 122, 61, 0.4);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #0f1d14);--field-fg:#1f3126;--field-border:rgba(15, 29, 20, 0.2);--field-border-hover:#1f7a3d;--field-border-focus:#2f9e55;--field-placeholder:#83928a;--field-label:#55665b;--field-ring:color-mix(in oklab, #2f9e55 24%, transparent);--tone-neutral-solid:#0f1d14;--tone-neutral-solid-hover:color-mix(in oklab, #0f1d14 70%, #1f3126);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e7f0e6;--tone-neutral-soft-hover:color-mix(in oklab, #e7f0e6 92%, #0f1d14);--tone-neutral-on-soft:#0f1d14;--tone-neutral-border:rgba(15, 29, 20, 0.14);--tone-neutral-text:#3a4d41;--tone-accent-solid:#1f7a3d;--tone-accent-mark:#2f9e55;--tone-accent-solid-hover:#18642f;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #2f9e55 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #2f9e55 24%, transparent);--tone-accent-on-soft:#1b6d36;--tone-accent-border:color-mix(in oklab, #2f9e55 40%, transparent);--tone-accent-text:#1b6d36;--tone-success-solid:#0f7668;--tone-success-mark:#14a08c;--tone-success-solid-hover:#0b5f54;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #14a08c 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #14a08c 24%, transparent);--tone-success-on-soft:#0d6a5d;--tone-success-border:color-mix(in oklab, #14a08c 40%, transparent);--tone-success-text:#0d6a5d;--tone-warning-solid:#b45309;--tone-warning-mark:#f59e0b;--tone-warning-solid-hover:#92400e;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #f59e0b 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #f59e0b 24%, transparent);--tone-warning-on-soft:#9a4708;--tone-warning-border:color-mix(in oklab, #f59e0b 40%, transparent);--tone-warning-text:#9a4708;--tone-danger-solid:#c0283f;--tone-danger-mark:#e5485f;--tone-danger-solid-hover:#a11f34;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #e5485f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #e5485f 24%, transparent);--tone-danger-on-soft:#b0243a;--tone-danger-border:color-mix(in oklab, #e5485f 40%, transparent);--tone-danger-text:#b0243a;--accent-glow:#5fd98a;--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, #0f1d14 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #0f1d14 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(15, 29, 20, 0.06);--shadow-md:0 1px 2px rgba(15, 29, 20, 0.06), 0 10px 26px -14px rgba(15, 29, 20, 0.2);--shadow-lg:0 24px 60px rgba(15, 29, 20, 0.2);--scrim:color-mix(in oklab, #0f1d14 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.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)}
|
|
927
|
+
/*
|
|
928
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
929
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
930
|
+
* "success" chip and a success toast carry the same three colours.
|
|
931
|
+
*
|
|
932
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
933
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
934
|
+
*/
|
|
935
|
+
|
|
936
|
+
[data-theme='nutritrack-fresh-market'] .badge-variant--default {
|
|
937
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
938
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
939
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
940
|
+
--recipe-border: var(--tone-neutral-border);
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
[data-theme='nutritrack-fresh-market'] :is(.badge-variant--info, .chip--info) {
|
|
944
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
945
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
946
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
947
|
+
--recipe-border: var(--tone-accent-border);
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
[data-theme='nutritrack-fresh-market'] :is(.badge-variant--success, .chip--success) {
|
|
951
|
+
--recipe-soft: var(--tone-success-soft);
|
|
952
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
953
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
954
|
+
--recipe-border: var(--tone-success-border);
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
[data-theme='nutritrack-fresh-market'] :is(.badge-variant--warning, .chip--warning) {
|
|
958
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
959
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
960
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
961
|
+
--recipe-border: var(--tone-warning-border);
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
[data-theme='nutritrack-fresh-market'] :is(.badge-variant--danger, .chip--danger) {
|
|
965
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
966
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
967
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
968
|
+
--recipe-border: var(--tone-danger-border);
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
[data-theme='nutritrack-fresh-market']
|
|
972
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
973
|
+
border-color: var(--recipe-border);
|
|
974
|
+
background-color: var(--recipe-soft);
|
|
975
|
+
color: var(--recipe-on-soft);
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
[data-theme='nutritrack-fresh-market'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
979
|
+
border-color: var(--border-default);
|
|
980
|
+
background: transparent;
|
|
981
|
+
color: var(--text-default);
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
[data-theme='nutritrack-fresh-market'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
985
|
+
border-color: var(--recipe-border);
|
|
986
|
+
background: var(--surface-hover);
|
|
987
|
+
color: var(--text-strong);
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
[data-theme='nutritrack-fresh-market'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
991
|
+
border-color: var(--recipe-border);
|
|
992
|
+
background: var(--recipe-soft);
|
|
993
|
+
color: var(--recipe-on-soft);
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
[data-theme='nutritrack-fresh-market'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
997
|
+
border-color: var(--recipe-border);
|
|
998
|
+
background: var(--recipe-soft-hover);
|
|
999
|
+
color: var(--recipe-on-soft);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
1003
|
+
[data-theme='nutritrack-fresh-market'] .chip.chip--default {
|
|
1004
|
+
--recipe-soft: var(--selected-bg);
|
|
1005
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
1006
|
+
--recipe-on-soft: var(--selected-fg);
|
|
1007
|
+
--recipe-border: var(--selected-border);
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
[data-theme='nutritrack-verdant']{color-scheme:dark;--font-body:'Outfit', 'Inter', sans-serif;--font-display:'Bricolage Grotesque', 'Outfit', 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:500;--label-transform:none;--label-tracking:normal;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(95, 217, 138, 0.1) 0%, transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(251, 179, 64, 0.07) 0%, transparent 65%);--surface-canvas:#0b1310;--surface-card:#131f19;--surface-raised:#0f1a14;--surface-raised-alt:#1a2921;--surface-overlay:#1a2820;--button-fill:#1c2b23;--surface-overlay-card:#14211a;--surface-sunken:#1f3027;--control-hover:#203229;--surface-hover:color-mix(in oklab, #5fd98a 8%, transparent);--surface-stripe:#16231c;--rating-empty:color-mix(in oklab, #1f3027 85%, #f2fff4);--surface-selected:color-mix(in oklab, #5fd98a 18%, transparent);--surface-blur:none;--text-strong:#f2fff4;--text-default:#d8e8de;--text-soft:#b3c9bd;--text-muted:#88a294;--text-subtle:#64796d;--text-link:#6ee09a;--text-link-hover:#a5f0c0;--border-subtle:#22332a;--border-default:#283a30;--border-strong:#395045;--border-card:#22332a;--border-card-hover:rgba(95, 217, 138, 0.45);--field-bg:#0f1a14;--field-bg-focus:#0f1a14;--field-bg-disabled:color-mix(in oklab, #0f1a14 94%, #f2fff4);--field-fg:#d8e8de;--field-border:#2c4035;--field-border-hover:#5fd98a;--field-border-focus:#5fd98a;--field-placeholder:#64796d;--field-label:#88a294;--field-ring:color-mix(in oklab, #5fd98a 24%, transparent);--tone-neutral-solid:#f2fff4;--tone-neutral-solid-hover:color-mix(in oklab, #f2fff4 70%, #d8e8de);--tone-neutral-on-solid:#04140a;--tone-neutral-soft:#203229;--tone-neutral-soft-hover:color-mix(in oklab, #203229 92%, #f2fff4);--tone-neutral-on-soft:#f2fff4;--tone-neutral-border:#283a30;--tone-neutral-text:#b3c9bd;--tone-accent-solid:#4cc777;--tone-accent-mark:#5fd98a;--tone-accent-solid-hover:#66d68d;--tone-accent-on-solid:#04140a;--tone-accent-soft:color-mix(in oklab, #5fd98a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #5fd98a 24%, transparent);--tone-accent-on-soft:#6ee09a;--tone-accent-border:color-mix(in oklab, #5fd98a 40%, transparent);--tone-accent-text:#6ee09a;--tone-success-solid:#3cc3b4;--tone-success-mark:#56d0c4;--tone-success-solid-hover:#58d0c3;--tone-success-on-solid:#04140a;--tone-success-soft:color-mix(in oklab, #56d0c4 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #56d0c4 24%, transparent);--tone-success-on-soft:#6fdccf;--tone-success-border:color-mix(in oklab, #56d0c4 40%, transparent);--tone-success-text:#6fdccf;--tone-warning-solid:#fbb340;--tone-warning-mark:#fbb340;--tone-warning-solid-hover:#fcc260;--tone-warning-on-solid:#04140a;--tone-warning-soft:color-mix(in oklab, #fbb340 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #fbb340 24%, transparent);--tone-warning-on-soft:#fcc461;--tone-warning-border:color-mix(in oklab, #fbb340 40%, transparent);--tone-warning-text:#fcc461;--tone-danger-solid:#fb7185;--tone-danger-mark:#fb7185;--tone-danger-solid-hover:#fd8a9a;--tone-danger-on-solid:#04140a;--tone-danger-soft:color-mix(in oklab, #fb7185 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #fb7185 24%, transparent);--tone-danger-on-soft:#fd8a9a;--tone-danger-border:color-mix(in oklab, #fb7185 40%, transparent);--tone-danger-text:#fd8a9a;--accent-glow:#9bf0b8;--selected-bg:var(--tone-accent-solid);--selected-bg-hover:var(--tone-accent-solid-hover);--selected-fg:var(--tone-accent-on-solid);--selected-border:var(--tone-accent-solid);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(216, 232, 222, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 12px 30px -14px rgba(0, 0, 0, 0.7);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f2fff4 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: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)}
|
|
1011
|
+
/*
|
|
1012
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
1013
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
1014
|
+
* "success" chip and a success toast carry the same three colours.
|
|
1015
|
+
*
|
|
1016
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
1017
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
1018
|
+
*/
|
|
1019
|
+
|
|
1020
|
+
[data-theme='nutritrack-verdant'] .badge-variant--default {
|
|
1021
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
1022
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
1023
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
1024
|
+
--recipe-border: var(--tone-neutral-border);
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
[data-theme='nutritrack-verdant'] :is(.badge-variant--info, .chip--info) {
|
|
1028
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
1029
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
1030
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
1031
|
+
--recipe-border: var(--tone-accent-border);
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
[data-theme='nutritrack-verdant'] :is(.badge-variant--success, .chip--success) {
|
|
1035
|
+
--recipe-soft: var(--tone-success-soft);
|
|
1036
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
1037
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
1038
|
+
--recipe-border: var(--tone-success-border);
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
[data-theme='nutritrack-verdant'] :is(.badge-variant--warning, .chip--warning) {
|
|
1042
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
1043
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
1044
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
1045
|
+
--recipe-border: var(--tone-warning-border);
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
[data-theme='nutritrack-verdant'] :is(.badge-variant--danger, .chip--danger) {
|
|
1049
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
1050
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
1051
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
1052
|
+
--recipe-border: var(--tone-danger-border);
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
[data-theme='nutritrack-verdant']
|
|
1056
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
1057
|
+
border-color: var(--recipe-border);
|
|
1058
|
+
background-color: var(--recipe-soft);
|
|
1059
|
+
color: var(--recipe-on-soft);
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1062
|
+
[data-theme='nutritrack-verdant'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
1063
|
+
border-color: var(--border-default);
|
|
1064
|
+
background: transparent;
|
|
1065
|
+
color: var(--text-default);
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
[data-theme='nutritrack-verdant'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
1069
|
+
border-color: var(--recipe-border);
|
|
1070
|
+
background: var(--surface-hover);
|
|
1071
|
+
color: var(--text-strong);
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
[data-theme='nutritrack-verdant'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
1075
|
+
border-color: var(--recipe-border);
|
|
1076
|
+
background: var(--recipe-soft);
|
|
1077
|
+
color: var(--recipe-on-soft);
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
[data-theme='nutritrack-verdant'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
1081
|
+
border-color: var(--recipe-border);
|
|
1082
|
+
background: var(--recipe-soft-hover);
|
|
1083
|
+
color: var(--recipe-on-soft);
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
1087
|
+
[data-theme='nutritrack-verdant'] .chip.chip--default {
|
|
1088
|
+
--recipe-soft: var(--selected-bg);
|
|
1089
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
1090
|
+
--recipe-on-soft: var(--selected-fg);
|
|
1091
|
+
--recipe-border: var(--selected-border);
|
|
1092
|
+
}
|
|
1093
|
+
|
|
170
1094
|
[data-theme='pocket-chip']{color-scheme:dark;--font-body:'Manrope', system-ui, sans-serif;--font-display:'Sora', 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-lg);--display-transform:none;--display-tracking:-0.01em;--label-weight:600;--label-transform:none;--label-tracking:0.02em;--header-weight:600;--canvas-layers:linear-gradient(160deg, #191c21 0%, #121417 60%, #0e1013 100%);--surface-canvas:#121417;--surface-card:#1a1d22;--surface-raised:#15171b;--surface-raised-alt:#20242a;--surface-overlay:#21252b;--button-fill:#22262d;--surface-overlay-card:#1a1d22;--surface-sunken:#262a31;--control-hover:#272b32;--surface-hover:color-mix(in oklab, #e0b25a 8%, transparent);--surface-stripe:#1c1f24;--rating-empty:color-mix(in oklab, #262a31 85%, #f3f1ec);--surface-selected:color-mix(in oklab, #e0b25a 18%, transparent);--surface-blur:none;--text-strong:#f3f1ec;--text-default:#dcd9d2;--text-soft:#bdb9b0;--text-muted:#9a968d;--text-subtle:#77736b;--text-link:#e0b25a;--text-link-hover:#efcb85;--border-subtle:rgba(243, 241, 236, 0.08);--border-default:rgba(243, 241, 236, 0.14);--border-strong:rgba(243, 241, 236, 0.14);--border-card:rgba(243, 241, 236, 0.08);--border-card-hover:rgba(214, 166, 74, 0.45);--field-bg:#15171b;--field-bg-focus:#15171b;--field-bg-disabled:color-mix(in oklab, #15171b 94%, #f3f1ec);--field-fg:#dcd9d2;--field-border:rgba(243, 241, 236, 0.16);--field-border-hover:#d6a64a;--field-border-focus:#e0b25a;--field-placeholder:#77736b;--field-label:#9a968d;--field-ring:color-mix(in oklab, #e0b25a 24%, transparent);--tone-neutral-solid:#f3f1ec;--tone-neutral-solid-hover:color-mix(in oklab, #f3f1ec 70%, #dcd9d2);--tone-neutral-on-solid:#17130a;--tone-neutral-soft:#272b32;--tone-neutral-soft-hover:color-mix(in oklab, #272b32 92%, #f3f1ec);--tone-neutral-on-soft:#f3f1ec;--tone-neutral-border:rgba(243, 241, 236, 0.14);--tone-neutral-text:#bdb9b0;--tone-accent-solid:#d6a64a;--tone-accent-mark:#e0b25a;--tone-accent-solid-hover:#e2b862;--tone-accent-on-solid:#17130a;--tone-accent-soft:color-mix(in oklab, #e0b25a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #e0b25a 24%, transparent);--tone-accent-on-soft:#e0b25a;--tone-accent-border:color-mix(in oklab, #e0b25a 40%, transparent);--tone-accent-text:#e0b25a;--tone-success-solid:#5cbf86;--tone-success-mark:#5cbf86;--tone-success-solid-hover:#74cb98;--tone-success-on-solid:#17130a;--tone-success-soft:color-mix(in oklab, #5cbf86 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #5cbf86 24%, transparent);--tone-success-on-soft:#7ccf9f;--tone-success-border:color-mix(in oklab, #5cbf86 40%, transparent);--tone-success-text:#7ccf9f;--tone-warning-solid:#f09060;--tone-warning-mark:#f09060;--tone-warning-solid-hover:#f4a47b;--tone-warning-on-solid:#17130a;--tone-warning-soft:color-mix(in oklab, #f09060 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #f09060 24%, transparent);--tone-warning-on-soft:#f5a57e;--tone-warning-border:color-mix(in oklab, #f09060 40%, transparent);--tone-warning-text:#f5a57e;--tone-danger-solid:#ee6b6b;--tone-danger-mark:#ee6b6b;--tone-danger-solid-hover:#f28585;--tone-danger-on-solid:#17130a;--tone-danger-soft:color-mix(in oklab, #ee6b6b 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #ee6b6b 24%, transparent);--tone-danger-on-soft:#f38c8c;--tone-danger-border:color-mix(in oklab, #ee6b6b 40%, transparent);--tone-danger-text:#f38c8c;--accent-glow:#c97b4a;--selected-bg:var(--tone-accent-solid);--selected-bg-hover:var(--tone-accent-solid-hover);--selected-fg:var(--tone-accent-on-solid);--selected-border:var(--tone-accent-solid);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(243, 241, 236, 0.04) inset, 0 2px 6px rgba(0, 0, 0, 0.35);--shadow-md:0 14px 32px -16px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(243, 241, 236, 0.04) inset;--shadow-lg:0 28px 72px rgba(0, 0, 0, 0.7);--scrim:color-mix(in oklab, #f3f1ec 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: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)}
|
|
171
1095
|
/*
|
|
172
1096
|
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
@@ -177,81 +1101,165 @@
|
|
|
177
1101
|
* the same components. Once the classic themes are retired they move into the lib.
|
|
178
1102
|
*/
|
|
179
1103
|
|
|
180
|
-
[data-theme='pocket-chip'] .badge-variant--default {
|
|
1104
|
+
[data-theme='pocket-chip'] .badge-variant--default {
|
|
1105
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
1106
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
1107
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
1108
|
+
--recipe-border: var(--tone-neutral-border);
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
[data-theme='pocket-chip'] :is(.badge-variant--info, .chip--info) {
|
|
1112
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
1113
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
1114
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
1115
|
+
--recipe-border: var(--tone-accent-border);
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
[data-theme='pocket-chip'] :is(.badge-variant--success, .chip--success) {
|
|
1119
|
+
--recipe-soft: var(--tone-success-soft);
|
|
1120
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
1121
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
1122
|
+
--recipe-border: var(--tone-success-border);
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
[data-theme='pocket-chip'] :is(.badge-variant--warning, .chip--warning) {
|
|
1126
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
1127
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
1128
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
1129
|
+
--recipe-border: var(--tone-warning-border);
|
|
1130
|
+
}
|
|
1131
|
+
|
|
1132
|
+
[data-theme='pocket-chip'] :is(.badge-variant--danger, .chip--danger) {
|
|
1133
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
1134
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
1135
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
1136
|
+
--recipe-border: var(--tone-danger-border);
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
[data-theme='pocket-chip']
|
|
1140
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
1141
|
+
border-color: var(--recipe-border);
|
|
1142
|
+
background-color: var(--recipe-soft);
|
|
1143
|
+
color: var(--recipe-on-soft);
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
[data-theme='pocket-chip'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
1147
|
+
border-color: var(--border-default);
|
|
1148
|
+
background: transparent;
|
|
1149
|
+
color: var(--text-default);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
[data-theme='pocket-chip'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
1153
|
+
border-color: var(--recipe-border);
|
|
1154
|
+
background: var(--surface-hover);
|
|
1155
|
+
color: var(--text-strong);
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
[data-theme='pocket-chip'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
1159
|
+
border-color: var(--recipe-border);
|
|
1160
|
+
background: var(--recipe-soft);
|
|
1161
|
+
color: var(--recipe-on-soft);
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
[data-theme='pocket-chip'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
1165
|
+
border-color: var(--recipe-border);
|
|
1166
|
+
background: var(--recipe-soft-hover);
|
|
1167
|
+
color: var(--recipe-on-soft);
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
1171
|
+
[data-theme='pocket-chip'] .chip.chip--default {
|
|
1172
|
+
--recipe-soft: var(--selected-bg);
|
|
1173
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
1174
|
+
--recipe-on-soft: var(--selected-fg);
|
|
1175
|
+
--recipe-border: var(--selected-border);
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
[data-theme='pocket-receipt']{color-scheme:light;--font-body:'IBM Plex Sans', system-ui, sans-serif;--font-display:'IBM Plex Mono', ui-monospace, monospace;--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:uppercase;--display-tracking:0.04em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:none;--surface-canvas:#efefeb;--surface-card:#fbfbf8;--surface-raised:#ffffff;--surface-raised-alt:#f3f3ee;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#fbfbf8;--surface-sunken:#e2e2dc;--control-hover:#e9e9e3;--surface-hover:color-mix(in oklab, #0b6e6e 8%, transparent);--surface-stripe:#f6f6f2;--rating-empty:color-mix(in oklab, #e2e2dc 85%, #121212);--surface-selected:color-mix(in oklab, #0b6e6e 18%, transparent);--surface-blur:none;--text-strong:#121212;--text-default:#262626;--text-soft:#404040;--text-muted:#5a5a5a;--text-subtle:#858585;--text-link:#0a6464;--text-link-hover:#064848;--border-subtle:rgba(18, 18, 18, 0.1);--border-default:rgba(18, 18, 18, 0.18);--border-strong:rgba(18, 18, 18, 0.18);--border-card:rgba(18, 18, 18, 0.12);--border-card-hover:rgba(18, 18, 18, 0.35);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #121212);--field-fg:#262626;--field-border:rgba(18, 18, 18, 0.24);--field-border-hover:#121212;--field-border-focus:#0b6e6e;--field-placeholder:#858585;--field-label:#5a5a5a;--field-ring:color-mix(in oklab, #0b6e6e 24%, transparent);--tone-neutral-solid:#121212;--tone-neutral-solid-hover:color-mix(in oklab, #121212 70%, #262626);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e9e9e3;--tone-neutral-soft-hover:color-mix(in oklab, #e9e9e3 92%, #121212);--tone-neutral-on-soft:#121212;--tone-neutral-border:rgba(18, 18, 18, 0.18);--tone-neutral-text:#404040;--tone-accent-solid:#0b6e6e;--tone-accent-mark:#0b6e6e;--tone-accent-solid-hover:#085858;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #0b6e6e 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #0b6e6e 24%, transparent);--tone-accent-on-soft:#0a6464;--tone-accent-border:color-mix(in oklab, #0b6e6e 40%, transparent);--tone-accent-text:#0a6464;--tone-success-solid:#1e7a3c;--tone-success-mark:#1e7a3c;--tone-success-solid-hover:#18622f;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #1e7a3c 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #1e7a3c 24%, transparent);--tone-success-on-soft:#18632f;--tone-success-border:color-mix(in oklab, #1e7a3c 40%, transparent);--tone-success-text:#18632f;--tone-warning-solid:#9c5a00;--tone-warning-mark:#9c5a00;--tone-warning-solid-hover:#7f4900;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #9c5a00 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #9c5a00 24%, transparent);--tone-warning-on-soft:#874e00;--tone-warning-border:color-mix(in oklab, #9c5a00 40%, transparent);--tone-warning-text:#874e00;--tone-danger-solid:#b42318;--tone-danger-mark:#b42318;--tone-danger-solid-hover:#931c13;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #b42318 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #b42318 24%, transparent);--tone-danger-on-soft:#a3201a;--tone-danger-border:color-mix(in oklab, #b42318 40%, transparent);--tone-danger-text:#a3201a;--accent-glow:#28a8a0;--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, #121212 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #121212 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(18, 18, 18, 0.06);--shadow-md:0 1px 0 rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.08);--shadow-lg:0 18px 48px rgba(18, 18, 18, 0.22);--scrim:color-mix(in oklab, #121212 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-md);--modal-title-font-style:normal;--modal-title-font-weight:600;--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)}
|
|
1179
|
+
/*
|
|
1180
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
1181
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
1182
|
+
* "success" chip and a success toast carry the same three colours.
|
|
1183
|
+
*
|
|
1184
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
1185
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
1186
|
+
*/
|
|
1187
|
+
|
|
1188
|
+
[data-theme='pocket-receipt'] .badge-variant--default {
|
|
181
1189
|
--recipe-soft: var(--tone-neutral-soft);
|
|
182
1190
|
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
183
1191
|
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
184
1192
|
--recipe-border: var(--tone-neutral-border);
|
|
185
1193
|
}
|
|
186
1194
|
|
|
187
|
-
[data-theme='pocket-
|
|
1195
|
+
[data-theme='pocket-receipt'] :is(.badge-variant--info, .chip--info) {
|
|
188
1196
|
--recipe-soft: var(--tone-accent-soft);
|
|
189
1197
|
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
190
1198
|
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
191
1199
|
--recipe-border: var(--tone-accent-border);
|
|
192
1200
|
}
|
|
193
1201
|
|
|
194
|
-
[data-theme='pocket-
|
|
1202
|
+
[data-theme='pocket-receipt'] :is(.badge-variant--success, .chip--success) {
|
|
195
1203
|
--recipe-soft: var(--tone-success-soft);
|
|
196
1204
|
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
197
1205
|
--recipe-on-soft: var(--tone-success-on-soft);
|
|
198
1206
|
--recipe-border: var(--tone-success-border);
|
|
199
1207
|
}
|
|
200
1208
|
|
|
201
|
-
[data-theme='pocket-
|
|
1209
|
+
[data-theme='pocket-receipt'] :is(.badge-variant--warning, .chip--warning) {
|
|
202
1210
|
--recipe-soft: var(--tone-warning-soft);
|
|
203
1211
|
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
204
1212
|
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
205
1213
|
--recipe-border: var(--tone-warning-border);
|
|
206
1214
|
}
|
|
207
1215
|
|
|
208
|
-
[data-theme='pocket-
|
|
1216
|
+
[data-theme='pocket-receipt'] :is(.badge-variant--danger, .chip--danger) {
|
|
209
1217
|
--recipe-soft: var(--tone-danger-soft);
|
|
210
1218
|
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
211
1219
|
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
212
1220
|
--recipe-border: var(--tone-danger-border);
|
|
213
1221
|
}
|
|
214
1222
|
|
|
215
|
-
[data-theme='pocket-
|
|
1223
|
+
[data-theme='pocket-receipt']
|
|
216
1224
|
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
217
1225
|
border-color: var(--recipe-border);
|
|
218
1226
|
background-color: var(--recipe-soft);
|
|
219
1227
|
color: var(--recipe-on-soft);
|
|
220
1228
|
}
|
|
221
1229
|
|
|
222
|
-
[data-theme='pocket-
|
|
1230
|
+
[data-theme='pocket-receipt'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
223
1231
|
border-color: var(--border-default);
|
|
224
1232
|
background: transparent;
|
|
225
1233
|
color: var(--text-default);
|
|
226
1234
|
}
|
|
227
1235
|
|
|
228
|
-
[data-theme='pocket-
|
|
1236
|
+
[data-theme='pocket-receipt'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
229
1237
|
border-color: var(--recipe-border);
|
|
230
1238
|
background: var(--surface-hover);
|
|
231
1239
|
color: var(--text-strong);
|
|
232
1240
|
}
|
|
233
1241
|
|
|
234
|
-
[data-theme='pocket-
|
|
1242
|
+
[data-theme='pocket-receipt'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
235
1243
|
border-color: var(--recipe-border);
|
|
236
1244
|
background: var(--recipe-soft);
|
|
237
1245
|
color: var(--recipe-on-soft);
|
|
238
1246
|
}
|
|
239
1247
|
|
|
240
|
-
[data-theme='pocket-
|
|
1248
|
+
[data-theme='pocket-receipt'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
241
1249
|
border-color: var(--recipe-border);
|
|
242
1250
|
background: var(--recipe-soft-hover);
|
|
243
1251
|
color: var(--recipe-on-soft);
|
|
244
1252
|
}
|
|
245
1253
|
|
|
246
1254
|
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
247
|
-
[data-theme='pocket-
|
|
1255
|
+
[data-theme='pocket-receipt'] .chip.chip--default {
|
|
248
1256
|
--recipe-soft: var(--selected-bg);
|
|
249
1257
|
--recipe-soft-hover: var(--selected-bg-hover);
|
|
250
1258
|
--recipe-on-soft: var(--selected-fg);
|
|
251
1259
|
--recipe-border: var(--selected-border);
|
|
252
1260
|
}
|
|
253
1261
|
|
|
254
|
-
[data-theme='pocket-receipt']{color-scheme:light;--font-body:'IBM Plex Sans', system-ui, sans-serif;--font-display:'IBM Plex Mono', ui-monospace, monospace;--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:uppercase;--display-tracking:0.04em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.1em;--header-weight:600;--canvas-layers:none;--surface-canvas:#efefeb;--surface-card:#fbfbf8;--surface-raised:#ffffff;--surface-raised-alt:#f3f3ee;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:#fbfbf8;--surface-sunken:#e2e2dc;--control-hover:#e9e9e3;--surface-hover:color-mix(in oklab, #0b6e6e 8%, transparent);--surface-stripe:#f6f6f2;--rating-empty:color-mix(in oklab, #e2e2dc 85%, #121212);--surface-selected:color-mix(in oklab, #0b6e6e 18%, transparent);--surface-blur:none;--text-strong:#121212;--text-default:#262626;--text-soft:#404040;--text-muted:#5a5a5a;--text-subtle:#858585;--text-link:#0a6464;--text-link-hover:#064848;--border-subtle:rgba(18, 18, 18, 0.1);--border-default:rgba(18, 18, 18, 0.18);--border-strong:rgba(18, 18, 18, 0.18);--border-card:rgba(18, 18, 18, 0.12);--border-card-hover:rgba(18, 18, 18, 0.35);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #121212);--field-fg:#262626;--field-border:rgba(18, 18, 18, 0.24);--field-border-hover:#121212;--field-border-focus:#0b6e6e;--field-placeholder:#858585;--field-label:#5a5a5a;--field-ring:color-mix(in oklab, #0b6e6e 24%, transparent);--tone-neutral-solid:#121212;--tone-neutral-solid-hover:color-mix(in oklab, #121212 70%, #262626);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e9e9e3;--tone-neutral-soft-hover:color-mix(in oklab, #e9e9e3 92%, #121212);--tone-neutral-on-soft:#121212;--tone-neutral-border:rgba(18, 18, 18, 0.18);--tone-neutral-text:#404040;--tone-accent-solid:#0b6e6e;--tone-accent-mark:#0b6e6e;--tone-accent-solid-hover:#085858;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #0b6e6e 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #0b6e6e 24%, transparent);--tone-accent-on-soft:#0a6464;--tone-accent-border:color-mix(in oklab, #0b6e6e 40%, transparent);--tone-accent-text:#0a6464;--tone-success-solid:#1e7a3c;--tone-success-mark:#1e7a3c;--tone-success-solid-hover:#18622f;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #1e7a3c 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #1e7a3c 24%, transparent);--tone-success-on-soft:#18632f;--tone-success-border:color-mix(in oklab, #1e7a3c 40%, transparent);--tone-success-text:#18632f;--tone-warning-solid:#9c5a00;--tone-warning-mark:#9c5a00;--tone-warning-solid-hover:#7f4900;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #9c5a00 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #9c5a00 24%, transparent);--tone-warning-on-soft:#874e00;--tone-warning-border:color-mix(in oklab, #9c5a00 40%, transparent);--tone-warning-text:#874e00;--tone-danger-solid:#b42318;--tone-danger-mark:#b42318;--tone-danger-solid-hover:#931c13;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #b42318 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #b42318 24%, transparent);--tone-danger-on-soft:#a3201a;--tone-danger-border:color-mix(in oklab, #b42318 40%, transparent);--tone-danger-text:#a3201a;--accent-glow:#28a8a0;--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, #121212 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #121212 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(18, 18, 18, 0.06);--shadow-md:0 1px 0 rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.08);--shadow-lg:0 18px 48px rgba(18, 18, 18, 0.22);--scrim:color-mix(in oklab, #121212 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-md);--modal-title-font-style:normal;--modal-title-font-weight:600;--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)}
|
|
1262
|
+
[data-theme='pulse-ivory']{color-scheme:light;--font-body:'Lato', 'Avenir Next', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:700;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:700;--canvas-layers:radial-gradient(50% 45% at 100% 0%, rgba(197, 160, 40, 0.1) 0%, transparent 65%), radial-gradient(45% 50% at 0% 100%, rgba(30, 58, 95, 0.08) 0%, transparent 65%), radial-gradient(110% 90% at 20% 0%, #faf8f2 0%, #f0ede2 50%, #e8e2d2 100%);--surface-canvas:#f4f1e8;--surface-card:rgba(255, 255, 255, 0.94);--surface-raised:#fbfaf5;--surface-raised-alt:rgba(248, 246, 240, 0.6);--surface-overlay:#fdfcf8;--button-fill:#f4f1e8;--surface-overlay-card:rgba(255, 255, 255, 0.94);--surface-sunken:#e8e2d2;--control-hover:#eee8d0;--surface-hover:color-mix(in oklab, #b08a1e 8%, transparent);--surface-stripe:#f8f6ef;--rating-empty:color-mix(in oklab, #e8e2d2 85%, #0c1020);--surface-selected:color-mix(in oklab, #b08a1e 18%, transparent);--surface-blur:blur(20px) saturate(1.3);--text-strong:#0c1020;--text-default:#1e2433;--text-soft:#3a4560;--text-muted:#5c6270;--text-subtle:#858b99;--text-link:#1e3a5f;--text-link-hover:#7d6012;--border-subtle:rgba(30, 36, 51, 0.11);--border-default:rgba(30, 36, 51, 0.18);--border-strong:rgba(30, 36, 51, 0.18);--border-card:rgba(255, 255, 255, 0.85);--border-card-hover:rgba(197, 160, 40, 0.55);--field-bg:#fbfaf5;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #fbfaf5 94%, #0c1020);--field-fg:#1e2433;--field-border:rgba(30, 36, 51, 0.22);--field-border-hover:#1e3a5f;--field-border-focus:#b08a1e;--field-placeholder:#858b99;--field-label:#5c6270;--field-ring:color-mix(in oklab, #b08a1e 24%, transparent);--tone-neutral-solid:#0c1020;--tone-neutral-solid-hover:color-mix(in oklab, #0c1020 70%, #1e2433);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#eee8d0;--tone-neutral-soft-hover:color-mix(in oklab, #eee8d0 92%, #0c1020);--tone-neutral-on-soft:#0c1020;--tone-neutral-border:rgba(30, 36, 51, 0.18);--tone-neutral-text:#3a4560;--tone-accent-solid:#1e3a5f;--tone-accent-mark:#b08a1e;--tone-accent-solid-hover:#162c49;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #b08a1e 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #b08a1e 24%, transparent);--tone-accent-on-soft:#1e3a5f;--tone-accent-border:color-mix(in oklab, #b08a1e 40%, transparent);--tone-accent-text:#1e3a5f;--tone-success-solid:#2e7d3e;--tone-success-mark:#2e7d3e;--tone-success-solid-hover:#256832;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #2e7d3e 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #2e7d3e 24%, transparent);--tone-success-on-soft:#2a7239;--tone-success-border:color-mix(in oklab, #2e7d3e 40%, transparent);--tone-success-text:#2a7239;--tone-warning-solid:#93690f;--tone-warning-mark:#c5a028;--tone-warning-solid-hover:#7a570c;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #c5a028 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #c5a028 24%, transparent);--tone-warning-on-soft:#7c5c0b;--tone-warning-border:color-mix(in oklab, #c5a028 40%, transparent);--tone-warning-text:#7c5c0b;--tone-danger-solid:#9f2f2f;--tone-danger-mark:#9f2f2f;--tone-danger-solid-hover:#842525;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #9f2f2f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #9f2f2f 24%, transparent);--tone-danger-on-soft:#922b2b;--tone-danger-border:color-mix(in oklab, #9f2f2f 40%, transparent);--tone-danger-text:#922b2b;--accent-glow:#e8c04a;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, rgba(12, 16, 32, 0.14) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(12, 16, 32, 0.14) 62%, transparent);--shadow-sm:0 1px 2px color-mix(in oklab, #0c1020 12%, transparent);--shadow-md:0 8px 24px color-mix(in oklab, #0c1020 14%, transparent);--shadow-lg:0 24px 64px color-mix(in oklab, #0c1020 26%, transparent);--scrim:rgba(12, 16, 32, 0.38);--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:#1e3a5f;--toast-info-border-color:color-mix(in oklab, #1e3a5f 75%, #ffffff);--toast-info-color:#ffffff;--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:#2e7d3e;--toast-success-border-color:color-mix(in oklab, #2e7d3e 75%, #ffffff);--toast-success-color:#ffffff;--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:#93690f;--toast-warning-border-color:color-mix(in oklab, #93690f 75%, #ffffff);--toast-warning-color:#ffffff;--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:#9f2f2f;--toast-danger-border-color:color-mix(in oklab, #9f2f2f 75%, #ffffff);--toast-danger-color:#ffffff;--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:0.15em;--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)}
|
|
255
1263
|
/*
|
|
256
1264
|
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
257
1265
|
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
@@ -261,74 +1269,158 @@
|
|
|
261
1269
|
* the same components. Once the classic themes are retired they move into the lib.
|
|
262
1270
|
*/
|
|
263
1271
|
|
|
264
|
-
[data-theme='
|
|
1272
|
+
[data-theme='pulse-ivory'] .badge-variant--default {
|
|
265
1273
|
--recipe-soft: var(--tone-neutral-soft);
|
|
266
1274
|
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
267
1275
|
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
268
1276
|
--recipe-border: var(--tone-neutral-border);
|
|
269
1277
|
}
|
|
270
1278
|
|
|
271
|
-
[data-theme='
|
|
1279
|
+
[data-theme='pulse-ivory'] :is(.badge-variant--info, .chip--info) {
|
|
272
1280
|
--recipe-soft: var(--tone-accent-soft);
|
|
273
1281
|
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
274
1282
|
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
275
1283
|
--recipe-border: var(--tone-accent-border);
|
|
276
1284
|
}
|
|
277
1285
|
|
|
278
|
-
[data-theme='
|
|
1286
|
+
[data-theme='pulse-ivory'] :is(.badge-variant--success, .chip--success) {
|
|
279
1287
|
--recipe-soft: var(--tone-success-soft);
|
|
280
1288
|
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
281
1289
|
--recipe-on-soft: var(--tone-success-on-soft);
|
|
282
1290
|
--recipe-border: var(--tone-success-border);
|
|
283
1291
|
}
|
|
284
1292
|
|
|
285
|
-
[data-theme='
|
|
1293
|
+
[data-theme='pulse-ivory'] :is(.badge-variant--warning, .chip--warning) {
|
|
286
1294
|
--recipe-soft: var(--tone-warning-soft);
|
|
287
1295
|
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
288
1296
|
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
289
1297
|
--recipe-border: var(--tone-warning-border);
|
|
290
1298
|
}
|
|
291
1299
|
|
|
292
|
-
[data-theme='
|
|
1300
|
+
[data-theme='pulse-ivory'] :is(.badge-variant--danger, .chip--danger) {
|
|
293
1301
|
--recipe-soft: var(--tone-danger-soft);
|
|
294
1302
|
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
295
1303
|
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
296
1304
|
--recipe-border: var(--tone-danger-border);
|
|
297
1305
|
}
|
|
298
1306
|
|
|
299
|
-
[data-theme='
|
|
1307
|
+
[data-theme='pulse-ivory']
|
|
300
1308
|
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
301
1309
|
border-color: var(--recipe-border);
|
|
302
1310
|
background-color: var(--recipe-soft);
|
|
303
1311
|
color: var(--recipe-on-soft);
|
|
304
1312
|
}
|
|
305
1313
|
|
|
306
|
-
[data-theme='
|
|
1314
|
+
[data-theme='pulse-ivory'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
307
1315
|
border-color: var(--border-default);
|
|
308
1316
|
background: transparent;
|
|
309
1317
|
color: var(--text-default);
|
|
310
1318
|
}
|
|
311
1319
|
|
|
312
|
-
[data-theme='
|
|
1320
|
+
[data-theme='pulse-ivory'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
313
1321
|
border-color: var(--recipe-border);
|
|
314
1322
|
background: var(--surface-hover);
|
|
315
1323
|
color: var(--text-strong);
|
|
316
1324
|
}
|
|
317
1325
|
|
|
318
|
-
[data-theme='
|
|
1326
|
+
[data-theme='pulse-ivory'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
319
1327
|
border-color: var(--recipe-border);
|
|
320
1328
|
background: var(--recipe-soft);
|
|
321
1329
|
color: var(--recipe-on-soft);
|
|
322
1330
|
}
|
|
323
1331
|
|
|
324
|
-
[data-theme='
|
|
1332
|
+
[data-theme='pulse-ivory'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
325
1333
|
border-color: var(--recipe-border);
|
|
326
1334
|
background: var(--recipe-soft-hover);
|
|
327
1335
|
color: var(--recipe-on-soft);
|
|
328
1336
|
}
|
|
329
1337
|
|
|
330
1338
|
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
331
|
-
[data-theme='
|
|
1339
|
+
[data-theme='pulse-ivory'] .chip.chip--default {
|
|
1340
|
+
--recipe-soft: var(--selected-bg);
|
|
1341
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
1342
|
+
--recipe-on-soft: var(--selected-fg);
|
|
1343
|
+
--recipe-border: var(--selected-border);
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
[data-theme='pulse-night-chart']{color-scheme:dark;--font-body:'Lato', 'Avenir Next', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:700;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:700;--canvas-layers:radial-gradient(50% 45% at 100% 0%, rgba(217, 181, 74, 0.07) 0%, transparent 65%), radial-gradient(45% 50% at 0% 100%, rgba(60, 100, 160, 0.12) 0%, transparent 65%), linear-gradient(160deg, #0f1524 0%, #0a0e18 100%);--surface-canvas:#0c111c;--surface-card:#131a28;--surface-raised:#0f1522;--surface-raised-alt:#18202f;--surface-overlay:#1a2232;--button-fill:#1c2536;--surface-overlay-card:#141b29;--surface-sunken:#202a3c;--control-hover:#1f283a;--surface-hover:color-mix(in oklab, #d9b54a 8%, transparent);--surface-stripe:#151c2a;--rating-empty:color-mix(in oklab, #202a3c 85%, #f6f2e6);--surface-selected:color-mix(in oklab, #d9b54a 18%, transparent);--surface-blur:none;--text-strong:#f6f2e6;--text-default:#e3e3df;--text-soft:#c2c6cf;--text-muted:#9aa1b0;--text-subtle:#737c8d;--text-link:#9bbcec;--text-link-hover:#c2d6f4;--border-subtle:rgba(227, 227, 223, 0.08);--border-default:rgba(227, 227, 223, 0.13);--border-strong:rgba(227, 227, 223, 0.13);--border-card:rgba(227, 227, 223, 0.07);--border-card-hover:rgba(217, 181, 74, 0.45);--field-bg:#0f1522;--field-bg-focus:#0f1522;--field-bg-disabled:color-mix(in oklab, #0f1522 94%, #f6f2e6);--field-fg:#e3e3df;--field-border:rgba(227, 227, 223, 0.16);--field-border-hover:#d9b54a;--field-border-focus:#d9b54a;--field-placeholder:#737c8d;--field-label:#9aa1b0;--field-ring:color-mix(in oklab, #d9b54a 24%, transparent);--tone-neutral-solid:#f6f2e6;--tone-neutral-solid-hover:color-mix(in oklab, #f6f2e6 70%, #e3e3df);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#1f283a;--tone-neutral-soft-hover:color-mix(in oklab, #1f283a 92%, #f6f2e6);--tone-neutral-on-soft:#f6f2e6;--tone-neutral-border:rgba(227, 227, 223, 0.13);--tone-neutral-text:#c2c6cf;--tone-accent-solid:#2f5a93;--tone-accent-mark:#d9b54a;--tone-accent-solid-hover:#3a69a6;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #d9b54a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #d9b54a 24%, transparent);--tone-accent-on-soft:#e3c467;--tone-accent-border:color-mix(in oklab, #d9b54a 40%, transparent);--tone-accent-text:#e3c467;--tone-success-solid:#2e7a44;--tone-success-mark:#6cc58a;--tone-success-solid-hover:#378d50;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #6cc58a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #6cc58a 24%, transparent);--tone-success-on-soft:#86d19f;--tone-success-border:color-mix(in oklab, #6cc58a 40%, transparent);--tone-success-text:#86d19f;--tone-warning-solid:#8f650e;--tone-warning-mark:#e0b84e;--tone-warning-solid-hover:#a37616;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #e0b84e 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e0b84e 24%, transparent);--tone-warning-on-soft:#ecc76b;--tone-warning-border:color-mix(in oklab, #e0b84e 40%, transparent);--tone-warning-text:#ecc76b;--tone-danger-solid:#a8383a;--tone-danger-mark:#ef7f80;--tone-danger-solid-hover:#bd4547;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #ef7f80 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #ef7f80 24%, transparent);--tone-danger-on-soft:#f39697;--tone-danger-border:color-mix(in oklab, #ef7f80 40%, transparent);--tone-danger-text:#f39697;--accent-glow:#f0d27a;--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(246, 242, 230, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 12px 30px -14px rgba(0, 0, 0, 0.75);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f6f2e6 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:0.15em;--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)}
|
|
1347
|
+
/*
|
|
1348
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
1349
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
1350
|
+
* "success" chip and a success toast carry the same three colours.
|
|
1351
|
+
*
|
|
1352
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
1353
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
1354
|
+
*/
|
|
1355
|
+
|
|
1356
|
+
[data-theme='pulse-night-chart'] .badge-variant--default {
|
|
1357
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
1358
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
1359
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
1360
|
+
--recipe-border: var(--tone-neutral-border);
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
[data-theme='pulse-night-chart'] :is(.badge-variant--info, .chip--info) {
|
|
1364
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
1365
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
1366
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
1367
|
+
--recipe-border: var(--tone-accent-border);
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
[data-theme='pulse-night-chart'] :is(.badge-variant--success, .chip--success) {
|
|
1371
|
+
--recipe-soft: var(--tone-success-soft);
|
|
1372
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
1373
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
1374
|
+
--recipe-border: var(--tone-success-border);
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
[data-theme='pulse-night-chart'] :is(.badge-variant--warning, .chip--warning) {
|
|
1378
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
1379
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
1380
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
1381
|
+
--recipe-border: var(--tone-warning-border);
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
[data-theme='pulse-night-chart'] :is(.badge-variant--danger, .chip--danger) {
|
|
1385
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
1386
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
1387
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
1388
|
+
--recipe-border: var(--tone-danger-border);
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
[data-theme='pulse-night-chart']
|
|
1392
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
1393
|
+
border-color: var(--recipe-border);
|
|
1394
|
+
background-color: var(--recipe-soft);
|
|
1395
|
+
color: var(--recipe-on-soft);
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
[data-theme='pulse-night-chart'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
1399
|
+
border-color: var(--border-default);
|
|
1400
|
+
background: transparent;
|
|
1401
|
+
color: var(--text-default);
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
[data-theme='pulse-night-chart'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
1405
|
+
border-color: var(--recipe-border);
|
|
1406
|
+
background: var(--surface-hover);
|
|
1407
|
+
color: var(--text-strong);
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
[data-theme='pulse-night-chart'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
1411
|
+
border-color: var(--recipe-border);
|
|
1412
|
+
background: var(--recipe-soft);
|
|
1413
|
+
color: var(--recipe-on-soft);
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
[data-theme='pulse-night-chart'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
1417
|
+
border-color: var(--recipe-border);
|
|
1418
|
+
background: var(--recipe-soft-hover);
|
|
1419
|
+
color: var(--recipe-on-soft);
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
1423
|
+
[data-theme='pulse-night-chart'] .chip.chip--default {
|
|
332
1424
|
--recipe-soft: var(--selected-bg);
|
|
333
1425
|
--recipe-soft-hover: var(--selected-bg-hover);
|
|
334
1426
|
--recipe-on-soft: var(--selected-fg);
|
|
@@ -671,6 +1763,174 @@
|
|
|
671
1763
|
--recipe-border: var(--selected-border);
|
|
672
1764
|
}
|
|
673
1765
|
|
|
1766
|
+
[data-theme='seeds-blossom']{color-scheme:light;--font-body:'Nunito', 'Avenir Next', sans-serif;--font-display:'Fraunces', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.16em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(232, 130, 107, 0.16) 0%, transparent 65%), radial-gradient(50% 45% at 0% 100%, rgba(123, 168, 136, 0.13) 0%, transparent 65%), radial-gradient(40% 40% at 100% 100%, rgba(243, 191, 153, 0.12) 0%, transparent 60%), linear-gradient(155deg, #fef6ec 0%, #fbeadb 55%, #f5d8c2 100%);--surface-canvas:#fbeadb;--surface-card:rgba(255, 250, 244, 0.94);--surface-raised:#fff7f0;--surface-raised-alt:rgba(255, 236, 222, 0.85);--surface-overlay:#fffaf5;--button-fill:#fbeadb;--surface-overlay-card:rgba(255, 250, 244, 0.97);--surface-sunken:#f3d8c1;--control-hover:#f8e0cc;--surface-hover:color-mix(in oklab, #e8826b 8%, transparent);--surface-stripe:#fdf1e7;--rating-empty:color-mix(in oklab, #f3d8c1 85%, #2c1f1a);--surface-selected:color-mix(in oklab, #e8826b 18%, transparent);--surface-blur:blur(14px) saturate(1.3);--text-strong:#2c1f1a;--text-default:#4a3933;--text-soft:#5f4840;--text-muted:#735c54;--text-subtle:#98807a;--text-link:#ab4a33;--text-link-hover:#8f3b27;--border-subtle:rgba(120, 70, 55, 0.14);--border-default:rgba(120, 70, 55, 0.2);--border-strong:rgba(120, 70, 55, 0.2);--border-card:rgba(255, 253, 248, 0.8);--border-card-hover:rgba(232, 130, 107, 0.55);--field-bg:#fff7f0;--field-bg-focus:#fffbf7;--field-bg-disabled:color-mix(in oklab, #fff7f0 94%, #2c1f1a);--field-fg:#4a3933;--field-border:rgba(120, 70, 55, 0.26);--field-border-hover:#b24d35;--field-border-focus:#e8826b;--field-placeholder:#98807a;--field-label:#735c54;--field-ring:color-mix(in oklab, #e8826b 24%, transparent);--tone-neutral-solid:#2c1f1a;--tone-neutral-solid-hover:color-mix(in oklab, #2c1f1a 70%, #4a3933);--tone-neutral-on-solid:#fff8f2;--tone-neutral-soft:#f8e0cc;--tone-neutral-soft-hover:color-mix(in oklab, #f8e0cc 92%, #2c1f1a);--tone-neutral-on-soft:#2c1f1a;--tone-neutral-border:rgba(120, 70, 55, 0.2);--tone-neutral-text:#5f4840;--tone-accent-solid:#b24d35;--tone-accent-mark:#e8826b;--tone-accent-solid-hover:#9a412b;--tone-accent-on-solid:#fff8f2;--tone-accent-soft:color-mix(in oklab, #e8826b 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #e8826b 24%, transparent);--tone-accent-on-soft:#ab4a33;--tone-accent-border:color-mix(in oklab, #e8826b 40%, transparent);--tone-accent-text:#ab4a33;--tone-success-solid:#4a7c5b;--tone-success-mark:#689f77;--tone-success-solid-hover:#3d6a4c;--tone-success-on-solid:#fff8f2;--tone-success-soft:color-mix(in oklab, #689f77 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #689f77 24%, transparent);--tone-success-on-soft:#3f7350;--tone-success-border:color-mix(in oklab, #689f77 40%, transparent);--tone-success-text:#3f7350;--tone-warning-solid:#936214;--tone-warning-mark:#d9a24a;--tone-warning-solid-hover:#7c5210;--tone-warning-on-solid:#fff8f2;--tone-warning-soft:color-mix(in oklab, #d9a24a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #d9a24a 24%, transparent);--tone-warning-on-soft:#875a10;--tone-warning-border:color-mix(in oklab, #d9a24a 40%, transparent);--tone-warning-text:#875a10;--tone-danger-solid:#ae423d;--tone-danger-mark:#c25450;--tone-danger-solid-hover:#943632;--tone-danger-on-solid:#fff8f2;--tone-danger-soft:color-mix(in oklab, #c25450 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #c25450 24%, transparent);--tone-danger-on-soft:#a03b37;--tone-danger-border:color-mix(in oklab, #c25450 40%, transparent);--tone-danger-text:#a03b37;--accent-glow:#f39b85;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, rgba(120, 70, 55, 0.2) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(120, 70, 55, 0.2) 62%, transparent);--shadow-sm:0 1px 2px color-mix(in oklab, #2c1f1a 12%, transparent);--shadow-md:0 8px 24px color-mix(in oklab, #2c1f1a 14%, transparent);--shadow-lg:0 24px 64px color-mix(in oklab, #2c1f1a 26%, transparent);--scrim:rgba(44, 31, 26, 0.42);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:#b24d35;--toast-info-border-color:color-mix(in oklab, #b24d35 75%, #fff8f2);--toast-info-color:#fff8f2;--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:#4a7c5b;--toast-success-border-color:color-mix(in oklab, #4a7c5b 75%, #fff8f2);--toast-success-color:#fff8f2;--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:#936214;--toast-warning-border-color:color-mix(in oklab, #936214 75%, #fff8f2);--toast-warning-color:#fff8f2;--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:#ae423d;--toast-danger-border-color:color-mix(in oklab, #ae423d 75%, #fff8f2);--toast-danger-color:#fff8f2;--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.18em;--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)}
|
|
1767
|
+
/*
|
|
1768
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
1769
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
1770
|
+
* "success" chip and a success toast carry the same three colours.
|
|
1771
|
+
*
|
|
1772
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
1773
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
1774
|
+
*/
|
|
1775
|
+
|
|
1776
|
+
[data-theme='seeds-blossom'] .badge-variant--default {
|
|
1777
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
1778
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
1779
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
1780
|
+
--recipe-border: var(--tone-neutral-border);
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
[data-theme='seeds-blossom'] :is(.badge-variant--info, .chip--info) {
|
|
1784
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
1785
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
1786
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
1787
|
+
--recipe-border: var(--tone-accent-border);
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1790
|
+
[data-theme='seeds-blossom'] :is(.badge-variant--success, .chip--success) {
|
|
1791
|
+
--recipe-soft: var(--tone-success-soft);
|
|
1792
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
1793
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
1794
|
+
--recipe-border: var(--tone-success-border);
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
[data-theme='seeds-blossom'] :is(.badge-variant--warning, .chip--warning) {
|
|
1798
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
1799
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
1800
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
1801
|
+
--recipe-border: var(--tone-warning-border);
|
|
1802
|
+
}
|
|
1803
|
+
|
|
1804
|
+
[data-theme='seeds-blossom'] :is(.badge-variant--danger, .chip--danger) {
|
|
1805
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
1806
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
1807
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
1808
|
+
--recipe-border: var(--tone-danger-border);
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
[data-theme='seeds-blossom']
|
|
1812
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
1813
|
+
border-color: var(--recipe-border);
|
|
1814
|
+
background-color: var(--recipe-soft);
|
|
1815
|
+
color: var(--recipe-on-soft);
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
[data-theme='seeds-blossom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
1819
|
+
border-color: var(--border-default);
|
|
1820
|
+
background: transparent;
|
|
1821
|
+
color: var(--text-default);
|
|
1822
|
+
}
|
|
1823
|
+
|
|
1824
|
+
[data-theme='seeds-blossom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
1825
|
+
border-color: var(--recipe-border);
|
|
1826
|
+
background: var(--surface-hover);
|
|
1827
|
+
color: var(--text-strong);
|
|
1828
|
+
}
|
|
1829
|
+
|
|
1830
|
+
[data-theme='seeds-blossom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
1831
|
+
border-color: var(--recipe-border);
|
|
1832
|
+
background: var(--recipe-soft);
|
|
1833
|
+
color: var(--recipe-on-soft);
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
[data-theme='seeds-blossom'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
1837
|
+
border-color: var(--recipe-border);
|
|
1838
|
+
background: var(--recipe-soft-hover);
|
|
1839
|
+
color: var(--recipe-on-soft);
|
|
1840
|
+
}
|
|
1841
|
+
|
|
1842
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
1843
|
+
[data-theme='seeds-blossom'] .chip.chip--default {
|
|
1844
|
+
--recipe-soft: var(--selected-bg);
|
|
1845
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
1846
|
+
--recipe-on-soft: var(--selected-fg);
|
|
1847
|
+
--recipe-border: var(--selected-border);
|
|
1848
|
+
}
|
|
1849
|
+
|
|
1850
|
+
[data-theme='seeds-nightlight']{color-scheme:dark;--font-body:'Nunito', 'Avenir Next', sans-serif;--font-display:'Fraunces', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.16em;--header-weight:600;--canvas-layers:radial-gradient(50% 45% at 90% 5%, rgba(244, 160, 140, 0.16) 0%, transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(123, 168, 136, 0.09) 0%, transparent 65%), linear-gradient(160deg, #1d1829 0%, #141120 100%);--surface-canvas:#181422;--surface-card:#211c2e;--surface-raised:#1c1828;--surface-raised-alt:#272136;--surface-overlay:#2a2439;--button-fill:#2c263c;--surface-overlay-card:#221d30;--surface-sunken:#322a43;--control-hover:#2f283f;--surface-hover:color-mix(in oklab, #f4a08c 8%, transparent);--surface-stripe:#241f32;--rating-empty:color-mix(in oklab, #322a43 85%, #fbf1ec);--surface-selected:color-mix(in oklab, #f4a08c 18%, transparent);--surface-blur:none;--text-strong:#fbf1ec;--text-default:#ebdfdc;--text-soft:#cbbcc0;--text-muted:#a596a3;--text-subtle:#807185;--text-link:#f7b09e;--text-link-hover:#ffd0c2;--border-subtle:rgba(235, 223, 220, 0.09);--border-default:rgba(235, 223, 220, 0.14);--border-strong:rgba(235, 223, 220, 0.14);--border-card:rgba(235, 223, 220, 0.08);--border-card-hover:rgba(244, 160, 140, 0.45);--field-bg:#1c1828;--field-bg-focus:#1c1828;--field-bg-disabled:color-mix(in oklab, #1c1828 94%, #fbf1ec);--field-fg:#ebdfdc;--field-border:rgba(235, 223, 220, 0.17);--field-border-hover:#f4a08c;--field-border-focus:#f4a08c;--field-placeholder:#807185;--field-label:#a596a3;--field-ring:color-mix(in oklab, #f4a08c 24%, transparent);--tone-neutral-solid:#fbf1ec;--tone-neutral-solid-hover:color-mix(in oklab, #fbf1ec 70%, #ebdfdc);--tone-neutral-on-solid:#fff8f4;--tone-neutral-soft:#2f283f;--tone-neutral-soft-hover:color-mix(in oklab, #2f283f 92%, #fbf1ec);--tone-neutral-on-soft:#fbf1ec;--tone-neutral-border:rgba(235, 223, 220, 0.14);--tone-neutral-text:#cbbcc0;--tone-accent-solid:#b4513b;--tone-accent-mark:#f4a08c;--tone-accent-solid-hover:#c75f48;--tone-accent-on-solid:#fff8f4;--tone-accent-soft:color-mix(in oklab, #f4a08c 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #f4a08c 24%, transparent);--tone-accent-on-soft:#f7b09e;--tone-accent-border:color-mix(in oklab, #f4a08c 40%, transparent);--tone-accent-text:#f7b09e;--tone-success-solid:#3f7550;--tone-success-mark:#8cc49c;--tone-success-solid-hover:#4a865d;--tone-success-on-solid:#fff8f4;--tone-success-soft:color-mix(in oklab, #8cc49c 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #8cc49c 24%, transparent);--tone-success-on-soft:#9fd0ad;--tone-success-border:color-mix(in oklab, #8cc49c 40%, transparent);--tone-success-text:#9fd0ad;--tone-warning-solid:#8f6318;--tone-warning-mark:#ecc06a;--tone-warning-solid-hover:#a37420;--tone-warning-on-solid:#fff8f4;--tone-warning-soft:color-mix(in oklab, #ecc06a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #ecc06a 24%, transparent);--tone-warning-on-soft:#f0cb82;--tone-warning-border:color-mix(in oklab, #ecc06a 40%, transparent);--tone-warning-text:#f0cb82;--tone-danger-solid:#a83d48;--tone-danger-mark:#f08a95;--tone-danger-solid-hover:#bc4a56;--tone-danger-on-solid:#fff8f4;--tone-danger-soft:color-mix(in oklab, #f08a95 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f08a95 24%, transparent);--tone-danger-on-soft:#f4a0a9;--tone-danger-border:color-mix(in oklab, #f08a95 40%, transparent);--tone-danger-text:#f4a0a9;--accent-glow:#ffc7a8;--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, 235, 230, 0.04) inset, 0 2px 8px rgba(5, 3, 12, 0.45);--shadow-md:0 14px 34px -16px rgba(5, 3, 12, 0.8);--shadow-lg:0 28px 70px rgba(5, 3, 12, 0.7);--scrim:color-mix(in oklab, #fbf1ec 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.18em;--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)}
|
|
1851
|
+
/*
|
|
1852
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
1853
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
1854
|
+
* "success" chip and a success toast carry the same three colours.
|
|
1855
|
+
*
|
|
1856
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
1857
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
1858
|
+
*/
|
|
1859
|
+
|
|
1860
|
+
[data-theme='seeds-nightlight'] .badge-variant--default {
|
|
1861
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
1862
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
1863
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
1864
|
+
--recipe-border: var(--tone-neutral-border);
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
[data-theme='seeds-nightlight'] :is(.badge-variant--info, .chip--info) {
|
|
1868
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
1869
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
1870
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
1871
|
+
--recipe-border: var(--tone-accent-border);
|
|
1872
|
+
}
|
|
1873
|
+
|
|
1874
|
+
[data-theme='seeds-nightlight'] :is(.badge-variant--success, .chip--success) {
|
|
1875
|
+
--recipe-soft: var(--tone-success-soft);
|
|
1876
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
1877
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
1878
|
+
--recipe-border: var(--tone-success-border);
|
|
1879
|
+
}
|
|
1880
|
+
|
|
1881
|
+
[data-theme='seeds-nightlight'] :is(.badge-variant--warning, .chip--warning) {
|
|
1882
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
1883
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
1884
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
1885
|
+
--recipe-border: var(--tone-warning-border);
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
[data-theme='seeds-nightlight'] :is(.badge-variant--danger, .chip--danger) {
|
|
1889
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
1890
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
1891
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
1892
|
+
--recipe-border: var(--tone-danger-border);
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
[data-theme='seeds-nightlight']
|
|
1896
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
1897
|
+
border-color: var(--recipe-border);
|
|
1898
|
+
background-color: var(--recipe-soft);
|
|
1899
|
+
color: var(--recipe-on-soft);
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
[data-theme='seeds-nightlight'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
1903
|
+
border-color: var(--border-default);
|
|
1904
|
+
background: transparent;
|
|
1905
|
+
color: var(--text-default);
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
[data-theme='seeds-nightlight'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
1909
|
+
border-color: var(--recipe-border);
|
|
1910
|
+
background: var(--surface-hover);
|
|
1911
|
+
color: var(--text-strong);
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1914
|
+
[data-theme='seeds-nightlight'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
1915
|
+
border-color: var(--recipe-border);
|
|
1916
|
+
background: var(--recipe-soft);
|
|
1917
|
+
color: var(--recipe-on-soft);
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
[data-theme='seeds-nightlight'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
1921
|
+
border-color: var(--recipe-border);
|
|
1922
|
+
background: var(--recipe-soft-hover);
|
|
1923
|
+
color: var(--recipe-on-soft);
|
|
1924
|
+
}
|
|
1925
|
+
|
|
1926
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
1927
|
+
[data-theme='seeds-nightlight'] .chip.chip--default {
|
|
1928
|
+
--recipe-soft: var(--selected-bg);
|
|
1929
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
1930
|
+
--recipe-on-soft: var(--selected-fg);
|
|
1931
|
+
--recipe-border: var(--selected-border);
|
|
1932
|
+
}
|
|
1933
|
+
|
|
674
1934
|
[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)}
|
|
675
1935
|
/*
|
|
676
1936
|
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|