@gov-components/design-tokens 1.0.4 → 1.0.6
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 +6 -24
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -8,34 +8,16 @@ Design token reference for government e-services.
|
|
|
8
8
|
npm install @gov-components/design-tokens
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## ⚡️ Usage
|
|
12
|
-
|
|
13
|
-
To improve initial page load performance, import only the core tokens (Tier 1) in your root layout, and lazy load foundations if needed.
|
|
14
|
-
|
|
15
|
-
```css
|
|
16
|
-
/* In your global CSS or root styles */
|
|
17
|
-
@import "@gov-components/design-tokens/dist/tokens-core.css"; /* Critical only (Fast) */
|
|
18
|
-
@import "@gov-components/design-tokens/dist/typography.css";
|
|
19
|
-
/* map your tailwind classes here */
|
|
20
|
-
@tailwind base;
|
|
21
|
-
@tailwind components;
|
|
22
|
-
@tailwind utilities;
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## 📦 Usage (Full Bundle - Backward Compatible)
|
|
11
|
+
## ⚡️ Usage
|
|
26
12
|
|
|
27
|
-
|
|
13
|
+
Simply import the package in your main CSS or root layout file. This single import includes all design tokens, Tailwind 4 configuration, and typography styles.
|
|
28
14
|
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
@import "@gov-components/design-tokens
|
|
32
|
-
|
|
15
|
+
```tsx
|
|
16
|
+
// In your root layout or main CSS file
|
|
17
|
+
@import "@gov-components/design-tokens";
|
|
18
|
+
// That's it! All Tailwind classes and variables are now available.
|
|
33
19
|
```
|
|
34
20
|
|
|
35
|
-
You can also configure Tailwind CSS to use these tokens (see main project documentation).
|
|
36
|
-
|
|
37
|
-
---
|
|
38
|
-
|
|
39
21
|
## Table of Contents
|
|
40
22
|
|
|
41
23
|
- [Colors](#colors)
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gov-components/design-tokens",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "Design tokens (Colors, Typography, Spacing) for GOV Components",
|
|
5
|
-
"main": "
|
|
6
|
-
"style": "
|
|
5
|
+
"main": "tailwind.css",
|
|
6
|
+
"style": "tailwind.css",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
9
|
"tailwind.css"
|
|
10
10
|
],
|
|
11
11
|
"exports": {
|
|
12
|
-
".": "./
|
|
12
|
+
".": "./tailwind.css",
|
|
13
13
|
"./tokens.css": "./dist/tokens.css",
|
|
14
14
|
"./tokens-core.css": "./dist/tokens-core.css",
|
|
15
15
|
"./tokens-foundations.css": "./dist/tokens-foundations.css",
|