@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
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[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)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='cookbook-slate'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='cookbook-slate']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='cookbook-slate'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[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)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='cookbook-terracotta'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='cookbook-terracotta'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='cookbook-terracotta']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='cookbook-terracotta'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='cookbook-terracotta'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[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)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='garage-night-drive'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='garage-night-drive'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='garage-night-drive']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='garage-night-drive'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='garage-night-drive'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[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)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='garage-redline'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='garage-redline'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='garage-redline'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='garage-redline'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='garage-redline'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='garage-redline']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='garage-redline'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='garage-redline'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[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)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='garage-workshop'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='garage-workshop'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='garage-workshop'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='garage-workshop'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='garage-workshop'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='garage-workshop']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='garage-workshop'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='garage-workshop'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|