"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7563/react/features/base/ui/Tokens.ts" (2 Oct 2023, 5838 Bytes) of package /linux/misc/jitsi-meet-7563.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TypeScript source code syntax highlighting (style:
standard) with prefixed line numbers and
code folding option.
Alternatively you can here
view or
download the uninterpreted source code file.
1 // Default color palette
2 export const colors = {
3 error03: '#7A141F',
4 error04: '#A21B29',
5 error05: '#CB2233',
6 error06: '#D83848',
7 error08: '#F24D5F',
8
9 primary01: '#00112D',
10 primary02: '#00225A',
11 primary03: '#003486',
12 primary04: '#0045B3',
13 primary05: '#0056E0',
14 primary06: '#246FE5',
15 primary07: '#4687ED',
16 primary08: '#99BBF3',
17 primary09: '#CCDDF9',
18
19 surface01: '#040404',
20 surface02: '#141414',
21 surface03: '#292929',
22 surface04: '#3D3D3D',
23 surface05: '#525252',
24 surface06: '#666',
25 surface07: '#858585',
26 surface08: '#A3A3A3',
27 surface09: '#C2C2C2',
28 surface10: '#E0E0E0',
29 surface11: '#FFF',
30
31 success04: '#189B55',
32 success05: '#1EC26A',
33
34 warning05: '#F8AE1A',
35 warning06: '#FFD600',
36
37 support01: '#FF9B42',
38 support02: '#F96E57',
39 support03: '#DF486F',
40 support04: '#B23683',
41 support05: '#73348C',
42 support06: '#6A50D3',
43 support07: '#4380E2',
44 support08: '#00A8B3',
45 support09: '#2AA076'
46 };
47
48 // Mapping between the token used and the color
49 export const colorMap = {
50 // ----- Surfaces -----
51
52 // Default page background
53 uiBackground: 'surface01',
54
55 // Container backgrounds
56 ui01: 'surface02',
57 ui02: 'surface03',
58 ui03: 'surface04',
59 ui04: 'surface05',
60 ui05: 'surface06',
61 ui06: 'surface07',
62 ui07: 'surface08',
63 ui08: 'surface09',
64 ui09: 'surface10',
65 ui10: 'surface11',
66
67 // ----- Actions -----
68
69 // Primary
70 action01: 'primary06',
71 action01Hover: 'primary07',
72 action01Active: 'primary04',
73
74 // Secondary
75 action02: 'surface10',
76 action02Hover: 'surface11',
77 action02Active: 'surface09',
78
79 // Destructive
80 actionDanger: 'error05',
81 actionDangerHover: 'error06',
82 actionDangerActive: 'error04',
83
84 // Tertiary
85 action03: 'transparent',
86 action03Hover: 'surface04',
87 action03Active: 'surface03',
88
89 // Disabled
90 disabled01: 'surface09',
91
92 // Focus
93 focus01: 'primary07',
94
95 // ----- Links -----
96
97 link01: 'primary07',
98 link01Hover: 'primary08',
99 link01Active: 'primary06',
100
101 // ----- Text -----
102
103 // Primary
104 text01: 'surface11',
105
106 // Secondary
107 text02: 'surface09',
108
109 // Tertiary
110 text03: 'surface07',
111
112 // High-contrast
113 text04: 'surface01',
114
115 // Error
116 textError: 'error08',
117
118 // ----- Icons -----
119
120 // Primary
121 icon01: 'surface11',
122
123 // Secondary
124 icon02: 'surface09',
125
126 // Tertiary
127 icon03: 'surface07',
128
129 // High-contrast
130 icon04: 'surface01',
131
132 // Error
133 iconError: 'error06',
134
135 // ----- Forms -----
136
137 field01: 'surface04',
138
139 // ----- Feedback -----
140
141 // Success
142 success01: 'success05',
143 success02: 'success04',
144
145 // Warning
146 warning01: 'warning05',
147 warning02: 'warning06',
148
149 // ----- Support -----
150
151 support01: 'support01',
152 support02: 'support02',
153 support03: 'support03',
154 support04: 'support04',
155 support05: 'support05',
156 support06: 'support06',
157 support07: 'support07',
158 support08: 'support08',
159 support09: 'support09'
160 };
161
162
163 export const font = {
164 weightRegular: '400',
165 weightSemiBold: '600'
166 };
167
168 export const shape = {
169 borderRadius: 6,
170 circleRadius: 50,
171 boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)'
172 };
173
174 export const spacing
175 = [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128 ];
176
177 export const typography = {
178 labelRegular: {
179 fontSize: 12,
180 lineHeight: 16,
181 fontWeight: font.weightRegular,
182 letterSpacing: 0.16
183 },
184
185 labelBold: {
186 fontSize: 12,
187 lineHeight: 16,
188 fontWeight: font.weightSemiBold,
189 letterSpacing: 0.16
190 },
191
192 bodyShortRegular: {
193 fontSize: 14,
194 lineHeight: 20,
195 fontWeight: font.weightRegular,
196 letterSpacing: 0
197 },
198
199 bodyShortBold: {
200 fontSize: 14,
201 lineHeight: 20,
202 fontWeight: font.weightSemiBold,
203 letterSpacing: 0
204 },
205
206 bodyShortRegularLarge: {
207 fontSize: 16,
208 lineHeight: 22,
209 fontWeight: font.weightRegular,
210 letterSpacing: 0
211 },
212
213 bodyShortBoldLarge: {
214 fontSize: 16,
215 lineHeight: 22,
216 fontWeight: font.weightSemiBold,
217 letterSpacing: 0
218 },
219
220 bodyLongRegular: {
221 fontSize: 14,
222 lineHeight: 24,
223 fontWeight: font.weightRegular,
224 letterSpacing: 0
225 },
226
227 bodyLongRegularLarge: {
228 fontSize: 16,
229 lineHeight: 26,
230 fontWeight: font.weightRegular,
231 letterSpacing: 0
232 },
233
234 bodyLongBold: {
235 fontSize: 14,
236 lineHeight: 24,
237 fontWeight: font.weightSemiBold,
238 letterSpacing: 0
239 },
240
241 bodyLongBoldLarge: {
242 fontSize: 16,
243 lineHeight: 26,
244 fontWeight: font.weightSemiBold,
245 letterSpacing: 0
246 },
247
248 heading1: {
249 fontSize: 54,
250 lineHeight: 64,
251 fontWeight: font.weightSemiBold,
252 letterSpacing: 0
253 },
254
255 heading2: {
256 fontSize: 42,
257 lineHeight: 50,
258 fontWeight: font.weightSemiBold,
259 letterSpacing: 0
260 },
261
262 heading3: {
263 fontSize: 32,
264 lineHeight: 40,
265 fontWeight: font.weightSemiBold,
266 letterSpacing: 0
267 },
268
269 heading4: {
270 fontSize: 28,
271 lineHeight: 36,
272 fontWeight: font.weightSemiBold,
273 letterSpacing: 0
274 },
275
276 heading5: {
277 fontSize: 20,
278 lineHeight: 28,
279 fontWeight: font.weightSemiBold,
280 letterSpacing: 0
281 },
282
283 heading6: {
284 fontSize: 16,
285 lineHeight: 26,
286 fontWeight: font.weightSemiBold,
287 letterSpacing: 0
288 }
289 };
290
291 export const breakpoints = {
292 values: {
293 '0': 0,
294 '320': 320,
295 '400': 400,
296 '480': 480
297 }
298 };