@patternmode/status 0.2.2 → 0.3.1
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/README.md +24 -0
- package/dist/styles.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -27,3 +27,27 @@ zero progress.
|
|
|
27
27
|
The default `variant="fill"` renders a filled progress mark. Use
|
|
28
28
|
`variant="border"` for an outline progress arc. `color` controls active progress,
|
|
29
29
|
while `trackColor` controls inactive and placeholder structure.
|
|
30
|
+
|
|
31
|
+
## Theming
|
|
32
|
+
|
|
33
|
+
The mark reads its colours from the standard shadcn theme variables — `--ring`
|
|
34
|
+
for `tone="accent"`, `--muted-foreground` for `tone="muted"` — and falls back to
|
|
35
|
+
built-in defaults when the host defines neither.
|
|
36
|
+
|
|
37
|
+
The inactive track is derived: it is the active colour tinted 12% toward the
|
|
38
|
+
ground the mark sits on. That ground is `--patternmode-status-surface`, which
|
|
39
|
+
resolves from `--background` and falls back to `white`.
|
|
40
|
+
|
|
41
|
+
A themed UI therefore needs no wiring in either light or dark mode. Set the
|
|
42
|
+
property yourself when the host has no `--background`, or when a mark sits on a
|
|
43
|
+
raised surface rather than the canvas:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
.panel .patternmode-status-mark {
|
|
47
|
+
--patternmode-status-surface: var(--card);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The track must stay quieter than the arc, so it has to be tinted toward the
|
|
52
|
+
surface behind it — a track tinted toward white on a dark ground outshines the
|
|
53
|
+
arc and every mark reads full. `trackColor` still overrides this per instance.
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.patternmode-status-mark{--patternmode-status-size:2rem;--patternmode-status-color:oklch(29% .018 92);--patternmode-status-track:oklch(
|
|
1
|
+
@layer components{.patternmode-status-mark{--patternmode-status-size:2rem;--patternmode-status-color:oklch(29% .018 92);--patternmode-status-surface:var(--background,white);--patternmode-status-track:color-mix(in oklch, var(--patternmode-status-color) 12%, var(--patternmode-status-surface));color:var(--patternmode-status-color);height:var(--patternmode-status-size);vertical-align:middle;width:var(--patternmode-status-size);justify-content:center;align-items:center;line-height:0;display:inline-flex;position:relative}.patternmode-status-mark[data-tone=accent]{--patternmode-status-color:var(--ring,#315c4b)}.patternmode-status-mark[data-tone=muted]{--patternmode-status-color:var(--muted-foreground,#77756d)}.patternmode-status-mark__svg{width:100%;height:100%;display:block;overflow:visible}.patternmode-status-mark__track,.patternmode-status-mark__arc{stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px}.patternmode-status-mark__disc{fill:var(--patternmode-status-track)}.patternmode-status-mark__fill-sweep{fill:currentColor}.patternmode-status-mark__track{fill:none;stroke:var(--patternmode-status-track)}.patternmode-status-mark__track--null{stroke-dasharray:2 2.5}.patternmode-status-mark__arc{stroke:currentColor;transform-origin:12px 12px;transform:rotate(-90deg)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternmode/status",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Animated discrete status marks for Patternmode interfaces.",
|
|
6
6
|
"keywords": [
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"motion": "^12.40.0",
|
|
46
|
-
"@howells/motion": "0.
|
|
47
|
-
"@patternmode/system": "0.
|
|
46
|
+
"@howells/motion": "0.2.0",
|
|
47
|
+
"@patternmode/system": "0.5.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@howells/lint": "^0.5.0",
|