@breadstone/mosaik-themes 0.0.170 → 0.0.172

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.
Files changed (40) hide show
  1. package/CHANGELOG.md +263 -15
  2. package/Index.d.ts +1 -1
  3. package/Index.d.ts.map +1 -1
  4. package/Index.js +1 -1
  5. package/Index.js.map +1 -1
  6. package/README.md +41 -12
  7. package/Themes/cosmopolitan.scss +16 -6
  8. package/Themes/joy.scss +4 -0
  9. package/Themes/{retro.scss → memphis.scss} +1927 -1887
  10. package/Theming/MemphisTheme.d.ts +13 -0
  11. package/Theming/MemphisTheme.d.ts.map +1 -0
  12. package/Theming/{RetroTheme.js → MemphisTheme.js} +22 -22
  13. package/Theming/MemphisTheme.js.map +1 -0
  14. package/Theming/ThemeGenerator.d.ts +2 -2
  15. package/Theming/ThemeGenerator.d.ts.map +1 -1
  16. package/Theming/ThemeGenerator.js +9 -9
  17. package/Theming/ThemeGenerator.js.map +1 -1
  18. package/Theming/Tokens/{RetroTokens.d.ts → MemphisTokens.d.ts} +2 -2
  19. package/Theming/Tokens/MemphisTokens.d.ts.map +1 -0
  20. package/Theming/Tokens/{RetroTokens.js → MemphisTokens.js} +2 -2
  21. package/Theming/Tokens/MemphisTokens.js.map +1 -0
  22. package/_index.scss +3 -3
  23. package/package.json +2 -2
  24. package/Themes/___bootstrap-tokens.css +0 -91
  25. package/Themes/___cosmopolitan-tokens.css +0 -213
  26. package/Themes/___fluent-tokens.css +0 -30
  27. package/Themes/___joy-tokens.css +0 -501
  28. package/Themes/___material-tokens.css +0 -22
  29. package/Themes/___retro-tokens.css +0 -391
  30. package/Themes/bootstrap-tokens.scss +0 -89
  31. package/Themes/cosmopolitan-tokens.scss +0 -211
  32. package/Themes/fluent-tokens.scss +0 -28
  33. package/Themes/joy-tokens.scss +0 -499
  34. package/Themes/material-tokens.scss +0 -20
  35. package/Themes/retro-tokens.scss +0 -389
  36. package/Theming/RetroTheme.d.ts +0 -13
  37. package/Theming/RetroTheme.d.ts.map +0 -1
  38. package/Theming/RetroTheme.js.map +0 -1
  39. package/Theming/Tokens/RetroTokens.d.ts.map +0 -1
  40. package/Theming/Tokens/RetroTokens.js.map +0 -1
@@ -1,391 +0,0 @@
1
- :root {
2
- --name: "retro";
3
- --font-family: Nunito, sans-serif;
4
- --layout-radius: 0px;
5
- --layout-space: 10px;
6
- --layout-thickness: 3px;
7
- --scheme-light-background: #eaeaea;
8
- --scheme-light-foreground: #3c454f;
9
- --scheme-light-highlight: #d1d1d1;
10
- --scheme-light-middlelight: #8a8a8a;
11
- --scheme-light-lowlight: #5c5c5c;
12
- --scheme-light-transparent: rgba(255, 255, 255, 0);
13
- --scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
14
- --scheme-light-disabled: #686868;
15
- --scheme-light-contrast: #333333;
16
- --scheme-dark-background: #151515;
17
- --scheme-dark-foreground: #c3bab0;
18
- --scheme-dark-highlight: #2e2e2e;
19
- --scheme-dark-middlelight: #757575;
20
- --scheme-dark-lowlight: #a3a3a3;
21
- --scheme-dark-transparent: rgba(255, 255, 255, 0);
22
- --scheme-dark-semi-transparent: rgba(0, 0, 0, 0.67);
23
- --scheme-dark-disabled: #474747;
24
- --scheme-dark-contrast: #ffffff;
25
- --color-light-primary-0: #ffffff;
26
- --color-light-primary-50: #f9f9f9;
27
- --color-light-primary-100: #f2f2f2;
28
- --color-light-primary-200: #e8e8e8;
29
- --color-light-primary-300: #d8d8d8;
30
- --color-light-primary-400: #b4b4b4;
31
- --color-light-primary-500: #949494;
32
- --color-light-primary-600: #6c6c6c;
33
- --color-light-primary-700: #595959;
34
- --color-light-primary-800: #3a3a3a;
35
- --color-light-primary-900: #1a1a1a;
36
- --color-light-secondary-0: #ffffff;
37
- --color-light-secondary-50: #e1f3ef;
38
- --color-light-secondary-100: #b5e0d6;
39
- --color-light-secondary-200: #85cdbc;
40
- --color-light-secondary-300: #57b9a2;
41
- --color-light-secondary-400: #38a990;
42
- --color-light-secondary-500: #24997e;
43
- --color-light-secondary-600: #208c71;
44
- --color-light-secondary-700: #1b7c62;
45
- --color-light-secondary-800: #166c54;
46
- --color-light-secondary-900: #0d503a;
47
- --color-light-info-0: #ffffff;
48
- --color-light-info-50: #e8eaf9;
49
- --color-light-info-100: #c6c9f1;
50
- --color-light-info-200: #9fa7e7;
51
- --color-light-info-300: #7884dd;
52
- --color-light-info-400: #5968d6;
53
- --color-light-info-500: #394dcd;
54
- --color-light-info-600: #3344c2;
55
- --color-light-info-700: #293ab6;
56
- --color-light-info-800: #202faa;
57
- --color-light-info-900: #0a1a97;
58
- --color-light-warning-0: #ffffff;
59
- --color-light-warning-50: #fcfce5;
60
- --color-light-warning-100: #f7f6bf;
61
- --color-light-warning-200: #f1f294;
62
- --color-light-warning-300: #ebec67;
63
- --color-light-warning-400: #e5e741;
64
- --color-light-warning-500: #dfe300;
65
- --color-light-warning-600: #d1d100;
66
- --color-light-warning-700: #bfba00;
67
- --color-light-warning-800: #aea300;
68
- --color-light-warning-900: #927c00;
69
- --color-light-danger-0: #ffffff;
70
- --color-light-danger-50: #fcecef;
71
- --color-light-danger-100: #f8d0d5;
72
- --color-light-danger-200: #e69fa1;
73
- --color-light-danger-300: #d97b7d;
74
- --color-light-danger-400: #e35f5f;
75
- --color-light-danger-500: #e8524a;
76
- --color-light-danger-600: #d94a47;
77
- --color-light-danger-700: #c74141;
78
- --color-light-danger-800: #b93c3a;
79
- --color-light-danger-900: #ab322f;
80
- --color-light-success-0: #ffffff;
81
- --color-light-success-50: #e1f3ef;
82
- --color-light-success-100: #b5e0d6;
83
- --color-light-success-200: #85cdbc;
84
- --color-light-success-300: #57b9a2;
85
- --color-light-success-400: #38a990;
86
- --color-light-success-500: #24997e;
87
- --color-light-success-600: #208c71;
88
- --color-light-success-700: #1b7c62;
89
- --color-light-success-800: #166c54;
90
- --color-light-success-900: #0d503a;
91
- --color-light-neutral-0: #ffffff;
92
- --color-light-neutral-50: #f9f9f9;
93
- --color-light-neutral-100: #f2f2f2;
94
- --color-light-neutral-200: #e8e8e8;
95
- --color-light-neutral-300: #d8d8d8;
96
- --color-light-neutral-400: #b4b4b4;
97
- --color-light-neutral-500: #949494;
98
- --color-light-neutral-600: #6c6c6c;
99
- --color-light-neutral-700: #595959;
100
- --color-light-neutral-800: #3a3a3a;
101
- --color-light-neutral-900: #1a1a1a;
102
- --color-dark-primary-0: #000000;
103
- --color-dark-primary-50: #1a1a1a;
104
- --color-dark-primary-100: #3a3a3a;
105
- --color-dark-primary-200: #595959;
106
- --color-dark-primary-300: #6c6c6c;
107
- --color-dark-primary-400: #949494;
108
- --color-dark-primary-500: #b4b4b4;
109
- --color-dark-primary-600: #d8d8d8;
110
- --color-dark-primary-700: #e8e8e8;
111
- --color-dark-primary-800: #f2f2f2;
112
- --color-dark-primary-900: #f9f9f9;
113
- --color-dark-secondary-0: #000000;
114
- --color-dark-secondary-50: #0d503a;
115
- --color-dark-secondary-100: #166c54;
116
- --color-dark-secondary-200: #1b7c62;
117
- --color-dark-secondary-300: #208c71;
118
- --color-dark-secondary-400: #24997e;
119
- --color-dark-secondary-500: #38a990;
120
- --color-dark-secondary-600: #57b9a2;
121
- --color-dark-secondary-700: #85cdbc;
122
- --color-dark-secondary-800: #b5e0d6;
123
- --color-dark-secondary-900: #e1f3ef;
124
- --color-dark-info-0: #000000;
125
- --color-dark-info-50: #0a1a97;
126
- --color-dark-info-100: #202faa;
127
- --color-dark-info-200: #293ab6;
128
- --color-dark-info-300: #3344c2;
129
- --color-dark-info-400: #394dcd;
130
- --color-dark-info-500: #5968d6;
131
- --color-dark-info-600: #7884dd;
132
- --color-dark-info-700: #9fa7e7;
133
- --color-dark-info-800: #c6c9f1;
134
- --color-dark-info-900: #e8eaf9;
135
- --color-dark-warning-0: #000000;
136
- --color-dark-warning-50: #927c00;
137
- --color-dark-warning-100: #aea300;
138
- --color-dark-warning-200: #bfba00;
139
- --color-dark-warning-300: #d1d100;
140
- --color-dark-warning-400: #dfe300;
141
- --color-dark-warning-500: #e5e741;
142
- --color-dark-warning-600: #ebec67;
143
- --color-dark-warning-700: #f1f294;
144
- --color-dark-warning-800: #f7f6bf;
145
- --color-dark-warning-900: #fcfce5;
146
- --color-dark-danger-0: #000000;
147
- --color-dark-danger-50: #ab322f;
148
- --color-dark-danger-100: #b93c3a;
149
- --color-dark-danger-200: #c74141;
150
- --color-dark-danger-300: #d94a47;
151
- --color-dark-danger-400: #e8524a;
152
- --color-dark-danger-500: #e35f5f;
153
- --color-dark-danger-600: #d97b7d;
154
- --color-dark-danger-700: #e69fa1;
155
- --color-dark-danger-800: #f8d0d5;
156
- --color-dark-danger-900: #fcecef;
157
- --color-dark-success-0: #000000;
158
- --color-dark-success-50: #0d503a;
159
- --color-dark-success-100: #166c54;
160
- --color-dark-success-200: #1b7c62;
161
- --color-dark-success-300: #208c71;
162
- --color-dark-success-400: #24997e;
163
- --color-dark-success-500: #38a990;
164
- --color-dark-success-600: #57b9a2;
165
- --color-dark-success-700: #85cdbc;
166
- --color-dark-success-800: #b5e0d6;
167
- --color-dark-success-900: #e1f3ef;
168
- --color-dark-neutral-0: #000000;
169
- --color-dark-neutral-50: #1a1a1a;
170
- --color-dark-neutral-100: #3a3a3a;
171
- --color-dark-neutral-200: #595959;
172
- --color-dark-neutral-300: #6c6c6c;
173
- --color-dark-neutral-400: #949494;
174
- --color-dark-neutral-500: #b4b4b4;
175
- --color-dark-neutral-600: #d8d8d8;
176
- --color-dark-neutral-700: #e8e8e8;
177
- --color-dark-neutral-800: #f2f2f2;
178
- --color-dark-neutral-900: #f9f9f9;
179
- --typography-headline1-font-size: 96px;
180
- --typography-headline1-line-height: 100px;
181
- --typography-headline1-font-weight: 300;
182
- --typography-headline1-letter-spacing: -0.25px;
183
- --typography-headline1-text-decoration: none;
184
- --typography-headline1-text-transform: none;
185
- --typography-headline2-font-size: 60px;
186
- --typography-headline2-line-height: 64px;
187
- --typography-headline2-font-weight: 300;
188
- --typography-headline2-letter-spacing: -0.13333333333333333px;
189
- --typography-headline2-text-decoration: none;
190
- --typography-headline2-text-transform: none;
191
- --typography-headline3-font-size: 48px;
192
- --typography-headline3-line-height: 52px;
193
- --typography-headline3-font-weight: 400;
194
- --typography-headline3-letter-spacing: normal;
195
- --typography-headline3-text-decoration: none;
196
- --typography-headline3-text-transform: none;
197
- --typography-headline4-font-size: 34px;
198
- --typography-headline4-line-height: 38px;
199
- --typography-headline4-font-weight: 400;
200
- --typography-headline4-letter-spacing: 0.11764705882352941px;
201
- --typography-headline4-text-decoration: none;
202
- --typography-headline4-text-transform: none;
203
- --typography-headline5-font-size: 24px;
204
- --typography-headline5-line-height: 28px;
205
- --typography-headline5-font-weight: 400;
206
- --typography-headline5-letter-spacing: normal;
207
- --typography-headline5-text-decoration: none;
208
- --typography-headline5-text-transform: none;
209
- --typography-headline6-font-size: 20px;
210
- --typography-headline6-line-height: 24px;
211
- --typography-headline6-font-weight: 500;
212
- --typography-headline6-letter-spacing: 0.2px;
213
- --typography-headline6-text-decoration: none;
214
- --typography-headline6-text-transform: none;
215
- --typography-subtitle1-font-size: 16px;
216
- --typography-subtitle1-line-height: 20px;
217
- --typography-subtitle1-font-weight: 400;
218
- --typography-subtitle1-letter-spacing: 0.15px;
219
- --typography-subtitle1-text-decoration: none;
220
- --typography-subtitle1-text-transform: none;
221
- --typography-subtitle2-font-size: 14px;
222
- --typography-subtitle2-line-height: 18px;
223
- --typography-subtitle2-font-weight: 500;
224
- --typography-subtitle2-letter-spacing: 0.1142857142857143px;
225
- --typography-subtitle2-text-decoration: none;
226
- --typography-subtitle2-text-transform: none;
227
- --typography-body1-font-size: 16px;
228
- --typography-body1-line-height: 20px;
229
- --typography-body1-font-weight: 400;
230
- --typography-body1-letter-spacing: 0.5px;
231
- --typography-body1-text-decoration: none;
232
- --typography-body1-text-transform: none;
233
- --typography-body2-font-size: 14px;
234
- --typography-body2-line-height: 18px;
235
- --typography-body2-font-weight: 400;
236
- --typography-body2-letter-spacing: 0.2857142857142857px;
237
- --typography-body2-text-decoration: none;
238
- --typography-body2-text-transform: none;
239
- --typography-caption-font-size: 12px;
240
- --typography-caption-line-height: 16px;
241
- --typography-caption-font-weight: 400;
242
- --typography-caption-letter-spacing: 0.5333333333333333px;
243
- --typography-caption-text-decoration: none;
244
- --typography-caption-text-transform: none;
245
- --typography-button-font-size: 14px;
246
- --typography-button-line-height: 18px;
247
- --typography-button-font-weight: 700;
248
- --typography-button-letter-spacing: 1.4285714285714286px;
249
- --typography-button-text-decoration: none;
250
- --typography-button-text-transform: none;
251
- --typography-overline-font-size: 12px;
252
- --typography-overline-line-height: 16px;
253
- --typography-overline-font-weight: 500;
254
- --typography-overline-letter-spacing: 2.6666666666666665px;
255
- --typography-overline-text-decoration: none;
256
- --typography-overline-text-transform: none;
257
- --elevation-none: none;
258
- --elevation-light-light-offset-x-0: 2px;
259
- --elevation-light-light-offset-y-0: 2px;
260
- --elevation-light-light-blur-0: 0px;
261
- --elevation-light-light-spread-0: 0px;
262
- --elevation-light-semilight-offset-x-0: 3px;
263
- --elevation-light-semilight-offset-y-0: 3px;
264
- --elevation-light-semilight-blur-0: 0px;
265
- --elevation-light-semilight-spread-0: 0px;
266
- --elevation-light-regular-offset-x-0: 4px;
267
- --elevation-light-regular-offset-y-0: 4px;
268
- --elevation-light-regular-blur-0: 0px;
269
- --elevation-light-regular-spread-0: 0px;
270
- --elevation-light-semibold-offset-x-0: 5px;
271
- --elevation-light-semibold-offset-y-0: 5px;
272
- --elevation-light-semibold-blur-0: 0px;
273
- --elevation-light-semibold-spread-0: 0px;
274
- --elevation-light-bold-offset-x-0: 6px;
275
- --elevation-light-bold-offset-y-0: 6px;
276
- --elevation-light-bold-blur-0: 0px;
277
- --elevation-light-bold-spread-0: 0px;
278
- --elevation-light-extrabold-offset-x-0: 7px;
279
- --elevation-light-extrabold-offset-y-0: 7px;
280
- --elevation-light-extrabold-blur-0: 0px;
281
- --elevation-light-extrabold-spread-0: 0px;
282
- --elevation-dark-light-offset-x-0: 2px;
283
- --elevation-dark-light-offset-y-0: 2px;
284
- --elevation-dark-light-blur-0: 0px;
285
- --elevation-dark-light-spread-0: 0px;
286
- --elevation-dark-semilight-offset-x-0: 3px;
287
- --elevation-dark-semilight-offset-y-0: 3px;
288
- --elevation-dark-semilight-blur-0: 0px;
289
- --elevation-dark-semilight-spread-0: 0px;
290
- --elevation-dark-regular-offset-x-0: 4px;
291
- --elevation-dark-regular-offset-y-0: 4px;
292
- --elevation-dark-regular-blur-0: 0px;
293
- --elevation-dark-regular-spread-0: 0px;
294
- --elevation-dark-semibold-offset-x-0: 5px;
295
- --elevation-dark-semibold-offset-y-0: 5px;
296
- --elevation-dark-semibold-blur-0: 0px;
297
- --elevation-dark-semibold-spread-0: 0px;
298
- --elevation-dark-bold-offset-x-0: 6px;
299
- --elevation-dark-bold-offset-y-0: 6px;
300
- --elevation-dark-bold-blur-0: 0px;
301
- --elevation-dark-bold-spread-0: 0px;
302
- --elevation-dark-extrabold-offset-x-0: 7px;
303
- --elevation-dark-extrabold-offset-y-0: 7px;
304
- --elevation-dark-extrabold-blur-0: 0px;
305
- --elevation-dark-extrabold-spread-0: 0px;
306
- --size-tiny: 2px;
307
- --size-small: 4px;
308
- --size-medium: 8px;
309
- --size-large: 16px;
310
- --size-giant: 32px;
311
- --size-key-tiny: "tiny";
312
- --size-key-small: "small";
313
- --size-key-medium: "medium";
314
- --size-key-large: "large";
315
- --size-key-giant: "giant";
316
- --typography-key-headline1: "headline1";
317
- --typography-key-headline2: "headline2";
318
- --typography-key-headline3: "headline3";
319
- --typography-key-headline4: "headline4";
320
- --typography-key-headline5: "headline5";
321
- --typography-key-headline6: "headline6";
322
- --typography-key-subtitle1: "subtitle1";
323
- --typography-key-subtitle2: "subtitle2";
324
- --typography-key-body1: "body1";
325
- --typography-key-body2: "body2";
326
- --typography-key-caption: "caption";
327
- --typography-key-button: "button";
328
- --typography-key-overline: "overline";
329
- --elevation-key-light: "light";
330
- --elevation-key-semilight: "semilight";
331
- --elevation-key-regular: "regular";
332
- --elevation-key-semibold: "semibold";
333
- --elevation-key-bold: "bold";
334
- --elevation-key-extrabold: "extrabold";
335
- --appearance-default: "default";
336
- --appearance-outline: "outline";
337
- --appearance-plain: "plain";
338
- --appearance-soft: "soft";
339
- --appearance-solid: "solid";
340
- --variant-primary: "primary";
341
- --variant-secondary: "secondary";
342
- --variant-info: "info";
343
- --variant-warning: "warning";
344
- --variant-danger: "danger";
345
- --variant-success: "success";
346
- --variant-neutral: "neutral";
347
- --duration-short: 200ms;
348
- --duration-medium: 400ms;
349
- --duration-long: 600ms;
350
- --typography-headline1-font-family: var(--font-family);
351
- --typography-headline2-font-family: var(--font-family);
352
- --typography-headline3-font-family: var(--font-family);
353
- --typography-headline4-font-family: var(--font-family);
354
- --typography-headline5-font-family: var(--font-family);
355
- --typography-headline6-font-family: var(--font-family);
356
- --typography-subtitle1-font-family: var(--font-family);
357
- --typography-subtitle2-font-family: var(--font-family);
358
- --typography-body1-font-family: var(--font-family);
359
- --typography-body2-font-family: var(--font-family);
360
- --typography-caption-font-family: var(--font-family);
361
- --typography-button-font-family: var(--font-family);
362
- --typography-overline-font-family: var(--font-family);
363
- --elevation-light-light: 2px 2px 0px 0px var(--scheme-light-contrast);
364
- --elevation-light-light-color-0: var(--scheme-light-contrast);
365
- --elevation-light-semilight: 3px 3px 0px 0px var(--scheme-light-contrast);
366
- --elevation-light-semilight-color-0: var(--scheme-light-contrast);
367
- --elevation-light-regular: 4px 4px 0px 0px var(--scheme-light-contrast);
368
- --elevation-light-regular-color-0: var(--scheme-light-contrast);
369
- --elevation-light-semibold: 5px 5px 0px 0px var(--scheme-light-contrast);
370
- --elevation-light-semibold-color-0: var(--scheme-light-contrast);
371
- --elevation-light-bold: 6px 6px 0px 0px var(--scheme-light-contrast);
372
- --elevation-light-bold-color-0: var(--scheme-light-contrast);
373
- --elevation-light-extrabold: 7px 7px 0px 0px var(--scheme-light-contrast);
374
- --elevation-light-extrabold-color-0: var(--scheme-light-contrast);
375
- --elevation-dark-light: 2px 2px 0px 0px var(--scheme-dark-contrast);
376
- --elevation-dark-light-color-0: var(--scheme-dark-contrast);
377
- --elevation-dark-semilight: 3px 3px 0px 0px var(--scheme-dark-contrast);
378
- --elevation-dark-semilight-color-0: var(--scheme-dark-contrast);
379
- --elevation-dark-regular: 4px 4px 0px 0px var(--scheme-dark-contrast);
380
- --elevation-dark-regular-color-0: var(--scheme-dark-contrast);
381
- --elevation-dark-semibold: 5px 5px 0px 0px var(--scheme-dark-contrast);
382
- --elevation-dark-semibold-color-0: var(--scheme-dark-contrast);
383
- --elevation-dark-bold: 6px 6px 0px 0px var(--scheme-dark-contrast);
384
- --elevation-dark-bold-color-0: var(--scheme-dark-contrast);
385
- --elevation-dark-extrabold: 7px 7px 0px 0px var(--scheme-dark-contrast);
386
- --elevation-dark-extrabold-color-0: var(--scheme-dark-contrast);
387
- --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
388
- --elevation-key: var(--elevation-key-light) var(--elevation-key-semilight) var(--elevation-key-regular) var(--elevation-key-semibold) var(--elevation-key-bold) var(--elevation-key-extrabold);
389
- --appearance: var(--appearance-default) var(--appearance-outline) var(--appearance-plain) var(--appearance-soft) var(--appearance-solid);
390
- --variant: var(--variant-primary) var(--variant-secondary) var(--variant-info) var(--variant-warning) var(--variant-danger) var(--variant-success) var(--variant-neutral);
391
- }
@@ -1,89 +0,0 @@
1
- $name: "bootstrap";
2
- $font-family: 'Inter', Roboto, Helvetica, sans-serif;
3
- $layout-radius: 12px;
4
- $layout-space: 8px;
5
- $layout-thickness: 2px;
6
- $color-light-primary-100: #cfe2ff;
7
- $color-light-primary-200: #9ec5fe;
8
- $color-light-primary-300: #6ea8fe;
9
- $color-light-primary-400: #3d8bfd;
10
- $color-light-primary-500: #0d6efd;
11
- $color-light-primary-600: #0a58ca;
12
- $color-light-primary-700: #084298;
13
- $color-light-primary-800: #052c65;
14
- $color-light-primary-900: #031633;
15
- $color-light-secondary-100: #f8f9fa;
16
- $color-light-secondary-200: #e9ecef;
17
- $color-light-secondary-300: #dee2e6;
18
- $color-light-secondary-400: #ced4da;
19
- $color-light-secondary-500: #adb5bd;
20
- $color-light-secondary-600: #6c757d;
21
- $color-light-secondary-700: #495057;
22
- $color-light-secondary-800: #343a40;
23
- $color-light-secondary-900: #212529;
24
- $color-dark-primary-100: #cfe2ff;
25
- $color-dark-primary-200: #9ec5fe;
26
- $color-dark-primary-300: #6ea8fe;
27
- $color-dark-primary-400: #3d8bfd;
28
- $color-dark-primary-500: #0d6efd;
29
- $color-dark-primary-600: #0a58ca;
30
- $color-dark-primary-700: #084298;
31
- $color-dark-primary-800: #052c65;
32
- $color-dark-primary-900: #031633;
33
- $color-dark-secondary-100: #f8f9fa;
34
- $color-dark-secondary-200: #e9ecef;
35
- $color-dark-secondary-300: #dee2e6;
36
- $color-dark-secondary-400: #ced4da;
37
- $color-dark-secondary-500: #adb5bd;
38
- $color-dark-secondary-600: #6c757d;
39
- $color-dark-secondary-700: #495057;
40
- $color-dark-secondary-800: #343a40;
41
- $color-dark-secondary-900: #212529;
42
- $typography-headline1-font-size: 80px;
43
- $typography-headline1-line-height: 1.2;
44
- $typography-headline1-font-weight: 300;
45
- $typography-headline1-letter-spacing: 0;
46
- $typography-headline1-text-decoration: none;
47
- $typography-headline1-text-transform: none;
48
- $typography-headline2-font-size: 72px;
49
- $typography-headline2-line-height: 1.2;
50
- $typography-headline2-font-weight: 300;
51
- $typography-headline2-letter-spacing: 0;
52
- $typography-headline2-text-decoration: none;
53
- $typography-headline2-text-transform: none;
54
- $typography-headline3-font-size: 64px;
55
- $typography-headline3-line-height: 1.2;
56
- $typography-headline3-font-weight: 300;
57
- $typography-headline3-letter-spacing: 0;
58
- $typography-headline3-text-decoration: none;
59
- $typography-headline3-text-transform: none;
60
- $typography-headline4-font-size: 56px;
61
- $typography-headline4-line-height: 1.2;
62
- $typography-headline4-font-weight: 300;
63
- $typography-headline4-letter-spacing: 0;
64
- $typography-headline4-text-decoration: none;
65
- $typography-headline4-text-transform: none;
66
- $typography-headline5-font-size: 48px;
67
- $typography-headline5-line-height: 1.2;
68
- $typography-headline5-font-weight: 300;
69
- $typography-headline5-letter-spacing: 0;
70
- $typography-headline5-text-decoration: none;
71
- $typography-headline5-text-transform: none;
72
- $typography-headline6-font-size: 40px;
73
- $typography-headline6-line-height: 1.2;
74
- $typography-headline6-font-weight: 300;
75
- $typography-headline6-letter-spacing: 0;
76
- $typography-headline6-text-decoration: none;
77
- $typography-headline6-text-transform: none;
78
- $elevation-none: none;
79
- $size-tiny: 2px;
80
- $size-small: 4px;
81
- $size-medium: 8px;
82
- $size-large: 16px;
83
- $size-giant: 32px;
84
- $size-key-tiny: "tiny";
85
- $size-key-small: "small";
86
- $size-key-medium: "medium";
87
- $size-key-large: "large";
88
- $size-key-giant: "giant";
89
- $size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
@@ -1,211 +0,0 @@
1
- $name: "cosmopolitan";
2
- $font-family: 'Noto Sans', sans-serif;
3
- $layout-radius: 3px;
4
- $layout-space: 8px;
5
- $layout-thickness: 1px;
6
- $scheme-light-contrast: #ffffff;
7
- $scheme-light-background: #ffffff;
8
- $scheme-light-foreground: #000000;
9
- $scheme-light-highlight: #E2E2E2;
10
- $scheme-light-middlelight: #777777;
11
- $scheme-light-lowlight: #4D4D4D;
12
- $scheme-light-transparent: #FFFFFF00;
13
- $scheme-light-semi-transparent: #FFFFFFAA;
14
- $scheme-light-disabled: #B8B5B2;
15
- $scheme-dark-contrast: #ffffff;
16
- $scheme-dark-background: #2E2D2D;
17
- $scheme-dark-foreground: #ffffff;
18
- $scheme-dark-highlight: #333333;
19
- $scheme-dark-middlelight: #666666;
20
- $scheme-dark-lowlight: #999999;
21
- $scheme-dark-transparent: #17171700;
22
- $scheme-dark-semi-transparent: #171717aa;
23
- $scheme-dark-disabled: #5C5956;
24
- $color-light-primary-0: #ffffff;
25
- $color-light-primary-100: #fed7ea;
26
- $color-light-primary-500: #dc1884;
27
- $color-dark-primary-0: #000000;
28
- $color-dark-primary-100: #4b0225;
29
- $color-dark-primary-500: #dc1884;
30
- $typography-heading-font-size: 24px;
31
- $typography-heading-line-height: 28px;
32
- $typography-heading-font-weight: 300;
33
- $typography-heading-letter-spacing: -0.25px;
34
- $typography-heading-text-decoration: none;
35
- $typography-heading-text-transform: none;
36
- $typography-content-font-size: 16px;
37
- $typography-content-line-height: 20px;
38
- $typography-content-font-weight: 300;
39
- $typography-content-letter-spacing: -0.25px;
40
- $typography-content-text-decoration: none;
41
- $typography-content-text-transform: none;
42
- $typography-button-font-size: 16px;
43
- $typography-button-line-height: 20px;
44
- $typography-button-font-weight: 700;
45
- $typography-button-letter-spacing: -0.25px;
46
- $typography-button-text-decoration: none;
47
- $typography-button-text-transform: uppercase;
48
- $elevation-none: none;
49
- $elevation-light-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
50
- $elevation-light-light-offset-x-0: 0px;
51
- $elevation-light-light-offset-x-1: 0px;
52
- $elevation-light-light-offset-y-0: 0px;
53
- $elevation-light-light-offset-y-1: 1px;
54
- $elevation-light-light-blur-0: 2px;
55
- $elevation-light-light-blur-1: 2px;
56
- $elevation-light-light-spread-0: 0px;
57
- $elevation-light-light-spread-1: 0px;
58
- $elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
59
- $elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
60
- $elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
61
- $elevation-light-semilight-offset-x-0: 0px;
62
- $elevation-light-semilight-offset-x-1: 0px;
63
- $elevation-light-semilight-offset-y-0: 0px;
64
- $elevation-light-semilight-offset-y-1: 2px;
65
- $elevation-light-semilight-blur-0: 2px;
66
- $elevation-light-semilight-blur-1: 4px;
67
- $elevation-light-semilight-spread-0: 0px;
68
- $elevation-light-semilight-spread-1: 0px;
69
- $elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
70
- $elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
71
- $elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
72
- $elevation-light-regular-offset-x-0: 0px;
73
- $elevation-light-regular-offset-x-1: 0px;
74
- $elevation-light-regular-offset-y-0: 0px;
75
- $elevation-light-regular-offset-y-1: 4px;
76
- $elevation-light-regular-blur-0: 2px;
77
- $elevation-light-regular-blur-1: 8px;
78
- $elevation-light-regular-spread-0: 0px;
79
- $elevation-light-regular-spread-1: 0px;
80
- $elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
81
- $elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
82
- $elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
83
- $elevation-light-semibold-offset-x-0: 0px;
84
- $elevation-light-semibold-offset-x-1: 0px;
85
- $elevation-light-semibold-offset-y-0: 0px;
86
- $elevation-light-semibold-offset-y-1: 8px;
87
- $elevation-light-semibold-blur-0: 2px;
88
- $elevation-light-semibold-blur-1: 16px;
89
- $elevation-light-semibold-spread-0: 0px;
90
- $elevation-light-semibold-spread-1: 0px;
91
- $elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
92
- $elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
93
- $elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
94
- $elevation-light-bold-offset-x-0: 0px;
95
- $elevation-light-bold-offset-x-1: 0px;
96
- $elevation-light-bold-offset-y-0: 0px;
97
- $elevation-light-bold-offset-y-1: 14px;
98
- $elevation-light-bold-blur-0: 8px;
99
- $elevation-light-bold-blur-1: 28px;
100
- $elevation-light-bold-spread-0: 0px;
101
- $elevation-light-bold-spread-1: 0px;
102
- $elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
103
- $elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
104
- $elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
105
- $elevation-light-extrabold-offset-x-0: 0px;
106
- $elevation-light-extrabold-offset-x-1: 0px;
107
- $elevation-light-extrabold-offset-y-0: 0px;
108
- $elevation-light-extrabold-offset-y-1: 32px;
109
- $elevation-light-extrabold-blur-0: 8px;
110
- $elevation-light-extrabold-blur-1: 64px;
111
- $elevation-light-extrabold-spread-0: 0px;
112
- $elevation-light-extrabold-spread-1: 0px;
113
- $elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
114
- $elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
115
- $elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
116
- $elevation-dark-light-offset-x-0: 0px;
117
- $elevation-dark-light-offset-x-1: 0px;
118
- $elevation-dark-light-offset-y-0: 0px;
119
- $elevation-dark-light-offset-y-1: 1px;
120
- $elevation-dark-light-blur-0: 2px;
121
- $elevation-dark-light-blur-1: 2px;
122
- $elevation-dark-light-spread-0: 0px;
123
- $elevation-dark-light-spread-1: 0px;
124
- $elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
125
- $elevation-dark-light-color-1: rgba(0, 0, 0, 0.28);
126
- $elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
127
- $elevation-dark-semilight-offset-x-0: 0px;
128
- $elevation-dark-semilight-offset-x-1: 0px;
129
- $elevation-dark-semilight-offset-y-0: 0px;
130
- $elevation-dark-semilight-offset-y-1: 2px;
131
- $elevation-dark-semilight-blur-0: 2px;
132
- $elevation-dark-semilight-blur-1: 4px;
133
- $elevation-dark-semilight-spread-0: 0px;
134
- $elevation-dark-semilight-spread-1: 0px;
135
- $elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
136
- $elevation-dark-semilight-color-1: rgba(0, 0, 0, 0.28);
137
- $elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
138
- $elevation-dark-regular-offset-x-0: 0px;
139
- $elevation-dark-regular-offset-x-1: 0px;
140
- $elevation-dark-regular-offset-y-0: 0px;
141
- $elevation-dark-regular-offset-y-1: 4px;
142
- $elevation-dark-regular-blur-0: 2px;
143
- $elevation-dark-regular-blur-1: 8px;
144
- $elevation-dark-regular-spread-0: 0px;
145
- $elevation-dark-regular-spread-1: 0px;
146
- $elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
147
- $elevation-dark-regular-color-1: rgba(0, 0, 0, 0.28);
148
- $elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
149
- $elevation-dark-semibold-offset-x-0: 0px;
150
- $elevation-dark-semibold-offset-x-1: 0px;
151
- $elevation-dark-semibold-offset-y-0: 0px;
152
- $elevation-dark-semibold-offset-y-1: 8px;
153
- $elevation-dark-semibold-blur-0: 2px;
154
- $elevation-dark-semibold-blur-1: 16px;
155
- $elevation-dark-semibold-spread-0: 0px;
156
- $elevation-dark-semibold-spread-1: 0px;
157
- $elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
158
- $elevation-dark-semibold-color-1: rgba(0, 0, 0, 0.28);
159
- $elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
160
- $elevation-dark-bold-offset-x-0: 0px;
161
- $elevation-dark-bold-offset-x-1: 0px;
162
- $elevation-dark-bold-offset-y-0: 0px;
163
- $elevation-dark-bold-offset-y-1: 14px;
164
- $elevation-dark-bold-blur-0: 8px;
165
- $elevation-dark-bold-blur-1: 28px;
166
- $elevation-dark-bold-spread-0: 0px;
167
- $elevation-dark-bold-spread-1: 0px;
168
- $elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
169
- $elevation-dark-bold-color-1: rgba(0, 0, 0, 0.28);
170
- $elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
171
- $elevation-dark-extrabold-offset-x-0: 0px;
172
- $elevation-dark-extrabold-offset-x-1: 0px;
173
- $elevation-dark-extrabold-offset-y-0: 0px;
174
- $elevation-dark-extrabold-offset-y-1: 32px;
175
- $elevation-dark-extrabold-blur-0: 8px;
176
- $elevation-dark-extrabold-blur-1: 64px;
177
- $elevation-dark-extrabold-spread-0: 0px;
178
- $elevation-dark-extrabold-spread-1: 0px;
179
- $elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
180
- $elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
181
- $size-tiny: 2px;
182
- $size-small: 4px;
183
- $size-medium: 8px;
184
- $size-large: 16px;
185
- $size-giant: 32px;
186
- $size-key-tiny: "tiny";
187
- $size-key-small: "small";
188
- $size-key-medium: "medium";
189
- $size-key-large: "large";
190
- $size-key-giant: "giant";
191
- $typography-key-heading: "heading";
192
- $typography-key-content: "content";
193
- $typography-key-button: "button";
194
- $elevation-key-light: "light";
195
- $elevation-key-semilight: "semilight";
196
- $elevation-key-regular: "regular";
197
- $elevation-key-semibold: "semibold";
198
- $elevation-key-bold: "bold";
199
- $elevation-key-extrabold: "extrabold";
200
- $variant-primary: "primary";
201
- $variant-secondary: "secondary";
202
- $variant-tertiary: "tertiary";
203
- $duration-short: 200ms;
204
- $duration-medium: 400ms;
205
- $duration-long: 600ms;
206
- $typography-heading-font-family: $font-family;
207
- $typography-content-font-family: $font-family;
208
- $typography-button-font-family: $font-family;
209
- $size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
210
- $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
211
- $variant: $variant-primary;