@gitlab/ui 80.8.0 → 80.9.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.
@@ -0,0 +1,237 @@
1
+ /**
2
+ * Automatically generated
3
+ * Do not edit directly
4
+ */
5
+
6
+ const baseColors = {
7
+ 'blue-50': 'var(--blue-50, #e9f3fc)',
8
+ 'blue-100': 'var(--blue-100, #cbe2f9)',
9
+ 'blue-200': 'var(--blue-200, #9dc7f1)',
10
+ 'blue-300': 'var(--blue-300, #63a6e9)',
11
+ 'blue-400': 'var(--blue-400, #428fdc)',
12
+ 'blue-500': 'var(--blue-500, #1f75cb)',
13
+ 'blue-600': 'var(--blue-600, #1068bf)',
14
+ 'blue-700': 'var(--blue-700, #0b5cad)',
15
+ 'blue-800': 'var(--blue-800, #064787)',
16
+ 'blue-900': 'var(--blue-900, #033464)',
17
+ 'blue-950': 'var(--blue-950, #002850)',
18
+ 'gray-10': 'var(--gray-10, #fbfafd)',
19
+ 'gray-50': 'var(--gray-50, #ececef)',
20
+ 'gray-100': 'var(--gray-100, #dcdcde)',
21
+ 'gray-200': 'var(--gray-200, #bfbfc3)',
22
+ 'gray-300': 'var(--gray-300, #a4a3a8)',
23
+ 'gray-400': 'var(--gray-400, #89888d)',
24
+ 'gray-500': 'var(--gray-500, #737278)',
25
+ 'gray-600': 'var(--gray-600, #626168)',
26
+ 'gray-700': 'var(--gray-700, #535158)',
27
+ 'gray-800': 'var(--gray-800, #434248)',
28
+ 'gray-900': 'var(--gray-900, #333238)',
29
+ 'gray-950': 'var(--gray-950, #1f1e24)',
30
+ 'green-50': 'var(--green-50, #ecf4ee)',
31
+ 'green-100': 'var(--green-100, #c3e6cd)',
32
+ 'green-200': 'var(--green-200, #91d4a8)',
33
+ 'green-300': 'var(--green-300, #52b87a)',
34
+ 'green-400': 'var(--green-400, #2da160)',
35
+ 'green-500': 'var(--green-500, #108548)',
36
+ 'green-600': 'var(--green-600, #217645)',
37
+ 'green-700': 'var(--green-700, #24663b)',
38
+ 'green-800': 'var(--green-800, #0d532a)',
39
+ 'green-900': 'var(--green-900, #0a4020)',
40
+ 'green-950': 'var(--green-950, #072b15)',
41
+ 'orange-50': 'var(--orange-50, #fdf1dd)',
42
+ 'orange-100': 'var(--orange-100, #f5d9a8)',
43
+ 'orange-200': 'var(--orange-200, #e9be74)',
44
+ 'orange-300': 'var(--orange-300, #d99530)',
45
+ 'orange-400': 'var(--orange-400, #c17d10)',
46
+ 'orange-500': 'var(--orange-500, #ab6100)',
47
+ 'orange-600': 'var(--orange-600, #9e5400)',
48
+ 'orange-700': 'var(--orange-700, #8f4700)',
49
+ 'orange-800': 'var(--orange-800, #703800)',
50
+ 'orange-900': 'var(--orange-900, #5c2900)',
51
+ 'orange-950': 'var(--orange-950, #421f00)',
52
+ 'purple-50': 'var(--purple-50, #f4f0ff)',
53
+ 'purple-100': 'var(--purple-100, #e1d8f9)',
54
+ 'purple-200': 'var(--purple-200, #cbbbf2)',
55
+ 'purple-300': 'var(--purple-300, #ac93e6)',
56
+ 'purple-400': 'var(--purple-400, #9475db)',
57
+ 'purple-500': 'var(--purple-500, #7b58cf)',
58
+ 'purple-600': 'var(--purple-600, #694cc0)',
59
+ 'purple-700': 'var(--purple-700, #5943b6)',
60
+ 'purple-800': 'var(--purple-800, #453894)',
61
+ 'purple-900': 'var(--purple-900, #2f2a6b)',
62
+ 'purple-950': 'var(--purple-950, #232150)',
63
+ 'red-50': 'var(--red-50, #fcf1ef)',
64
+ 'red-100': 'var(--red-100, #fdd4cd)',
65
+ 'red-200': 'var(--red-200, #fcb5aa)',
66
+ 'red-300': 'var(--red-300, #f57f6c)',
67
+ 'red-400': 'var(--red-400, #ec5941)',
68
+ 'red-500': 'var(--red-500, #dd2b0e)',
69
+ 'red-600': 'var(--red-600, #c91c00)',
70
+ 'red-700': 'var(--red-700, #ae1800)',
71
+ 'red-800': 'var(--red-800, #8d1300)',
72
+ 'red-900': 'var(--red-900, #660e00)',
73
+ 'red-950': 'var(--red-950, #4d0a00)',
74
+ };
75
+ const themeColors = {
76
+ 'theme-indigo-10': 'var(--theme-indigo-10, #f8f8ff)',
77
+ 'theme-indigo-50': 'var(--theme-indigo-50, #f1f1ff)',
78
+ 'theme-indigo-100': 'var(--theme-indigo-100, #dbdbf8)',
79
+ 'theme-indigo-200': 'var(--theme-indigo-200, #c7c7f2)',
80
+ 'theme-indigo-300': 'var(--theme-indigo-300, #a2a2e6)',
81
+ 'theme-indigo-400': 'var(--theme-indigo-400, #8181d7)',
82
+ 'theme-indigo-500': 'var(--theme-indigo-500, #6666c4)',
83
+ 'theme-indigo-600': 'var(--theme-indigo-600, #5252b5)',
84
+ 'theme-indigo-700': 'var(--theme-indigo-700, #41419f)',
85
+ 'theme-indigo-800': 'var(--theme-indigo-800, #303083)',
86
+ 'theme-indigo-900': 'var(--theme-indigo-900, #222261)',
87
+ 'theme-indigo-950': 'var(--theme-indigo-950, #14143d)',
88
+ 'theme-blue-10': 'var(--theme-blue-10, #e6ecf0)',
89
+ 'theme-blue-50': 'var(--theme-blue-50, #cdd8e3)',
90
+ 'theme-blue-100': 'var(--theme-blue-100, #b9cadc)',
91
+ 'theme-blue-200': 'var(--theme-blue-200, #a6bdd5)',
92
+ 'theme-blue-300': 'var(--theme-blue-300, #81a5c9)',
93
+ 'theme-blue-400': 'var(--theme-blue-400, #628eb9)',
94
+ 'theme-blue-500': 'var(--theme-blue-500, #4977a5)',
95
+ 'theme-blue-600': 'var(--theme-blue-600, #346596)',
96
+ 'theme-blue-700': 'var(--theme-blue-700, #235180)',
97
+ 'theme-blue-800': 'var(--theme-blue-800, #153c63)',
98
+ 'theme-blue-900': 'var(--theme-blue-900, #0b2640)',
99
+ 'theme-blue-950': 'var(--theme-blue-950, #04101c)',
100
+ 'theme-light-blue-10': 'var(--theme-light-blue-10, #eef3f7)',
101
+ 'theme-light-blue-50': 'var(--theme-light-blue-50, #dde6ee)',
102
+ 'theme-light-blue-100': 'var(--theme-light-blue-100, #c1d4e6)',
103
+ 'theme-light-blue-200': 'var(--theme-light-blue-200, #a0bedc)',
104
+ 'theme-light-blue-300': 'var(--theme-light-blue-300, #74a3d3)',
105
+ 'theme-light-blue-400': 'var(--theme-light-blue-400, #4f8bc7)',
106
+ 'theme-light-blue-500': 'var(--theme-light-blue-500, #3476b9)',
107
+ 'theme-light-blue-600': 'var(--theme-light-blue-600, #2268ae)',
108
+ 'theme-light-blue-700': 'var(--theme-light-blue-700, #145aa1)',
109
+ 'theme-light-blue-800': 'var(--theme-light-blue-800, #0e4d8d)',
110
+ 'theme-light-blue-900': 'var(--theme-light-blue-900, #0c4277)',
111
+ 'theme-light-blue-950': 'var(--theme-light-blue-950, #0a3764)',
112
+ 'theme-green-10': 'var(--theme-green-10, #eef4ef)',
113
+ 'theme-green-50': 'var(--theme-green-50, #dde9de)',
114
+ 'theme-green-100': 'var(--theme-green-100, #b1d6b5)',
115
+ 'theme-green-200': 'var(--theme-green-200, #8cc497)',
116
+ 'theme-green-300': 'var(--theme-green-300, #69af7d)',
117
+ 'theme-green-400': 'var(--theme-green-400, #499767)',
118
+ 'theme-green-500': 'var(--theme-green-500, #308258)',
119
+ 'theme-green-600': 'var(--theme-green-600, #25744c)',
120
+ 'theme-green-700': 'var(--theme-green-700, #1b653f)',
121
+ 'theme-green-800': 'var(--theme-green-800, #155635)',
122
+ 'theme-green-900': 'var(--theme-green-900, #0e4328)',
123
+ 'theme-green-950': 'var(--theme-green-950, #052e19)',
124
+ 'theme-red-10': 'var(--theme-red-10, #faf4f3)',
125
+ 'theme-red-50': 'var(--theme-red-50, #f4e9e7)',
126
+ 'theme-red-100': 'var(--theme-red-100, #ecd3d0)',
127
+ 'theme-red-200': 'var(--theme-red-200, #e3bab5)',
128
+ 'theme-red-300': 'var(--theme-red-300, #d59086)',
129
+ 'theme-red-400': 'var(--theme-red-400, #c66e60)',
130
+ 'theme-red-500': 'var(--theme-red-500, #ad4a3b)',
131
+ 'theme-red-600': 'var(--theme-red-600, #a13322)',
132
+ 'theme-red-700': 'var(--theme-red-700, #8f2110)',
133
+ 'theme-red-800': 'var(--theme-red-800, #761405)',
134
+ 'theme-red-900': 'var(--theme-red-900, #580d02)',
135
+ 'theme-red-950': 'var(--theme-red-950, #380700)',
136
+ 'theme-light-red-10': 'var(--theme-light-red-10, #fdf9f8)',
137
+ 'theme-light-red-50': 'var(--theme-light-red-50, #faf2f1)',
138
+ 'theme-light-red-100': 'var(--theme-light-red-100, #f6d9d5)',
139
+ 'theme-light-red-200': 'var(--theme-light-red-200, #ebada2)',
140
+ 'theme-light-red-300': 'var(--theme-light-red-300, #e07f6f)',
141
+ 'theme-light-red-400': 'var(--theme-light-red-400, #d36250)',
142
+ 'theme-light-red-500': 'var(--theme-light-red-500, #c24b38)',
143
+ 'theme-light-red-600': 'var(--theme-light-red-600, #b53a26)',
144
+ 'theme-light-red-700': 'var(--theme-light-red-700, #a02e1c)',
145
+ 'theme-light-red-800': 'var(--theme-light-red-800, #8b2212)',
146
+ 'theme-light-red-900': 'var(--theme-light-red-900, #751709)',
147
+ 'theme-light-red-950': 'var(--theme-light-red-950, #5c1105)',
148
+ };
149
+ const dataVizColors = {
150
+ 'data-viz-green-50': 'var(--data-viz-green-50, #ddfab7)',
151
+ 'data-viz-green-100': 'var(--data-viz-green-100, #c6ed94)',
152
+ 'data-viz-green-200': 'var(--data-viz-green-200, #b0d97b)',
153
+ 'data-viz-green-300': 'var(--data-viz-green-300, #94c25e)',
154
+ 'data-viz-green-400': 'var(--data-viz-green-400, #81ac41)',
155
+ 'data-viz-green-500': 'var(--data-viz-green-500, #619025)',
156
+ 'data-viz-green-600': 'var(--data-viz-green-600, #4e7f0e)',
157
+ 'data-viz-green-700': 'var(--data-viz-green-700, #366800)',
158
+ 'data-viz-green-800': 'var(--data-viz-green-800, #275600)',
159
+ 'data-viz-green-900': 'var(--data-viz-green-900, #1a4500)',
160
+ 'data-viz-green-950': 'var(--data-viz-green-950, #133a03)',
161
+ 'data-viz-aqua-50': 'var(--data-viz-aqua-50, #b5fefd)',
162
+ 'data-viz-aqua-100': 'var(--data-viz-aqua-100, #93f2ef)',
163
+ 'data-viz-aqua-200': 'var(--data-viz-aqua-200, #5edee3)',
164
+ 'data-viz-aqua-300': 'var(--data-viz-aqua-300, #32c5d2)',
165
+ 'data-viz-aqua-400': 'var(--data-viz-aqua-400, #00acc4)',
166
+ 'data-viz-aqua-500': 'var(--data-viz-aqua-500, #0090b1)',
167
+ 'data-viz-aqua-600': 'var(--data-viz-aqua-600, #007b9b)',
168
+ 'data-viz-aqua-700': 'var(--data-viz-aqua-700, #006381)',
169
+ 'data-viz-aqua-800': 'var(--data-viz-aqua-800, #00516c)',
170
+ 'data-viz-aqua-900': 'var(--data-viz-aqua-900, #004059)',
171
+ 'data-viz-aqua-950': 'var(--data-viz-aqua-950, #00344b)',
172
+ 'data-viz-blue-50': 'var(--data-viz-blue-50, #e9ebff)',
173
+ 'data-viz-blue-100': 'var(--data-viz-blue-100, #d2dcff)',
174
+ 'data-viz-blue-200': 'var(--data-viz-blue-200, #b7c6ff)',
175
+ 'data-viz-blue-300': 'var(--data-viz-blue-300, #97acff)',
176
+ 'data-viz-blue-400': 'var(--data-viz-blue-400, #7992f5)',
177
+ 'data-viz-blue-500': 'var(--data-viz-blue-500, #617ae2)',
178
+ 'data-viz-blue-600': 'var(--data-viz-blue-600, #4e65cd)',
179
+ 'data-viz-blue-700': 'var(--data-viz-blue-700, #3f51ae)',
180
+ 'data-viz-blue-800': 'var(--data-viz-blue-800, #374291)',
181
+ 'data-viz-blue-900': 'var(--data-viz-blue-900, #303470)',
182
+ 'data-viz-blue-950': 'var(--data-viz-blue-950, #2a2b59)',
183
+ 'data-viz-magenta-50': 'var(--data-viz-magenta-50, #ffe3eb)',
184
+ 'data-viz-magenta-100': 'var(--data-viz-magenta-100, #ffccdb)',
185
+ 'data-viz-magenta-200': 'var(--data-viz-magenta-200, #fcacc5)',
186
+ 'data-viz-magenta-300': 'var(--data-viz-magenta-300, #f88aaf)',
187
+ 'data-viz-magenta-400': 'var(--data-viz-magenta-400, #e86e9a)',
188
+ 'data-viz-magenta-500': 'var(--data-viz-magenta-500, #cf4d81)',
189
+ 'data-viz-magenta-600': 'var(--data-viz-magenta-600, #b93d71)',
190
+ 'data-viz-magenta-700': 'var(--data-viz-magenta-700, #9a2e5d)',
191
+ 'data-viz-magenta-800': 'var(--data-viz-magenta-800, #7c214f)',
192
+ 'data-viz-magenta-900': 'var(--data-viz-magenta-900, #661e3a)',
193
+ 'data-viz-magenta-950': 'var(--data-viz-magenta-950, #541d31)',
194
+ 'data-viz-orange-50': 'var(--data-viz-orange-50, #fae8d1)',
195
+ 'data-viz-orange-100': 'var(--data-viz-orange-100, #f5d6b3)',
196
+ 'data-viz-orange-200': 'var(--data-viz-orange-200, #eebd8c)',
197
+ 'data-viz-orange-300': 'var(--data-viz-orange-300, #e99b60)',
198
+ 'data-viz-orange-400': 'var(--data-viz-orange-400, #e07e41)',
199
+ 'data-viz-orange-500': 'var(--data-viz-orange-500, #c95d2e)',
200
+ 'data-viz-orange-600': 'var(--data-viz-orange-600, #b14f18)',
201
+ 'data-viz-orange-700': 'var(--data-viz-orange-700, #92430a)',
202
+ 'data-viz-orange-800': 'var(--data-viz-orange-800, #6f3500)',
203
+ 'data-viz-orange-900': 'var(--data-viz-orange-900, #5e2f05)',
204
+ 'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
205
+ };
206
+ const textColors = {
207
+ default: 'var(--gl-text-color-default, #434248)',
208
+ subtle: 'var(--gl-text-color-subtle, #626168)',
209
+ strong: 'var(--gl-text-color-strong, #1f1e24)',
210
+ heading: 'var(--gl-text-color-heading, #1f1e24)',
211
+ link: 'var(--gl-text-color-link, #0b5cad)',
212
+ danger: 'var(--gl-text-color-danger, #c91c00)',
213
+ success: 'var(--gl-text-color-success, #217645)',
214
+ disabled: 'var(--gl-text-color-disabled, #89888d)',
215
+ };
216
+
217
+ const colors = {
218
+ transparent: 'transparent',
219
+ white: 'var(--white, #fff)',
220
+ black: 'var(--black, #000)',
221
+ ...baseColors,
222
+ ...themeColors,
223
+ ...dataVizColors,
224
+ };
225
+
226
+ const textColor = {
227
+ ...colors,
228
+ ...textColors,
229
+ primary: 'var(--gl-text-primary, #333238)',
230
+ secondary: 'var(--gl-text-secondary, #737278)',
231
+ tertiary: 'var(--gl-text-tertiary, #89888d)',
232
+ };
233
+
234
+ module.exports = {
235
+ colors,
236
+ textColor,
237
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "80.8.0",
3
+ "version": "80.9.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -102,23 +102,23 @@
102
102
  "@gitlab/eslint-plugin": "19.5.0",
103
103
  "@gitlab/fonts": "^1.3.0",
104
104
  "@gitlab/stylelint-config": "6.1.0",
105
- "@gitlab/svgs": "3.97.0",
105
+ "@gitlab/svgs": "3.99.0",
106
106
  "@rollup/plugin-commonjs": "^11.1.0",
107
107
  "@rollup/plugin-node-resolve": "^7.1.3",
108
108
  "@rollup/plugin-replace": "^2.3.2",
109
- "@storybook/addon-a11y": "^7.6.17",
110
- "@storybook/addon-docs": "^7.6.17",
111
- "@storybook/addon-essentials": "^7.6.17",
112
- "@storybook/addon-interactions": "^7.6.17",
113
- "@storybook/addon-viewport": "^7.6.17",
114
- "@storybook/builder-webpack5": "^7.6.17",
115
- "@storybook/test": "^7.6.17",
116
- "@storybook/test-runner": "0.17.0",
117
- "@storybook/theming": "^7.6.17",
109
+ "@storybook/addon-a11y": "^7.6.19",
110
+ "@storybook/addon-docs": "^7.6.19",
111
+ "@storybook/addon-essentials": "^7.6.19",
112
+ "@storybook/addon-interactions": "^7.6.19",
113
+ "@storybook/addon-viewport": "^7.6.19",
114
+ "@storybook/builder-webpack5": "^7.6.19",
115
+ "@storybook/test": "^7.6.19",
116
+ "@storybook/test-runner": "0.18.0",
117
+ "@storybook/theming": "^7.6.19",
118
118
  "@storybook/vue": "^7.6.17",
119
119
  "@storybook/vue-webpack5": "^7.6.17",
120
- "@storybook/vue3": "^7.6.17",
121
- "@storybook/vue3-webpack5": "^7.6.17",
120
+ "@storybook/vue3": "^7.6.19",
121
+ "@storybook/vue3-webpack5": "^7.6.19",
122
122
  "@types/jest-image-snapshot": "^6.4.0",
123
123
  "@vue/compat": "^3.2.40",
124
124
  "@vue/compiler-sfc": "^3.2.40",
@@ -131,14 +131,14 @@
131
131
  "babel-jest": "29.0.1",
132
132
  "babel-loader": "^8.0.5",
133
133
  "bootstrap": "4.6.2",
134
- "cypress": "13.8.1",
134
+ "cypress": "13.9.0",
135
135
  "cypress-axe": "^1.4.0",
136
136
  "cypress-real-events": "^1.11.0",
137
137
  "dompurify": "^3.1.2",
138
138
  "emoji-regex": "^10.0.0",
139
139
  "eslint": "8.57.0",
140
140
  "eslint-import-resolver-jest": "3.0.2",
141
- "eslint-plugin-cypress": "3.1.1",
141
+ "eslint-plugin-cypress": "3.2.0",
142
142
  "eslint-plugin-storybook": "0.8.0",
143
143
  "glob": "10.3.3",
144
144
  "identity-obj-proxy": "^3.0.0",
@@ -170,7 +170,7 @@
170
170
  "sass-loader": "^10.2.0",
171
171
  "sass-true": "^6.1.0",
172
172
  "start-server-and-test": "^1.10.6",
173
- "storybook": "^7.6.17",
173
+ "storybook": "^7.6.19",
174
174
  "storybook-dark-mode": "4.0.1",
175
175
  "style-dictionary": "^3.8.0",
176
176
  "stylelint": "15.10.2",
@@ -6,7 +6,7 @@
6
6
  @include gl-bg-gray-100;
7
7
  }
8
8
 
9
- pre.code {
9
+ .code {
10
10
  @include gl-bg-white;
11
11
  }
12
12
 
@@ -0,0 +1,237 @@
1
+ /**
2
+ * Automatically generated
3
+ * Do not edit directly
4
+ */
5
+
6
+ const baseColors = {
7
+ 'blue-50': 'var(--blue-50, #e9f3fc)',
8
+ 'blue-100': 'var(--blue-100, #cbe2f9)',
9
+ 'blue-200': 'var(--blue-200, #9dc7f1)',
10
+ 'blue-300': 'var(--blue-300, #63a6e9)',
11
+ 'blue-400': 'var(--blue-400, #428fdc)',
12
+ 'blue-500': 'var(--blue-500, #1f75cb)',
13
+ 'blue-600': 'var(--blue-600, #1068bf)',
14
+ 'blue-700': 'var(--blue-700, #0b5cad)',
15
+ 'blue-800': 'var(--blue-800, #064787)',
16
+ 'blue-900': 'var(--blue-900, #033464)',
17
+ 'blue-950': 'var(--blue-950, #002850)',
18
+ 'gray-10': 'var(--gray-10, #fbfafd)',
19
+ 'gray-50': 'var(--gray-50, #ececef)',
20
+ 'gray-100': 'var(--gray-100, #dcdcde)',
21
+ 'gray-200': 'var(--gray-200, #bfbfc3)',
22
+ 'gray-300': 'var(--gray-300, #a4a3a8)',
23
+ 'gray-400': 'var(--gray-400, #89888d)',
24
+ 'gray-500': 'var(--gray-500, #737278)',
25
+ 'gray-600': 'var(--gray-600, #626168)',
26
+ 'gray-700': 'var(--gray-700, #535158)',
27
+ 'gray-800': 'var(--gray-800, #434248)',
28
+ 'gray-900': 'var(--gray-900, #333238)',
29
+ 'gray-950': 'var(--gray-950, #1f1e24)',
30
+ 'green-50': 'var(--green-50, #ecf4ee)',
31
+ 'green-100': 'var(--green-100, #c3e6cd)',
32
+ 'green-200': 'var(--green-200, #91d4a8)',
33
+ 'green-300': 'var(--green-300, #52b87a)',
34
+ 'green-400': 'var(--green-400, #2da160)',
35
+ 'green-500': 'var(--green-500, #108548)',
36
+ 'green-600': 'var(--green-600, #217645)',
37
+ 'green-700': 'var(--green-700, #24663b)',
38
+ 'green-800': 'var(--green-800, #0d532a)',
39
+ 'green-900': 'var(--green-900, #0a4020)',
40
+ 'green-950': 'var(--green-950, #072b15)',
41
+ 'orange-50': 'var(--orange-50, #fdf1dd)',
42
+ 'orange-100': 'var(--orange-100, #f5d9a8)',
43
+ 'orange-200': 'var(--orange-200, #e9be74)',
44
+ 'orange-300': 'var(--orange-300, #d99530)',
45
+ 'orange-400': 'var(--orange-400, #c17d10)',
46
+ 'orange-500': 'var(--orange-500, #ab6100)',
47
+ 'orange-600': 'var(--orange-600, #9e5400)',
48
+ 'orange-700': 'var(--orange-700, #8f4700)',
49
+ 'orange-800': 'var(--orange-800, #703800)',
50
+ 'orange-900': 'var(--orange-900, #5c2900)',
51
+ 'orange-950': 'var(--orange-950, #421f00)',
52
+ 'purple-50': 'var(--purple-50, #f4f0ff)',
53
+ 'purple-100': 'var(--purple-100, #e1d8f9)',
54
+ 'purple-200': 'var(--purple-200, #cbbbf2)',
55
+ 'purple-300': 'var(--purple-300, #ac93e6)',
56
+ 'purple-400': 'var(--purple-400, #9475db)',
57
+ 'purple-500': 'var(--purple-500, #7b58cf)',
58
+ 'purple-600': 'var(--purple-600, #694cc0)',
59
+ 'purple-700': 'var(--purple-700, #5943b6)',
60
+ 'purple-800': 'var(--purple-800, #453894)',
61
+ 'purple-900': 'var(--purple-900, #2f2a6b)',
62
+ 'purple-950': 'var(--purple-950, #232150)',
63
+ 'red-50': 'var(--red-50, #fcf1ef)',
64
+ 'red-100': 'var(--red-100, #fdd4cd)',
65
+ 'red-200': 'var(--red-200, #fcb5aa)',
66
+ 'red-300': 'var(--red-300, #f57f6c)',
67
+ 'red-400': 'var(--red-400, #ec5941)',
68
+ 'red-500': 'var(--red-500, #dd2b0e)',
69
+ 'red-600': 'var(--red-600, #c91c00)',
70
+ 'red-700': 'var(--red-700, #ae1800)',
71
+ 'red-800': 'var(--red-800, #8d1300)',
72
+ 'red-900': 'var(--red-900, #660e00)',
73
+ 'red-950': 'var(--red-950, #4d0a00)',
74
+ };
75
+ const themeColors = {
76
+ 'theme-indigo-10': 'var(--theme-indigo-10, #f8f8ff)',
77
+ 'theme-indigo-50': 'var(--theme-indigo-50, #f1f1ff)',
78
+ 'theme-indigo-100': 'var(--theme-indigo-100, #dbdbf8)',
79
+ 'theme-indigo-200': 'var(--theme-indigo-200, #c7c7f2)',
80
+ 'theme-indigo-300': 'var(--theme-indigo-300, #a2a2e6)',
81
+ 'theme-indigo-400': 'var(--theme-indigo-400, #8181d7)',
82
+ 'theme-indigo-500': 'var(--theme-indigo-500, #6666c4)',
83
+ 'theme-indigo-600': 'var(--theme-indigo-600, #5252b5)',
84
+ 'theme-indigo-700': 'var(--theme-indigo-700, #41419f)',
85
+ 'theme-indigo-800': 'var(--theme-indigo-800, #303083)',
86
+ 'theme-indigo-900': 'var(--theme-indigo-900, #222261)',
87
+ 'theme-indigo-950': 'var(--theme-indigo-950, #14143d)',
88
+ 'theme-blue-10': 'var(--theme-blue-10, #e6ecf0)',
89
+ 'theme-blue-50': 'var(--theme-blue-50, #cdd8e3)',
90
+ 'theme-blue-100': 'var(--theme-blue-100, #b9cadc)',
91
+ 'theme-blue-200': 'var(--theme-blue-200, #a6bdd5)',
92
+ 'theme-blue-300': 'var(--theme-blue-300, #81a5c9)',
93
+ 'theme-blue-400': 'var(--theme-blue-400, #628eb9)',
94
+ 'theme-blue-500': 'var(--theme-blue-500, #4977a5)',
95
+ 'theme-blue-600': 'var(--theme-blue-600, #346596)',
96
+ 'theme-blue-700': 'var(--theme-blue-700, #235180)',
97
+ 'theme-blue-800': 'var(--theme-blue-800, #153c63)',
98
+ 'theme-blue-900': 'var(--theme-blue-900, #0b2640)',
99
+ 'theme-blue-950': 'var(--theme-blue-950, #04101c)',
100
+ 'theme-light-blue-10': 'var(--theme-light-blue-10, #eef3f7)',
101
+ 'theme-light-blue-50': 'var(--theme-light-blue-50, #dde6ee)',
102
+ 'theme-light-blue-100': 'var(--theme-light-blue-100, #c1d4e6)',
103
+ 'theme-light-blue-200': 'var(--theme-light-blue-200, #a0bedc)',
104
+ 'theme-light-blue-300': 'var(--theme-light-blue-300, #74a3d3)',
105
+ 'theme-light-blue-400': 'var(--theme-light-blue-400, #4f8bc7)',
106
+ 'theme-light-blue-500': 'var(--theme-light-blue-500, #3476b9)',
107
+ 'theme-light-blue-600': 'var(--theme-light-blue-600, #2268ae)',
108
+ 'theme-light-blue-700': 'var(--theme-light-blue-700, #145aa1)',
109
+ 'theme-light-blue-800': 'var(--theme-light-blue-800, #0e4d8d)',
110
+ 'theme-light-blue-900': 'var(--theme-light-blue-900, #0c4277)',
111
+ 'theme-light-blue-950': 'var(--theme-light-blue-950, #0a3764)',
112
+ 'theme-green-10': 'var(--theme-green-10, #eef4ef)',
113
+ 'theme-green-50': 'var(--theme-green-50, #dde9de)',
114
+ 'theme-green-100': 'var(--theme-green-100, #b1d6b5)',
115
+ 'theme-green-200': 'var(--theme-green-200, #8cc497)',
116
+ 'theme-green-300': 'var(--theme-green-300, #69af7d)',
117
+ 'theme-green-400': 'var(--theme-green-400, #499767)',
118
+ 'theme-green-500': 'var(--theme-green-500, #308258)',
119
+ 'theme-green-600': 'var(--theme-green-600, #25744c)',
120
+ 'theme-green-700': 'var(--theme-green-700, #1b653f)',
121
+ 'theme-green-800': 'var(--theme-green-800, #155635)',
122
+ 'theme-green-900': 'var(--theme-green-900, #0e4328)',
123
+ 'theme-green-950': 'var(--theme-green-950, #052e19)',
124
+ 'theme-red-10': 'var(--theme-red-10, #faf4f3)',
125
+ 'theme-red-50': 'var(--theme-red-50, #f4e9e7)',
126
+ 'theme-red-100': 'var(--theme-red-100, #ecd3d0)',
127
+ 'theme-red-200': 'var(--theme-red-200, #e3bab5)',
128
+ 'theme-red-300': 'var(--theme-red-300, #d59086)',
129
+ 'theme-red-400': 'var(--theme-red-400, #c66e60)',
130
+ 'theme-red-500': 'var(--theme-red-500, #ad4a3b)',
131
+ 'theme-red-600': 'var(--theme-red-600, #a13322)',
132
+ 'theme-red-700': 'var(--theme-red-700, #8f2110)',
133
+ 'theme-red-800': 'var(--theme-red-800, #761405)',
134
+ 'theme-red-900': 'var(--theme-red-900, #580d02)',
135
+ 'theme-red-950': 'var(--theme-red-950, #380700)',
136
+ 'theme-light-red-10': 'var(--theme-light-red-10, #fdf9f8)',
137
+ 'theme-light-red-50': 'var(--theme-light-red-50, #faf2f1)',
138
+ 'theme-light-red-100': 'var(--theme-light-red-100, #f6d9d5)',
139
+ 'theme-light-red-200': 'var(--theme-light-red-200, #ebada2)',
140
+ 'theme-light-red-300': 'var(--theme-light-red-300, #e07f6f)',
141
+ 'theme-light-red-400': 'var(--theme-light-red-400, #d36250)',
142
+ 'theme-light-red-500': 'var(--theme-light-red-500, #c24b38)',
143
+ 'theme-light-red-600': 'var(--theme-light-red-600, #b53a26)',
144
+ 'theme-light-red-700': 'var(--theme-light-red-700, #a02e1c)',
145
+ 'theme-light-red-800': 'var(--theme-light-red-800, #8b2212)',
146
+ 'theme-light-red-900': 'var(--theme-light-red-900, #751709)',
147
+ 'theme-light-red-950': 'var(--theme-light-red-950, #5c1105)',
148
+ };
149
+ const dataVizColors = {
150
+ 'data-viz-green-50': 'var(--data-viz-green-50, #ddfab7)',
151
+ 'data-viz-green-100': 'var(--data-viz-green-100, #c6ed94)',
152
+ 'data-viz-green-200': 'var(--data-viz-green-200, #b0d97b)',
153
+ 'data-viz-green-300': 'var(--data-viz-green-300, #94c25e)',
154
+ 'data-viz-green-400': 'var(--data-viz-green-400, #81ac41)',
155
+ 'data-viz-green-500': 'var(--data-viz-green-500, #619025)',
156
+ 'data-viz-green-600': 'var(--data-viz-green-600, #4e7f0e)',
157
+ 'data-viz-green-700': 'var(--data-viz-green-700, #366800)',
158
+ 'data-viz-green-800': 'var(--data-viz-green-800, #275600)',
159
+ 'data-viz-green-900': 'var(--data-viz-green-900, #1a4500)',
160
+ 'data-viz-green-950': 'var(--data-viz-green-950, #133a03)',
161
+ 'data-viz-aqua-50': 'var(--data-viz-aqua-50, #b5fefd)',
162
+ 'data-viz-aqua-100': 'var(--data-viz-aqua-100, #93f2ef)',
163
+ 'data-viz-aqua-200': 'var(--data-viz-aqua-200, #5edee3)',
164
+ 'data-viz-aqua-300': 'var(--data-viz-aqua-300, #32c5d2)',
165
+ 'data-viz-aqua-400': 'var(--data-viz-aqua-400, #00acc4)',
166
+ 'data-viz-aqua-500': 'var(--data-viz-aqua-500, #0090b1)',
167
+ 'data-viz-aqua-600': 'var(--data-viz-aqua-600, #007b9b)',
168
+ 'data-viz-aqua-700': 'var(--data-viz-aqua-700, #006381)',
169
+ 'data-viz-aqua-800': 'var(--data-viz-aqua-800, #00516c)',
170
+ 'data-viz-aqua-900': 'var(--data-viz-aqua-900, #004059)',
171
+ 'data-viz-aqua-950': 'var(--data-viz-aqua-950, #00344b)',
172
+ 'data-viz-blue-50': 'var(--data-viz-blue-50, #e9ebff)',
173
+ 'data-viz-blue-100': 'var(--data-viz-blue-100, #d2dcff)',
174
+ 'data-viz-blue-200': 'var(--data-viz-blue-200, #b7c6ff)',
175
+ 'data-viz-blue-300': 'var(--data-viz-blue-300, #97acff)',
176
+ 'data-viz-blue-400': 'var(--data-viz-blue-400, #7992f5)',
177
+ 'data-viz-blue-500': 'var(--data-viz-blue-500, #617ae2)',
178
+ 'data-viz-blue-600': 'var(--data-viz-blue-600, #4e65cd)',
179
+ 'data-viz-blue-700': 'var(--data-viz-blue-700, #3f51ae)',
180
+ 'data-viz-blue-800': 'var(--data-viz-blue-800, #374291)',
181
+ 'data-viz-blue-900': 'var(--data-viz-blue-900, #303470)',
182
+ 'data-viz-blue-950': 'var(--data-viz-blue-950, #2a2b59)',
183
+ 'data-viz-magenta-50': 'var(--data-viz-magenta-50, #ffe3eb)',
184
+ 'data-viz-magenta-100': 'var(--data-viz-magenta-100, #ffccdb)',
185
+ 'data-viz-magenta-200': 'var(--data-viz-magenta-200, #fcacc5)',
186
+ 'data-viz-magenta-300': 'var(--data-viz-magenta-300, #f88aaf)',
187
+ 'data-viz-magenta-400': 'var(--data-viz-magenta-400, #e86e9a)',
188
+ 'data-viz-magenta-500': 'var(--data-viz-magenta-500, #cf4d81)',
189
+ 'data-viz-magenta-600': 'var(--data-viz-magenta-600, #b93d71)',
190
+ 'data-viz-magenta-700': 'var(--data-viz-magenta-700, #9a2e5d)',
191
+ 'data-viz-magenta-800': 'var(--data-viz-magenta-800, #7c214f)',
192
+ 'data-viz-magenta-900': 'var(--data-viz-magenta-900, #661e3a)',
193
+ 'data-viz-magenta-950': 'var(--data-viz-magenta-950, #541d31)',
194
+ 'data-viz-orange-50': 'var(--data-viz-orange-50, #fae8d1)',
195
+ 'data-viz-orange-100': 'var(--data-viz-orange-100, #f5d6b3)',
196
+ 'data-viz-orange-200': 'var(--data-viz-orange-200, #eebd8c)',
197
+ 'data-viz-orange-300': 'var(--data-viz-orange-300, #e99b60)',
198
+ 'data-viz-orange-400': 'var(--data-viz-orange-400, #e07e41)',
199
+ 'data-viz-orange-500': 'var(--data-viz-orange-500, #c95d2e)',
200
+ 'data-viz-orange-600': 'var(--data-viz-orange-600, #b14f18)',
201
+ 'data-viz-orange-700': 'var(--data-viz-orange-700, #92430a)',
202
+ 'data-viz-orange-800': 'var(--data-viz-orange-800, #6f3500)',
203
+ 'data-viz-orange-900': 'var(--data-viz-orange-900, #5e2f05)',
204
+ 'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
205
+ };
206
+ const textColors = {
207
+ default: 'var(--gl-text-color-default, #434248)',
208
+ subtle: 'var(--gl-text-color-subtle, #626168)',
209
+ strong: 'var(--gl-text-color-strong, #1f1e24)',
210
+ heading: 'var(--gl-text-color-heading, #1f1e24)',
211
+ link: 'var(--gl-text-color-link, #0b5cad)',
212
+ danger: 'var(--gl-text-color-danger, #c91c00)',
213
+ success: 'var(--gl-text-color-success, #217645)',
214
+ disabled: 'var(--gl-text-color-disabled, #89888d)',
215
+ };
216
+
217
+ const colors = {
218
+ transparent: 'transparent',
219
+ white: 'var(--white, #fff)',
220
+ black: 'var(--black, #000)',
221
+ ...baseColors,
222
+ ...themeColors,
223
+ ...dataVizColors,
224
+ };
225
+
226
+ const textColor = {
227
+ ...colors,
228
+ ...textColors,
229
+ primary: 'var(--gl-text-primary, #333238)',
230
+ secondary: 'var(--gl-text-secondary, #737278)',
231
+ tertiary: 'var(--gl-text-tertiary, #89888d)',
232
+ };
233
+
234
+ module.exports = {
235
+ colors,
236
+ textColor,
237
+ };
@@ -1,52 +1,4 @@
1
- const COMPILED_TOKENS = require('./dist/tokens/json/tokens.json');
2
-
3
- const cssCustomPropertyWithValue = (token) => {
4
- const path = [token.prefix !== false ? 'gl' : false, ...token.path].filter(Boolean);
5
- return `var(--${path.join('-')}, ${token.value})`;
6
- };
7
-
8
- const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
9
- Object.entries(COMPILED_TOKENS[color]).forEach(([, token]) => {
10
- acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
11
- });
12
- return acc;
13
- }, {});
14
-
15
- const themeColors = Object.entries(COMPILED_TOKENS.theme).reduce((acc, [, scales]) => {
16
- Object.entries(scales).forEach(([, token]) => {
17
- acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
18
- });
19
- return acc;
20
- }, {});
21
-
22
- const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [, scales]) => {
23
- Object.entries(scales).forEach(([, token]) => {
24
- acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
25
- });
26
- return acc;
27
- }, {});
28
-
29
- const textColors = Object.entries(COMPILED_TOKENS.text.color).reduce((acc, [scale, token]) => {
30
- acc[scale] = cssCustomPropertyWithValue(token);
31
- return acc;
32
- }, {});
33
-
34
- const colors = {
35
- transparent: 'transparent',
36
- white: cssCustomPropertyWithValue(COMPILED_TOKENS.white),
37
- black: cssCustomPropertyWithValue(COMPILED_TOKENS.black),
38
- ...baseColors,
39
- ...themeColors,
40
- ...dataVizColors,
41
- };
42
-
43
- const textColor = {
44
- ...colors,
45
- ...textColors,
46
- primary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.primary),
47
- secondary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.secondary),
48
- tertiary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.tertiary),
49
- };
1
+ const { colors, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
50
2
 
51
3
  const gridSize = 0.5; // rem
52
4
  const spacing = {