@arun-dev/tokens 0.2.0 → 0.3.0
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 +12 -0
- package/package.json +1 -1
- package/src/components/switch.css +21 -0
- package/src/components.css +1 -0
package/README.md
CHANGED
|
@@ -74,6 +74,18 @@ writeFileSync(
|
|
|
74
74
|
);
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
+
### Output stability
|
|
78
|
+
|
|
79
|
+
`createBrand()` is pure and deterministic: the same `seed` (or the same `palette`) always
|
|
80
|
+
produces byte-identical CSS. It uses no randomness, no clock and nothing from the environment,
|
|
81
|
+
and `name` affects only a comment in the output.
|
|
82
|
+
|
|
83
|
+
That is a contract, not an implementation detail. Brand generation is normally a one-time
|
|
84
|
+
step whose result is committed, so **a change to the palette algorithm restyles every consumer
|
|
85
|
+
the moment they upgrade** — even though nothing in their code changed. Treat such a change as
|
|
86
|
+
breaking regardless of what the version number would otherwise suggest, and say so in the
|
|
87
|
+
changeset.
|
|
88
|
+
|
|
77
89
|
## `BrandSemanticContract`
|
|
78
90
|
|
|
79
91
|
The TypeScript type `BrandSemanticContract` (exported from `./createBrand`) lists every semantic
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arun-dev/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Pure-CSS design tokens with white-label brand generation — primitives, brand palettes, semantic layers, and the createBrand() generator",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* Switch component tokens — map semantic tokens onto the switch's styleable surfaces.
|
|
2
|
+
Override any of these to restyle switches without moving other components. */
|
|
3
|
+
:root {
|
|
4
|
+
/* Track */
|
|
5
|
+
--switch-track-inline-size: 2.25rem;
|
|
6
|
+
--switch-track-block-size: 1.25rem;
|
|
7
|
+
--switch-track-radius: var(--radius-full);
|
|
8
|
+
--switch-track-bg: var(--color-bg-secondary);
|
|
9
|
+
--switch-track-bg-checked: var(--color-text-accent);
|
|
10
|
+
--switch-track-border-color: var(--color-border-default);
|
|
11
|
+
--switch-track-border-width: var(--space-px);
|
|
12
|
+
|
|
13
|
+
/* Thumb */
|
|
14
|
+
--switch-thumb-size: 0.875rem;
|
|
15
|
+
--switch-thumb-bg: var(--color-bg-primary);
|
|
16
|
+
--switch-thumb-inset: var(--space-2px);
|
|
17
|
+
--switch-thumb-shadow: var(--shadow-sm);
|
|
18
|
+
|
|
19
|
+
--switch-disabled-opacity: 0.5;
|
|
20
|
+
--switch-duration: var(--duration-fast);
|
|
21
|
+
}
|
package/src/components.css
CHANGED