@salt-ds/ag-grid-theme 2.3.4 → 2.4.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 +2 -2
  2. package/salt-ag-theme.css +637 -160
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.3.4",
3
+ "version": "2.4.0",
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.28.0",
31
+ "@salt-ds/theme": "^1.28.1",
32
32
  "ag-grid-community": ">=28.0.0"
33
33
  }
34
34
  }
package/salt-ag-theme.css CHANGED
@@ -62,97 +62,220 @@ div[class*=ag-theme-salt-compact] {
62
62
  --salt-size-base: 16px;
63
63
  --salt-size-selectable: 12px;
64
64
  }
65
- div[class*=ag-theme-salt] .ag-root-wrapper {
65
+ .ag-theme-salt-light .ag-root-wrapper,
66
+ .ag-theme-salt-dark .ag-root-wrapper,
67
+ .ag-theme-salt-compact-light .ag-root-wrapper,
68
+ .ag-theme-salt-compact-dark .ag-root-wrapper {
66
69
  border: none;
67
70
  }
68
71
 
69
72
  /* css/parts/ag-header.css */
70
- div[class*=ag-theme-salt] .ag-header {
73
+ .ag-theme-salt-light .ag-header,
74
+ .ag-theme-salt-dark .ag-header,
75
+ .ag-theme-salt-compact-light .ag-header,
76
+ .ag-theme-salt-compact-dark .ag-header {
71
77
  --ag-icon-font-color: var(--ag-header-foreground-color);
72
78
  }
73
- div[class*=ag-theme-salt] .ag-advanced-filter-header,
74
- div[class*=ag-theme-salt] .ag-header {
79
+ .ag-theme-salt-light .ag-advanced-filter-header,
80
+ .ag-theme-salt-dark .ag-advanced-filter-header,
81
+ .ag-theme-salt-compact-light .ag-advanced-filter-header,
82
+ .ag-theme-salt-compact-dark .ag-advanced-filter-header,
83
+ .ag-theme-salt-light .ag-header,
84
+ .ag-theme-salt-dark .ag-header,
85
+ .ag-theme-salt-compact-light .ag-header,
86
+ .ag-theme-salt-compact-dark .ag-header {
75
87
  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);
76
88
  }
77
- div[class*=ag-theme-salt] .ag-header-row {
89
+ .ag-theme-salt-light .ag-header-row,
90
+ .ag-theme-salt-dark .ag-header-row,
91
+ .ag-theme-salt-compact-light .ag-header-row,
92
+ .ag-theme-salt-compact-dark .ag-header-row {
78
93
  font-size: var(--salt-text-label-fontSize);
79
94
  font-weight: var(--salt-text-label-fontWeight-strong);
80
95
  }
81
- div[class*=ag-theme-salt] .ag-header-cell:focus-visible::after {
96
+ .ag-theme-salt-light .ag-header-cell:focus-visible::after,
97
+ .ag-theme-salt-dark .ag-header-cell:focus-visible::after,
98
+ .ag-theme-salt-compact-light .ag-header-cell:focus-visible::after,
99
+ .ag-theme-salt-compact-dark .ag-header-cell:focus-visible::after {
82
100
  border: none;
83
101
  }
84
- div[class*=ag-theme-salt] .ag-header-cell:focus-visible {
102
+ .ag-theme-salt-light .ag-header-cell:focus-visible,
103
+ .ag-theme-salt-dark .ag-header-cell:focus-visible,
104
+ .ag-theme-salt-compact-light .ag-header-cell:focus-visible,
105
+ .ag-theme-salt-compact-dark .ag-header-cell:focus-visible {
85
106
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
86
107
  outline-offset: -2px;
87
108
  border-width: 0;
88
109
  }
89
- div[class*=ag-theme-salt] .ag-pinned-left-header {
110
+ .ag-theme-salt-light .ag-pinned-left-header,
111
+ .ag-theme-salt-dark .ag-pinned-left-header,
112
+ .ag-theme-salt-compact-light .ag-pinned-left-header,
113
+ .ag-theme-salt-compact-dark .ag-pinned-left-header {
90
114
  border-right-color: var(--salt-separable-secondary-borderColor);
91
115
  }
92
- div[class*=ag-theme-salt] .ag-pinned-right-header {
116
+ .ag-theme-salt-light .ag-pinned-right-header,
117
+ .ag-theme-salt-dark .ag-pinned-right-header,
118
+ .ag-theme-salt-compact-light .ag-pinned-right-header,
119
+ .ag-theme-salt-compact-dark .ag-pinned-right-header {
93
120
  border-left-color: var(--salt-separable-secondary-borderColor);
94
121
  }
95
- div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total) {
122
+ .ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
123
+ .ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
124
+ .ag-theme-salt-compact-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
125
+ .ag-theme-salt-compact-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total) {
96
126
  border-top-color: var(--salt-container-primary-borderColor);
97
127
  }
98
- div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
99
- div[class*=ag-theme-salt] .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus {
128
+ .ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
129
+ .ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
130
+ .ag-theme-salt-compact-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
131
+ .ag-theme-salt-compact-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
132
+ .ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus,
133
+ .ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus,
134
+ .ag-theme-salt-compact-light .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus,
135
+ .ag-theme-salt-compact-dark .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus {
100
136
  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
101
137
  }
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 {
138
+ .ag-theme-salt-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
139
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
140
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
141
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
142
+ .ag-theme-salt-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container,
143
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container,
144
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container,
145
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container {
104
146
  margin-left: auto;
105
147
  }
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 {
148
+ .ag-theme-salt-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
149
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
150
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
151
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
152
+ .ag-theme-salt-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container,
153
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container,
154
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container,
155
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container {
108
156
  margin-right: auto;
109
157
  }
110
- div[class*=ag-theme-salt] .ag-sort-indicator-container {
158
+ .ag-theme-salt-light .ag-sort-indicator-container,
159
+ .ag-theme-salt-dark .ag-sort-indicator-container,
160
+ .ag-theme-salt-compact-light .ag-sort-indicator-container,
161
+ .ag-theme-salt-compact-dark .ag-sort-indicator-container {
111
162
  align-items: center;
112
163
  }
113
- div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon {
164
+ .ag-theme-salt-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon,
165
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon,
166
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon,
167
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon {
114
168
  padding-left: var(--salt-spacing-100);
115
169
  }
116
- div[class*=ag-theme-salt] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-sort-indicator-icon {
170
+ .ag-theme-salt-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-sort-indicator-icon,
171
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-sort-indicator-icon,
172
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-sort-indicator-icon,
173
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-sort-indicator-icon {
117
174
  padding-right: var(--salt-spacing-100);
118
175
  }
119
- div[class*=ag-theme-salt] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon {
176
+ .ag-theme-salt-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon,
177
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon,
178
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon,
179
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon {
120
180
  margin-left: auto;
121
181
  padding-right: var(--salt-spacing-100);
122
182
  }
123
- div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
183
+ .ag-theme-salt-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon,
184
+ .ag-theme-salt-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon,
185
+ .ag-theme-salt-compact-light .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon,
186
+ .ag-theme-salt-compact-dark .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
124
187
  margin-right: auto;
125
188
  padding-left: var(--salt-spacing-100);
126
189
  }
127
- div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter::before {
190
+ .ag-theme-salt-light .ag-header-cell.ag-floating-filter::before,
191
+ .ag-theme-salt-dark .ag-header-cell.ag-floating-filter::before,
192
+ .ag-theme-salt-compact-light .ag-header-cell.ag-floating-filter::before,
193
+ .ag-theme-salt-compact-dark .ag-header-cell.ag-floating-filter::before {
128
194
  background-color: transparent;
129
195
  }
130
- div[class*=ag-theme-salt] .ag-floating-filter {
196
+ .ag-theme-salt-light .ag-floating-filter,
197
+ .ag-theme-salt-dark .ag-floating-filter,
198
+ .ag-theme-salt-compact-light .ag-floating-filter,
199
+ .ag-theme-salt-compact-dark .ag-floating-filter {
131
200
  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
132
201
  }
133
- div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter {
202
+ .ag-theme-salt-light .ag-header-cell.ag-floating-filter,
203
+ .ag-theme-salt-dark .ag-header-cell.ag-floating-filter,
204
+ .ag-theme-salt-compact-light .ag-header-cell.ag-floating-filter,
205
+ .ag-theme-salt-compact-dark .ag-header-cell.ag-floating-filter {
134
206
  padding-left: 0;
135
207
  }
136
- div[class*=ag-theme-salt] .ag-floating-filter .ag-floating-filter-body:focus-within {
208
+ .ag-theme-salt-light .ag-floating-filter .ag-floating-filter-body:focus-within,
209
+ .ag-theme-salt-dark .ag-floating-filter .ag-floating-filter-body:focus-within,
210
+ .ag-theme-salt-compact-light .ag-floating-filter .ag-floating-filter-body:focus-within,
211
+ .ag-theme-salt-compact-dark .ag-floating-filter .ag-floating-filter-body:focus-within {
137
212
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
138
213
  outline-offset: -2px;
139
214
  }
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 {
215
+ .ag-theme-salt-light .ag-header-cell-menu-button:hover,
216
+ .ag-theme-salt-dark .ag-header-cell-menu-button:hover,
217
+ .ag-theme-salt-compact-light .ag-header-cell-menu-button:hover,
218
+ .ag-theme-salt-compact-dark .ag-header-cell-menu-button:hover,
219
+ .ag-theme-salt-light .ag-header-cell-filter-button:hover,
220
+ .ag-theme-salt-dark .ag-header-cell-filter-button:hover,
221
+ .ag-theme-salt-compact-light .ag-header-cell-filter-button:hover,
222
+ .ag-theme-salt-compact-dark .ag-header-cell-filter-button:hover,
223
+ .ag-theme-salt-light .ag-panel-title-bar-button:hover,
224
+ .ag-theme-salt-dark .ag-panel-title-bar-button:hover,
225
+ .ag-theme-salt-compact-light .ag-panel-title-bar-button:hover,
226
+ .ag-theme-salt-compact-dark .ag-panel-title-bar-button:hover,
227
+ .ag-theme-salt-light .ag-header-expand-icon:hover,
228
+ .ag-theme-salt-dark .ag-header-expand-icon:hover,
229
+ .ag-theme-salt-compact-light .ag-header-expand-icon:hover,
230
+ .ag-theme-salt-compact-dark .ag-header-expand-icon:hover,
231
+ .ag-theme-salt-light .ag-column-group-icons:hover,
232
+ .ag-theme-salt-dark .ag-column-group-icons:hover,
233
+ .ag-theme-salt-compact-light .ag-column-group-icons:hover,
234
+ .ag-theme-salt-compact-dark .ag-column-group-icons:hover,
235
+ .ag-theme-salt-light .ag-set-filter-group-icons:hover,
236
+ .ag-theme-salt-dark .ag-set-filter-group-icons:hover,
237
+ .ag-theme-salt-compact-light .ag-set-filter-group-icons:hover,
238
+ .ag-theme-salt-compact-dark .ag-set-filter-group-icons:hover,
239
+ .ag-theme-salt-light .ag-group-expanded .ag-icon:hover,
240
+ .ag-theme-salt-dark .ag-group-expanded .ag-icon:hover,
241
+ .ag-theme-salt-compact-light .ag-group-expanded .ag-icon:hover,
242
+ .ag-theme-salt-compact-dark .ag-group-expanded .ag-icon:hover,
243
+ .ag-theme-salt-light .ag-group-contracted .ag-icon:hover,
244
+ .ag-theme-salt-dark .ag-group-contracted .ag-icon:hover,
245
+ .ag-theme-salt-compact-light .ag-group-contracted .ag-icon:hover,
246
+ .ag-theme-salt-compact-dark .ag-group-contracted .ag-icon:hover,
247
+ .ag-theme-salt-light .ag-chart-settings-prev:hover,
248
+ .ag-theme-salt-dark .ag-chart-settings-prev:hover,
249
+ .ag-theme-salt-compact-light .ag-chart-settings-prev:hover,
250
+ .ag-theme-salt-compact-dark .ag-chart-settings-prev:hover,
251
+ .ag-theme-salt-light .ag-chart-settings-next:hover,
252
+ .ag-theme-salt-dark .ag-chart-settings-next:hover,
253
+ .ag-theme-salt-compact-light .ag-chart-settings-next:hover,
254
+ .ag-theme-salt-compact-dark .ag-chart-settings-next:hover,
255
+ .ag-theme-salt-light .ag-group-title-bar-icon:hover,
256
+ .ag-theme-salt-dark .ag-group-title-bar-icon:hover,
257
+ .ag-theme-salt-compact-light .ag-group-title-bar-icon:hover,
258
+ .ag-theme-salt-compact-dark .ag-group-title-bar-icon:hover,
259
+ .ag-theme-salt-light .ag-column-select-header-icon:hover,
260
+ .ag-theme-salt-dark .ag-column-select-header-icon:hover,
261
+ .ag-theme-salt-compact-light .ag-column-select-header-icon:hover,
262
+ .ag-theme-salt-compact-dark .ag-column-select-header-icon:hover,
263
+ .ag-theme-salt-light .ag-floating-filter-button-button:hover,
264
+ .ag-theme-salt-dark .ag-floating-filter-button-button:hover,
265
+ .ag-theme-salt-compact-light .ag-floating-filter-button-button:hover,
266
+ .ag-theme-salt-compact-dark .ag-floating-filter-button-button:hover,
267
+ .ag-theme-salt-light .ag-filter-toolpanel-expand:hover,
268
+ .ag-theme-salt-dark .ag-filter-toolpanel-expand:hover,
269
+ .ag-theme-salt-compact-light .ag-filter-toolpanel-expand:hover,
270
+ .ag-theme-salt-compact-dark .ag-filter-toolpanel-expand:hover,
271
+ .ag-theme-salt-light .ag-panel-title-bar-button-icon:hover,
272
+ .ag-theme-salt-dark .ag-panel-title-bar-button-icon:hover,
273
+ .ag-theme-salt-compact-light .ag-panel-title-bar-button-icon:hover,
274
+ .ag-theme-salt-compact-dark .ag-panel-title-bar-button-icon:hover,
275
+ .ag-theme-salt-light .ag-chart-menu-icon:hover,
276
+ .ag-theme-salt-dark .ag-chart-menu-icon:hover,
277
+ .ag-theme-salt-compact-light .ag-chart-menu-icon:hover,
278
+ .ag-theme-salt-compact-dark .ag-chart-menu-icon:hover {
156
279
  box-shadow: 0 0 0 var(--salt-spacing-50) var(--salt-actionable-subtle-background-hover);
157
280
  background-color: var(--salt-actionable-subtle-background-hover);
158
281
  --ag-icon-font-color: var(--salt-actionable-subtle-foreground-hover);
@@ -163,158 +286,314 @@ div[class*=ag-theme-salt] .ag-chart-menu-icon:hover {
163
286
  .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-menu-icon {
164
287
  margin-left: var(--salt-spacing-100);
165
288
  }
166
- div[class*=ag-theme-salt] .ag-filter-active {
289
+ .ag-theme-salt-light .ag-filter-active,
290
+ .ag-theme-salt-dark .ag-filter-active,
291
+ .ag-theme-salt-compact-light .ag-filter-active,
292
+ .ag-theme-salt-compact-dark .ag-filter-active {
167
293
  --ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
168
294
  }
169
- div[class*=ag-theme-salt] .ag-floating-filter:after {
295
+ .ag-theme-salt-light .ag-floating-filter:after,
296
+ .ag-theme-salt-dark .ag-floating-filter:after,
297
+ .ag-theme-salt-compact-light .ag-floating-filter:after,
298
+ .ag-theme-salt-compact-dark .ag-floating-filter:after {
170
299
  width: 0;
171
300
  }
172
- div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
301
+ .ag-theme-salt-light .ag-ltr .ag-floating-filter-button,
302
+ .ag-theme-salt-dark .ag-ltr .ag-floating-filter-button,
303
+ .ag-theme-salt-compact-light .ag-ltr .ag-floating-filter-button,
304
+ .ag-theme-salt-compact-dark .ag-ltr .ag-floating-filter-button {
173
305
  margin-left: var(--salt-spacing-100);
174
306
  }
175
- div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button .ag-button:focus {
307
+ .ag-theme-salt-light .ag-ltr .ag-floating-filter-button .ag-button:focus,
308
+ .ag-theme-salt-dark .ag-ltr .ag-floating-filter-button .ag-button:focus,
309
+ .ag-theme-salt-compact-light .ag-ltr .ag-floating-filter-button .ag-button:focus,
310
+ .ag-theme-salt-compact-dark .ag-ltr .ag-floating-filter-button .ag-button:focus {
176
311
  border: none;
177
312
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
178
313
  outline-offset: 2px;
179
314
  }
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] {
315
+ .ag-theme-salt-light .ag-floating-filter input[class^=ag-][type=number],
316
+ .ag-theme-salt-dark .ag-floating-filter input[class^=ag-][type=number],
317
+ .ag-theme-salt-compact-light .ag-floating-filter input[class^=ag-][type=number],
318
+ .ag-theme-salt-compact-dark .ag-floating-filter input[class^=ag-][type=number],
319
+ .ag-theme-salt-light .ag-floating-filter input[class^=ag-][type=text],
320
+ .ag-theme-salt-dark .ag-floating-filter input[class^=ag-][type=text],
321
+ .ag-theme-salt-compact-light .ag-floating-filter input[class^=ag-][type=text],
322
+ .ag-theme-salt-compact-dark .ag-floating-filter input[class^=ag-][type=text] {
182
323
  height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 6px);
183
324
  margin-inline: var(--salt-spacing-50);
184
325
  padding: 0 var(--salt-spacing-50);
185
326
  }
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] {
327
+ .ag-theme-salt-light .ag-floating-filter-input input[class^=ag-][type=text],
328
+ .ag-theme-salt-dark .ag-floating-filter-input input[class^=ag-][type=text],
329
+ .ag-theme-salt-compact-light .ag-floating-filter-input input[class^=ag-][type=text],
330
+ .ag-theme-salt-compact-dark .ag-floating-filter-input input[class^=ag-][type=text],
331
+ .ag-theme-salt-light .ag-floating-filter-input input[class^=ag-][type=number],
332
+ .ag-theme-salt-dark .ag-floating-filter-input input[class^=ag-][type=number],
333
+ .ag-theme-salt-compact-light .ag-floating-filter-input input[class^=ag-][type=number],
334
+ .ag-theme-salt-compact-dark .ag-floating-filter-input input[class^=ag-][type=number] {
188
335
  border: none;
189
336
  }
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,
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,
192
- div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible {
337
+ .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,
338
+ .ag-theme-salt-dark .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
339
+ .ag-theme-salt-compact-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,
340
+ .ag-theme-salt-compact-dark .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
341
+ .ag-theme-salt-light .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
342
+ .ag-theme-salt-dark .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
343
+ .ag-theme-salt-compact-light .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
344
+ .ag-theme-salt-compact-dark .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
345
+ .ag-theme-salt-light .ag-header-cell.ag-column-menu-visible,
346
+ .ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible,
347
+ .ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible,
348
+ .ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible {
193
349
  background: var(--salt-actionable-secondary-background-active);
194
350
  color: var(--salt-actionable-secondary-foreground-active);
195
351
  --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
196
352
  --salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
197
353
  }
198
- div[class*=ag-theme-salt] .ag-header-cell.ag-column-menu-visible .ag-icon {
354
+ .ag-theme-salt-light .ag-header-cell.ag-column-menu-visible .ag-icon,
355
+ .ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible .ag-icon,
356
+ .ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible .ag-icon,
357
+ .ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible .ag-icon {
199
358
  color: var(--salt-actionable-secondary-foreground-active);
200
359
  }
201
- div[class*=ag-theme-salt] .ag-cell-label-container {
360
+ .ag-theme-salt-light .ag-cell-label-container,
361
+ .ag-theme-salt-dark .ag-cell-label-container,
362
+ .ag-theme-salt-compact-light .ag-cell-label-container,
363
+ .ag-theme-salt-compact-dark .ag-cell-label-container {
202
364
  padding: var(--salt-spacing-50) 0;
203
365
  }
204
- div[class*=ag-theme-salt] .ag-list-item:hover,
205
- div[class*=ag-theme-salt] .ag-virtual-list-item:hover {
366
+ .ag-theme-salt-light .ag-list-item:hover,
367
+ .ag-theme-salt-dark .ag-list-item:hover,
368
+ .ag-theme-salt-compact-light .ag-list-item:hover,
369
+ .ag-theme-salt-compact-dark .ag-list-item:hover,
370
+ .ag-theme-salt-light .ag-virtual-list-item:hover,
371
+ .ag-theme-salt-dark .ag-virtual-list-item:hover,
372
+ .ag-theme-salt-compact-light .ag-virtual-list-item:hover,
373
+ .ag-theme-salt-compact-dark .ag-virtual-list-item:hover {
206
374
  background-color: var(--salt-selectable-background-hover);
207
375
  cursor: pointer;
208
376
  }
209
- div[class*=ag-theme-salt] .ag-label-align-right .ag-label {
377
+ .ag-theme-salt-light .ag-label-align-right .ag-label,
378
+ .ag-theme-salt-dark .ag-label-align-right .ag-label,
379
+ .ag-theme-salt-compact-light .ag-label-align-right .ag-label,
380
+ .ag-theme-salt-compact-dark .ag-label-align-right .ag-label {
210
381
  margin-inline-start: var(--salt-spacing-100);
211
382
  margin-inline-end: 0;
212
383
  }
213
384
 
214
385
  /* css/parts/ag-menus.css */
215
- div[class*=ag-theme-salt] .ag-menu {
386
+ .ag-theme-salt-light .ag-menu,
387
+ .ag-theme-salt-dark .ag-menu,
388
+ .ag-theme-salt-compact-light .ag-menu,
389
+ .ag-theme-salt-compact-dark .ag-menu {
216
390
  padding: var(--salt-spacing-100);
217
391
  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
218
392
  }
219
- div[class*=ag-theme-salt] .ag-tabs {
393
+ .ag-theme-salt-light .ag-tabs,
394
+ .ag-theme-salt-dark .ag-tabs,
395
+ .ag-theme-salt-compact-light .ag-tabs,
396
+ .ag-theme-salt-compact-dark .ag-tabs {
220
397
  padding: var(--salt-spacing-100);
221
398
  }
222
- div[class*=ag-theme-salt] .ag-popup-child:not(.ag-tooltip-custom) {
399
+ .ag-theme-salt-light .ag-popup-child:not(.ag-tooltip-custom),
400
+ .ag-theme-salt-dark .ag-popup-child:not(.ag-tooltip-custom),
401
+ .ag-theme-salt-compact-light .ag-popup-child:not(.ag-tooltip-custom),
402
+ .ag-theme-salt-compact-dark .ag-popup-child:not(.ag-tooltip-custom) {
223
403
  box-shadow: var(--salt-overlayable-shadow-popout);
224
404
  }
225
- div[class*=ag-theme-salt] .ag-menu-header {
405
+ .ag-theme-salt-light .ag-menu-header,
406
+ .ag-theme-salt-dark .ag-menu-header,
407
+ .ag-theme-salt-compact-light .ag-menu-header,
408
+ .ag-theme-salt-compact-dark .ag-menu-header {
226
409
  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
227
410
  background-color: var(--salt-container-primary-background);
228
411
  }
229
- div[class*=ag-theme-salt] .ag-menu-body {
412
+ .ag-theme-salt-light .ag-menu-body,
413
+ .ag-theme-salt-dark .ag-menu-body,
414
+ .ag-theme-salt-compact-light .ag-menu-body,
415
+ .ag-theme-salt-compact-dark .ag-menu-body {
230
416
  padding: 0;
231
417
  }
232
- div[class*=ag-theme-salt] .ag-menu-separator {
418
+ .ag-theme-salt-light .ag-menu-separator,
419
+ .ag-theme-salt-dark .ag-menu-separator,
420
+ .ag-theme-salt-compact-light .ag-menu-separator,
421
+ .ag-theme-salt-compact-dark .ag-menu-separator {
233
422
  height: var(--salt-size-border);
234
423
  }
235
- div[class*=ag-theme-salt] .ag-menu-list {
424
+ .ag-theme-salt-light .ag-menu-list,
425
+ .ag-theme-salt-dark .ag-menu-list,
426
+ .ag-theme-salt-compact-light .ag-menu-list,
427
+ .ag-theme-salt-compact-dark .ag-menu-list {
236
428
  padding: 0;
237
429
  }
238
- div[class*=ag-theme-salt] .ag-menu-option {
430
+ .ag-theme-salt-light .ag-menu-option,
431
+ .ag-theme-salt-dark .ag-menu-option,
432
+ .ag-theme-salt-compact-light .ag-menu-option,
433
+ .ag-theme-salt-compact-dark .ag-menu-option {
239
434
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
240
435
  }
241
- div[class*=ag-theme-salt] .ag-menu-option-icon,
242
- div[class*=ag-theme-salt] .ag-compact-menu-option-icon {
436
+ .ag-theme-salt-light .ag-menu-option-icon,
437
+ .ag-theme-salt-light .ag-compact-menu-option-icon,
438
+ .ag-theme-salt-dark .ag-menu-option-icon,
439
+ .ag-theme-salt-dark .ag-compact-menu-option-icon,
440
+ .ag-theme-salt-compact-light .ag-menu-option-icon,
441
+ .ag-theme-salt-compact-light .ag-compact-menu-option-icon,
442
+ .ag-theme-salt-compact-dark .ag-menu-option-icon,
443
+ .ag-theme-salt-compact-dark .ag-compact-menu-option-icon {
243
444
  padding-inline-start: var(--salt-spacing-100);
244
445
  }
245
- div[class*=ag-theme-salt] .ag-tab {
446
+ .ag-theme-salt-light .ag-tab,
447
+ .ag-theme-salt-dark .ag-tab,
448
+ .ag-theme-salt-compact-light .ag-tab,
449
+ .ag-theme-salt-compact-dark .ag-tab {
246
450
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
247
451
  flex: 1 1 auto;
248
452
  }
249
- div[class*=ag-theme-salt] .ag-column-select-header {
453
+ .ag-theme-salt-light .ag-column-select-header,
454
+ .ag-theme-salt-dark .ag-column-select-header,
455
+ .ag-theme-salt-compact-light .ag-column-select-header,
456
+ .ag-theme-salt-compact-dark .ag-column-select-header {
250
457
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
251
458
  border: 0;
252
459
  }
253
460
 
254
461
  /* css/parts/ag-body.css */
255
- div[class*=ag-theme-salt] .ag-row {
462
+ .ag-theme-salt-light .ag-row,
463
+ .ag-theme-salt-dark .ag-row,
464
+ .ag-theme-salt-compact-light .ag-row,
465
+ .ag-theme-salt-compact-dark .ag-row {
256
466
  font-size: var(--salt-text-fontSize);
257
467
  }
258
- div[class*=ag-theme-salt] .ag-row-selected {
468
+ .ag-theme-salt-light .ag-row-selected,
469
+ .ag-theme-salt-dark .ag-row-selected,
470
+ .ag-theme-salt-compact-light .ag-row-selected,
471
+ .ag-theme-salt-compact-dark .ag-row-selected {
259
472
  background-color: var(--salt-selectable-background-selected);
260
473
  border-color: var(--salt-selectable-borderColor-selected);
261
474
  }
262
- div[class*=ag-theme-salt] .ag-row-selected:before {
475
+ .ag-theme-salt-light .ag-row-selected:before,
476
+ .ag-theme-salt-dark .ag-row-selected:before,
477
+ .ag-theme-salt-compact-light .ag-row-selected:before,
478
+ .ag-theme-salt-compact-dark .ag-row-selected:before {
263
479
  background-color: var(--salt-selectable-borderColor-selected);
264
480
  background-image: none;
265
481
  height: var(--salt-size-border);
266
482
  top: -1px;
267
483
  }
268
- div[class*=ag-theme-salt] .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
484
+ .ag-theme-salt-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
485
+ .ag-theme-salt-dark .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
486
+ .ag-theme-salt-compact-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
487
+ .ag-theme-salt-compact-dark .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
269
488
  border-right-color: var(--salt-separable-secondary-borderColor);
270
489
  }
271
- div[class*=ag-theme-salt] .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
490
+ .ag-theme-salt-light .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell),
491
+ .ag-theme-salt-dark .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell),
492
+ .ag-theme-salt-compact-light .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell),
493
+ .ag-theme-salt-compact-dark .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
272
494
  border-left-color: var(--salt-separable-secondary-borderColor);
273
495
  }
274
- div[class*=ag-theme-salt] .ag-cell {
496
+ .ag-theme-salt-light .ag-ltr .ag-cell,
497
+ .ag-theme-salt-dark .ag-ltr .ag-cell,
498
+ .ag-theme-salt-compact-light .ag-ltr .ag-cell,
499
+ .ag-theme-salt-compact-dark .ag-ltr .ag-cell {
275
500
  border: none;
276
501
  line-height: calc(var(--ag-line-height) - 1px);
277
502
  padding-left: var(--salt-spacing-100);
278
503
  padding-right: var(--salt-spacing-100);
279
504
  }
280
- div[class*=ag-theme-salt] .ag-cell-inline-editing:focus-within {
505
+ .ag-theme-salt-light .ag-cell-inline-editing:focus-within,
506
+ .ag-theme-salt-dark .ag-cell-inline-editing:focus-within,
507
+ .ag-theme-salt-compact-light .ag-cell-inline-editing:focus-within,
508
+ .ag-theme-salt-compact-dark .ag-cell-inline-editing:focus-within {
281
509
  background: var(--salt-container-primary-background);
282
510
  }
283
- div[class*=ag-theme-salt] .ag-cell-inline-editing {
511
+ .ag-theme-salt-light .ag-ltr .ag-cell-inline-editing,
512
+ .ag-theme-salt-dark .ag-ltr .ag-cell-inline-editing,
513
+ .ag-theme-salt-compact-light .ag-ltr .ag-cell-inline-editing,
514
+ .ag-theme-salt-compact-dark .ag-ltr .ag-cell-inline-editing {
284
515
  padding: 0;
285
516
  border-radius: 0;
286
517
  }
287
- div[class*=ag-theme-salt] .ag-cell-inline-editing.editable-cell input[class^=ag-] {
518
+ .ag-theme-salt-light .ag-cell-inline-editing.editable-cell input[class^=ag-],
519
+ .ag-theme-salt-dark .ag-cell-inline-editing.editable-cell input[class^=ag-],
520
+ .ag-theme-salt-compact-light .ag-cell-inline-editing.editable-cell input[class^=ag-],
521
+ .ag-theme-salt-compact-dark .ag-cell-inline-editing.editable-cell input[class^=ag-] {
288
522
  padding: 0 var(--salt-spacing-100);
289
523
  }
290
- div[class*=ag-theme-salt] .editable-cell,
291
- div[class*=ag-theme-salt] .editable-numeric-cell {
524
+ .ag-theme-salt-light .editable-cell,
525
+ .ag-theme-salt-light .editable-numeric-cell,
526
+ .ag-theme-salt-dark .editable-cell,
527
+ .ag-theme-salt-dark .editable-numeric-cell,
528
+ .ag-theme-salt-compact-light .editable-cell,
529
+ .ag-theme-salt-compact-light .editable-numeric-cell,
530
+ .ag-theme-salt-compact-dark .editable-cell,
531
+ .ag-theme-salt-compact-dark .editable-numeric-cell {
292
532
  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-editable-borderColor);
293
533
  outline-offset: -1px;
294
534
  }
295
- div[class*=ag-theme-salt] .ag-cell.numeric-cell,
296
- div[class*=ag-theme-salt] .editable-numeric-cell {
535
+ .ag-theme-salt-light .ag-cell.numeric-cell,
536
+ .ag-theme-salt-light .editable-numeric-cell,
537
+ .ag-theme-salt-dark .ag-cell.numeric-cell,
538
+ .ag-theme-salt-dark .editable-numeric-cell,
539
+ .ag-theme-salt-compact-light .ag-cell.numeric-cell,
540
+ .ag-theme-salt-compact-light .editable-numeric-cell,
541
+ .ag-theme-salt-compact-dark .ag-cell.numeric-cell,
542
+ .ag-theme-salt-compact-dark .editable-numeric-cell {
297
543
  text-align: right;
298
544
  }
299
- div[class*=ag-theme-salt] .ag-cell.numeric-cell.ag-cell-inline-editing .ag-cell-editor input:not(:focus) {
545
+ .ag-theme-salt-light .ag-cell.numeric-cell.ag-cell-inline-editing .ag-cell-editor input:not(:focus),
546
+ .ag-theme-salt-dark .ag-cell.numeric-cell.ag-cell-inline-editing .ag-cell-editor input:not(:focus),
547
+ .ag-theme-salt-compact-light .ag-cell.numeric-cell.ag-cell-inline-editing .ag-cell-editor input:not(:focus),
548
+ .ag-theme-salt-compact-dark .ag-cell.numeric-cell.ag-cell-inline-editing .ag-cell-editor input:not(:focus) {
300
549
  text-align: right;
301
550
  }
302
- div[class*=ag-theme-salt] .ag-has-focus .ag-cell.ag-cell-focus:not(.ag-cell-range-selected),
303
- div[class*=ag-theme-salt] .ag-context-menu-open .ag-cell.ag-cell-focus:not(.ag-cell-range-selected),
304
- div[class*=ag-theme-salt] .ag-cell-range-single-cell,
305
- div[class*=ag-theme-salt] .ag-cell-range-single-cell.ag-cell-range-handle,
306
- div[class*=ag-theme-salt] .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
551
+ .ag-theme-salt-light .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
552
+ .ag-theme-salt-dark .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
553
+ .ag-theme-salt-compact-light .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
554
+ .ag-theme-salt-compact-dark .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
555
+ .ag-theme-salt-light .ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
556
+ .ag-theme-salt-dark .ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
557
+ .ag-theme-salt-compact-light .ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
558
+ .ag-theme-salt-compact-dark .ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
559
+ .ag-theme-salt-light .ag-ltr .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
560
+ .ag-theme-salt-dark .ag-ltr .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
561
+ .ag-theme-salt-compact-light .ag-ltr .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
562
+ .ag-theme-salt-compact-dark .ag-ltr .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
563
+ .ag-theme-salt-light .ag-ltr .ag-cell-range-single-cell,
564
+ .ag-theme-salt-dark .ag-ltr .ag-cell-range-single-cell,
565
+ .ag-theme-salt-compact-light .ag-ltr .ag-cell-range-single-cell,
566
+ .ag-theme-salt-compact-dark .ag-ltr .ag-cell-range-single-cell,
567
+ .ag-theme-salt-light .ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle,
568
+ .ag-theme-salt-dark .ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle,
569
+ .ag-theme-salt-compact-light .ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle,
570
+ .ag-theme-salt-compact-dark .ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle {
307
571
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
308
572
  outline-offset: -2px;
309
- border-width: 0;
573
+ border-color: transparent;
310
574
  }
311
- div[class*=ag-theme-salt] .ag-cell-wrapper.ag-row-group {
575
+ .ag-theme-salt-light .ag-cell-wrapper.ag-row-group,
576
+ .ag-theme-salt-dark .ag-cell-wrapper.ag-row-group,
577
+ .ag-theme-salt-compact-light .ag-cell-wrapper.ag-row-group,
578
+ .ag-theme-salt-compact-dark .ag-cell-wrapper.ag-row-group {
312
579
  align-items: center;
313
580
  }
314
- div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus:before,
315
- div[class*=ag-theme-salt] .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
316
- div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
317
- div[class*=ag-theme-salt] .editable-cell.ag-cell-inline-editing:before {
581
+ .ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus:before,
582
+ .ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
583
+ .ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
584
+ .ag-theme-salt-light .editable-cell.ag-cell-inline-editing:before,
585
+ .ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus:before,
586
+ .ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
587
+ .ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
588
+ .ag-theme-salt-dark .editable-cell.ag-cell-inline-editing:before,
589
+ .ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus:before,
590
+ .ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
591
+ .ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
592
+ .ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing:before,
593
+ .ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus:before,
594
+ .ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
595
+ .ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
596
+ .ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing:before {
318
597
  border-bottom: calc(var(--salt-size-adornment) + 4px) solid transparent;
319
598
  border-left: calc(var(--salt-size-adornment) + 4px) solid var(--salt-editable-borderColor-hover);
320
599
  border-top: 0 solid transparent;
@@ -324,49 +603,103 @@ div[class*=ag-theme-salt] .editable-cell.ag-cell-inline-editing:before {
324
603
  top: 0px;
325
604
  z-index: 2;
326
605
  }
327
- div[class*=ag-theme-salt] .editable-numeric-cell input,
328
- div[class*=ag-theme-salt] input[class^=ag-][type=number] {
606
+ .ag-theme-salt-light .editable-numeric-cell input,
607
+ .ag-theme-salt-light input[class^=ag-][type=number],
608
+ .ag-theme-salt-dark .editable-numeric-cell input,
609
+ .ag-theme-salt-dark input[class^=ag-][type=number],
610
+ .ag-theme-salt-compact-light .editable-numeric-cell input,
611
+ .ag-theme-salt-compact-light input[class^=ag-][type=number],
612
+ .ag-theme-salt-compact-dark .editable-numeric-cell input,
613
+ .ag-theme-salt-compact-dark input[class^=ag-][type=number] {
329
614
  padding: 0 var(--salt-spacing-100);
330
615
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
331
616
  }
332
- div[class*=ag-theme-salt] .editable-cell input,
333
- div[class*=ag-theme-salt] .editable-numeric-cell input {
617
+ .ag-theme-salt-light .editable-cell input,
618
+ .ag-theme-salt-light .editable-numeric-cell input,
619
+ .ag-theme-salt-dark .editable-cell input,
620
+ .ag-theme-salt-dark .editable-numeric-cell input,
621
+ .ag-theme-salt-compact-light .editable-cell input,
622
+ .ag-theme-salt-compact-light .editable-numeric-cell input,
623
+ .ag-theme-salt-compact-dark .editable-cell input,
624
+ .ag-theme-salt-compact-dark .editable-numeric-cell input {
334
625
  border: none;
335
626
  background-color: transparent;
336
627
  }
337
- div[class*=ag-theme-salt] .ag-large-text-input {
628
+ .ag-theme-salt-light .ag-large-text-input,
629
+ .ag-theme-salt-dark .ag-large-text-input,
630
+ .ag-theme-salt-compact-light .ag-large-text-input,
631
+ .ag-theme-salt-compact-dark .ag-large-text-input {
338
632
  padding: 0;
339
633
  }
340
- div[class*=ag-theme-salt] .editable-cell .ag-picker-field-wrapper {
634
+ .ag-theme-salt-light .editable-cell .ag-picker-field-wrapper,
635
+ .ag-theme-salt-dark .editable-cell .ag-picker-field-wrapper,
636
+ .ag-theme-salt-compact-light .editable-cell .ag-picker-field-wrapper,
637
+ .ag-theme-salt-compact-dark .editable-cell .ag-picker-field-wrapper {
341
638
  background-color: transparent;
342
639
  border: none;
343
640
  }
344
- div[class*=ag-theme-salt] .ag-select .ag-picker-field-wrapper {
641
+ .ag-theme-salt-light .ag-select .ag-picker-field-wrapper,
642
+ .ag-theme-salt-dark .ag-select .ag-picker-field-wrapper,
643
+ .ag-theme-salt-compact-light .ag-select .ag-picker-field-wrapper,
644
+ .ag-theme-salt-compact-dark .ag-select .ag-picker-field-wrapper {
345
645
  border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
346
646
  border-radius: 0;
347
647
  }
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 {
648
+ .ag-theme-salt-light .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
649
+ .ag-theme-salt-light .ag-ltr .editable-cell .ag-rich-select .ag-picker-field-wrapper,
650
+ .ag-theme-salt-dark .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
651
+ .ag-theme-salt-dark .ag-ltr .editable-cell .ag-rich-select .ag-picker-field-wrapper,
652
+ .ag-theme-salt-compact-light .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
653
+ .ag-theme-salt-compact-light .ag-ltr .editable-cell .ag-rich-select .ag-picker-field-wrapper,
654
+ .ag-theme-salt-compact-dark .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
655
+ .ag-theme-salt-compact-dark .ag-ltr .editable-cell .ag-rich-select .ag-picker-field-wrapper {
350
656
  padding: 0 var(--salt-spacing-100);
351
657
  border-radius: 0;
352
658
  }
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 {
659
+ .ag-theme-salt-light .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before,
660
+ .ag-theme-salt-light .ag-ltr .editable-cell .ag-rich-select .ag-icon-small-down::before,
661
+ .ag-theme-salt-dark .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before,
662
+ .ag-theme-salt-dark .ag-ltr .editable-cell .ag-rich-select .ag-icon-small-down::before,
663
+ .ag-theme-salt-compact-light .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before,
664
+ .ag-theme-salt-compact-light .ag-ltr .editable-cell .ag-rich-select .ag-icon-small-down::before,
665
+ .ag-theme-salt-compact-dark .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before,
666
+ .ag-theme-salt-compact-dark .ag-ltr .editable-cell .ag-rich-select .ag-icon-small-down::before {
355
667
  content: var(--ag-icon-font-code-contracted);
356
668
  }
357
- div[class*=ag-theme-salt] .ag-ltr .ag-select-list-item,
358
- div[class*=ag-theme-salt] .ag-ltr .ag-rich-select-row {
669
+ .ag-theme-salt-light .ag-ltr .ag-select-list-item,
670
+ .ag-theme-salt-light .ag-ltr .ag-rich-select-row,
671
+ .ag-theme-salt-dark .ag-ltr .ag-select-list-item,
672
+ .ag-theme-salt-dark .ag-ltr .ag-rich-select-row,
673
+ .ag-theme-salt-compact-light .ag-ltr .ag-select-list-item,
674
+ .ag-theme-salt-compact-light .ag-ltr .ag-rich-select-row,
675
+ .ag-theme-salt-compact-dark .ag-ltr .ag-select-list-item,
676
+ .ag-theme-salt-compact-dark .ag-ltr .ag-rich-select-row {
359
677
  padding: 0 var(--salt-spacing-100);
360
678
  }
361
- div[class*=ag-theme-salt] .ag-select-list,
362
- div[class*=ag-theme-salt] .ag-rich-select-list {
679
+ .ag-theme-salt-light .ag-select-list,
680
+ .ag-theme-salt-light .ag-rich-select-list,
681
+ .ag-theme-salt-dark .ag-select-list,
682
+ .ag-theme-salt-dark .ag-rich-select-list,
683
+ .ag-theme-salt-compact-light .ag-select-list,
684
+ .ag-theme-salt-compact-light .ag-rich-select-list,
685
+ .ag-theme-salt-compact-dark .ag-select-list,
686
+ .ag-theme-salt-compact-dark .ag-rich-select-list {
363
687
  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
364
688
  }
365
- div[class*=ag-theme-salt] .ag-select-list-item[aria-selected=true],
366
- div[class*=ag-theme-salt] .ag-rich-select-row-selected {
689
+ .ag-theme-salt-light .ag-select-list-item[aria-selected=true],
690
+ .ag-theme-salt-light .ag-rich-select-row-selected,
691
+ .ag-theme-salt-dark .ag-select-list-item[aria-selected=true],
692
+ .ag-theme-salt-dark .ag-rich-select-row-selected,
693
+ .ag-theme-salt-compact-light .ag-select-list-item[aria-selected=true],
694
+ .ag-theme-salt-compact-light .ag-rich-select-row-selected,
695
+ .ag-theme-salt-compact-dark .ag-select-list-item[aria-selected=true],
696
+ .ag-theme-salt-compact-dark .ag-rich-select-row-selected {
367
697
  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
698
  }
369
- div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after {
699
+ .ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
700
+ .ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
701
+ .ag-theme-salt-compact-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
702
+ .ag-theme-salt-compact-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after {
370
703
  content: "";
371
704
  top: 0;
372
705
  right: 0;
@@ -375,7 +708,10 @@ div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-sin
375
708
  position: absolute;
376
709
  border-top: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
377
710
  }
378
- div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-right::after {
711
+ .ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-right::after,
712
+ .ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-right::after,
713
+ .ag-theme-salt-compact-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-right::after,
714
+ .ag-theme-salt-compact-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-right::after {
379
715
  content: "";
380
716
  top: 0;
381
717
  right: 0;
@@ -384,7 +720,10 @@ div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-sin
384
720
  position: absolute;
385
721
  border-right: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
386
722
  }
387
- div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-bottom::after {
723
+ .ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-bottom::after,
724
+ .ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-bottom::after,
725
+ .ag-theme-salt-compact-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-bottom::after,
726
+ .ag-theme-salt-compact-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-bottom::after {
388
727
  content: "";
389
728
  top: 0;
390
729
  right: 0;
@@ -393,7 +732,10 @@ div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-sin
393
732
  position: absolute;
394
733
  border-bottom: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
395
734
  }
396
- div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-left::after {
735
+ .ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-left::after,
736
+ .ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-left::after,
737
+ .ag-theme-salt-compact-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-left::after,
738
+ .ag-theme-salt-compact-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-left::after {
397
739
  content: "";
398
740
  top: 0;
399
741
  right: 0;
@@ -404,46 +746,100 @@ div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-sin
404
746
  }
405
747
 
406
748
  /* css/parts/ag-input.css */
407
- div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=text],
408
- div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=number],
409
- div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=text],
410
- div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number] {
749
+ .ag-theme-salt-light .ag-filter input[class^=ag-][type=text],
750
+ .ag-theme-salt-dark .ag-filter input[class^=ag-][type=text],
751
+ .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=text],
752
+ .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=text],
753
+ .ag-theme-salt-light .ag-filter input[class^=ag-][type=number],
754
+ .ag-theme-salt-dark .ag-filter input[class^=ag-][type=number],
755
+ .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=number],
756
+ .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=number],
757
+ .ag-theme-salt-light .ag-column-select input[class^=ag-][type=text],
758
+ .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=text],
759
+ .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=text],
760
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=text],
761
+ .ag-theme-salt-light .ag-column-select input[class^=ag-][type=number],
762
+ .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=number],
763
+ .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=number],
764
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number] {
411
765
  border: none;
412
766
  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
413
767
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
414
768
  padding: 0 var(--salt-spacing-100);
415
769
  }
416
- div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=text]::placeholder,
417
- div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=number]::placeholder,
418
- div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=text]::placeholder,
419
- div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]::placeholder {
770
+ .ag-theme-salt-light .ag-filter input[type=text]::placeholder,
771
+ .ag-theme-salt-dark .ag-filter input[type=text]::placeholder,
772
+ .ag-theme-salt-compact-light .ag-filter input[type=text]::placeholder,
773
+ .ag-theme-salt-compact-dark .ag-filter input[type=text]::placeholder,
774
+ .ag-theme-salt-light .ag-filter input[type=number]::placeholder,
775
+ .ag-theme-salt-dark .ag-filter input[type=number]::placeholder,
776
+ .ag-theme-salt-compact-light .ag-filter input[type=number]::placeholder,
777
+ .ag-theme-salt-compact-dark .ag-filter input[type=number]::placeholder,
778
+ .ag-theme-salt-light .ag-column-select input[type=text]::placeholder,
779
+ .ag-theme-salt-dark .ag-column-select input[type=text]::placeholder,
780
+ .ag-theme-salt-compact-light .ag-column-select input[type=text]::placeholder,
781
+ .ag-theme-salt-compact-dark .ag-column-select input[type=text]::placeholder,
782
+ .ag-theme-salt-light .ag-column-select input[type=number]::placeholder,
783
+ .ag-theme-salt-dark .ag-column-select input[type=number]::placeholder,
784
+ .ag-theme-salt-compact-light .ag-column-select input[type=number]::placeholder,
785
+ .ag-theme-salt-compact-dark .ag-column-select input[type=number]::placeholder {
420
786
  color: var(--salt-content-secondary-foreground);
421
787
  opacity: 1;
422
788
  }
423
- div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=text]:focus,
424
- div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=number]:focus,
425
- div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=text]:focus,
426
- div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]:focus {
789
+ .ag-theme-salt-light .ag-filter input[class^=ag-][type=text]:focus,
790
+ .ag-theme-salt-dark .ag-filter input[class^=ag-][type=text]:focus,
791
+ .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=text]:focus,
792
+ .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=text]:focus,
793
+ .ag-theme-salt-light .ag-filter input[class^=ag-][type=number]:focus,
794
+ .ag-theme-salt-dark .ag-filter input[class^=ag-][type=number]:focus,
795
+ .ag-theme-salt-compact-light .ag-filter input[class^=ag-][type=number]:focus,
796
+ .ag-theme-salt-compact-dark .ag-filter input[class^=ag-][type=number]:focus,
797
+ .ag-theme-salt-light .ag-column-select input[class^=ag-][type=text]:focus,
798
+ .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=text]:focus,
799
+ .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=text]:focus,
800
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=text]:focus,
801
+ .ag-theme-salt-light .ag-column-select input[class^=ag-][type=number]:focus,
802
+ .ag-theme-salt-dark .ag-column-select input[class^=ag-][type=number]:focus,
803
+ .ag-theme-salt-compact-light .ag-column-select input[class^=ag-][type=number]:focus,
804
+ .ag-theme-salt-compact-dark .ag-column-select input[class^=ag-][type=number]:focus {
427
805
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
428
806
  outline-offset: -2px;
429
807
  }
430
- div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-] {
808
+ .ag-theme-salt-light .ag-popup-editor .ag-large-text textarea[class^=ag-],
809
+ .ag-theme-salt-dark .ag-popup-editor .ag-large-text textarea[class^=ag-],
810
+ .ag-theme-salt-compact-light .ag-popup-editor .ag-large-text textarea[class^=ag-],
811
+ .ag-theme-salt-compact-dark .ag-popup-editor .ag-large-text textarea[class^=ag-] {
431
812
  border-radius: var(--salt-palette-corner-weak, 0);
432
813
  padding: var(--salt-spacing-100) var(--salt-spacing-100);
433
814
  }
434
- div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text,
435
- div[class*=ag-theme-salt] .ag-autocomplete-list-popup {
815
+ .ag-theme-salt-light .ag-popup-editor .ag-large-text,
816
+ .ag-theme-salt-dark .ag-popup-editor .ag-large-text,
817
+ .ag-theme-salt-compact-light .ag-popup-editor .ag-large-text,
818
+ .ag-theme-salt-compact-dark .ag-popup-editor .ag-large-text,
819
+ .ag-theme-salt-light .ag-autocomplete-list-popup,
820
+ .ag-theme-salt-dark .ag-autocomplete-list-popup,
821
+ .ag-theme-salt-compact-light .ag-autocomplete-list-popup,
822
+ .ag-theme-salt-compact-dark .ag-autocomplete-list-popup {
436
823
  border: none;
437
824
  }
438
- div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-] {
825
+ .ag-theme-salt-light .ag-popup-editor .ag-large-text textarea[class^=ag-],
826
+ .ag-theme-salt-dark .ag-popup-editor .ag-large-text textarea[class^=ag-],
827
+ .ag-theme-salt-compact-light .ag-popup-editor .ag-large-text textarea[class^=ag-],
828
+ .ag-theme-salt-compact-dark .ag-popup-editor .ag-large-text textarea[class^=ag-] {
439
829
  border-color: var(--salt-selectable-borderColor-selected);
440
830
  }
441
- div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus {
831
+ .ag-theme-salt-light .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus,
832
+ .ag-theme-salt-dark .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus,
833
+ .ag-theme-salt-compact-light .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus,
834
+ .ag-theme-salt-compact-dark .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus {
442
835
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
443
836
  }
444
837
 
445
838
  /* css/parts/ag-checkbox.css */
446
- div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
839
+ .ag-theme-salt-light .ag-checkbox-input-wrapper,
840
+ .ag-theme-salt-dark .ag-checkbox-input-wrapper,
841
+ .ag-theme-salt-compact-light .ag-checkbox-input-wrapper,
842
+ .ag-theme-salt-compact-dark .ag-checkbox-input-wrapper {
447
843
  height: var(--salt-size-selectable);
448
844
  width: var(--salt-size-selectable);
449
845
  font-size: var(--salt-size-selectable);
@@ -451,7 +847,10 @@ div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
451
847
  }
452
848
 
453
849
  /* css/parts/ag-buttons.css */
454
- div[class*=ag-theme-salt] .ag-standard-button {
850
+ .ag-theme-salt-light .ag-standard-button,
851
+ .ag-theme-salt-dark .ag-standard-button,
852
+ .ag-theme-salt-compact-light .ag-standard-button,
853
+ .ag-theme-salt-compact-dark .ag-standard-button {
455
854
  background: var(--salt-actionable-secondary-background);
456
855
  border: 0;
457
856
  color: var(--salt-actionable-secondary-foreground);
@@ -461,58 +860,103 @@ div[class*=ag-theme-salt] .ag-standard-button {
461
860
  padding: 0 var(--salt-spacing-100);
462
861
  text-transform: uppercase;
463
862
  }
464
- div[class*=ag-theme-salt] .ag-standard-button:hover {
863
+ .ag-theme-salt-light .ag-standard-button:hover,
864
+ .ag-theme-salt-dark .ag-standard-button:hover,
865
+ .ag-theme-salt-compact-light .ag-standard-button:hover,
866
+ .ag-theme-salt-compact-dark .ag-standard-button:hover {
465
867
  background-color: var(--salt-actionable-secondary-background-hover);
466
868
  color: var(--salt-actionable-secondary-foreground-hover);
467
869
  }
468
- div[class*=ag-theme-salt] .ag-ltr .ag-filter-apply-panel-button {
870
+ .ag-theme-salt-light .ag-ltr .ag-filter-apply-panel-button,
871
+ .ag-theme-salt-dark .ag-ltr .ag-filter-apply-panel-button,
872
+ .ag-theme-salt-compact-light .ag-ltr .ag-filter-apply-panel-button,
873
+ .ag-theme-salt-compact-dark .ag-ltr .ag-filter-apply-panel-button {
469
874
  margin-left: 8px;
470
875
  }
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] {
876
+ .ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
877
+ .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
878
+ .ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
879
+ .ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
880
+ .ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
881
+ .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
882
+ .ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
883
+ .ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
473
884
  background: var(--salt-actionable-cta-background);
474
885
  color: var(--salt-actionable-cta-foreground);
475
886
  }
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 {
887
+ .ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
888
+ .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
889
+ .ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
890
+ .ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
891
+ .ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
892
+ .ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
893
+ .ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
894
+ .ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
478
895
  background: var(--salt-actionable-cta-background-hover);
479
896
  color: var(--salt-actionable-cta-foreground-hover);
480
897
  }
481
- div[class*=ag-theme-salt] .ag-keyboard-focus .ag-header-cell:focus:after {
898
+ .ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus:after,
899
+ .ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus:after,
900
+ .ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus:after,
901
+ .ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus:after {
482
902
  border: 0;
483
903
  }
484
- div[class*=ag-theme-salt] button[class^=ag-]:focus,
485
- div[class*=ag-theme-salt] input[class^=ag-][type=button]:focus {
904
+ .ag-theme-salt-light button[class^=ag-]:focus,
905
+ .ag-theme-salt-dark button[class^=ag-]:focus,
906
+ .ag-theme-salt-compact-light button[class^=ag-]:focus,
907
+ .ag-theme-salt-compact-dark button[class^=ag-]:focus,
908
+ .ag-theme-salt-light input[class^=ag-][type=button]:focus,
909
+ .ag-theme-salt-dark input[class^=ag-][type=button]:focus,
910
+ .ag-theme-salt-compact-light input[class^=ag-][type=button]:focus,
911
+ .ag-theme-salt-compact-dark input[class^=ag-][type=button]:focus {
486
912
  box-shadow: none;
487
913
  outline-style: var(--salt-focused-outlineStyle);
488
914
  outline-width: var(--salt-focused-outlineWidth);
489
915
  outline-color: var(--salt-focused-outlineColor);
490
916
  outline-offset: var(--salt-focused-outlineOffset);
491
917
  }
492
- div[class*=ag-theme-salt] .ag-menu .ag-filter-body-wrapper {
918
+ .ag-theme-salt-light .ag-menu .ag-filter-body-wrapper,
919
+ .ag-theme-salt-dark .ag-menu .ag-filter-body-wrapper,
920
+ .ag-theme-salt-compact-light .ag-menu .ag-filter-body-wrapper,
921
+ .ag-theme-salt-compact-dark .ag-menu .ag-filter-body-wrapper {
493
922
  display: flex;
494
923
  flex-direction: column;
495
924
  gap: 0;
496
925
  padding: 0;
497
926
  margin-top: var(--salt-spacing-100);
498
927
  }
499
- div[class*=ag-theme-salt] .ag-menu .ag-menu-column-select-wrapper {
928
+ .ag-theme-salt-light .ag-menu .ag-menu-column-select-wrapper,
929
+ .ag-theme-salt-dark .ag-menu .ag-menu-column-select-wrapper,
930
+ .ag-theme-salt-compact-light .ag-menu .ag-menu-column-select-wrapper,
931
+ .ag-theme-salt-compact-dark .ag-menu .ag-menu-column-select-wrapper {
500
932
  margin-top: var(--salt-spacing-100);
501
933
  }
502
- div[class*=ag-theme-salt] .ag-simple-filter-body-wrapper > * {
934
+ .ag-theme-salt-light .ag-simple-filter-body-wrapper > *,
935
+ .ag-theme-salt-dark .ag-simple-filter-body-wrapper > *,
936
+ .ag-theme-salt-compact-light .ag-simple-filter-body-wrapper > *,
937
+ .ag-theme-salt-compact-dark .ag-simple-filter-body-wrapper > * {
503
938
  margin-bottom: var(--salt-spacing-100);
504
939
  }
505
- div[class*=ag-theme-salt] .ag-mini-filter {
940
+ .ag-theme-salt-light .ag-mini-filter,
941
+ .ag-theme-salt-dark .ag-mini-filter,
942
+ .ag-theme-salt-compact-light .ag-mini-filter,
943
+ .ag-theme-salt-compact-dark .ag-mini-filter {
506
944
  margin: 0;
507
945
  padding-left: var(--salt-spacing-50);
508
946
  padding-right: var(--salt-spacing-50);
509
947
  }
510
- div[class*=ag-theme-salt] .ag-set-filter-item {
948
+ .ag-theme-salt-light .ag-set-filter-item,
949
+ .ag-theme-salt-dark .ag-set-filter-item,
950
+ .ag-theme-salt-compact-light .ag-set-filter-item,
951
+ .ag-theme-salt-compact-dark .ag-set-filter-item {
511
952
  margin: 0;
512
953
  padding-left: var(--salt-spacing-100);
513
954
  padding-right: var(--salt-spacing-100);
514
955
  }
515
- div[class*=ag-theme-salt] .ag-status-bar {
956
+ .ag-theme-salt-light .ag-status-bar,
957
+ .ag-theme-salt-dark .ag-status-bar,
958
+ .ag-theme-salt-compact-light .ag-status-bar,
959
+ .ag-theme-salt-compact-dark .ag-status-bar {
516
960
  border: none;
517
961
  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
518
962
  color: var(--salt-content-secondary-foreground);
@@ -522,25 +966,43 @@ div[class*=ag-theme-salt] .ag-status-bar {
522
966
  height: var(--salt-size-base);
523
967
  padding: 0 var(--salt-spacing-100);
524
968
  }
525
- div[class*=ag-theme-salt] .ag-status-name-value {
969
+ .ag-theme-salt-light .ag-status-name-value,
970
+ .ag-theme-salt-dark .ag-status-name-value,
971
+ .ag-theme-salt-compact-light .ag-status-name-value,
972
+ .ag-theme-salt-compact-dark .ag-status-name-value {
526
973
  padding: 0;
527
974
  margin: 0 var(--salt-spacing-100);
528
975
  }
529
- div[class*=ag-theme-salt] .ag-status-name-value-value {
976
+ .ag-theme-salt-light .ag-status-name-value-value,
977
+ .ag-theme-salt-dark .ag-status-name-value-value,
978
+ .ag-theme-salt-compact-light .ag-status-name-value-value,
979
+ .ag-theme-salt-compact-dark .ag-status-name-value-value {
530
980
  font-weight: var(--salt-text-fontWeight-strong);
531
981
  color: var(--salt-content-primary-foreground);
532
982
  }
533
- div[class*=ag-theme-salt] .ag-paging-panel {
983
+ .ag-theme-salt-light .ag-paging-panel,
984
+ .ag-theme-salt-dark .ag-paging-panel,
985
+ .ag-theme-salt-compact-light .ag-paging-panel,
986
+ .ag-theme-salt-compact-dark .ag-paging-panel {
534
987
  border-color: var(--salt-separable-secondary-borderColor);
535
988
  }
536
- div[class*=ag-theme-salt] .ag-floating-bottom {
989
+ .ag-theme-salt-light .ag-floating-bottom,
990
+ .ag-theme-salt-dark .ag-floating-bottom,
991
+ .ag-theme-salt-compact-light .ag-floating-bottom,
992
+ .ag-theme-salt-compact-dark .ag-floating-bottom {
537
993
  border-color: var(--salt-container-primary-borderColor);
538
994
  }
539
- div[class*=ag-theme-salt] .ag-column-drop-horizontal {
995
+ .ag-theme-salt-light .ag-column-drop-horizontal,
996
+ .ag-theme-salt-dark .ag-column-drop-horizontal,
997
+ .ag-theme-salt-compact-light .ag-column-drop-horizontal,
998
+ .ag-theme-salt-compact-dark .ag-column-drop-horizontal {
540
999
  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
541
1000
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
542
1001
  }
543
- div[class*=ag-theme-salt] .ag-column-drop-cell {
1002
+ .ag-theme-salt-light .ag-column-drop-cell,
1003
+ .ag-theme-salt-dark .ag-column-drop-cell,
1004
+ .ag-theme-salt-compact-light .ag-column-drop-cell,
1005
+ .ag-theme-salt-compact-dark .ag-column-drop-cell {
544
1006
  border-radius: 0;
545
1007
  }
546
1008
  .ag-theme-salt-variant-secondary .ag-header {
@@ -558,19 +1020,34 @@ div[class*=ag-theme-salt] .ag-column-drop-cell {
558
1020
  }
559
1021
 
560
1022
  /* css/parts/ag-tool-panel.css */
561
- div[class*=ag-theme-salt] .ag-tool-panel-wrapper > .ag-react-container {
1023
+ .ag-theme-salt-light .ag-tool-panel-wrapper > .ag-react-container,
1024
+ .ag-theme-salt-dark .ag-tool-panel-wrapper > .ag-react-container,
1025
+ .ag-theme-salt-compact-light .ag-tool-panel-wrapper > .ag-react-container,
1026
+ .ag-theme-salt-compact-dark .ag-tool-panel-wrapper > .ag-react-container {
562
1027
  width: inherit;
563
1028
  }
564
- div[class*=ag-theme-salt] .ag-side-buttons {
1029
+ .ag-theme-salt-light .ag-side-buttons,
1030
+ .ag-theme-salt-dark .ag-side-buttons,
1031
+ .ag-theme-salt-compact-light .ag-side-buttons,
1032
+ .ag-theme-salt-compact-dark .ag-side-buttons {
565
1033
  min-width: calc(var(--salt-size-base) + var(--salt-spacing-100));
566
1034
  }
567
- div[class*=ag-theme-salt] button.ag-side-button-button {
1035
+ .ag-theme-salt-light button.ag-side-button-button,
1036
+ .ag-theme-salt-dark button.ag-side-button-button,
1037
+ .ag-theme-salt-compact-light button.ag-side-button-button,
1038
+ .ag-theme-salt-compact-dark button.ag-side-button-button {
568
1039
  padding: var(--salt-spacing-100) var(--salt-spacing-50);
569
1040
  }
570
- div[class*=ag-theme-salt] .ag-column-drop-vertical-empty-message {
1041
+ .ag-theme-salt-light .ag-column-drop-vertical-empty-message,
1042
+ .ag-theme-salt-dark .ag-column-drop-vertical-empty-message,
1043
+ .ag-theme-salt-compact-light .ag-column-drop-vertical-empty-message,
1044
+ .ag-theme-salt-compact-dark .ag-column-drop-vertical-empty-message {
571
1045
  padding: var(--salt-spacing-100);
572
1046
  }
573
- div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
1047
+ .ag-theme-salt-light .ag-side-button-icon-wrapper,
1048
+ .ag-theme-salt-dark .ag-side-button-icon-wrapper,
1049
+ .ag-theme-salt-compact-light .ag-side-button-icon-wrapper,
1050
+ .ag-theme-salt-compact-dark .ag-side-button-icon-wrapper {
574
1051
  margin-bottom: var(--salt-spacing-100);
575
1052
  }
576
1053