@imfusion/web-ui 0.8.1-dev.24.g9696b36f → 0.8.1-dev.25.g85d685b9
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/package.json
CHANGED
|
@@ -7,6 +7,8 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
|
|
|
7
7
|
- Use CSS Modules with native nesting. Do not add Sass, CSS-in-JS, or a utility-class framework for ordinary component
|
|
8
8
|
styles.
|
|
9
9
|
- Nest states, pseudo-elements, and child selectors under the root.
|
|
10
|
+
- Write declarations before nested rules; browsers before Chrome 130, Firefox 132, and Safari 18 move later ones above them.
|
|
11
|
+
- Do not nest under a selector list whose selectors differ in specificity. The nested rule takes the highest one.
|
|
10
12
|
- Lift repeated values into custom properties, especially when a state or variant changes several descendants.
|
|
11
13
|
- Keep structurally different rules explicit; not every repeated value needs an abstraction.
|
|
12
14
|
|
|
@@ -85,8 +87,8 @@ Foreground roles are for text, icons, borders, and focus rings. Background roles
|
|
|
85
87
|
|
|
86
88
|
## Browser floor
|
|
87
89
|
|
|
88
|
-
The library targets Safari
|
|
89
|
-
guarded fallback for older Safari:
|
|
90
|
+
The library targets Safari 17.5, Chrome 123, and Firefox 120 or newer, the first versions with native `light-dark()`.
|
|
91
|
+
`color-mix(in oklch, …)` is available at that floor. Relative color syntax needs a guarded fallback for older Safari:
|
|
90
92
|
|
|
91
93
|
```css
|
|
92
94
|
.subtle {
|
package/src/llms/tokens.gen.json
CHANGED
|
@@ -715,7 +715,7 @@
|
|
|
715
715
|
},
|
|
716
716
|
{
|
|
717
717
|
"name": "--imf-ui-inner-shadow-highlight",
|
|
718
|
-
"value": "inset calc(-0.5px * var(--imf-ui-shadow-x)) calc(-0.5px * var(--imf-ui-shadow-y)) 0 0 #fff, inset calc( 0.5px * var(--imf-ui-shadow-x)) calc( 0.5px * var(--imf-ui-shadow-y)) 0 0 #0001"
|
|
718
|
+
"value": "inset calc(-0.5px * var(--imf-ui-shadow-x)) calc(-0.5px * var(--imf-ui-shadow-y)) 0 0 light-dark(#fff, #fff1), inset calc( 0.5px * var(--imf-ui-shadow-x)) calc( 0.5px * var(--imf-ui-shadow-y)) 0 0 light-dark(#0001, #0007)"
|
|
719
719
|
},
|
|
720
720
|
{
|
|
721
721
|
"name": "--imf-ui-inner-shadow-tint",
|