@gitlab/ui 88.0.0 → 88.1.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 (28) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +120 -1
  5. package/dist/tokens/build/js/tokens.js +120 -1
  6. package/dist/tokens/css/tokens.css +119 -0
  7. package/dist/tokens/css/tokens.dark.css +119 -0
  8. package/dist/tokens/js/tokens.dark.js +119 -0
  9. package/dist/tokens/js/tokens.js +119 -0
  10. package/dist/tokens/json/tokens.dark.json +2878 -0
  11. package/dist/tokens/json/tokens.json +2878 -0
  12. package/dist/tokens/scss/_tokens.dark.scss +119 -0
  13. package/dist/tokens/scss/_tokens.scss +119 -0
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +119 -0
  15. package/package.json +2 -2
  16. package/src/components/base/button/button.scss +273 -258
  17. package/src/components/base/keyset_pagination/keyset_pagination.scss +0 -7
  18. package/src/components/base/search_box_by_click/search_box_by_click.scss +2 -3
  19. package/src/tokens/build/css/tokens.css +119 -0
  20. package/src/tokens/build/css/tokens.dark.css +119 -0
  21. package/src/tokens/build/js/tokens.dark.js +119 -0
  22. package/src/tokens/build/js/tokens.js +119 -0
  23. package/src/tokens/build/json/tokens.dark.json +2878 -0
  24. package/src/tokens/build/json/tokens.json +2878 -0
  25. package/src/tokens/build/scss/_tokens.dark.scss +119 -0
  26. package/src/tokens/build/scss/_tokens.scss +119 -0
  27. package/src/tokens/build/scss/_tokens_custom_properties.scss +119 -0
  28. package/src/tokens/contextual/button.tokens.json +883 -0
package/src/components/base/button/button.scss CHANGED
@@ -1,10 +1,62 @@
1
1
  /*
2
2
  * Button-specific utilities
3
3
  */
4
- @mixin gl-tmp-button-hover($border-color, $background-color) {
5
- box-shadow: inset 0 0 0 $gl-border-size-2 $border-color,
6
- 0 $gl-border-size-2 $gl-border-size-2 0 rgba(0, 0, 0, 0.08);
7
- background: $background-color;
4
+ @mixin gl-button-border($color) {
5
+ box-shadow: inset 0 0 0 $gl-border-size-1 $color;
6
+ }
7
+
8
+ @mixin gl-button-hover-border($color) {
9
+ box-shadow: inset 0 0 0 $gl-border-size-2 $color;
10
+ }
11
+
12
+ @mixin gl-button-selected-border($color, $focus-ring: null) {
13
+ @if $focus-ring {
14
+ box-shadow: inset 0 0 0 $gl-border-size-2 $color, $focus-ring;
15
+ } @else {
16
+ box-shadow: inset 0 0 0 $gl-border-size-2 $color;
17
+ }
18
+ }
19
+
20
+ @mixin gl-button-theme(
21
+ $color: null,
22
+ $background-color: null,
23
+ $border-color: null,
24
+ $hover-color: null,
25
+ $hover-background-color: null,
26
+ $hover-border-color: null,
27
+ $focus-color: null,
28
+ $focus-background-color: null,
29
+ $focus-border-color: null,
30
+ $active-color: null,
31
+ $active-background-color: null,
32
+ $active-border-color: null,
33
+ ) {
34
+ color: $color;
35
+ background-color: $background-color;
36
+ @include gl-button-border($border-color);
37
+
38
+ &:hover {
39
+ color: $hover-color;
40
+ background-color: $hover-background-color;
41
+ @include gl-button-hover-border($hover-border-color);
42
+ }
43
+
44
+ &:focus {
45
+ color: $focus-color;
46
+ background-color: $focus-background-color;
47
+ @include gl-focus($color: $focus-border-color);
48
+ }
49
+
50
+ &:active,
51
+ &.active {
52
+ color: $active-color;
53
+ background-color: $active-background-color;
54
+ @include gl-focus($color: $active-border-color);
55
+
56
+ &:focus {
57
+ @include gl-focus($color: $active-border-color);
58
+ }
59
+ }
8
60
  }
9
61
 
10
62
  .gl-button {
@@ -25,11 +77,11 @@
25
77
  @apply gl-rounded-base;
26
78
  @include gl-py-3;
27
79
  @include gl-px-4;
28
- @include gl-bg-transparent;
80
+ background-color: var(--gl-button-default-primary-background-color-default);
29
81
  @include gl-line-height-normal;
30
- @include gl-text-gray-900;
82
+ color: var(--gl-button-default-primary-foreground-color-default);
31
83
  @include gl-fill-current-color;
32
- @include gl-inset-border-1-gray-200;
84
+ @include gl-button-border(var(--gl-button-default-primary-border-color-default));
33
85
  @include gl-justify-content-center;
34
86
  @include gl-align-items-center;
35
87
  @include gl-font-base;
@@ -64,147 +116,233 @@
64
116
  }
65
117
 
66
118
  &.btn-default,
67
- &.btn-dashed {
68
- @include gl-bg-white;
69
-
70
- &.btn-default-tertiary {
71
- @include gl-bg-transparent;
72
- }
73
-
74
- &:hover {
75
- @include gl-tmp-button-hover($gray-400, $gray-50);
76
-
77
- .gl-icon {
78
- @include gl-text-gray-700;
79
- }
80
- }
81
-
82
- &:focus {
83
- @include gl-focus($color: $gray-400);
84
- @include gl-bg-gray-50;
85
-
86
- .gl-icon {
87
- @include gl-text-gray-700;
88
- }
89
- }
90
-
91
- &:active,
92
- &.active {
93
- @include gl-focus($color: $gray-600);
94
- @include gl-bg-gray-100;
119
+ &.btn-default-secondary {
120
+ @include gl-button-theme(
121
+ $color: var(--gl-button-default-primary-foreground-color-default),
122
+ $background-color: var(--gl-button-default-primary-background-color-default),
123
+ $border-color: var(--gl-button-default-primary-border-color-default),
124
+ $hover-color: var(--gl-button-default-primary-foreground-color-hover),
125
+ $hover-background-color: var(--gl-button-default-primary-background-color-hover),
126
+ $hover-border-color: var(--gl-button-default-primary-border-color-hover),
127
+ $focus-color: var(--gl-button-default-primary-foreground-color-focus),
128
+ $focus-background-color: var(--gl-button-default-primary-background-color-focus),
129
+ $focus-border-color: var(--gl-button-default-primary-border-color-focus),
130
+ $active-color: var(--gl-button-default-primary-foreground-color-active),
131
+ $active-background-color: var(--gl-button-default-primary-background-color-active),
132
+ $active-border-color: var(--gl-button-default-primary-border-color-active),
133
+ );
134
+
135
+ &.selected {
136
+ color: var(--gl-button-selected-foreground-color-default);
137
+ background-color: var(--gl-button-selected-background-color-default);
138
+ @include gl-button-selected-border(var(--gl-button-selected-border-color-default));
95
139
 
96
- .gl-icon {
97
- @include gl-text-gray-900;
140
+ &:hover {
141
+ color: var(--gl-button-selected-foreground-color-hover);
142
+ background-color: var(--gl-button-selected-background-color-hover);
143
+ @include gl-button-selected-border(var(--gl-button-selected-border-color-hover));
98
144
  }
99
145
 
100
146
  &:focus {
101
- @include gl-focus($color: $gray-600);
147
+ color: var(--gl-button-selected-foreground-color-focus);
148
+ background-color: var(--gl-button-selected-background-color-focus);
149
+ @include gl-button-selected-border(var(--gl-button-selected-border-color-focus), $focus-ring);
102
150
  }
103
151
 
104
- &:focus .gl-icon {
105
- @include gl-text-gray-900;
152
+ &:active,
153
+ &.active {
154
+ color: var(--gl-button-selected-foreground-color-active);
155
+ background-color: var(--gl-button-selected-background-color-active);
156
+ @include gl-button-selected-border(var(--gl-button-selected-border-color-active), $focus-ring);
157
+
158
+ &:focus {
159
+ @include gl-button-selected-border(var(--gl-button-selected-border-color-active), $focus-ring);
160
+ }
106
161
  }
107
162
  }
163
+ }
108
164
 
109
- .gl-icon {
110
- @include gl-text-gray-500;
111
- }
165
+ &.btn-default-tertiary,
166
+ &.btn-dashed {
167
+ @include gl-button-theme(
168
+ $color: var(--gl-button-default-tertiary-foreground-color-default),
169
+ $background-color: var(--gl-button-default-tertiary-background-color-default),
170
+ $border-color: var(--gl-button-default-tertiary-border-color-default),
171
+ $hover-color: var(--gl-button-default-tertiary-foreground-color-hover),
172
+ $hover-background-color: var(--gl-button-default-tertiary-background-color-hover),
173
+ $hover-border-color: var(--gl-button-default-tertiary-border-color-hover),
174
+ $focus-color: var(--gl-button-default-tertiary-foreground-color-focus),
175
+ $focus-background-color: var(--gl-button-default-tertiary-background-color-focus),
176
+ $focus-border-color: var(--gl-button-default-tertiary-border-color-focus),
177
+ $active-color: var(--gl-button-default-tertiary-foreground-color-active),
178
+ $active-background-color: var(--gl-button-default-tertiary-background-color-active),
179
+ $active-border-color: var(--gl-button-default-tertiary-border-color-active),
180
+ );
112
181
  }
113
182
 
114
- &.selected {
115
- @include gl-bg-white;
116
- box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
183
+ &.btn-confirm,
184
+ &.btn-info {
185
+ @include gl-button-theme(
186
+ $color: var(--gl-button-confirm-primary-foreground-color-default),
187
+ $background-color: var(--gl-button-confirm-primary-background-color-default),
188
+ $border-color: var(--gl-button-confirm-primary-border-color-default),
189
+ $hover-color: var(--gl-button-confirm-primary-foreground-color-hover),
190
+ $hover-background-color: var(--gl-button-confirm-primary-background-color-hover),
191
+ $hover-border-color: var(--gl-button-confirm-primary-border-color-hover),
192
+ $focus-color: var(--gl-button-confirm-primary-foreground-color-focus),
193
+ $focus-background-color: var(--gl-button-confirm-primary-background-color-focus),
194
+ $focus-border-color: var(--gl-button-confirm-primary-border-color-focus),
195
+ $active-color: var(--gl-button-confirm-primary-foreground-color-active),
196
+ $active-background-color: var(--gl-button-confirm-primary-background-color-active),
197
+ $active-border-color: var(--gl-button-confirm-primary-border-color-active),
198
+ );
199
+ }
117
200
 
118
- &:hover,
119
- &:focus {
120
- @include gl-bg-gray-50;
121
- }
201
+ &.btn-confirm-secondary,
202
+ &.btn-info-secondary {
203
+ @include gl-button-theme(
204
+ $color: var(--gl-button-confirm-secondary-foreground-color-default),
205
+ $background-color: var(--gl-button-confirm-secondary-background-color-default),
206
+ $border-color: var(--gl-button-confirm-secondary-border-color-default),
207
+ $hover-color: var(--gl-button-confirm-secondary-foreground-color-hover),
208
+ $hover-background-color: var(--gl-button-confirm-secondary-background-color-hover),
209
+ $hover-border-color: var(--gl-button-confirm-secondary-border-color-hover),
210
+ $focus-color: var(--gl-button-confirm-secondary-foreground-color-focus),
211
+ $focus-background-color: var(--gl-button-confirm-secondary-background-color-focus),
212
+ $focus-border-color: var(--gl-button-confirm-secondary-border-color-focus),
213
+ $active-color: var(--gl-button-confirm-secondary-foreground-color-active),
214
+ $active-background-color: var(--gl-button-confirm-secondary-background-color-active),
215
+ $active-border-color: var(--gl-button-confirm-secondary-border-color-active),
216
+ );
217
+ }
122
218
 
123
- &:hover {
124
- box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
125
- }
219
+ &.btn-confirm-tertiary,
220
+ &.btn-info-tertiary {
221
+ @include gl-button-theme(
222
+ $color: var(--gl-button-confirm-tertiary-foreground-color-default),
223
+ $background-color: var(--gl-button-confirm-tertiary-background-color-default),
224
+ $border-color: var(--gl-button-confirm-tertiary-border-color-default),
225
+ $hover-color: var(--gl-button-confirm-tertiary-foreground-color-hover),
226
+ $hover-background-color: var(--gl-button-confirm-tertiary-background-color-hover),
227
+ $hover-border-color: var(--gl-button-confirm-tertiary-border-color-hover),
228
+ $focus-color: var(--gl-button-confirm-tertiary-foreground-color-focus),
229
+ $focus-background-color: var(--gl-button-confirm-tertiary-background-color-focus),
230
+ $focus-border-color: var(--gl-button-confirm-tertiary-border-color-focus),
231
+ $active-color: var(--gl-button-confirm-tertiary-foreground-color-active),
232
+ $active-background-color: var(--gl-button-confirm-tertiary-background-color-active),
233
+ $active-border-color: var(--gl-button-confirm-tertiary-border-color-active),
234
+ );
235
+ }
126
236
 
127
- &:focus {
128
- box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400, $focus-ring;
129
- }
237
+ &.btn-danger {
238
+ @include gl-button-theme(
239
+ $color: var(--gl-button-danger-primary-foreground-color-default),
240
+ $background-color: var(--gl-button-danger-primary-background-color-default),
241
+ $border-color: var(--gl-button-danger-primary-border-color-default),
242
+ $hover-color: var(--gl-button-danger-primary-foreground-color-hover),
243
+ $hover-background-color: var(--gl-button-danger-primary-background-color-hover),
244
+ $hover-border-color: var(--gl-button-danger-primary-border-color-hover),
245
+ $focus-color: var(--gl-button-danger-primary-foreground-color-focus),
246
+ $focus-background-color: var(--gl-button-danger-primary-background-color-focus),
247
+ $focus-border-color: var(--gl-button-danger-primary-border-color-focus),
248
+ $active-color: var(--gl-button-danger-primary-foreground-color-active),
249
+ $active-background-color: var(--gl-button-danger-primary-background-color-active),
250
+ $active-border-color: var(--gl-button-danger-primary-border-color-active),
251
+ );
252
+ }
130
253
 
131
- &:active,
132
- &:active:focus {
133
- @include gl-bg-gray-100;
134
- box-shadow: inset 0 0 0 $gl-border-size-2 $gray-600, $focus-ring;
254
+ &.btn-danger-secondary {
255
+ @include gl-button-theme(
256
+ $color: var(--gl-button-danger-secondary-foreground-color-default),
257
+ $background-color: var(--gl-button-danger-secondary-background-color-default),
258
+ $border-color: var(--gl-button-danger-secondary-border-color-default),
259
+ $hover-color: var(--gl-button-danger-secondary-foreground-color-hover),
260
+ $hover-background-color: var(--gl-button-danger-secondary-background-color-hover),
261
+ $hover-border-color: var(--gl-button-danger-secondary-border-color-hover),
262
+ $focus-color: var(--gl-button-danger-secondary-foreground-color-focus),
263
+ $focus-background-color: var(--gl-button-danger-secondary-background-color-focus),
264
+ $focus-border-color: var(--gl-button-danger-secondary-border-color-focus),
265
+ $active-color: var(--gl-button-danger-secondary-foreground-color-active),
266
+ $active-background-color: var(--gl-button-danger-secondary-background-color-active),
267
+ $active-border-color: var(--gl-button-danger-secondary-border-color-active),
268
+ );
269
+ }
270
+
271
+ &.btn-danger-tertiary {
272
+ @include gl-button-theme(
273
+ $color: var(--gl-button-danger-tertiary-foreground-color-default),
274
+ $background-color: var(--gl-button-danger-tertiary-background-color-default),
275
+ $border-color: var(--gl-button-danger-tertiary-border-color-default),
276
+ $hover-color: var(--gl-button-danger-tertiary-foreground-color-hover),
277
+ $hover-background-color: var(--gl-button-danger-tertiary-background-color-hover),
278
+ $hover-border-color: var(--gl-button-danger-tertiary-border-color-hover),
279
+ $focus-color: var(--gl-button-danger-tertiary-foreground-color-focus),
280
+ $focus-background-color: var(--gl-button-danger-tertiary-background-color-focus),
281
+ $focus-border-color: var(--gl-button-danger-tertiary-border-color-focus),
282
+ $active-color: var(--gl-button-danger-tertiary-foreground-color-active),
283
+ $active-background-color: var(--gl-button-danger-tertiary-background-color-active),
284
+ $active-border-color: var(--gl-button-danger-tertiary-border-color-active),
285
+ );
286
+ }
287
+
288
+ &.btn-default-secondary,
289
+ &.btn-dashed-secondary,
290
+ &.btn-confirm-secondary,
291
+ &.btn-info-secondary,
292
+ &.btn-success-secondary,
293
+ &.btn-danger-secondary,
294
+ &.btn-reset-secondary,
295
+ &.btn-reset-tertiary {
296
+ @media (forced-colors: active) {
297
+ color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
298
+ border: 1px solid LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
135
299
  }
136
300
  }
137
301
 
302
+ &.btn-default,
303
+ &.btn-dashed,
138
304
  &.btn-confirm,
139
305
  &.btn-info,
140
306
  &.btn-success,
141
307
  &.btn-danger {
142
- @include gl-text-contrast-light;
143
- }
144
-
145
- &.btn-confirm,
146
- &.btn-info {
147
- @include gl-bg-blue-500;
148
- @include gl-inset-border-1-blue-600;
149
-
150
- &:hover {
151
- @include gl-tmp-button-hover($blue-800, $blue-600);
152
- }
308
+ &-tertiary {
309
+ @include gl-shadow-none;
153
310
 
154
- &:focus {
155
- @include gl-focus($color: $blue-800);
156
- @include gl-bg-blue-600;
157
- }
311
+ @media (forced-colors: active) {
312
+ color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
313
+ mix-blend-mode: initial;
314
+ border: 0;
315
+ }
158
316
 
159
- &:active,
160
- &.active {
161
- @include gl-focus($color: $blue-900);
162
- @include gl-bg-blue-700;
317
+ &:hover {
318
+ @include gl-shadow-none;
319
+ }
163
320
 
164
- &:focus {
165
- @include gl-focus($color: $blue-900);
321
+ &:active,
322
+ &:focus,
323
+ &:focus:active {
324
+ @include gl-focus;
166
325
  }
167
326
  }
168
327
  }
169
328
 
170
- &.btn-confirm-secondary,
329
+ &.btn-default-tertiary,
171
330
  &.btn-confirm-tertiary,
172
- &.btn-info-secondary,
173
- &.btn-info-tertiary {
174
- @include gl-bg-transparent;
175
- @include gl-text-blue-500;
176
- @include gl-font-weight-normal;
177
- @include gl-inset-border-1-blue-500;
178
-
179
- &:hover {
180
- @include gl-text-blue-700;
181
- @include gl-tmp-button-hover($blue-700, $blue-50);
182
- }
183
-
184
- &:focus {
185
- @include gl-text-blue-700;
186
- @include gl-focus($color: $blue-700);
187
- @include gl-bg-blue-50;
188
- }
189
-
190
- &:active,
191
- &.active {
192
- @include gl-text-blue-900;
193
- @include gl-focus($color: $blue-900);
194
- @include gl-bg-blue-100;
195
-
196
- &:focus {
197
- @include gl-focus($color: $blue-900);
198
- }
331
+ &.btn-danger-tertiary {
332
+ @media (forced-colors: active) {
333
+ color: $black;
334
+ border: 0;
199
335
  }
200
336
  }
201
337
 
202
338
  &.btn-success {
339
+ @include gl-text-contrast-light;
203
340
  @include gl-bg-green-500;
204
341
  @include gl-inset-border-1-green-600;
205
342
 
206
343
  &:hover {
207
- @include gl-tmp-button-hover($green-800, $green-600);
344
+ @include gl-button-hover-border($green-800);
345
+ background-color: $green-600;
208
346
  }
209
347
 
210
348
  &:focus {
@@ -223,6 +361,10 @@
223
361
  }
224
362
  }
225
363
 
364
+ &.btn-success-secondary {
365
+ @include gl-bg-white;
366
+ }
367
+
226
368
  &.btn-success-secondary,
227
369
  &.btn-success-tertiary {
228
370
  @include gl-bg-transparent;
@@ -232,7 +374,8 @@
232
374
 
233
375
  &:hover {
234
376
  @include gl-text-green-700;
235
- @include gl-tmp-button-hover($green-700, $green-50);
377
+ @include gl-button-hover-border($green-700);
378
+ background-color: $green-50;
236
379
  }
237
380
 
238
381
  &:focus {
@@ -253,126 +396,6 @@
253
396
  }
254
397
  }
255
398
 
256
- &.btn-danger {
257
- @include gl-bg-red-500;
258
- @include gl-inset-border-1-red-600;
259
-
260
- &:hover {
261
- @include gl-tmp-button-hover($red-800, $red-600);
262
- }
263
-
264
- &:focus {
265
- @include gl-focus($color: $red-800);
266
- @include gl-bg-red-600;
267
- }
268
-
269
- &:active,
270
- &.active {
271
- @include gl-focus($color: $red-900);
272
- @include gl-bg-red-700;
273
-
274
- &:focus {
275
- @include gl-focus($color: $red-900);
276
- }
277
- }
278
- }
279
-
280
- &.btn-danger-secondary,
281
- &.btn-danger-tertiary {
282
- @include gl-bg-transparent;
283
- @include gl-text-red-500;
284
- @include gl-font-weight-normal;
285
- @include gl-inset-border-1-red-500;
286
-
287
- &:hover {
288
- @include gl-text-red-700;
289
- @include gl-tmp-button-hover($red-700, $red-50);
290
- }
291
-
292
- &:focus {
293
- @include gl-text-red-700;
294
- @include gl-focus($color: $red-700);
295
- @include gl-bg-red-50;
296
- }
297
-
298
- &:active,
299
- &.active {
300
- @include gl-text-red-900;
301
- @include gl-focus($color: $red-900);
302
- @include gl-bg-red-100;
303
-
304
- &:focus {
305
- @include gl-focus($color: $red-900);
306
- }
307
- }
308
- }
309
-
310
- &.btn-default,
311
- &.btn-dashed,
312
- &.btn-confirm,
313
- &.btn-info,
314
- &.btn-success,
315
- &.btn-danger {
316
- &-secondary {
317
- @include gl-bg-white;
318
- }
319
- }
320
-
321
- &.btn-default-secondary,
322
- &.btn-dashed-secondary,
323
- &.btn-confirm-secondary,
324
- &.btn-info-secondary,
325
- &.btn-success-secondary,
326
- &.btn-danger-secondary,
327
- &.btn-reset-secondary,
328
- &.btn-reset-tertiary {
329
- @media (forced-colors: active) {
330
- color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
331
- border: 1px solid LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
332
- }
333
- }
334
-
335
- &.btn-default,
336
- &.btn-dashed,
337
- &.btn-confirm,
338
- &.btn-info,
339
- &.btn-success,
340
- &.btn-danger {
341
- &-tertiary {
342
- @include gl-shadow-none;
343
- mix-blend-mode: multiply;
344
-
345
- @media (forced-colors: active) {
346
- color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
347
- mix-blend-mode: initial;
348
- border: 0;
349
- }
350
-
351
- &:hover {
352
- @include gl-shadow-none;
353
- }
354
-
355
- &:active,
356
- &:focus,
357
- &:focus:active {
358
- @include gl-focus;
359
- }
360
- }
361
- }
362
-
363
- &.btn-default-tertiary,
364
- &.btn-confirm-tertiary,
365
- &.btn-danger-tertiary {
366
- @media (forced-colors: active) {
367
- color: $black;
368
- border: 0;
369
- }
370
- }
371
-
372
- &.btn-default-tertiary.selected {
373
- box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
374
- }
375
-
376
399
  &.btn-sm {
377
400
  @include gl-py-2;
378
401
  @include gl-px-3;
@@ -386,32 +409,31 @@
386
409
 
387
410
  &.btn-dashed,
388
411
  &.btn-dashed-tertiary {
389
- @include gl-inset-border-1-gray-400;
390
- @include gl-bg-white;
391
- outline: 3px dotted $white;
412
+ @include gl-button-border(var(--gl-button-dashed-border-color-default));
413
+ outline: 3px dotted var(--gl-background-color-default);
392
414
  outline-offset: (-$gl-border-size-1);
393
415
 
394
416
  &:hover {
395
- @include gl-inset-border-1-gray-400;
396
- @include gl-bg-gray-50;
417
+ @include gl-button-border($color: var(--gl-button-dashed-border-color-hover));
418
+ outline: 3px dotted var(--gl-background-color-default);
419
+ outline-offset: (-$gl-border-size-1);
397
420
  }
398
421
 
399
422
  &:focus {
400
- @include gl-focus($color: $gray-400);
401
- outline: 3px dotted $gray-50;
423
+ @include gl-focus($color: var(--gl-button-dashed-border-color-focus));
424
+ outline: 3px dotted var(--gl-background-color-default);
402
425
  outline-offset: (-$gl-border-size-1);
403
426
  }
404
427
 
405
428
  &:active,
406
429
  &.active {
407
- @include gl-focus($color: $gray-600);
408
- outline: 3px dotted $gray-100;
430
+ @include gl-focus($color: var(--gl-button-dashed-border-color-active));
431
+ outline: 3px dotted var(--gl-background-color-default);
409
432
  outline-offset: (-$gl-border-size-1);
410
- @include gl-bg-gray-100;
411
433
 
412
434
  &:focus {
413
- @include gl-focus($color: $gray-600);
414
- outline: 3px dotted $gray-100;
435
+ @include gl-focus($color: var(--gl-button-dashed-border-color-active));
436
+ outline: 3px dotted var(--gl-background-color-default);
415
437
  outline-offset: (-$gl-border-size-1);
416
438
  }
417
439
  }
@@ -446,10 +468,7 @@
446
468
  &.btn-label:hover,
447
469
  &.btn-label:focus,
448
470
  &.btn-label:active {
449
- @include gl-bg-gray-10;
450
- @include gl-text-gray-900;
451
- @include gl-fill-current-color;
452
- @include gl-inset-border-1-gray-200;
471
+ background-color: var(--gl-background-color-subtle);
453
472
  @include gl-cursor-default;
454
473
  user-select: text;
455
474
  }
@@ -459,18 +478,18 @@
459
478
  @apply gl-border-0;
460
479
  @include gl-font-base;
461
480
  @include gl-line-height-normal;
462
- @include gl-text-blue-500;
481
+ color: var(--gl-button-link-text-color-default);
463
482
  @include gl-py-0;
464
483
  @include gl-px-0;
465
484
  @include gl-shadow-none;
466
485
 
467
486
  &:hover {
468
487
  @include gl-bg-transparent;
469
- @include gl-text-blue-500;
488
+ color: var(--gl-button-link-text-color-hover);
470
489
  }
471
490
 
472
491
  &:active {
473
- @include gl-text-blue-700;
492
+ color: var(--gl-button-link-text-color-active);
474
493
  @include gl-text-decoration-underline;
475
494
  }
476
495
 
@@ -498,15 +517,11 @@
498
517
  &[disabled]:focus,
499
518
  &[disabled]:active,
500
519
  &[disabled].selected {
501
- @include gl-bg-gray-10;
502
- @include gl-text-gray-500;
503
- @include gl-inset-border-1-gray-100;
504
- @include gl-opacity-10;
520
+ background-color: var(--gl-button-disabled-background-color);
521
+ color: var(--gl-button-disabled-foreground-color);
522
+ @include gl-button-border(var(--gl-button-disabled-border-color));
523
+ opacity: 1;
505
524
  cursor: not-allowed !important;
506
-
507
- .gl-button-icon {
508
- @include gl-fill-gray-400;
509
- }
510
525
  }
511
526
 
512
527
  &.disabled[class*='-tertiary'],
package/src/components/base/keyset_pagination/keyset_pagination.scss CHANGED
@@ -5,12 +5,5 @@
5
5
  .gl-icon {
6
6
  @include gl-m-0;
7
7
  }
8
-
9
- &.disabled,
10
- &[disabled] {
11
- .gl-icon {
12
- @include gl-text-gray-400;
13
- }
14
- }
15
8
  }
16
9
  }
package/src/components/base/search_box_by_click/search_box_by_click.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .gl-search-box-by-click {
2
2
  @include gl-font-base;
3
3
 
4
- .gl-search-box-by-click-history > button {
4
+ .gl-search-box-by-click-history > .gl-button {
5
5
  padding-left: $gl-spacing-scale-4 !important;
6
6
  padding-right: $gl-spacing-scale-3 !important;
7
7
  @apply gl-border-none;
@@ -10,8 +10,7 @@
10
10
  @include gl-inset-border-1-gray-400;
11
11
  }
12
12
 
13
- .gl-search-box-by-click-search-button {
14
- @include gl-text-secondary;
13
+ .gl-search-box-by-click-search-button.gl-button:not(:disabled) {
15
14
  @include gl-inset-border-1-gray-400;
16
15
  }
17
16