@gitlab/ui 136.0.0 → 136.2.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/dist/components/base/label/label.js +9 -1
- package/dist/components/base/nav_item/nav_item.js +11 -1
- package/dist/components/base/toast/index.js +21 -13
- package/dist/components/index.js +1 -1
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +18 -16
- package/dist/tokens/build/js/tokens.js +18 -16
- package/dist/utils/constants.js +6 -1
- package/package.json +6 -6
- package/src/components/base/label/label.vue +10 -1
- package/src/components/base/nav_item/nav_item.scss +31 -0
- package/src/components/base/nav_item/nav_item.vue +11 -0
- package/src/components/base/toast/index.js +23 -10
- package/src/components/base/tooltip/tooltip.scss +1 -0
- package/src/components/index.js +1 -1
- package/src/tokens/build/css/tokens.css +18 -16
- package/src/tokens/build/css/tokens.dark.css +18 -16
- package/src/tokens/build/figma/mode.dark.json +36 -16
- package/src/tokens/build/figma/mode.json +36 -16
- package/src/tokens/build/js/tokens.dark.js +17 -15
- package/src/tokens/build/js/tokens.js +17 -15
- package/src/tokens/build/json/tokens.dark.json +104 -31
- package/src/tokens/build/json/tokens.json +104 -31
- package/src/tokens/build/scss/_tokens.dark.scss +18 -16
- package/src/tokens/build/scss/_tokens.scss +18 -16
- package/src/tokens/build/scss/_tokens_custom_properties.scss +2 -0
- package/src/tokens/contextual/nav.tokens.json +46 -16
- package/src/tokens/contextual/tooltip.tokens.json +18 -0
- package/src/utils/constants.js +6 -0
|
@@ -38,7 +38,10 @@
|
|
|
38
38
|
"foreground": {
|
|
39
39
|
"color": {
|
|
40
40
|
"default": {
|
|
41
|
-
"$value":
|
|
41
|
+
"$value": {
|
|
42
|
+
"default": "{color.neutral.600}",
|
|
43
|
+
"dark": "{color.neutral.200}"
|
|
44
|
+
},
|
|
42
45
|
"$type": "color",
|
|
43
46
|
"$description": "Used for the foreground of a default navigation item in the default state.",
|
|
44
47
|
"$extensions": {
|
|
@@ -48,7 +51,10 @@
|
|
|
48
51
|
}
|
|
49
52
|
},
|
|
50
53
|
"hover": {
|
|
51
|
-
"$value":
|
|
54
|
+
"$value": {
|
|
55
|
+
"default": "{color.neutral.950}",
|
|
56
|
+
"dark": "{color.neutral.0}"
|
|
57
|
+
},
|
|
52
58
|
"$type": "color",
|
|
53
59
|
"$description": "Used for the foreground of a default navigation item in the hover state.",
|
|
54
60
|
"$extensions": {
|
|
@@ -58,7 +64,7 @@
|
|
|
58
64
|
}
|
|
59
65
|
},
|
|
60
66
|
"focus": {
|
|
61
|
-
"$value": "{
|
|
67
|
+
"$value": "{nav.item.foreground.color.hover}",
|
|
62
68
|
"$type": "color",
|
|
63
69
|
"$description": "Used for the foreground of a default navigation item in the focus state.",
|
|
64
70
|
"$extensions": {
|
|
@@ -68,7 +74,7 @@
|
|
|
68
74
|
}
|
|
69
75
|
},
|
|
70
76
|
"active": {
|
|
71
|
-
"$value": "{
|
|
77
|
+
"$value": "{nav.item.foreground.color.focus}",
|
|
72
78
|
"$type": "color",
|
|
73
79
|
"$description": "Used for the foreground of a default navigation item in the active state.",
|
|
74
80
|
"$extensions": {
|
|
@@ -82,7 +88,7 @@
|
|
|
82
88
|
"background": {
|
|
83
89
|
"color": {
|
|
84
90
|
"default": {
|
|
85
|
-
"$value": "{
|
|
91
|
+
"$value": "{color.alpha.0}",
|
|
86
92
|
"$type": "color",
|
|
87
93
|
"$description": "Used for the background of a default navigation item in the default state.",
|
|
88
94
|
"$extensions": {
|
|
@@ -92,7 +98,10 @@
|
|
|
92
98
|
}
|
|
93
99
|
},
|
|
94
100
|
"hover": {
|
|
95
|
-
"$value":
|
|
101
|
+
"$value": {
|
|
102
|
+
"default": "{color.neutral.100}",
|
|
103
|
+
"dark": "{color.neutral.900}"
|
|
104
|
+
},
|
|
96
105
|
"$type": "color",
|
|
97
106
|
"$description": "Used for the background of a default navigation item in the hover state.",
|
|
98
107
|
"$extensions": {
|
|
@@ -102,7 +111,7 @@
|
|
|
102
111
|
}
|
|
103
112
|
},
|
|
104
113
|
"focus": {
|
|
105
|
-
"$value": "{
|
|
114
|
+
"$value": "{nav.item.background.color.hover}",
|
|
106
115
|
"$type": "color",
|
|
107
116
|
"$description": "Used for the background of a default navigation item in the focus state.",
|
|
108
117
|
"$extensions": {
|
|
@@ -112,7 +121,10 @@
|
|
|
112
121
|
}
|
|
113
122
|
},
|
|
114
123
|
"active": {
|
|
115
|
-
"$value":
|
|
124
|
+
"$value": {
|
|
125
|
+
"default": "{color.neutral.200}",
|
|
126
|
+
"dark": "{color.neutral.950}"
|
|
127
|
+
},
|
|
116
128
|
"$type": "color",
|
|
117
129
|
"$description": "Used for the background of a default navigation item in the active state.",
|
|
118
130
|
"$extensions": {
|
|
@@ -124,10 +136,25 @@
|
|
|
124
136
|
}
|
|
125
137
|
},
|
|
126
138
|
"selected": {
|
|
139
|
+
"font": {
|
|
140
|
+
"weight": {
|
|
141
|
+
"$value": "{font.weight.bold}",
|
|
142
|
+
"$type": "fontWeight",
|
|
143
|
+
"$description": "Used for the font weight of a selected navigation item.",
|
|
144
|
+
"$extensions": {
|
|
145
|
+
"com.figma.scopes": [
|
|
146
|
+
"FONT_WEIGHT"
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
},
|
|
127
151
|
"foreground": {
|
|
128
152
|
"color": {
|
|
129
153
|
"default": {
|
|
130
|
-
"$value":
|
|
154
|
+
"$value": {
|
|
155
|
+
"default": "{color.neutral.950}",
|
|
156
|
+
"dark": "{color.neutral.0}"
|
|
157
|
+
},
|
|
131
158
|
"$type": "color",
|
|
132
159
|
"$description": "Used for the foreground of a selected navigation item in the default state.",
|
|
133
160
|
"$extensions": {
|
|
@@ -137,7 +164,7 @@
|
|
|
137
164
|
}
|
|
138
165
|
},
|
|
139
166
|
"hover": {
|
|
140
|
-
"$value": "{
|
|
167
|
+
"$value": "{nav.item.foreground.color.hover}",
|
|
141
168
|
"$type": "color",
|
|
142
169
|
"$description": "Used for the foreground of a selected navigation item in the hover state.",
|
|
143
170
|
"$extensions": {
|
|
@@ -147,7 +174,7 @@
|
|
|
147
174
|
}
|
|
148
175
|
},
|
|
149
176
|
"focus": {
|
|
150
|
-
"$value": "{
|
|
177
|
+
"$value": "{nav.item.foreground.color.focus}",
|
|
151
178
|
"$type": "color",
|
|
152
179
|
"$description": "Used for the foreground of a selected navigation item in the focus state.",
|
|
153
180
|
"$extensions": {
|
|
@@ -157,7 +184,7 @@
|
|
|
157
184
|
}
|
|
158
185
|
},
|
|
159
186
|
"active": {
|
|
160
|
-
"$value": "{
|
|
187
|
+
"$value": "{nav.item.foreground.color.active}",
|
|
161
188
|
"$type": "color",
|
|
162
189
|
"$description": "Used for the foreground of a selected navigation item in the active state.",
|
|
163
190
|
"$extensions": {
|
|
@@ -171,7 +198,10 @@
|
|
|
171
198
|
"background": {
|
|
172
199
|
"color": {
|
|
173
200
|
"default": {
|
|
174
|
-
"$value":
|
|
201
|
+
"$value": {
|
|
202
|
+
"default": "{color.neutral.100}",
|
|
203
|
+
"dark": "{color.neutral.900}"
|
|
204
|
+
},
|
|
175
205
|
"$type": "color",
|
|
176
206
|
"$description": "Used for the background of a selected navigation item in the default state.",
|
|
177
207
|
"$extensions": {
|
|
@@ -181,7 +211,7 @@
|
|
|
181
211
|
}
|
|
182
212
|
},
|
|
183
213
|
"hover": {
|
|
184
|
-
"$value": "{
|
|
214
|
+
"$value": "{nav.item.background.color.hover}",
|
|
185
215
|
"$type": "color",
|
|
186
216
|
"$description": "Used for the background of a selected navigation item in the hover state.",
|
|
187
217
|
"$extensions": {
|
|
@@ -191,7 +221,7 @@
|
|
|
191
221
|
}
|
|
192
222
|
},
|
|
193
223
|
"focus": {
|
|
194
|
-
"$value": "{
|
|
224
|
+
"$value": "{nav.item.background.color.focus}",
|
|
195
225
|
"$type": "color",
|
|
196
226
|
"$description": "Used for the background of a selected navigation item in the focus state.",
|
|
197
227
|
"$extensions": {
|
|
@@ -201,7 +231,7 @@
|
|
|
201
231
|
}
|
|
202
232
|
},
|
|
203
233
|
"active": {
|
|
204
|
-
"$value": "{
|
|
234
|
+
"$value": "{nav.item.background.color.active}",
|
|
205
235
|
"$type": "color",
|
|
206
236
|
"$description": "Used for the background of a selected navigation item in the active state.",
|
|
207
237
|
"$extensions": {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tooltip": {
|
|
3
|
+
"text": {
|
|
4
|
+
"color": {
|
|
5
|
+
"subtle": {
|
|
6
|
+
"$value": "{color.neutral.200}",
|
|
7
|
+
"$type": "color",
|
|
8
|
+
"$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
|
|
9
|
+
"$extensions": {
|
|
10
|
+
"com.figma.scopes": [
|
|
11
|
+
"TEXT_FILL"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
package/src/utils/constants.js
CHANGED
|
@@ -56,6 +56,12 @@ export const badgeIconSizeOptions = {
|
|
|
56
56
|
md: 16,
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
+
export const navItemIndicatorPositionOptions = {
|
|
60
|
+
left: 'gl-nav-item-indicator-left',
|
|
61
|
+
right: 'gl-nav-item-indicator-right',
|
|
62
|
+
bottom: 'gl-nav-item-indicator-bottom',
|
|
63
|
+
};
|
|
64
|
+
|
|
59
65
|
export const variantCssColorMap = {
|
|
60
66
|
muted: 'gl-text-gray-500',
|
|
61
67
|
neutral: 'gl-text-blue-100',
|