@alaarab/ogrid-js 2.1.8 → 2.1.10

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.
Files changed (3) hide show
  1. package/dist/esm/index.js +69 -20
  2. package/dist/styles/ogrid.css +72 -35
  3. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -5820,57 +5820,106 @@ var OGridRendering = class {
5820
5820
  // src/OGrid.ts
5821
5821
  var OGRID_THEME_CSS = `
5822
5822
  .ogrid-drag-target { box-shadow: inset 0 0 0 1px var(--ogrid-accent, #0078d4); }
5823
- :root {
5823
+ :where(:root) {
5824
5824
  --ogrid-bg: #ffffff;
5825
5825
  --ogrid-fg: rgba(0, 0, 0, 0.87);
5826
5826
  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
5827
5827
  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
5828
5828
  --ogrid-border: rgba(0, 0, 0, 0.12);
5829
- --ogrid-header-bg: rgba(0, 0, 0, 0.04);
5829
+ --ogrid-border-strong: rgba(0, 0, 0, 0.5);
5830
+ --ogrid-border-hover: rgba(0, 0, 0, 0.3);
5831
+ --ogrid-header-bg: #f5f5f5;
5830
5832
  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
5831
5833
  --ogrid-selected-row-bg: #e6f0fb;
5834
+ --ogrid-bg-selected-hover: #dae8f8;
5832
5835
  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
5833
5836
  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
5834
5837
  --ogrid-accent: #0078d4;
5838
+ --ogrid-accent-dark: #005a9e;
5835
5839
  --ogrid-selection-color: #217346;
5836
- --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
5837
- --ogrid-bg-subtle: #f3f2f1;
5840
+ --ogrid-primary: #0078d4;
5841
+ --ogrid-primary-fg: #fff;
5842
+ --ogrid-primary-hover: #106ebe;
5843
+ --ogrid-bg-subtle: #f5f5f5;
5838
5844
  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
5839
- --ogrid-bg-selected: #e6f0fb;
5840
- --ogrid-bg-selected-hover: #dae8f8;
5841
- --ogrid-bg-range: rgba(33, 115, 70, 0.12);
5845
+ --ogrid-active-bg: rgba(0, 0, 0, 0.06);
5842
5846
  --ogrid-muted: rgba(0, 0, 0, 0.5);
5847
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
5848
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
5849
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
5850
+ --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
5843
5851
  --ogrid-selection: #217346;
5844
- --ogrid-primary: #217346;
5845
- --ogrid-primary-fg: #fff;
5852
+ --ogrid-bg-range: rgba(33, 115, 70, 0.12);
5853
+ --ogrid-bg-selected: #e6f0fb;
5846
5854
  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
5847
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
5848
5855
  }
5849
- [data-theme='dark'] {
5856
+ @media (prefers-color-scheme: dark) {
5857
+ :where(:root:not([data-theme="light"])) {
5858
+ --ogrid-bg: #1e1e1e;
5859
+ --ogrid-fg: rgba(255, 255, 255, 0.87);
5860
+ --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
5861
+ --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
5862
+ --ogrid-border: rgba(255, 255, 255, 0.12);
5863
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
5864
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
5865
+ --ogrid-header-bg: #2c2c2c;
5866
+ --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
5867
+ --ogrid-selected-row-bg: #1a3a5c;
5868
+ --ogrid-bg-selected-hover: #1f3650;
5869
+ --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
5870
+ --ogrid-range-bg: rgba(46, 160, 67, 0.15);
5871
+ --ogrid-accent: #4da6ff;
5872
+ --ogrid-accent-dark: #3390e0;
5873
+ --ogrid-selection-color: #2ea043;
5874
+ --ogrid-primary: #4da6ff;
5875
+ --ogrid-primary-fg: #fff;
5876
+ --ogrid-primary-hover: #66b3ff;
5877
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
5878
+ --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
5879
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
5880
+ --ogrid-muted: rgba(255, 255, 255, 0.5);
5881
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
5882
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
5883
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
5884
+ --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
5885
+ --ogrid-selection: #2ea043;
5886
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
5887
+ --ogrid-bg-selected: #1a3a5c;
5888
+ --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
5889
+ }
5890
+ }
5891
+ :where([data-theme='dark']) {
5850
5892
  --ogrid-bg: #1e1e1e;
5851
5893
  --ogrid-fg: rgba(255, 255, 255, 0.87);
5852
5894
  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
5853
5895
  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
5854
5896
  --ogrid-border: rgba(255, 255, 255, 0.12);
5855
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
5897
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
5898
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
5899
+ --ogrid-header-bg: #2c2c2c;
5856
5900
  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
5857
5901
  --ogrid-selected-row-bg: #1a3a5c;
5902
+ --ogrid-bg-selected-hover: #1f3650;
5858
5903
  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
5859
5904
  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
5860
5905
  --ogrid-accent: #4da6ff;
5906
+ --ogrid-accent-dark: #3390e0;
5861
5907
  --ogrid-selection-color: #2ea043;
5862
- --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
5863
- --ogrid-bg-subtle: #2a2a2a;
5908
+ --ogrid-primary: #4da6ff;
5909
+ --ogrid-primary-fg: #fff;
5910
+ --ogrid-primary-hover: #66b3ff;
5911
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
5864
5912
  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
5865
- --ogrid-bg-selected: #1a3a5c;
5866
- --ogrid-bg-selected-hover: #1f426b;
5867
- --ogrid-bg-range: rgba(46, 160, 67, 0.15);
5913
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
5868
5914
  --ogrid-muted: rgba(255, 255, 255, 0.5);
5915
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
5916
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
5917
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
5918
+ --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
5869
5919
  --ogrid-selection: #2ea043;
5870
- --ogrid-primary: #2ea043;
5871
- --ogrid-primary-fg: #fff;
5920
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
5921
+ --ogrid-bg-selected: #1a3a5c;
5872
5922
  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
5873
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
5874
5923
  }
5875
5924
  `;
5876
5925
  var OGrid = class {
package/dist/styles/ogrid.css CHANGED
@@ -4,74 +4,111 @@
4
4
  Override any --ogrid-* variable to customize.
5
5
  ────────────────────────────────────────────────────────────── */
6
6
 
7
- /* ── Light Theme (default) ── */
8
- :root {
7
+ /* ── Light Theme (default) — :where() for zero specificity ── */
8
+ :where(:root) {
9
9
  --ogrid-bg: #ffffff;
10
10
  --ogrid-fg: rgba(0, 0, 0, 0.87);
11
11
  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
12
12
  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
13
13
  --ogrid-border: rgba(0, 0, 0, 0.12);
14
- --ogrid-header-bg: rgba(0, 0, 0, 0.04);
14
+ --ogrid-border-strong: rgba(0, 0, 0, 0.5);
15
+ --ogrid-border-hover: rgba(0, 0, 0, 0.3);
16
+ --ogrid-header-bg: #f5f5f5;
15
17
  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
16
18
  --ogrid-selected-row-bg: #e6f0fb;
19
+ --ogrid-bg-selected-hover: #dae8f8;
17
20
  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
18
21
  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
19
22
  --ogrid-accent: #0078d4;
23
+ --ogrid-accent-dark: #005a9e;
20
24
  --ogrid-selection-color: #217346;
21
- --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
22
- /* Aliases for backward compat */
23
- --ogrid-border-strong: #888;
24
- --ogrid-border-hover: #999;
25
- --ogrid-bg-subtle: #f3f2f1;
25
+ --ogrid-primary: #0078d4;
26
+ --ogrid-primary-fg: #fff;
27
+ --ogrid-primary-hover: #106ebe;
28
+ --ogrid-bg-subtle: #f5f5f5;
26
29
  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
27
- --ogrid-bg-selected: #e6f0fb;
28
- --ogrid-bg-selected-hover: #dae8f8;
29
- --ogrid-bg-range: rgba(33, 115, 70, 0.12);
30
+ --ogrid-active-bg: rgba(0, 0, 0, 0.06);
30
31
  --ogrid-muted: rgba(0, 0, 0, 0.5);
31
- --ogrid-selection: #217346;
32
- --ogrid-primary: #217346;
33
- --ogrid-primary-fg: #fff;
34
- --ogrid-primary-hover: #1b5f39;
35
- --ogrid-accent-dark: #1b5f39;
36
32
  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
37
33
  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
34
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
35
+ --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
36
+ --ogrid-selection: #217346;
37
+ --ogrid-bg-range: rgba(33, 115, 70, 0.12);
38
+ --ogrid-bg-selected: #e6f0fb;
38
39
  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
39
- --ogrid-pinned-shadow: rgba(0, 0, 0, 0.12);
40
40
  }
41
41
 
42
- /* ── Dark Theme ── */
43
- [data-theme='dark'] {
42
+ /* ── Auto Dark (system preference) ── */
43
+ @media (prefers-color-scheme: dark) {
44
+ :where(:root:not([data-theme="light"])) {
45
+ --ogrid-bg: #1e1e1e;
46
+ --ogrid-fg: rgba(255, 255, 255, 0.87);
47
+ --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
48
+ --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
49
+ --ogrid-border: rgba(255, 255, 255, 0.12);
50
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
51
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
52
+ --ogrid-header-bg: #2c2c2c;
53
+ --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
54
+ --ogrid-selected-row-bg: #1a3a5c;
55
+ --ogrid-bg-selected-hover: #1f3650;
56
+ --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
57
+ --ogrid-range-bg: rgba(46, 160, 67, 0.15);
58
+ --ogrid-accent: #4da6ff;
59
+ --ogrid-accent-dark: #3390e0;
60
+ --ogrid-selection-color: #2ea043;
61
+ --ogrid-primary: #4da6ff;
62
+ --ogrid-primary-fg: #fff;
63
+ --ogrid-primary-hover: #66b3ff;
64
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
65
+ --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
66
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
67
+ --ogrid-muted: rgba(255, 255, 255, 0.5);
68
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
69
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
70
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
71
+ --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
72
+ --ogrid-selection: #2ea043;
73
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
74
+ --ogrid-bg-selected: #1a3a5c;
75
+ --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
76
+ }
77
+ }
78
+
79
+ /* ── Explicit Dark ── */
80
+ :where([data-theme='dark']) {
44
81
  --ogrid-bg: #1e1e1e;
45
82
  --ogrid-fg: rgba(255, 255, 255, 0.87);
46
83
  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
47
84
  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
48
85
  --ogrid-border: rgba(255, 255, 255, 0.12);
49
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
86
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
87
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
88
+ --ogrid-header-bg: #2c2c2c;
50
89
  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
51
90
  --ogrid-selected-row-bg: #1a3a5c;
91
+ --ogrid-bg-selected-hover: #1f3650;
52
92
  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
53
93
  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
54
94
  --ogrid-accent: #4da6ff;
95
+ --ogrid-accent-dark: #3390e0;
55
96
  --ogrid-selection-color: #2ea043;
56
- --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
57
- /* Aliases for backward compat */
58
- --ogrid-border-strong: #555;
59
- --ogrid-border-hover: #666;
60
- --ogrid-bg-subtle: #2a2a2a;
97
+ --ogrid-primary: #4da6ff;
98
+ --ogrid-primary-fg: #fff;
99
+ --ogrid-primary-hover: #66b3ff;
100
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
61
101
  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
62
- --ogrid-bg-selected: #1a3a5c;
63
- --ogrid-bg-selected-hover: #1f426b;
64
- --ogrid-bg-range: rgba(46, 160, 67, 0.15);
102
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
65
103
  --ogrid-muted: rgba(255, 255, 255, 0.5);
66
- --ogrid-selection: #2ea043;
67
- --ogrid-primary: #2ea043;
68
- --ogrid-primary-fg: #fff;
69
- --ogrid-primary-hover: #3db852;
70
- --ogrid-accent-dark: #3db852;
71
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
104
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
72
105
  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
106
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
107
+ --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
108
+ --ogrid-selection: #2ea043;
109
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
110
+ --ogrid-bg-selected: #1a3a5c;
73
111
  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
74
- --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
75
112
  }
76
113
 
77
114
  /* ── Layout ── */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-js",
3
- "version": "2.1.8",
3
+ "version": "2.1.10",
4
4
  "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
36
36
  "node": ">=18"
37
37
  },
38
38
  "dependencies": {
39
- "@alaarab/ogrid-core": "2.1.8"
39
+ "@alaarab/ogrid-core": "2.1.10"
40
40
  },
41
41
  "sideEffects": [
42
42
  "**/*.css"