@dorsk/tsumikit 0.9.5 → 0.9.6
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.
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
tap = false,
|
|
20
20
|
as = 'div',
|
|
21
21
|
padding = 'md',
|
|
22
|
+
surface = 'base',
|
|
22
23
|
stacked = false,
|
|
23
24
|
stackTone = 'neutral',
|
|
24
25
|
stackY = 8,
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
tap?: boolean;
|
|
32
33
|
as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
|
|
33
34
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
35
|
+
surface?: 'base' | 'raised' | 'sunken';
|
|
34
36
|
stacked?: boolean;
|
|
35
37
|
stackTone?: Tone;
|
|
36
38
|
stackY?: number;
|
|
@@ -53,6 +55,8 @@
|
|
|
53
55
|
class:pad-none={padding === 'none'}
|
|
54
56
|
class:pad-sm={padding === 'sm'}
|
|
55
57
|
class:pad-lg={padding === 'lg'}
|
|
58
|
+
class:surface-raised={surface === 'raised'}
|
|
59
|
+
class:surface-sunken={surface === 'sunken'}
|
|
56
60
|
class:card-tap={tap}
|
|
57
61
|
class:card-stacked={stacked}
|
|
58
62
|
class:stack-ok={stacked && stackTone === 'ok'}
|
|
@@ -72,6 +76,15 @@
|
|
|
72
76
|
border-radius: var(--r-lg);
|
|
73
77
|
padding: var(--sp-4);
|
|
74
78
|
}
|
|
79
|
+
/* Theme-aware surface shade, selected by prop so it adapts across themes
|
|
80
|
+
instead of being overridden with app-level :global hacks. `base` is the
|
|
81
|
+
default (.card already paints --bg-elevated). */
|
|
82
|
+
.surface-raised {
|
|
83
|
+
background: var(--surface);
|
|
84
|
+
}
|
|
85
|
+
.surface-sunken {
|
|
86
|
+
background: var(--bg-elevated-2);
|
|
87
|
+
}
|
|
75
88
|
.pad-none {
|
|
76
89
|
padding: 0;
|
|
77
90
|
}
|
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
tone = 'neutral',
|
|
23
23
|
// Tint the value itself with the tone (not just the chip).
|
|
24
24
|
tintValue = false,
|
|
25
|
+
// Theme-aware surface shade, forwarded to the composed Card so tiles can
|
|
26
|
+
// opt into the same shade as sibling panels (no app-level :global override).
|
|
27
|
+
surface = 'base',
|
|
25
28
|
class: klass = '',
|
|
26
29
|
// Raw SVG markup for a custom icon — passed through to `Icon` so any glyph
|
|
27
30
|
// outside the registry can fill the chip.
|
|
@@ -35,6 +38,7 @@
|
|
|
35
38
|
icon?: IconName;
|
|
36
39
|
tone?: Tone;
|
|
37
40
|
tintValue?: boolean;
|
|
41
|
+
surface?: 'base' | 'raised' | 'sunken';
|
|
38
42
|
class?: string;
|
|
39
43
|
iconChildren?: Snippet;
|
|
40
44
|
[key: string]: unknown;
|
|
@@ -44,6 +48,7 @@
|
|
|
44
48
|
<Card
|
|
45
49
|
data-tsu="Metric"
|
|
46
50
|
class="metric metric-{tone} {tintValue ? 'metric-tint' : ''} {klass}"
|
|
51
|
+
{surface}
|
|
47
52
|
{...rest}
|
|
48
53
|
>
|
|
49
54
|
<div class="metric-head">
|
package/package.json
CHANGED