@gitlab/ui 129.4.0 → 129.5.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/breadcrumb/breadcrumb.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +4 -1
- package/dist/tokens/build/js/tokens.js +4 -1
- package/package.json +1 -1
- package/src/components/base/avatar/avatar.scss +7 -7
- package/src/components/base/breadcrumb/breadcrumb.vue +1 -1
- package/src/tokens/build/css/tokens.css +3 -0
- package/src/tokens/build/css/tokens.dark.css +3 -0
- package/src/tokens/build/figma/mode.dark.json +30 -0
- package/src/tokens/build/figma/mode.json +30 -0
- package/src/tokens/build/js/tokens.dark.js +3 -0
- package/src/tokens/build/js/tokens.js +3 -0
- package/src/tokens/build/json/tokens.dark.json +111 -0
- package/src/tokens/build/json/tokens.json +111 -0
- package/src/tokens/build/scss/_tokens.dark.scss +3 -0
- package/src/tokens/build/scss/_tokens.scss +3 -0
- package/src/tokens/build/scss/_tokens_custom_properties.scss +3 -0
- package/src/tokens/contextual/avatar.tokens.json +42 -0
- package/tailwind.defaults.js +40 -0
|
@@ -35,42 +35,42 @@ $gl-avatar-identicon-texts:
|
|
|
35
35
|
@apply gl-w-5;
|
|
36
36
|
@apply gl-h-5;
|
|
37
37
|
font-size: map.get($gl-font-sizes, 100);
|
|
38
|
-
|
|
38
|
+
border-radius: var(--gl-avatar-square-border-radius-default);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@mixin gl-avatar-s24 {
|
|
42
42
|
@apply gl-w-6;
|
|
43
43
|
@apply gl-h-6;
|
|
44
44
|
font-size: map.get($gl-font-sizes, 400);
|
|
45
|
-
|
|
45
|
+
border-radius: var(--gl-avatar-square-border-radius-default);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
@mixin gl-avatar-s32 {
|
|
49
49
|
@apply gl-w-7;
|
|
50
50
|
@apply gl-h-7;
|
|
51
51
|
font-size: map.get($gl-font-sizes, 500);
|
|
52
|
-
|
|
52
|
+
border-radius: var(--gl-avatar-square-border-radius-default);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
@mixin gl-avatar-s48 {
|
|
56
56
|
@apply gl-w-9;
|
|
57
57
|
@apply gl-h-9;
|
|
58
58
|
font-size: map.get($gl-font-sizes, 600);
|
|
59
|
-
|
|
59
|
+
border-radius: var(--gl-avatar-square-border-radius-lg);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
@mixin gl-avatar-s64 {
|
|
63
63
|
@apply gl-w-11;
|
|
64
64
|
@apply gl-h-11;
|
|
65
65
|
font-size: map.get($gl-font-sizes, 700);
|
|
66
|
-
|
|
66
|
+
border-radius: var(--gl-avatar-square-border-radius-lg);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
@mixin gl-avatar-s96 {
|
|
70
70
|
@apply gl-w-13;
|
|
71
71
|
@apply gl-h-13;
|
|
72
72
|
font-size: map.get($gl-font-sizes, 800);
|
|
73
|
-
|
|
73
|
+
border-radius: var(--gl-avatar-square-border-radius-lg);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.gl-avatar {
|
|
@@ -210,7 +210,7 @@ $gl-avatar-identicon-texts:
|
|
|
210
210
|
}
|
|
211
211
|
|
|
212
212
|
.gl-avatar-circle {
|
|
213
|
-
|
|
213
|
+
border-radius: var(--gl-avatar-circle-border-radius-default);
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
.gl-avatar-identicon {
|
|
@@ -289,7 +289,7 @@ export default {
|
|
|
289
289
|
:src="item.avatarPath"
|
|
290
290
|
:size="avatarSize"
|
|
291
291
|
aria-hidden="true"
|
|
292
|
-
class="gl-breadcrumb-avatar-tile gl-border gl-mr-2
|
|
292
|
+
class="gl-breadcrumb-avatar-tile gl-border gl-mr-2"
|
|
293
293
|
shape="rect"
|
|
294
294
|
data-testid="avatar"
|
|
295
295
|
/><span class="gl-align-middle">{{ item.text }}</span>
|
|
@@ -636,6 +636,7 @@
|
|
|
636
636
|
--gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
|
|
637
637
|
--gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /** Used to define the edge of an avatar. */
|
|
638
638
|
--gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /** Used to increase the edge definition of an avatar in the hover state. */
|
|
639
|
+
--gl-avatar-circle-border-radius-default: var(--gl-border-radius-full); /** Border radius for cirlce avatars at all sizes. */
|
|
639
640
|
--gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /** Red text color for avatar fallback with no particular meaning. */
|
|
640
641
|
--gl-avatar-fallback-text-color-purple: var(--gl-color-purple-800); /** Purple text color for avatar fallback with no particular meaning. */
|
|
641
642
|
--gl-avatar-fallback-text-color-blue: var(--gl-color-blue-800); /** Blue text color for avatar fallback with no particular meaning. */
|
|
@@ -1068,6 +1069,7 @@
|
|
|
1068
1069
|
--gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */
|
|
1069
1070
|
--gl-alert-danger-title-color: var(--gl-text-color-heading); /** Used for the title color of a danger alert. */
|
|
1070
1071
|
--gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */
|
|
1072
|
+
--gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */
|
|
1071
1073
|
--gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
|
|
1072
1074
|
--gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */
|
|
1073
1075
|
--gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /** Used for the icon of a muted badge in the focus state. */
|
|
@@ -1303,6 +1305,7 @@
|
|
|
1303
1305
|
--gl-heading-6-fixed-margin-top: var(--gl-heading-default-margin-top);
|
|
1304
1306
|
--gl-heading-6-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
|
|
1305
1307
|
--gl-heading-6-fixed-color: var(--gl-text-color-heading);
|
|
1308
|
+
--gl-avatar-square-border-radius-default: var(--gl-border-radius-default); /** Border radius for square avatars at smaller sizes (16px, 24px, 32px). */
|
|
1306
1309
|
--gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */
|
|
1307
1310
|
--gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */
|
|
1308
1311
|
--gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */
|
|
@@ -651,6 +651,7 @@
|
|
|
651
651
|
--gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
|
|
652
652
|
--gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /** Used to define the edge of an avatar. */
|
|
653
653
|
--gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /** Used to increase the edge definition of an avatar in the hover state. */
|
|
654
|
+
--gl-avatar-circle-border-radius-default: var(--gl-border-radius-full); /** Border radius for cirlce avatars at all sizes. */
|
|
654
655
|
--gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /** Red text color for avatar fallback with no particular meaning. */
|
|
655
656
|
--gl-avatar-fallback-text-color-purple: var(--gl-color-purple-200); /** Purple text color for avatar fallback with no particular meaning. */
|
|
656
657
|
--gl-avatar-fallback-text-color-blue: var(--gl-color-blue-200); /** Blue text color for avatar fallback with no particular meaning. */
|
|
@@ -1081,6 +1082,7 @@
|
|
|
1081
1082
|
--gl-alert-success-background-color: var(--gl-background-color-subtle); /** Used for the background color of a success alert. */
|
|
1082
1083
|
--gl-alert-warning-background-color: var(--gl-background-color-subtle); /** Used for the background color of a warning alert. */
|
|
1083
1084
|
--gl-alert-danger-background-color: var(--gl-background-color-subtle); /** Used for the background color of a danger alert. */
|
|
1085
|
+
--gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */
|
|
1084
1086
|
--gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
|
|
1085
1087
|
--gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */
|
|
1086
1088
|
--gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /** Used for the icon of a muted badge in the focus state. */
|
|
@@ -1309,6 +1311,7 @@
|
|
|
1309
1311
|
--gl-heading-6-fixed-margin-top: var(--gl-heading-default-margin-top);
|
|
1310
1312
|
--gl-heading-6-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
|
|
1311
1313
|
--gl-heading-6-fixed-color: var(--gl-text-color-heading);
|
|
1314
|
+
--gl-avatar-square-border-radius-default: var(--gl-border-radius-default); /** Border radius for square avatars at smaller sizes (16px, 24px, 32px). */
|
|
1312
1315
|
--gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */
|
|
1313
1316
|
--gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */
|
|
1314
1317
|
--gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */
|
|
@@ -332,6 +332,36 @@
|
|
|
332
332
|
]
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
|
+
"🔒/avatar-circle-border-radius-default": {
|
|
336
|
+
"$value": "{border-radius-full}",
|
|
337
|
+
"$type": "dimension",
|
|
338
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
339
|
+
"$extensions": {
|
|
340
|
+
"com.figma.scopes": [
|
|
341
|
+
"CORNER_RADIUS"
|
|
342
|
+
]
|
|
343
|
+
}
|
|
344
|
+
},
|
|
345
|
+
"🔒/avatar-square-border-radius-default": {
|
|
346
|
+
"$value": "{border-radius-default}",
|
|
347
|
+
"$type": "dimension",
|
|
348
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
349
|
+
"$extensions": {
|
|
350
|
+
"com.figma.scopes": [
|
|
351
|
+
"CORNER_RADIUS"
|
|
352
|
+
]
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
"🔒/avatar-square-border-radius-lg": {
|
|
356
|
+
"$value": "{border-radius-lg}",
|
|
357
|
+
"$type": "dimension",
|
|
358
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
359
|
+
"$extensions": {
|
|
360
|
+
"com.figma.scopes": [
|
|
361
|
+
"CORNER_RADIUS"
|
|
362
|
+
]
|
|
363
|
+
}
|
|
364
|
+
},
|
|
335
365
|
"🔒/avatar-fallback-text-color-red": {
|
|
336
366
|
"$value": "{color-red-200}",
|
|
337
367
|
"$type": "color",
|
|
@@ -332,6 +332,36 @@
|
|
|
332
332
|
]
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
|
+
"🔒/avatar-circle-border-radius-default": {
|
|
336
|
+
"$value": "{border-radius-full}",
|
|
337
|
+
"$type": "dimension",
|
|
338
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
339
|
+
"$extensions": {
|
|
340
|
+
"com.figma.scopes": [
|
|
341
|
+
"CORNER_RADIUS"
|
|
342
|
+
]
|
|
343
|
+
}
|
|
344
|
+
},
|
|
345
|
+
"🔒/avatar-square-border-radius-default": {
|
|
346
|
+
"$value": "{border-radius-default}",
|
|
347
|
+
"$type": "dimension",
|
|
348
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
349
|
+
"$extensions": {
|
|
350
|
+
"com.figma.scopes": [
|
|
351
|
+
"CORNER_RADIUS"
|
|
352
|
+
]
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
"🔒/avatar-square-border-radius-lg": {
|
|
356
|
+
"$value": "{border-radius-lg}",
|
|
357
|
+
"$type": "dimension",
|
|
358
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
359
|
+
"$extensions": {
|
|
360
|
+
"com.figma.scopes": [
|
|
361
|
+
"CORNER_RADIUS"
|
|
362
|
+
]
|
|
363
|
+
}
|
|
364
|
+
},
|
|
335
365
|
"🔒/avatar-fallback-text-color-red": {
|
|
336
366
|
"$value": "{color-red-800}",
|
|
337
367
|
"$type": "color",
|
|
@@ -450,6 +450,9 @@ export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941';
|
|
|
450
450
|
export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'rgba(0, 0, 0, 0)';
|
|
451
451
|
export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)';
|
|
452
452
|
export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)';
|
|
453
|
+
export const GL_AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT = '9999px';
|
|
454
|
+
export const GL_AVATAR_SQUARE_BORDER_RADIUS_DEFAULT = '0.25rem';
|
|
455
|
+
export const GL_AVATAR_SQUARE_BORDER_RADIUS_LG = '0.5rem';
|
|
453
456
|
export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa';
|
|
454
457
|
export const GL_AVATAR_FALLBACK_TEXT_COLOR_PURPLE = '#cbbbf2';
|
|
455
458
|
export const GL_AVATAR_FALLBACK_TEXT_COLOR_BLUE = '#9dc7f1';
|
|
@@ -450,6 +450,9 @@ export const GL_ALERT_DANGER_BORDER_TOP_COLOR = 'rgba(0, 0, 0, 0)';
|
|
|
450
450
|
export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'rgba(0, 0, 0, 0)';
|
|
451
451
|
export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(5, 5, 6, 0.08)';
|
|
452
452
|
export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(5, 5, 6, 0.24)';
|
|
453
|
+
export const GL_AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT = '9999px';
|
|
454
|
+
export const GL_AVATAR_SQUARE_BORDER_RADIUS_DEFAULT = '0.25rem';
|
|
455
|
+
export const GL_AVATAR_SQUARE_BORDER_RADIUS_LG = '0.5rem';
|
|
453
456
|
export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#812713';
|
|
454
457
|
export const GL_AVATAR_FALLBACK_TEXT_COLOR_PURPLE = '#493c83';
|
|
455
458
|
export const GL_AVATAR_FALLBACK_TEXT_COLOR_BLUE = '#284779';
|
|
@@ -10698,6 +10698,117 @@
|
|
|
10698
10698
|
}
|
|
10699
10699
|
}
|
|
10700
10700
|
},
|
|
10701
|
+
"circle": {
|
|
10702
|
+
"border": {
|
|
10703
|
+
"radius": {
|
|
10704
|
+
"default": {
|
|
10705
|
+
"key": "{avatar.circle.border.radius.default}",
|
|
10706
|
+
"$value": "9999px",
|
|
10707
|
+
"$type": "dimension",
|
|
10708
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
10709
|
+
"$extensions": {
|
|
10710
|
+
"com.figma.scopes": [
|
|
10711
|
+
"CORNER_RADIUS"
|
|
10712
|
+
]
|
|
10713
|
+
},
|
|
10714
|
+
"filePath": "src/tokens/contextual/avatar.tokens.json",
|
|
10715
|
+
"isSource": true,
|
|
10716
|
+
"original": {
|
|
10717
|
+
"$value": "{border.radius.full}",
|
|
10718
|
+
"$type": "dimension",
|
|
10719
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
10720
|
+
"$extensions": {
|
|
10721
|
+
"com.figma.scopes": [
|
|
10722
|
+
"CORNER_RADIUS"
|
|
10723
|
+
]
|
|
10724
|
+
},
|
|
10725
|
+
"key": "{avatar.circle.border.radius.default}"
|
|
10726
|
+
},
|
|
10727
|
+
"name": "AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT",
|
|
10728
|
+
"attributes": {},
|
|
10729
|
+
"path": [
|
|
10730
|
+
"avatar",
|
|
10731
|
+
"circle",
|
|
10732
|
+
"border",
|
|
10733
|
+
"radius",
|
|
10734
|
+
"default"
|
|
10735
|
+
]
|
|
10736
|
+
}
|
|
10737
|
+
}
|
|
10738
|
+
}
|
|
10739
|
+
},
|
|
10740
|
+
"square": {
|
|
10741
|
+
"border": {
|
|
10742
|
+
"radius": {
|
|
10743
|
+
"default": {
|
|
10744
|
+
"key": "{avatar.square.border.radius.default}",
|
|
10745
|
+
"$value": "0.25rem",
|
|
10746
|
+
"$type": "dimension",
|
|
10747
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
10748
|
+
"$extensions": {
|
|
10749
|
+
"com.figma.scopes": [
|
|
10750
|
+
"CORNER_RADIUS"
|
|
10751
|
+
]
|
|
10752
|
+
},
|
|
10753
|
+
"filePath": "src/tokens/contextual/avatar.tokens.json",
|
|
10754
|
+
"isSource": true,
|
|
10755
|
+
"original": {
|
|
10756
|
+
"$value": "{border.radius.default}",
|
|
10757
|
+
"$type": "dimension",
|
|
10758
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
10759
|
+
"$extensions": {
|
|
10760
|
+
"com.figma.scopes": [
|
|
10761
|
+
"CORNER_RADIUS"
|
|
10762
|
+
]
|
|
10763
|
+
},
|
|
10764
|
+
"key": "{avatar.square.border.radius.default}"
|
|
10765
|
+
},
|
|
10766
|
+
"name": "AVATAR_SQUARE_BORDER_RADIUS_DEFAULT",
|
|
10767
|
+
"attributes": {},
|
|
10768
|
+
"path": [
|
|
10769
|
+
"avatar",
|
|
10770
|
+
"square",
|
|
10771
|
+
"border",
|
|
10772
|
+
"radius",
|
|
10773
|
+
"default"
|
|
10774
|
+
]
|
|
10775
|
+
},
|
|
10776
|
+
"lg": {
|
|
10777
|
+
"key": "{avatar.square.border.radius.lg}",
|
|
10778
|
+
"$value": "0.5rem",
|
|
10779
|
+
"$type": "dimension",
|
|
10780
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
10781
|
+
"$extensions": {
|
|
10782
|
+
"com.figma.scopes": [
|
|
10783
|
+
"CORNER_RADIUS"
|
|
10784
|
+
]
|
|
10785
|
+
},
|
|
10786
|
+
"filePath": "src/tokens/contextual/avatar.tokens.json",
|
|
10787
|
+
"isSource": true,
|
|
10788
|
+
"original": {
|
|
10789
|
+
"$value": "{border.radius.lg}",
|
|
10790
|
+
"$type": "dimension",
|
|
10791
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
10792
|
+
"$extensions": {
|
|
10793
|
+
"com.figma.scopes": [
|
|
10794
|
+
"CORNER_RADIUS"
|
|
10795
|
+
]
|
|
10796
|
+
},
|
|
10797
|
+
"key": "{avatar.square.border.radius.lg}"
|
|
10798
|
+
},
|
|
10799
|
+
"name": "AVATAR_SQUARE_BORDER_RADIUS_LG",
|
|
10800
|
+
"attributes": {},
|
|
10801
|
+
"path": [
|
|
10802
|
+
"avatar",
|
|
10803
|
+
"square",
|
|
10804
|
+
"border",
|
|
10805
|
+
"radius",
|
|
10806
|
+
"lg"
|
|
10807
|
+
]
|
|
10808
|
+
}
|
|
10809
|
+
}
|
|
10810
|
+
}
|
|
10811
|
+
},
|
|
10701
10812
|
"fallback": {
|
|
10702
10813
|
"text": {
|
|
10703
10814
|
"color": {
|
|
@@ -10698,6 +10698,117 @@
|
|
|
10698
10698
|
}
|
|
10699
10699
|
}
|
|
10700
10700
|
},
|
|
10701
|
+
"circle": {
|
|
10702
|
+
"border": {
|
|
10703
|
+
"radius": {
|
|
10704
|
+
"default": {
|
|
10705
|
+
"key": "{avatar.circle.border.radius.default}",
|
|
10706
|
+
"$value": "9999px",
|
|
10707
|
+
"$type": "dimension",
|
|
10708
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
10709
|
+
"$extensions": {
|
|
10710
|
+
"com.figma.scopes": [
|
|
10711
|
+
"CORNER_RADIUS"
|
|
10712
|
+
]
|
|
10713
|
+
},
|
|
10714
|
+
"filePath": "src/tokens/contextual/avatar.tokens.json",
|
|
10715
|
+
"isSource": true,
|
|
10716
|
+
"original": {
|
|
10717
|
+
"$value": "{border.radius.full}",
|
|
10718
|
+
"$type": "dimension",
|
|
10719
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
10720
|
+
"$extensions": {
|
|
10721
|
+
"com.figma.scopes": [
|
|
10722
|
+
"CORNER_RADIUS"
|
|
10723
|
+
]
|
|
10724
|
+
},
|
|
10725
|
+
"key": "{avatar.circle.border.radius.default}"
|
|
10726
|
+
},
|
|
10727
|
+
"name": "AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT",
|
|
10728
|
+
"attributes": {},
|
|
10729
|
+
"path": [
|
|
10730
|
+
"avatar",
|
|
10731
|
+
"circle",
|
|
10732
|
+
"border",
|
|
10733
|
+
"radius",
|
|
10734
|
+
"default"
|
|
10735
|
+
]
|
|
10736
|
+
}
|
|
10737
|
+
}
|
|
10738
|
+
}
|
|
10739
|
+
},
|
|
10740
|
+
"square": {
|
|
10741
|
+
"border": {
|
|
10742
|
+
"radius": {
|
|
10743
|
+
"default": {
|
|
10744
|
+
"key": "{avatar.square.border.radius.default}",
|
|
10745
|
+
"$value": "0.25rem",
|
|
10746
|
+
"$type": "dimension",
|
|
10747
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
10748
|
+
"$extensions": {
|
|
10749
|
+
"com.figma.scopes": [
|
|
10750
|
+
"CORNER_RADIUS"
|
|
10751
|
+
]
|
|
10752
|
+
},
|
|
10753
|
+
"filePath": "src/tokens/contextual/avatar.tokens.json",
|
|
10754
|
+
"isSource": true,
|
|
10755
|
+
"original": {
|
|
10756
|
+
"$value": "{border.radius.default}",
|
|
10757
|
+
"$type": "dimension",
|
|
10758
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
10759
|
+
"$extensions": {
|
|
10760
|
+
"com.figma.scopes": [
|
|
10761
|
+
"CORNER_RADIUS"
|
|
10762
|
+
]
|
|
10763
|
+
},
|
|
10764
|
+
"key": "{avatar.square.border.radius.default}"
|
|
10765
|
+
},
|
|
10766
|
+
"name": "AVATAR_SQUARE_BORDER_RADIUS_DEFAULT",
|
|
10767
|
+
"attributes": {},
|
|
10768
|
+
"path": [
|
|
10769
|
+
"avatar",
|
|
10770
|
+
"square",
|
|
10771
|
+
"border",
|
|
10772
|
+
"radius",
|
|
10773
|
+
"default"
|
|
10774
|
+
]
|
|
10775
|
+
},
|
|
10776
|
+
"lg": {
|
|
10777
|
+
"key": "{avatar.square.border.radius.lg}",
|
|
10778
|
+
"$value": "0.5rem",
|
|
10779
|
+
"$type": "dimension",
|
|
10780
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
10781
|
+
"$extensions": {
|
|
10782
|
+
"com.figma.scopes": [
|
|
10783
|
+
"CORNER_RADIUS"
|
|
10784
|
+
]
|
|
10785
|
+
},
|
|
10786
|
+
"filePath": "src/tokens/contextual/avatar.tokens.json",
|
|
10787
|
+
"isSource": true,
|
|
10788
|
+
"original": {
|
|
10789
|
+
"$value": "{border.radius.lg}",
|
|
10790
|
+
"$type": "dimension",
|
|
10791
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
10792
|
+
"$extensions": {
|
|
10793
|
+
"com.figma.scopes": [
|
|
10794
|
+
"CORNER_RADIUS"
|
|
10795
|
+
]
|
|
10796
|
+
},
|
|
10797
|
+
"key": "{avatar.square.border.radius.lg}"
|
|
10798
|
+
},
|
|
10799
|
+
"name": "AVATAR_SQUARE_BORDER_RADIUS_LG",
|
|
10800
|
+
"attributes": {},
|
|
10801
|
+
"path": [
|
|
10802
|
+
"avatar",
|
|
10803
|
+
"square",
|
|
10804
|
+
"border",
|
|
10805
|
+
"radius",
|
|
10806
|
+
"lg"
|
|
10807
|
+
]
|
|
10808
|
+
}
|
|
10809
|
+
}
|
|
10810
|
+
}
|
|
10811
|
+
},
|
|
10701
10812
|
"fallback": {
|
|
10702
10813
|
"text": {
|
|
10703
10814
|
"color": {
|
|
@@ -649,6 +649,7 @@ $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border col
|
|
|
649
649
|
$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
|
|
650
650
|
$gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
|
|
651
651
|
$gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
|
|
652
|
+
$gl-avatar-circle-border-radius-default: $gl-border-radius-full; // Border radius for cirlce avatars at all sizes.
|
|
652
653
|
$gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning.
|
|
653
654
|
$gl-avatar-fallback-text-color-purple: $gl-color-purple-200; // Purple text color for avatar fallback with no particular meaning.
|
|
654
655
|
$gl-avatar-fallback-text-color-blue: $gl-color-blue-200; // Blue text color for avatar fallback with no particular meaning.
|
|
@@ -1079,6 +1080,7 @@ $gl-alert-info-background-color: $gl-background-color-subtle; // Used for the ba
|
|
|
1079
1080
|
$gl-alert-success-background-color: $gl-background-color-subtle; // Used for the background color of a success alert.
|
|
1080
1081
|
$gl-alert-warning-background-color: $gl-background-color-subtle; // Used for the background color of a warning alert.
|
|
1081
1082
|
$gl-alert-danger-background-color: $gl-background-color-subtle; // Used for the background color of a danger alert.
|
|
1083
|
+
$gl-avatar-square-border-radius-lg: $gl-border-radius-lg; // Border radius for square avatars at larger sizes (48px, 64px, 96px).
|
|
1082
1084
|
$gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
|
|
1083
1085
|
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
|
|
1084
1086
|
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
|
|
@@ -1307,6 +1309,7 @@ $gl-heading-6-fixed-font-weight: $gl-font-weight-heading;
|
|
|
1307
1309
|
$gl-heading-6-fixed-margin-top: $gl-heading-default-margin-top;
|
|
1308
1310
|
$gl-heading-6-fixed-margin-bottom: $gl-heading-default-margin-bottom;
|
|
1309
1311
|
$gl-heading-6-fixed-color: $gl-text-color-heading;
|
|
1312
|
+
$gl-avatar-square-border-radius-default: $gl-border-radius-default; // Border radius for square avatars at smaller sizes (16px, 24px, 32px).
|
|
1310
1313
|
$gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
|
|
1311
1314
|
$gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
|
|
1312
1315
|
$gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
|
|
@@ -634,6 +634,7 @@ $gl-alert-danger-border-top-color: $gl-color-alpha-0; // Used for the border col
|
|
|
634
634
|
$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
|
|
635
635
|
$gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
|
|
636
636
|
$gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
|
|
637
|
+
$gl-avatar-circle-border-radius-default: $gl-border-radius-full; // Border radius for cirlce avatars at all sizes.
|
|
637
638
|
$gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color for avatar fallback with no particular meaning.
|
|
638
639
|
$gl-avatar-fallback-text-color-purple: $gl-color-purple-800; // Purple text color for avatar fallback with no particular meaning.
|
|
639
640
|
$gl-avatar-fallback-text-color-blue: $gl-color-blue-800; // Blue text color for avatar fallback with no particular meaning.
|
|
@@ -1066,6 +1067,7 @@ $gl-alert-warning-title-color: $gl-text-color-heading; // Used for the title col
|
|
|
1066
1067
|
$gl-alert-warning-background-color: $gl-feedback-warning-background-color; // Used for the background color of a warning alert.
|
|
1067
1068
|
$gl-alert-danger-title-color: $gl-text-color-heading; // Used for the title color of a danger alert.
|
|
1068
1069
|
$gl-alert-danger-background-color: $gl-feedback-danger-background-color; // Used for the background color of a danger alert.
|
|
1070
|
+
$gl-avatar-square-border-radius-lg: $gl-border-radius-lg; // Border radius for square avatars at larger sizes (48px, 64px, 96px).
|
|
1069
1071
|
$gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
|
|
1070
1072
|
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
|
|
1071
1073
|
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
|
|
@@ -1301,6 +1303,7 @@ $gl-heading-6-fixed-font-weight: $gl-font-weight-heading;
|
|
|
1301
1303
|
$gl-heading-6-fixed-margin-top: $gl-heading-default-margin-top;
|
|
1302
1304
|
$gl-heading-6-fixed-margin-bottom: $gl-heading-default-margin-bottom;
|
|
1303
1305
|
$gl-heading-6-fixed-color: $gl-text-color-heading;
|
|
1306
|
+
$gl-avatar-square-border-radius-default: $gl-border-radius-default; // Border radius for square avatars at smaller sizes (16px, 24px, 32px).
|
|
1304
1307
|
$gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
|
|
1305
1308
|
$gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
|
|
1306
1309
|
$gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
|
|
@@ -362,6 +362,9 @@ $gl-alert-danger-border-top-color: var(--gl-alert-danger-border-top-color);
|
|
|
362
362
|
$gl-alert-danger-border-bottom-color: var(--gl-alert-danger-border-bottom-color);
|
|
363
363
|
$gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
|
|
364
364
|
$gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
|
|
365
|
+
$gl-avatar-circle-border-radius-default: var(--gl-avatar-circle-border-radius-default);
|
|
366
|
+
$gl-avatar-square-border-radius-default: var(--gl-avatar-square-border-radius-default);
|
|
367
|
+
$gl-avatar-square-border-radius-lg: var(--gl-avatar-square-border-radius-lg);
|
|
365
368
|
$gl-avatar-fallback-text-color-red: var(--gl-avatar-fallback-text-color-red);
|
|
366
369
|
$gl-avatar-fallback-text-color-purple: var(--gl-avatar-fallback-text-color-purple);
|
|
367
370
|
$gl-avatar-fallback-text-color-blue: var(--gl-avatar-fallback-text-color-blue);
|
|
@@ -30,6 +30,48 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
|
+
"circle": {
|
|
34
|
+
"border": {
|
|
35
|
+
"radius": {
|
|
36
|
+
"default": {
|
|
37
|
+
"$value": "{border.radius.full}",
|
|
38
|
+
"$type": "dimension",
|
|
39
|
+
"$description": "Border radius for cirlce avatars at all sizes.",
|
|
40
|
+
"$extensions": {
|
|
41
|
+
"com.figma.scopes": [
|
|
42
|
+
"CORNER_RADIUS"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"square": {
|
|
50
|
+
"border": {
|
|
51
|
+
"radius": {
|
|
52
|
+
"default": {
|
|
53
|
+
"$value": "{border.radius.default}",
|
|
54
|
+
"$type": "dimension",
|
|
55
|
+
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
|
|
56
|
+
"$extensions": {
|
|
57
|
+
"com.figma.scopes": [
|
|
58
|
+
"CORNER_RADIUS"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"lg": {
|
|
63
|
+
"$value": "{border.radius.lg}",
|
|
64
|
+
"$type": "dimension",
|
|
65
|
+
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
|
|
66
|
+
"$extensions": {
|
|
67
|
+
"com.figma.scopes": [
|
|
68
|
+
"CORNER_RADIUS"
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
},
|
|
33
75
|
"fallback": {
|
|
34
76
|
"text": {
|
|
35
77
|
"color": {
|
package/tailwind.defaults.js
CHANGED
|
@@ -44,6 +44,46 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
|
|
|
44
44
|
'border-color': 'var(--gl-action-neutral-border-color-active)',
|
|
45
45
|
},
|
|
46
46
|
},
|
|
47
|
+
'.action-confirm-colors': {
|
|
48
|
+
color: 'var(--gl-action-confirm-foreground-color-default)',
|
|
49
|
+
'background-color': 'var(--gl-action-confirm-background-color-default)',
|
|
50
|
+
'border-color': 'var(--gl-action-confirm-border-color-default)',
|
|
51
|
+
'&:hover': {
|
|
52
|
+
color: 'var(--gl-action-confirm-foreground-color-hover)',
|
|
53
|
+
'background-color': 'var(--gl-action-confirm-background-color-hover)',
|
|
54
|
+
'border-color': 'var(--gl-action-confirm-border-color-hover)',
|
|
55
|
+
},
|
|
56
|
+
'&:focus': {
|
|
57
|
+
color: 'var(--gl-action-confirm-foreground-color-focus)',
|
|
58
|
+
'background-color': 'var(--gl-action-confirm-background-color-focus)',
|
|
59
|
+
'border-color': 'var(--gl-action-confirm-border-color-focus)',
|
|
60
|
+
},
|
|
61
|
+
'&:active': {
|
|
62
|
+
color: 'var(--gl-action-confirm-foreground-color-active)',
|
|
63
|
+
'background-color': 'var(--gl-action-confirm-background-color-active)',
|
|
64
|
+
'border-color': 'var(--gl-action-confirm-border-color-active)',
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
'.action-danger-colors': {
|
|
68
|
+
color: 'var(--gl-action-danger-foreground-color-default)',
|
|
69
|
+
'background-color': 'var(--gl-action-danger-background-color-default)',
|
|
70
|
+
'border-color': 'var(--gl-action-danger-border-color-default)',
|
|
71
|
+
'&:hover': {
|
|
72
|
+
color: 'var(--gl-action-danger-foreground-color-hover)',
|
|
73
|
+
'background-color': 'var(--gl-action-danger-background-color-hover)',
|
|
74
|
+
'border-color': 'var(--gl-action-danger-border-color-hover)',
|
|
75
|
+
},
|
|
76
|
+
'&:focus': {
|
|
77
|
+
color: 'var(--gl-action-danger-foreground-color-focus)',
|
|
78
|
+
'background-color': 'var(--gl-action-danger-background-color-focus)',
|
|
79
|
+
'border-color': 'var(--gl-action-danger-border-color-focus)',
|
|
80
|
+
},
|
|
81
|
+
'&:active': {
|
|
82
|
+
color: 'var(--gl-action-danger-foreground-color-active)',
|
|
83
|
+
'background-color': 'var(--gl-action-danger-background-color-active)',
|
|
84
|
+
'border-color': 'var(--gl-action-danger-border-color-active)',
|
|
85
|
+
},
|
|
86
|
+
},
|
|
47
87
|
'.bg-action-neutral': {
|
|
48
88
|
'background-color': 'var(--gl-action-neutral-background-color-default)',
|
|
49
89
|
'&:hover': {
|