@for-the-people-initiative/design-system 1.3.2 → 1.3.4
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/css/tokens.css +19 -0
- package/dist/scss/_tokens.scss +21 -0
- package/dist/ts/tokens.ts +20 -0
- package/package.json +2 -1
- package/src/components/Galleria/Galleria.scss +133 -1
- package/src/components/Galleria/Galleria.vue +228 -16
- package/src/components/Lightbox/Lightbox.scss +264 -0
- package/src/components/Lightbox/Lightbox.vue +274 -0
- package/src/types/index.ts +1982 -0
- package/tokens/components/lightbox.json +119 -0
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
{
|
|
2
|
+
"lightbox": {
|
|
3
|
+
"overlay": {
|
|
4
|
+
"background": {
|
|
5
|
+
"value": "rgba(0, 0, 0, 0.92)",
|
|
6
|
+
"type": "color",
|
|
7
|
+
"description": "Lightbox overlay backdrop color"
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
"zIndex": {
|
|
11
|
+
"overlay": {
|
|
12
|
+
"value": "2000",
|
|
13
|
+
"type": "number",
|
|
14
|
+
"description": "Overlay z-index (above dialogs)"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"nav": {
|
|
18
|
+
"size": {
|
|
19
|
+
"value": "48px",
|
|
20
|
+
"type": "dimension",
|
|
21
|
+
"description": "Navigation button size"
|
|
22
|
+
},
|
|
23
|
+
"iconSize": {
|
|
24
|
+
"value": "24px",
|
|
25
|
+
"type": "dimension",
|
|
26
|
+
"description": "Navigation icon size"
|
|
27
|
+
},
|
|
28
|
+
"color": {
|
|
29
|
+
"default": {
|
|
30
|
+
"value": "rgba(255, 255, 255, 0.8)",
|
|
31
|
+
"type": "color",
|
|
32
|
+
"description": "Nav button color"
|
|
33
|
+
},
|
|
34
|
+
"hover": {
|
|
35
|
+
"value": "#ffffff",
|
|
36
|
+
"type": "color",
|
|
37
|
+
"description": "Nav button hover color"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"background": {
|
|
41
|
+
"default": {
|
|
42
|
+
"value": "rgba(255, 255, 255, 0.1)",
|
|
43
|
+
"type": "color",
|
|
44
|
+
"description": "Nav button background"
|
|
45
|
+
},
|
|
46
|
+
"hover": {
|
|
47
|
+
"value": "rgba(255, 255, 255, 0.2)",
|
|
48
|
+
"type": "color",
|
|
49
|
+
"description": "Nav button hover background"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"radius": {
|
|
53
|
+
"value": "{radius.full}",
|
|
54
|
+
"type": "dimension",
|
|
55
|
+
"description": "Nav button border radius"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
"closeButton": {
|
|
59
|
+
"size": {
|
|
60
|
+
"value": "40px",
|
|
61
|
+
"type": "dimension",
|
|
62
|
+
"description": "Close button size"
|
|
63
|
+
},
|
|
64
|
+
"iconSize": {
|
|
65
|
+
"value": "20px",
|
|
66
|
+
"type": "dimension",
|
|
67
|
+
"description": "Close icon size"
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"counter": {
|
|
71
|
+
"color": {
|
|
72
|
+
"value": "rgba(255, 255, 255, 0.7)",
|
|
73
|
+
"type": "color",
|
|
74
|
+
"description": "Counter text color"
|
|
75
|
+
},
|
|
76
|
+
"fontSize": {
|
|
77
|
+
"value": "14px",
|
|
78
|
+
"type": "dimension",
|
|
79
|
+
"description": "Counter font size"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"thumbnail": {
|
|
83
|
+
"size": {
|
|
84
|
+
"value": "64px",
|
|
85
|
+
"type": "dimension",
|
|
86
|
+
"description": "Thumbnail width/height"
|
|
87
|
+
},
|
|
88
|
+
"gap": {
|
|
89
|
+
"value": "{space.xs}",
|
|
90
|
+
"type": "dimension",
|
|
91
|
+
"description": "Gap between thumbnails"
|
|
92
|
+
},
|
|
93
|
+
"radius": {
|
|
94
|
+
"value": "{radius.default}",
|
|
95
|
+
"type": "dimension",
|
|
96
|
+
"description": "Thumbnail border radius"
|
|
97
|
+
},
|
|
98
|
+
"border": {
|
|
99
|
+
"active": {
|
|
100
|
+
"value": "#ffffff",
|
|
101
|
+
"type": "color",
|
|
102
|
+
"description": "Active thumbnail border color"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"opacity": {
|
|
106
|
+
"default": {
|
|
107
|
+
"value": "0.5",
|
|
108
|
+
"type": "number",
|
|
109
|
+
"description": "Inactive thumbnail opacity"
|
|
110
|
+
},
|
|
111
|
+
"active": {
|
|
112
|
+
"value": "1",
|
|
113
|
+
"type": "number",
|
|
114
|
+
"description": "Active thumbnail opacity"
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|