@klodd/ds 5.15.3 → 5.15.5
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/base/ambient.css +46 -0
- package/css/index.css +1 -0
- package/package.json +1 -1
- package/references/02-components.md +11 -0
|
@@ -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/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 */
|
package/package.json
CHANGED
|
@@ -455,6 +455,17 @@ Jubb och Ekonom foljer samma monster med sina egna tokens.
|
|
|
455
455
|
- **Egen .button-style.** Anvand `.btn` med modifier istallet.
|
|
456
456
|
- **`font-weight: 700`.** Anvand `--fw-medium` (500). Display-siffror ar dokumenterat undantag.
|
|
457
457
|
- **Anta att alla komponent-filer har ett root-block.** 17 av 37 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.
|
|
458
|
+
- **Conic-gradient-border (roterande glow-kant).** Mönstret
|
|
459
|
+
`background: linear-gradient(...), conic-gradient(...)` kombinerat med
|
|
460
|
+
`background-clip: border-box` (eller `padding-box, border-box`-tricket)
|
|
461
|
+
ger en animerad eller statisk glödande kant runt ett element.
|
|
462
|
+
Förbjudet av tre skäl: (1) kräver hårdkodade oklch/rgba-värden utanför
|
|
463
|
+
token-systemet, (2) GPU-intensivt - segar ner scroll och swipe på mobil,
|
|
464
|
+
(3) CC tenderar att återintroducera mönstret spontant - explicit förbud
|
|
465
|
+
förhindrar det. Alternativ: `border: 1px solid var(--border-default)`
|
|
466
|
+
eller `border-left: 2px solid var(--accent-9)` för accenterade kanter,
|
|
467
|
+
eller `box-shadow: inset var(--bw-medium) 0 0 0 var(--accent-9)` för
|
|
468
|
+
inset-stroke utan reflow.
|
|
458
469
|
|
|
459
470
|
|
|
460
471
|
## Tier D-undantagskatalog (sibling-blocks med dokumenterad rationale)
|