@gitlab/ui 122.14.0 → 123.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.
- package/dist/components/base/avatar/avatar.js +22 -12
- package/dist/components/base/avatar/utils.js +17 -0
- package/dist/components/base/avatar_labeled/avatar_labeled.js +83 -2
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +53 -2
- package/dist/tokens/build/js/tokens.js +53 -2
- package/dist/tokens/css/tokens.css +4 -1
- package/dist/tokens/css/tokens.dark.css +4 -1
- package/dist/tokens/docs/tokens-tailwind-docs.dark.json +201 -0
- package/dist/tokens/docs/tokens-tailwind-docs.json +201 -0
- package/dist/tokens/figma/constants.tokens.json +85 -0
- package/dist/tokens/js/tokens.dark.js +63 -1
- package/dist/tokens/js/tokens.js +63 -1
- package/dist/tokens/json/tokens.dark.json +234 -38
- package/dist/tokens/json/tokens.json +234 -38
- package/dist/tokens/scss/_tokens.dark.scss +4 -1
- package/dist/tokens/scss/_tokens.scss +4 -1
- package/dist/tokens/scss/_tokens_custom_properties.scss +4 -1
- package/dist/tokens/tailwind/tokens.cjs +2 -0
- package/package.json +2 -5
- package/src/components/base/avatar/avatar.vue +22 -16
- package/src/components/base/avatar/utils.js +19 -0
- package/src/components/base/avatar_labeled/avatar_labeled.vue +83 -2
- package/src/tokens/build/css/tokens.css +4 -1
- package/src/tokens/build/css/tokens.dark.css +4 -1
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +201 -0
- package/src/tokens/build/docs/tokens-tailwind-docs.json +201 -0
- package/src/tokens/build/figma/constants.tokens.json +85 -0
- package/src/tokens/build/js/tokens.dark.js +63 -1
- package/src/tokens/build/js/tokens.js +63 -1
- package/src/tokens/build/json/tokens.dark.json +234 -38
- package/src/tokens/build/json/tokens.json +234 -38
- package/src/tokens/build/scss/_tokens.dark.scss +4 -1
- package/src/tokens/build/scss/_tokens.scss +4 -1
- package/src/tokens/build/scss/_tokens_custom_properties.scss +4 -1
- package/src/tokens/build/tailwind/tokens.cjs +6 -0
- package/src/tokens/constant/shadow.tokens.json +87 -0
- package/tailwind.defaults.js +3 -5
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"shadow": {
|
|
3
|
+
"sm": {
|
|
4
|
+
"$value": [
|
|
5
|
+
{
|
|
6
|
+
"color": "{shadow.color.default}",
|
|
7
|
+
"offsetX": 0,
|
|
8
|
+
"offsetY": 0,
|
|
9
|
+
"blur": "2px",
|
|
10
|
+
"spread": 0
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"color": "{shadow.color.default}",
|
|
14
|
+
"offsetX": 0,
|
|
15
|
+
"offsetY": "1px",
|
|
16
|
+
"blur": "4px",
|
|
17
|
+
"spread": 0
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
"$type": "shadow",
|
|
21
|
+
"$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
|
|
22
|
+
"$extensions": {
|
|
23
|
+
"com.figma.scope": []
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"md": {
|
|
27
|
+
"$value": [
|
|
28
|
+
{
|
|
29
|
+
"color": "{shadow.color.default}",
|
|
30
|
+
"offsetX": 0,
|
|
31
|
+
"offsetY": 0,
|
|
32
|
+
"blur": "1px",
|
|
33
|
+
"spread": 0
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"color": "{shadow.color.default}",
|
|
37
|
+
"offsetX": 0,
|
|
38
|
+
"offsetY": 0,
|
|
39
|
+
"blur": "2px",
|
|
40
|
+
"spread": 0
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"color": "{shadow.color.default}",
|
|
44
|
+
"offsetX": 0,
|
|
45
|
+
"offsetY": "2px",
|
|
46
|
+
"blur": "8px",
|
|
47
|
+
"spread": 0
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
|
+
"$type": "shadow",
|
|
51
|
+
"$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
|
|
52
|
+
"$extensions": {
|
|
53
|
+
"com.figma.scope": []
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"lg": {
|
|
57
|
+
"$value": [
|
|
58
|
+
{
|
|
59
|
+
"color": "{shadow.color.default}",
|
|
60
|
+
"offsetX": 0,
|
|
61
|
+
"offsetY": 0,
|
|
62
|
+
"blur": "2px",
|
|
63
|
+
"spread": 0
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"color": "{shadow.color.default}",
|
|
67
|
+
"offsetX": 0,
|
|
68
|
+
"offsetY": 0,
|
|
69
|
+
"blur": "2px",
|
|
70
|
+
"spread": 0
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"color": "{shadow.color.default}",
|
|
74
|
+
"offsetX": 0,
|
|
75
|
+
"offsetY": "4px",
|
|
76
|
+
"blur": "12px",
|
|
77
|
+
"spread": 0
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"$type": "shadow",
|
|
81
|
+
"$description": "Used for large surfaces that present additional context to the user.",
|
|
82
|
+
"$extensions": {
|
|
83
|
+
"com.figma.scope": []
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
package/tailwind.defaults.js
CHANGED
|
@@ -12,6 +12,7 @@ const {
|
|
|
12
12
|
borderRadius,
|
|
13
13
|
opacity,
|
|
14
14
|
zIndex,
|
|
15
|
+
boxShadow,
|
|
15
16
|
} = require('./src/tokens/build/tailwind/tokens.cjs');
|
|
16
17
|
|
|
17
18
|
const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
|
|
@@ -473,12 +474,9 @@ module.exports = {
|
|
|
473
474
|
pill: '.75rem',
|
|
474
475
|
},
|
|
475
476
|
boxShadow: {
|
|
476
|
-
DEFAULT:
|
|
477
|
-
'0 0 1px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 2px 8px var(--gl-shadow-color-default, #05050629)',
|
|
477
|
+
DEFAULT: boxShadow.md,
|
|
478
478
|
none: 'none',
|
|
479
|
-
|
|
480
|
-
md: '0 0 1px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 2px 8px var(--gl-shadow-color-default, #05050629)',
|
|
481
|
-
lg: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 4px 12px var(--gl-shadow-color-default, #05050629)',
|
|
479
|
+
...boxShadow,
|
|
482
480
|
'inner-1-blue-500': 'inset 0 0 0 1px var(--blue-500, #1f75cb)',
|
|
483
481
|
'inner-1-gray-100': 'inset 0 0 0 1px var(--gray-100, #dcdcde)',
|
|
484
482
|
'inner-1-border-default':
|