@salt-ds/ag-grid-theme 2.1.2 → 2.3.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 +6 -2
  2. package/salt-ag-theme.css +133 -36
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.3.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -13,6 +13,9 @@
13
13
  "/fonts",
14
14
  "/salt-ag-theme.css"
15
15
  ],
16
+ "sideEffects": [
17
+ "*.css"
18
+ ],
16
19
  "scripts": {
17
20
  "build": "yarn node ./scripts/build.mjs",
18
21
  "build-watch": "yarn node ./scripts/build.mjs --watch"
@@ -25,6 +28,7 @@
25
28
  "del": "^7.0.0"
26
29
  },
27
30
  "peerDependencies": {
28
- "@salt-ds/theme": "^1.23.2"
31
+ "@salt-ds/theme": "^1.24.0",
32
+ "ag-grid-community": ">=28.0.0"
29
33
  }
30
34
  }
package/salt-ag-theme.css CHANGED
@@ -27,6 +27,7 @@ div[class*=ag-theme-salt] {
27
27
  --ag-header-foreground-color: var(--salt-content-secondary-foreground);
28
28
  --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
29
29
  --ag-icon-size: max(var(--salt-size-icon), 12px);
30
+ --ag-input-border-color: var(--salt-editable-borderColor);
30
31
  --ag-input-focus-border-color: var(--salt-editable-borderColor-hover);
31
32
  --ag-input-focus-box-shadow: none;
32
33
  --ag-invalid-color: var(--salt-status-error-foreground-informative);
@@ -45,6 +46,7 @@ div[class*=ag-theme-salt] {
45
46
  --ag-selected-tab-underline-color: var(--salt-navigable-indicator-active);
46
47
  --ag-selected-tab-underline-width: var(--salt-size-indicator);
47
48
  --ag-subheader-background-color: var(--salt-container-primary-background);
49
+ --ag-control-panel-background-color: var(--salt-container-primary-background);
48
50
  --ag-toggle-button-off-background-color: var(--salt-container-primary-background);
49
51
  --ag-toggle-button-off-border-color: var(--salt-selectable-borderColor);
50
52
  --ag-toggle-button-on-background-color: var(--salt-container-primary-background);
@@ -76,6 +78,14 @@ div[class*=ag-theme-salt] .ag-header-row {
76
78
  font-size: var(--salt-text-label-fontSize);
77
79
  font-weight: var(--salt-text-label-fontWeight-strong);
78
80
  }
81
+ div[class*=ag-theme-salt] .ag-header-cell:focus-visible::after {
82
+ border: none;
83
+ }
84
+ div[class*=ag-theme-salt] .ag-header-cell:focus-visible {
85
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
86
+ outline-offset: -2px;
87
+ border-width: 0;
88
+ }
79
89
  div[class*=ag-theme-salt] .ag-pinned-left-header {
80
90
  border-right-color: var(--salt-separable-secondary-borderColor);
81
91
  }
@@ -89,10 +99,12 @@ div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-cell:not(.
89
99
  div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus {
90
100
  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
91
101
  }
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 {
102
+ 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,
103
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container {
93
104
  margin-left: auto;
94
105
  }
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 {
106
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
107
+ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container {
96
108
  margin-right: auto;
97
109
  }
98
110
  div[class*=ag-theme-salt] .ag-sort-indicator-container {
@@ -115,8 +127,65 @@ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-he
115
127
  div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter::before {
116
128
  background-color: transparent;
117
129
  }
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);
130
+ div[class*=ag-theme-salt] .ag-floating-filter {
131
+ border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
132
+ }
133
+ div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter {
134
+ padding-left: 0;
135
+ }
136
+ div[class*=ag-theme-salt] .ag-floating-filter .ag-floating-filter-body:focus-within {
137
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
138
+ outline-offset: -2px;
139
+ }
140
+ div[class*=ag-theme-salt] .ag-header-cell-menu-button:hover,
141
+ div[class*=ag-theme-salt] .ag-header-cell-filter-button:hover,
142
+ div[class*=ag-theme-salt] .ag-panel-title-bar-button:hover,
143
+ div[class*=ag-theme-salt] .ag-header-expand-icon:hover,
144
+ div[class*=ag-theme-salt] .ag-column-group-icons:hover,
145
+ div[class*=ag-theme-salt] .ag-set-filter-group-icons:hover,
146
+ div[class*=ag-theme-salt] .ag-group-expanded .ag-icon:hover,
147
+ div[class*=ag-theme-salt] .ag-group-contracted .ag-icon:hover,
148
+ div[class*=ag-theme-salt] .ag-chart-settings-prev:hover,
149
+ div[class*=ag-theme-salt] .ag-chart-settings-next:hover,
150
+ div[class*=ag-theme-salt] .ag-group-title-bar-icon:hover,
151
+ div[class*=ag-theme-salt] .ag-column-select-header-icon:hover,
152
+ div[class*=ag-theme-salt] .ag-floating-filter-button-button:hover,
153
+ div[class*=ag-theme-salt] .ag-filter-toolpanel-expand:hover,
154
+ div[class*=ag-theme-salt] .ag-panel-title-bar-button-icon:hover,
155
+ div[class*=ag-theme-salt] .ag-chart-menu-icon:hover {
156
+ box-shadow: 0 0 0 var(--salt-spacing-50) var(--salt-actionable-subtle-background-hover);
157
+ background-color: var(--salt-actionable-subtle-background-hover);
158
+ --ag-icon-font-color: var(--salt-actionable-subtle-foreground-hover);
159
+ --ag-icon-font-color-filter: var(--salt-actionable-subtle-foreground-hover);
160
+ --ag-icon-font-color-menu-alt: var(--salt-actionable-subtle-foreground-hover);
161
+ }
162
+ .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon,
163
+ .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-menu-icon {
164
+ margin-left: var(--salt-spacing-100);
165
+ }
166
+ div[class*=ag-theme-salt] .ag-filter-active {
167
+ --ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
168
+ }
169
+ div[class*=ag-theme-salt] .ag-floating-filter:after {
170
+ width: 0;
171
+ }
172
+ div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
173
+ margin-left: var(--salt-spacing-100);
174
+ }
175
+ div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button .ag-button:focus {
176
+ border: none;
177
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
178
+ outline-offset: 2px;
179
+ }
180
+ div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=number],
181
+ div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=text] {
182
+ height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 6px);
183
+ margin-inline: var(--salt-spacing-50);
184
+ padding: 0 var(--salt-spacing-50);
185
+ }
186
+ div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=text],
187
+ div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=number] {
188
+ border: none;
120
189
  }
121
190
  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
191
  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 +193,7 @@ div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible {
124
193
  background: var(--salt-actionable-secondary-background-active);
125
194
  color: var(--salt-actionable-secondary-foreground-active);
126
195
  --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
196
+ --salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
127
197
  }
128
198
  div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible .ag-icon {
129
199
  color: var(--salt-actionable-secondary-foreground-active);
@@ -143,7 +213,7 @@ div[class*=ag-theme-salt] .ag-label-align-right .ag-label {
143
213
 
144
214
  /* css/parts/ag-menus.css */
145
215
  div[class*=ag-theme-salt] .ag-menu {
146
- padding: 0;
216
+ padding: var(--salt-spacing-100);
147
217
  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
148
218
  }
149
219
  div[class*=ag-theme-salt] .ag-tabs {
@@ -212,6 +282,10 @@ div[class*=ag-theme-salt] .ag-cell-inline-editing:focus-within {
212
282
  }
213
283
  div[class*=ag-theme-salt] .ag-cell-inline-editing {
214
284
  padding: 0;
285
+ border-radius: 0;
286
+ }
287
+ div[class*=ag-theme-salt] .ag-cell-inline-editing.editable-cell input[class^=ag-] {
288
+ padding: 0 var(--salt-spacing-100);
215
289
  }
216
290
  div[class*=ag-theme-salt] .editable-cell,
217
291
  div[class*=ag-theme-salt] .editable-numeric-cell {
@@ -237,11 +311,6 @@ div[class*=ag-theme-salt] .ag-cell-focus:not(.ag-cell-range-selected):focus-with
237
311
  div[class*=ag-theme-salt] .ag-cell-wrapper.ag-row-group {
238
312
  align-items: center;
239
313
  }
240
- div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus,
241
- div[class*=ag-theme-salt] .editable-numeric-cell.ag-cell-focus:focus,
242
- div[class*=ag-theme-salt] .editable-cell.ag-cell-focus:focus-within {
243
- overflow: visible;
244
- }
245
314
  div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus:before,
246
315
  div[class*=ag-theme-salt] .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
247
316
  div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
@@ -265,6 +334,38 @@ div[class*=ag-theme-salt] .editable-numeric-cell input {
265
334
  border: none;
266
335
  background-color: transparent;
267
336
  }
337
+ div[class*=ag-theme-salt] .ag-large-text-input {
338
+ padding: 0;
339
+ }
340
+ div[class*=ag-theme-salt] .editable-cell .ag-picker-field-wrapper {
341
+ background-color: transparent;
342
+ border: none;
343
+ }
344
+ div[class*=ag-theme-salt] .ag-select .ag-picker-field-wrapper {
345
+ border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
346
+ border-radius: 0;
347
+ }
348
+ div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
349
+ div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-rich-select .ag-picker-field-wrapper {
350
+ padding: 0 var(--salt-spacing-100);
351
+ border-radius: 0;
352
+ }
353
+ div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before,
354
+ div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-rich-select .ag-icon-small-down::before {
355
+ content: var(--ag-icon-font-code-contracted);
356
+ }
357
+ div[class*=ag-theme-salt] .ag-ltr .ag-select-list-item,
358
+ div[class*=ag-theme-salt] .ag-ltr .ag-rich-select-row {
359
+ padding: 0 var(--salt-spacing-100);
360
+ }
361
+ div[class*=ag-theme-salt] .ag-select-list,
362
+ div[class*=ag-theme-salt] .ag-rich-select-list {
363
+ border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
364
+ }
365
+ div[class*=ag-theme-salt] .ag-select-list-item[aria-selected=true],
366
+ div[class*=ag-theme-salt] .ag-rich-select-row-selected {
367
+ 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);
368
+ }
268
369
  div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after {
269
370
  content: "";
270
371
  top: 0;
@@ -326,10 +427,20 @@ div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]:focus
326
427
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
327
428
  outline-offset: -2px;
328
429
  }
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] {
430
+ div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-] {
431
+ border-radius: var(--salt-palette-corner-weak, 0);
432
+ padding: var(--salt-spacing-100) var(--salt-spacing-100);
433
+ }
434
+ div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text,
435
+ div[class*=ag-theme-salt] .ag-autocomplete-list-popup {
331
436
  border: none;
332
437
  }
438
+ div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-] {
439
+ border-color: var(--salt-selectable-borderColor-selected);
440
+ }
441
+ div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus {
442
+ outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
443
+ }
333
444
 
334
445
  /* css/parts/ag-checkbox.css */
335
446
  div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
@@ -357,41 +468,26 @@ div[class*=ag-theme-salt] .ag-standard-button:hover {
357
468
  div[class*=ag-theme-salt] .ag-ltr .ag-filter-apply-panel-button {
358
469
  margin-left: 8px;
359
470
  }
360
- div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton] {
471
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
472
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
361
473
  background: var(--salt-actionable-cta-background);
362
474
  color: var(--salt-actionable-cta-foreground);
363
475
  }
364
- div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover {
476
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
477
+ div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
365
478
  background: var(--salt-actionable-cta-background-hover);
366
479
  color: var(--salt-actionable-cta-foreground-hover);
367
480
  }
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
481
  div[class*=ag-theme-salt] .ag-keyboard-focus .ag-header-cell:focus:after {
379
482
  border: 0;
380
483
  }
381
- div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
382
- margin-left: var(--salt-spacing-100);
383
- }
384
484
  div[class*=ag-theme-salt] button[class^=ag-]:focus,
385
485
  div[class*=ag-theme-salt] input[class^=ag-][type=button]:focus {
386
486
  box-shadow: none;
387
- border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
388
- }
389
- 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);
391
- border-radius: 0;
392
- }
393
- div[class*=ag-theme-salt] .ag-select .ag-picker-field-icon {
394
- margin-right: var(--salt-spacing-100);
487
+ outline-style: var(--salt-focused-outlineStyle);
488
+ outline-width: var(--salt-focused-outlineWidth);
489
+ outline-color: var(--salt-focused-outlineColor);
490
+ outline-offset: var(--salt-focused-outlineOffset);
395
491
  }
396
492
  div[class*=ag-theme-salt] .ag-menu .ag-filter-body-wrapper {
397
493
  display: flex;
@@ -535,7 +631,8 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
535
631
  --ag-icon-font-code-eye-slash: "\e913";
536
632
  --ag-icon-font-code-eye: "\e914";
537
633
  --ag-icon-font-code-filter-clear: "\e915";
538
- --ag-icon-font-code-filter: "\e916";
634
+ --ag-icon-font-code-filter: "\e915";
635
+ --ag-icon-font-code-filter-filled: "\e916";
539
636
  --ag-icon-font-code-first: "\e917";
540
637
  --ag-icon-font-code-grip: "\e918";
541
638
  --ag-icon-font-code-group: "\e919";