@klodd/ds 5.15.2 → 5.15.3
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/css/10-semantic.css +1 -1
- package/css/components/nav.css +21 -5
- package/package.json +1 -1
package/css/10-semantic.css
CHANGED
|
@@ -248,7 +248,7 @@
|
|
|
248
248
|
/* Glass-tokens: semi-transparenta ytor för backdrop-blur-navigation.
|
|
249
249
|
Konsumeras av .bottom-nav. Kalibrerade mot Blue-1 (Jubb) och Plum-1 (Ekonom).
|
|
250
250
|
--glass-bg-fallback används av @supports-grenen (browsers utan backdrop-filter). */
|
|
251
|
-
--glass-bg: color-mix(in oklch, var(--surface-raised)
|
|
251
|
+
--glass-bg: color-mix(in oklch, var(--surface-raised) 55%, transparent);
|
|
252
252
|
--glass-bg-fallback: color-mix(in oklch, var(--surface-raised) 96%, transparent);
|
|
253
253
|
|
|
254
254
|
/* Grafpalett - for diagram och visualiseringar.
|
package/css/components/nav.css
CHANGED
|
@@ -52,16 +52,32 @@
|
|
|
52
52
|
|
|
53
53
|
@supports (backdrop-filter: blur(1px)) {
|
|
54
54
|
.bottom-nav {
|
|
55
|
-
/* Safari iOS: position:fixed + backdrop-filter skapar ny stacking context.
|
|
56
|
-
z-index: var(--z-nav) bibehålls korrekt men rubber-band-scroll behöver
|
|
57
|
-
verifieras på fysisk enhet. */
|
|
58
55
|
/* Safari iOS: will-change: transform tvingar elementet till eget
|
|
59
56
|
GPU compositing layer. Förhindrar att backdrop-filter rivs loss
|
|
60
57
|
under rubber-band-scroll vilket ger en glitch-flash. */
|
|
61
58
|
will-change: transform;
|
|
62
59
|
background: var(--glass-bg);
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
/* saturate(160%) boostar bakgrundsfärger genom glaset - iOS-likt
|
|
61
|
+
levande material. blur(10px) ger lagom diffusion. */
|
|
62
|
+
backdrop-filter: blur(10px) saturate(160%);
|
|
63
|
+
-webkit-backdrop-filter: blur(10px) saturate(160%);
|
|
64
|
+
/* Inset highlight: ljusreflex längs överkanten ger glasets
|
|
65
|
+
materialitet och känsla av tjocklek. */
|
|
66
|
+
box-shadow: inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Respektera OS-inställning för reducerad transparens.
|
|
70
|
+
iOS: Settings > Accessibility > Display > Reduce Transparency
|
|
71
|
+
macOS: System Settings > Accessibility > Display > Reduce transparency
|
|
72
|
+
Nested inom @supports = ingen !important behövs (samma specificity,
|
|
73
|
+
senare i kaskaden vinner). */
|
|
74
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
75
|
+
.bottom-nav {
|
|
76
|
+
background: var(--surface-raised);
|
|
77
|
+
backdrop-filter: none;
|
|
78
|
+
-webkit-backdrop-filter: none;
|
|
79
|
+
box-shadow: none;
|
|
80
|
+
}
|
|
65
81
|
}
|
|
66
82
|
}
|
|
67
83
|
|