@gitlab/ui 123.11.1 → 123.11.3
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/form/form_fields/form_fields.js +4 -14
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +5 -5
- package/dist/tokens/build/js/tokens.js +5 -5
- package/dist/tokens/css/tokens.css +5 -5
- package/dist/tokens/css/tokens.dark.css +5 -5
- package/dist/tokens/docs/tokens-tailwind-docs.dark.json +32 -32
- package/dist/tokens/docs/tokens-tailwind-docs.json +32 -32
- package/dist/tokens/figma/constants.tokens.json +12 -0
- package/dist/tokens/figma/semantic.tokens.json +0 -10
- package/dist/tokens/js/tokens.dark.js +5 -5
- package/dist/tokens/js/tokens.js +5 -5
- package/dist/tokens/json/tokens.dark.json +157 -157
- package/dist/tokens/json/tokens.json +157 -157
- package/dist/tokens/scss/_tokens.dark.scss +5 -5
- package/dist/tokens/scss/_tokens.scss +5 -5
- package/dist/tokens/scss/_tokens_custom_properties.scss +5 -5
- package/dist/tokens/tailwind/tokens.cjs +1 -1
- package/package.json +5 -5
- package/src/components/base/form/form_fields/form_fields.vue +4 -16
- package/src/tokens/build/css/tokens.css +5 -5
- package/src/tokens/build/css/tokens.dark.css +5 -5
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +32 -32
- package/src/tokens/build/docs/tokens-tailwind-docs.json +32 -32
- package/src/tokens/build/figma/constants.tokens.json +12 -0
- package/src/tokens/build/figma/semantic.tokens.json +0 -10
- package/src/tokens/build/js/tokens.dark.js +5 -5
- package/src/tokens/build/js/tokens.js +5 -5
- package/src/tokens/build/json/tokens.dark.json +157 -157
- package/src/tokens/build/json/tokens.json +157 -157
- package/src/tokens/build/scss/_tokens.dark.scss +5 -5
- package/src/tokens/build/scss/_tokens.scss +5 -5
- package/src/tokens/build/scss/_tokens_custom_properties.scss +5 -5
- package/src/tokens/build/tailwind/tokens.cjs +1 -1
- package/src/tokens/constant/border.tokens.json +12 -0
- package/src/tokens/semantic/border.tokens.json +0 -10
|
@@ -1,5 +1,162 @@
|
|
|
1
1
|
{
|
|
2
2
|
"border": {
|
|
3
|
+
"color": {
|
|
4
|
+
"transparent": {
|
|
5
|
+
"key": "{border.color.transparent}",
|
|
6
|
+
"$value": "transparent",
|
|
7
|
+
"$type": "color",
|
|
8
|
+
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
9
|
+
"$extensions": {
|
|
10
|
+
"com.figma.scope": [
|
|
11
|
+
"ALL_SCOPES"
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
"filePath": "src/tokens/constant/border.tokens.json",
|
|
15
|
+
"isSource": true,
|
|
16
|
+
"original": {
|
|
17
|
+
"$value": "{color.alpha.0}",
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
20
|
+
"$extensions": {
|
|
21
|
+
"com.figma.scope": [
|
|
22
|
+
"ALL_SCOPES"
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
"key": "{border.color.transparent}"
|
|
26
|
+
},
|
|
27
|
+
"name": "BORDER_COLOR_TRANSPARENT",
|
|
28
|
+
"attributes": {},
|
|
29
|
+
"path": [
|
|
30
|
+
"border",
|
|
31
|
+
"color",
|
|
32
|
+
"transparent"
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
"default": {
|
|
36
|
+
"key": "{border.color.default}",
|
|
37
|
+
"$value": "#4c4b51",
|
|
38
|
+
"$type": "color",
|
|
39
|
+
"$description": "Used for the default border color.",
|
|
40
|
+
"$extensions": {
|
|
41
|
+
"com.figma.scope": [
|
|
42
|
+
"STROKE_COLOR"
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
46
|
+
"isSource": true,
|
|
47
|
+
"original": {
|
|
48
|
+
"$value": "{color.neutral.700}",
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$description": "Used for the default border color.",
|
|
51
|
+
"$extensions": {
|
|
52
|
+
"com.figma.scope": [
|
|
53
|
+
"STROKE_COLOR"
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
"key": "{border.color.default}"
|
|
57
|
+
},
|
|
58
|
+
"name": "BORDER_COLOR_DEFAULT",
|
|
59
|
+
"attributes": {},
|
|
60
|
+
"path": [
|
|
61
|
+
"border",
|
|
62
|
+
"color",
|
|
63
|
+
"default"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
"subtle": {
|
|
67
|
+
"key": "{border.color.subtle}",
|
|
68
|
+
"$value": "#3a383f",
|
|
69
|
+
"$type": "color",
|
|
70
|
+
"$description": "Used for a subtle border in combination with the default background.",
|
|
71
|
+
"$extensions": {
|
|
72
|
+
"com.figma.scope": [
|
|
73
|
+
"STROKE_COLOR"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
77
|
+
"isSource": true,
|
|
78
|
+
"original": {
|
|
79
|
+
"$value": "{color.neutral.800}",
|
|
80
|
+
"$type": "color",
|
|
81
|
+
"$description": "Used for a subtle border in combination with the default background.",
|
|
82
|
+
"$extensions": {
|
|
83
|
+
"com.figma.scope": [
|
|
84
|
+
"STROKE_COLOR"
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
"key": "{border.color.subtle}"
|
|
88
|
+
},
|
|
89
|
+
"name": "BORDER_COLOR_SUBTLE",
|
|
90
|
+
"attributes": {},
|
|
91
|
+
"path": [
|
|
92
|
+
"border",
|
|
93
|
+
"color",
|
|
94
|
+
"subtle"
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
"strong": {
|
|
98
|
+
"key": "{border.color.strong}",
|
|
99
|
+
"$value": "#626168",
|
|
100
|
+
"$type": "color",
|
|
101
|
+
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
102
|
+
"$extensions": {
|
|
103
|
+
"com.figma.scope": [
|
|
104
|
+
"STROKE_COLOR"
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
108
|
+
"isSource": true,
|
|
109
|
+
"original": {
|
|
110
|
+
"$value": "{color.neutral.600}",
|
|
111
|
+
"$type": "color",
|
|
112
|
+
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
113
|
+
"$extensions": {
|
|
114
|
+
"com.figma.scope": [
|
|
115
|
+
"STROKE_COLOR"
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
"key": "{border.color.strong}"
|
|
119
|
+
},
|
|
120
|
+
"name": "BORDER_COLOR_STRONG",
|
|
121
|
+
"attributes": {},
|
|
122
|
+
"path": [
|
|
123
|
+
"border",
|
|
124
|
+
"color",
|
|
125
|
+
"strong"
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
"section": {
|
|
129
|
+
"key": "{border.color.section}",
|
|
130
|
+
"$value": "#18171d",
|
|
131
|
+
"$type": "color",
|
|
132
|
+
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
133
|
+
"$extensions": {
|
|
134
|
+
"com.figma.scope": [
|
|
135
|
+
"STROKE_COLOR"
|
|
136
|
+
]
|
|
137
|
+
},
|
|
138
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
139
|
+
"isSource": true,
|
|
140
|
+
"original": {
|
|
141
|
+
"$value": "{background.color.default}",
|
|
142
|
+
"$type": "color",
|
|
143
|
+
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
144
|
+
"$extensions": {
|
|
145
|
+
"com.figma.scope": [
|
|
146
|
+
"STROKE_COLOR"
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
"key": "{border.color.section}"
|
|
150
|
+
},
|
|
151
|
+
"name": "BORDER_COLOR_SECTION",
|
|
152
|
+
"attributes": {},
|
|
153
|
+
"path": [
|
|
154
|
+
"border",
|
|
155
|
+
"color",
|
|
156
|
+
"section"
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
},
|
|
3
160
|
"radius": {
|
|
4
161
|
"none": {
|
|
5
162
|
"key": "{border.radius.none}",
|
|
@@ -293,163 +450,6 @@
|
|
|
293
450
|
"default"
|
|
294
451
|
]
|
|
295
452
|
}
|
|
296
|
-
},
|
|
297
|
-
"color": {
|
|
298
|
-
"default": {
|
|
299
|
-
"key": "{border.color.default}",
|
|
300
|
-
"$value": "#4c4b51",
|
|
301
|
-
"$type": "color",
|
|
302
|
-
"$description": "Used for the default border color.",
|
|
303
|
-
"$extensions": {
|
|
304
|
-
"com.figma.scope": [
|
|
305
|
-
"STROKE_COLOR"
|
|
306
|
-
]
|
|
307
|
-
},
|
|
308
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
309
|
-
"isSource": true,
|
|
310
|
-
"original": {
|
|
311
|
-
"$value": "{color.neutral.700}",
|
|
312
|
-
"$type": "color",
|
|
313
|
-
"$description": "Used for the default border color.",
|
|
314
|
-
"$extensions": {
|
|
315
|
-
"com.figma.scope": [
|
|
316
|
-
"STROKE_COLOR"
|
|
317
|
-
]
|
|
318
|
-
},
|
|
319
|
-
"key": "{border.color.default}"
|
|
320
|
-
},
|
|
321
|
-
"name": "BORDER_COLOR_DEFAULT",
|
|
322
|
-
"attributes": {},
|
|
323
|
-
"path": [
|
|
324
|
-
"border",
|
|
325
|
-
"color",
|
|
326
|
-
"default"
|
|
327
|
-
]
|
|
328
|
-
},
|
|
329
|
-
"subtle": {
|
|
330
|
-
"key": "{border.color.subtle}",
|
|
331
|
-
"$value": "#3a383f",
|
|
332
|
-
"$type": "color",
|
|
333
|
-
"$description": "Used for a subtle border in combination with the default background.",
|
|
334
|
-
"$extensions": {
|
|
335
|
-
"com.figma.scope": [
|
|
336
|
-
"STROKE_COLOR"
|
|
337
|
-
]
|
|
338
|
-
},
|
|
339
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
340
|
-
"isSource": true,
|
|
341
|
-
"original": {
|
|
342
|
-
"$value": "{color.neutral.800}",
|
|
343
|
-
"$type": "color",
|
|
344
|
-
"$description": "Used for a subtle border in combination with the default background.",
|
|
345
|
-
"$extensions": {
|
|
346
|
-
"com.figma.scope": [
|
|
347
|
-
"STROKE_COLOR"
|
|
348
|
-
]
|
|
349
|
-
},
|
|
350
|
-
"key": "{border.color.subtle}"
|
|
351
|
-
},
|
|
352
|
-
"name": "BORDER_COLOR_SUBTLE",
|
|
353
|
-
"attributes": {},
|
|
354
|
-
"path": [
|
|
355
|
-
"border",
|
|
356
|
-
"color",
|
|
357
|
-
"subtle"
|
|
358
|
-
]
|
|
359
|
-
},
|
|
360
|
-
"strong": {
|
|
361
|
-
"key": "{border.color.strong}",
|
|
362
|
-
"$value": "#626168",
|
|
363
|
-
"$type": "color",
|
|
364
|
-
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
365
|
-
"$extensions": {
|
|
366
|
-
"com.figma.scope": [
|
|
367
|
-
"STROKE_COLOR"
|
|
368
|
-
]
|
|
369
|
-
},
|
|
370
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
371
|
-
"isSource": true,
|
|
372
|
-
"original": {
|
|
373
|
-
"$value": "{color.neutral.600}",
|
|
374
|
-
"$type": "color",
|
|
375
|
-
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
376
|
-
"$extensions": {
|
|
377
|
-
"com.figma.scope": [
|
|
378
|
-
"STROKE_COLOR"
|
|
379
|
-
]
|
|
380
|
-
},
|
|
381
|
-
"key": "{border.color.strong}"
|
|
382
|
-
},
|
|
383
|
-
"name": "BORDER_COLOR_STRONG",
|
|
384
|
-
"attributes": {},
|
|
385
|
-
"path": [
|
|
386
|
-
"border",
|
|
387
|
-
"color",
|
|
388
|
-
"strong"
|
|
389
|
-
]
|
|
390
|
-
},
|
|
391
|
-
"section": {
|
|
392
|
-
"key": "{border.color.section}",
|
|
393
|
-
"$value": "#18171d",
|
|
394
|
-
"$type": "color",
|
|
395
|
-
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
396
|
-
"$extensions": {
|
|
397
|
-
"com.figma.scope": [
|
|
398
|
-
"STROKE_COLOR"
|
|
399
|
-
]
|
|
400
|
-
},
|
|
401
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
402
|
-
"isSource": true,
|
|
403
|
-
"original": {
|
|
404
|
-
"$value": "{background.color.default}",
|
|
405
|
-
"$type": "color",
|
|
406
|
-
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
407
|
-
"$extensions": {
|
|
408
|
-
"com.figma.scope": [
|
|
409
|
-
"STROKE_COLOR"
|
|
410
|
-
]
|
|
411
|
-
},
|
|
412
|
-
"key": "{border.color.section}"
|
|
413
|
-
},
|
|
414
|
-
"name": "BORDER_COLOR_SECTION",
|
|
415
|
-
"attributes": {},
|
|
416
|
-
"path": [
|
|
417
|
-
"border",
|
|
418
|
-
"color",
|
|
419
|
-
"section"
|
|
420
|
-
]
|
|
421
|
-
},
|
|
422
|
-
"transparent": {
|
|
423
|
-
"key": "{border.color.transparent}",
|
|
424
|
-
"$value": "transparent",
|
|
425
|
-
"$type": "color",
|
|
426
|
-
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
427
|
-
"$extensions": {
|
|
428
|
-
"com.figma.scope": [
|
|
429
|
-
"ALL_SCOPES"
|
|
430
|
-
]
|
|
431
|
-
},
|
|
432
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
433
|
-
"isSource": true,
|
|
434
|
-
"original": {
|
|
435
|
-
"$value": "{color.alpha.0}",
|
|
436
|
-
"$type": "color",
|
|
437
|
-
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
438
|
-
"$extensions": {
|
|
439
|
-
"com.figma.scope": [
|
|
440
|
-
"ALL_SCOPES"
|
|
441
|
-
]
|
|
442
|
-
},
|
|
443
|
-
"key": "{border.color.transparent}"
|
|
444
|
-
},
|
|
445
|
-
"name": "BORDER_COLOR_TRANSPARENT",
|
|
446
|
-
"attributes": {},
|
|
447
|
-
"path": [
|
|
448
|
-
"border",
|
|
449
|
-
"color",
|
|
450
|
-
"transparent"
|
|
451
|
-
]
|
|
452
|
-
}
|
|
453
453
|
}
|
|
454
454
|
},
|
|
455
455
|
"color": {
|
|
@@ -1,5 +1,162 @@
|
|
|
1
1
|
{
|
|
2
2
|
"border": {
|
|
3
|
+
"color": {
|
|
4
|
+
"transparent": {
|
|
5
|
+
"key": "{border.color.transparent}",
|
|
6
|
+
"$value": "transparent",
|
|
7
|
+
"$type": "color",
|
|
8
|
+
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
9
|
+
"$extensions": {
|
|
10
|
+
"com.figma.scope": [
|
|
11
|
+
"ALL_SCOPES"
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
"filePath": "src/tokens/constant/border.tokens.json",
|
|
15
|
+
"isSource": true,
|
|
16
|
+
"original": {
|
|
17
|
+
"$value": "{color.alpha.0}",
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
20
|
+
"$extensions": {
|
|
21
|
+
"com.figma.scope": [
|
|
22
|
+
"ALL_SCOPES"
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
"key": "{border.color.transparent}"
|
|
26
|
+
},
|
|
27
|
+
"name": "BORDER_COLOR_TRANSPARENT",
|
|
28
|
+
"attributes": {},
|
|
29
|
+
"path": [
|
|
30
|
+
"border",
|
|
31
|
+
"color",
|
|
32
|
+
"transparent"
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
"default": {
|
|
36
|
+
"key": "{border.color.default}",
|
|
37
|
+
"$value": "#dcdcde",
|
|
38
|
+
"$type": "color",
|
|
39
|
+
"$description": "Used for the default border color.",
|
|
40
|
+
"$extensions": {
|
|
41
|
+
"com.figma.scope": [
|
|
42
|
+
"STROKE_COLOR"
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
46
|
+
"isSource": true,
|
|
47
|
+
"original": {
|
|
48
|
+
"$value": "{color.neutral.100}",
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$description": "Used for the default border color.",
|
|
51
|
+
"$extensions": {
|
|
52
|
+
"com.figma.scope": [
|
|
53
|
+
"STROKE_COLOR"
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
"key": "{border.color.default}"
|
|
57
|
+
},
|
|
58
|
+
"name": "BORDER_COLOR_DEFAULT",
|
|
59
|
+
"attributes": {},
|
|
60
|
+
"path": [
|
|
61
|
+
"border",
|
|
62
|
+
"color",
|
|
63
|
+
"default"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
"subtle": {
|
|
67
|
+
"key": "{border.color.subtle}",
|
|
68
|
+
"$value": "#ececef",
|
|
69
|
+
"$type": "color",
|
|
70
|
+
"$description": "Used for a subtle border in combination with the default background.",
|
|
71
|
+
"$extensions": {
|
|
72
|
+
"com.figma.scope": [
|
|
73
|
+
"STROKE_COLOR"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
77
|
+
"isSource": true,
|
|
78
|
+
"original": {
|
|
79
|
+
"$value": "{color.neutral.50}",
|
|
80
|
+
"$type": "color",
|
|
81
|
+
"$description": "Used for a subtle border in combination with the default background.",
|
|
82
|
+
"$extensions": {
|
|
83
|
+
"com.figma.scope": [
|
|
84
|
+
"STROKE_COLOR"
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
"key": "{border.color.subtle}"
|
|
88
|
+
},
|
|
89
|
+
"name": "BORDER_COLOR_SUBTLE",
|
|
90
|
+
"attributes": {},
|
|
91
|
+
"path": [
|
|
92
|
+
"border",
|
|
93
|
+
"color",
|
|
94
|
+
"subtle"
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
"strong": {
|
|
98
|
+
"key": "{border.color.strong}",
|
|
99
|
+
"$value": "#bfbfc3",
|
|
100
|
+
"$type": "color",
|
|
101
|
+
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
102
|
+
"$extensions": {
|
|
103
|
+
"com.figma.scope": [
|
|
104
|
+
"STROKE_COLOR"
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
108
|
+
"isSource": true,
|
|
109
|
+
"original": {
|
|
110
|
+
"$value": "{color.neutral.200}",
|
|
111
|
+
"$type": "color",
|
|
112
|
+
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
113
|
+
"$extensions": {
|
|
114
|
+
"com.figma.scope": [
|
|
115
|
+
"STROKE_COLOR"
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
"key": "{border.color.strong}"
|
|
119
|
+
},
|
|
120
|
+
"name": "BORDER_COLOR_STRONG",
|
|
121
|
+
"attributes": {},
|
|
122
|
+
"path": [
|
|
123
|
+
"border",
|
|
124
|
+
"color",
|
|
125
|
+
"strong"
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
"section": {
|
|
129
|
+
"key": "{border.color.section}",
|
|
130
|
+
"$value": "#dcdcde",
|
|
131
|
+
"$type": "color",
|
|
132
|
+
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
133
|
+
"$extensions": {
|
|
134
|
+
"com.figma.scope": [
|
|
135
|
+
"STROKE_COLOR"
|
|
136
|
+
]
|
|
137
|
+
},
|
|
138
|
+
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
139
|
+
"isSource": true,
|
|
140
|
+
"original": {
|
|
141
|
+
"$value": "{border.color.default}",
|
|
142
|
+
"$type": "color",
|
|
143
|
+
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
144
|
+
"$extensions": {
|
|
145
|
+
"com.figma.scope": [
|
|
146
|
+
"STROKE_COLOR"
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
"key": "{border.color.section}"
|
|
150
|
+
},
|
|
151
|
+
"name": "BORDER_COLOR_SECTION",
|
|
152
|
+
"attributes": {},
|
|
153
|
+
"path": [
|
|
154
|
+
"border",
|
|
155
|
+
"color",
|
|
156
|
+
"section"
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
},
|
|
3
160
|
"radius": {
|
|
4
161
|
"none": {
|
|
5
162
|
"key": "{border.radius.none}",
|
|
@@ -293,163 +450,6 @@
|
|
|
293
450
|
"default"
|
|
294
451
|
]
|
|
295
452
|
}
|
|
296
|
-
},
|
|
297
|
-
"color": {
|
|
298
|
-
"default": {
|
|
299
|
-
"key": "{border.color.default}",
|
|
300
|
-
"$value": "#dcdcde",
|
|
301
|
-
"$type": "color",
|
|
302
|
-
"$description": "Used for the default border color.",
|
|
303
|
-
"$extensions": {
|
|
304
|
-
"com.figma.scope": [
|
|
305
|
-
"STROKE_COLOR"
|
|
306
|
-
]
|
|
307
|
-
},
|
|
308
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
309
|
-
"isSource": true,
|
|
310
|
-
"original": {
|
|
311
|
-
"$value": "{color.neutral.100}",
|
|
312
|
-
"$type": "color",
|
|
313
|
-
"$description": "Used for the default border color.",
|
|
314
|
-
"$extensions": {
|
|
315
|
-
"com.figma.scope": [
|
|
316
|
-
"STROKE_COLOR"
|
|
317
|
-
]
|
|
318
|
-
},
|
|
319
|
-
"key": "{border.color.default}"
|
|
320
|
-
},
|
|
321
|
-
"name": "BORDER_COLOR_DEFAULT",
|
|
322
|
-
"attributes": {},
|
|
323
|
-
"path": [
|
|
324
|
-
"border",
|
|
325
|
-
"color",
|
|
326
|
-
"default"
|
|
327
|
-
]
|
|
328
|
-
},
|
|
329
|
-
"subtle": {
|
|
330
|
-
"key": "{border.color.subtle}",
|
|
331
|
-
"$value": "#ececef",
|
|
332
|
-
"$type": "color",
|
|
333
|
-
"$description": "Used for a subtle border in combination with the default background.",
|
|
334
|
-
"$extensions": {
|
|
335
|
-
"com.figma.scope": [
|
|
336
|
-
"STROKE_COLOR"
|
|
337
|
-
]
|
|
338
|
-
},
|
|
339
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
340
|
-
"isSource": true,
|
|
341
|
-
"original": {
|
|
342
|
-
"$value": "{color.neutral.50}",
|
|
343
|
-
"$type": "color",
|
|
344
|
-
"$description": "Used for a subtle border in combination with the default background.",
|
|
345
|
-
"$extensions": {
|
|
346
|
-
"com.figma.scope": [
|
|
347
|
-
"STROKE_COLOR"
|
|
348
|
-
]
|
|
349
|
-
},
|
|
350
|
-
"key": "{border.color.subtle}"
|
|
351
|
-
},
|
|
352
|
-
"name": "BORDER_COLOR_SUBTLE",
|
|
353
|
-
"attributes": {},
|
|
354
|
-
"path": [
|
|
355
|
-
"border",
|
|
356
|
-
"color",
|
|
357
|
-
"subtle"
|
|
358
|
-
]
|
|
359
|
-
},
|
|
360
|
-
"strong": {
|
|
361
|
-
"key": "{border.color.strong}",
|
|
362
|
-
"$value": "#bfbfc3",
|
|
363
|
-
"$type": "color",
|
|
364
|
-
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
365
|
-
"$extensions": {
|
|
366
|
-
"com.figma.scope": [
|
|
367
|
-
"STROKE_COLOR"
|
|
368
|
-
]
|
|
369
|
-
},
|
|
370
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
371
|
-
"isSource": true,
|
|
372
|
-
"original": {
|
|
373
|
-
"$value": "{color.neutral.200}",
|
|
374
|
-
"$type": "color",
|
|
375
|
-
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
|
|
376
|
-
"$extensions": {
|
|
377
|
-
"com.figma.scope": [
|
|
378
|
-
"STROKE_COLOR"
|
|
379
|
-
]
|
|
380
|
-
},
|
|
381
|
-
"key": "{border.color.strong}"
|
|
382
|
-
},
|
|
383
|
-
"name": "BORDER_COLOR_STRONG",
|
|
384
|
-
"attributes": {},
|
|
385
|
-
"path": [
|
|
386
|
-
"border",
|
|
387
|
-
"color",
|
|
388
|
-
"strong"
|
|
389
|
-
]
|
|
390
|
-
},
|
|
391
|
-
"section": {
|
|
392
|
-
"key": "{border.color.section}",
|
|
393
|
-
"$value": "#dcdcde",
|
|
394
|
-
"$type": "color",
|
|
395
|
-
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
396
|
-
"$extensions": {
|
|
397
|
-
"com.figma.scope": [
|
|
398
|
-
"STROKE_COLOR"
|
|
399
|
-
]
|
|
400
|
-
},
|
|
401
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
402
|
-
"isSource": true,
|
|
403
|
-
"original": {
|
|
404
|
-
"$value": "{border.color.default}",
|
|
405
|
-
"$type": "color",
|
|
406
|
-
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
|
|
407
|
-
"$extensions": {
|
|
408
|
-
"com.figma.scope": [
|
|
409
|
-
"STROKE_COLOR"
|
|
410
|
-
]
|
|
411
|
-
},
|
|
412
|
-
"key": "{border.color.section}"
|
|
413
|
-
},
|
|
414
|
-
"name": "BORDER_COLOR_SECTION",
|
|
415
|
-
"attributes": {},
|
|
416
|
-
"path": [
|
|
417
|
-
"border",
|
|
418
|
-
"color",
|
|
419
|
-
"section"
|
|
420
|
-
]
|
|
421
|
-
},
|
|
422
|
-
"transparent": {
|
|
423
|
-
"key": "{border.color.transparent}",
|
|
424
|
-
"$value": "transparent",
|
|
425
|
-
"$type": "color",
|
|
426
|
-
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
427
|
-
"$extensions": {
|
|
428
|
-
"com.figma.scope": [
|
|
429
|
-
"ALL_SCOPES"
|
|
430
|
-
]
|
|
431
|
-
},
|
|
432
|
-
"filePath": "src/tokens/semantic/border.tokens.json",
|
|
433
|
-
"isSource": true,
|
|
434
|
-
"original": {
|
|
435
|
-
"$value": "{color.alpha.0}",
|
|
436
|
-
"$type": "color",
|
|
437
|
-
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
438
|
-
"$extensions": {
|
|
439
|
-
"com.figma.scope": [
|
|
440
|
-
"ALL_SCOPES"
|
|
441
|
-
]
|
|
442
|
-
},
|
|
443
|
-
"key": "{border.color.transparent}"
|
|
444
|
-
},
|
|
445
|
-
"name": "BORDER_COLOR_TRANSPARENT",
|
|
446
|
-
"attributes": {},
|
|
447
|
-
"path": [
|
|
448
|
-
"border",
|
|
449
|
-
"color",
|
|
450
|
-
"transparent"
|
|
451
|
-
]
|
|
452
|
-
}
|
|
453
453
|
}
|
|
454
454
|
},
|
|
455
455
|
"color": {
|
|
@@ -581,6 +581,10 @@ $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that cove
|
|
|
581
581
|
$gl-text-primary: #ececef; // Use text.color.default instead.
|
|
582
582
|
$gl-text-secondary: #89888d; // Use text.color.subtle instead.
|
|
583
583
|
$gl-text-tertiary: #737278; // Use text.color.disabled instead.
|
|
584
|
+
$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
|
|
585
|
+
$gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
|
|
586
|
+
$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
|
|
587
|
+
$gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
|
|
584
588
|
$gl-border-radius-none: $gl-spacing-scale-0;
|
|
585
589
|
$gl-border-radius-xs: $gl-spacing-scale-px;
|
|
586
590
|
$gl-border-radius-sm: $gl-spacing-scale-1;
|
|
@@ -589,10 +593,6 @@ $gl-border-radius-lg: $gl-spacing-scale-3;
|
|
|
589
593
|
$gl-border-radius-xl: $gl-spacing-scale-4;
|
|
590
594
|
$gl-border-radius-2xl: $gl-spacing-scale-5;
|
|
591
595
|
$gl-border-radius-3xl: $gl-spacing-scale-6;
|
|
592
|
-
$gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
|
|
593
|
-
$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
|
|
594
|
-
$gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
|
|
595
|
-
$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
|
|
596
596
|
$gl-font-size-base: $gl-font-size-md;
|
|
597
597
|
$gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
|
|
598
598
|
$gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
|
|
@@ -951,8 +951,8 @@ $gl-text-color-warning: $gl-color-orange-300; // Used for text that requires cau
|
|
|
951
951
|
$gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
|
|
952
952
|
$gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
|
|
953
953
|
$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
|
|
954
|
-
$gl-border-radius-default: $gl-border-radius-md;
|
|
955
954
|
$gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
|
|
955
|
+
$gl-border-radius-default: $gl-border-radius-md;
|
|
956
956
|
$gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
|
|
957
957
|
$gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
|
|
958
958
|
$gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
|