Skip to content

Commit 213f02a

Browse files
adamdehavenadamdehaven
authored
fix: reference alias values (#216)
* fix: reference alias values * chore(deps): update style-dictionary * docs: update tokens.md
1 parent 131bdb7 commit 213f02a

File tree

8 files changed

+113
-113
lines changed

8 files changed

+113
-113
lines changed

‎TOKENS.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
* Do not edit directly
3-
* Generated on Wed, 24 Jan 2024 17:41:09 GMT
3+
* Generated on Wed, 24 Jan 2024 17:48:19 GMT
44
*
55
* Kong Design Tokens
66
* GitHub: https://github.com/Kong/design-tokens

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"sass": "^1.69.7",
7878
"semantic-release": "^22.0.12",
7979
"shx": "^0.3.4",
80-
"style-dictionary": "^3.9.1",
80+
"style-dictionary": "^3.9.2",
8181
"typescript": "^5.3.3",
8282
"vite": "^5.0.11",
8383
"vite-plugin-restart": "^0.4.0",

‎tokens/source/color/background.json

+29-29
Original file line numberDiff line numberDiff line change
@@ -3,86 +3,86 @@
33
"background": {
44
"_": {
55
"comment": "Default background color for containers (white).",
6-
"value": "{color.alias.white}"
6+
"value": "{color.alias.white.value}"
77
},
88
"danger": {
99
"_": {
1010
"comment": "Background color for danger actions or messages (red.60).",
11-
"value": "{color.alias.red.60}"
11+
"value": "{color.alias.red.60.value}"
1212
},
1313
"strong": {
1414
"comment": "Strong background color for danger actions or messages (red.70).",
15-
"value": "{color.alias.red.70}"
15+
"value": "{color.alias.red.70.value}"
1616
},
1717
"stronger": {
1818
"comment": "Stronger background color for danger actions or messages (red.80).",
19-
"value": "{color.alias.red.80}"
19+
"value": "{color.alias.red.80.value}"
2020
},
2121
"strongest": {
2222
"comment": "Strongest background color for danger actions or messages (red.90).",
23-
"value": "{color.alias.red.90}"
23+
"value": "{color.alias.red.90.value}"
2424
},
2525
"weak": {
2626
"comment": "Weak background color for danger actions or messages (red.40).",
27-
"value": "{color.alias.red.40}"
27+
"value": "{color.alias.red.40.value}"
2828
},
2929
"weaker": {
3030
"comment": "Weaker background color for danger actions or messages (red.20).",
31-
"value": "{color.alias.red.20}"
31+
"value": "{color.alias.red.20.value}"
3232
},
3333
"weakest": {
3434
"comment": "Weakest background color for danger actions or messages (red.10).",
35-
"value": "{color.alias.red.10}"
35+
"value": "{color.alias.red.10.value}"
3636
}
3737
},
3838
"decorative": {
3939
"purple": {
4040
"_": {
4141
"comment": "Background color for decorative purposes (purple.60).",
42-
"value": "{color.alias.purple.60}"
42+
"value": "{color.alias.purple.60.value}"
4343
},
4444
"weakest": {
4545
"comment": "Weakest background color for decorative purposes (purple.10).",
46-
"value": "{color.alias.purple.10}"
46+
"value": "{color.alias.purple.10.value}"
4747
}
4848
}
4949
},
5050
"disabled": {
5151
"comment": "Background color for disabled elements (gray.20).",
52-
"value": "{color.alias.gray.20}"
52+
"value": "{color.alias.gray.20.value}"
5353
},
5454
"inverse": {
5555
"comment": "Inverse background color for containers (blue.100)",
56-
"value": "{color.alias.blue.100}"
56+
"value": "{color.alias.blue.100.value}"
5757
},
5858
"neutral": {
5959
"_": {
6060
"comment": "Background color for neutral elements (gray.60).",
61-
"value": "{color.alias.gray.60}"
61+
"value": "{color.alias.gray.60.value}"
6262
},
6363
"strong": {
6464
"comment": "Strong background color for neutral elements (gray.70).",
65-
"value": "{color.alias.gray.70}"
65+
"value": "{color.alias.gray.70.value}"
6666
},
6767
"stronger": {
6868
"comment": "Stronger background color for neutral elements (gray.80).",
69-
"value": "{color.alias.gray.80}"
69+
"value": "{color.alias.gray.80.value}"
7070
},
7171
"strongest": {
7272
"comment": "Strongest background color for neutral elements (gray.90).",
73-
"value": "{color.alias.gray.90}"
73+
"value": "{color.alias.gray.90.value}"
7474
},
7575
"weak": {
7676
"comment": "Weak background color for neutral elements (gray.40).",
77-
"value": "{color.alias.gray.40}"
77+
"value": "{color.alias.gray.40.value}"
7878
},
7979
"weaker": {
8080
"comment": "Weaker background color for neutral elements (gray.20).",
81-
"value": "{color.alias.gray.20}"
81+
"value": "{color.alias.gray.20.value}"
8282
},
8383
"weakest": {
8484
"comment": "Weakest background color for neutral elements (gray.10).",
85-
"value": "{color.alias.gray.10}"
85+
"value": "{color.alias.gray.10.value}"
8686
}
8787
},
8888
"overlay": {
@@ -92,47 +92,47 @@
9292
"primary": {
9393
"_": {
9494
"comment": "Background color for primary actions or messages (blue.60).",
95-
"value": "{color.alias.blue.60}"
95+
"value": "{color.alias.blue.60.value}"
9696
},
9797
"strong": {
9898
"comment": "Strong background color for primary actions or messages (blue.70).",
99-
"value": "{color.alias.blue.70}"
99+
"value": "{color.alias.blue.70.value}"
100100
},
101101
"stronger": {
102102
"comment": "Stronger background color for primary actions or messages (blue.80).",
103-
"value": "{color.alias.blue.80}"
103+
"value": "{color.alias.blue.80.value}"
104104
},
105105
"strongest": {
106106
"comment": "Strongest background color for primary actions or messages (blue.90).",
107-
"value": "{color.alias.blue.90}"
107+
"value": "{color.alias.blue.90.value}"
108108
},
109109
"weak": {
110110
"comment": "Weak background color for primary actions or messages (blue.40).",
111-
"value": "{color.alias.blue.40}"
111+
"value": "{color.alias.blue.40.value}"
112112
},
113113
"weaker": {
114114
"comment": "Weaker background color for primary actions or messages (blue.20).",
115-
"value": "{color.alias.blue.20}"
115+
"value": "{color.alias.blue.20.value}"
116116
},
117117
"weakest": {
118118
"comment": "Weakest background color for primary actions or messages (blue.10)",
119-
"value": "{color.alias.blue.10}"
119+
"value": "{color.alias.blue.10.value}"
120120
}
121121
},
122122
"success": {
123123
"weakest": {
124124
"comment": "Weakest background color for success elements (green.10).",
125-
"value": "{color.alias.green.10}"
125+
"value": "{color.alias.green.10.value}"
126126
}
127127
},
128128
"transparent": {
129129
"comment": "Transparent background color (transparent).",
130-
"value": "{color.alias.transparent}"
130+
"value": "{color.alias.transparent.value}"
131131
},
132132
"warning": {
133133
"weakest": {
134134
"comment": "Weakest background color for warning elements (yellow.10).",
135-
"value": "{color.alias.yellow.10}"
135+
"value": "{color.alias.yellow.10.value}"
136136
}
137137
}
138138
}

‎tokens/source/color/border.json

+20-20
Original file line numberDiff line numberDiff line change
@@ -3,91 +3,91 @@
33
"border": {
44
"_": {
55
"comment": "Default border color for containers (gray.20).",
6-
"value": "{color.alias.gray.20}"
6+
"value": "{color.alias.gray.20.value}"
77
},
88
"danger": {
99
"_": {
1010
"comment": "Border color for danger actions or messages (red.60).",
11-
"value": "{color.alias.red.60}"
11+
"value": "{color.alias.red.60.value}"
1212
},
1313
"strong": {
1414
"comment": "Strong border color for danger actions or messages (red.70).",
15-
"value": "{color.alias.red.70}"
15+
"value": "{color.alias.red.70.value}"
1616
},
1717
"stronger": {
1818
"comment": "Stronger border color for danger actions or messages (red.80).",
19-
"value": "{color.alias.red.80}"
19+
"value": "{color.alias.red.80.value}"
2020
},
2121
"strongest": {
2222
"comment": "Strongest border color for danger actions or messages (red.90).",
23-
"value": "{color.alias.red.90}"
23+
"value": "{color.alias.red.90.value}"
2424
},
2525
"weak": {
2626
"comment": "Weak border color for danger actions or messages (red.40).",
27-
"value": "{color.alias.red.40}"
27+
"value": "{color.alias.red.40.value}"
2828
},
2929
"weaker": {
3030
"comment": "Weaker border color for danger actions or messages (red.20).",
31-
"value": "{color.alias.red.20}"
31+
"value": "{color.alias.red.20.value}"
3232
},
3333
"weakest": {
3434
"comment": "Weakest border color for danger actions or messages (red.10).",
35-
"value": "{color.alias.red.10}"
35+
"value": "{color.alias.red.10.value}"
3636
}
3737
},
3838
"decorative": {
3939
"purple": {
4040
"comment": "Border color for decorative purposes (purple.60).",
41-
"value": "{color.alias.purple.60}"
41+
"value": "{color.alias.purple.60.value}"
4242
}
4343
},
4444
"disabled": {
4545
"comment": "Border color for disabled elements (gray.20).",
46-
"value": "{color.alias.gray.20}"
46+
"value": "{color.alias.gray.20.value}"
4747
},
4848
"neutral": {
4949
"weak": {
5050
"comment": "Weak border color for neutral elements (gray.40)",
51-
"value": "{color.alias.gray.40}"
51+
"value": "{color.alias.gray.40.value}"
5252
},
5353
"weaker": {
5454
"comment": "Weaker border color for neutral elements (gray.20)",
55-
"value": "{color.alias.gray.20}"
55+
"value": "{color.alias.gray.20.value}"
5656
}
5757
},
5858
"primary": {
5959
"_": {
6060
"comment": "Border color for primary actions or messages (blue.60).",
61-
"value": "{color.alias.blue.60}"
61+
"value": "{color.alias.blue.60.value}"
6262
},
6363
"strong": {
6464
"comment": "Strong border color for primary actions or messages (blue.70).",
65-
"value": "{color.alias.blue.70}"
65+
"value": "{color.alias.blue.70.value}"
6666
},
6767
"stronger": {
6868
"comment": "Stronger border color for primary actions or messages (blue.80).",
69-
"value": "{color.alias.blue.80}"
69+
"value": "{color.alias.blue.80.value}"
7070
},
7171
"strongest": {
7272
"comment": "Strongest border color for primary actions or messages (blue.90).",
73-
"value": "{color.alias.blue.90}"
73+
"value": "{color.alias.blue.90.value}"
7474
},
7575
"weak": {
7676
"comment": "Weak border color for primary actions or messages (blue.40).",
77-
"value": "{color.alias.blue.40}"
77+
"value": "{color.alias.blue.40.value}"
7878
},
7979
"weaker": {
8080
"comment": "Weaker border color for primary actions or messages (blue.20).",
81-
"value": "{color.alias.blue.20}"
81+
"value": "{color.alias.blue.20.value}"
8282
},
8383
"weakest": {
8484
"comment": "Weakest border color for primary actions or messages (blue.10).",
85-
"value": "{color.alias.blue.10}"
85+
"value": "{color.alias.blue.10.value}"
8686
}
8787
},
8888
"transparent": {
8989
"comment": "Transparent border color (transparent).",
90-
"value": "{color.alias.transparent}"
90+
"value": "{color.alias.transparent.value}"
9191
}
9292
}
9393
}

0 commit comments

Comments
 (0)