@awc-ui/tokens 1.0.0-beta → 1.0.0-beta.10
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 +60 -0
- package/package.json +15 -3
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# @awc-ui/tokens
|
|
2
|
+
|
|
3
|
+
Framework-agnostic Material Design 3 design tokens for
|
|
4
|
+
[AWC UI](https://awc-ui.dev), published as CSS custom properties. The package
|
|
5
|
+
contains the default light and dark color schemes, typography, elevation,
|
|
6
|
+
motion, shape, state, and component tokens used by `@awc-ui/core`.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @awc-ui/tokens
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Use
|
|
15
|
+
|
|
16
|
+
Import the token sheet once from your application entry:
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import "@awc-ui/tokens/tokens.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Or link it directly in a plain HTML project:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<link rel="stylesheet" href="./node_modules/@awc-ui/tokens/src/tokens.css" />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
The tokens inherit through Shadow DOM, so the same stylesheet themes AWC UI
|
|
29
|
+
Web Components and your application CSS:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
.product-card {
|
|
33
|
+
color: var(--md-sys-color-on-surface);
|
|
34
|
+
background: var(--md-sys-color-surface-container);
|
|
35
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Dark mode
|
|
40
|
+
|
|
41
|
+
Set one attribute on the document or any subtree:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<html data-theme="dark"></html>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
See the [theming guide](https://awc-ui.dev/theming/overview/), the complete
|
|
48
|
+
[token reference](https://awc-ui.dev/theming/tokens/), and the interactive
|
|
49
|
+
[Material Design 3 theme generator](https://awc-ui.dev/theme-generator/).
|
|
50
|
+
|
|
51
|
+
## Related packages
|
|
52
|
+
|
|
53
|
+
- [`@awc-ui/core`](https://www.npmjs.com/package/@awc-ui/core) — accessible
|
|
54
|
+
Material Design 3 Web Components.
|
|
55
|
+
- [`@awc-ui/theme`](https://www.npmjs.com/package/@awc-ui/theme) — generate
|
|
56
|
+
light and dark token sets from brand seed colors.
|
|
57
|
+
|
|
58
|
+
## License
|
|
59
|
+
|
|
60
|
+
[MIT](./LICENSE) © AWC UI contributors
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awc-ui/tokens",
|
|
3
|
-
"version": "1.0.0-beta",
|
|
4
|
-
"description": "Material Design 3 design tokens as CSS custom properties",
|
|
3
|
+
"version": "1.0.0-beta.10",
|
|
4
|
+
"description": "Material Design 3 design tokens for AWC UI as framework-agnostic CSS custom properties with light and dark themes",
|
|
5
5
|
"main": "src/tokens.css",
|
|
6
6
|
"style": "src/tokens.css",
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"**/*.css"
|
|
9
|
+
],
|
|
7
10
|
"exports": {
|
|
8
11
|
".": "./src/tokens.css",
|
|
9
12
|
"./tokens.css": "./src/tokens.css"
|
|
@@ -14,9 +17,18 @@
|
|
|
14
17
|
],
|
|
15
18
|
"keywords": [
|
|
16
19
|
"material-design",
|
|
20
|
+
"material-design-3",
|
|
21
|
+
"material-3",
|
|
17
22
|
"md3",
|
|
18
23
|
"design-tokens",
|
|
19
|
-
"css-variables"
|
|
24
|
+
"css-variables",
|
|
25
|
+
"css-custom-properties",
|
|
26
|
+
"css",
|
|
27
|
+
"design-system",
|
|
28
|
+
"theming",
|
|
29
|
+
"dark-mode",
|
|
30
|
+
"color-tokens",
|
|
31
|
+
"web-components"
|
|
20
32
|
],
|
|
21
33
|
"license": "MIT",
|
|
22
34
|
"author": "AWC UI",
|