@gitlab/ui 80.8.1 → 80.10.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/tailwind.css +1 -1
  3. package/dist/tailwind.css.map +1 -1
  4. package/dist/tokens/tailwind/tokens.cjs +237 -0
  5. package/dist/tokens/tokens_table.js +147 -0
  6. package/package.json +15 -15
  7. package/src/components/base/keyset_pagination/keyset_pagination.md +3 -8
  8. package/src/tokens/build/tailwind/tokens.cjs +237 -0
  9. package/src/tokens/tokens.stories.js +16 -0
  10. package/src/tokens/tokens_table.vue +151 -0
  11. package/tailwind.defaults.js +1 -49
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [80.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.9.0...v80.10.0) (2024-05-15)
2
+
3
+
4
+ ### Features
5
+
6
+ * **DesignTokens:** Create design token table Storybook story ([a7d97d1](https://gitlab.com/gitlab-org/gitlab-ui/commit/a7d97d11b6fee5e6e942f32785a1e4843ca3924b))
7
+
8
+ # [80.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.8.1...v80.9.0) (2024-05-15)
9
+
10
+
11
+ ### Features
12
+
13
+ * generate list of tailwind color definitions statically ([6612eae](https://gitlab.com/gitlab-org/gitlab-ui/commit/6612eaee37cdb4dd0258468c9f415be28c1053f0))
14
+
1
15
  ## [80.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.8.0...v80.8.1) (2024-05-10)
2
16
 
3
17
 
package/dist/tailwind.css CHANGED
@@ -1,2 +1,2 @@
1
- .gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,#c91c00)}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-subtle{color:var(--gl-text-color-subtle,#626168)}.gl-text-white{color:var(--white,#fff)}
1
+ .gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,#c91c00)}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,#1f1e24)}.gl-text-subtle{color:var(--gl-text-color-subtle,#626168)}.gl-text-white{color:var(--white,#fff)}
2
2
  /*# sourceMappingURL=tailwind.css.map */
package/dist/tailwind.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
1
+ {"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
package/dist/tokens/tailwind/tokens.cjs ADDED
@@ -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/dist/tokens/tokens_table.js ADDED
@@ -0,0 +1,147 @@
1
+ import GlBadge from '../components/base/badge/badge';
2
+ import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox';
3
+ import GlFormInput from '../components/base/form/form_input/form_input';
4
+ import GlTable from '../components/base/table/table';
5
+ import TOKENS_DEFAULT from './build/json/tokens.json';
6
+ import TOKENS_DARK from './build/json/tokens.dark.json';
7
+ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
8
+
9
+ var script = {
10
+ name: 'TokensTable',
11
+ TOKENS_DEFAULT,
12
+ TOKENS_DARK,
13
+ components: {
14
+ GlBadge,
15
+ GlCollapsibleListbox,
16
+ GlFormInput,
17
+ GlTable
18
+ },
19
+ fields: [{
20
+ key: 'description',
21
+ label: 'Description'
22
+ }, {
23
+ key: 'value',
24
+ label: 'Value'
25
+ }],
26
+ data() {
27
+ return {
28
+ filter: null,
29
+ modes: [{
30
+ value: 'default',
31
+ text: 'Default'
32
+ }, {
33
+ value: 'dark',
34
+ text: 'Dark'
35
+ }],
36
+ selectedMode: 'default',
37
+ tokens: {
38
+ default: this.$options.TOKENS_DEFAULT,
39
+ dark: this.$options.TOKENS_DARK
40
+ }
41
+ };
42
+ },
43
+ computed: {
44
+ items() {
45
+ return this.transformTokensToTableRows(this.tokens[this.selectedMode]);
46
+ }
47
+ },
48
+ methods: {
49
+ isColor(type) {
50
+ return type === 'color';
51
+ },
52
+ isAliasValue(value) {
53
+ return typeof value === 'string' && value.includes('{');
54
+ },
55
+ isAliasObject(value) {
56
+ return typeof value === 'object' && Object.values(value).some(val => this.isAliasValue(val));
57
+ },
58
+ getAliasValueName(value) {
59
+ if (this.isAliasValue(value)) {
60
+ return value.slice(1, -1);
61
+ }
62
+ return value;
63
+ },
64
+ getValueLabel(token) {
65
+ const {
66
+ value
67
+ } = token.original;
68
+ if (this.isAliasObject(value)) {
69
+ return this.getAliasValueName(value[this.selectedMode]);
70
+ }
71
+ if (this.isAliasValue(value)) {
72
+ return this.getAliasValueName(value);
73
+ }
74
+ return token.value;
75
+ },
76
+ transformTokenToTableColumns(token) {
77
+ return {
78
+ name: token.path.filter(Boolean).join('.'),
79
+ type: token.$type,
80
+ value: token.value,
81
+ valueLabel: this.getValueLabel(token),
82
+ deprecated: token.deprecated,
83
+ description: token.comment
84
+ };
85
+ },
86
+ transformTokensToTableRows(tokens) {
87
+ const tokensArray = [];
88
+ Object.keys(tokens).forEach(key => {
89
+ const token = tokens[key];
90
+ if (token.value) {
91
+ tokensArray.push(this.transformTokenToTableColumns(token));
92
+ } else {
93
+ tokensArray.push(...this.transformTokensToTableRows(token));
94
+ }
95
+ });
96
+ return tokensArray;
97
+ }
98
+ }
99
+ };
100
+
101
+ /* script */
102
+ const __vue_script__ = script;
103
+
104
+ /* template */
105
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3 gl-mb-5"},[_c('gl-form-input',{attrs:{"placeholder":"Type to search"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"id":"component-listbox","selected":_vm.selectedMode,"items":_vm.modes},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedMode),callback:function ($$v) {_vm.selectedMode=$$v;},expression:"selectedMode"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"filter":_vm.filter,"items":_vm.items,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.name }); },"hover":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
106
+ var ref_item = ref.item;
107
+ var name = ref_item.name;
108
+ var deprecated = ref_item.deprecated;
109
+ var description = ref_item.description;
110
+ return [_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v("\n "+_vm._s(name)+"\n "),(deprecated)?_c('gl-badge',{attrs:{"size":"sm","variant":"neutral"}},[_vm._v("Deprecated")]):_vm._e()],1),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n "+_vm._s(description)+"\n ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
111
+ var ref_item = ref.item;
112
+ var type = ref_item.type;
113
+ var value = ref_item.value;
114
+ var valueLabel = ref_item.valueLabel;
115
+ return [_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-w-5 gl-h-5 gl-rounded-base",style:({ 'background-color': value })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v(_vm._s(valueLabel))])])]}}])})],1)};
116
+ var __vue_staticRenderFns__ = [];
117
+
118
+ /* style */
119
+ const __vue_inject_styles__ = undefined;
120
+ /* scoped */
121
+ const __vue_scope_id__ = undefined;
122
+ /* module identifier */
123
+ const __vue_module_identifier__ = undefined;
124
+ /* functional template */
125
+ const __vue_is_functional_template__ = false;
126
+ /* style inject */
127
+
128
+ /* style inject SSR */
129
+
130
+ /* style inject shadow dom */
131
+
132
+
133
+
134
+ const __vue_component__ = __vue_normalize__(
135
+ { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
136
+ __vue_inject_styles__,
137
+ __vue_script__,
138
+ __vue_scope_id__,
139
+ __vue_is_functional_template__,
140
+ __vue_module_identifier__,
141
+ false,
142
+ undefined,
143
+ undefined,
144
+ undefined
145
+ );
146
+
147
+ export default __vue_component__;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "80.8.1",
3
+ "version": "80.10.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,7 +131,7 @@
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",
@@ -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",
package/src/components/base/keyset_pagination/keyset_pagination.md CHANGED
@@ -29,10 +29,10 @@ Example:
29
29
  <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
30
30
  ```
31
31
 
32
- **✅ Do** use this component for paginating GraphQL requests<sup>1</sup> (or any
32
+ **✅ Do** use this component for paginating GraphQL requests[^1] (or any
33
33
  endpoint that uses keyset pagination).
34
34
 
35
- **❌ Don't** use this component for paginating REST requests<sup>1</sup> (or any
35
+ **❌ Don't** use this component for paginating REST requests[^1] (or any
36
36
  endpoint that uses offset pagination).
37
37
 
38
38
  For offset pagination, use the [`GlPagination`
@@ -42,12 +42,7 @@ For more information on the difference between offset and keyset pagination see
42
42
  [our documentation on GraphQL
43
43
  pagination](https://docs.gitlab.com/ee/development/graphql_guide/pagination.html).
44
44
 
45
- <small><sup>1</sup>There's no intrinsic reason why GraphQL endpoints can't
46
- support offset pagination (in fact, [the official
47
- documentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows
48
- an example offset pagination implementation) or why REST endpoints can't support
49
- keyset pagination. This is simply how we've chosen to implement our REST and
50
- GraphQL endpoints at GitLab.</small>
45
+ [^1]: There's no intrinsic reason why GraphQL endpoints can't support offset pagination (in fact, [the official documentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows an example offset pagination implementation) or why REST endpoints can't support keyset pagination. This is simply how we've chosen to implement our REST and GraphQL endpoints at GitLab.
51
46
 
52
47
  ## Pajamas reference
53
48
 
package/src/tokens/build/tailwind/tokens.cjs ADDED
@@ -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/src/tokens/tokens.stories.js ADDED
@@ -0,0 +1,16 @@
1
+ import TokensTable from './tokens_table.vue';
2
+
3
+ const Template = () => ({
4
+ components: {
5
+ TokensTable,
6
+ },
7
+ template: `<tokens-table />`,
8
+ });
9
+
10
+ export const Default = Template.bind({});
11
+
12
+ export default {
13
+ title: 'tokens/all',
14
+ component: TokensTable,
15
+ tags: ['skip-visual-test'],
16
+ };
package/src/tokens/tokens_table.vue ADDED
@@ -0,0 +1,151 @@
1
+ <script>
2
+ import GlBadge from '../components/base/badge/badge.vue';
3
+ import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox.vue';
4
+ import GlFormInput from '../components/base/form/form_input/form_input.vue';
5
+ import GlTable from '../components/base/table/table.vue';
6
+ import TOKENS_DEFAULT from './build/json/tokens.json';
7
+ import TOKENS_DARK from './build/json/tokens.dark.json';
8
+
9
+ export default {
10
+ name: 'TokensTable',
11
+ TOKENS_DEFAULT,
12
+ TOKENS_DARK,
13
+ components: {
14
+ GlBadge,
15
+ GlCollapsibleListbox,
16
+ GlFormInput,
17
+ GlTable,
18
+ },
19
+ fields: [
20
+ {
21
+ key: 'description',
22
+ label: 'Description',
23
+ },
24
+ {
25
+ key: 'value',
26
+ label: 'Value',
27
+ },
28
+ ],
29
+ data() {
30
+ return {
31
+ filter: null,
32
+ modes: [
33
+ {
34
+ value: 'default',
35
+ text: 'Default',
36
+ },
37
+ {
38
+ value: 'dark',
39
+ text: 'Dark',
40
+ },
41
+ ],
42
+ selectedMode: 'default',
43
+ tokens: {
44
+ default: this.$options.TOKENS_DEFAULT,
45
+ dark: this.$options.TOKENS_DARK,
46
+ },
47
+ };
48
+ },
49
+ computed: {
50
+ items() {
51
+ return this.transformTokensToTableRows(this.tokens[this.selectedMode]);
52
+ },
53
+ },
54
+ methods: {
55
+ isColor(type) {
56
+ return type === 'color';
57
+ },
58
+ isAliasValue(value) {
59
+ return typeof value === 'string' && value.includes('{');
60
+ },
61
+ isAliasObject(value) {
62
+ return (
63
+ typeof value === 'object' && Object.values(value).some((val) => this.isAliasValue(val))
64
+ );
65
+ },
66
+ getAliasValueName(value) {
67
+ if (this.isAliasValue(value)) {
68
+ return value.slice(1, -1);
69
+ }
70
+ return value;
71
+ },
72
+ getValueLabel(token) {
73
+ const { value } = token.original;
74
+ if (this.isAliasObject(value)) {
75
+ return this.getAliasValueName(value[this.selectedMode]);
76
+ }
77
+ if (this.isAliasValue(value)) {
78
+ return this.getAliasValueName(value);
79
+ }
80
+ return token.value;
81
+ },
82
+ transformTokenToTableColumns(token) {
83
+ return {
84
+ name: token.path.filter(Boolean).join('.'),
85
+ type: token.$type,
86
+ value: token.value,
87
+ valueLabel: this.getValueLabel(token),
88
+ deprecated: token.deprecated,
89
+ description: token.comment,
90
+ };
91
+ },
92
+ transformTokensToTableRows(tokens) {
93
+ const tokensArray = [];
94
+
95
+ Object.keys(tokens).forEach((key) => {
96
+ const token = tokens[key];
97
+ if (token.value) {
98
+ tokensArray.push(this.transformTokenToTableColumns(token));
99
+ } else {
100
+ tokensArray.push(...this.transformTokensToTableRows(token));
101
+ }
102
+ });
103
+
104
+ return tokensArray;
105
+ },
106
+ },
107
+ };
108
+ </script>
109
+
110
+ <template>
111
+ <div>
112
+ <div class="gl-display-flex gl-align-items-center gl-gap-3 gl-mb-5">
113
+ <gl-form-input v-model="filter" placeholder="Type to search" />
114
+ <gl-collapsible-listbox
115
+ id="component-listbox"
116
+ v-model="selectedMode"
117
+ :selected="selectedMode"
118
+ :items="modes"
119
+ @search="query = $event"
120
+ />
121
+ </div>
122
+ <gl-table
123
+ :filter="filter"
124
+ :items="items"
125
+ :fields="$options.fields"
126
+ :tbody-tr-attr="(item) => ({ id: item.name })"
127
+ hover
128
+ stacked="sm"
129
+ >
130
+ <template #cell(description)="{ item: { name, deprecated, description } }">
131
+ <code class="gl-font-base gl-text-strong">
132
+ {{ name }}
133
+ <gl-badge v-if="deprecated" size="sm" variant="neutral">Deprecated</gl-badge>
134
+ </code>
135
+ <div v-if="description" class="gl-mt-3 gl-text-subtle">
136
+ {{ description }}
137
+ </div>
138
+ </template>
139
+ <template #cell(value)="{ item: { type, value, valueLabel } }">
140
+ <div class="gl-display-flex gl-align-items-center gl-gap-3">
141
+ <div
142
+ v-if="isColor(type)"
143
+ class="gl-w-5 gl-h-5 gl-rounded-base"
144
+ :style="{ 'background-color': value }"
145
+ ></div>
146
+ <code class="gl-font-base gl-text-strong">{{ valueLabel }}</code>
147
+ </div>
148
+ </template>
149
+ </gl-table>
150
+ </div>
151
+ </template>
package/tailwind.defaults.js CHANGED
@@ -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 = {