@bug-on/md3-tokens 0.1.0 → 1.0.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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +11 -0
- package/README.md +62 -0
- package/package.json +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @bug-on/md3-tokens@
|
|
2
|
+
> @bug-on/md3-tokens@1.0.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/tokens
|
|
3
3
|
> tsup
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
[34mCJS[39m Build start
|
|
13
13
|
[32mESM[39m [1mdist/index.mjs [22m[32m937.00 B[39m
|
|
14
14
|
[32mESM[39m [1mdist/index.mjs.map [22m[32m2.15 KB[39m
|
|
15
|
-
[32mESM[39m ⚡️ Build success in
|
|
15
|
+
[32mESM[39m ⚡️ Build success in 41ms
|
|
16
16
|
[32mCJS[39m [1mdist/index.js [22m[32m2.00 KB[39m
|
|
17
17
|
[32mCJS[39m [1mdist/index.js.map [22m[32m2.30 KB[39m
|
|
18
|
-
[32mCJS[39m ⚡️ Build success in
|
|
18
|
+
[32mCJS[39m ⚡️ Build success in 40ms
|
|
19
19
|
[34mDTS[39m Build start
|
|
20
|
-
[32mDTS[39m ⚡️ Build success in
|
|
20
|
+
[32mDTS[39m ⚡️ Build success in 2137ms
|
|
21
21
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m3.11 KB[39m
|
|
22
22
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m3.11 KB[39m
|
package/CHANGELOG.md
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# @bug-on/md3-tokens
|
|
2
|
+
|
|
3
|
+
> Core Material Design 3 Expressive CSS Design Tokens.
|
|
4
|
+
|
|
5
|
+
This library provides all absolutely necessary design tokens required to enforce the Material Design 3 Expressive system in your project via raw CSS variables (Customer Properties).
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Installation
|
|
10
|
+
|
|
11
|
+
To install the package:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @bug-on/md3-tokens
|
|
15
|
+
# or
|
|
16
|
+
pnpm add @bug-on/md3-tokens
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 🛠️ Usage
|
|
22
|
+
|
|
23
|
+
This package acts purely as a stylesheet registry and contains no JavaScript application logic or React components.
|
|
24
|
+
|
|
25
|
+
To map the design tokens into your CSS tree, you simply need to import it into your application's global stylesheet (e.g., `globals.css`, `index.css`).
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
/* In your core App CSS */
|
|
29
|
+
@import "@bug-on/md3-tokens/index.css";
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Granular Imports
|
|
33
|
+
If you only wish to utilize an isolated sector of the design tokens (to avoid framework conflicts), you may import tokens granularly:
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
/* Only inject dynamic M3 color tokens */
|
|
37
|
+
@import "@bug-on/md3-tokens/colors.css";
|
|
38
|
+
|
|
39
|
+
/* Only inject shape variables */
|
|
40
|
+
@import "@bug-on/md3-tokens/shape.css";
|
|
41
|
+
|
|
42
|
+
/* Only inject elevation configuration */
|
|
43
|
+
@import "@bug-on/md3-tokens/elevation.css";
|
|
44
|
+
|
|
45
|
+
/* Only typography scaling sizes */
|
|
46
|
+
@import "@bug-on/md3-tokens/typography.css";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## 🎨 Token Architecture
|
|
52
|
+
|
|
53
|
+
This package exposes raw CSS Variables following Google's naming conventions:
|
|
54
|
+
- `--md-sys-color-primary`: Core action color
|
|
55
|
+
- `--md-sys-color-error`: Error signaling layer
|
|
56
|
+
- `--md-sys-shape-corner-extra-large`: Radius token
|
|
57
|
+
- `--md-sys-elevation-level3`: Dimensional shadowing logic
|
|
58
|
+
|
|
59
|
+
In most scenarios, a developer **SHOULD NEVER** manually type out these CSS variables. We strongly recommend using the **`@bug-on/md3-tailwind`** Plugin to automatically bridge these tokens into ready-to-use functional Tailwind CSS utility classes (e.g. converting it to `bg-m3-primary`).
|
|
60
|
+
|
|
61
|
+
## ⚖️ License
|
|
62
|
+
MIT
|