@eos-ui/tokens 0.3.0 → 0.5.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 +13 -13
- package/dist/generated/defaults.js +1 -1
- package/package.json +1 -1
- package/src/tokens.json +1 -1
package/README.md
CHANGED
|
@@ -20,23 +20,23 @@ theme.apply(document.documentElement); // or set them in the browser
|
|
|
20
20
|
@import "@eos-ui/tokens/tokens.css";
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
All variables are prefixed `--e-` (`--e-primary`, `--e-space-4`). Documentation
|
|
23
|
+
All variables are prefixed `--e-` (`--e-primary`, `--e-space-4`). [Documentation](https://eos.dame.gg). MIT licensed.
|
|
24
24
|
|
|
25
25
|
## Inputs
|
|
26
26
|
|
|
27
27
|
`defineTheme()` takes 16 inputs and emits every token. Any token can also be set by name in `tokens`, which wins over everything derived. `name` labels the theme (`data-e-theme`), and `strict` throws on a contrast failure instead of listing it in `issues`.
|
|
28
28
|
|
|
29
|
-
| Input | Derives
|
|
30
|
-
| ------------------------------------------------------ |
|
|
31
|
-
| `brand`, `accent` | `primary`, `secondary`, their tints and `surface-tint`
|
|
32
|
-
| `danger`, `warning` | `danger`, `on-danger`, `danger-soft`; `warning-strong`, `warning-soft`
|
|
33
|
-
| `background`, `surface`, `foreground` | the grounds, `ink`, `muted`, `border`, `border-strong`; a dark surface lifts the action colours
|
|
34
|
-
| `fonts`, `radius` | `font-sans`, `font-mono`; `radius-sm` to `radius-lg`
|
|
35
|
-
| `textScale`, `spaceScale` | `text-xs` to `text-4xl`; `space-1` to `space-8` (1 is the default)
|
|
36
|
-
| `strokes` `{ hair, focus, edge, card }` | `stroke-hair`, `stroke-card`, `stroke-edge`, `stroke-focus`, `focus-gap`, `focus-gap-field`
|
|
37
|
-
| `contrast` `"standard"
|
|
38
|
-
| `motion` `"default" \| "snappy" \| "gentle" \| "none"` | `duration-tap`, `duration-move`, `easing-out`
|
|
39
|
-
| `elevation` `"outline" \| "lifted" \| "bold"` | `edge`, `well`, `float`; shadow tint follows `background`
|
|
40
|
-
| `controlHeight` | `control-height`, `chip-height`
|
|
29
|
+
| Input | Derives |
|
|
30
|
+
| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| `brand`, `accent` | `primary`, `secondary`, their tints and `surface-tint` |
|
|
32
|
+
| `danger`, `warning` | `danger`, `on-danger`, `danger-soft`; `warning-strong`, `warning-soft` |
|
|
33
|
+
| `background`, `surface`, `foreground` | the grounds, `ink`, `muted`, `border`, `border-strong`; a dark surface lifts the action colours |
|
|
34
|
+
| `fonts`, `radius` | `font-sans`, `font-mono`; `radius-sm` to `radius-lg` |
|
|
35
|
+
| `textScale`, `spaceScale` | `text-xs` to `text-4xl`; `space-1` to `space-8` (1 is the default) |
|
|
36
|
+
| `strokes` `{ hair, focus, edge, card }` | `stroke-hair`, `stroke-card`, `stroke-edge`, `stroke-focus`, `focus-gap`, `focus-gap-field` |
|
|
37
|
+
| `contrast` `"standard" \| "high"` | `high`: `border`, `border-strong` = `ink`; `muted` at 15:1; neutral `surface-tint`; darker `scrim` |
|
|
38
|
+
| `motion` `"default" \| "snappy" \| "gentle" \| "none"` | `duration-tap`, `duration-move`, `easing-out` |
|
|
39
|
+
| `elevation` `"outline" \| "lifted" \| "bold"` | `edge`, `well`, `float`; shadow tint follows `background` |
|
|
40
|
+
| `controlHeight` | `control-height`, `chip-height` |
|
|
41
41
|
|
|
42
42
|
`derivedFrom`, `constants` and `inputTokens` say which input drives each token and which tokens are fixed. Fixed tokens include `depth`, the thickness of a raised or pressed edge.
|
|
@@ -203,7 +203,7 @@ export const usage = {
|
|
|
203
203
|
"space-8": "Section padding.",
|
|
204
204
|
"radius-sm": "Stamps and tags.",
|
|
205
205
|
"radius-md": "Buttons, inputs, cards, notices.",
|
|
206
|
-
"radius-lg": "Dialogs.",
|
|
206
|
+
"radius-lg": "Large custom surfaces. Dialogs and drawers use `radius-md`, like cards, so one corner setting rounds everything alike.",
|
|
207
207
|
"radius-pill": "Chips and round buttons, echoing the logo's round caps.",
|
|
208
208
|
"edge": "The flat outline of everything that is not clickable: cards, summaries, the SearchBar. A 1px `border` ring (3.4:1 on white), no depth.",
|
|
209
209
|
"well": "Inputs, meters and empty slots pressed into the page.",
|
package/package.json
CHANGED
package/src/tokens.json
CHANGED