@bagelink/vue 1.15.98 → 1.15.102
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/components/form/inputs/RichText/index.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/TextInput.vue.d.ts.map +1 -1
- package/dist/components/layout/AppSidebar.vue.d.ts +8 -0
- package/dist/components/layout/AppSidebar.vue.d.ts.map +1 -1
- package/dist/index.cjs +95 -95
- package/dist/index.mjs +8633 -8614
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/form/inputs/RichText/index.vue +26 -0
- package/src/components/form/inputs/TextInput.vue +3 -2
- package/src/components/layout/AppSidebar.vue +46 -1
- package/src/styles/dark.css +39 -1
- package/src/styles/theme.css +1 -0
package/package.json
CHANGED
|
@@ -76,7 +76,23 @@ const currentInputColor = computed(() => {
|
|
|
76
76
|
return '#000'
|
|
77
77
|
})
|
|
78
78
|
|
|
79
|
+
// Whether the app is in dark mode (the class lives on <html> per useTheme()).
|
|
80
|
+
// The editor iframe is a separate document, so `.bgl-dark-mode` doesn't cascade
|
|
81
|
+
// into it — we read this flag in JS and inject explicit colors instead.
|
|
82
|
+
const isDarkMode = computed(() => {
|
|
83
|
+
void forceUpdate.value
|
|
84
|
+
if (typeof document !== 'undefined') {
|
|
85
|
+
return document.documentElement.classList.contains('bgl-dark-mode')
|
|
86
|
+
}
|
|
87
|
+
return false
|
|
88
|
+
})
|
|
89
|
+
|
|
79
90
|
const currentTextColor = computed(() => {
|
|
91
|
+
// In dark mode we keep the editing surface light (see `.content-area` CSS),
|
|
92
|
+
// so the text must stay dark regardless of the (light-on-dark) input color.
|
|
93
|
+
if (isDarkMode.value) {
|
|
94
|
+
return props.textColor || '#1a1a1a'
|
|
95
|
+
}
|
|
80
96
|
const inputColor = currentInputColor.value
|
|
81
97
|
const textColor = props.textColor || (inputColor && inputColor.length > 0 && inputColor !== '#000' ? inputColor : 'inherit')
|
|
82
98
|
return textColor
|
|
@@ -3771,6 +3787,16 @@ line-height: 1.65;
|
|
|
3771
3787
|
font-size: var(--richtext-font-size, 16px);
|
|
3772
3788
|
}
|
|
3773
3789
|
|
|
3790
|
+
/* Dark mode: keep the editing surface light (a slightly-dimmed off-white)
|
|
3791
|
+
instead of the deep dark surface, so the dark editor text stays readable.
|
|
3792
|
+
The iframe body itself is transparent, so this `.content-area` background is
|
|
3793
|
+
what shows behind the text. The iframe's own text color is forced dark in JS
|
|
3794
|
+
(editorStylesContent) when `.bgl-dark-mode` is active. */
|
|
3795
|
+
.bgl-dark-mode .content-area,
|
|
3796
|
+
.bgl-dark-mode .rich-text-editor--basic .content-area {
|
|
3797
|
+
background: #ececec !important;
|
|
3798
|
+
}
|
|
3799
|
+
|
|
3774
3800
|
</style>
|
|
3775
3801
|
|
|
3776
3802
|
<style scoped>
|
|
@@ -239,8 +239,9 @@ align-items: center;
|
|
|
239
239
|
gap: 0.5rem;
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
-
.bagel-input input:disabled
|
|
243
|
-
|
|
242
|
+
.bagel-input input:disabled,
|
|
243
|
+
.bagel-input textarea:disabled {
|
|
244
|
+
background: var(--input-disabled-bg);
|
|
244
245
|
}
|
|
245
246
|
|
|
246
247
|
.textInputIconWrap .bgl_icon-font {
|
|
@@ -17,6 +17,13 @@ interface Props {
|
|
|
17
17
|
navLinks: LinkWithAction[]
|
|
18
18
|
footerLinks?: LinkWithAction[]
|
|
19
19
|
logo?: string
|
|
20
|
+
/** Optional dedicated logo for dark mode. When set, it replaces `logo`
|
|
21
|
+
* while `.bgl-dark-mode` is active. */
|
|
22
|
+
logoDark?: string
|
|
23
|
+
/** When no `logoDark` is provided, apply a filter that turns the logo white
|
|
24
|
+
* in dark mode. Set to `false` to keep the logo's original colors (e.g. a
|
|
25
|
+
* full-color logo that already reads on dark). Defaults to `true`. */
|
|
26
|
+
logoWhitenInDark?: boolean
|
|
20
27
|
logoAlt?: string
|
|
21
28
|
card?: boolean
|
|
22
29
|
bgColor?: string
|
|
@@ -39,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
39
46
|
activeColor: 'var(--bgl-primary)',
|
|
40
47
|
logoAlt: 'Logo',
|
|
41
48
|
logoHeight: '2rem',
|
|
49
|
+
logoWhitenInDark: true,
|
|
42
50
|
name: 'App Name',
|
|
43
51
|
footerLinks: () => [],
|
|
44
52
|
})
|
|
@@ -160,8 +168,21 @@ const sidebarStyles = computed(() => {
|
|
|
160
168
|
:class="{ 'mx-1': isVisuallyOpen, 'mx-05': !isVisuallyOpen
|
|
161
169
|
}"
|
|
162
170
|
>
|
|
171
|
+
<!-- Light/base logo. Hidden in dark mode only when a dedicated dark
|
|
172
|
+
logo exists; otherwise it stays and (optionally) gets whitened. -->
|
|
163
173
|
<img
|
|
164
|
-
v-if="props.logo" :src="props.logo" :alt="props.logoAlt"
|
|
174
|
+
v-if="props.logo" :src="props.logo" :alt="props.logoAlt"
|
|
175
|
+
class="contain sidebar-logo sidebar-logo-light"
|
|
176
|
+
:class="{
|
|
177
|
+
'sidebar-logo-whiten': props.logoWhitenInDark && !props.logoDark,
|
|
178
|
+
'has-dark-logo': !!props.logoDark,
|
|
179
|
+
}"
|
|
180
|
+
:style="{ height: props.logoHeight }"
|
|
181
|
+
>
|
|
182
|
+
<!-- Dedicated dark-mode logo (shown only in dark mode). -->
|
|
183
|
+
<img
|
|
184
|
+
v-if="props.logoDark" :src="props.logoDark" :alt="props.logoAlt"
|
|
185
|
+
class="contain sidebar-logo sidebar-logo-dark"
|
|
165
186
|
:style="{ height: props.logoHeight }"
|
|
166
187
|
>
|
|
167
188
|
<slot name="brand" v-bind="{ isOpen: isVisuallyOpen }">
|
|
@@ -220,6 +241,30 @@ outline: 1px solid var(--bgl-border-color);
|
|
|
220
241
|
outline-offset: -1px;
|
|
221
242
|
}
|
|
222
243
|
|
|
244
|
+
/* ---- Logo theming (CSS-only, no JS) ---------------------------------------
|
|
245
|
+
The dark logo is hidden by default (light mode) and the light logo shown.
|
|
246
|
+
In dark mode we flip them — but only when a dedicated dark logo actually
|
|
247
|
+
exists (`.has-dark-logo`). With no dark logo the light one stays: whitened
|
|
248
|
+
when `logoWhitenInDark` is on, or untouched when it's off. */
|
|
249
|
+
.sidebar-logo-dark {
|
|
250
|
+
display: none;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.bgl-dark-mode .sidebar-logo-light.has-dark-logo {
|
|
254
|
+
display: none;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.bgl-dark-mode .sidebar-logo-dark {
|
|
258
|
+
display: block;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Whiten the light logo in dark mode when no dedicated dark logo is supplied.
|
|
262
|
+
`brightness(0)` flattens it to solid black (regardless of original colors),
|
|
263
|
+
then `invert(1)` flips that to solid white. Opt out via `logoWhitenInDark`. */
|
|
264
|
+
.bgl-dark-mode .sidebar-logo-whiten {
|
|
265
|
+
filter: brightness(0) invert(1);
|
|
266
|
+
}
|
|
267
|
+
|
|
223
268
|
.app-sidebar {
|
|
224
269
|
transition: width 0.4s ease;
|
|
225
270
|
--bgl-input-font-size: 0.875rem;
|
package/src/styles/dark.css
CHANGED
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
--bgl-box-bg: var(--bgl-dm-surface);
|
|
77
77
|
--bgl-popup-bg: var(--bgl-dm-surface);
|
|
78
78
|
--bgl-input-bg: var(--bgl-dm-input);
|
|
79
|
+
/* disabled inputs: a flat, slightly grayed surface so the field clearly reads
|
|
80
|
+
as inert (washed-out, not a usable recessed field) without becoming a bright
|
|
81
|
+
patch. Mixing in a touch of gray lifts it off the deep input bg and gives the
|
|
82
|
+
"greyed-out / not active" look. */
|
|
83
|
+
--input-disabled-bg: color-mix(in oklab, var(--bgl-gray) 14%, var(--bgl-dm-surface));
|
|
79
84
|
--bgl-selected: var(--bgl-dm-surface-2);
|
|
80
85
|
--bgl-skeleton-bg: var(--bgl-dm-surface-2);
|
|
81
86
|
--bgl-skeleton-pulse: var(--bgl-dm-surface);
|
|
@@ -99,7 +104,8 @@
|
|
|
99
104
|
* secondary labels, flat pills) and as faint fills/borders. On a dark
|
|
100
105
|
* surface translucent black is invisible, so flip them to translucent
|
|
101
106
|
* LIGHT. One remap fixes every `var(--bgl-black-tint)` usage at once. */
|
|
102
|
-
--bgl-black-tint: rgba(219, 220, 220, 0.5);
|
|
107
|
+
--bgl-black-tint: rgba(219, 220, 220, 0.5);
|
|
108
|
+
/* muted light text */
|
|
103
109
|
--bgl-gray-tint: rgba(219, 220, 220, 0.16);
|
|
104
110
|
--bgl-gray-tint-dark: rgba(219, 220, 220, 0.32);
|
|
105
111
|
|
|
@@ -206,6 +212,10 @@
|
|
|
206
212
|
filter: invert(0.8);
|
|
207
213
|
}
|
|
208
214
|
|
|
215
|
+
.bgl-dark-mode .logoLight {
|
|
216
|
+
filter: brightness(0) invert(1);
|
|
217
|
+
}
|
|
218
|
+
|
|
209
219
|
/* Text selection */
|
|
210
220
|
.bgl-dark-mode ::selection {
|
|
211
221
|
color: var(--bgl-dm-text);
|
|
@@ -245,6 +255,7 @@
|
|
|
245
255
|
color: var(--bgl-dm-text);
|
|
246
256
|
border-color: var(--bgl-dm-border);
|
|
247
257
|
}
|
|
258
|
+
|
|
248
259
|
/* Hover/active on the dark secondary button: lift one step instead of the
|
|
249
260
|
default lighten-filter which would wash the light original out. */
|
|
250
261
|
.bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border):hover,
|
|
@@ -326,9 +337,11 @@
|
|
|
326
337
|
background: var(--bgl-bg);
|
|
327
338
|
color: var(--bgl-text-color);
|
|
328
339
|
}
|
|
340
|
+
|
|
329
341
|
.bgl-dark-mode #bgl-app-sidebar .cardWrapSide {
|
|
330
342
|
background-color: var(--bgl-box-bg) !important;
|
|
331
343
|
}
|
|
344
|
+
|
|
332
345
|
/* Nav buttons get their bg injected inline from props.bgColor; if a project
|
|
333
346
|
still passes a physical color (e.g. "white"), force non-active buttons back
|
|
334
347
|
to the card surface so they don't stay bright in dark mode. The active one
|
|
@@ -371,4 +384,29 @@
|
|
|
371
384
|
come only from .code-editor-grandpa, not from the generic input ring. */
|
|
372
385
|
.bgl-dark-mode .bagel-input .code-input {
|
|
373
386
|
box-shadow: none;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* Disabled inputs read as inert: greyed-out (washed) fill + muted text so it's
|
|
390
|
+
visually clear the field is not active. The --input-disabled-bg fill is set in
|
|
391
|
+
the dark palette above. */
|
|
392
|
+
.bgl-dark-mode .bagel-input input:disabled,
|
|
393
|
+
.bgl-dark-mode .bagel-input textarea:disabled,
|
|
394
|
+
.bgl-dark-mode .bagel-input select:disabled {
|
|
395
|
+
color: var(--bgl-dm-text-muted);
|
|
396
|
+
-webkit-text-fill-color: var(--bgl-dm-text-muted);
|
|
397
|
+
cursor: not-allowed;
|
|
398
|
+
box-shadow: none !important;
|
|
399
|
+
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.bgl-dark-mode .darkmodeHide {
|
|
403
|
+
display: none !important;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.darkmodeShow {
|
|
407
|
+
display: none !important;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.bgl-dark-mode .darkmodeShow {
|
|
411
|
+
display: initial !important;
|
|
374
412
|
}
|
package/src/styles/theme.css
CHANGED