@alaarab/ogrid-angular 2.1.8 → 2.1.9

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 +78 -5
  2. package/dist/types/styles/ogrid-theme-vars.d.ts +4 -1
  3. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -2498,36 +2498,109 @@ SideBarComponent = __decorateClass([
2498
2498
 
2499
2499
  // src/styles/ogrid-theme-vars.ts
2500
2500
  var OGRID_THEME_VARS_CSS = `
2501
- /* \u2500\u2500\u2500 OGrid Theme Variables \u2500\u2500\u2500 */
2502
- :root {
2501
+ /* \u2500\u2500\u2500 OGrid Light Theme (default) \u2500\u2500\u2500 */
2502
+ :where(:root) {
2503
2503
  --ogrid-bg: #ffffff;
2504
2504
  --ogrid-fg: rgba(0, 0, 0, 0.87);
2505
2505
  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
2506
2506
  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
2507
2507
  --ogrid-border: rgba(0, 0, 0, 0.12);
2508
- --ogrid-header-bg: rgba(0, 0, 0, 0.04);
2508
+ --ogrid-border-strong: rgba(0, 0, 0, 0.5);
2509
+ --ogrid-border-hover: rgba(0, 0, 0, 0.3);
2510
+ --ogrid-header-bg: #f5f5f5;
2509
2511
  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
2510
2512
  --ogrid-selected-row-bg: #e6f0fb;
2513
+ --ogrid-bg-selected-hover: #dae8f8;
2511
2514
  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
2512
2515
  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
2513
2516
  --ogrid-accent: #0078d4;
2517
+ --ogrid-accent-dark: #005a9e;
2514
2518
  --ogrid-selection-color: #217346;
2519
+ --ogrid-primary: #0078d4;
2520
+ --ogrid-primary-fg: #fff;
2521
+ --ogrid-primary-hover: #106ebe;
2522
+ --ogrid-bg-subtle: #f5f5f5;
2523
+ --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
2524
+ --ogrid-active-bg: rgba(0, 0, 0, 0.06);
2525
+ --ogrid-muted: rgba(0, 0, 0, 0.5);
2526
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
2527
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
2528
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
2515
2529
  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
2530
+ --ogrid-selection: #217346;
2531
+ --ogrid-bg-range: rgba(33, 115, 70, 0.12);
2532
+ --ogrid-bg-selected: #e6f0fb;
2533
+ --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
2516
2534
  }
2517
- [data-theme="dark"] {
2535
+ /* \u2500\u2500\u2500 Auto Dark (system preference) \u2500\u2500\u2500 */
2536
+ @media (prefers-color-scheme: dark) {
2537
+ :where(:root:not([data-theme="light"])) {
2538
+ --ogrid-bg: #1e1e1e;
2539
+ --ogrid-fg: rgba(255, 255, 255, 0.87);
2540
+ --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
2541
+ --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
2542
+ --ogrid-border: rgba(255, 255, 255, 0.12);
2543
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
2544
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
2545
+ --ogrid-header-bg: #2c2c2c;
2546
+ --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
2547
+ --ogrid-selected-row-bg: #1a3a5c;
2548
+ --ogrid-bg-selected-hover: #1f3650;
2549
+ --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
2550
+ --ogrid-range-bg: rgba(46, 160, 67, 0.15);
2551
+ --ogrid-accent: #4da6ff;
2552
+ --ogrid-accent-dark: #3390e0;
2553
+ --ogrid-selection-color: #2ea043;
2554
+ --ogrid-primary: #4da6ff;
2555
+ --ogrid-primary-fg: #fff;
2556
+ --ogrid-primary-hover: #66b3ff;
2557
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
2558
+ --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
2559
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
2560
+ --ogrid-muted: rgba(255, 255, 255, 0.5);
2561
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
2562
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
2563
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
2564
+ --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
2565
+ --ogrid-selection: #2ea043;
2566
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
2567
+ --ogrid-bg-selected: #1a3a5c;
2568
+ --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
2569
+ }
2570
+ }
2571
+ /* \u2500\u2500\u2500 Explicit Dark \u2500\u2500\u2500 */
2572
+ :where([data-theme="dark"]) {
2518
2573
  --ogrid-bg: #1e1e1e;
2519
2574
  --ogrid-fg: rgba(255, 255, 255, 0.87);
2520
2575
  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
2521
2576
  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
2522
2577
  --ogrid-border: rgba(255, 255, 255, 0.12);
2523
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
2578
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
2579
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
2580
+ --ogrid-header-bg: #2c2c2c;
2524
2581
  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
2525
2582
  --ogrid-selected-row-bg: #1a3a5c;
2583
+ --ogrid-bg-selected-hover: #1f3650;
2526
2584
  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
2527
2585
  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
2528
2586
  --ogrid-accent: #4da6ff;
2587
+ --ogrid-accent-dark: #3390e0;
2529
2588
  --ogrid-selection-color: #2ea043;
2589
+ --ogrid-primary: #4da6ff;
2590
+ --ogrid-primary-fg: #fff;
2591
+ --ogrid-primary-hover: #66b3ff;
2592
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
2593
+ --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
2594
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
2595
+ --ogrid-muted: rgba(255, 255, 255, 0.5);
2596
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
2597
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
2598
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
2530
2599
  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
2600
+ --ogrid-selection: #2ea043;
2601
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
2602
+ --ogrid-bg-selected: #1a3a5c;
2603
+ --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
2531
2604
  }`;
2532
2605
 
2533
2606
  // src/components/ogrid-layout.component.ts
package/dist/types/styles/ogrid-theme-vars.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  /**
2
2
  * Shared OGrid CSS theme variables (light + dark mode).
3
3
  * Used by all Angular UI packages (Material, PrimeNG, Radix) to avoid duplication.
4
+ *
5
+ * Uses :where() selectors for ZERO specificity — consumer overrides always win.
6
+ * Dark mode: auto via prefers-color-scheme, explicit via [data-theme="dark"].
4
7
  */
5
- export declare const OGRID_THEME_VARS_CSS = "\n/* \u2500\u2500\u2500 OGrid Theme Variables \u2500\u2500\u2500 */\n:root {\n --ogrid-bg: #ffffff;\n --ogrid-fg: rgba(0, 0, 0, 0.87);\n --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n --ogrid-border: rgba(0, 0, 0, 0.12);\n --ogrid-header-bg: rgba(0, 0, 0, 0.04);\n --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n --ogrid-selected-row-bg: #e6f0fb;\n --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n --ogrid-accent: #0078d4;\n --ogrid-selection-color: #217346;\n --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n}\n[data-theme=\"dark\"] {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-header-bg: rgba(255, 255, 255, 0.06);\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-selection-color: #2ea043;\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n}";
8
+ export declare const OGRID_THEME_VARS_CSS = "\n/* \u2500\u2500\u2500 OGrid Light Theme (default) \u2500\u2500\u2500 */\n:where(:root) {\n --ogrid-bg: #ffffff;\n --ogrid-fg: rgba(0, 0, 0, 0.87);\n --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n --ogrid-border: rgba(0, 0, 0, 0.12);\n --ogrid-border-strong: rgba(0, 0, 0, 0.5);\n --ogrid-border-hover: rgba(0, 0, 0, 0.3);\n --ogrid-header-bg: #f5f5f5;\n --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n --ogrid-selected-row-bg: #e6f0fb;\n --ogrid-bg-selected-hover: #dae8f8;\n --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n --ogrid-accent: #0078d4;\n --ogrid-accent-dark: #005a9e;\n --ogrid-selection-color: #217346;\n --ogrid-primary: #0078d4;\n --ogrid-primary-fg: #fff;\n --ogrid-primary-hover: #106ebe;\n --ogrid-bg-subtle: #f5f5f5;\n --ogrid-bg-hover: rgba(0, 0, 0, 0.04);\n --ogrid-active-bg: rgba(0, 0, 0, 0.06);\n --ogrid-muted: rgba(0, 0, 0, 0.5);\n --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);\n --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n --ogrid-selection: #217346;\n --ogrid-bg-range: rgba(33, 115, 70, 0.12);\n --ogrid-bg-selected: #e6f0fb;\n --ogrid-loading-bg: rgba(255, 255, 255, 0.7);\n}\n/* \u2500\u2500\u2500 Auto Dark (system preference) \u2500\u2500\u2500 */\n@media (prefers-color-scheme: dark) {\n :where(:root:not([data-theme=\"light\"])) {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n --ogrid-header-bg: #2c2c2c;\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-bg-selected-hover: #1f3650;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-accent-dark: #3390e0;\n --ogrid-selection-color: #2ea043;\n --ogrid-primary: #4da6ff;\n --ogrid-primary-fg: #fff;\n --ogrid-primary-hover: #66b3ff;\n --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n --ogrid-muted: rgba(255, 255, 255, 0.5);\n --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n --ogrid-selection: #2ea043;\n --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n --ogrid-bg-selected: #1a3a5c;\n --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n }\n}\n/* \u2500\u2500\u2500 Explicit Dark \u2500\u2500\u2500 */\n:where([data-theme=\"dark\"]) {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n --ogrid-header-bg: #2c2c2c;\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-bg-selected-hover: #1f3650;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-accent-dark: #3390e0;\n --ogrid-selection-color: #2ea043;\n --ogrid-primary: #4da6ff;\n --ogrid-primary-fg: #fff;\n --ogrid-primary-hover: #66b3ff;\n --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n --ogrid-muted: rgba(255, 255, 255, 0.5);\n --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n --ogrid-selection: #2ea043;\n --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n --ogrid-bg-selected: #1a3a5c;\n --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-angular",
3
- "version": "2.1.8",
3
+ "version": "2.1.9",
4
4
  "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
35
35
  "node": ">=18"
36
36
  },
37
37
  "dependencies": {
38
- "@alaarab/ogrid-core": "2.1.8"
38
+ "@alaarab/ogrid-core": "2.1.9"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "@angular/core": "^21.0.0",