@salt-ds/ag-grid-theme 2.1.1 → 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 +106 -29
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.1.1",
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.0"
28
+ "@salt-ds/theme": "^1.23.3",
29
+ "ag-grid-community": ">=28.0.0"
29
30
  }
30
31
  }
package/salt-ag-theme.css CHANGED
@@ -1,4 +1,4 @@
1
- /* css/salt-ag-grid-theme.css */
1
+ /* css/parts/ag-root-var.css */
2
2
  div[class*=ag-theme-salt] {
3
3
  --ag-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
4
4
  --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
@@ -63,6 +63,8 @@ div[class*=ag-theme-salt-compact] {
63
63
  div[class*=ag-theme-salt] .ag-root-wrapper {
64
64
  border: none;
65
65
  }
66
+
67
+ /* css/parts/ag-header.css */
66
68
  div[class*=ag-theme-salt] .ag-header {
67
69
  --ag-icon-font-color: var(--ag-header-foreground-color);
68
70
  }
@@ -74,6 +76,14 @@ div[class*=ag-theme-salt] .ag-header-row {
74
76
  font-size: var(--salt-text-label-fontSize);
75
77
  font-weight: var(--salt-text-label-fontWeight-strong);
76
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
+ }
77
87
  div[class*=ag-theme-salt] .ag-pinned-left-header {
78
88
  border-right-color: var(--salt-separable-secondary-borderColor);
79
89
  }
@@ -87,10 +97,12 @@ div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-cell:not(.
87
97
  div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus {
88
98
  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
89
99
  }
90
- 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 {
91
102
  margin-left: auto;
92
103
  }
93
- 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 {
94
106
  margin-right: auto;
95
107
  }
96
108
  div[class*=ag-theme-salt] .ag-sort-indicator-container {
@@ -113,8 +125,65 @@ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-he
113
125
  div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter::before {
114
126
  background-color: transparent;
115
127
  }
116
- div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=number] {
117
- 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;
118
187
  }
119
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,
120
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,
@@ -122,6 +191,7 @@ div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible {
122
191
  background: var(--salt-actionable-secondary-background-active);
123
192
  color: var(--salt-actionable-secondary-foreground-active);
124
193
  --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
194
+ --salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
125
195
  }
126
196
  div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible .ag-icon {
127
197
  color: var(--salt-actionable-secondary-foreground-active);
@@ -138,8 +208,10 @@ div[class*=ag-theme-salt] .ag-label-align-right .ag-label {
138
208
  margin-inline-start: var(--salt-spacing-100);
139
209
  margin-inline-end: 0;
140
210
  }
211
+
212
+ /* css/parts/ag-menus.css */
141
213
  div[class*=ag-theme-salt] .ag-menu {
142
- padding: 0;
214
+ padding: var(--salt-spacing-100);
143
215
  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
144
216
  }
145
217
  div[class*=ag-theme-salt] .ag-tabs {
@@ -176,6 +248,8 @@ div[class*=ag-theme-salt] .ag-column-select-header {
176
248
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
177
249
  border: 0;
178
250
  }
251
+
252
+ /* css/parts/ag-body.css */
179
253
  div[class*=ag-theme-salt] .ag-row {
180
254
  font-size: var(--salt-text-fontSize);
181
255
  }
@@ -295,6 +369,8 @@ div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-sin
295
369
  position: absolute;
296
370
  border-left: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
297
371
  }
372
+
373
+ /* css/parts/ag-input.css */
298
374
  div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=text],
299
375
  div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=number],
300
376
  div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=text],
@@ -318,16 +394,16 @@ div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]:focus
318
394
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
319
395
  outline-offset: -2px;
320
396
  }
321
- div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=text],
322
- div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=number] {
323
- border: none;
324
- }
397
+
398
+ /* css/parts/ag-checkbox.css */
325
399
  div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
326
400
  height: var(--salt-size-selectable);
327
401
  width: var(--salt-size-selectable);
328
402
  font-size: var(--salt-size-selectable);
329
403
  line-height: var(--salt-size-selectable);
330
404
  }
405
+
406
+ /* css/parts/ag-buttons.css */
331
407
  div[class*=ag-theme-salt] .ag-standard-button {
332
408
  background: var(--salt-actionable-secondary-background);
333
409
  border: 0;
@@ -345,37 +421,29 @@ div[class*=ag-theme-salt] .ag-standard-button:hover {
345
421
  div[class*=ag-theme-salt] .ag-ltr .ag-filter-apply-panel-button {
346
422
  margin-left: 8px;
347
423
  }
348
- 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] {
349
426
  background: var(--salt-actionable-cta-background);
350
427
  color: var(--salt-actionable-cta-foreground);
351
428
  }
352
- 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 {
353
431
  background: var(--salt-actionable-cta-background-hover);
354
432
  color: var(--salt-actionable-cta-foreground-hover);
355
433
  }
356
- div[class*=ag-theme-salt] .ag-floating-filter {
357
- border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
358
- }
359
- div[class*=ag-theme-salt] .ag-floating-filter:focus-within {
360
- outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
361
- outline-offset: -2px;
362
- }
363
- div[class*=ag-theme-salt] .ag-floating-filter:after {
364
- width: 0;
365
- }
366
434
  div[class*=ag-theme-salt] .ag-keyboard-focus .ag-header-cell:focus:after {
367
435
  border: 0;
368
436
  }
369
- div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
370
- margin-left: var(--salt-spacing-100);
371
- }
372
437
  div[class*=ag-theme-salt] button[class^=ag-]:focus,
373
438
  div[class*=ag-theme-salt] input[class^=ag-][type=button]:focus {
374
439
  box-shadow: none;
375
- 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);
376
444
  }
377
445
  div[class*=ag-theme-salt] .ag-select .ag-picker-field-wrapper {
378
- 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);
379
447
  border-radius: 0;
380
448
  }
381
449
  div[class*=ag-theme-salt] .ag-select .ag-picker-field-icon {
@@ -448,6 +516,8 @@ div[class*=ag-theme-salt] .ag-column-drop-cell {
448
516
  .ag-theme-salt-variant-zebra .ag-row {
449
517
  border-color: var(--salt-separable-tertiary-borderColor);
450
518
  }
519
+
520
+ /* css/parts/ag-tool-panel.css */
451
521
  div[class*=ag-theme-salt] .ag-tool-panel-wrapper > .ag-react-container {
452
522
  width: inherit;
453
523
  }
@@ -463,6 +533,8 @@ div[class*=ag-theme-salt] .ag-column-drop-vertical-empty-message {
463
533
  div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
464
534
  margin-bottom: var(--salt-spacing-100);
465
535
  }
536
+
537
+ /* css/parts/ag-toggle-button.css */
466
538
  .ag-toggle-button-input-wrapper::before {
467
539
  top: calc(1px - var(--ag-toggle-button-border-width));
468
540
  left: calc(1px - var(--ag-toggle-button-border-width));
@@ -474,6 +546,8 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
474
546
  border-color: var(--ag-toggle-button-switch-border-color);
475
547
  left: calc(100% - var(--ag-toggle-button-height) + 2 * var(--ag-toggle-button-border-width));
476
548
  }
549
+
550
+ /* css/parts/ag-column-drop-list.css */
477
551
  .ag-column-drop-cell-drag-handle {
478
552
  margin-left: 0;
479
553
  }
@@ -485,10 +559,12 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
485
559
  min-width: unset;
486
560
  }
487
561
 
562
+ /* css/salt-ag-grid-theme.css */
563
+
488
564
  /* css/salt-icons.css */
489
565
  @font-face {
490
566
  font-family: "salt-icons";
491
- src: url(./fonts/salt-icons.woff) format("woff");
567
+ src: url("./fonts/salt-icons.woff") format("woff");
492
568
  }
493
569
  [class*=ag-theme-salt] {
494
570
  --ag-icon-image-display: none;
@@ -515,7 +591,8 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
515
591
  --ag-icon-font-code-eye-slash: "\e913";
516
592
  --ag-icon-font-code-eye: "\e914";
517
593
  --ag-icon-font-code-filter-clear: "\e915";
518
- --ag-icon-font-code-filter: "\e916";
594
+ --ag-icon-font-code-filter: "\e915";
595
+ --ag-icon-font-code-filter-filled: "\e916";
519
596
  --ag-icon-font-code-first: "\e917";
520
597
  --ag-icon-font-code-grip: "\e918";
521
598
  --ag-icon-font-code-group: "\e919";