@salt-ds/ag-grid-theme 2.4.3 → 2.5.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 (2) hide show
  1. package/package.json +3 -3
  2. package/salt-ag-theme.css +42 -19
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.4.3",
3
+ "version": "2.5.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
7
- "url": "https://github.com/jpmorganchase/salt-ds.git",
7
+ "url": "git+https://github.com/jpmorganchase/salt-ds.git",
8
8
  "directory": "packages/ag-grid-theme"
9
9
  },
10
10
  "bugs": "https://github.com/jpmorganchase/salt-ds/issues",
@@ -28,7 +28,7 @@
28
28
  "del": "^7.0.0"
29
29
  },
30
30
  "peerDependencies": {
31
- "@salt-ds/theme": "^1.30.0",
31
+ "@salt-ds/theme": "^1.32.0",
32
32
  "ag-grid-community": ">=28.0.0"
33
33
  }
34
34
  }
package/salt-ag-theme.css CHANGED
@@ -69,7 +69,7 @@
69
69
  .ag-theme-salt-compact-light .editable-numeric-cell,
70
70
  .ag-theme-salt-compact-dark .editable-cell,
71
71
  .ag-theme-salt-compact-dark .editable-numeric-cell {
72
- outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-editable-borderColor);
72
+ outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
73
73
  outline-offset: -1px;
74
74
  }
75
75
  .ag-theme-salt-light .ag-cell.numeric-cell,
@@ -182,7 +182,7 @@
182
182
  .ag-theme-salt-dark .ag-select .ag-picker-field-wrapper,
183
183
  .ag-theme-salt-compact-light .ag-select .ag-picker-field-wrapper,
184
184
  .ag-theme-salt-compact-dark .ag-select .ag-picker-field-wrapper {
185
- border: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
185
+ border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
186
186
  border-radius: 0;
187
187
  }
188
188
  .ag-theme-salt-light .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
@@ -224,7 +224,7 @@
224
224
  .ag-theme-salt-compact-light .ag-rich-select-list,
225
225
  .ag-theme-salt-compact-dark .ag-select-list,
226
226
  .ag-theme-salt-compact-dark .ag-rich-select-list {
227
- border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
227
+ border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
228
228
  }
229
229
  .ag-theme-salt-light .ag-select-list-item[aria-selected=true],
230
230
  .ag-theme-salt-light .ag-rich-select-row-selected,
@@ -397,7 +397,7 @@
397
397
  .ag-theme-salt-compact-light .ag-status-bar,
398
398
  .ag-theme-salt-compact-dark .ag-status-bar {
399
399
  border: none;
400
- border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
400
+ border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
401
401
  color: var(--salt-content-secondary-foreground);
402
402
  font-size: var(--salt-text-fontSize);
403
403
  font-weight: var(--salt-text-label-fontWeight);
@@ -435,7 +435,7 @@
435
435
  .ag-theme-salt-dark .ag-column-drop-horizontal,
436
436
  .ag-theme-salt-compact-light .ag-column-drop-horizontal,
437
437
  .ag-theme-salt-compact-dark .ag-column-drop-horizontal {
438
- border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
438
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
439
439
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
440
440
  }
441
441
  .ag-theme-salt-light .ag-column-drop-cell,
@@ -483,7 +483,7 @@
483
483
  .ag-theme-salt-dark .ag-header,
484
484
  .ag-theme-salt-compact-light .ag-header,
485
485
  .ag-theme-salt-compact-dark .ag-header {
486
- border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);
486
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
487
487
  }
488
488
  .ag-theme-salt-light .ag-header-row,
489
489
  .ag-theme-salt-dark .ag-header-row,
@@ -596,7 +596,7 @@
596
596
  .ag-theme-salt-dark .ag-floating-filter,
597
597
  .ag-theme-salt-compact-light .ag-floating-filter,
598
598
  .ag-theme-salt-compact-dark .ag-floating-filter {
599
- border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
599
+ border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
600
600
  }
601
601
  .ag-theme-salt-light .ag-header-cell.ag-floating-filter,
602
602
  .ag-theme-salt-dark .ag-header-cell.ag-floating-filter,
@@ -718,7 +718,11 @@
718
718
  .ag-theme-salt-light .ag-floating-filter input[class^=ag-][type=text],
719
719
  .ag-theme-salt-dark .ag-floating-filter input[class^=ag-][type=text],
720
720
  .ag-theme-salt-compact-light .ag-floating-filter input[class^=ag-][type=text],
721
- .ag-theme-salt-compact-dark .ag-floating-filter input[class^=ag-][type=text] {
721
+ .ag-theme-salt-compact-dark .ag-floating-filter input[class^=ag-][type=text],
722
+ .ag-theme-salt-light .ag-floating-filter input[class^=ag-][type=date],
723
+ .ag-theme-salt-dark .ag-floating-filter input[class^=ag-][type=date],
724
+ .ag-theme-salt-compact-light .ag-floating-filter input[class^=ag-][type=date],
725
+ .ag-theme-salt-compact-dark .ag-floating-filter input[class^=ag-][type=date] {
722
726
  height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 6px);
723
727
  margin-inline: var(--salt-spacing-50);
724
728
  padding: 0 var(--salt-spacing-50);
@@ -730,7 +734,11 @@
730
734
  .ag-theme-salt-light .ag-floating-filter-input input[class^=ag-][type=number],
731
735
  .ag-theme-salt-dark .ag-floating-filter-input input[class^=ag-][type=number],
732
736
  .ag-theme-salt-compact-light .ag-floating-filter-input input[class^=ag-][type=number],
733
- .ag-theme-salt-compact-dark .ag-floating-filter-input input[class^=ag-][type=number] {
737
+ .ag-theme-salt-compact-dark .ag-floating-filter-input input[class^=ag-][type=number],
738
+ .ag-theme-salt-light .ag-floating-filter-input input[class^=ag-][type=date],
739
+ .ag-theme-salt-dark .ag-floating-filter-input input[class^=ag-][type=date],
740
+ .ag-theme-salt-compact-light .ag-floating-filter-input input[class^=ag-][type=date],
741
+ .ag-theme-salt-compact-dark .ag-floating-filter-input input[class^=ag-][type=date] {
734
742
  border: none;
735
743
  }
736
744
  .ag-theme-salt-light .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
@@ -790,6 +798,10 @@
790
798
  .ag-theme-salt-dark .ag-filter input[class^=ag-][type=number],
791
799
  .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=number],
792
800
  .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=number],
801
+ .ag-theme-salt-light .ag-filter input[class^=ag-][type=date],
802
+ .ag-theme-salt-dark .ag-filter input[class^=ag-][type=date],
803
+ .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=date],
804
+ .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=date],
793
805
  .ag-theme-salt-light .ag-column-select input[class^=ag-][type=text],
794
806
  .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=text],
795
807
  .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=text],
@@ -797,9 +809,13 @@
797
809
  .ag-theme-salt-light .ag-column-select input[class^=ag-][type=number],
798
810
  .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=number],
799
811
  .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=number],
800
- .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number] {
812
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number],
813
+ .ag-theme-salt-light .ag-column-select input[class^=ag-][type=date],
814
+ .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=date],
815
+ .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=date],
816
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=date] {
801
817
  border: none;
802
- border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
818
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
803
819
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
804
820
  padding: 0 var(--salt-spacing-100);
805
821
  }
@@ -830,6 +846,10 @@
830
846
  .ag-theme-salt-dark .ag-filter input[class^=ag-][type=number]:focus,
831
847
  .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=number]:focus,
832
848
  .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=number]:focus,
849
+ .ag-theme-salt-light .ag-filter input[class^=ag-][type=date]:focus,
850
+ .ag-theme-salt-dark .ag-filter input[class^=ag-][type=date]:focus,
851
+ .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=date]:focus,
852
+ .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=date]:focus,
833
853
  .ag-theme-salt-light .ag-column-select input[class^=ag-][type=text]:focus,
834
854
  .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=text]:focus,
835
855
  .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=text]:focus,
@@ -837,7 +857,11 @@
837
857
  .ag-theme-salt-light .ag-column-select input[class^=ag-][type=number]:focus,
838
858
  .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=number]:focus,
839
859
  .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=number]:focus,
840
- .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number]:focus {
860
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number]:focus,
861
+ .ag-theme-salt-light .ag-column-select input[class^=ag-][type=date]:focus,
862
+ .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=date]:focus,
863
+ .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=date]:focus,
864
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=date]:focus {
841
865
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
842
866
  outline-offset: -2px;
843
867
  }
@@ -877,7 +901,7 @@
877
901
  .ag-theme-salt-compact-light .ag-menu,
878
902
  .ag-theme-salt-compact-dark .ag-menu {
879
903
  padding: var(--salt-spacing-100);
880
- border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
904
+ border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
881
905
  }
882
906
  .ag-theme-salt-light .ag-tabs,
883
907
  .ag-theme-salt-dark .ag-tabs,
@@ -895,7 +919,7 @@
895
919
  .ag-theme-salt-dark .ag-menu-header,
896
920
  .ag-theme-salt-compact-light .ag-menu-header,
897
921
  .ag-theme-salt-compact-dark .ag-menu-header {
898
- border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
922
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
899
923
  background-color: var(--salt-container-primary-background);
900
924
  }
901
925
  .ag-theme-salt-light .ag-menu-body,
@@ -953,7 +977,7 @@ div[class*=ag-theme-salt] {
953
977
  --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
954
978
  --ag-background-color: var(--salt-container-primary-background);
955
979
  --ag-border-color: var(--salt-separable-secondary-borderColor);
956
- --ag-borders-secondary: var(--salt-size-fixed-100) var(--salt-separable-borderStyle);
980
+ --ag-borders-secondary: var(--salt-size-fixed-100) var(--salt-borderStyle-solid);
957
981
  --ag-card-radius: var(--salt-palette-corner);
958
982
  --ag-cell-horizontal-padding: var(--salt-spacing-100);
959
983
  --ag-checkbox-border-radius: 0;
@@ -974,7 +998,6 @@ div[class*=ag-theme-salt] {
974
998
  --ag-header-column-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));
975
999
  --ag-header-column-separator-width: var(--salt-size-fixed-100);
976
1000
  --ag-header-foreground-color: var(--salt-content-secondary-foreground);
977
- --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
978
1001
  --ag-icon-size: max(var(--salt-size-icon), 12px);
979
1002
  --ag-input-border-color: var(--salt-editable-borderColor);
980
1003
  --ag-input-focus-border-color: var(--salt-editable-borderColor-hover);
@@ -992,7 +1015,7 @@ div[class*=ag-theme-salt] {
992
1015
  --ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
993
1016
  --ag-secondary-foreground-color: var(--salt-content-primary-foreground);
994
1017
  --ag-selected-row-background-color: var(--salt-selectable-background-selected);
995
- --ag-selected-tab-underline-color: var(--salt-navigable-indicator-active);
1018
+ --ag-selected-tab-underline-color: var(--salt-navigable-accent-indicator-active);
996
1019
  --ag-selected-tab-underline-width: var(--salt-size-indicator);
997
1020
  --ag-subheader-background-color: var(--salt-container-primary-background);
998
1021
  --ag-control-panel-background-color: var(--salt-container-primary-background);
@@ -1003,8 +1026,8 @@ div[class*=ag-theme-salt] {
1003
1026
  --ag-toggle-button-switch-border-color: var(--salt-container-primary-background);
1004
1027
  --ag-toggle-button-switch-background-color: var(--salt-selectable-foreground);
1005
1028
  --ag-tooltip-background-color: var(--salt-container-primary-background);
1006
- --ag-value-change-delta-down-color: var(--salt-status-negative-foreground);
1007
- --ag-value-change-delta-up-color: var(--salt-status-positive-foreground);
1029
+ --ag-value-change-delta-down-color: var(--salt-sentiment-negative-foreground-decorative);
1030
+ --ag-value-change-delta-up-color: var(--salt-sentiment-positive-foreground-decorative);
1008
1031
  --ag-widget-container-horizontal-padding: var(--salt-spacing-100);
1009
1032
  }
1010
1033
  div[class*=ag-theme-salt-compact] {