@klodd/ds 5.15.2 → 5.15.4
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/base/ambient.css +46 -0
- package/css/components/nav.css +21 -5
- package/css/index.css +1 -0
- 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.
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
Ambient glow - page-level decoration för glaseffekten
|
|
3
|
+
Aktiveras via .has-ambient-glow på <body>.
|
|
4
|
+
Ger backdrop-filter natt att arbeta med på mobil bar-mode.
|
|
5
|
+
|
|
6
|
+
Värden:
|
|
7
|
+
- 80vw bredd: bred nog att ge ett mjukt ljusfält utan spotlight-känsla
|
|
8
|
+
- 45vh höjd: sträcker sig upp bakom kortlistan utan att dominera
|
|
9
|
+
- accent-a6: måttlig mättnad i centrum (Radix steg 6 = subtil border-emphasis-alpha)
|
|
10
|
+
- accent-a3: yttre glow-toning nedtonat (Radix steg 3 = vila-tint)
|
|
11
|
+
- bottom: -10%: centrerar glöden strax under viewport-kanten så
|
|
12
|
+
den mättar under pillen snarare än rakt bakom den
|
|
13
|
+
================================================================ */
|
|
14
|
+
|
|
15
|
+
@media (max-width: 720px) {
|
|
16
|
+
.has-ambient-glow::before {
|
|
17
|
+
content: '';
|
|
18
|
+
position: fixed;
|
|
19
|
+
bottom: -10%;
|
|
20
|
+
left: 50%;
|
|
21
|
+
transform: translateX(-50%);
|
|
22
|
+
width: 80vw;
|
|
23
|
+
height: 45vh;
|
|
24
|
+
background: radial-gradient(
|
|
25
|
+
ellipse at center bottom,
|
|
26
|
+
var(--accent-a6) 0%,
|
|
27
|
+
var(--accent-a3) 40%,
|
|
28
|
+
transparent 70%
|
|
29
|
+
);
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
z-index: 0;
|
|
32
|
+
/* Säkerställ att glöden ligger UNDER allt innehåll
|
|
33
|
+
men ÖVER page-bakgrunden */
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Dark mode only - light mode behöver ingen ambient glow */
|
|
38
|
+
@media (max-width: 720px) and (prefers-color-scheme: light) {
|
|
39
|
+
.has-ambient-glow::before {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-theme="light"] .has-ambient-glow::before {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
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
|
|
package/css/index.css
CHANGED
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
@import url('base/pwa.css') layer(klodd.base);
|
|
46
46
|
@import url('base/typography.css') layer(klodd.base);
|
|
47
47
|
@import url('base/layout.css') layer(klodd.base);
|
|
48
|
+
@import url('base/ambient.css') layer(klodd.base);
|
|
48
49
|
@import url('base/interactions.css') layer(klodd.base);
|
|
49
50
|
|
|
50
51
|
/* Komponenter */
|