@osdk/react-components-styles 0.2.0-beta.27 → 0.2.0-beta.28
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 +7 -0
- package/README.md +30 -0
- package/package.json +1 -1
- package/src/tokens/filter-list.css +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @osdk/react-components-styles
|
|
2
2
|
|
|
3
|
+
## 0.2.0-beta.28
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
|
|
8
|
+
- 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
|
|
9
|
+
|
|
3
10
|
## 0.2.0-beta.27
|
|
4
11
|
|
|
5
12
|
## 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
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
--osdk-filter-listogram-bar-border-radius: var(
|
|
222
222
|
--osdk-surface-border-radius
|
|
223
223
|
);
|
|
224
|
-
--osdk-filter-listogram-bar-color: var(--osdk-
|
|
224
|
+
--osdk-filter-listogram-bar-color: var(--osdk-intent-primary-rest);
|
|
225
225
|
--osdk-filter-listogram-bar-fill-transition: var(
|
|
226
226
|
--osdk-emphasis-transition-duration
|
|
227
227
|
)
|