@salt-ds/ag-grid-theme 2.4.2 → 2.4.4

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 +2 -2
  2. package/salt-ag-theme.css +20 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.4.2",
3
+ "version": "2.4.4",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
28
  "del": "^7.0.0"
29
29
  },
30
30
  "peerDependencies": {
31
- "@salt-ds/theme": "^1.29.0",
31
+ "@salt-ds/theme": "^1.31.0",
32
32
  "ag-grid-community": ">=28.0.0"
33
33
  }
34
34
  }
package/salt-ag-theme.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .ag-theme-salt-compact-dark .ag-row-selected:before {
19
19
  background-color: var(--salt-selectable-borderColor-selected);
20
20
  background-image: none;
21
- height: var(--salt-size-border);
21
+ height: var(--salt-size-fixed-100);
22
22
  top: -1px;
23
23
  }
24
24
  .ag-theme-salt-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
@@ -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-border) 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-border) 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-border) 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,
@@ -234,7 +234,7 @@
234
234
  .ag-theme-salt-compact-light .ag-rich-select-row-selected,
235
235
  .ag-theme-salt-compact-dark .ag-select-list-item[aria-selected=true],
236
236
  .ag-theme-salt-compact-dark .ag-rich-select-row-selected {
237
- box-shadow: inset 0px var(--salt-size-border) 0px var(--salt-selectable-borderColor-selected), inset 0px calc(var(--salt-size-border) * -1) 0px var(--salt-selectable-borderColor-selected);
237
+ 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);
238
238
  }
239
239
  .ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
240
240
  .ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
@@ -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-border) 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-border) 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-border) 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-border) 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,
@@ -771,7 +771,7 @@
771
771
  .ag-theme-salt-compact-light .ag-virtual-list-item:hover,
772
772
  .ag-theme-salt-compact-dark .ag-virtual-list-item:hover {
773
773
  background-color: var(--salt-selectable-background-hover);
774
- cursor: pointer;
774
+ cursor: var(--salt-cursor-hover);
775
775
  }
776
776
  .ag-theme-salt-light .ag-label-align-right .ag-label,
777
777
  .ag-theme-salt-dark .ag-label-align-right .ag-label,
@@ -799,7 +799,7 @@
799
799
  .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=number],
800
800
  .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number] {
801
801
  border: none;
802
- border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
802
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
803
803
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
804
804
  padding: 0 var(--salt-spacing-100);
805
805
  }
@@ -877,7 +877,7 @@
877
877
  .ag-theme-salt-compact-light .ag-menu,
878
878
  .ag-theme-salt-compact-dark .ag-menu {
879
879
  padding: var(--salt-spacing-100);
880
- border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
880
+ border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
881
881
  }
882
882
  .ag-theme-salt-light .ag-tabs,
883
883
  .ag-theme-salt-dark .ag-tabs,
@@ -895,7 +895,7 @@
895
895
  .ag-theme-salt-dark .ag-menu-header,
896
896
  .ag-theme-salt-compact-light .ag-menu-header,
897
897
  .ag-theme-salt-compact-dark .ag-menu-header {
898
- border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
898
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
899
899
  background-color: var(--salt-container-primary-background);
900
900
  }
901
901
  .ag-theme-salt-light .ag-menu-body,
@@ -908,7 +908,7 @@
908
908
  .ag-theme-salt-dark .ag-menu-separator,
909
909
  .ag-theme-salt-compact-light .ag-menu-separator,
910
910
  .ag-theme-salt-compact-dark .ag-menu-separator {
911
- height: var(--salt-size-border);
911
+ height: var(--salt-size-fixed-100);
912
912
  }
913
913
  .ag-theme-salt-light .ag-menu-list,
914
914
  .ag-theme-salt-dark .ag-menu-list,
@@ -953,7 +953,7 @@ div[class*=ag-theme-salt] {
953
953
  --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
954
954
  --ag-background-color: var(--salt-container-primary-background);
955
955
  --ag-border-color: var(--salt-separable-secondary-borderColor);
956
- --ag-borders-secondary: var(--salt-size-border) var(--salt-separable-borderStyle);
956
+ --ag-borders-secondary: var(--salt-size-fixed-100) var(--salt-borderStyle-solid);
957
957
  --ag-card-radius: var(--salt-palette-corner);
958
958
  --ag-cell-horizontal-padding: var(--salt-spacing-100);
959
959
  --ag-checkbox-border-radius: 0;
@@ -971,10 +971,9 @@ div[class*=ag-theme-salt] {
971
971
  --ag-header-cell-hover-background-color: var(--ag-header-background-color);
972
972
  --ag-header-column-separator-color: var(--salt-separable-tertiary-borderColor);
973
973
  --ag-header-column-separator-display: block;
974
- --ag-header-column-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-border));
975
- --ag-header-column-separator-width: var(--salt-size-border);
974
+ --ag-header-column-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));
975
+ --ag-header-column-separator-width: var(--salt-size-fixed-100);
976
976
  --ag-header-foreground-color: var(--salt-content-secondary-foreground);
977
- --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
978
977
  --ag-icon-size: max(var(--salt-size-icon), 12px);
979
978
  --ag-input-border-color: var(--salt-editable-borderColor);
980
979
  --ag-input-focus-border-color: var(--salt-editable-borderColor-hover);
@@ -992,7 +991,7 @@ div[class*=ag-theme-salt] {
992
991
  --ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
993
992
  --ag-secondary-foreground-color: var(--salt-content-primary-foreground);
994
993
  --ag-selected-row-background-color: var(--salt-selectable-background-selected);
995
- --ag-selected-tab-underline-color: var(--salt-navigable-indicator-active);
994
+ --ag-selected-tab-underline-color: var(--salt-navigable-accent-indicator-active);
996
995
  --ag-selected-tab-underline-width: var(--salt-size-indicator);
997
996
  --ag-subheader-background-color: var(--salt-container-primary-background);
998
997
  --ag-control-panel-background-color: var(--salt-container-primary-background);
@@ -1003,8 +1002,8 @@ div[class*=ag-theme-salt] {
1003
1002
  --ag-toggle-button-switch-border-color: var(--salt-container-primary-background);
1004
1003
  --ag-toggle-button-switch-background-color: var(--salt-selectable-foreground);
1005
1004
  --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);
1005
+ --ag-value-change-delta-down-color: var(--salt-sentiment-negative-foreground-decorative);
1006
+ --ag-value-change-delta-up-color: var(--salt-sentiment-positive-foreground-decorative);
1008
1007
  --ag-widget-container-horizontal-padding: var(--salt-spacing-100);
1009
1008
  }
1010
1009
  div[class*=ag-theme-salt-compact] {