@osdk/react-components-styles 0.2.0-beta.27 → 0.2.0-beta.29

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 (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +30 -0
  3. package/package.json +1 -1
  4. package/src/tokens/base.css +4 -1
  5. package/src/tokens/filter-list.css +85 -80
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @osdk/react-components-styles
2
2
 
3
+ ## 0.2.0-beta.29
4
+
5
+ ### Minor Changes
6
+
7
+ - d6c2c8b: Fix FilterList styling
8
+ - d6c2c8b: Fix FilterList dropdown
9
+
10
+ ## 0.2.0-beta.28
11
+
12
+ ### Minor Changes
13
+
14
+ - 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
15
+ - 3f4fb81: Address design review and PR review feedback for filter list: exclude strikethrough only on selected items, remove hover-to-show exclude row, fix 3-dots toggle close behavior, remove OR filter operator mode, and various UI polish
16
+
3
17
  ## 0.2.0-beta.27
4
18
 
5
19
  ## 0.2.0-beta.26
package/README.md CHANGED
@@ -45,6 +45,36 @@ Import the CSS files in your application's entry point:
45
45
  }
46
46
  ```
47
47
 
48
+ ## How CSS Layers Work
49
+
50
+ OSDK uses CSS [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to make theming predictable. If you're new to `@layer`, here's what you need to know:
51
+
52
+ **What is `@layer`?** CSS `@layer` lets you group styles into named layers and control the order in which they apply. When two styles target the same element, the style in the _later_ layer always wins — regardless of how specific the selector is. This is what makes the theming system maintainable.
53
+
54
+ **OSDK's layer hierarchy:**
55
+
56
+ | Layer | Purpose |
57
+ | --- | --- |
58
+ | `osdk.tokens` | Design tokens (colors, spacing, typography) — the defaults |
59
+ | `osdk.components` | Component structural styles (layout, borders, sizing) |
60
+ | `user.theme` | Your custom overrides (you define this) |
61
+
62
+ The `@layer` declaration at the top of your CSS file sets this order:
63
+
64
+ ```css
65
+ @layer osdk.tokens, osdk.components, user.theme;
66
+ ```
67
+
68
+ Because `user.theme` is declared last, your overrides always win over OSDK defaults — no need to fight specificity.
69
+
70
+ **When styles conflict, CSS resolves them in this order:**
71
+
72
+ 1. **Layer order** — Later layers always win (`user.theme` > `osdk.components` > `osdk.tokens`)
73
+ 2. **Selector specificity** — More specific selectors win _within the same layer_
74
+ 3. **Source order** — Later declarations win when specificity is equal
75
+
76
+ This means you can override any OSDK token with a simple `:root` selector in your `user.theme` layer — it will always take priority, even if the OSDK layer uses a more specific selector internally.
77
+
48
78
  ## Understanding Token Scopes
49
79
 
50
80
  **OSDK Tokens (`--osdk-*`):**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@osdk/react-components-styles",
3
- "version": "0.2.0-beta.27",
3
+ "version": "0.2.0-beta.29",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
package/src/tokens/base.css CHANGED
@@ -179,8 +179,11 @@
179
179
  color: var(--osdk-typography-color-default-rest);
180
180
  font-size: var(--osdk-typography-size-body-medium);
181
181
 
182
- /* Blueprint icon color override to inherit surrounding text color */
182
+ /* Blueprint icon alignment and color override */
183
183
  .bp6-icon {
184
+ display: inline-block;
185
+ flex: 0 0 auto;
186
+ vertical-align: text-bottom;
184
187
  fill: currentColor;
185
188
  }
186
189
 
package/src/tokens/filter-list.css CHANGED
@@ -3,21 +3,31 @@
3
3
  --osdk-filter-list-bg: var(--osdk-background-primary);
4
4
  --osdk-filter-list-border: var(--osdk-surface-border);
5
5
  --osdk-filter-list-border-radius: var(--osdk-surface-border-radius);
6
- --osdk-filter-list-padding: calc(var(--osdk-surface-spacing) * 3);
7
- --osdk-filter-list-gap: calc(var(--osdk-surface-spacing) * 3);
8
- --osdk-filter-list-addButton-padding-top: calc(
9
- var(--osdk-surface-spacing) * 2
10
- );
6
+ --osdk-filter-list-padding: 0;
7
+ --osdk-filter-list-gap: 0;
8
+ --osdk-filter-list-shadow:
9
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
10
+ --osdk-filter-list-addButton-padding-top: 0;
11
11
  --osdk-filter-list-addButton-container-bg: var(--osdk-background-primary);
12
+ --osdk-filter-list-addButton-container-padding: calc(
13
+ var(--osdk-surface-spacing) * 2
14
+ )
15
+ calc(var(--osdk-surface-spacing) * 3);
16
+ --osdk-filter-list-addButton-container-border-top: var(--osdk-surface-border);
17
+ --osdk-filter-list-addButton-border: var(--osdk-surface-border);
18
+ --osdk-filter-list-addButton-height: calc(var(--osdk-surface-spacing) * 7.5);
12
19
 
13
20
  /* Filter List Content */
14
- --osdk-filter-list-content-gap: calc(var(--osdk-surface-spacing) * 3);
21
+ --osdk-filter-list-content-gap: 0;
15
22
  --osdk-filter-list-empty-text-color: var(--osdk-typography-color-muted);
16
23
  --osdk-filter-list-empty-font-size: var(--osdk-typography-size-body-small);
17
24
 
18
25
  /* Filter List Header */
19
- --osdk-filter-header-padding-bottom: calc(var(--osdk-surface-spacing) * 2);
26
+ --osdk-filter-header-padding: calc(var(--osdk-surface-spacing) * 2)
27
+ calc(var(--osdk-surface-spacing) * 3);
28
+ --osdk-filter-header-padding-bottom: 0;
20
29
  --osdk-filter-header-border-bottom: var(--osdk-surface-border);
30
+ --osdk-filter-header-gap: calc(var(--osdk-surface-spacing) * 2);
21
31
  --osdk-filter-header-titleContainer-gap: var(--osdk-surface-spacing);
22
32
  --osdk-filter-header-font-family: var(--osdk-typography-family-default);
23
33
  --osdk-filter-header-font-size: var(--osdk-typography-size-body-medium);
@@ -30,24 +40,23 @@
30
40
  --osdk-filter-header-activeCount-color: var(--osdk-typography-color-muted);
31
41
  --osdk-filter-header-button-padding: calc(var(--osdk-surface-spacing) * 1);
32
42
  --osdk-filter-header-button-bg: transparent;
33
- --osdk-filter-header-button-border-radius: var(
34
- --osdk-surface-border-radius
35
- );
43
+ --osdk-filter-header-button-border-radius: var(--osdk-surface-border-radius);
36
44
  --osdk-filter-header-button-transition: var(
37
- --osdk-emphasis-transition-duration
38
- )
45
+ --osdk-emphasis-transition-duration
46
+ )
39
47
  var(--osdk-emphasis-ease-default);
40
48
  --osdk-filter-header-button-bg-hover: var(--osdk-custom-color-gray-1);
41
49
  --osdk-filter-header-button-bg-active: var(--osdk-custom-color-gray-2);
42
- --osdk-filter-header-reset-font-size: var(
43
- --osdk-typography-size-body-small
44
- );
50
+ --osdk-filter-header-reset-font-size: var(--osdk-typography-size-body-small);
45
51
  --osdk-filter-header-reset-color: var(--osdk-intent-primary-rest);
46
- --osdk-filter-header-reset-color-disabled: var(
47
- --osdk-typography-color-muted
48
- );
49
- --osdk-filter-header-reset-padding: calc(var(--osdk-surface-spacing) * 0.5)
52
+ --osdk-filter-header-reset-color-disabled: var(--osdk-typography-color-muted);
53
+ --osdk-filter-header-reset-padding: calc(var(--osdk-surface-spacing) * 1)
50
54
  calc(var(--osdk-surface-spacing) * 1.5);
55
+ --osdk-filter-header-reset-border: var(--osdk-surface-border-width) solid
56
+ var(--osdk-intent-primary-rest);
57
+ --osdk-filter-header-reset-border-disabled: var(--osdk-surface-border-width)
58
+ solid var(--osdk-typography-color-muted);
59
+ --osdk-filter-header-reset-border-radius: var(--osdk-surface-border-radius);
51
60
  --osdk-filter-header-collapse-icon-size: calc(
52
61
  var(--osdk-surface-spacing) * 1.5
53
62
  );
@@ -61,7 +70,7 @@
61
70
  --osdk-filter-item-label-font-family: var(--osdk-typography-family-default);
62
71
  --osdk-filter-item-label-font-size: var(--osdk-typography-size-body-small);
63
72
  --osdk-filter-item-label-font-weight: var(--osdk-typography-weight-bold);
64
- --osdk-filter-item-label-color: var(--osdk-typography-color-default-rest);
73
+ --osdk-filter-item-label-color: var(--osdk-typography-color-muted);
65
74
  --osdk-filter-item-drag-handle-padding: calc(
66
75
  var(--osdk-surface-spacing) * 0.5
67
76
  );
@@ -70,7 +79,9 @@
70
79
  --osdk-surface-border-radius
71
80
  );
72
81
  --osdk-filter-item-drag-handle-color: var(--osdk-drag-handle-color);
73
- --osdk-filter-item-drag-handle-color-hover: var(--osdk-drag-handle-color-hover);
82
+ --osdk-filter-item-drag-handle-color-hover: var(
83
+ --osdk-drag-handle-color-hover
84
+ );
74
85
  --osdk-filter-item-drag-handle-bg-hover: var(--osdk-custom-color-gray-1);
75
86
  --osdk-filter-item-drag-handle-focus-outline-color: var(
76
87
  --osdk-emphasis-focus-color
@@ -125,12 +136,8 @@
125
136
  --osdk-filter-tag-line-height: 1.4;
126
137
  --osdk-filter-tag-color: var(--osdk-typography-color-default-rest);
127
138
  --osdk-filter-tag-remove-color: var(--osdk-typography-color-muted);
128
- --osdk-filter-tag-remove-font-size: var(
129
- --osdk-typography-size-body-medium
130
- );
131
- --osdk-filter-tag-remove-transition: var(
132
- --osdk-emphasis-transition-duration
133
- )
139
+ --osdk-filter-tag-remove-font-size: var(--osdk-typography-size-body-medium);
140
+ --osdk-filter-tag-remove-transition: var(--osdk-emphasis-transition-duration)
134
141
  var(--osdk-emphasis-ease-default);
135
142
  --osdk-filter-tag-remove-color-hover: var(
136
143
  --osdk-typography-color-default-rest
@@ -140,17 +147,13 @@
140
147
  --osdk-error-boundary-gap: calc(var(--osdk-surface-spacing) * 2);
141
148
  --osdk-error-boundary-padding: calc(var(--osdk-surface-spacing) * 2);
142
149
  --osdk-error-boundary-border-radius: var(--osdk-surface-border-radius);
143
- --osdk-error-boundary-bg: var(
144
- --osdk-surface-background-color-danger-rest
145
- );
150
+ --osdk-error-boundary-bg: var(--osdk-surface-background-color-danger-rest);
146
151
  --osdk-error-boundary-font-size: var(--osdk-typography-size-body-small);
147
152
  --osdk-error-boundary-text-color: var(--osdk-typography-color-danger-rest);
148
153
  --osdk-error-boundary-button-padding: calc(var(--osdk-surface-spacing) * 1)
149
154
  calc(var(--osdk-surface-spacing) * 2);
150
155
  --osdk-error-boundary-button-border-color: currentColor;
151
- --osdk-error-boundary-button-border-radius: var(
152
- --osdk-surface-border-radius
153
- );
156
+ --osdk-error-boundary-button-border-radius: var(--osdk-surface-border-radius);
154
157
  --osdk-error-boundary-button-font-size: var(
155
158
  --osdk-typography-size-body-x-small
156
159
  );
@@ -159,8 +162,7 @@
159
162
 
160
163
  /* Checkbox List Tokens */
161
164
  --osdk-filter-checkbox-list-gap: calc(var(--osdk-surface-spacing) * 0.5);
162
- --osdk-filter-checkbox-row-padding: calc(var(--osdk-surface-spacing) * 0.5)
163
- 0;
165
+ --osdk-filter-checkbox-row-padding: calc(var(--osdk-surface-spacing) * 0.5) 0;
164
166
  --osdk-filter-checkbox-label-gap: var(--osdk-surface-spacing);
165
167
  --osdk-filter-checkbox-value-font-family: var(
166
168
  --osdk-typography-family-default
@@ -169,18 +171,12 @@
169
171
  --osdk-typography-size-body-medium
170
172
  );
171
173
  --osdk-filter-checkbox-value-line-height: 1.4;
172
- --osdk-filter-checkbox-value-color: var(
173
- --osdk-typography-color-default-rest
174
- );
174
+ --osdk-filter-checkbox-value-color: var(--osdk-typography-color-default-rest);
175
175
 
176
176
  /* Toggle Tokens */
177
177
  --osdk-filter-toggle-label-gap: var(--osdk-surface-spacing);
178
- --osdk-filter-toggle-label-font-family: var(
179
- --osdk-typography-family-default
180
- );
181
- --osdk-filter-toggle-label-font-size: var(
182
- --osdk-typography-size-body-medium
183
- );
178
+ --osdk-filter-toggle-label-font-family: var(--osdk-typography-family-default);
179
+ --osdk-filter-toggle-label-font-size: var(--osdk-typography-size-body-medium);
184
180
  --osdk-filter-toggle-label-line-height: 1.4;
185
181
  --osdk-filter-toggle-label-color: var(--osdk-typography-color-default-rest);
186
182
 
@@ -188,12 +184,10 @@
188
184
  --osdk-filter-listogram-gap: var(--osdk-surface-spacing);
189
185
  --osdk-filter-listogram-row-gap: calc(var(--osdk-surface-spacing) * 2);
190
186
  --osdk-filter-listogram-row-padding: var(--osdk-surface-spacing);
191
- --osdk-filter-listogram-row-border-radius: var(
192
- --osdk-surface-border-radius
193
- );
187
+ --osdk-filter-listogram-row-border-radius: var(--osdk-surface-border-radius);
194
188
  --osdk-filter-listogram-row-transition: var(
195
- --osdk-emphasis-transition-duration
196
- )
189
+ --osdk-emphasis-transition-duration
190
+ )
197
191
  var(--osdk-emphasis-ease-default);
198
192
  --osdk-filter-listogram-row-bg-hover: var(
199
193
  --osdk-surface-background-color-default-hover
@@ -201,9 +195,7 @@
201
195
  --osdk-filter-listogram-row-bg-active: var(
202
196
  --osdk-surface-background-color-default-active
203
197
  );
204
- --osdk-filter-listogram-row-focus-outline: var(
205
- --osdk-emphasis-focus-width
206
- )
198
+ --osdk-filter-listogram-row-focus-outline: var(--osdk-emphasis-focus-width)
207
199
  solid var(--osdk-emphasis-focus-color);
208
200
  --osdk-filter-listogram-row-focus-offset: var(--osdk-emphasis-focus-offset);
209
201
  --osdk-filter-listogram-label-font-family: var(
@@ -218,13 +210,11 @@
218
210
  --osdk-filter-listogram-bar-height: calc(var(--osdk-surface-spacing) * 2);
219
211
  --osdk-filter-listogram-bar-width: calc(var(--osdk-surface-spacing) * 12.5);
220
212
  --osdk-filter-listogram-bar-bg: var(--osdk-palette-gray-100);
221
- --osdk-filter-listogram-bar-border-radius: var(
222
- --osdk-surface-border-radius
223
- );
224
- --osdk-filter-listogram-bar-color: var(--osdk-custom-color-gray-3);
213
+ --osdk-filter-listogram-bar-border-radius: var(--osdk-surface-border-radius);
214
+ --osdk-filter-listogram-bar-color: var(--osdk-intent-primary-rest);
225
215
  --osdk-filter-listogram-bar-fill-transition: var(
226
- --osdk-emphasis-transition-duration
227
- )
216
+ --osdk-emphasis-transition-duration
217
+ )
228
218
  var(--osdk-emphasis-ease-default);
229
219
  --osdk-filter-listogram-count-font-family: var(
230
220
  --osdk-typography-family-default
@@ -235,23 +225,29 @@
235
225
  --osdk-filter-listogram-count-color: var(--osdk-typography-color-muted);
236
226
 
237
227
  /* Range Input Tokens */
238
- --osdk-filter-range-gap: calc(var(--osdk-surface-spacing) * 2);
228
+ --osdk-filter-range-gap: calc(var(--osdk-surface-spacing) * 2.5);
229
+ --osdk-filter-range-histogram-padding-bottom: calc(
230
+ var(--osdk-surface-spacing) * 1
231
+ );
232
+ --osdk-filter-range-histogram-padding-inline: calc(
233
+ var(--osdk-surface-spacing) * 2
234
+ );
239
235
  --osdk-filter-range-histogram-height: calc(var(--osdk-surface-spacing) * 15);
240
- --osdk-filter-range-histogram-bar-gap: calc(var(--osdk-surface-spacing) * 0.5);
236
+ --osdk-filter-range-histogram-bar-gap: calc(
237
+ var(--osdk-surface-spacing) * 0.5
238
+ );
241
239
  --osdk-filter-range-histogram-bar-min-width: var(--osdk-surface-spacing);
242
240
  --osdk-filter-range-histogram-bar-color: var(--osdk-palette-gray-200);
243
241
  --osdk-filter-range-histogram-bar-active-color: var(
244
242
  --osdk-intent-primary-rest
245
243
  );
246
244
  --osdk-filter-range-histogram-bar-transition: var(
247
- --osdk-emphasis-transition-duration
248
- )
245
+ --osdk-emphasis-transition-duration
246
+ )
249
247
  var(--osdk-emphasis-ease-default);
250
- --osdk-filter-range-inputs-gap: calc(var(--osdk-surface-spacing) * 2);
248
+ --osdk-filter-range-inputs-gap: calc(var(--osdk-surface-spacing) * 0.5);
251
249
  --osdk-filter-range-input-wrapper-gap: var(--osdk-surface-spacing);
252
- --osdk-filter-range-label-font-family: var(
253
- --osdk-typography-family-default
254
- );
250
+ --osdk-filter-range-label-font-family: var(--osdk-typography-family-default);
255
251
  --osdk-filter-range-label-font-size: var(--osdk-typography-size-body-small);
256
252
  --osdk-filter-range-label-color: var(--osdk-typography-color-muted);
257
253
  --osdk-filter-range-separator-color: var(--osdk-typography-color-muted);
@@ -286,7 +282,7 @@
286
282
  /* Null Value Wrapper Tokens */
287
283
  --osdk-filter-null-wrapper-gap: var(--osdk-surface-spacing);
288
284
  --osdk-filter-null-row-padding: calc(var(--osdk-surface-spacing) * 1) 0;
289
- --osdk-filter-null-row-border-top: var(--osdk-surface-border);
285
+ --osdk-filter-null-row-border-top: none;
290
286
  --osdk-filter-null-label-gap: var(--osdk-surface-spacing);
291
287
  --osdk-filter-null-label-font-family: var(--osdk-typography-family-default);
292
288
  --osdk-filter-null-label-font-size: var(--osdk-typography-size-body-medium);
@@ -310,12 +306,10 @@
310
306
  /* Single Select Tokens */
311
307
  --osdk-filter-select-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
312
308
  --osdk-filter-select-clear-color: var(--osdk-typography-color-muted);
313
- --osdk-filter-select-clear-border-radius: var(
314
- --osdk-surface-border-radius
315
- );
309
+ --osdk-filter-select-clear-border-radius: var(--osdk-surface-border-radius);
316
310
  --osdk-filter-select-clear-transition: var(
317
- --osdk-emphasis-transition-duration
318
- )
311
+ --osdk-emphasis-transition-duration
312
+ )
319
313
  var(--osdk-emphasis-ease-default);
320
314
  --osdk-filter-select-clear-color-hover: var(
321
315
  --osdk-typography-color-default-rest
@@ -325,12 +319,19 @@
325
319
  /* Text Tags Tokens */
326
320
  --osdk-filter-texttags-gap: var(--osdk-surface-spacing);
327
321
 
322
+ /* Listogram View All */
323
+ --osdk-filter-listogram-view-all-font-size: var(
324
+ --osdk-typography-size-body-small
325
+ );
326
+ --osdk-filter-listogram-view-all-color: var(--osdk-typography-color-muted);
327
+
328
328
  /* Listogram Selected Color */
329
329
  --osdk-filter-listogram-selected-color: var(--osdk-intent-primary-rest);
330
330
 
331
331
  /* Filter Item */
332
332
  --osdk-filter-item-border-radius: var(--osdk-surface-border-radius);
333
- --osdk-filter-item-padding: calc(var(--osdk-surface-spacing) * 1.5);
333
+ --osdk-filter-item-padding: calc(var(--osdk-surface-spacing) * 3)
334
+ calc(var(--osdk-surface-spacing) * 3);
334
335
 
335
336
  /* Checkbox Row Hover */
336
337
  --osdk-filter-checkbox-row-bg-hover: var(
@@ -358,12 +359,20 @@
358
359
  --osdk-filter-item-exclude-dropdown-color: var(
359
360
  --osdk-typography-color-default-rest
360
361
  );
362
+ --osdk-filter-item-exclude-dropdown-trigger-color: var(
363
+ --osdk-intent-primary-rest
364
+ );
365
+ --osdk-filter-item-exclude-dropdown-trigger-border-radius: var(
366
+ --osdk-surface-border-radius
367
+ );
361
368
  --osdk-filter-item-exclude-dropdown-separator-color: var(
362
369
  --osdk-surface-border-color
363
370
  );
364
371
 
365
372
  /* Exclude Dropdown Popup */
366
- --osdk-filter-item-exclude-dropdown-min-width: calc(var(--osdk-surface-spacing) * 30);
373
+ --osdk-filter-item-exclude-dropdown-min-width: calc(
374
+ var(--osdk-surface-spacing) * 30
375
+ );
367
376
 
368
377
  /* Overflow / Dropdown Menu */
369
378
  --osdk-filter-item-menu-bg: var(--osdk-background-primary);
@@ -379,13 +388,9 @@
379
388
  --osdk-filter-item-menu-item-font-size: var(
380
389
  --osdk-typography-size-body-small
381
390
  );
382
- --osdk-filter-item-menu-item-color: var(
383
- --osdk-typography-color-default-rest
384
- );
391
+ --osdk-filter-item-menu-item-color: var(--osdk-typography-color-default-rest);
385
392
  --osdk-filter-item-menu-item-bg-hover: var(--osdk-custom-color-gray-1);
386
- --osdk-filter-item-menu-item-border-radius: var(
387
- --osdk-surface-border-radius
388
- );
393
+ --osdk-filter-item-menu-item-border-radius: var(--osdk-surface-border-radius);
389
394
  --osdk-filter-item-menu-separator-color: var(--osdk-surface-border-color);
390
395
  --osdk-filter-item-menu-check-size: calc(var(--osdk-surface-spacing) * 3);
391
396