@salt-ds/ag-grid-theme 2.8.0 → 2.9.0

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/README.md +43 -0
  2. package/package.json +2 -2
  3. package/salt-ag-theme.css +84 -53
package/README.md ADDED
@@ -0,0 +1,43 @@
1
+ # `@salt-ds/ag-grid-theme`
2
+
3
+ The Salt theme for [AG Grid](https://www.ag-grid.com/). Applies the Salt visual
4
+ language (typography, spacing, color, density) to AG Grid via CSS custom
5
+ properties and a small layer of selector overrides.
6
+
7
+ ## Install
8
+
9
+ ```sh
10
+ npm install @salt-ds/ag-grid-theme
11
+ # or
12
+ yarn add @salt-ds/ag-grid-theme
13
+ ```
14
+
15
+ Peer dependencies (install separately):
16
+
17
+ - [`ag-grid-community`](https://www.npmjs.com/package/ag-grid-community) `>=28`
18
+ - [`@salt-ds/theme`](https://www.npmjs.com/package/@salt-ds/theme)
19
+
20
+ > For users on AG Grid v33+, opt back into the legacy theming system with
21
+ > `provideGlobalGridOptions({ theme: "legacy" })`. A future major version of
22
+ > this package will adopt AG Grid's new Theming API.
23
+
24
+ ## Usage
25
+
26
+ ```ts
27
+ import "ag-grid-community/styles/ag-grid.css";
28
+ import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
29
+ ```
30
+
31
+ Apply the appropriate class name on the grid wrapper:
32
+
33
+ - `ag-theme-salt-light` / `ag-theme-salt-dark`
34
+ - `ag-theme-salt-compact-light` / `ag-theme-salt-compact-dark`
35
+
36
+ Optional modifiers can be added alongside the mode class:
37
+
38
+ - `ag-theme-salt-variant-secondary`, `ag-theme-salt-variant-tertiary`,
39
+ `ag-theme-salt-variant-zebra` — body background variants
40
+ - `ag-theme-salt-header-{primary,secondary,tertiary}` — header background
41
+
42
+ See the full
43
+ [documentation and examples](https://www.saltdesignsystem.com/salt/components/ag-grid-theme).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.8.0",
3
+ "version": "2.9.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
28
  "del": "^8.0.0"
29
29
  },
30
30
  "peerDependencies": {
31
- "@salt-ds/theme": "^1.41.0",
31
+ "@salt-ds/theme": "^1.43.0",
32
32
  "ag-grid-community": ">=28.0.0"
33
33
  }
34
34
  }
package/salt-ag-theme.css CHANGED
@@ -12,10 +12,10 @@
12
12
  background-color: var(--ag-selected-row-background-color);
13
13
  border-color: var(--ag-selected-row-border-color);
14
14
  }
15
- .ag-theme-salt-light .ag-row-selected:before,
16
- .ag-theme-salt-dark .ag-row-selected:before,
17
- .ag-theme-salt-compact-light .ag-row-selected:before,
18
- .ag-theme-salt-compact-dark .ag-row-selected:before,
15
+ .ag-theme-salt-light .ag-row-selected::before,
16
+ .ag-theme-salt-dark .ag-row-selected::before,
17
+ .ag-theme-salt-compact-light .ag-row-selected::before,
18
+ .ag-theme-salt-compact-dark .ag-row-selected::before,
19
19
  .ag-theme-salt-light .ag-row-hover.ag-row-selected::before,
20
20
  .ag-theme-salt-dark .ag-row-hover.ag-row-selected::before,
21
21
  .ag-theme-salt-compact-light .ag-row-hover.ag-row-selected::before,
@@ -263,29 +263,29 @@
263
263
  outline-offset: -2px;
264
264
  border-color: transparent;
265
265
  }
266
- .ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus:before,
267
- .ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
268
- .ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
269
- .ag-theme-salt-light .editable-cell.ag-cell-inline-editing:before,
270
- .ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus:before,
271
- .ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
272
- .ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
273
- .ag-theme-salt-dark .editable-cell.ag-cell-inline-editing:before,
274
- .ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus:before,
275
- .ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
276
- .ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
277
- .ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing:before,
278
- .ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus:before,
279
- .ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
280
- .ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
281
- .ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing:before {
266
+ .ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus::before,
267
+ .ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
268
+ .ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
269
+ .ag-theme-salt-light .editable-cell.ag-cell-inline-editing::before,
270
+ .ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus::before,
271
+ .ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
272
+ .ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
273
+ .ag-theme-salt-dark .editable-cell.ag-cell-inline-editing::before,
274
+ .ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus::before,
275
+ .ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
276
+ .ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
277
+ .ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing::before,
278
+ .ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus::before,
279
+ .ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
280
+ .ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
281
+ .ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing::before {
282
282
  border-bottom: calc(var(--salt-size-adornment) + 4px) solid transparent;
283
283
  border-left: calc(var(--salt-size-adornment) + 4px) solid var(--salt-editable-borderColor-hover);
284
284
  border-top: 0 solid transparent;
285
285
  content: "";
286
- left: 0px;
286
+ left: 0;
287
287
  position: absolute;
288
- top: 0px;
288
+ top: 0;
289
289
  z-index: 2;
290
290
  }
291
291
  .ag-theme-salt-light .editable-numeric-cell input,
@@ -379,7 +379,7 @@
379
379
  .ag-theme-salt-compact-light .ag-rich-select-row-selected,
380
380
  .ag-theme-salt-compact-dark .ag-select-list-item[aria-selected=true],
381
381
  .ag-theme-salt-compact-dark .ag-rich-select-row-selected {
382
- box-shadow: inset 0px var(--salt-size-fixed-100) 0px var(--salt-selectable-borderColor-selected), inset 0px calc(var(--salt-size-fixed-100) * -1) 0px var(--salt-selectable-borderColor-selected);
382
+ box-shadow: inset 0 var(--salt-size-fixed-100) 0 var(--salt-selectable-borderColor-selected), inset 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
383
383
  }
384
384
  .ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
385
385
  .ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
@@ -435,9 +435,9 @@
435
435
  .ag-theme-salt-dark .ag-standard-button,
436
436
  .ag-theme-salt-compact-light .ag-standard-button,
437
437
  .ag-theme-salt-compact-dark .ag-standard-button {
438
- background: var(--salt-actionable-secondary-background);
438
+ background: var(--salt-actionable-subtle-background);
439
439
  border: 0;
440
- color: var(--salt-actionable-secondary-foreground);
440
+ color: var(--salt-actionable-subtle-foreground);
441
441
  font-size: var(--salt-text-fontSize);
442
442
  font-weight: 600;
443
443
  height: var(--salt-size-base);
@@ -448,14 +448,14 @@
448
448
  .ag-theme-salt-dark .ag-standard-button:hover,
449
449
  .ag-theme-salt-compact-light .ag-standard-button:hover,
450
450
  .ag-theme-salt-compact-dark .ag-standard-button:hover {
451
- background-color: var(--salt-actionable-secondary-background-hover);
452
- color: var(--salt-actionable-secondary-foreground-hover);
451
+ background-color: var(--salt-actionable-subtle-background-hover);
452
+ color: var(--salt-actionable-subtle-foreground-hover);
453
453
  }
454
454
  .ag-theme-salt-light .ag-ltr .ag-filter-apply-panel-button,
455
455
  .ag-theme-salt-dark .ag-ltr .ag-filter-apply-panel-button,
456
456
  .ag-theme-salt-compact-light .ag-ltr .ag-filter-apply-panel-button,
457
457
  .ag-theme-salt-compact-dark .ag-ltr .ag-filter-apply-panel-button {
458
- margin-left: 8px;
458
+ margin-left: var(--salt-spacing-100);
459
459
  }
460
460
  .ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
461
461
  .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
@@ -465,8 +465,8 @@
465
465
  .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
466
466
  .ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
467
467
  .ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
468
- background: var(--salt-actionable-cta-background);
469
- color: var(--salt-actionable-cta-foreground);
468
+ background: var(--salt-actionable-accented-bold-background);
469
+ color: var(--salt-actionable-accented-bold-foreground);
470
470
  }
471
471
  .ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
472
472
  .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
@@ -476,13 +476,13 @@
476
476
  .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
477
477
  .ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
478
478
  .ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
479
- background: var(--salt-actionable-cta-background-hover);
480
- color: var(--salt-actionable-cta-foreground-hover);
479
+ background: var(--salt-actionable-accented-bold-background-hover);
480
+ color: var(--salt-actionable-accented-bold-foreground-hover);
481
481
  }
482
- .ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus:after,
483
- .ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus:after,
484
- .ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus:after,
485
- .ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus:after {
482
+ .ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus::after,
483
+ .ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus::after,
484
+ .ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus::after,
485
+ .ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus::after {
486
486
  border: 0;
487
487
  }
488
488
  .ag-theme-salt-light button[class^=ag-]:focus,
@@ -602,16 +602,33 @@
602
602
  }
603
603
 
604
604
  /* css/parts/ag-column-drop-list.css */
605
- .ag-column-drop-cell-drag-handle {
605
+ [class*=ag-theme-salt] .ag-column-drop-cell-drag-handle {
606
606
  margin-left: 0;
607
607
  }
608
- .ag-column-drop-cell {
608
+ [class*=ag-theme-salt] .ag-column-drop-cell {
609
609
  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
610
610
  padding: 0 var(--salt-spacing-50);
611
611
  }
612
- .ag-column-drop-cell-button {
612
+ [class*=ag-theme-salt] .ag-column-drop-cell-button {
613
613
  min-width: unset;
614
614
  }
615
+ div[class*=ag-theme-salt] .ag-column-drop-cell {
616
+ --ag-secondary-foreground-color: var(--salt-actionable-bold-foreground);
617
+ --ag-icon-font-color: var(--salt-actionable-bold-foreground);
618
+ --ag-chip-background-color: var(--salt-actionable-bold-background);
619
+ color: var(--ag-secondary-foreground-color);
620
+ }
621
+ div[class*=ag-theme-salt] .ag-column-drop-cell:hover {
622
+ --ag-secondary-foreground-color: var(--salt-actionable-bold-foreground-hover);
623
+ --ag-icon-font-color: var(--salt-actionable-bold-foreground-hover);
624
+ --ag-chip-background-color: var(--salt-actionable-bold-background-hover);
625
+ }
626
+ div[class*=ag-theme-salt] .ag-column-drop-cell:active,
627
+ div[class*=ag-theme-salt] .ag-column-drop-cell[aria-expanded=true] {
628
+ --ag-secondary-foreground-color: var(--salt-actionable-bold-foreground-active);
629
+ --ag-icon-font-color: var(--salt-actionable-bold-foreground-active);
630
+ --ag-chip-background-color: var(--salt-actionable-bold-background-active);
631
+ }
615
632
 
616
633
  /* css/parts/ag-header.css */
617
634
  .ag-theme-salt-light .ag-header,
@@ -836,10 +853,10 @@
836
853
  .ag-theme-salt-compact-dark .ag-filter-active {
837
854
  --ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
838
855
  }
839
- .ag-theme-salt-light .ag-floating-filter:after,
840
- .ag-theme-salt-dark .ag-floating-filter:after,
841
- .ag-theme-salt-compact-light .ag-floating-filter:after,
842
- .ag-theme-salt-compact-dark .ag-floating-filter:after {
856
+ .ag-theme-salt-light .ag-floating-filter::after,
857
+ .ag-theme-salt-dark .ag-floating-filter::after,
858
+ .ag-theme-salt-compact-light .ag-floating-filter::after,
859
+ .ag-theme-salt-compact-dark .ag-floating-filter::after {
843
860
  width: 0;
844
861
  }
845
862
  .ag-theme-salt-light .ag-ltr .ag-floating-filter-button,
@@ -898,16 +915,16 @@
898
915
  .ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible,
899
916
  .ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible,
900
917
  .ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible {
901
- background: var(--salt-actionable-secondary-background-active);
902
- color: var(--salt-actionable-secondary-foreground-active);
903
- --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
918
+ background: var(--salt-actionable-subtle-background-active);
919
+ color: var(--salt-actionable-subtle-foreground-active);
920
+ --ag-icon-font-color: var(--salt-actionable-subtle-foreground-active);
904
921
  --salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
905
922
  }
906
923
  .ag-theme-salt-light .ag-header-cell.ag-column-menu-visible .ag-icon,
907
924
  .ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible .ag-icon,
908
925
  .ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible .ag-icon,
909
926
  .ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible .ag-icon {
910
- color: var(--salt-actionable-secondary-foreground-active);
927
+ color: var(--salt-actionable-subtle-foreground-active);
911
928
  }
912
929
  .ag-theme-salt-light .ag-cell-label-container,
913
930
  .ag-theme-salt-dark .ag-cell-label-container,
@@ -1131,7 +1148,7 @@ div[class*=ag-theme-salt] {
1131
1148
  --ag-checkbox-checked-color: var(--salt-selectable-foreground-selected);
1132
1149
  --ag-checkbox-indeterminate-color: var(--salt-selectable-foreground);
1133
1150
  --ag-checkbox-unchecked-color: var(--salt-selectable-borderColor);
1134
- --ag-chip-background-color: var(--salt-actionable-primary-background);
1151
+ --ag-chip-background-color: var(--salt-actionable-bold-background);
1135
1152
  --ag-data-color: var(--salt-content-primary-foreground);
1136
1153
  --ag-disabled-foreground-color: var(--salt-content-primary-foreground-disabled);
1137
1154
  --ag-font-family: var(--salt-text-fontFamily);
@@ -1218,21 +1235,21 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1218
1235
  --ag-header-background-color: var(--salt-container-tertiary-background);
1219
1236
  --ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
1220
1237
  }
1221
- .error-row {
1238
+ [class*=ag-theme-salt] .error-row {
1222
1239
  --ag-background-color: var(--salt-status-error-background);
1223
1240
  --ag-selected-row-background-color: var(--salt-status-error-background-selected);
1224
1241
  --ag-selected-row-border-color: var(--salt-status-error-borderColor);
1225
1242
  --ag-odd-row-background-color: var(--ag-background-color);
1226
1243
  --ag-row-hover-color: var(--salt-overlayable-background-hover);
1227
1244
  }
1228
- .warning-row {
1245
+ [class*=ag-theme-salt] .warning-row {
1229
1246
  --ag-background-color: var(--salt-status-warning-background);
1230
1247
  --ag-selected-row-background-color: var(--salt-status-warning-background-selected);
1231
1248
  --ag-selected-row-border-color: var(--salt-status-warning-borderColor);
1232
1249
  --ag-odd-row-background-color: var(--ag-background-color);
1233
1250
  --ag-row-hover-color: var(--salt-overlayable-background-hover);
1234
1251
  }
1235
- .success-row {
1252
+ [class*=ag-theme-salt] .success-row {
1236
1253
  --ag-background-color: var(--salt-status-success-background);
1237
1254
  --ag-selected-row-background-color: var(--salt-status-success-background-selected);
1238
1255
  --ag-selected-row-border-color: var(--salt-status-success-borderColor);
@@ -1241,13 +1258,13 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1241
1258
  }
1242
1259
 
1243
1260
  /* css/parts/ag-toggle-button.css */
1244
- .ag-toggle-button-input-wrapper::before {
1261
+ [class*=ag-theme-salt] .ag-toggle-button-input-wrapper::before {
1245
1262
  top: calc(1px - var(--ag-toggle-button-border-width));
1246
1263
  left: calc(1px - var(--ag-toggle-button-border-width));
1247
1264
  height: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width));
1248
1265
  width: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width));
1249
1266
  }
1250
- .ag-toggle-button-input-wrapper.ag-checked::before {
1267
+ [class*=ag-theme-salt] .ag-toggle-button-input-wrapper.ag-checked::before {
1251
1268
  --ag-toggle-button-switch-background-color: var(--salt-selectable-borderColor-selected);
1252
1269
  border-color: var(--ag-toggle-button-switch-border-color);
1253
1270
  left: calc(100% - var(--ag-toggle-button-height) + 2 * var(--ag-toggle-button-border-width));
@@ -1285,6 +1302,20 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1285
1302
  margin-bottom: var(--salt-spacing-100);
1286
1303
  }
1287
1304
 
1305
+ /* css/parts/ag-header-variants.css */
1306
+ div[class*=ag-theme-salt].ag-theme-salt-header-primary,
1307
+ div[class*=ag-theme-salt].ag-theme-salt-header-primary.ag-theme-salt-variant-zebra {
1308
+ --ag-header-background-color: var(--salt-container-primary-background);
1309
+ }
1310
+ div[class*=ag-theme-salt].ag-theme-salt-header-secondary,
1311
+ div[class*=ag-theme-salt].ag-theme-salt-header-secondary.ag-theme-salt-variant-zebra {
1312
+ --ag-header-background-color: var(--salt-container-secondary-background);
1313
+ }
1314
+ div[class*=ag-theme-salt].ag-theme-salt-header-tertiary,
1315
+ div[class*=ag-theme-salt].ag-theme-salt-header-tertiary.ag-theme-salt-variant-zebra {
1316
+ --ag-header-background-color: var(--salt-container-tertiary-background);
1317
+ }
1318
+
1288
1319
  /* css/salt-ag-grid-theme.css */
1289
1320
 
1290
1321
  /* css/salt-icons.css */