@keenmate/web-grid 1.0.0 → 1.0.1
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 +12 -3
- package/dist/modules/toolbar/index.d.ts +1 -1
- package/dist/types.d.ts +3 -0
- package/dist/web-grid.js +1759 -1741
- package/dist/web-grid.umd.js +77 -77
- package/package.json +1 -1
- package/src/css/_dark-mode.css +44 -7
- package/src/css/_dialogs.css +1 -1
- package/src/css/_variables.css +1 -0
package/package.json
CHANGED
package/src/css/_dark-mode.css
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
/* ==============================================================================
|
|
2
|
-
DARK MODE SUPPORT
|
|
2
|
+
DARK MODE / LIGHT MODE SUPPORT
|
|
3
3
|
==============================================================================
|
|
4
4
|
Dark mode is controlled by:
|
|
5
5
|
1. OS preference: @media (prefers-color-scheme: dark)
|
|
6
|
-
2. data-theme="dark" on
|
|
7
|
-
3. data-bs-theme="dark" (Bootstrap 5.3+) on ancestor
|
|
8
|
-
4. .dark class on ancestor (Tailwind CSS convention)
|
|
6
|
+
2. data-theme="dark" on host or ancestor (via :host-context)
|
|
7
|
+
3. data-bs-theme="dark" (Bootstrap 5.3+) on host or ancestor
|
|
8
|
+
4. .dark class on host or ancestor (Tailwind CSS convention)
|
|
9
|
+
|
|
10
|
+
Light mode override (overrides OS dark preference):
|
|
11
|
+
1. data-theme="light" on host or ancestor (via :host-context)
|
|
12
|
+
2. data-bs-theme="light" (Bootstrap 5.3+) on host or ancestor
|
|
13
|
+
3. .light class on host or ancestor (Tailwind CSS convention)
|
|
14
|
+
|
|
15
|
+
NOTE: Ancestor matching uses :host-context() because shadow DOM stylesheets
|
|
16
|
+
cannot see elements outside the shadow boundary with regular selectors.
|
|
9
17
|
*/
|
|
10
18
|
@media (prefers-color-scheme: dark) {
|
|
11
19
|
:host {
|
|
@@ -29,10 +37,10 @@
|
|
|
29
37
|
|
|
30
38
|
/* Explicit dark mode via data-theme, data-bs-theme attribute, or .dark class */
|
|
31
39
|
:host([data-theme="dark"]),
|
|
32
|
-
[data-theme="dark"]
|
|
40
|
+
:host-context([data-theme="dark"]),
|
|
33
41
|
:host([data-bs-theme="dark"]),
|
|
34
|
-
[data-bs-theme="dark"]
|
|
35
|
-
.dark
|
|
42
|
+
:host-context([data-bs-theme="dark"]),
|
|
43
|
+
:host-context(.dark) {
|
|
36
44
|
--wg-surface-1: #1f1f1f;
|
|
37
45
|
--wg-surface-2: #2b2b2b;
|
|
38
46
|
--wg-surface-3: #333333;
|
|
@@ -49,3 +57,32 @@
|
|
|
49
57
|
--wg-danger-bg-light: #442726;
|
|
50
58
|
--wg-danger-color: #f87c86;
|
|
51
59
|
}
|
|
60
|
+
|
|
61
|
+
/* ==============================================================================
|
|
62
|
+
EXPLICIT LIGHT MODE OVERRIDE
|
|
63
|
+
==============================================================================
|
|
64
|
+
When the app forces light mode (e.g. via data-theme="light" on <html> or <body>),
|
|
65
|
+
these selectors override the OS dark mode media query above by restoring the
|
|
66
|
+
--base-* fallback chain from _variables.css.
|
|
67
|
+
*/
|
|
68
|
+
:host([data-theme="light"]),
|
|
69
|
+
:host-context([data-theme="light"]),
|
|
70
|
+
:host([data-bs-theme="light"]),
|
|
71
|
+
:host-context([data-bs-theme="light"]),
|
|
72
|
+
:host-context(.light) {
|
|
73
|
+
--wg-surface-1: var(--base-main-bg, #ffffff);
|
|
74
|
+
--wg-surface-2: var(--base-elevated-bg, #f5f5f5);
|
|
75
|
+
--wg-surface-3: var(--base-hover-bg, #ebebeb);
|
|
76
|
+
--wg-surface-floating: var(--base-dropdown-bg, var(--base-main-bg, #ffffff));
|
|
77
|
+
--wg-text-color-1: var(--base-text-color-1, #242424);
|
|
78
|
+
--wg-text-color-2: var(--base-text-color-2, #424242);
|
|
79
|
+
--wg-text-color-3: var(--base-text-color-3, #707070);
|
|
80
|
+
--wg-border-color: var(--base-border-color, #e0e0e0);
|
|
81
|
+
--wg-border-color-hover: var(--base-border-color, #d1d1d1);
|
|
82
|
+
--wg-input-bg: var(--base-input-bg, #ffffff);
|
|
83
|
+
--wg-input-border: var(--base-input-border, 1px solid #d1d1d1);
|
|
84
|
+
--wg-hover-bg: var(--base-hover-bg, #f0f0f0);
|
|
85
|
+
--wg-active-bg: var(--base-hover-bg, #e0e0e0);
|
|
86
|
+
--wg-danger-bg-light: var(--base-danger-bg-light, #fde7e9);
|
|
87
|
+
--wg-danger-color: var(--base-danger-color, #d13438);
|
|
88
|
+
}
|
package/src/css/_dialogs.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
TOOLTIP (Floating UI positioned)
|
|
3
3
|
============================================================================== */
|
|
4
4
|
.wg__tooltip {
|
|
5
|
-
position:
|
|
5
|
+
position: absolute;
|
|
6
6
|
z-index: var(--wg-z-tooltip);
|
|
7
7
|
max-width: var(--wg-tooltip-max-width);
|
|
8
8
|
padding: var(--wg-tooltip-padding);
|
package/src/css/_variables.css
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
HOST ELEMENT SIZING
|
|
33
33
|
========================================================================== */
|
|
34
34
|
display: block;
|
|
35
|
+
position: relative; /* offsetParent for absolute-positioned tooltip */
|
|
35
36
|
|
|
36
37
|
/* ==========================================================================
|
|
37
38
|
COLORS & THEME
|