@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='nutritrack-verdant']{color-scheme:dark;--font-body:'Outfit', 'Inter', sans-serif;--font-display:'Bricolage Grotesque', 'Outfit', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-md);--display-transform:none;--display-tracking:-0.01em;--label-weight:500;--label-transform:none;--label-tracking:normal;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(95, 217, 138, 0.1) 0%, transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(251, 179, 64, 0.07) 0%, transparent 65%);--surface-canvas:#0b1310;--surface-card:#131f19;--surface-raised:#0f1a14;--surface-raised-alt:#1a2921;--surface-overlay:#1a2820;--button-fill:#1c2b23;--surface-overlay-card:#14211a;--surface-sunken:#1f3027;--control-hover:#203229;--surface-hover:color-mix(in oklab, #5fd98a 8%, transparent);--surface-stripe:#16231c;--rating-empty:color-mix(in oklab, #1f3027 85%, #f2fff4);--surface-selected:color-mix(in oklab, #5fd98a 18%, transparent);--surface-blur:none;--text-strong:#f2fff4;--text-default:#d8e8de;--text-soft:#b3c9bd;--text-muted:#88a294;--text-subtle:#64796d;--text-link:#6ee09a;--text-link-hover:#a5f0c0;--border-subtle:#22332a;--border-default:#283a30;--border-strong:#395045;--border-card:#22332a;--border-card-hover:rgba(95, 217, 138, 0.45);--field-bg:#0f1a14;--field-bg-focus:#0f1a14;--field-bg-disabled:color-mix(in oklab, #0f1a14 94%, #f2fff4);--field-fg:#d8e8de;--field-border:#2c4035;--field-border-hover:#5fd98a;--field-border-focus:#5fd98a;--field-placeholder:#64796d;--field-label:#88a294;--field-ring:color-mix(in oklab, #5fd98a 24%, transparent);--tone-neutral-solid:#f2fff4;--tone-neutral-solid-hover:color-mix(in oklab, #f2fff4 70%, #d8e8de);--tone-neutral-on-solid:#04140a;--tone-neutral-soft:#203229;--tone-neutral-soft-hover:color-mix(in oklab, #203229 92%, #f2fff4);--tone-neutral-on-soft:#f2fff4;--tone-neutral-border:#283a30;--tone-neutral-text:#b3c9bd;--tone-accent-solid:#4cc777;--tone-accent-mark:#5fd98a;--tone-accent-solid-hover:#66d68d;--tone-accent-on-solid:#04140a;--tone-accent-soft:color-mix(in oklab, #5fd98a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #5fd98a 24%, transparent);--tone-accent-on-soft:#6ee09a;--tone-accent-border:color-mix(in oklab, #5fd98a 40%, transparent);--tone-accent-text:#6ee09a;--tone-success-solid:#3cc3b4;--tone-success-mark:#56d0c4;--tone-success-solid-hover:#58d0c3;--tone-success-on-solid:#04140a;--tone-success-soft:color-mix(in oklab, #56d0c4 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #56d0c4 24%, transparent);--tone-success-on-soft:#6fdccf;--tone-success-border:color-mix(in oklab, #56d0c4 40%, transparent);--tone-success-text:#6fdccf;--tone-warning-solid:#fbb340;--tone-warning-mark:#fbb340;--tone-warning-solid-hover:#fcc260;--tone-warning-on-solid:#04140a;--tone-warning-soft:color-mix(in oklab, #fbb340 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #fbb340 24%, transparent);--tone-warning-on-soft:#fcc461;--tone-warning-border:color-mix(in oklab, #fbb340 40%, transparent);--tone-warning-text:#fcc461;--tone-danger-solid:#fb7185;--tone-danger-mark:#fb7185;--tone-danger-solid-hover:#fd8a9a;--tone-danger-on-solid:#04140a;--tone-danger-soft:color-mix(in oklab, #fb7185 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #fb7185 24%, transparent);--tone-danger-on-soft:#fd8a9a;--tone-danger-border:color-mix(in oklab, #fb7185 40%, transparent);--tone-danger-text:#fd8a9a;--accent-glow:#9bf0b8;--selected-bg:var(--tone-accent-solid);--selected-bg-hover:var(--tone-accent-solid-hover);--selected-fg:var(--tone-accent-on-solid);--selected-border:var(--tone-accent-solid);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(216, 232, 222, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 12px 30px -14px rgba(0, 0, 0, 0.7);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f2fff4 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-display);--modal-title-font-size:var(--font-size-lg);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:-0.01em;--modal-title-text-transform:none;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
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='nutritrack-verdant'] .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='nutritrack-verdant'] :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='nutritrack-verdant'] :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='nutritrack-verdant'] :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='nutritrack-verdant'] :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='nutritrack-verdant']
|
|
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='nutritrack-verdant'] .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='nutritrack-verdant'] .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='nutritrack-verdant'] .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='nutritrack-verdant'] .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='nutritrack-verdant'] .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='pulse-ivory']{color-scheme:light;--font-body:'Lato', 'Avenir Next', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:700;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:700;--canvas-layers:radial-gradient(50% 45% at 100% 0%, rgba(197, 160, 40, 0.1) 0%, transparent 65%), radial-gradient(45% 50% at 0% 100%, rgba(30, 58, 95, 0.08) 0%, transparent 65%), radial-gradient(110% 90% at 20% 0%, #faf8f2 0%, #f0ede2 50%, #e8e2d2 100%);--surface-canvas:#f4f1e8;--surface-card:rgba(255, 255, 255, 0.94);--surface-raised:#fbfaf5;--surface-raised-alt:rgba(248, 246, 240, 0.6);--surface-overlay:#fdfcf8;--button-fill:#f4f1e8;--surface-overlay-card:rgba(255, 255, 255, 0.94);--surface-sunken:#e8e2d2;--control-hover:#eee8d0;--surface-hover:color-mix(in oklab, #b08a1e 8%, transparent);--surface-stripe:#f8f6ef;--rating-empty:color-mix(in oklab, #e8e2d2 85%, #0c1020);--surface-selected:color-mix(in oklab, #b08a1e 18%, transparent);--surface-blur:blur(20px) saturate(1.3);--text-strong:#0c1020;--text-default:#1e2433;--text-soft:#3a4560;--text-muted:#5c6270;--text-subtle:#858b99;--text-link:#1e3a5f;--text-link-hover:#7d6012;--border-subtle:rgba(30, 36, 51, 0.11);--border-default:rgba(30, 36, 51, 0.18);--border-strong:rgba(30, 36, 51, 0.18);--border-card:rgba(255, 255, 255, 0.85);--border-card-hover:rgba(197, 160, 40, 0.55);--field-bg:#fbfaf5;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #fbfaf5 94%, #0c1020);--field-fg:#1e2433;--field-border:rgba(30, 36, 51, 0.22);--field-border-hover:#1e3a5f;--field-border-focus:#b08a1e;--field-placeholder:#858b99;--field-label:#5c6270;--field-ring:color-mix(in oklab, #b08a1e 24%, transparent);--tone-neutral-solid:#0c1020;--tone-neutral-solid-hover:color-mix(in oklab, #0c1020 70%, #1e2433);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#eee8d0;--tone-neutral-soft-hover:color-mix(in oklab, #eee8d0 92%, #0c1020);--tone-neutral-on-soft:#0c1020;--tone-neutral-border:rgba(30, 36, 51, 0.18);--tone-neutral-text:#3a4560;--tone-accent-solid:#1e3a5f;--tone-accent-mark:#b08a1e;--tone-accent-solid-hover:#162c49;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #b08a1e 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #b08a1e 24%, transparent);--tone-accent-on-soft:#1e3a5f;--tone-accent-border:color-mix(in oklab, #b08a1e 40%, transparent);--tone-accent-text:#1e3a5f;--tone-success-solid:#2e7d3e;--tone-success-mark:#2e7d3e;--tone-success-solid-hover:#256832;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #2e7d3e 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #2e7d3e 24%, transparent);--tone-success-on-soft:#2a7239;--tone-success-border:color-mix(in oklab, #2e7d3e 40%, transparent);--tone-success-text:#2a7239;--tone-warning-solid:#93690f;--tone-warning-mark:#c5a028;--tone-warning-solid-hover:#7a570c;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #c5a028 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #c5a028 24%, transparent);--tone-warning-on-soft:#7c5c0b;--tone-warning-border:color-mix(in oklab, #c5a028 40%, transparent);--tone-warning-text:#7c5c0b;--tone-danger-solid:#9f2f2f;--tone-danger-mark:#9f2f2f;--tone-danger-solid-hover:#842525;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #9f2f2f 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #9f2f2f 24%, transparent);--tone-danger-on-soft:#922b2b;--tone-danger-border:color-mix(in oklab, #9f2f2f 40%, transparent);--tone-danger-text:#922b2b;--accent-glow:#e8c04a;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, rgba(12, 16, 32, 0.14) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(12, 16, 32, 0.14) 62%, transparent);--shadow-sm:0 1px 2px color-mix(in oklab, #0c1020 12%, transparent);--shadow-md:0 8px 24px color-mix(in oklab, #0c1020 14%, transparent);--shadow-lg:0 24px 64px color-mix(in oklab, #0c1020 26%, transparent);--scrim:rgba(12, 16, 32, 0.38);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:#1e3a5f;--toast-info-border-color:color-mix(in oklab, #1e3a5f 75%, #ffffff);--toast-info-color:#ffffff;--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:#2e7d3e;--toast-success-border-color:color-mix(in oklab, #2e7d3e 75%, #ffffff);--toast-success-color:#ffffff;--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:#93690f;--toast-warning-border-color:color-mix(in oklab, #93690f 75%, #ffffff);--toast-warning-color:#ffffff;--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:#9f2f2f;--toast-danger-border-color:color-mix(in oklab, #9f2f2f 75%, #ffffff);--toast-danger-color:#ffffff;--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:0.15em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
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='pulse-ivory'] .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='pulse-ivory'] :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='pulse-ivory'] :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='pulse-ivory'] :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='pulse-ivory'] :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='pulse-ivory']
|
|
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='pulse-ivory'] .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='pulse-ivory'] .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='pulse-ivory'] .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='pulse-ivory'] .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='pulse-ivory'] .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='pulse-night-chart']{color-scheme:dark;--font-body:'Lato', 'Avenir Next', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:700;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:700;--canvas-layers:radial-gradient(50% 45% at 100% 0%, rgba(217, 181, 74, 0.07) 0%, transparent 65%), radial-gradient(45% 50% at 0% 100%, rgba(60, 100, 160, 0.12) 0%, transparent 65%), linear-gradient(160deg, #0f1524 0%, #0a0e18 100%);--surface-canvas:#0c111c;--surface-card:#131a28;--surface-raised:#0f1522;--surface-raised-alt:#18202f;--surface-overlay:#1a2232;--button-fill:#1c2536;--surface-overlay-card:#141b29;--surface-sunken:#202a3c;--control-hover:#1f283a;--surface-hover:color-mix(in oklab, #d9b54a 8%, transparent);--surface-stripe:#151c2a;--rating-empty:color-mix(in oklab, #202a3c 85%, #f6f2e6);--surface-selected:color-mix(in oklab, #d9b54a 18%, transparent);--surface-blur:none;--text-strong:#f6f2e6;--text-default:#e3e3df;--text-soft:#c2c6cf;--text-muted:#9aa1b0;--text-subtle:#737c8d;--text-link:#9bbcec;--text-link-hover:#c2d6f4;--border-subtle:rgba(227, 227, 223, 0.08);--border-default:rgba(227, 227, 223, 0.13);--border-strong:rgba(227, 227, 223, 0.13);--border-card:rgba(227, 227, 223, 0.07);--border-card-hover:rgba(217, 181, 74, 0.45);--field-bg:#0f1522;--field-bg-focus:#0f1522;--field-bg-disabled:color-mix(in oklab, #0f1522 94%, #f6f2e6);--field-fg:#e3e3df;--field-border:rgba(227, 227, 223, 0.16);--field-border-hover:#d9b54a;--field-border-focus:#d9b54a;--field-placeholder:#737c8d;--field-label:#9aa1b0;--field-ring:color-mix(in oklab, #d9b54a 24%, transparent);--tone-neutral-solid:#f6f2e6;--tone-neutral-solid-hover:color-mix(in oklab, #f6f2e6 70%, #e3e3df);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#1f283a;--tone-neutral-soft-hover:color-mix(in oklab, #1f283a 92%, #f6f2e6);--tone-neutral-on-soft:#f6f2e6;--tone-neutral-border:rgba(227, 227, 223, 0.13);--tone-neutral-text:#c2c6cf;--tone-accent-solid:#2f5a93;--tone-accent-mark:#d9b54a;--tone-accent-solid-hover:#3a69a6;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #d9b54a 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #d9b54a 24%, transparent);--tone-accent-on-soft:#e3c467;--tone-accent-border:color-mix(in oklab, #d9b54a 40%, transparent);--tone-accent-text:#e3c467;--tone-success-solid:#2e7a44;--tone-success-mark:#6cc58a;--tone-success-solid-hover:#378d50;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #6cc58a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #6cc58a 24%, transparent);--tone-success-on-soft:#86d19f;--tone-success-border:color-mix(in oklab, #6cc58a 40%, transparent);--tone-success-text:#86d19f;--tone-warning-solid:#8f650e;--tone-warning-mark:#e0b84e;--tone-warning-solid-hover:#a37616;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #e0b84e 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e0b84e 24%, transparent);--tone-warning-on-soft:#ecc76b;--tone-warning-border:color-mix(in oklab, #e0b84e 40%, transparent);--tone-warning-text:#ecc76b;--tone-danger-solid:#a8383a;--tone-danger-mark:#ef7f80;--tone-danger-solid-hover:#bd4547;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #ef7f80 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #ef7f80 24%, transparent);--tone-danger-on-soft:#f39697;--tone-danger-border:color-mix(in oklab, #ef7f80 40%, transparent);--tone-danger-text:#f39697;--accent-glow:#f0d27a;--selected-bg:var(--tone-accent-soft);--selected-bg-hover:var(--tone-accent-soft-hover);--selected-fg:var(--tone-accent-on-soft);--selected-border:var(--tone-accent-border);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(246, 242, 230, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 12px 30px -14px rgba(0, 0, 0, 0.75);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f6f2e6 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:0.15em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
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='pulse-night-chart'] .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='pulse-night-chart'] :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='pulse-night-chart'] :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='pulse-night-chart'] :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='pulse-night-chart'] :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='pulse-night-chart']
|
|
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='pulse-night-chart'] .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='pulse-night-chart'] .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='pulse-night-chart'] .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='pulse-night-chart'] .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='pulse-night-chart'] .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='seeds-blossom']{color-scheme:light;--font-body:'Nunito', 'Avenir Next', sans-serif;--font-display:'Fraunces', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.16em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 100% 0%, rgba(232, 130, 107, 0.16) 0%, transparent 65%), radial-gradient(50% 45% at 0% 100%, rgba(123, 168, 136, 0.13) 0%, transparent 65%), radial-gradient(40% 40% at 100% 100%, rgba(243, 191, 153, 0.12) 0%, transparent 60%), linear-gradient(155deg, #fef6ec 0%, #fbeadb 55%, #f5d8c2 100%);--surface-canvas:#fbeadb;--surface-card:rgba(255, 250, 244, 0.94);--surface-raised:#fff7f0;--surface-raised-alt:rgba(255, 236, 222, 0.85);--surface-overlay:#fffaf5;--button-fill:#fbeadb;--surface-overlay-card:rgba(255, 250, 244, 0.97);--surface-sunken:#f3d8c1;--control-hover:#f8e0cc;--surface-hover:color-mix(in oklab, #e8826b 8%, transparent);--surface-stripe:#fdf1e7;--rating-empty:color-mix(in oklab, #f3d8c1 85%, #2c1f1a);--surface-selected:color-mix(in oklab, #e8826b 18%, transparent);--surface-blur:blur(14px) saturate(1.3);--text-strong:#2c1f1a;--text-default:#4a3933;--text-soft:#5f4840;--text-muted:#735c54;--text-subtle:#98807a;--text-link:#ab4a33;--text-link-hover:#8f3b27;--border-subtle:rgba(120, 70, 55, 0.14);--border-default:rgba(120, 70, 55, 0.2);--border-strong:rgba(120, 70, 55, 0.2);--border-card:rgba(255, 253, 248, 0.8);--border-card-hover:rgba(232, 130, 107, 0.55);--field-bg:#fff7f0;--field-bg-focus:#fffbf7;--field-bg-disabled:color-mix(in oklab, #fff7f0 94%, #2c1f1a);--field-fg:#4a3933;--field-border:rgba(120, 70, 55, 0.26);--field-border-hover:#b24d35;--field-border-focus:#e8826b;--field-placeholder:#98807a;--field-label:#735c54;--field-ring:color-mix(in oklab, #e8826b 24%, transparent);--tone-neutral-solid:#2c1f1a;--tone-neutral-solid-hover:color-mix(in oklab, #2c1f1a 70%, #4a3933);--tone-neutral-on-solid:#fff8f2;--tone-neutral-soft:#f8e0cc;--tone-neutral-soft-hover:color-mix(in oklab, #f8e0cc 92%, #2c1f1a);--tone-neutral-on-soft:#2c1f1a;--tone-neutral-border:rgba(120, 70, 55, 0.2);--tone-neutral-text:#5f4840;--tone-accent-solid:#b24d35;--tone-accent-mark:#e8826b;--tone-accent-solid-hover:#9a412b;--tone-accent-on-solid:#fff8f2;--tone-accent-soft:color-mix(in oklab, #e8826b 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #e8826b 24%, transparent);--tone-accent-on-soft:#ab4a33;--tone-accent-border:color-mix(in oklab, #e8826b 40%, transparent);--tone-accent-text:#ab4a33;--tone-success-solid:#4a7c5b;--tone-success-mark:#689f77;--tone-success-solid-hover:#3d6a4c;--tone-success-on-solid:#fff8f2;--tone-success-soft:color-mix(in oklab, #689f77 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #689f77 24%, transparent);--tone-success-on-soft:#3f7350;--tone-success-border:color-mix(in oklab, #689f77 40%, transparent);--tone-success-text:#3f7350;--tone-warning-solid:#936214;--tone-warning-mark:#d9a24a;--tone-warning-solid-hover:#7c5210;--tone-warning-on-solid:#fff8f2;--tone-warning-soft:color-mix(in oklab, #d9a24a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #d9a24a 24%, transparent);--tone-warning-on-soft:#875a10;--tone-warning-border:color-mix(in oklab, #d9a24a 40%, transparent);--tone-warning-text:#875a10;--tone-danger-solid:#ae423d;--tone-danger-mark:#c25450;--tone-danger-solid-hover:#943632;--tone-danger-on-solid:#fff8f2;--tone-danger-soft:color-mix(in oklab, #c25450 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #c25450 24%, transparent);--tone-danger-on-soft:#a03b37;--tone-danger-border:color-mix(in oklab, #c25450 40%, transparent);--tone-danger-text:#a03b37;--accent-glow:#f39b85;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, rgba(120, 70, 55, 0.2) 45%, transparent);--shadow-color-strong:color-mix(in oklab, rgba(120, 70, 55, 0.2) 62%, transparent);--shadow-sm:0 1px 2px color-mix(in oklab, #2c1f1a 12%, transparent);--shadow-md:0 8px 24px color-mix(in oklab, #2c1f1a 14%, transparent);--shadow-lg:0 24px 64px color-mix(in oklab, #2c1f1a 26%, transparent);--scrim:rgba(44, 31, 26, 0.42);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:#b24d35;--toast-info-border-color:color-mix(in oklab, #b24d35 75%, #fff8f2);--toast-info-color:#fff8f2;--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:#4a7c5b;--toast-success-border-color:color-mix(in oklab, #4a7c5b 75%, #fff8f2);--toast-success-color:#fff8f2;--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:#936214;--toast-warning-border-color:color-mix(in oklab, #936214 75%, #fff8f2);--toast-warning-color:#fff8f2;--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:#ae423d;--toast-danger-border-color:color-mix(in oklab, #ae423d 75%, #fff8f2);--toast-danger-color:#fff8f2;--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.18em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
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='seeds-blossom'] .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='seeds-blossom'] :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='seeds-blossom'] :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='seeds-blossom'] :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='seeds-blossom'] :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='seeds-blossom']
|
|
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='seeds-blossom'] .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='seeds-blossom'] .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='seeds-blossom'] .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='seeds-blossom'] .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='seeds-blossom'] .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='seeds-nightlight']{color-scheme:dark;--font-body:'Nunito', 'Avenir Next', sans-serif;--font-display:'Fraunces', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:600;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.16em;--header-weight:600;--canvas-layers:radial-gradient(50% 45% at 90% 5%, rgba(244, 160, 140, 0.16) 0%, transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(123, 168, 136, 0.09) 0%, transparent 65%), linear-gradient(160deg, #1d1829 0%, #141120 100%);--surface-canvas:#181422;--surface-card:#211c2e;--surface-raised:#1c1828;--surface-raised-alt:#272136;--surface-overlay:#2a2439;--button-fill:#2c263c;--surface-overlay-card:#221d30;--surface-sunken:#322a43;--control-hover:#2f283f;--surface-hover:color-mix(in oklab, #f4a08c 8%, transparent);--surface-stripe:#241f32;--rating-empty:color-mix(in oklab, #322a43 85%, #fbf1ec);--surface-selected:color-mix(in oklab, #f4a08c 18%, transparent);--surface-blur:none;--text-strong:#fbf1ec;--text-default:#ebdfdc;--text-soft:#cbbcc0;--text-muted:#a596a3;--text-subtle:#807185;--text-link:#f7b09e;--text-link-hover:#ffd0c2;--border-subtle:rgba(235, 223, 220, 0.09);--border-default:rgba(235, 223, 220, 0.14);--border-strong:rgba(235, 223, 220, 0.14);--border-card:rgba(235, 223, 220, 0.08);--border-card-hover:rgba(244, 160, 140, 0.45);--field-bg:#1c1828;--field-bg-focus:#1c1828;--field-bg-disabled:color-mix(in oklab, #1c1828 94%, #fbf1ec);--field-fg:#ebdfdc;--field-border:rgba(235, 223, 220, 0.17);--field-border-hover:#f4a08c;--field-border-focus:#f4a08c;--field-placeholder:#807185;--field-label:#a596a3;--field-ring:color-mix(in oklab, #f4a08c 24%, transparent);--tone-neutral-solid:#fbf1ec;--tone-neutral-solid-hover:color-mix(in oklab, #fbf1ec 70%, #ebdfdc);--tone-neutral-on-solid:#fff8f4;--tone-neutral-soft:#2f283f;--tone-neutral-soft-hover:color-mix(in oklab, #2f283f 92%, #fbf1ec);--tone-neutral-on-soft:#fbf1ec;--tone-neutral-border:rgba(235, 223, 220, 0.14);--tone-neutral-text:#cbbcc0;--tone-accent-solid:#b4513b;--tone-accent-mark:#f4a08c;--tone-accent-solid-hover:#c75f48;--tone-accent-on-solid:#fff8f4;--tone-accent-soft:color-mix(in oklab, #f4a08c 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #f4a08c 24%, transparent);--tone-accent-on-soft:#f7b09e;--tone-accent-border:color-mix(in oklab, #f4a08c 40%, transparent);--tone-accent-text:#f7b09e;--tone-success-solid:#3f7550;--tone-success-mark:#8cc49c;--tone-success-solid-hover:#4a865d;--tone-success-on-solid:#fff8f4;--tone-success-soft:color-mix(in oklab, #8cc49c 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #8cc49c 24%, transparent);--tone-success-on-soft:#9fd0ad;--tone-success-border:color-mix(in oklab, #8cc49c 40%, transparent);--tone-success-text:#9fd0ad;--tone-warning-solid:#8f6318;--tone-warning-mark:#ecc06a;--tone-warning-solid-hover:#a37420;--tone-warning-on-solid:#fff8f4;--tone-warning-soft:color-mix(in oklab, #ecc06a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #ecc06a 24%, transparent);--tone-warning-on-soft:#f0cb82;--tone-warning-border:color-mix(in oklab, #ecc06a 40%, transparent);--tone-warning-text:#f0cb82;--tone-danger-solid:#a83d48;--tone-danger-mark:#f08a95;--tone-danger-solid-hover:#bc4a56;--tone-danger-on-solid:#fff8f4;--tone-danger-soft:color-mix(in oklab, #f08a95 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f08a95 24%, transparent);--tone-danger-on-soft:#f4a0a9;--tone-danger-border:color-mix(in oklab, #f08a95 40%, transparent);--tone-danger-text:#f4a0a9;--accent-glow:#ffc7a8;--selected-bg:var(--tone-accent-soft);--selected-bg-hover:var(--tone-accent-soft-hover);--selected-fg:var(--tone-accent-on-soft);--selected-border:var(--tone-accent-border);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(255, 235, 230, 0.04) inset, 0 2px 8px rgba(5, 3, 12, 0.45);--shadow-md:0 14px 34px -16px rgba(5, 3, 12, 0.8);--shadow-lg:0 28px 70px rgba(5, 3, 12, 0.7);--scrim:color-mix(in oklab, #fbf1ec 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.18em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
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='seeds-nightlight'] .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='seeds-nightlight'] :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='seeds-nightlight'] :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='seeds-nightlight'] :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='seeds-nightlight'] :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='seeds-nightlight']
|
|
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='seeds-nightlight'] .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='seeds-nightlight'] .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='seeds-nightlight'] .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='seeds-nightlight'] .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='seeds-nightlight'] .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
|
+
}
|