@gitlab/ui 87.6.0 → 87.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +4 -1
- package/dist/components/base/new_dropdowns/listbox/listbox.js +4 -1
- package/dist/config.js +22 -3
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -0
- package/dist/tokens/build/js/tokens.dark.js +16 -11
- package/dist/tokens/build/js/tokens.js +16 -11
- package/dist/tokens/css/tokens.css +15 -10
- package/dist/tokens/css/tokens.dark.css +15 -10
- package/dist/tokens/js/tokens.dark.js +15 -10
- package/dist/tokens/js/tokens.js +15 -10
- package/dist/tokens/json/tokens.dark.json +145 -20
- package/dist/tokens/json/tokens.json +145 -20
- package/dist/tokens/scss/_tokens.dark.scss +15 -10
- package/dist/tokens/scss/_tokens.scss +15 -10
- package/dist/tokens/scss/_tokens_custom_properties.scss +5 -0
- package/package.json +1 -1
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue +4 -1
- package/src/components/base/new_dropdowns/listbox/listbox.vue +4 -1
- package/src/config.js +21 -2
- package/src/index.js +1 -0
- package/src/tokens/build/css/tokens.css +15 -10
- package/src/tokens/build/css/tokens.dark.css +15 -10
- package/src/tokens/build/js/tokens.dark.js +15 -10
- package/src/tokens/build/js/tokens.js +15 -10
- package/src/tokens/build/json/tokens.dark.json +145 -20
- package/src/tokens/build/json/tokens.json +145 -20
- package/src/tokens/build/scss/_tokens.dark.scss +15 -10
- package/src/tokens/build/scss/_tokens.scss +15 -10
- package/src/tokens/build/scss/_tokens_custom_properties.scss +5 -0
- package/src/tokens/feedback.tokens.json +60 -10
|
@@ -510,16 +510,21 @@ $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highes
|
|
|
510
510
|
$gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
|
|
511
511
|
$gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
|
|
512
512
|
$gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
|
|
513
|
-
$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for
|
|
514
|
-
$gl-feedback-danger-
|
|
515
|
-
$gl-feedback-
|
|
516
|
-
$gl-feedback-warning-
|
|
517
|
-
$gl-feedback-
|
|
518
|
-
$gl-feedback-
|
|
519
|
-
$gl-feedback-
|
|
520
|
-
$gl-feedback-
|
|
521
|
-
$gl-feedback-
|
|
522
|
-
$gl-feedback-
|
|
513
|
+
$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
514
|
+
$gl-feedback-danger-text-color: $gl-color-red-200; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
515
|
+
$gl-feedback-danger-background-color: $gl-color-red-900; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
516
|
+
$gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
517
|
+
$gl-feedback-warning-text-color: $gl-color-orange-200; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
518
|
+
$gl-feedback-warning-background-color: $gl-color-orange-900; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
519
|
+
$gl-feedback-success-icon-color: $gl-color-green-300; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
520
|
+
$gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
521
|
+
$gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
522
|
+
$gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
523
|
+
$gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
524
|
+
$gl-feedback-info-background-color: $gl-color-blue-900; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
525
|
+
$gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
526
|
+
$gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
527
|
+
$gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
523
528
|
$gl-feedback-link-color-strong: $gl-color-blue-700; // Used for a link on a strong feedback background.
|
|
524
529
|
$gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
|
|
525
530
|
$gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.
|
|
@@ -510,16 +510,21 @@ $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highe
|
|
|
510
510
|
$gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
|
|
511
511
|
$gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
|
|
512
512
|
$gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
|
|
513
|
-
$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for
|
|
514
|
-
$gl-feedback-danger-
|
|
515
|
-
$gl-feedback-
|
|
516
|
-
$gl-feedback-warning-
|
|
517
|
-
$gl-feedback-
|
|
518
|
-
$gl-feedback-
|
|
519
|
-
$gl-feedback-
|
|
520
|
-
$gl-feedback-
|
|
521
|
-
$gl-feedback-
|
|
522
|
-
$gl-feedback-
|
|
513
|
+
$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
514
|
+
$gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
515
|
+
$gl-feedback-danger-background-color: $gl-color-red-50; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
516
|
+
$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
517
|
+
$gl-feedback-warning-text-color: $gl-color-orange-700; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
518
|
+
$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
519
|
+
$gl-feedback-success-icon-color: $gl-color-green-600; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
520
|
+
$gl-feedback-success-text-color: $gl-color-green-700; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
521
|
+
$gl-feedback-success-background-color: $gl-color-green-50; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
522
|
+
$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
523
|
+
$gl-feedback-info-text-color: $gl-color-blue-700; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
524
|
+
$gl-feedback-info-background-color: $gl-color-blue-50; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
525
|
+
$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
526
|
+
$gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
527
|
+
$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
523
528
|
$gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a strong feedback background.
|
|
524
529
|
$gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
|
|
525
530
|
$gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.
|
|
@@ -496,14 +496,19 @@ $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
|
|
|
496
496
|
$gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
|
|
497
497
|
$gl-feedback-link-color-strong: var(--gl-feedback-link-color-strong);
|
|
498
498
|
$gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
|
|
499
|
+
$gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color);
|
|
499
500
|
$gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color);
|
|
500
501
|
$gl-feedback-info-background-color: var(--gl-feedback-info-background-color);
|
|
502
|
+
$gl-feedback-info-text-color: var(--gl-feedback-info-text-color);
|
|
501
503
|
$gl-feedback-info-icon-color: var(--gl-feedback-info-icon-color);
|
|
502
504
|
$gl-feedback-success-background-color: var(--gl-feedback-success-background-color);
|
|
505
|
+
$gl-feedback-success-text-color: var(--gl-feedback-success-text-color);
|
|
503
506
|
$gl-feedback-success-icon-color: var(--gl-feedback-success-icon-color);
|
|
504
507
|
$gl-feedback-warning-background-color: var(--gl-feedback-warning-background-color);
|
|
508
|
+
$gl-feedback-warning-text-color: var(--gl-feedback-warning-text-color);
|
|
505
509
|
$gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
|
|
506
510
|
$gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
|
|
511
|
+
$gl-feedback-danger-text-color: var(--gl-feedback-danger-text-color);
|
|
507
512
|
$gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
|
|
508
513
|
$gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
|
|
509
514
|
$gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);
|
|
@@ -56,7 +56,17 @@
|
|
|
56
56
|
"dark": "{color.neutral.900}"
|
|
57
57
|
},
|
|
58
58
|
"$type": "color",
|
|
59
|
-
"$description": "Used for
|
|
59
|
+
"$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency."
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"text": {
|
|
63
|
+
"color": {
|
|
64
|
+
"$value": {
|
|
65
|
+
"default": "{color.neutral.700}",
|
|
66
|
+
"dark": "{color.neutral.200}"
|
|
67
|
+
},
|
|
68
|
+
"$type": "color",
|
|
69
|
+
"$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency."
|
|
60
70
|
}
|
|
61
71
|
},
|
|
62
72
|
"icon": {
|
|
@@ -66,7 +76,7 @@
|
|
|
66
76
|
"dark": "{color.neutral.300}"
|
|
67
77
|
},
|
|
68
78
|
"$type": "color",
|
|
69
|
-
"$description": "Used for
|
|
79
|
+
"$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency."
|
|
70
80
|
}
|
|
71
81
|
}
|
|
72
82
|
},
|
|
@@ -78,7 +88,17 @@
|
|
|
78
88
|
"dark": "{color.blue.900}"
|
|
79
89
|
},
|
|
80
90
|
"$type": "color",
|
|
81
|
-
"$description": "Used for
|
|
91
|
+
"$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
"text": {
|
|
95
|
+
"color": {
|
|
96
|
+
"$value": {
|
|
97
|
+
"default": "{color.blue.700}",
|
|
98
|
+
"dark": "{color.blue.200}"
|
|
99
|
+
},
|
|
100
|
+
"$type": "color",
|
|
101
|
+
"$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
|
|
82
102
|
}
|
|
83
103
|
},
|
|
84
104
|
"icon": {
|
|
@@ -88,7 +108,7 @@
|
|
|
88
108
|
"dark": "{color.blue.300}"
|
|
89
109
|
},
|
|
90
110
|
"$type": "color",
|
|
91
|
-
"$description": "Used for
|
|
111
|
+
"$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
|
|
92
112
|
}
|
|
93
113
|
}
|
|
94
114
|
},
|
|
@@ -100,7 +120,17 @@
|
|
|
100
120
|
"dark": "{color.green.900}"
|
|
101
121
|
},
|
|
102
122
|
"$type": "color",
|
|
103
|
-
"$description": "Used for
|
|
123
|
+
"$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action."
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
"text": {
|
|
127
|
+
"color": {
|
|
128
|
+
"$value": {
|
|
129
|
+
"default": "{color.green.700}",
|
|
130
|
+
"dark": "{color.green.200}"
|
|
131
|
+
},
|
|
132
|
+
"$type": "color",
|
|
133
|
+
"$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action."
|
|
104
134
|
}
|
|
105
135
|
},
|
|
106
136
|
"icon": {
|
|
@@ -110,7 +140,7 @@
|
|
|
110
140
|
"dark": "{color.green.300}"
|
|
111
141
|
},
|
|
112
142
|
"$type": "color",
|
|
113
|
-
"$description": "Used for
|
|
143
|
+
"$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action."
|
|
114
144
|
}
|
|
115
145
|
}
|
|
116
146
|
},
|
|
@@ -122,7 +152,17 @@
|
|
|
122
152
|
"dark": "{color.orange.900}"
|
|
123
153
|
},
|
|
124
154
|
"$type": "color",
|
|
125
|
-
"$description": "Used for
|
|
155
|
+
"$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information."
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
"text": {
|
|
159
|
+
"color": {
|
|
160
|
+
"$value": {
|
|
161
|
+
"default": "{color.orange.700}",
|
|
162
|
+
"dark": "{color.orange.200}"
|
|
163
|
+
},
|
|
164
|
+
"$type": "color",
|
|
165
|
+
"$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information."
|
|
126
166
|
}
|
|
127
167
|
},
|
|
128
168
|
"icon": {
|
|
@@ -132,7 +172,7 @@
|
|
|
132
172
|
"dark": "{color.orange.300}"
|
|
133
173
|
},
|
|
134
174
|
"$type": "color",
|
|
135
|
-
"$description": "Used for
|
|
175
|
+
"$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information."
|
|
136
176
|
}
|
|
137
177
|
}
|
|
138
178
|
},
|
|
@@ -144,7 +184,17 @@
|
|
|
144
184
|
"dark": "{color.red.900}"
|
|
145
185
|
},
|
|
146
186
|
"$type": "color",
|
|
147
|
-
"$description": "Used for
|
|
187
|
+
"$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
"text": {
|
|
191
|
+
"color": {
|
|
192
|
+
"$value": {
|
|
193
|
+
"default": "{color.red.700}",
|
|
194
|
+
"dark": "{color.red.200}"
|
|
195
|
+
},
|
|
196
|
+
"$type": "color",
|
|
197
|
+
"$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
|
|
148
198
|
}
|
|
149
199
|
},
|
|
150
200
|
"icon": {
|
|
@@ -154,7 +204,7 @@
|
|
|
154
204
|
"dark": "{color.red.300}"
|
|
155
205
|
},
|
|
156
206
|
"$type": "color",
|
|
157
|
-
"$description": "Used for
|
|
207
|
+
"$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
|
|
158
208
|
}
|
|
159
209
|
}
|
|
160
210
|
}
|