@webority/theme 0.7.3 → 0.7.5
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/README.md +108 -6
- package/dist/webority-theme.css +1 -1
- package/package.json +1 -1
- package/scss/_components.scss +158 -547
- package/scss/_marketing.scss +337 -0
- package/scss/_tokens.scss +119 -108
- package/scss/_variables.scss +126 -132
- package/scss/_wui-aliases.scss +103 -102
- package/scss/wui/_choice.scss +4 -4
- package/scss/wui/_controls.scss +167 -251
- package/scss/wui/_data.scss +39 -0
- package/scss/wui/_display.scss +88 -0
- package/scss/wui/_navigation.scss +27 -0
- package/scss/wui/_overlays.scss +2 -2
- package/scss/wui/_scrollbar.scss +13 -11
- package/scss/wui/_shell.scss +3 -3
- package/scss/wui/_utilities.scss +139 -1
package/scss/_variables.scss
CHANGED
|
@@ -13,36 +13,41 @@
|
|
|
13
13
|
// variables since Bootstrap only consumes the named theme colors.
|
|
14
14
|
// `!default` so a product that sets these in its own _variables BEFORE importing this file
|
|
15
15
|
// (the documented override path) wins — a plain assignment here would clobber the brand.
|
|
16
|
-
$primary:
|
|
17
|
-
$secondary
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
$
|
|
22
|
-
$
|
|
23
|
-
$
|
|
16
|
+
$primary: #4F46E5 !default;
|
|
17
|
+
// $secondary is intentional quiet grey (text-2 / foreground-3), NOT a second
|
|
18
|
+
// brand hue. `.btn-secondary`, `.text-secondary`, `.bg-secondary` mean "quiet /
|
|
19
|
+
// de-emphasised" across products (Metronic-like). Products that need a true
|
|
20
|
+
// second brand colour should use a custom utility or token — do not repurpose
|
|
21
|
+
// $secondary without a coordinated migration.
|
|
22
|
+
$secondary: #4B5675 !default;
|
|
23
|
+
$success: #04B440 !default;
|
|
24
|
+
$info: #056EE9 !default;
|
|
25
|
+
$warning: #DFA000 !default;
|
|
26
|
+
$danger: #E82646 !default;
|
|
27
|
+
$light: #F9FBFC !default; // surface-mute
|
|
28
|
+
$dark: #071437 !default; // text-heading
|
|
24
29
|
|
|
25
30
|
// Override `$theme-colors` so Bootstrap's $theme-colors map includes
|
|
26
31
|
// our brand. Anything we add here gets utility classes generated
|
|
27
32
|
// automatically (e.g. adding "accent" gives you bg-accent, text-accent).
|
|
28
33
|
$theme-colors: (
|
|
29
|
-
"primary":
|
|
34
|
+
"primary": $primary,
|
|
30
35
|
"secondary": $secondary,
|
|
31
|
-
"success":
|
|
32
|
-
"info":
|
|
33
|
-
"warning":
|
|
34
|
-
"danger":
|
|
35
|
-
"light":
|
|
36
|
-
"dark":
|
|
36
|
+
"success": $success,
|
|
37
|
+
"info": $info,
|
|
38
|
+
"warning": $warning,
|
|
39
|
+
"danger": $danger,
|
|
40
|
+
"light": $light,
|
|
41
|
+
"dark": $dark,
|
|
37
42
|
);
|
|
38
43
|
|
|
39
44
|
// Brand helper — set a product's primary ONCE and have the theme-colour map
|
|
40
|
-
// (so every .btn-primary / .bg-primary / .text-primary utility)
|
|
41
|
-
// follow, instead of overriding each in turn. Call it in
|
|
42
|
-
// pre-bootstrap variables, BEFORE
|
|
45
|
+
// (so every .btn-primary / .bg-primary / .text-primary utility), $link-color,
|
|
46
|
+
// and $link-hover-color follow, instead of overriding each in turn. Call it in
|
|
47
|
+
// the product's pre-bootstrap variables, BEFORE `bootstrap/scss/bootstrap`, e.g.:
|
|
43
48
|
//
|
|
44
|
-
//
|
|
45
|
-
//
|
|
49
|
+
// @include wui-brand-primary(#0EA5E9);
|
|
50
|
+
// @import "bootstrap/scss/bootstrap";
|
|
46
51
|
//
|
|
47
52
|
// It rewrites the globals in place, so the whole Bootstrap colour system derives
|
|
48
53
|
// from the one value. Runtime CSS tokens (--wui-primary*) are still overridden
|
|
@@ -51,16 +56,17 @@ $theme-colors: (
|
|
|
51
56
|
$primary: $primary !global;
|
|
52
57
|
$theme-colors: map-merge($theme-colors, ("primary": $primary)) !global;
|
|
53
58
|
$link-color: $primary !global;
|
|
59
|
+
$link-hover-color: mix(black, $primary, 12%) !global;
|
|
54
60
|
}
|
|
55
61
|
|
|
56
62
|
|
|
57
63
|
// ---- Body / text ----------------------------------------------------
|
|
58
|
-
$body-
|
|
59
|
-
$body-
|
|
64
|
+
// $body-bg left at Bootstrap's $white — do not restate pure defaults here.
|
|
65
|
+
$body-color: #252F4A; // text-1 from locked palette
|
|
60
66
|
$body-secondary-color: #4B5675;
|
|
61
|
-
$body-tertiary-color:
|
|
67
|
+
$body-tertiary-color: #687088; // AA on white (matches --wui-text-3); #78829D was only 3.5:1
|
|
62
68
|
$body-secondary-bg: #F9FBFC;
|
|
63
|
-
$body-tertiary-bg:
|
|
69
|
+
$body-tertiary-bg: #F5F6FA;
|
|
64
70
|
|
|
65
71
|
|
|
66
72
|
// ---- Borders --------------------------------------------------------
|
|
@@ -70,152 +76,140 @@ $border-color-translucent: rgba(13, 24, 43, 0.08);
|
|
|
70
76
|
// One ladder; every component derives from it (Bootstrap's own model). Set a
|
|
71
77
|
// component's radius by pointing it at a rung, never by hardcoding a px value —
|
|
72
78
|
// that is what let buttons drift to ~3x Bootstrap's.
|
|
73
|
-
|
|
74
|
-
$border-radius-
|
|
75
|
-
$border-radius
|
|
76
|
-
$border-radius-
|
|
77
|
-
$border-radius-
|
|
78
|
-
$border-radius-
|
|
79
|
+
// Only rungs that DIFFER from Bootstrap 5.3 are set: BS is 0.375/0.25/0.5/1/2rem;
|
|
80
|
+
// $border-radius-xl (1rem) and the font-weight ladder match BS and are left alone.
|
|
81
|
+
$border-radius: 0.5rem; // 8px — buttons, inputs, dropdowns (BS 0.375)
|
|
82
|
+
$border-radius-sm: 0.375rem; // 6px (BS 0.25)
|
|
83
|
+
$border-radius-lg: 0.75rem; // 12px — cards, toasts (BS 0.5)
|
|
84
|
+
$border-radius-2xl: 1.5rem; // 24px (BS 2rem via $border-radius-xxl)
|
|
85
|
+
$border-radius-pill: 9999px; // same visual as BS 50rem; explicit for token clarity
|
|
79
86
|
|
|
80
87
|
|
|
81
88
|
// ---- Typography -----------------------------------------------------
|
|
89
|
+
// Font-size base (1rem) and font-weight 300–700 match Bootstrap — not restated.
|
|
90
|
+
// h1/h2/h6 match Bootstrap's $font-size-base multipliers at 1rem — not restated;
|
|
91
|
+
// only h3–h5 are tighter than Bootstrap's scale.
|
|
82
92
|
$font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
83
|
-
$font-family-monospace:
|
|
93
|
+
$font-family-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
84
94
|
|
|
85
|
-
$
|
|
86
|
-
$line-height-base: 1.55;
|
|
95
|
+
$line-height-base: 1.55; // BS 1.5
|
|
87
96
|
|
|
88
|
-
$font-weight
|
|
89
|
-
$font-weight-normal: 400;
|
|
90
|
-
$font-weight-medium: 500;
|
|
91
|
-
$font-weight-semibold: 600;
|
|
92
|
-
$font-weight-bold: 700;
|
|
93
|
-
|
|
94
|
-
$headings-font-weight: 600;
|
|
95
|
-
$headings-line-height: 1.2;
|
|
97
|
+
$headings-font-weight: 600; // BS 500
|
|
96
98
|
$headings-letter-spacing: -0.02em;
|
|
97
|
-
$headings-color:
|
|
99
|
+
$headings-color: #071437;
|
|
98
100
|
|
|
99
|
-
$display-font-weight:
|
|
100
|
-
$display-line-height:
|
|
101
|
+
$display-font-weight: 500;
|
|
102
|
+
$display-line-height: 1.05;
|
|
101
103
|
|
|
102
|
-
$
|
|
103
|
-
$
|
|
104
|
-
$
|
|
105
|
-
$h4-font-size: 1.25rem; // 20px
|
|
106
|
-
$h5-font-size: 1.125rem; // 18px
|
|
107
|
-
$h6-font-size: 1rem; // 16px
|
|
104
|
+
$h3-font-size: 1.5rem; // 24px (BS 1.75rem)
|
|
105
|
+
$h4-font-size: 1.25rem; // 20px (BS 1.5rem)
|
|
106
|
+
$h5-font-size: 1.125rem; // 18px (BS 1.25rem)
|
|
108
107
|
|
|
109
108
|
|
|
110
109
|
// ---- Spacing --------------------------------------------------------
|
|
111
|
-
// Bootstrap
|
|
112
|
-
// for hero / section padding so
|
|
113
|
-
$spacer
|
|
110
|
+
// Bootstrap ladder is 0/.25/.5/1/1.5/3rem ($spacer = 1rem). We replace the map
|
|
111
|
+
// with the same 0–5 rungs plus 6/7/8/10/12 for hero / section padding so
|
|
112
|
+
// utilities like `py-8` exist. No need to restate $spacer itself.
|
|
114
113
|
$spacers: (
|
|
115
|
-
0:
|
|
116
|
-
1:
|
|
117
|
-
2:
|
|
118
|
-
3:
|
|
119
|
-
4:
|
|
120
|
-
5:
|
|
121
|
-
6:
|
|
122
|
-
7:
|
|
123
|
-
8:
|
|
124
|
-
10:
|
|
125
|
-
12:
|
|
114
|
+
0: 0,
|
|
115
|
+
1: 0.25rem, // 4px
|
|
116
|
+
2: 0.5rem, // 8px
|
|
117
|
+
3: 1rem, // 16px
|
|
118
|
+
4: 1.5rem, // 24px
|
|
119
|
+
5: 3rem, // 48px
|
|
120
|
+
6: 4.5rem, // 72px
|
|
121
|
+
7: 5rem, // 80px
|
|
122
|
+
8: 6rem, // 96px
|
|
123
|
+
10: 8rem, // 128px
|
|
124
|
+
12: 10rem, // 160px
|
|
126
125
|
);
|
|
127
126
|
|
|
128
|
-
|
|
129
|
-
//
|
|
130
|
-
//
|
|
131
|
-
//
|
|
132
|
-
// breathe properly on large monitors.
|
|
133
|
-
$container-max-widths: (
|
|
134
|
-
sm: 540px,
|
|
135
|
-
md: 720px,
|
|
136
|
-
lg: 960px,
|
|
137
|
-
xl: 1140px,
|
|
138
|
-
xxl: 1320px,
|
|
139
|
-
);
|
|
127
|
+
// $container-max-widths is intentionally NOT overridden — Bootstrap's
|
|
128
|
+
// 540/720/960/1140/1320 map is already what we want. The wider marketing
|
|
129
|
+
// canvas (1512px) is `.container-cloves` + `--wui-container-max` in tokens,
|
|
130
|
+
// not Bootstrap's stepped `.container`.
|
|
140
131
|
|
|
141
132
|
|
|
142
133
|
// ---- Shadows --------------------------------------------------------
|
|
143
|
-
//
|
|
144
|
-
//
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
$
|
|
134
|
+
// Elevation rule: in-page surfaces are FLAT (borders only).
|
|
135
|
+
// Bootstrap utility ladder (.shadow / .shadow-sm / .shadow-lg) is zeroed so
|
|
136
|
+
// products cannot reintroduce random depth. Floating UI (dropdown / modal /
|
|
137
|
+
// toast) uses the overlay rungs — same values as --wui-shadow-overlay* in tokens.
|
|
138
|
+
$wui-shadow-overlay: 0 8px 28px -6px rgba(7, 20, 55, 0.14);
|
|
139
|
+
$wui-shadow-overlay-lg: 0 24px 60px -16px rgba(7, 20, 55, 0.28);
|
|
140
|
+
|
|
141
|
+
$box-shadow-sm: none;
|
|
142
|
+
$box-shadow: none;
|
|
143
|
+
$box-shadow-lg: none;
|
|
148
144
|
|
|
149
145
|
|
|
150
146
|
// ---- Buttons --------------------------------------------------------
|
|
151
|
-
$btn-font-weight:
|
|
147
|
+
$btn-font-weight: 500;
|
|
152
148
|
// Height comes from --wui-control-height (see _components.scss) so buttons line
|
|
153
149
|
// up with inputs; the padding just needs to sit inside that.
|
|
154
|
-
$btn-padding-y:
|
|
155
|
-
$btn-padding-x:
|
|
156
|
-
$btn-padding-y-lg:
|
|
157
|
-
$btn-padding-x-lg:
|
|
158
|
-
$btn-border-radius:
|
|
159
|
-
$btn-border-radius-sm:
|
|
160
|
-
$btn-border-radius-lg:
|
|
161
|
-
$btn-transition:
|
|
150
|
+
$btn-padding-y: 0.5rem;
|
|
151
|
+
$btn-padding-x: 1.25rem;
|
|
152
|
+
$btn-padding-y-lg: 0.875rem;
|
|
153
|
+
$btn-padding-x-lg: 1.75rem;
|
|
154
|
+
$btn-border-radius: $border-radius; // 8px
|
|
155
|
+
$btn-border-radius-sm: $border-radius-sm; // 6px
|
|
156
|
+
$btn-border-radius-lg: $border-radius-lg; // 12px
|
|
157
|
+
$btn-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
|
162
158
|
|
|
163
159
|
|
|
164
160
|
// ---- Forms ----------------------------------------------------------
|
|
165
|
-
//
|
|
166
|
-
//
|
|
167
|
-
//
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
$input-
|
|
171
|
-
$input-disabled-bg: #F5F6FA; // --wui-bg-muted
|
|
172
|
-
$input-border-color: $border-color;
|
|
161
|
+
// Bootstrap `.form-control` is the field skin; post-CSS in wui/_controls.scss
|
|
162
|
+
// layers shared height / hover / focus / invalid on `.form-control` and the
|
|
163
|
+
// `.input` alias together. Here only $input-* BS vars.
|
|
164
|
+
$input-bg: #FFFFFF;
|
|
165
|
+
$input-disabled-bg: #F5F6FA; // --wui-bg-muted
|
|
166
|
+
$input-border-color: $border-color;
|
|
173
167
|
// $input-focus-border-color is intentionally NOT overridden. Setting it to $primary here
|
|
174
168
|
// captures the LIBRARY's $primary (this file compiles before a product's brand override),
|
|
175
|
-
// leaking indigo into every product
|
|
176
|
-
//
|
|
177
|
-
//
|
|
178
|
-
$input-focus-
|
|
179
|
-
$input-
|
|
180
|
-
$input-padding-
|
|
181
|
-
$input-
|
|
182
|
-
$input-
|
|
183
|
-
$input-placeholder-color: #99A1B7; // --wui-text-4
|
|
169
|
+
// leaking indigo into every product. Bootstrap's !default derives it from brand $primary;
|
|
170
|
+
// post-CSS focus uses var(--color-primary) so runtime rebrand tracks.
|
|
171
|
+
$input-focus-box-shadow: none; // border IS the focus cue
|
|
172
|
+
$input-focus-color: $body-color;
|
|
173
|
+
$input-padding-y: 0.5rem; // filler inside --wui-control-height (44px)
|
|
174
|
+
$input-padding-x: 0.875rem; // 14px
|
|
175
|
+
$input-border-radius: $border-radius;
|
|
176
|
+
$input-placeholder-color: #99A1B7; // --wui-text-4
|
|
184
177
|
|
|
185
178
|
|
|
186
179
|
// ---- Cards ----------------------------------------------------------
|
|
187
|
-
$card-border-color:
|
|
188
|
-
$card-border-radius:
|
|
189
|
-
// Flat surfaces — no drop shadow on default .card. Depth is
|
|
190
|
-
//
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
$card-
|
|
194
|
-
$card-spacer-y: 1.5rem;
|
|
195
|
-
$card-spacer-x: 1.5rem;
|
|
180
|
+
$card-border-color: $border-color;
|
|
181
|
+
$card-border-radius: $border-radius-lg;
|
|
182
|
+
// Flat surfaces — no drop shadow on default .card. Depth is border + tint.
|
|
183
|
+
// `.card-lifted` is a 1px hover translate only (not a shadow).
|
|
184
|
+
$card-box-shadow: none;
|
|
185
|
+
$card-spacer-y: 1.5rem;
|
|
186
|
+
$card-spacer-x: 1.5rem;
|
|
196
187
|
|
|
197
188
|
|
|
198
189
|
// ---- Nav / dropdown --------------------------------------------------
|
|
199
|
-
$nav-link-font-weight:
|
|
200
|
-
$dropdown-border-color:
|
|
190
|
+
$nav-link-font-weight: 500;
|
|
191
|
+
$dropdown-border-color: $border-color;
|
|
201
192
|
$dropdown-border-radius: $border-radius;
|
|
202
|
-
$dropdown-box-shadow:
|
|
193
|
+
$dropdown-box-shadow: $wui-shadow-overlay;
|
|
203
194
|
|
|
204
195
|
|
|
205
196
|
// ---- Modals + toasts ------------------------------------------------
|
|
206
|
-
$modal-content-border-color:
|
|
207
|
-
$modal-content-border-radius: $border-radius-xl
|
|
208
|
-
$modal-content-box-shadow-xs: $
|
|
197
|
+
$modal-content-border-color: $border-color;
|
|
198
|
+
$modal-content-border-radius: 1rem; // BS $border-radius-xl (1rem) — literal because we do not restate that rung
|
|
199
|
+
$modal-content-box-shadow-xs: $wui-shadow-overlay-lg;
|
|
209
200
|
|
|
210
|
-
$toast-border-color:
|
|
211
|
-
$toast-border-radius:
|
|
212
|
-
$toast-box-shadow:
|
|
201
|
+
$toast-border-color: $border-color;
|
|
202
|
+
$toast-border-radius: $border-radius-lg;
|
|
203
|
+
$toast-box-shadow: $wui-shadow-overlay-lg;
|
|
213
204
|
|
|
214
205
|
|
|
215
206
|
// ---- Links ----------------------------------------------------------
|
|
216
|
-
$link-color
|
|
217
|
-
|
|
218
|
-
$
|
|
207
|
+
// $link-color left at Bootstrap's default ($primary) so it tracks brand $primary.
|
|
208
|
+
// Hover is a darkened mix of $primary — never a hard-coded indigo — so a product
|
|
209
|
+
// that sets $primary (or calls wui-brand-primary) gets a matching hover. Approximate
|
|
210
|
+
// of Bootstrap's shift-color($link-color, 20%) without importing BS functions here.
|
|
211
|
+
$link-hover-color: mix(black, $primary, 12%);
|
|
212
|
+
$link-decoration: none; // BS default is underline
|
|
219
213
|
$link-hover-decoration: underline;
|
|
220
214
|
|
|
221
215
|
|
|
@@ -224,8 +218,8 @@ $link-hover-decoration: underline;
|
|
|
224
218
|
// LIBRARY's $primary (this file compiles before a product's brand override), so the ring
|
|
225
219
|
// leaked indigo into every product. Bootstrap's !default `rgba($primary, $focus-ring-opacity)`
|
|
226
220
|
// is evaluated after the brand override, so it tracks the brand correctly.
|
|
227
|
-
$focus-ring-
|
|
228
|
-
$focus-ring-
|
|
221
|
+
// $focus-ring-blur matches BS (0) — not restated.
|
|
222
|
+
$focus-ring-width: 3px; // BS 0.25rem (4px)
|
|
229
223
|
|
|
230
224
|
|
|
231
225
|
// ---- Table ----------------------------------------------------------
|
|
@@ -241,5 +235,5 @@ $focus-ring-blur: 0;
|
|
|
241
235
|
// Bootstrap. Variants that set their own padding are unaffected — theirs still wins.
|
|
242
236
|
// (Cell colour and header background take the same approach one level down, through
|
|
243
237
|
// `--bs-table-color` / `--bs-table-bg`; see the base `.table` rules.)
|
|
244
|
-
$table-cell-padding-y:
|
|
245
|
-
$table-cell-padding-x:
|
|
238
|
+
$table-cell-padding-y: 0.75rem; // 12px
|
|
239
|
+
$table-cell-padding-x: 0.75rem; // 12px
|
package/scss/_wui-aliases.scss
CHANGED
|
@@ -8,168 +8,169 @@
|
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
10
|
// Surfaces
|
|
11
|
-
--color-bg:
|
|
12
|
-
--color-bg-subtle:
|
|
13
|
-
--color-bg-muted:
|
|
14
|
-
--color-surface:
|
|
11
|
+
--color-bg: var(--wui-bg-page);
|
|
12
|
+
--color-bg-subtle: var(--wui-bg-elevated);
|
|
13
|
+
--color-bg-muted: var(--wui-bg-muted);
|
|
14
|
+
--color-surface: var(--wui-bg-light);
|
|
15
15
|
|
|
16
16
|
// Borders
|
|
17
|
-
--color-border:
|
|
18
|
-
--color-border-light:
|
|
17
|
+
--color-border: var(--wui-border-light);
|
|
18
|
+
--color-border-light: var(--wui-border-soft);
|
|
19
19
|
--color-border-strong: var(--wui-text-5);
|
|
20
20
|
|
|
21
21
|
// Text ramp
|
|
22
|
-
--color-text:
|
|
23
|
-
--color-text-muted:
|
|
24
|
-
--color-text-subtle:
|
|
22
|
+
--color-text: var(--wui-text-heading);
|
|
23
|
+
--color-text-muted: var(--wui-text-2);
|
|
24
|
+
--color-text-subtle: var(--wui-text-3);
|
|
25
25
|
|
|
26
26
|
// Bootstrap colour vars bridged onto app tokens so un-tokenised BS text
|
|
27
27
|
// flips with data-theme.
|
|
28
|
-
--bs-body-color:
|
|
29
|
-
--bs-emphasis-color:
|
|
30
|
-
--bs-secondary-color:
|
|
31
|
-
--bs-tertiary-color:
|
|
32
|
-
--bs-body-bg:
|
|
33
|
-
--bs-border-color:
|
|
28
|
+
--bs-body-color: var(--color-text);
|
|
29
|
+
--bs-emphasis-color: var(--color-text);
|
|
30
|
+
--bs-secondary-color: var(--color-text-muted);
|
|
31
|
+
--bs-tertiary-color: var(--color-text-subtle);
|
|
32
|
+
--bs-body-bg: var(--color-bg);
|
|
33
|
+
--bs-border-color: var(--color-border);
|
|
34
34
|
|
|
35
35
|
// Brand
|
|
36
|
-
--color-primary:
|
|
36
|
+
--color-primary: var(--wui-primary);
|
|
37
37
|
--color-primary-hover: var(--wui-primary-pressed);
|
|
38
|
-
--color-primary-soft:
|
|
38
|
+
--color-primary-soft: var(--wui-primary-10);
|
|
39
39
|
// Text/icon colour for content sitting ON a solid --color-primary fill — see
|
|
40
40
|
// --wui-primary-text for why this is a different axis from the -text tokens below.
|
|
41
|
-
--color-primary-text:
|
|
41
|
+
--color-primary-text: var(--wui-primary-text);
|
|
42
42
|
|
|
43
43
|
// Semantic status ramps
|
|
44
|
-
--color-info-active:
|
|
45
|
-
--color-info:
|
|
46
|
-
--color-info-50:
|
|
47
|
-
--color-info-30:
|
|
48
|
-
--color-info-20:
|
|
49
|
-
--color-info-10:
|
|
50
|
-
--color-info-5:
|
|
51
|
-
--color-info-strong:
|
|
52
|
-
--color-info-soft:
|
|
44
|
+
--color-info-active: var(--wui-info-active);
|
|
45
|
+
--color-info: var(--wui-info);
|
|
46
|
+
--color-info-50: var(--wui-info-50);
|
|
47
|
+
--color-info-30: var(--wui-info-30);
|
|
48
|
+
--color-info-20: var(--wui-info-20);
|
|
49
|
+
--color-info-10: var(--wui-info-10);
|
|
50
|
+
--color-info-5: var(--wui-info-5);
|
|
51
|
+
--color-info-strong: var(--color-info-active);
|
|
52
|
+
--color-info-soft: var(--color-info-10);
|
|
53
53
|
// Use this — never --color-info — when the colour IS the text.
|
|
54
|
-
--color-info-text:
|
|
54
|
+
--color-info-text: var(--wui-info-text);
|
|
55
55
|
|
|
56
56
|
--color-success-active: var(--wui-success-active);
|
|
57
|
-
--color-success:
|
|
58
|
-
--color-success-50:
|
|
59
|
-
--color-success-30:
|
|
60
|
-
--color-success-20:
|
|
61
|
-
--color-success-10:
|
|
62
|
-
--color-success-5:
|
|
57
|
+
--color-success: var(--wui-success);
|
|
58
|
+
--color-success-50: var(--wui-success-50);
|
|
59
|
+
--color-success-30: var(--wui-success-30);
|
|
60
|
+
--color-success-20: var(--wui-success-20);
|
|
61
|
+
--color-success-10: var(--wui-success-10);
|
|
62
|
+
--color-success-5: var(--wui-success-5);
|
|
63
63
|
--color-success-strong: var(--color-success-active);
|
|
64
|
-
--color-success-soft:
|
|
64
|
+
--color-success-soft: var(--color-success-10);
|
|
65
65
|
// Use this — never --color-success — when the colour IS the text.
|
|
66
|
-
--color-success-text:
|
|
66
|
+
--color-success-text: var(--wui-success-text);
|
|
67
67
|
|
|
68
68
|
--color-warning-active: var(--wui-warning-active);
|
|
69
|
-
--color-warning:
|
|
70
|
-
--color-warning-50:
|
|
71
|
-
--color-warning-30:
|
|
72
|
-
--color-warning-20:
|
|
73
|
-
--color-warning-10:
|
|
74
|
-
--color-warning-5:
|
|
69
|
+
--color-warning: var(--wui-warning);
|
|
70
|
+
--color-warning-50: var(--wui-warning-50);
|
|
71
|
+
--color-warning-30: var(--wui-warning-30);
|
|
72
|
+
--color-warning-20: var(--wui-warning-20);
|
|
73
|
+
--color-warning-10: var(--wui-warning-10);
|
|
74
|
+
--color-warning-5: var(--wui-warning-5);
|
|
75
75
|
--color-warning-strong: var(--color-warning-active);
|
|
76
|
-
--color-warning-soft:
|
|
76
|
+
--color-warning-soft: var(--color-warning-10);
|
|
77
77
|
// Use this — never --color-warning — when the colour IS the text.
|
|
78
|
-
--color-warning-text:
|
|
79
|
-
|
|
80
|
-
--color-danger-active:
|
|
81
|
-
--color-danger:
|
|
82
|
-
--color-danger-50:
|
|
83
|
-
--color-danger-30:
|
|
84
|
-
--color-danger-20:
|
|
85
|
-
--color-danger-10:
|
|
86
|
-
--color-danger-5:
|
|
87
|
-
--color-danger-strong:
|
|
88
|
-
--color-danger-soft:
|
|
78
|
+
--color-warning-text: var(--wui-warning-text);
|
|
79
|
+
|
|
80
|
+
--color-danger-active: var(--wui-danger-active);
|
|
81
|
+
--color-danger: var(--wui-danger);
|
|
82
|
+
--color-danger-50: var(--wui-danger-50);
|
|
83
|
+
--color-danger-30: var(--wui-danger-30);
|
|
84
|
+
--color-danger-20: var(--wui-danger-20);
|
|
85
|
+
--color-danger-10: var(--wui-danger-10);
|
|
86
|
+
--color-danger-5: var(--wui-danger-5);
|
|
87
|
+
--color-danger-strong: var(--color-danger-active);
|
|
88
|
+
--color-danger-soft: var(--color-danger-10);
|
|
89
89
|
// Use this — never --color-danger — when the colour IS the text.
|
|
90
|
-
--color-danger-text:
|
|
90
|
+
--color-danger-text: var(--wui-danger-text);
|
|
91
91
|
|
|
92
92
|
// Accent → warning ramp
|
|
93
|
-
--color-accent:
|
|
94
|
-
--color-accent-soft:
|
|
93
|
+
--color-accent: var(--color-warning);
|
|
94
|
+
--color-accent-soft: var(--color-warning-soft);
|
|
95
95
|
|
|
96
96
|
// Scrim — media hover overlays (logo uploader)
|
|
97
|
-
--color-scrim:
|
|
98
|
-
--color-on-scrim:
|
|
97
|
+
--color-scrim: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
|
|
98
|
+
--color-on-scrim: var(--wui-bg-light);
|
|
99
99
|
|
|
100
|
-
// Elevation — in-page
|
|
100
|
+
// Elevation — in-page flat; only floating overlays lift (matches zeroed BS
|
|
101
|
+
// $box-shadow* utilities and --wui-shadow-card* none).
|
|
101
102
|
--shadow-sm: none;
|
|
102
103
|
--shadow-md: none;
|
|
103
104
|
--shadow-lg: none;
|
|
104
|
-
--shadow-overlay:
|
|
105
|
+
--shadow-overlay: var(--wui-shadow-overlay);
|
|
105
106
|
--shadow-overlay-lg: var(--wui-shadow-overlay-lg);
|
|
106
107
|
|
|
107
108
|
// Corner radii
|
|
108
109
|
--radius-sm: var(--wui-radius-sm);
|
|
109
|
-
--radius:
|
|
110
|
+
--radius: var(--wui-radius);
|
|
110
111
|
--radius-lg: var(--wui-radius-lg);
|
|
111
112
|
--radius-xl: var(--wui-radius-xl);
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
:root[data-theme="dark"] {
|
|
115
|
-
--color-bg:
|
|
116
|
-
--color-bg-subtle:
|
|
117
|
-
--color-bg-muted:
|
|
118
|
-
--color-surface:
|
|
116
|
+
--color-bg: var(--wui-dark-bg-page);
|
|
117
|
+
--color-bg-subtle: var(--wui-dark-bg-elevated);
|
|
118
|
+
--color-bg-muted: var(--wui-dark-bg-muted);
|
|
119
|
+
--color-surface: var(--wui-dark-bg-surface);
|
|
119
120
|
|
|
120
|
-
--color-border:
|
|
121
|
+
--color-border: var(--wui-dark-border);
|
|
121
122
|
--color-border-strong: var(--wui-dark-border-strong);
|
|
122
123
|
|
|
123
|
-
--color-text:
|
|
124
|
-
--color-text-muted:
|
|
125
|
-
--color-text-subtle:
|
|
124
|
+
--color-text: var(--wui-dark-text);
|
|
125
|
+
--color-text-muted: var(--wui-dark-text-muted);
|
|
126
|
+
--color-text-subtle: var(--wui-dark-text-subtle);
|
|
126
127
|
|
|
127
128
|
// Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
|
|
128
129
|
// named-var text/body/border utilities — .text-body-secondary, .text-muted,
|
|
129
130
|
// .text-body-emphasis, .border, backgrounds — flip with the theme. Declared
|
|
130
131
|
// here (not only in :root) so the dark theming is explicit and cannot be lost
|
|
131
132
|
// to a later-loading consumer rule that scopes --bs-* under [data-theme].
|
|
132
|
-
--bs-body-color:
|
|
133
|
-
--bs-emphasis-color:
|
|
134
|
-
--bs-secondary-color:
|
|
135
|
-
--bs-tertiary-color:
|
|
136
|
-
--bs-body-bg:
|
|
137
|
-
--bs-border-color:
|
|
138
|
-
--bs-secondary-bg:
|
|
139
|
-
--bs-tertiary-bg:
|
|
133
|
+
--bs-body-color: var(--color-text);
|
|
134
|
+
--bs-emphasis-color: var(--color-text);
|
|
135
|
+
--bs-secondary-color: var(--color-text-muted);
|
|
136
|
+
--bs-tertiary-color: var(--color-text-subtle);
|
|
137
|
+
--bs-body-bg: var(--color-bg);
|
|
138
|
+
--bs-border-color: var(--color-border);
|
|
139
|
+
--bs-secondary-bg: var(--wui-dark-bg-surface);
|
|
140
|
+
--bs-tertiary-bg: var(--wui-dark-bg-muted);
|
|
140
141
|
// Bootstrap's .bg-* / .text-secondary / .bg-body-tertiary utilities read the --bs-*-RGB
|
|
141
142
|
// triplets (for -opacity support), NOT the plain vars above — without these overrides they
|
|
142
143
|
// keep their compiled LIGHT triplet in dark mode (a white .bg-body on a dark portal). The
|
|
143
144
|
// triplets mirror the dark hexes in _tokens.scss (Bootstrap's own --bs-x + --bs-x-rgb pattern).
|
|
144
|
-
--bs-body-bg-rgb:
|
|
145
|
-
--bs-body-color-rgb:
|
|
146
|
-
--bs-emphasis-color-rgb:
|
|
147
|
-
--bs-secondary-color-rgb: 180, 185, 198;
|
|
148
|
-
--bs-tertiary-color-rgb:
|
|
149
|
-
--bs-secondary-bg-rgb:
|
|
150
|
-
--bs-tertiary-bg-rgb:
|
|
151
|
-
--bs-border-color-rgb:
|
|
152
|
-
|
|
153
|
-
--color-primary:
|
|
145
|
+
--bs-body-bg-rgb: 15, 17, 23; // --wui-dark-bg-page #0f1117
|
|
146
|
+
--bs-body-color-rgb: 230, 232, 238; // --wui-dark-text #e6e8ee
|
|
147
|
+
--bs-emphasis-color-rgb: 230, 232, 238; // --wui-dark-text #e6e8ee
|
|
148
|
+
--bs-secondary-color-rgb: 180, 185, 198; // --wui-dark-text-muted #b4b9c6
|
|
149
|
+
--bs-tertiary-color-rgb: 138, 144, 160; // --wui-dark-text-subtle #8a90a0
|
|
150
|
+
--bs-secondary-bg-rgb: 24, 27, 35; // --wui-dark-bg-surface #181b23
|
|
151
|
+
--bs-tertiary-bg-rgb: 35, 39, 51; // --wui-dark-bg-muted #232733
|
|
152
|
+
--bs-border-color-rgb: 42, 47, 58; // --wui-dark-border #2a2f3a
|
|
153
|
+
|
|
154
|
+
--color-primary: var(--wui-dark-primary);
|
|
154
155
|
--color-primary-hover: var(--wui-dark-primary-hover);
|
|
155
|
-
--color-primary-soft:
|
|
156
|
+
--color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
|
|
156
157
|
|
|
157
158
|
// On a dark surface the FILL colours are already the readable ones — the darkened
|
|
158
159
|
// `-text` values would sink into the background. So dark mode maps text back to the
|
|
159
160
|
// bright tokens rather than inheriting light mode's.
|
|
160
|
-
--color-success-text:
|
|
161
|
-
--color-danger-text:
|
|
162
|
-
--color-warning-text:
|
|
163
|
-
--color-info-text:
|
|
164
|
-
|
|
165
|
-
--color-success-soft:
|
|
166
|
-
--color-warning-soft:
|
|
167
|
-
--color-danger-soft:
|
|
168
|
-
--color-info-soft:
|
|
169
|
-
--color-accent-soft:
|
|
170
|
-
|
|
171
|
-
--color-scrim:
|
|
172
|
-
--color-on-scrim:
|
|
161
|
+
--color-success-text: var(--wui-success);
|
|
162
|
+
--color-danger-text: var(--wui-danger);
|
|
163
|
+
--color-warning-text: var(--wui-warning);
|
|
164
|
+
--color-info-text: var(--wui-info);
|
|
165
|
+
|
|
166
|
+
--color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
|
|
167
|
+
--color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
|
|
168
|
+
--color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
|
|
169
|
+
--color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
|
|
170
|
+
--color-accent-soft: var(--color-warning-soft);
|
|
171
|
+
|
|
172
|
+
--color-scrim: color-mix(in srgb, black 62%, transparent);
|
|
173
|
+
--color-on-scrim: var(--wui-bg-light);
|
|
173
174
|
|
|
174
175
|
color-scheme: dark;
|
|
175
176
|
}
|