@salt-ds/ag-grid-theme 2.8.0 → 2.10.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.
- package/CHANGELOG.md +600 -0
- package/README.md +43 -0
- package/fonts/salt-icons.woff +0 -0
- package/package.json +3 -4
- package/salt-ag-theme.css +213 -63
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,600 @@
|
|
|
1
|
+
# @salt-ds/ag-grid-theme
|
|
2
|
+
|
|
3
|
+
## 2.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 487e75d: Upgraded support to AG-Grid v36.
|
|
8
|
+
|
|
9
|
+
Added Salt `SortAscend` and `SortDescend` glyphs for AG Grid Absolute Sorting (`aasc` / `adesc` icon names).
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [2e1da8e]
|
|
14
|
+
- Updated dependencies [be5eb93]
|
|
15
|
+
- Updated dependencies [0f92b84]
|
|
16
|
+
- Updated dependencies [be5eb93]
|
|
17
|
+
- @salt-ds/theme@1.46.0
|
|
18
|
+
|
|
19
|
+
## 2.9.0
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- a5d12be: Added header background modifier classes on the grid wrapper to align AG Grid headers with the Salt `Table` `<THead variant />` API.
|
|
24
|
+
|
|
25
|
+
- `ag-theme-salt-header-primary` (default), `ag-theme-salt-header-secondary`, `ag-theme-salt-header-tertiary` — swap the header background between Salt's primary, secondary and tertiary container tokens.
|
|
26
|
+
|
|
27
|
+
Add them alongside the mode class on the grid wrapper:
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
<div className="ag-theme-salt-light ag-theme-salt-header-secondary">
|
|
31
|
+
<AgGridReact rowData={rowData} columnDefs={columnDefs} />
|
|
32
|
+
</div>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- a5d12be: Fixed several AG Grid theme styling issues:
|
|
38
|
+
|
|
39
|
+
- Row Group Panel pill text and icon now use `--salt-actionable-bold-foreground` (with `-hover` and `-active` variants), and the chip background uses `--salt-actionable-bold-background`, matching the Salt `Pill` component. Previously the pill text inherited `--salt-content-primary-foreground` and the background used `--salt-actionable-primary-background`.
|
|
40
|
+
- Replaced remaining references to legacy actionable token aliases. The theme was still referencing `--salt-actionable-secondary-*` (renamed to `--salt-actionable-subtle-*`) and `--salt-actionable-cta-*` (renamed to `--salt-actionable-accented-bold-*`). Both old names exist only in the legacy theme's deprecated aliases file and are not defined in `themeNext`, so the theme would silently render with undefined values when used with `SaltProviderNext`. No visual change for users of the legacy theme—the aliases resolve to the same values.
|
|
41
|
+
- Scoped helper classes to the Salt theme wrapper. `.error-row`, `.warning-row`, `.success-row`, `.ag-column-drop-cell*` and `.ag-toggle-button-input-wrapper*` rules were previously declared as bare class selectors. They are now scoped to `[class*="ag-theme-salt"]` so they only match elements inside a Salt-themed grid and can no longer collide with consumer classes of the same name elsewhere on the page.
|
|
42
|
+
|
|
43
|
+
## 2.8.0
|
|
44
|
+
|
|
45
|
+
### Minor Changes
|
|
46
|
+
|
|
47
|
+
- feffe8d: - Added tertiary support to the ag grid theme.
|
|
48
|
+
- Added secondary zebra support to the ag grid theme.
|
|
49
|
+
- Added tertiary zebra support to the ag grid theme.
|
|
50
|
+
|
|
51
|
+
### Patch Changes
|
|
52
|
+
|
|
53
|
+
- Updated dependencies [23b5f53]
|
|
54
|
+
- Updated dependencies [40cdcb4]
|
|
55
|
+
- Updated dependencies [fdb9cfc]
|
|
56
|
+
- Updated dependencies [23b5f53]
|
|
57
|
+
- @salt-ds/theme@1.41.0
|
|
58
|
+
|
|
59
|
+
## 2.7.0
|
|
60
|
+
|
|
61
|
+
### Minor Changes
|
|
62
|
+
|
|
63
|
+
- 972e37e: Added mobile density tokens.
|
|
64
|
+
|
|
65
|
+
### Patch Changes
|
|
66
|
+
|
|
67
|
+
- Updated dependencies [972e37e]
|
|
68
|
+
- Updated dependencies [972e37e]
|
|
69
|
+
- @salt-ds/theme@1.39.0
|
|
70
|
+
|
|
71
|
+
## 2.6.1
|
|
72
|
+
|
|
73
|
+
### Patch Changes
|
|
74
|
+
|
|
75
|
+
- ce18830: Fixed the background color of inputs in the header of a zebra striped grid being incorrect.
|
|
76
|
+
- Updated dependencies [df46ef9]
|
|
77
|
+
- Updated dependencies [afe9104]
|
|
78
|
+
- @salt-ds/theme@1.38.0
|
|
79
|
+
|
|
80
|
+
## 2.6.0
|
|
81
|
+
|
|
82
|
+
### Minor Changes
|
|
83
|
+
|
|
84
|
+
- 58d81ac: - Added row validation status support via classes: `.error-row`, `.warning-row` and `.success-row`.
|
|
85
|
+
- Added cell validation status support via classes: `.error-cell`, `.warning-cell` and `.success-cell`, when used together with `.editable-cell`.
|
|
86
|
+
- Refactored secondary and zebra variant to better align with ag grid CSS variables. This fixes row selection border color for zebra variant.
|
|
87
|
+
|
|
88
|
+
### Patch Changes
|
|
89
|
+
|
|
90
|
+
- Updated dependencies [e9838b5]
|
|
91
|
+
- Updated dependencies [e9838b5]
|
|
92
|
+
- Updated dependencies [e9838b5]
|
|
93
|
+
- @salt-ds/theme@1.34.0
|
|
94
|
+
|
|
95
|
+
## 2.5.1
|
|
96
|
+
|
|
97
|
+
### Patch Changes
|
|
98
|
+
|
|
99
|
+
- 3db3703: Fixed menus showing up as secondary using secondary and zebra variants.
|
|
100
|
+
- Updated dependencies [9c74ceb]
|
|
101
|
+
- @salt-ds/theme@1.33.0
|
|
102
|
+
|
|
103
|
+
## 2.5.0
|
|
104
|
+
|
|
105
|
+
### Minor Changes
|
|
106
|
+
|
|
107
|
+
- d2055e1: Added date filter support.
|
|
108
|
+
|
|
109
|
+
```js
|
|
110
|
+
const dateColumnDef = {
|
|
111
|
+
// ...
|
|
112
|
+
filter: "agDateColumnFilter",
|
|
113
|
+
};
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Patch Changes
|
|
117
|
+
|
|
118
|
+
- Updated dependencies [9277313]
|
|
119
|
+
- Updated dependencies [512b0e7]
|
|
120
|
+
- Updated dependencies [64ef723]
|
|
121
|
+
- Updated dependencies [9277313]
|
|
122
|
+
- Updated dependencies [9277313]
|
|
123
|
+
- Updated dependencies [9277313]
|
|
124
|
+
- Updated dependencies [8538730]
|
|
125
|
+
- Updated dependencies [9277313]
|
|
126
|
+
- @salt-ds/theme@1.32.0
|
|
127
|
+
|
|
128
|
+
## 2.4.4
|
|
129
|
+
|
|
130
|
+
### Patch Changes
|
|
131
|
+
|
|
132
|
+
- Updated dependencies [665c306]
|
|
133
|
+
- Updated dependencies [9a4ff31]
|
|
134
|
+
- Updated dependencies [5edb00f]
|
|
135
|
+
- Updated dependencies [c86ee15]
|
|
136
|
+
- Updated dependencies [1a8898f]
|
|
137
|
+
- Updated dependencies [5edb00f]
|
|
138
|
+
- Updated dependencies [1a8898f]
|
|
139
|
+
- Updated dependencies [9a4ff31]
|
|
140
|
+
- Updated dependencies [1a8898f]
|
|
141
|
+
- Updated dependencies [91f0e09]
|
|
142
|
+
- Updated dependencies [efb4fbc]
|
|
143
|
+
- Updated dependencies [efb4fbc]
|
|
144
|
+
- @salt-ds/theme@1.31.0
|
|
145
|
+
|
|
146
|
+
## 2.4.3
|
|
147
|
+
|
|
148
|
+
### Patch Changes
|
|
149
|
+
|
|
150
|
+
- 621253b: Refactored components and themes to use the new fixed tokens.
|
|
151
|
+
- Updated dependencies [621253b]
|
|
152
|
+
- Updated dependencies [621253b]
|
|
153
|
+
- Updated dependencies [621253b]
|
|
154
|
+
- Updated dependencies [2d58071]
|
|
155
|
+
- Updated dependencies [7adcf27]
|
|
156
|
+
- @salt-ds/theme@1.30.0
|
|
157
|
+
|
|
158
|
+
## 2.4.2
|
|
159
|
+
|
|
160
|
+
### Patch Changes
|
|
161
|
+
|
|
162
|
+
- be1b086: - Fixed [zebra variant](https://www.saltdesignsystem.com/salt/components/ag-grid-theme/examples#variants) row selection border color.
|
|
163
|
+
- Fixed row selection border hover color, if `ag-grid.css` is loaded after `salt-ag-theme.css`.
|
|
164
|
+
- Updated code for [HD compact example](https://www.saltdesignsystem.com/salt/components/ag-grid-theme/examples#hd-compact), which caused some styling not correctly applied (#5056).
|
|
165
|
+
|
|
166
|
+
## 2.4.1
|
|
167
|
+
|
|
168
|
+
### Patch Changes
|
|
169
|
+
|
|
170
|
+
- Updated dependencies [4fc024c]
|
|
171
|
+
- @salt-ds/theme@1.29.0
|
|
172
|
+
|
|
173
|
+
## 2.4.0
|
|
174
|
+
|
|
175
|
+
### Minor Changes
|
|
176
|
+
|
|
177
|
+
- 949ffef: Improve overall CSS performance, specially around speed around context menu interaction.
|
|
178
|
+
|
|
179
|
+
- Replaced most `div[class*="ag-theme-salt"` wildcard attribute selector to spelled out class selector `"ag-theme-salt-light", "ag-theme-salt-dark", "ag-theme-salt-compact-light", "ag-theme-salt-compact-dark"`
|
|
180
|
+
- Improved selectors around cell focus ring and input placeholder within filter and column select menu.
|
|
181
|
+
|
|
182
|
+
## 2.3.5
|
|
183
|
+
|
|
184
|
+
### Patch Changes
|
|
185
|
+
|
|
186
|
+
- Updated dependencies [faa0334]
|
|
187
|
+
- Updated dependencies [aed941a]
|
|
188
|
+
- @salt-ds/theme@1.28.1
|
|
189
|
+
|
|
190
|
+
## 2.3.4
|
|
191
|
+
|
|
192
|
+
### Patch Changes
|
|
193
|
+
|
|
194
|
+
- Updated dependencies [ea8b4e3]
|
|
195
|
+
- @salt-ds/theme@1.28.0
|
|
196
|
+
|
|
197
|
+
## 2.3.3
|
|
198
|
+
|
|
199
|
+
### Patch Changes
|
|
200
|
+
|
|
201
|
+
- Updated dependencies [afd7ae1]
|
|
202
|
+
- Updated dependencies [d078641]
|
|
203
|
+
- Updated dependencies [aac1500]
|
|
204
|
+
- Updated dependencies [09f5144]
|
|
205
|
+
- Updated dependencies [803d0c0]
|
|
206
|
+
- Updated dependencies [09f5144]
|
|
207
|
+
- Updated dependencies [38da566]
|
|
208
|
+
- @salt-ds/theme@1.27.0
|
|
209
|
+
|
|
210
|
+
## 2.3.2
|
|
211
|
+
|
|
212
|
+
### Patch Changes
|
|
213
|
+
|
|
214
|
+
- Updated dependencies [90b85d4]
|
|
215
|
+
- Updated dependencies [8ca3b2f]
|
|
216
|
+
- Updated dependencies [8ca3b2f]
|
|
217
|
+
- Updated dependencies [3764d72]
|
|
218
|
+
- Updated dependencies [d22534b]
|
|
219
|
+
- Updated dependencies [90b85d4]
|
|
220
|
+
- Updated dependencies [8ca3b2f]
|
|
221
|
+
- @salt-ds/theme@1.26.0
|
|
222
|
+
|
|
223
|
+
## 2.3.1
|
|
224
|
+
|
|
225
|
+
### Patch Changes
|
|
226
|
+
|
|
227
|
+
- Updated dependencies [3e474a0]
|
|
228
|
+
- Updated dependencies [926316f]
|
|
229
|
+
- Updated dependencies [926316f]
|
|
230
|
+
- Updated dependencies [926316f]
|
|
231
|
+
- Updated dependencies [926316f]
|
|
232
|
+
- Updated dependencies [1203a3f]
|
|
233
|
+
- Updated dependencies [3e474a0]
|
|
234
|
+
- Updated dependencies [926316f]
|
|
235
|
+
- @salt-ds/theme@1.25.0
|
|
236
|
+
|
|
237
|
+
## 2.3.0
|
|
238
|
+
|
|
239
|
+
### Minor Changes
|
|
240
|
+
|
|
241
|
+
- 2719afb: - Added theme support for several built-in ag grid provided editors
|
|
242
|
+
|
|
243
|
+
- `agLargeTextCellEditor`
|
|
244
|
+
- `agSelectCellEditor`
|
|
245
|
+
- `agRichSelectCellEditor`
|
|
246
|
+
- `agNumberCellEditor`
|
|
247
|
+
- `agDateStringCellEditor`
|
|
248
|
+
- Fixed `input` padding within `.editable-cell` during editing
|
|
249
|
+
- Fixed long text overflow within `.editable-cell` when focused
|
|
250
|
+
|
|
251
|
+
Closes #4144
|
|
252
|
+
|
|
253
|
+
### Patch Changes
|
|
254
|
+
|
|
255
|
+
- 0a5b68b: Marked CSS files as having side effects. This fixes Webpack tree-shaking CSS files when `sideEffects: true` is not set on style-loader rules.
|
|
256
|
+
- Updated dependencies [a2fc9cf]
|
|
257
|
+
- Updated dependencies [0a5b68b]
|
|
258
|
+
- Updated dependencies [06ad53b]
|
|
259
|
+
- Updated dependencies [06ad53b]
|
|
260
|
+
- @salt-ds/theme@1.24.0
|
|
261
|
+
|
|
262
|
+
## 2.2.0
|
|
263
|
+
|
|
264
|
+
### Minor Changes
|
|
265
|
+
|
|
266
|
+
- b4a7888: Extended support to ag grid v32
|
|
267
|
+
|
|
268
|
+
- Added support for new active button in floating filter, with adjusted floating filter focus style. Updated `--ag-icon-font-code-filter` to use outline version of filter icon to accommodate active state using filled version.
|
|
269
|
+
- Fixed apply / reset panel buttons due to attribute change
|
|
270
|
+
- Added "ag-grid-community" as `peerDependencies` to enforce minimum v28 support
|
|
271
|
+
|
|
272
|
+
### Patch Changes
|
|
273
|
+
|
|
274
|
+
- Updated dependencies [131dd9a]
|
|
275
|
+
- Updated dependencies [f6848dd]
|
|
276
|
+
- Updated dependencies [5af2978]
|
|
277
|
+
- @salt-ds/theme@1.23.3
|
|
278
|
+
|
|
279
|
+
## 2.1.2
|
|
280
|
+
|
|
281
|
+
### Patch Changes
|
|
282
|
+
|
|
283
|
+
- c486b75: Refactor ag grid theme CSS into smaller files
|
|
284
|
+
- Updated dependencies [2f027e9]
|
|
285
|
+
- @salt-ds/theme@1.23.2
|
|
286
|
+
|
|
287
|
+
## 2.1.1
|
|
288
|
+
|
|
289
|
+
### Patch Changes
|
|
290
|
+
|
|
291
|
+
- 4f3bec9: Fixed `.editable-cell` incorrectly setting text-align. For numeric columns, use both `.edtiable-cell` and `.numeric-cell` for `cellClass`. Fixes #4141.
|
|
292
|
+
- Updated dependencies [4ccc245]
|
|
293
|
+
- @salt-ds/theme@1.23.0
|
|
294
|
+
|
|
295
|
+
## 2.1.0
|
|
296
|
+
|
|
297
|
+
### Minor Changes
|
|
298
|
+
|
|
299
|
+
- 285a257: Added support for [range selection](https://www.ag-grid.com/react-data-grid/global-style-customisation-selections/#range-selections) highlight color, mapped to `--salt-overlayable-background-highlight`. Closes #3922.
|
|
300
|
+
|
|
301
|
+
### Patch Changes
|
|
302
|
+
|
|
303
|
+
- Updated dependencies [1098fc1]
|
|
304
|
+
- Updated dependencies [2263a98]
|
|
305
|
+
- Updated dependencies [285a257]
|
|
306
|
+
- @salt-ds/theme@1.22.0
|
|
307
|
+
|
|
308
|
+
## 2.0.2
|
|
309
|
+
|
|
310
|
+
### Patch Changes
|
|
311
|
+
|
|
312
|
+
- ab0215d: Fixed header text and icon color when column menu is open
|
|
313
|
+
|
|
314
|
+
## 2.0.1
|
|
315
|
+
|
|
316
|
+
### Patch Changes
|
|
317
|
+
|
|
318
|
+
- d92fe9e: - Fixed background color for custom editor component.
|
|
319
|
+
|
|
320
|
+
- Fixed header text being cropped in HD compact. Closes #3675.
|
|
321
|
+
- Fixed Country Symbol taller than expected in HD compact. This alters `--salt-size-base` token so Salt Button, form controls (Input, Dropdown, Combo Box) will be impacted as well. Closes #3775.
|
|
322
|
+
- Fixed group value not center aligned vertically.
|
|
323
|
+
- Updated ag grid menu styling to match closer to Salt Menu component.
|
|
324
|
+
- Updated floating filter column chooser item styles. Closes #3671.
|
|
325
|
+
|
|
326
|
+
Note: We previously made a mistake on `rowHeight` recommendation when configurating AG Grid, which should be 1px more to account for border between row.
|
|
327
|
+
`useAgGridHelpers` example hook is updated to reflect this.
|
|
328
|
+
|
|
329
|
+
| Density | Row height ([`rowHeight`](https://www.ag-grid.com/javascript-data-grid/row-height/)) | Header height ([`headerHeight`](https://www.ag-grid.com/javascript-data-grid/column-headers/#header-height)) |
|
|
330
|
+
| ------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
|
|
331
|
+
| HD (Compact) | 21 | 20 |
|
|
332
|
+
| HD | 25 | 24 |
|
|
333
|
+
| MD | 37 | 36 |
|
|
334
|
+
| LD | 49 | 48 |
|
|
335
|
+
| TD | 61 | 60 |
|
|
336
|
+
|
|
337
|
+
## 2.0.0
|
|
338
|
+
|
|
339
|
+
### Major Changes
|
|
340
|
+
|
|
341
|
+
- 5ed8ed88: Ag grid theme is updated to support ag grid version v31, and it's now driven by [AG grid variables](https://ag-grid.com/react-data-grid/global-style-customisation/) with a big reduction in bundle size. Follow below for upgrade instructions:
|
|
342
|
+
|
|
343
|
+
1. Update stylesheet import
|
|
344
|
+
|
|
345
|
+
```diff
|
|
346
|
+
- import "ag-grid-community/dist/styles/ag-grid.css";
|
|
347
|
+
+ import "ag-grid-community/styles/ag-grid.css";
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
UITK theme is removed, migrate to Salt theme
|
|
351
|
+
|
|
352
|
+
```diff
|
|
353
|
+
- import "@salt-ds/ag-grid-theme/uitk-ag-theme.css";
|
|
354
|
+
+ import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
2. Update classnames used on the container around `AgGridReact`, which no longer has density portion. If you previously copied `useAgGridHelpers`, you'll need to copy a new version from [here](https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts).
|
|
358
|
+
|
|
359
|
+
In light mode:
|
|
360
|
+
|
|
361
|
+
```diff
|
|
362
|
+
- .ag-theme-salt-high-light
|
|
363
|
+
- .ag-theme-salt-medium-light
|
|
364
|
+
- .ag-theme-salt-low-light
|
|
365
|
+
- .ag-theme-salt-touch-light
|
|
366
|
+
+ .ag-theme-salt-light
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
```diff
|
|
370
|
+
- .ag-theme-salt-high-compact-light
|
|
371
|
+
+ .ag-theme-salt-compact-light
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
In dark mode:
|
|
375
|
+
|
|
376
|
+
```diff
|
|
377
|
+
- .ag-theme-salt-high-dark
|
|
378
|
+
- .ag-theme-salt-medium-dark
|
|
379
|
+
- .ag-theme-salt-low-dark
|
|
380
|
+
- .ag-theme-salt-touch-dark
|
|
381
|
+
+ .ag-theme-salt-dark
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
```diff
|
|
385
|
+
- .ag-theme-salt-high-compact-dark
|
|
386
|
+
+ .ag-theme-salt-compact-dark
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
Closes #2972
|
|
390
|
+
|
|
391
|
+
### Patch Changes
|
|
392
|
+
|
|
393
|
+
- Updated dependencies [25e38e48]
|
|
394
|
+
- Updated dependencies [eaab9d89]
|
|
395
|
+
- Updated dependencies [5ed8ed88]
|
|
396
|
+
- Updated dependencies [e1d4aab8]
|
|
397
|
+
- @salt-ds/theme@1.16.0
|
|
398
|
+
|
|
399
|
+
## 1.4.2
|
|
400
|
+
|
|
401
|
+
### Patch Changes
|
|
402
|
+
|
|
403
|
+
- 98d1a03f: Fixed icon not displayed correctly when salt theme class is not applied first on a container (fixes #3351)
|
|
404
|
+
- 318515c5: Fixed header background incorrectly referencing palette color (`--salt-container-primary-background`) instead of characterstics (`--salt-container-primary-background`)
|
|
405
|
+
|
|
406
|
+
## 1.4.1
|
|
407
|
+
|
|
408
|
+
### Patch Changes
|
|
409
|
+
|
|
410
|
+
- 0ca29531: Fixed single cell focus ring not visible in range selection mode (Fixed #3290)
|
|
411
|
+
|
|
412
|
+
## 1.4.0
|
|
413
|
+
|
|
414
|
+
### Minor Changes
|
|
415
|
+
|
|
416
|
+
- e53138c2: Updated column header active state to actionable secondary style, to better associate relevant column header with the open menu.
|
|
417
|
+
Aligned menu to selected selectable border color and popout overlayable shadow.
|
|
418
|
+
Fixed filter icon not aligned to secondary content color in the last update.
|
|
419
|
+
Fixed sort indicator position to be next to the menu icon, and its spacing between filter and menu icon.
|
|
420
|
+
|
|
421
|
+
## 1.3.9
|
|
422
|
+
|
|
423
|
+
### Patch Changes
|
|
424
|
+
|
|
425
|
+
- 7bbbab98: Fixed header text color not using correct color token: `--salt-content-secondary-foreground`
|
|
426
|
+
- 09080b27: Fixed columns not displaying correctly with `wrapText` and `autoHeight` turned on.
|
|
427
|
+
|
|
428
|
+
## 1.3.8
|
|
429
|
+
|
|
430
|
+
### Patch Changes
|
|
431
|
+
|
|
432
|
+
- f167c14e: Fixed missing padding and focus ring on focused editable cell.
|
|
433
|
+
Fixed wrong background and missing corner flag when editable cell loses focus.
|
|
434
|
+
|
|
435
|
+
## 1.3.7
|
|
436
|
+
|
|
437
|
+
### Patch Changes
|
|
438
|
+
|
|
439
|
+
- 13279948: Update header icon alignment. Adding space between the text and the icon, so the icon will be aligned opposite the text.
|
|
440
|
+
|
|
441
|
+
## 1.3.6
|
|
442
|
+
|
|
443
|
+
### Patch Changes
|
|
444
|
+
|
|
445
|
+
- cdf44770: Fixed border misalignment in range selection on a single column or a single row.
|
|
446
|
+
|
|
447
|
+
## 1.3.5
|
|
448
|
+
|
|
449
|
+
### Patch Changes
|
|
450
|
+
|
|
451
|
+
- 86508404: Cell text from a pinned column no longer overlaps the cell next to it.
|
|
452
|
+
- b083861b: Removed a style override for column headers so that header alignment is consistent with column alignment.
|
|
453
|
+
|
|
454
|
+
## 1.3.4
|
|
455
|
+
|
|
456
|
+
### Patch Changes
|
|
457
|
+
|
|
458
|
+
- d200218f: Removed custom CSS styling for wrapping text in header cells when `autoHeaderHeight` is enabled. If you want to wrap text you should use `wrapHeaderText`.
|
|
459
|
+
- 6da4d09c: Fixed Tooltip missing a background color.
|
|
460
|
+
|
|
461
|
+
## 1.3.3
|
|
462
|
+
|
|
463
|
+
### Patch Changes
|
|
464
|
+
|
|
465
|
+
- dbea358f: Replaced cell borders with outlines
|
|
466
|
+
|
|
467
|
+
## 1.3.2
|
|
468
|
+
|
|
469
|
+
### Patch Changes
|
|
470
|
+
|
|
471
|
+
- d5fba9c0: Fixes alignment of input text in floating filter
|
|
472
|
+
- d0d7db8d: Fixes
|
|
473
|
+
|
|
474
|
+
- Status bar value font weight and color
|
|
475
|
+
- Status bar font size
|
|
476
|
+
- Cell range selection improvements
|
|
477
|
+
- Alignment of custom filters in floating filter
|
|
478
|
+
- Scrollbar showing in header cells on wrap
|
|
479
|
+
- Indentation on row groups
|
|
480
|
+
|
|
481
|
+
## 1.3.1
|
|
482
|
+
|
|
483
|
+
### Patch Changes
|
|
484
|
+
|
|
485
|
+
- 7e3a6053: Fixed bugs:
|
|
486
|
+
|
|
487
|
+
- Filter icon incorrect color in HD compact theme
|
|
488
|
+
- Vertical alignment of cells
|
|
489
|
+
- Column group cell
|
|
490
|
+
- Alignment of header cell separators with column group cell separators
|
|
491
|
+
- Status bar style enhancements
|
|
492
|
+
- Clipping of sort arrow in header row
|
|
493
|
+
- New floating filter design
|
|
494
|
+
- Pinned right columns styling
|
|
495
|
+
|
|
496
|
+
- 0d0bdeb4: Fixed invalid CSS being generated for heights
|
|
497
|
+
- 0d0bdeb4: Removed extra CSS from the theme.
|
|
498
|
+
- 402e13f7: Browser compatibility CSS changes.
|
|
499
|
+
|
|
500
|
+
Added missing prefix to `appearance` and revert `padding-inline`, `padding-block` and `margin-block` to improve browser compatibility with Chrome 79
|
|
501
|
+
|
|
502
|
+
## 1.3.0
|
|
503
|
+
|
|
504
|
+
### Minor Changes
|
|
505
|
+
|
|
506
|
+
- 6cc395d0: Use Salt icons in Salt ag-grid theme
|
|
507
|
+
- ce2b6d4c: Add color-scheme to Salt AG grid theme to ensure native light and dark mode
|
|
508
|
+
|
|
509
|
+
### Patch Changes
|
|
510
|
+
|
|
511
|
+
- c2348ac2: Reduced spacing in context menu styles
|
|
512
|
+
- a453cec8: Fixed status bar and floating filter styles
|
|
513
|
+
|
|
514
|
+
Added HD compact density styling
|
|
515
|
+
|
|
516
|
+
- dcd83052: Fixed column separator height and floating filter height
|
|
517
|
+
|
|
518
|
+
## 1.2.0
|
|
519
|
+
|
|
520
|
+
### Minor Changes
|
|
521
|
+
|
|
522
|
+
- 1013b554: Fix button styles in ag grid theme currently showing default HTML buttons by adding salt styles to `.ag-standard-button`.
|
|
523
|
+
|
|
524
|
+
## 1.1.6
|
|
525
|
+
|
|
526
|
+
### Patch Changes
|
|
527
|
+
|
|
528
|
+
- 4bd87710: Fix cell text not truncating in salt ag-grid-theme
|
|
529
|
+
|
|
530
|
+
## 1.1.5
|
|
531
|
+
|
|
532
|
+
### Patch Changes
|
|
533
|
+
|
|
534
|
+
- 123daf60: Fix inconsistent uitk ag-grid theme menu padding across densities
|
|
535
|
+
|
|
536
|
+
## 1.1.4
|
|
537
|
+
|
|
538
|
+
### Patch Changes
|
|
539
|
+
|
|
540
|
+
- f0f5f8e3: Update the icon font
|
|
541
|
+
- 1e9ef1a2: Fix duplicate Salt libraries being installed when multiple libraries are installed
|
|
542
|
+
|
|
543
|
+
## 1.1.3
|
|
544
|
+
|
|
545
|
+
### Patch Changes
|
|
546
|
+
|
|
547
|
+
- fb92ab4b: Update the icon mappings
|
|
548
|
+
- 09cc1177: Fix broken reference to font
|
|
549
|
+
|
|
550
|
+
## 1.1.2
|
|
551
|
+
|
|
552
|
+
### Patch Changes
|
|
553
|
+
|
|
554
|
+
- 0c478a6b: Fix fonts not being published in the ag-grid-theme
|
|
555
|
+
|
|
556
|
+
## 1.1.1
|
|
557
|
+
|
|
558
|
+
### Patch Changes
|
|
559
|
+
|
|
560
|
+
- 50370dec: Fixed some icons that were overridden incorrectly
|
|
561
|
+
- 982da8e2: Fix ag-grid uitk theme floating filter input height in High density
|
|
562
|
+
|
|
563
|
+
## 1.1.0
|
|
564
|
+
|
|
565
|
+
### Minor Changes
|
|
566
|
+
|
|
567
|
+
- f13b23b7: Add two new cell class names in salt ag-grid theme. These can be used instead of `.editable-numeric-cell`
|
|
568
|
+
|
|
569
|
+
- `.numeric-cell` used on static cells that contain numeric values
|
|
570
|
+
- `.editable-cell` used on editable cells
|
|
571
|
+
|
|
572
|
+
### Patch Changes
|
|
573
|
+
|
|
574
|
+
- 1acc0b03: Fix header focus outline in salt and uitk ag-grid themes
|
|
575
|
+
- 4cca8720: Fixed selected row's border color on row hover in salt ag-grid theme.
|
|
576
|
+
|
|
577
|
+
## 1.0.0
|
|
578
|
+
|
|
579
|
+
### Major Changes
|
|
580
|
+
|
|
581
|
+
- c1bc7479: Salt is the J.P. Morgan design system, an open-source solution for building exceptional products and digital experiences in financial services and other industries. It offers you well-documented, accessible components as well as comprehensive design templates, style libraries and assets.
|
|
582
|
+
|
|
583
|
+
With this initial release we're providing:
|
|
584
|
+
|
|
585
|
+
- AG Grid Theme
|
|
586
|
+
- Border Layout
|
|
587
|
+
- Button
|
|
588
|
+
- Data Grid
|
|
589
|
+
- Flex Layout
|
|
590
|
+
- Flow Layout
|
|
591
|
+
- Grid Layout
|
|
592
|
+
- Icon
|
|
593
|
+
- Link
|
|
594
|
+
- Salt Provider
|
|
595
|
+
- Stack Layout
|
|
596
|
+
- Status Indicator
|
|
597
|
+
- Text
|
|
598
|
+
- Theme
|
|
599
|
+
|
|
600
|
+
And a number of other lab components.
|
package/README.md
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# `@salt-ds/ag-grid-theme`
|
|
2
|
+
|
|
3
|
+
The Salt theme for [AG Grid](https://www.ag-grid.com/). Applies the Salt visual
|
|
4
|
+
language (typography, spacing, color, density) to AG Grid via CSS custom
|
|
5
|
+
properties and a small layer of selector overrides.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @salt-ds/ag-grid-theme
|
|
11
|
+
# or
|
|
12
|
+
yarn add @salt-ds/ag-grid-theme
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Peer dependencies (install separately):
|
|
16
|
+
|
|
17
|
+
- [`ag-grid-community`](https://www.npmjs.com/package/ag-grid-community) `>=28`
|
|
18
|
+
- [`@salt-ds/theme`](https://www.npmjs.com/package/@salt-ds/theme)
|
|
19
|
+
|
|
20
|
+
> For users on AG Grid v33+, opt back into the legacy theming system with
|
|
21
|
+
> `provideGlobalGridOptions({ theme: "legacy" })`. A future major version of
|
|
22
|
+
> this package will adopt AG Grid's new Theming API.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import "ag-grid-community/styles/ag-grid.css";
|
|
28
|
+
import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Apply the appropriate class name on the grid wrapper:
|
|
32
|
+
|
|
33
|
+
- `ag-theme-salt-light` / `ag-theme-salt-dark`
|
|
34
|
+
- `ag-theme-salt-compact-light` / `ag-theme-salt-compact-dark`
|
|
35
|
+
|
|
36
|
+
Optional modifiers can be added alongside the mode class:
|
|
37
|
+
|
|
38
|
+
- `ag-theme-salt-variant-secondary`, `ag-theme-salt-variant-tertiary`,
|
|
39
|
+
`ag-theme-salt-variant-zebra` — body background variants
|
|
40
|
+
- `ag-theme-salt-header-{primary,secondary,tertiary}` — header background
|
|
41
|
+
|
|
42
|
+
See the full
|
|
43
|
+
[documentation and examples](https://www.saltdesignsystem.com/salt/components/ag-grid-theme).
|
package/fonts/salt-icons.woff
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/ag-grid-theme",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,14 +21,13 @@
|
|
|
21
21
|
"build-watch": "yarn node ./scripts/build.mjs --watch"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
|
-
"directory": "../../dist/salt-ds-ag-grid-theme",
|
|
25
24
|
"provenance": true
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
27
|
"del": "^8.0.0"
|
|
29
28
|
},
|
|
30
29
|
"peerDependencies": {
|
|
31
|
-
"@salt-ds/theme": "^1.
|
|
30
|
+
"@salt-ds/theme": "^1.46.0",
|
|
32
31
|
"ag-grid-community": ">=28.0.0"
|
|
33
32
|
}
|
|
34
|
-
}
|
|
33
|
+
}
|
package/salt-ag-theme.css
CHANGED
|
@@ -12,10 +12,16 @@
|
|
|
12
12
|
background-color: var(--ag-selected-row-background-color);
|
|
13
13
|
border-color: var(--ag-selected-row-border-color);
|
|
14
14
|
}
|
|
15
|
-
.ag-theme-salt-light .ag-row-selected
|
|
16
|
-
.ag-theme-salt-dark .ag-row-selected
|
|
17
|
-
.ag-theme-salt-compact-light .ag-row-selected
|
|
18
|
-
.ag-theme-salt-compact-dark .ag-row-selected
|
|
15
|
+
.ag-theme-salt-light .ag-row.ag-row-selected,
|
|
16
|
+
.ag-theme-salt-dark .ag-row.ag-row-selected,
|
|
17
|
+
.ag-theme-salt-compact-light .ag-row.ag-row-selected,
|
|
18
|
+
.ag-theme-salt-compact-dark .ag-row.ag-row-selected {
|
|
19
|
+
--ag-row-border-color: var(--ag-selected-row-border-color);
|
|
20
|
+
}
|
|
21
|
+
.ag-theme-salt-light .ag-row-selected::before,
|
|
22
|
+
.ag-theme-salt-dark .ag-row-selected::before,
|
|
23
|
+
.ag-theme-salt-compact-light .ag-row-selected::before,
|
|
24
|
+
.ag-theme-salt-compact-dark .ag-row-selected::before,
|
|
19
25
|
.ag-theme-salt-light .ag-row-hover.ag-row-selected::before,
|
|
20
26
|
.ag-theme-salt-dark .ag-row-hover.ag-row-selected::before,
|
|
21
27
|
.ag-theme-salt-compact-light .ag-row-hover.ag-row-selected::before,
|
|
@@ -25,6 +31,25 @@
|
|
|
25
31
|
height: var(--salt-size-fixed-100);
|
|
26
32
|
top: -1px;
|
|
27
33
|
}
|
|
34
|
+
[class*=ag-theme-salt] .ag-grid-scrolling-container .ag-row-selected.ag-full-width-row::before {
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
z-index: 3;
|
|
37
|
+
}
|
|
38
|
+
[class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-left-cells,
|
|
39
|
+
[class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-scrolling-cells,
|
|
40
|
+
[class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-right-cells {
|
|
41
|
+
box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--ag-selected-row-border-color);
|
|
42
|
+
}
|
|
43
|
+
[class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-scrolling-cells {
|
|
44
|
+
z-index: 1;
|
|
45
|
+
}
|
|
46
|
+
[class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-left-cells,
|
|
47
|
+
[class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-right-cells {
|
|
48
|
+
z-index: 3;
|
|
49
|
+
}
|
|
50
|
+
[class*=ag-theme-salt] .ag-grid-scrolling-container .ag-row.ag-row-selected:not(.ag-full-width-row) {
|
|
51
|
+
background-color: var(--ag-data-background-color);
|
|
52
|
+
}
|
|
28
53
|
.ag-theme-salt-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
|
|
29
54
|
.ag-theme-salt-dark .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
|
|
30
55
|
.ag-theme-salt-compact-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
|
|
@@ -263,29 +288,29 @@
|
|
|
263
288
|
outline-offset: -2px;
|
|
264
289
|
border-color: transparent;
|
|
265
290
|
}
|
|
266
|
-
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus
|
|
267
|
-
.ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
268
|
-
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
269
|
-
.ag-theme-salt-light .editable-cell.ag-cell-inline-editing
|
|
270
|
-
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus
|
|
271
|
-
.ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
272
|
-
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
273
|
-
.ag-theme-salt-dark .editable-cell.ag-cell-inline-editing
|
|
274
|
-
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus
|
|
275
|
-
.ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
276
|
-
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
277
|
-
.ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing
|
|
278
|
-
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus
|
|
279
|
-
.ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
280
|
-
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
281
|
-
.ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing
|
|
291
|
+
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
292
|
+
.ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
293
|
+
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
294
|
+
.ag-theme-salt-light .editable-cell.ag-cell-inline-editing::before,
|
|
295
|
+
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
296
|
+
.ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
297
|
+
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
298
|
+
.ag-theme-salt-dark .editable-cell.ag-cell-inline-editing::before,
|
|
299
|
+
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
300
|
+
.ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
301
|
+
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
302
|
+
.ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing::before,
|
|
303
|
+
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
304
|
+
.ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
305
|
+
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
306
|
+
.ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing::before {
|
|
282
307
|
border-bottom: calc(var(--salt-size-adornment) + 4px) solid transparent;
|
|
283
308
|
border-left: calc(var(--salt-size-adornment) + 4px) solid var(--salt-editable-borderColor-hover);
|
|
284
309
|
border-top: 0 solid transparent;
|
|
285
310
|
content: "";
|
|
286
|
-
left:
|
|
311
|
+
left: 0;
|
|
287
312
|
position: absolute;
|
|
288
|
-
top:
|
|
313
|
+
top: 0;
|
|
289
314
|
z-index: 2;
|
|
290
315
|
}
|
|
291
316
|
.ag-theme-salt-light .editable-numeric-cell input,
|
|
@@ -379,7 +404,7 @@
|
|
|
379
404
|
.ag-theme-salt-compact-light .ag-rich-select-row-selected,
|
|
380
405
|
.ag-theme-salt-compact-dark .ag-select-list-item[aria-selected=true],
|
|
381
406
|
.ag-theme-salt-compact-dark .ag-rich-select-row-selected {
|
|
382
|
-
box-shadow: inset
|
|
407
|
+
box-shadow: inset 0 var(--salt-size-fixed-100) 0 var(--salt-selectable-borderColor-selected), inset 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
|
|
383
408
|
}
|
|
384
409
|
.ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
|
|
385
410
|
.ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
|
|
@@ -435,9 +460,9 @@
|
|
|
435
460
|
.ag-theme-salt-dark .ag-standard-button,
|
|
436
461
|
.ag-theme-salt-compact-light .ag-standard-button,
|
|
437
462
|
.ag-theme-salt-compact-dark .ag-standard-button {
|
|
438
|
-
background: var(--salt-actionable-
|
|
463
|
+
background: var(--salt-actionable-subtle-background);
|
|
439
464
|
border: 0;
|
|
440
|
-
color: var(--salt-actionable-
|
|
465
|
+
color: var(--salt-actionable-subtle-foreground);
|
|
441
466
|
font-size: var(--salt-text-fontSize);
|
|
442
467
|
font-weight: 600;
|
|
443
468
|
height: var(--salt-size-base);
|
|
@@ -448,14 +473,14 @@
|
|
|
448
473
|
.ag-theme-salt-dark .ag-standard-button:hover,
|
|
449
474
|
.ag-theme-salt-compact-light .ag-standard-button:hover,
|
|
450
475
|
.ag-theme-salt-compact-dark .ag-standard-button:hover {
|
|
451
|
-
background-color: var(--salt-actionable-
|
|
452
|
-
color: var(--salt-actionable-
|
|
476
|
+
background-color: var(--salt-actionable-subtle-background-hover);
|
|
477
|
+
color: var(--salt-actionable-subtle-foreground-hover);
|
|
453
478
|
}
|
|
454
479
|
.ag-theme-salt-light .ag-ltr .ag-filter-apply-panel-button,
|
|
455
480
|
.ag-theme-salt-dark .ag-ltr .ag-filter-apply-panel-button,
|
|
456
481
|
.ag-theme-salt-compact-light .ag-ltr .ag-filter-apply-panel-button,
|
|
457
482
|
.ag-theme-salt-compact-dark .ag-ltr .ag-filter-apply-panel-button {
|
|
458
|
-
margin-left:
|
|
483
|
+
margin-left: var(--salt-spacing-100);
|
|
459
484
|
}
|
|
460
485
|
.ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
|
|
461
486
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
|
|
@@ -465,8 +490,8 @@
|
|
|
465
490
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
|
|
466
491
|
.ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
|
|
467
492
|
.ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
|
|
468
|
-
background: var(--salt-actionable-
|
|
469
|
-
color: var(--salt-actionable-
|
|
493
|
+
background: var(--salt-actionable-accented-bold-background);
|
|
494
|
+
color: var(--salt-actionable-accented-bold-foreground);
|
|
470
495
|
}
|
|
471
496
|
.ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
|
|
472
497
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
|
|
@@ -476,13 +501,13 @@
|
|
|
476
501
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
|
|
477
502
|
.ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
|
|
478
503
|
.ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
|
|
479
|
-
background: var(--salt-actionable-
|
|
480
|
-
color: var(--salt-actionable-
|
|
504
|
+
background: var(--salt-actionable-accented-bold-background-hover);
|
|
505
|
+
color: var(--salt-actionable-accented-bold-foreground-hover);
|
|
481
506
|
}
|
|
482
|
-
.ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus
|
|
483
|
-
.ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus
|
|
484
|
-
.ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus
|
|
485
|
-
.ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus
|
|
507
|
+
.ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus::after,
|
|
508
|
+
.ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus::after,
|
|
509
|
+
.ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus::after,
|
|
510
|
+
.ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus::after {
|
|
486
511
|
border: 0;
|
|
487
512
|
}
|
|
488
513
|
.ag-theme-salt-light button[class^=ag-]:focus,
|
|
@@ -542,7 +567,7 @@
|
|
|
542
567
|
.ag-theme-salt-compact-light .ag-status-bar,
|
|
543
568
|
.ag-theme-salt-compact-dark .ag-status-bar {
|
|
544
569
|
border: none;
|
|
545
|
-
border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-
|
|
570
|
+
border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
|
|
546
571
|
color: var(--salt-content-secondary-foreground);
|
|
547
572
|
font-size: var(--salt-text-fontSize);
|
|
548
573
|
font-weight: var(--salt-text-label-fontWeight);
|
|
@@ -570,17 +595,54 @@
|
|
|
570
595
|
.ag-theme-salt-compact-dark .ag-paging-panel {
|
|
571
596
|
border-color: var(--salt-separable-secondary-borderColor);
|
|
572
597
|
}
|
|
573
|
-
.ag-theme-salt-light .ag-floating-
|
|
574
|
-
.ag-theme-salt-dark .ag-floating-
|
|
575
|
-
.ag-theme-salt-compact-light .ag-floating-
|
|
576
|
-
.ag-theme-salt-compact-dark .ag-floating-
|
|
577
|
-
border-
|
|
598
|
+
.ag-theme-salt-light .ag-floating-top:not(.ag-invisible),
|
|
599
|
+
.ag-theme-salt-dark .ag-floating-top:not(.ag-invisible),
|
|
600
|
+
.ag-theme-salt-compact-light .ag-floating-top:not(.ag-invisible),
|
|
601
|
+
.ag-theme-salt-compact-dark .ag-floating-top:not(.ag-invisible) {
|
|
602
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
|
|
603
|
+
}
|
|
604
|
+
.ag-theme-salt-light .ag-floating-bottom:not(.ag-invisible),
|
|
605
|
+
.ag-theme-salt-dark .ag-floating-bottom:not(.ag-invisible),
|
|
606
|
+
.ag-theme-salt-compact-light .ag-floating-bottom:not(.ag-invisible),
|
|
607
|
+
.ag-theme-salt-compact-dark .ag-floating-bottom:not(.ag-invisible) {
|
|
608
|
+
border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
|
|
609
|
+
}
|
|
610
|
+
.ag-theme-salt-light .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before,
|
|
611
|
+
.ag-theme-salt-dark .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before,
|
|
612
|
+
.ag-theme-salt-compact-light .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before,
|
|
613
|
+
.ag-theme-salt-compact-dark .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before {
|
|
614
|
+
border-top-color: var(--salt-container-bold-borderColor);
|
|
615
|
+
}
|
|
616
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned > .ag-grid-pinned-left-cells,
|
|
617
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned > .ag-grid-scrolling-cells,
|
|
618
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned > .ag-grid-pinned-right-cells {
|
|
619
|
+
border-bottom: none;
|
|
620
|
+
}
|
|
621
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned.ag-row-first > .ag-grid-pinned-left-cells,
|
|
622
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned.ag-row-first > .ag-grid-scrolling-cells,
|
|
623
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned.ag-row-first > .ag-grid-pinned-right-cells {
|
|
624
|
+
border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
|
|
625
|
+
}
|
|
626
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned:not(.ag-row-first) > .ag-grid-pinned-left-cells,
|
|
627
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned:not(.ag-row-first) > .ag-grid-scrolling-cells,
|
|
628
|
+
[class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned:not(.ag-row-first) > .ag-grid-pinned-right-cells {
|
|
629
|
+
border-top: var(--ag-row-border-style) var(--ag-row-border-color) var(--ag-row-border-width);
|
|
630
|
+
}
|
|
631
|
+
[class*=ag-theme-salt] .ag-body-vertical-content-no-gap .ag-has-bottom-pinned-rows .ag-grid-scrolling-container .ag-row-last > .ag-grid-pinned-left-cells,
|
|
632
|
+
[class*=ag-theme-salt] .ag-body-vertical-content-no-gap .ag-has-bottom-pinned-rows .ag-grid-scrolling-container .ag-row-last > .ag-grid-scrolling-cells,
|
|
633
|
+
[class*=ag-theme-salt] .ag-body-vertical-content-no-gap .ag-has-bottom-pinned-rows .ag-grid-scrolling-container .ag-row-last > .ag-grid-pinned-right-cells {
|
|
634
|
+
border-bottom: var(--ag-row-border-style) var(--ag-row-border-color) var(--ag-row-border-width);
|
|
635
|
+
}
|
|
636
|
+
[class*=ag-theme-salt] .ag-grid-pinned-top-rows-container > .ag-row-pinned.ag-row-last > .ag-grid-pinned-left-cells,
|
|
637
|
+
[class*=ag-theme-salt] .ag-grid-pinned-top-rows-container > .ag-row-pinned.ag-row-last > .ag-grid-scrolling-cells,
|
|
638
|
+
[class*=ag-theme-salt] .ag-grid-pinned-top-rows-container > .ag-row-pinned.ag-row-last > .ag-grid-pinned-right-cells {
|
|
639
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
|
|
578
640
|
}
|
|
579
641
|
.ag-theme-salt-light .ag-column-drop-horizontal,
|
|
580
642
|
.ag-theme-salt-dark .ag-column-drop-horizontal,
|
|
581
643
|
.ag-theme-salt-compact-light .ag-column-drop-horizontal,
|
|
582
644
|
.ag-theme-salt-compact-dark .ag-column-drop-horizontal {
|
|
583
|
-
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-
|
|
645
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
|
|
584
646
|
height: calc(var(--salt-size-base) + var(--salt-spacing-100));
|
|
585
647
|
}
|
|
586
648
|
.ag-theme-salt-light .ag-column-drop-cell,
|
|
@@ -600,18 +662,39 @@
|
|
|
600
662
|
font-size: var(--salt-size-selectable);
|
|
601
663
|
line-height: var(--salt-size-selectable);
|
|
602
664
|
}
|
|
665
|
+
[class*=ag-theme-salt] .ag-cell-wrapper > .ag-selection-checkbox,
|
|
666
|
+
[class*=ag-theme-salt] .ag-cell-wrapper.ag-checkbox-cell > .ag-labeled.ag-checkbox {
|
|
667
|
+
height: min(var(--ag-line-height, calc(var(--ag-row-height) - var(--ag-row-border-width))), calc(var(--ag-row-height) - var(--ag-row-border-width)));
|
|
668
|
+
}
|
|
603
669
|
|
|
604
670
|
/* css/parts/ag-column-drop-list.css */
|
|
605
|
-
.ag-column-drop-cell-drag-handle {
|
|
671
|
+
[class*=ag-theme-salt] .ag-column-drop-cell-drag-handle {
|
|
606
672
|
margin-left: 0;
|
|
607
673
|
}
|
|
608
|
-
.ag-column-drop-cell {
|
|
674
|
+
[class*=ag-theme-salt] .ag-column-drop-cell {
|
|
609
675
|
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
610
676
|
padding: 0 var(--salt-spacing-50);
|
|
611
677
|
}
|
|
612
|
-
.ag-column-drop-cell-button {
|
|
678
|
+
[class*=ag-theme-salt] .ag-column-drop-cell-button {
|
|
613
679
|
min-width: unset;
|
|
614
680
|
}
|
|
681
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell {
|
|
682
|
+
--ag-secondary-foreground-color: var(--salt-actionable-bold-foreground);
|
|
683
|
+
--ag-icon-font-color: var(--salt-actionable-bold-foreground);
|
|
684
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background);
|
|
685
|
+
color: var(--ag-secondary-foreground-color);
|
|
686
|
+
}
|
|
687
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell:hover {
|
|
688
|
+
--ag-secondary-foreground-color: var(--salt-actionable-bold-foreground-hover);
|
|
689
|
+
--ag-icon-font-color: var(--salt-actionable-bold-foreground-hover);
|
|
690
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background-hover);
|
|
691
|
+
}
|
|
692
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell:active,
|
|
693
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell[aria-expanded=true] {
|
|
694
|
+
--ag-secondary-foreground-color: var(--salt-actionable-bold-foreground-active);
|
|
695
|
+
--ag-icon-font-color: var(--salt-actionable-bold-foreground-active);
|
|
696
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background-active);
|
|
697
|
+
}
|
|
615
698
|
|
|
616
699
|
/* css/parts/ag-header.css */
|
|
617
700
|
.ag-theme-salt-light .ag-header,
|
|
@@ -619,6 +702,7 @@
|
|
|
619
702
|
.ag-theme-salt-compact-light .ag-header,
|
|
620
703
|
.ag-theme-salt-compact-dark .ag-header {
|
|
621
704
|
--ag-icon-font-color: var(--ag-header-foreground-color);
|
|
705
|
+
background-color: var(--ag-header-background-color);
|
|
622
706
|
}
|
|
623
707
|
.ag-theme-salt-light .ag-advanced-filter-header,
|
|
624
708
|
.ag-theme-salt-dark .ag-advanced-filter-header,
|
|
@@ -654,20 +738,54 @@
|
|
|
654
738
|
.ag-theme-salt-light .ag-pinned-left-header,
|
|
655
739
|
.ag-theme-salt-dark .ag-pinned-left-header,
|
|
656
740
|
.ag-theme-salt-compact-light .ag-pinned-left-header,
|
|
657
|
-
.ag-theme-salt-compact-dark .ag-pinned-left-header
|
|
741
|
+
.ag-theme-salt-compact-dark .ag-pinned-left-header,
|
|
742
|
+
.ag-theme-salt-light .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper,
|
|
743
|
+
.ag-theme-salt-dark .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper,
|
|
744
|
+
.ag-theme-salt-compact-light .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper,
|
|
745
|
+
.ag-theme-salt-compact-dark .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper {
|
|
658
746
|
border-right-color: var(--salt-separable-secondary-borderColor);
|
|
659
747
|
}
|
|
748
|
+
[class*=ag-theme-salt] .ag-ltr .ag-header-row .ag-grid-pinned-left-cells .ag-header-cell.ag-header-cell-last-left-pinned {
|
|
749
|
+
--ag-header-column-separator-display: none;
|
|
750
|
+
}
|
|
751
|
+
[class*=ag-theme-salt] .ag-ltr .ag-header-row .ag-grid-pinned-left-cells .ag-header-cell.ag-header-cell-last-left-pinned:hover,
|
|
752
|
+
[class*=ag-theme-salt] .ag-ltr .ag-header-row .ag-grid-pinned-left-cells .ag-header-cell.ag-header-cell-last-left-pinned.ag-column-resizing {
|
|
753
|
+
background-color: transparent;
|
|
754
|
+
}
|
|
660
755
|
.ag-theme-salt-light .ag-pinned-right-header,
|
|
661
756
|
.ag-theme-salt-dark .ag-pinned-right-header,
|
|
662
757
|
.ag-theme-salt-compact-light .ag-pinned-right-header,
|
|
663
758
|
.ag-theme-salt-compact-dark .ag-pinned-right-header {
|
|
664
759
|
border-left-color: var(--salt-separable-secondary-borderColor);
|
|
665
760
|
}
|
|
761
|
+
.ag-theme-salt-light .ag-header-row .ag-grid-pinned-right-cells,
|
|
762
|
+
.ag-theme-salt-dark .ag-header-row .ag-grid-pinned-right-cells,
|
|
763
|
+
.ag-theme-salt-compact-light .ag-header-row .ag-grid-pinned-right-cells,
|
|
764
|
+
.ag-theme-salt-compact-dark .ag-header-row .ag-grid-pinned-right-cells {
|
|
765
|
+
border-left-color: var(--salt-separable-secondary-borderColor);
|
|
766
|
+
border-left-style: var(--salt-borderStyle-solid);
|
|
767
|
+
border-left-width: var(--salt-size-fixed-100);
|
|
768
|
+
}
|
|
769
|
+
.ag-theme-salt-light .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper,
|
|
770
|
+
.ag-theme-salt-dark .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper,
|
|
771
|
+
.ag-theme-salt-compact-light .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper,
|
|
772
|
+
.ag-theme-salt-compact-dark .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper {
|
|
773
|
+
border-left-width: 0;
|
|
774
|
+
position: relative;
|
|
775
|
+
width: calc(100% + var(--salt-size-fixed-100));
|
|
776
|
+
}
|
|
777
|
+
.ag-theme-salt-light .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer,
|
|
778
|
+
.ag-theme-salt-dark .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer,
|
|
779
|
+
.ag-theme-salt-compact-light .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer,
|
|
780
|
+
.ag-theme-salt-compact-dark .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer {
|
|
781
|
+
background-color: transparent;
|
|
782
|
+
background-image: none;
|
|
783
|
+
}
|
|
666
784
|
.ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
|
|
667
785
|
.ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
|
|
668
786
|
.ag-theme-salt-compact-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
|
|
669
787
|
.ag-theme-salt-compact-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total) {
|
|
670
|
-
border-top-color: var(--salt-container-
|
|
788
|
+
border-top-color: var(--salt-container-bold-borderColor);
|
|
671
789
|
}
|
|
672
790
|
.ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
|
|
673
791
|
.ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
|
|
@@ -836,10 +954,10 @@
|
|
|
836
954
|
.ag-theme-salt-compact-dark .ag-filter-active {
|
|
837
955
|
--ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
|
|
838
956
|
}
|
|
839
|
-
.ag-theme-salt-light .ag-floating-filter
|
|
840
|
-
.ag-theme-salt-dark .ag-floating-filter
|
|
841
|
-
.ag-theme-salt-compact-light .ag-floating-filter
|
|
842
|
-
.ag-theme-salt-compact-dark .ag-floating-filter
|
|
957
|
+
.ag-theme-salt-light .ag-floating-filter::after,
|
|
958
|
+
.ag-theme-salt-dark .ag-floating-filter::after,
|
|
959
|
+
.ag-theme-salt-compact-light .ag-floating-filter::after,
|
|
960
|
+
.ag-theme-salt-compact-dark .ag-floating-filter::after {
|
|
843
961
|
width: 0;
|
|
844
962
|
}
|
|
845
963
|
.ag-theme-salt-light .ag-ltr .ag-floating-filter-button,
|
|
@@ -898,16 +1016,16 @@
|
|
|
898
1016
|
.ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible,
|
|
899
1017
|
.ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible,
|
|
900
1018
|
.ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible {
|
|
901
|
-
background: var(--salt-actionable-
|
|
902
|
-
color: var(--salt-actionable-
|
|
903
|
-
--ag-icon-font-color: var(--salt-actionable-
|
|
1019
|
+
background: var(--salt-actionable-subtle-background-active);
|
|
1020
|
+
color: var(--salt-actionable-subtle-foreground-active);
|
|
1021
|
+
--ag-icon-font-color: var(--salt-actionable-subtle-foreground-active);
|
|
904
1022
|
--salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
|
|
905
1023
|
}
|
|
906
1024
|
.ag-theme-salt-light .ag-header-cell.ag-column-menu-visible .ag-icon,
|
|
907
1025
|
.ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible .ag-icon,
|
|
908
1026
|
.ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible .ag-icon,
|
|
909
1027
|
.ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible .ag-icon {
|
|
910
|
-
color: var(--salt-actionable-
|
|
1028
|
+
color: var(--salt-actionable-subtle-foreground-active);
|
|
911
1029
|
}
|
|
912
1030
|
.ag-theme-salt-light .ag-cell-label-container,
|
|
913
1031
|
.ag-theme-salt-dark .ag-cell-label-container,
|
|
@@ -1065,7 +1183,7 @@
|
|
|
1065
1183
|
.ag-theme-salt-dark .ag-menu-header,
|
|
1066
1184
|
.ag-theme-salt-compact-light .ag-menu-header,
|
|
1067
1185
|
.ag-theme-salt-compact-dark .ag-menu-header {
|
|
1068
|
-
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-
|
|
1186
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
|
|
1069
1187
|
background-color: var(--salt-container-primary-background);
|
|
1070
1188
|
}
|
|
1071
1189
|
.ag-theme-salt-light .ag-menu-body,
|
|
@@ -1125,13 +1243,14 @@ div[class*=ag-theme-salt] {
|
|
|
1125
1243
|
--ag-menu-background-color: var(--salt-container-primary-background);
|
|
1126
1244
|
--ag-border-color: var(--salt-separable-secondary-borderColor);
|
|
1127
1245
|
--ag-borders-secondary: var(--salt-size-fixed-100) var(--salt-borderStyle-solid);
|
|
1246
|
+
--ag-pinned-row-border: none;
|
|
1128
1247
|
--ag-card-radius: var(--salt-palette-corner);
|
|
1129
1248
|
--ag-cell-horizontal-padding: var(--salt-spacing-100);
|
|
1130
1249
|
--ag-checkbox-border-radius: 0;
|
|
1131
1250
|
--ag-checkbox-checked-color: var(--salt-selectable-foreground-selected);
|
|
1132
1251
|
--ag-checkbox-indeterminate-color: var(--salt-selectable-foreground);
|
|
1133
1252
|
--ag-checkbox-unchecked-color: var(--salt-selectable-borderColor);
|
|
1134
|
-
--ag-chip-background-color: var(--salt-actionable-
|
|
1253
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background);
|
|
1135
1254
|
--ag-data-color: var(--salt-content-primary-foreground);
|
|
1136
1255
|
--ag-disabled-foreground-color: var(--salt-content-primary-foreground-disabled);
|
|
1137
1256
|
--ag-font-family: var(--salt-text-fontFamily);
|
|
@@ -1178,6 +1297,9 @@ div[class*=ag-theme-salt] {
|
|
|
1178
1297
|
--ag-value-change-delta-up-color: var(--salt-sentiment-positive-foreground-decorative);
|
|
1179
1298
|
--ag-widget-container-horizontal-padding: var(--salt-spacing-100);
|
|
1180
1299
|
}
|
|
1300
|
+
[class*=ag-theme-salt] .ag-measurement-container {
|
|
1301
|
+
--ag-pinned-row-border: none;
|
|
1302
|
+
}
|
|
1181
1303
|
div[class*=ag-theme-salt-compact] {
|
|
1182
1304
|
--salt-size-base: 16px;
|
|
1183
1305
|
--salt-size-selectable: 12px;
|
|
@@ -1218,36 +1340,42 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
|
|
|
1218
1340
|
--ag-header-background-color: var(--salt-container-tertiary-background);
|
|
1219
1341
|
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1220
1342
|
}
|
|
1221
|
-
.error-row {
|
|
1343
|
+
[class*=ag-theme-salt] .error-row {
|
|
1222
1344
|
--ag-background-color: var(--salt-status-error-background);
|
|
1223
1345
|
--ag-selected-row-background-color: var(--salt-status-error-background-selected);
|
|
1224
1346
|
--ag-selected-row-border-color: var(--salt-status-error-borderColor);
|
|
1225
1347
|
--ag-odd-row-background-color: var(--ag-background-color);
|
|
1348
|
+
--ag-data-background-color: var(--ag-background-color);
|
|
1226
1349
|
--ag-row-hover-color: var(--salt-overlayable-background-hover);
|
|
1227
1350
|
}
|
|
1228
|
-
.warning-row {
|
|
1351
|
+
[class*=ag-theme-salt] .warning-row {
|
|
1229
1352
|
--ag-background-color: var(--salt-status-warning-background);
|
|
1230
1353
|
--ag-selected-row-background-color: var(--salt-status-warning-background-selected);
|
|
1231
1354
|
--ag-selected-row-border-color: var(--salt-status-warning-borderColor);
|
|
1232
1355
|
--ag-odd-row-background-color: var(--ag-background-color);
|
|
1356
|
+
--ag-data-background-color: var(--ag-background-color);
|
|
1233
1357
|
--ag-row-hover-color: var(--salt-overlayable-background-hover);
|
|
1234
1358
|
}
|
|
1235
|
-
.success-row {
|
|
1359
|
+
[class*=ag-theme-salt] .success-row {
|
|
1236
1360
|
--ag-background-color: var(--salt-status-success-background);
|
|
1237
1361
|
--ag-selected-row-background-color: var(--salt-status-success-background-selected);
|
|
1238
1362
|
--ag-selected-row-border-color: var(--salt-status-success-borderColor);
|
|
1239
1363
|
--ag-odd-row-background-color: var(--ag-background-color);
|
|
1364
|
+
--ag-data-background-color: var(--ag-background-color);
|
|
1240
1365
|
--ag-row-hover-color: var(--salt-overlayable-background-hover);
|
|
1241
1366
|
}
|
|
1367
|
+
[class*=ag-theme-salt] .ag-row-odd {
|
|
1368
|
+
--ag-data-background-color: var(--ag-odd-row-background-color);
|
|
1369
|
+
}
|
|
1242
1370
|
|
|
1243
1371
|
/* css/parts/ag-toggle-button.css */
|
|
1244
|
-
.ag-toggle-button-input-wrapper::before {
|
|
1372
|
+
[class*=ag-theme-salt] .ag-toggle-button-input-wrapper::before {
|
|
1245
1373
|
top: calc(1px - var(--ag-toggle-button-border-width));
|
|
1246
1374
|
left: calc(1px - var(--ag-toggle-button-border-width));
|
|
1247
1375
|
height: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width));
|
|
1248
1376
|
width: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width));
|
|
1249
1377
|
}
|
|
1250
|
-
.ag-toggle-button-input-wrapper.ag-checked::before {
|
|
1378
|
+
[class*=ag-theme-salt] .ag-toggle-button-input-wrapper.ag-checked::before {
|
|
1251
1379
|
--ag-toggle-button-switch-background-color: var(--salt-selectable-borderColor-selected);
|
|
1252
1380
|
border-color: var(--ag-toggle-button-switch-border-color);
|
|
1253
1381
|
left: calc(100% - var(--ag-toggle-button-height) + 2 * var(--ag-toggle-button-border-width));
|
|
@@ -1260,6 +1388,12 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
|
|
|
1260
1388
|
.ag-theme-salt-compact-dark .ag-tool-panel-wrapper > .ag-react-container {
|
|
1261
1389
|
width: inherit;
|
|
1262
1390
|
}
|
|
1391
|
+
.ag-theme-salt-light .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container,
|
|
1392
|
+
.ag-theme-salt-dark .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container,
|
|
1393
|
+
.ag-theme-salt-compact-light .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container,
|
|
1394
|
+
.ag-theme-salt-compact-dark .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container {
|
|
1395
|
+
width: 100%;
|
|
1396
|
+
}
|
|
1263
1397
|
.ag-theme-salt-light .ag-side-buttons,
|
|
1264
1398
|
.ag-theme-salt-dark .ag-side-buttons,
|
|
1265
1399
|
.ag-theme-salt-compact-light .ag-side-buttons,
|
|
@@ -1285,6 +1419,20 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
|
|
|
1285
1419
|
margin-bottom: var(--salt-spacing-100);
|
|
1286
1420
|
}
|
|
1287
1421
|
|
|
1422
|
+
/* css/parts/ag-header-variants.css */
|
|
1423
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-primary,
|
|
1424
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-primary.ag-theme-salt-variant-zebra {
|
|
1425
|
+
--ag-header-background-color: var(--salt-container-primary-background);
|
|
1426
|
+
}
|
|
1427
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-secondary,
|
|
1428
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-secondary.ag-theme-salt-variant-zebra {
|
|
1429
|
+
--ag-header-background-color: var(--salt-container-secondary-background);
|
|
1430
|
+
}
|
|
1431
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-tertiary,
|
|
1432
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-tertiary.ag-theme-salt-variant-zebra {
|
|
1433
|
+
--ag-header-background-color: var(--salt-container-tertiary-background);
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1288
1436
|
/* css/salt-ag-grid-theme.css */
|
|
1289
1437
|
|
|
1290
1438
|
/* css/salt-icons.css */
|
|
@@ -1353,6 +1501,8 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
|
|
|
1353
1501
|
--ag-icon-font-code-tree-open: "\e936";
|
|
1354
1502
|
--ag-icon-font-code-unlinked: "\e937";
|
|
1355
1503
|
--ag-icon-font-code-up: "\e938";
|
|
1504
|
+
--ag-icon-font-code-aasc: "\e939";
|
|
1505
|
+
--ag-icon-font-code-adesc: "\e93a";
|
|
1356
1506
|
}
|
|
1357
1507
|
|
|
1358
1508
|
/* salt-ag-theme.css */
|