@hashicorp/design-system-tokens 2.2.2 → 2.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/CHANGELOG.md +10 -0
- package/RELEASE.md +40 -0
- package/dist/cloud-email/tokens.scss +4 -0
- package/dist/devdot/css/tokens.css +4 -0
- package/dist/docs/products/tokens.json +76 -0
- package/dist/marketing/css/tokens.css +4 -0
- package/dist/marketing/tokens.json +88 -0
- package/dist/products/css/tokens.css +4 -0
- package/package.json +12 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @hashicorp/design-system-tokens
|
|
2
2
|
|
|
3
|
+
## 2.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
Added global tokens for border radius
|
|
8
|
+
|
|
9
|
+
<small class="doc-whats-new-changelog-metadata">[#2595](https://github.com/hashicorp/design-system/pull/2595)</small>
|
|
10
|
+
|
|
11
|
+
<div class="doc-whats-new-changelog-separator"></div>
|
|
12
|
+
|
|
3
13
|
## 2.2.2
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/RELEASE.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# How to release
|
|
2
|
+
|
|
3
|
+
Whenever there is an update to the design tokens in Figma (e.g. a new color is added), these changes need to be transfered also to the code. This means updating the "source" token files, and re-generate "output" CSS/Sass/JS/JSON files and once these changes have been approved, release them as package to the npm registry.
|
|
4
|
+
|
|
5
|
+
Please see the instructions in the [CONTRIBUTING](CONTRIBUTING.md) file for more details about how to setup the project and make changes to the code for these packages.
|
|
6
|
+
|
|
7
|
+
## Bump and release
|
|
8
|
+
|
|
9
|
+
Follow the instructions for Changesets in the root [README](../../README.md).
|
|
10
|
+
|
|
11
|
+
🚨 **DON'T FORGET**:
|
|
12
|
+
|
|
13
|
+
You need to communicate to the product teams that are consuming the design tokens!
|
|
14
|
+
|
|
15
|
+
## Using a local NPM registry for testing
|
|
16
|
+
|
|
17
|
+
To test the release of packages without actually polluting the real/production npm registry, you can setup a local private registry using [Verdaccio](https://verdaccio.org/docs/what-is-verdaccio), an open source solution, very easy to setup and use.
|
|
18
|
+
|
|
19
|
+
You can follow [the instructions here](https://verdaccio.org/docs/installation), but essentially here is what you have to:
|
|
20
|
+
|
|
21
|
+
* install the package: `npm install -g verdaccio` - this will install it globally
|
|
22
|
+
* launch the service: `verdaccio` - this will serve a web frontend to the registry at the URL [http://localhost:4873/](http://localhost:4873/)
|
|
23
|
+
* add a user to the registry: `npm adduser --registry http://localhost:4873` - this will ask you for a username/password/email, I suggest you use test/test/test@test.com because is only a local instance. This will also authenticate you with the registry so you don't need to login when you publish.
|
|
24
|
+
|
|
25
|
+
Now you need to add this entry in the `package.json` file of the bundle you want to publish on your local registry:
|
|
26
|
+
|
|
27
|
+
```json
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"registry": "http://localhost:4873"
|
|
30
|
+
},
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
This will make sure the package is published on Verdaccio. Once the package is published, the web page will be available at at [http://localhost:4873/](http://localhost:4873/). It will show you all the packages' details, and if needed you can download the tarballs to check their content.
|
|
34
|
+
|
|
35
|
+
Once you've completed testing the package locally:
|
|
36
|
+
|
|
37
|
+
1. remove verdaccio via `npm uninstall -g verdaccio`
|
|
38
|
+
2. remove the files it created with `rm -fr ~/.local/share/verdaccio && rm -fr .config/verdaccio`
|
|
39
|
+
|
|
40
|
+
This same command can be used to cleanup the entire data storage of Verdaccio and start from scratch (no need to reinstall, only cleanup the data).
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
|
+
$token-border-radius-x-small: 3px;
|
|
5
|
+
$token-border-radius-small: 5px;
|
|
6
|
+
$token-border-radius-medium: 6px;
|
|
7
|
+
$token-border-radius-large: 8px;
|
|
4
8
|
$token-color-palette-blue-500: #1c345f;
|
|
5
9
|
$token-color-palette-blue-400: #0046d1;
|
|
6
10
|
$token-color-palette-blue-300: #0c56e9;
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
+
--token-border-radius-x-small: 3px;
|
|
7
|
+
--token-border-radius-small: 5px;
|
|
8
|
+
--token-border-radius-medium: 6px;
|
|
9
|
+
--token-border-radius-large: 8px;
|
|
6
10
|
--token-color-palette-blue-500: #1c345f;
|
|
7
11
|
--token-color-palette-blue-400: #0046d1;
|
|
8
12
|
--token-color-palette-blue-300: #0c56e9;
|
|
@@ -1,4 +1,80 @@
|
|
|
1
1
|
[
|
|
2
|
+
{
|
|
3
|
+
"value": "3px",
|
|
4
|
+
"type": "size",
|
|
5
|
+
"original": {
|
|
6
|
+
"value": "3",
|
|
7
|
+
"type": "size"
|
|
8
|
+
},
|
|
9
|
+
"name": "token-border-radius-x-small",
|
|
10
|
+
"attributes": {
|
|
11
|
+
"category": "border",
|
|
12
|
+
"type": "radius",
|
|
13
|
+
"item": "x-small"
|
|
14
|
+
},
|
|
15
|
+
"path": [
|
|
16
|
+
"border",
|
|
17
|
+
"radius",
|
|
18
|
+
"x-small"
|
|
19
|
+
]
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"value": "5px",
|
|
23
|
+
"type": "size",
|
|
24
|
+
"original": {
|
|
25
|
+
"value": "5",
|
|
26
|
+
"type": "size"
|
|
27
|
+
},
|
|
28
|
+
"name": "token-border-radius-small",
|
|
29
|
+
"attributes": {
|
|
30
|
+
"category": "border",
|
|
31
|
+
"type": "radius",
|
|
32
|
+
"item": "small"
|
|
33
|
+
},
|
|
34
|
+
"path": [
|
|
35
|
+
"border",
|
|
36
|
+
"radius",
|
|
37
|
+
"small"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"value": "6px",
|
|
42
|
+
"type": "size",
|
|
43
|
+
"original": {
|
|
44
|
+
"value": "6",
|
|
45
|
+
"type": "size"
|
|
46
|
+
},
|
|
47
|
+
"name": "token-border-radius-medium",
|
|
48
|
+
"attributes": {
|
|
49
|
+
"category": "border",
|
|
50
|
+
"type": "radius",
|
|
51
|
+
"item": "medium"
|
|
52
|
+
},
|
|
53
|
+
"path": [
|
|
54
|
+
"border",
|
|
55
|
+
"radius",
|
|
56
|
+
"medium"
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"value": "8px",
|
|
61
|
+
"type": "size",
|
|
62
|
+
"original": {
|
|
63
|
+
"value": "8",
|
|
64
|
+
"type": "size"
|
|
65
|
+
},
|
|
66
|
+
"name": "token-border-radius-large",
|
|
67
|
+
"attributes": {
|
|
68
|
+
"category": "border",
|
|
69
|
+
"type": "radius",
|
|
70
|
+
"item": "large"
|
|
71
|
+
},
|
|
72
|
+
"path": [
|
|
73
|
+
"border",
|
|
74
|
+
"radius",
|
|
75
|
+
"large"
|
|
76
|
+
]
|
|
77
|
+
},
|
|
2
78
|
{
|
|
3
79
|
"value": "#1c345f",
|
|
4
80
|
"type": "color",
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
+
--token-border-radius-x-small: 3px;
|
|
7
|
+
--token-border-radius-small: 5px;
|
|
8
|
+
--token-border-radius-medium: 6px;
|
|
9
|
+
--token-border-radius-large: 8px;
|
|
6
10
|
--token-color-palette-blue-500: #1c345f;
|
|
7
11
|
--token-color-palette-blue-400: #0046d1;
|
|
8
12
|
--token-color-palette-blue-300: #0c56e9;
|
|
@@ -1,4 +1,92 @@
|
|
|
1
1
|
{
|
|
2
|
+
"border": {
|
|
3
|
+
"radius": {
|
|
4
|
+
"x-small": {
|
|
5
|
+
"value": "3px",
|
|
6
|
+
"type": "size",
|
|
7
|
+
"filePath": "src/global/border/radius.json",
|
|
8
|
+
"isSource": true,
|
|
9
|
+
"original": {
|
|
10
|
+
"value": "3",
|
|
11
|
+
"type": "size"
|
|
12
|
+
},
|
|
13
|
+
"name": "token-border-radius-x-small",
|
|
14
|
+
"attributes": {
|
|
15
|
+
"category": "border",
|
|
16
|
+
"type": "radius",
|
|
17
|
+
"item": "x-small"
|
|
18
|
+
},
|
|
19
|
+
"path": [
|
|
20
|
+
"border",
|
|
21
|
+
"radius",
|
|
22
|
+
"x-small"
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
"small": {
|
|
26
|
+
"value": "5px",
|
|
27
|
+
"type": "size",
|
|
28
|
+
"filePath": "src/global/border/radius.json",
|
|
29
|
+
"isSource": true,
|
|
30
|
+
"original": {
|
|
31
|
+
"value": "5",
|
|
32
|
+
"type": "size"
|
|
33
|
+
},
|
|
34
|
+
"name": "token-border-radius-small",
|
|
35
|
+
"attributes": {
|
|
36
|
+
"category": "border",
|
|
37
|
+
"type": "radius",
|
|
38
|
+
"item": "small"
|
|
39
|
+
},
|
|
40
|
+
"path": [
|
|
41
|
+
"border",
|
|
42
|
+
"radius",
|
|
43
|
+
"small"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
"medium": {
|
|
47
|
+
"value": "6px",
|
|
48
|
+
"type": "size",
|
|
49
|
+
"filePath": "src/global/border/radius.json",
|
|
50
|
+
"isSource": true,
|
|
51
|
+
"original": {
|
|
52
|
+
"value": "6",
|
|
53
|
+
"type": "size"
|
|
54
|
+
},
|
|
55
|
+
"name": "token-border-radius-medium",
|
|
56
|
+
"attributes": {
|
|
57
|
+
"category": "border",
|
|
58
|
+
"type": "radius",
|
|
59
|
+
"item": "medium"
|
|
60
|
+
},
|
|
61
|
+
"path": [
|
|
62
|
+
"border",
|
|
63
|
+
"radius",
|
|
64
|
+
"medium"
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
"large": {
|
|
68
|
+
"value": "8px",
|
|
69
|
+
"type": "size",
|
|
70
|
+
"filePath": "src/global/border/radius.json",
|
|
71
|
+
"isSource": true,
|
|
72
|
+
"original": {
|
|
73
|
+
"value": "8",
|
|
74
|
+
"type": "size"
|
|
75
|
+
},
|
|
76
|
+
"name": "token-border-radius-large",
|
|
77
|
+
"attributes": {
|
|
78
|
+
"category": "border",
|
|
79
|
+
"type": "radius",
|
|
80
|
+
"item": "large"
|
|
81
|
+
},
|
|
82
|
+
"path": [
|
|
83
|
+
"border",
|
|
84
|
+
"radius",
|
|
85
|
+
"large"
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
},
|
|
2
90
|
"color": {
|
|
3
91
|
"palette": {
|
|
4
92
|
"blue-500": {
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
+
--token-border-radius-x-small: 3px;
|
|
7
|
+
--token-border-radius-small: 5px;
|
|
8
|
+
--token-border-radius-medium: 6px;
|
|
9
|
+
--token-border-radius-large: 8px;
|
|
6
10
|
--token-color-palette-blue-500: #1c345f;
|
|
7
11
|
--token-color-palette-blue-400: #0046d1;
|
|
8
12
|
--token-color-palette-blue-300: #0c56e9;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hashicorp/design-system-tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "Helios Design Tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hashicorp",
|
|
@@ -23,22 +23,21 @@
|
|
|
23
23
|
"build": "tsx ./scripts/build"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@types/fs-extra": "^11.0.
|
|
27
|
-
"@types/lodash-es": "^4",
|
|
28
|
-
"@types/node": "^22.
|
|
29
|
-
"@types/tinycolor2": "^1.4.
|
|
30
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
31
|
-
"@typescript-eslint/parser": "^8.
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"fs-extra": "^11.1.1",
|
|
26
|
+
"@types/fs-extra": "^11.0.4",
|
|
27
|
+
"@types/lodash-es": "^4.17.12",
|
|
28
|
+
"@types/node": "^22.10.2",
|
|
29
|
+
"@types/tinycolor2": "^1.4.6",
|
|
30
|
+
"@typescript-eslint/eslint-plugin": "^8.18.1",
|
|
31
|
+
"@typescript-eslint/parser": "^8.18.1",
|
|
32
|
+
"eslint": "^8.57.1",
|
|
33
|
+
"fs-extra": "^11.2.0",
|
|
35
34
|
"lodash-es": "^4.17.21",
|
|
36
35
|
"path": "^0.12.7",
|
|
37
|
-
"prettier": "^3.
|
|
38
|
-
"style-dictionary": "^4.
|
|
36
|
+
"prettier": "^3.4.2",
|
|
37
|
+
"style-dictionary": "^4.3.0",
|
|
39
38
|
"tinycolor2": "^1.6.0",
|
|
40
39
|
"ts-node": "^10.9.2",
|
|
41
40
|
"tsx": "^4.19.2",
|
|
42
|
-
"typescript": "^5.
|
|
41
|
+
"typescript": "^5.7.2"
|
|
43
42
|
}
|
|
44
43
|
}
|