@salt-ds/ag-grid-theme 2.1.2 → 2.2.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 -2
  2. package/salt-ag-theme.css +84 -27
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.1.2",
3
+ "version": "2.2.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -25,6 +25,7 @@
25
25
  "del": "^7.0.0"
26
26
  },
27
27
  "peerDependencies": {
28
- "@salt-ds/theme": "^1.23.2"
28
+ "@salt-ds/theme": "^1.23.3",
29
+ "ag-grid-community": ">=28.0.0"
29
30
  }
30
31
  }
package/salt-ag-theme.css CHANGED
@@ -76,6 +76,14 @@ div[class*=ag-theme-salt] .ag-header-row {
76
76
  font-size: var(--salt-text-label-fontSize);
77
77
  font-weight: var(--salt-text-label-fontWeight-strong);
78
78
  }
79
+ div[class*=ag-theme-salt] .ag-header-cell:focus-visible::after {
80
+ border: none;
81
+ }
82
+ div[class*=ag-theme-salt] .ag-header-cell:focus-visible {
83
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
84
+ outline-offset: -2px;
85
+ border-width: 0;
86
+ }
79
87
  div[class*=ag-theme-salt] .ag-pinned-left-header {
80
88
  border-right-color: var(--salt-separable-secondary-borderColor);
81
89
  }
@@ -89,10 +97,12 @@ div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-cell:not(.
89
97
  div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus {
90
98
  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
91
99
  }
92
- div[class*=ag-theme-salt] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container {
100
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
101
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container {
93
102
  margin-left: auto;
94
103
  }
95
- div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container {
104
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
105
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container {
96
106
  margin-right: auto;
97
107
  }
98
108
  div[class*=ag-theme-salt] .ag-sort-indicator-container {
@@ -115,8 +125,65 @@ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-he
115
125
  div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter::before {
116
126
  background-color: transparent;
117
127
  }
118
- div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=number] {
119
- height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 4px);
128
+ div[class*=ag-theme-salt] .ag-floating-filter {
129
+ border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
130
+ }
131
+ div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter {
132
+ padding-left: 0;
133
+ }
134
+ div[class*=ag-theme-salt] .ag-floating-filter .ag-floating-filter-body:focus-within {
135
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
136
+ outline-offset: -2px;
137
+ }
138
+ div[class*=ag-theme-salt] .ag-header-cell-menu-button:hover,
139
+ div[class*=ag-theme-salt] .ag-header-cell-filter-button:hover,
140
+ div[class*=ag-theme-salt] .ag-panel-title-bar-button:hover,
141
+ div[class*=ag-theme-salt] .ag-header-expand-icon:hover,
142
+ div[class*=ag-theme-salt] .ag-column-group-icons:hover,
143
+ div[class*=ag-theme-salt] .ag-set-filter-group-icons:hover,
144
+ div[class*=ag-theme-salt] .ag-group-expanded .ag-icon:hover,
145
+ div[class*=ag-theme-salt] .ag-group-contracted .ag-icon:hover,
146
+ div[class*=ag-theme-salt] .ag-chart-settings-prev:hover,
147
+ div[class*=ag-theme-salt] .ag-chart-settings-next:hover,
148
+ div[class*=ag-theme-salt] .ag-group-title-bar-icon:hover,
149
+ div[class*=ag-theme-salt] .ag-column-select-header-icon:hover,
150
+ div[class*=ag-theme-salt] .ag-floating-filter-button-button:hover,
151
+ div[class*=ag-theme-salt] .ag-filter-toolpanel-expand:hover,
152
+ div[class*=ag-theme-salt] .ag-panel-title-bar-button-icon:hover,
153
+ div[class*=ag-theme-salt] .ag-chart-menu-icon:hover {
154
+ box-shadow: 0 0 0 var(--salt-spacing-50) var(--salt-actionable-subtle-background-hover);
155
+ background-color: var(--salt-actionable-subtle-background-hover);
156
+ --ag-icon-font-color: var(--salt-actionable-subtle-foreground-hover);
157
+ --ag-icon-font-color-filter: var(--salt-actionable-subtle-foreground-hover);
158
+ --ag-icon-font-color-menu-alt: var(--salt-actionable-subtle-foreground-hover);
159
+ }
160
+ .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon,
161
+ .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-menu-icon {
162
+ margin-left: var(--salt-spacing-100);
163
+ }
164
+ div[class*=ag-theme-salt] .ag-filter-active {
165
+ --ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
166
+ }
167
+ div[class*=ag-theme-salt] .ag-floating-filter:after {
168
+ width: 0;
169
+ }
170
+ div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
171
+ margin-left: var(--salt-spacing-100);
172
+ }
173
+ div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button .ag-button:focus {
174
+ border: none;
175
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
176
+ outline-offset: 2px;
177
+ }
178
+ div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=number],
179
+ div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=text] {
180
+ height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 6px);
181
+ margin-inline: var(--salt-spacing-50);
182
+ padding: 0 var(--salt-spacing-50);
183
+ }
184
+ div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=text],
185
+ div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=number] {
186
+ border: none;
120
187
  }
121
188
  div[class*=ag-theme-salt] .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
122
189
  div[class*=ag-theme-salt] .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
@@ -124,6 +191,7 @@ div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible {
124
191
  background: var(--salt-actionable-secondary-background-active);
125
192
  color: var(--salt-actionable-secondary-foreground-active);
126
193
  --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
194
+ --salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
127
195
  }
128
196
  div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible .ag-icon {
129
197
  color: var(--salt-actionable-secondary-foreground-active);
@@ -143,7 +211,7 @@ div[class*=ag-theme-salt] .ag-label-align-right .ag-label {
143
211
 
144
212
  /* css/parts/ag-menus.css */
145
213
  div[class*=ag-theme-salt] .ag-menu {
146
- padding: 0;
214
+ padding: var(--salt-spacing-100);
147
215
  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
148
216
  }
149
217
  div[class*=ag-theme-salt] .ag-tabs {
@@ -326,10 +394,6 @@ div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]:focus
326
394
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
327
395
  outline-offset: -2px;
328
396
  }
329
- div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=text],
330
- div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=number] {
331
- border: none;
332
- }
333
397
 
334
398
  /* css/parts/ag-checkbox.css */
335
399
  div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
@@ -357,37 +421,29 @@ div[class*=ag-theme-salt] .ag-standard-button:hover {
357
421
  div[class*=ag-theme-salt] .ag-ltr .ag-filter-apply-panel-button {
358
422
  margin-left: 8px;
359
423
  }
360
- div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton] {
424
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
425
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
361
426
  background: var(--salt-actionable-cta-background);
362
427
  color: var(--salt-actionable-cta-foreground);
363
428
  }
364
- div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover {
429
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
430
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
365
431
  background: var(--salt-actionable-cta-background-hover);
366
432
  color: var(--salt-actionable-cta-foreground-hover);
367
433
  }
368
- div[class*=ag-theme-salt] .ag-floating-filter {
369
- border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
370
- }
371
- div[class*=ag-theme-salt] .ag-floating-filter:focus-within {
372
- outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
373
- outline-offset: -2px;
374
- }
375
- div[class*=ag-theme-salt] .ag-floating-filter:after {
376
- width: 0;
377
- }
378
434
  div[class*=ag-theme-salt] .ag-keyboard-focus .ag-header-cell:focus:after {
379
435
  border: 0;
380
436
  }
381
- div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
382
- margin-left: var(--salt-spacing-100);
383
- }
384
437
  div[class*=ag-theme-salt] button[class^=ag-]:focus,
385
438
  div[class*=ag-theme-salt] input[class^=ag-][type=button]:focus {
386
439
  box-shadow: none;
387
- border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
440
+ outline-style: var(--salt-focused-outlineStyle);
441
+ outline-width: var(--salt-focused-outlineWidth);
442
+ outline-color: var(--salt-focused-outlineColor);
443
+ outline-offset: var(--salt-focused-outlineOffset);
388
444
  }
389
445
  div[class*=ag-theme-salt] .ag-select .ag-picker-field-wrapper {
390
- border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
446
+ border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
391
447
  border-radius: 0;
392
448
  }
393
449
  div[class*=ag-theme-salt] .ag-select .ag-picker-field-icon {
@@ -535,7 +591,8 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
535
591
  --ag-icon-font-code-eye-slash: "\e913";
536
592
  --ag-icon-font-code-eye: "\e914";
537
593
  --ag-icon-font-code-filter-clear: "\e915";
538
- --ag-icon-font-code-filter: "\e916";
594
+ --ag-icon-font-code-filter: "\e915";
595
+ --ag-icon-font-code-filter-filled: "\e916";
539
596
  --ag-icon-font-code-first: "\e917";
540
597
  --ag-icon-font-code-grip: "\e918";
541
598
  --ag-icon-font-code-group: "\e919";