contain-css-svelte 0.0.6 → 0.0.7

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 (2) hide show
  1. package/dist/vars/defaults.css +439 -5
  2. package/package.json +2 -2
package/dist/vars/defaults.css CHANGED
@@ -1,9 +1,443 @@
1
- @import url("./typography.css");
2
- @import url("./colors.css");
3
- @import url("./code.css");
4
- @import url("./affordances.css");
5
- @import url("./layout.css");
1
+ :root {
2
+ --font-size: 16px;
3
+ --font-size-small: 12px;
4
+ --heading-font-size: 1.5em;
5
+ --text-font-size: 1.2em;
6
+ --font-family: sans-serif;
7
+ --code-font-size: 0.9em;
8
+ /* Basic typography... */
9
+ --line-height: 1.4;
10
+ --line-width: 30rem;
11
+ --bold: bold;
12
+ --heading-margin-top: 1em;
13
+ --heading-margin-bottom: 0.25em;
14
+ --first-heading-margin-top: 0;
15
+ --heading-bg: transparent;
16
+ --heading-fg: var(--primary-bg);
17
+ --heading-padding: 0;
18
+ --first-heading-padding: 0;
19
+ --paragraph-padding: 0;
20
+ --paragraph-margin-top: 1em;
21
+ }
22
+ :root {
23
+ --white: #fff;
24
+ --black: #222;
25
+ --primary-bg: var(--material-color-light-blue-400);
26
+ --primary-fg: var(--white);
27
+ --secondary-bg: var(--material-color-amber-100);
28
+ --secondary-fg: var(--material-color-grey-800);
29
+ --inactive-bg: var(--material-color-grey-400);
30
+ --inactive-fg: var(--material-color-grey-900);
31
+ --bg: #1a1a1a;
32
+ --fg: #fffcfe;
33
+ --stripe-fg: #eaeaea;
34
+ --stripe-bg: #3a3a3a;
35
+ --shadow-color: color-mix(in srgb, var(--fg) 10%, rgba(34, 34, 34, 0.2));
36
+ --border-color: var(--fg);
37
+ --warning-bg: var(--material-color-red-600);
38
+ --warning-fg: var(--white);
39
+ --warning-text-transform: uppercase;
40
+ --container-link-fg: var(--primary-bg);
41
+ }
42
+ body {
43
+ background-color: var(--bg);
44
+ color: var(--fg);
45
+ }
46
+ a {
47
+ background-color: var(--link-bg, transparent);
48
+ color: var(--link-fg, var(--material-color-blue-a400));
49
+ }
50
+ /* Color definitions */
51
+ :root {
52
+ --material-color-red: #f44336;
53
+ --material-color-red-50: #ffebee;
54
+ --material-color-red-100: #ffcdd2;
55
+ --material-color-red-200: #ef9a9a;
56
+ --material-color-red-300: #e57373;
57
+ --material-color-red-400: #ef5350;
58
+ --material-color-red-500: var(--material-color-red);
59
+ --material-color-red-600: #e53935;
60
+ --material-color-red-700: #d32f2f;
61
+ --material-color-red-800: #c62828;
62
+ --material-color-red-900: #b71c1c;
63
+ --material-color-red-a100: #ff8a80;
64
+ --material-color-red-a200: #ff5252;
65
+ --material-color-red-a400: #ff1744;
66
+ --material-color-red-a700: #d50000;
67
+
68
+ --material-color-pink: #e91e63;
69
+ --material-color-pink-50: #fce4ec;
70
+ --material-color-pink-100: #f8bbd0;
71
+ --material-color-pink-200: #f48fb1;
72
+ --material-color-pink-300: #f06292;
73
+ --material-color-pink-400: #ec407a;
74
+ --material-color-pink-500: var(--material-color-pink);
75
+ --material-color-pink-600: #d81b60;
76
+ --material-color-pink-700: #c2185b;
77
+ --material-color-pink-800: #ad1457;
78
+ --material-color-pink-900: #880e4f;
79
+ --material-color-pink-a100: #ff80ab;
80
+ --material-color-pink-a200: #ff4081;
81
+ --material-color-pink-a400: #f50057;
82
+ --material-color-pink-a700: #c51162;
83
+
84
+ --material-color-purple: #9c27b0;
85
+ --material-color-purple-50: #f3e5f5;
86
+ --material-color-purple-100: #e1bee7;
87
+ --material-color-purple-200: #ce93d8;
88
+ --material-color-purple-300: #ba68c8;
89
+ --material-color-purple-400: #ab47bc;
90
+ --material-color-purple-500: var(--material-color-purple);
91
+ --material-color-purple-600: #8e24aa;
92
+ --material-color-purple-700: #7b1fa2;
93
+ --material-color-purple-800: #6a1b9a;
94
+ --material-color-purple-900: #4a148c;
95
+ --material-color-purple-a100: #ea80fc;
96
+ --material-color-purple-a200: #e040fb;
97
+ --material-color-purple-a400: #d500f9;
98
+ --material-color-purple-a700: #a0f;
99
+
100
+ --material-color-deep-purple: #673ab7;
101
+ --material-color-deep-purple-50: #ede7f6;
102
+ --material-color-deep-purple-100: #d1c4e9;
103
+ --material-color-deep-purple-200: #b39ddb;
104
+ --material-color-deep-purple-300: #9575cd;
105
+ --material-color-deep-purple-400: #7e57c2;
106
+ --material-color-deep-purple-500: var(--material-color-deep-purple);
107
+ --material-color-deep-purple-600: #5e35b1;
108
+ --material-color-deep-purple-700: #512da8;
109
+ --material-color-deep-purple-800: #4527a0;
110
+ --material-color-deep-purple-900: #311b92;
111
+ --material-color-deep-purple-a100: #b388ff;
112
+ --material-color-deep-purple-a200: #7c4dff;
113
+ --material-color-deep-purple-a400: #651fff;
114
+ --material-color-deep-purple-a700: #6200ea;
115
+
116
+ --material-color-indigo: #3f51b5;
117
+ --material-color-indigo-50: #e8eaf6;
118
+ --material-color-indigo-100: #c5cae9;
119
+ --material-color-indigo-200: #9fa8da;
120
+ --material-color-indigo-300: #7986cb;
121
+ --material-color-indigo-400: #5c6bc0;
122
+ --material-color-indigo-500: var(--material-color-indigo);
123
+ --material-color-indigo-600: #3949ab;
124
+ --material-color-indigo-700: #303f9f;
125
+ --material-color-indigo-800: #283593;
126
+ --material-color-indigo-900: #1a237e;
127
+ --material-color-indigo-a100: #8c9eff;
128
+ --material-color-indigo-a200: #536dfe;
129
+ --material-color-indigo-a400: #3d5afe;
130
+ --material-color-indigo-a700: #304ffe;
131
+
132
+ --material-color-blue: #2196f3;
133
+ --material-color-blue-50: #e3f2fd;
134
+ --material-color-blue-100: #bbdefb;
135
+ --material-color-blue-200: #90caf9;
136
+ --material-color-blue-300: #64b5f6;
137
+ --material-color-blue-400: #42a5f5;
138
+ --material-color-blue-500: var(--material-color-blue);
139
+ --material-color-blue-600: #1e88e5;
140
+ --material-color-blue-700: #1976d2;
141
+ --material-color-blue-800: #1565c0;
142
+ --material-color-blue-900: #0d47a1;
143
+ --material-color-blue-a100: #82b1ff;
144
+ --material-color-blue-a200: #448aff;
145
+ --material-color-blue-a400: #2979ff;
146
+ --material-color-blue-a700: #2962ff;
147
+
148
+ --material-color-light-blue: #03a9f4;
149
+ --material-color-light-blue-50: #e1f5fe;
150
+ --material-color-light-blue-100: #b3e5fc;
151
+ --material-color-light-blue-200: #81d4fa;
152
+ --material-color-light-blue-300: #4fc3f7;
153
+ --material-color-light-blue-400: #29b6f6;
154
+ --material-color-light-blue-500: var(--material-color-light-blue);
155
+ --material-color-light-blue-600: #039be5;
156
+ --material-color-light-blue-700: #0288d1;
157
+ --material-color-light-blue-800: #0277bd;
158
+ --material-color-light-blue-900: #01579b;
159
+ --material-color-light-blue-a100: #80d8ff;
160
+ --material-color-light-blue-a200: #40c4ff;
161
+ --material-color-light-blue-a400: #00b0ff;
162
+ --material-color-light-blue-a700: #0091ea;
163
+
164
+ --material-color-cyan: #00bcd4;
165
+ --material-color-cyan-50: #e0f7fa;
166
+ --material-color-cyan-100: #b2ebf2;
167
+ --material-color-cyan-200: #80deea;
168
+ --material-color-cyan-300: #4dd0e1;
169
+ --material-color-cyan-400: #26c6da;
170
+ --material-color-cyan-500: var(--material-color-cyan);
171
+ --material-color-cyan-600: #00acc1;
172
+ --material-color-cyan-700: #0097a7;
173
+ --material-color-cyan-800: #00838f;
174
+ --material-color-cyan-900: #006064;
175
+ --material-color-cyan-a100: #84ffff;
176
+ --material-color-cyan-a200: #18ffff;
177
+ --material-color-cyan-a400: #00e5ff;
178
+ --material-color-cyan-a700: #00b8d4;
179
+
180
+ --material-color-teal: #009688;
181
+ --material-color-teal-50: #e0f2f1;
182
+ --material-color-teal-100: #b2dfdb;
183
+ --material-color-teal-200: #80cbc4;
184
+ --material-color-teal-300: #4db6ac;
185
+ --material-color-teal-400: #26a69a;
186
+ --material-color-teal-500: var(--material-color-teal);
187
+ --material-color-teal-600: #00897b;
188
+ --material-color-teal-700: #00796b;
189
+ --material-color-teal-800: #00695c;
190
+ --material-color-teal-900: #004d40;
191
+ --material-color-teal-a100: #a7ffeb;
192
+ --material-color-teal-a200: #64ffda;
193
+ --material-color-teal-a400: #1de9b6;
194
+ --material-color-teal-a700: #00bfa5;
195
+
196
+ --material-color-green: #4caf50;
197
+ --material-color-green-50: #e8f5e9;
198
+ --material-color-green-100: #c8e6c9;
199
+ --material-color-green-200: #a5d6a7;
200
+ --material-color-green-300: #81c784;
201
+ --material-color-green-400: #66bb6a;
202
+ --material-color-green-500: var(--material-color-green);
203
+ --material-color-green-600: #43a047;
204
+ --material-color-green-700: #388e3c;
205
+ --material-color-green-800: #2e7d32;
206
+ --material-color-green-900: #1b5e20;
207
+ --material-color-green-a100: #b9f6ca;
208
+ --material-color-green-a200: #69f0ae;
209
+ --material-color-green-a400: #00e676;
210
+ --material-color-green-a700: #00c853;
211
+
212
+ --material-color-light-green: #8bc34a;
213
+ --material-color-light-green-50: #f1f8e9;
214
+ --material-color-light-green-100: #dcedc8;
215
+ --material-color-light-green-200: #c5e1a5;
216
+ --material-color-light-green-300: #aed581;
217
+ --material-color-light-green-400: #9ccc65;
218
+ --material-color-light-green-500: var(--material-color-light-green);
219
+ --material-color-light-green-600: #7cb342;
220
+ --material-color-light-green-700: #689f38;
221
+ --material-color-light-green-800: #558b2f;
222
+ --material-color-light-green-900: #33691e;
223
+ --material-color-light-green-a100: #ccff90;
224
+ --material-color-light-green-a200: #b2ff59;
225
+ --material-color-light-green-a400: #76ff03;
226
+ --material-color-light-green-a700: #64dd17;
227
+
228
+ --material-color-lime: #cddc39;
229
+ --material-color-lime-50: #f9fbe7;
230
+ --material-color-lime-100: #f0f4c3;
231
+ --material-color-lime-200: #e6ee9c;
232
+ --material-color-lime-300: #dce775;
233
+ --material-color-lime-400: #d4e157;
234
+ --material-color-lime-500: var(--material-color-lime);
235
+ --material-color-lime-600: #c0ca33;
236
+ --material-color-lime-700: #afb42b;
237
+ --material-color-lime-800: #9e9d24;
238
+ --material-color-lime-900: #827717;
239
+ --material-color-lime-a100: #f4ff81;
240
+ --material-color-lime-a200: #eeff41;
241
+ --material-color-lime-a400: #c6ff00;
242
+ --material-color-lime-a700: #aeea00;
243
+
244
+ --material-color-yellow: #ffeb3b;
245
+ --material-color-yellow-50: #fffde7;
246
+ --material-color-yellow-100: #fff9c4;
247
+ --material-color-yellow-200: #fff59d;
248
+ --material-color-yellow-300: #fff176;
249
+ --material-color-yellow-400: #ffee58;
250
+ --material-color-yellow-500: var(--material-color-yellow);
251
+ --material-color-yellow-600: #fdd835;
252
+ --material-color-yellow-700: #fbc02d;
253
+ --material-color-yellow-800: #f9a825;
254
+ --material-color-yellow-900: #f57f17;
255
+ --material-color-yellow-a100: #ffff8d;
256
+ --material-color-yellow-a200: #ff0;
257
+ --material-color-yellow-a400: #ffea00;
258
+ --material-color-yellow-a700: #ffd600;
6
259
 
260
+ --material-color-amber: #ffc107;
261
+ --material-color-amber-50: #fff8e1;
262
+ --material-color-amber-100: #ffecb3;
263
+ --material-color-amber-200: #ffe082;
264
+ --material-color-amber-300: #ffd54f;
265
+ --material-color-amber-400: #ffca28;
266
+ --material-color-amber-500: var(--material-color-amber);
267
+ --material-color-amber-600: #ffb300;
268
+ --material-color-amber-700: #ffa000;
269
+ --material-color-amber-800: #ff8f00;
270
+ --material-color-amber-900: #ff6f00;
271
+ --material-color-amber-a100: #ffe57f;
272
+ --material-color-amber-a200: #ffd740;
273
+ --material-color-amber-a400: #ffc400;
274
+ --material-color-amber-a700: #ffab00;
275
+
276
+ --material-color-orange: #ff9800;
277
+ --material-color-orange-50: #fff3e0;
278
+ --material-color-orange-100: #ffe0b2;
279
+ --material-color-orange-200: #ffcc80;
280
+ --material-color-orange-300: #ffb74d;
281
+ --material-color-orange-400: #ffa726;
282
+ --material-color-orange-500: var(--material-color-orange);
283
+ --material-color-orange-600: #fb8c00;
284
+ --material-color-orange-700: #f57c00;
285
+ --material-color-orange-800: #ef6c00;
286
+ --material-color-orange-900: #e65100;
287
+ --material-color-orange-a100: #ffd180;
288
+ --material-color-orange-a200: #ffab40;
289
+ --material-color-orange-a400: #ff9100;
290
+ --material-color-orange-a700: #ff6d00;
291
+
292
+ --material-color-deep-orange: #ff5722;
293
+ --material-color-deep-orange-50: #fbe9e7;
294
+ --material-color-deep-orange-100: #ffccbc;
295
+ --material-color-deep-orange-200: #ffab91;
296
+ --material-color-deep-orange-300: #ff8a65;
297
+ --material-color-deep-orange-400: #ff7043;
298
+ --material-color-deep-orange-500: var(--material-color-deep-orange);
299
+ --material-color-deep-orange-600: #f4511e;
300
+ --material-color-deep-orange-700: #e64a19;
301
+ --material-color-deep-orange-800: #d84315;
302
+ --material-color-deep-orange-900: #bf360c;
303
+ --material-color-deep-orange-a100: #ff9e80;
304
+ --material-color-deep-orange-a200: #ff6e40;
305
+ --material-color-deep-orange-a400: #ff3d00;
306
+ --material-color-deep-orange-a700: #dd2c00;
307
+
308
+ --material-color-brown: #795548;
309
+ --material-color-brown-50: #efebe9;
310
+ --material-color-brown-100: #d7ccc8;
311
+ --material-color-brown-200: #bcaaa4;
312
+ --material-color-brown-300: #a1887f;
313
+ --material-color-brown-400: #8d6e63;
314
+ --material-color-brown-500: var(--material-color-brown);
315
+ --material-color-brown-600: #6d4c41;
316
+ --material-color-brown-700: #5d4037;
317
+ --material-color-brown-800: #4e342e;
318
+ --material-color-brown-900: #3e2723;
319
+
320
+ --material-color-grey: #9e9e9e;
321
+ --material-color-grey-50: #fafafa;
322
+ --material-color-grey-100: #f5f5f5;
323
+ --material-color-grey-200: #eee;
324
+ --material-color-grey-300: #e0e0e0;
325
+ --material-color-grey-400: #bdbdbd;
326
+ --material-color-grey-500: var(--material-color-grey);
327
+ --material-color-grey-600: #757575;
328
+ --material-color-grey-700: #616161;
329
+ --material-color-grey-800: #424242;
330
+ --material-color-grey-900: #212121;
331
+
332
+ --material-color-blue-grey: #607d8b;
333
+ --material-color-blue-grey-50: #eceff1;
334
+ --material-color-blue-grey-100: #cfd8dc;
335
+ --material-color-blue-grey-200: #b0bec5;
336
+ --material-color-blue-grey-300: #90a4ae;
337
+ --material-color-blue-grey-400: #78909c;
338
+ --material-color-blue-grey-500: var(--material-color-blue-grey);
339
+ --material-color-blue-grey-600: #546e7a;
340
+ --material-color-blue-grey-700: #455a64;
341
+ --material-color-blue-grey-800: #37474f;
342
+ --material-color-blue-grey-900: #263238;
343
+ }
344
+ :root {
345
+ --material-color-red-light: var(--material-color-red-100);
346
+ --material-color-pink-light: var(--material-color-pink-100);
347
+ --material-color-purple-light: var(--material-color-purple-100);
348
+ --material-color-deep-purple-light: var(--material-color-deep-purple-100);
349
+ --material-color-indigo-light: var(--material-color-indigo-100);
350
+ --material-color-cyan-light: var(--material-color-cyan-100);
351
+ --material-color-blue-light: var(--material-color-blue-100);
352
+ --material-color-teal-light: var(--material-color-teal-100);
353
+ --material-color-light-blue-light: var(--material-color-light-blue-100);
354
+ --material-color-light-green-light: var(--material-color-green-100);
355
+ --material-color-green-light: var(--material-color-green-100);
356
+ --material-color-lime-light: var(--material-color-lime-100);
357
+ --material-color-yellow-light: var(--material-color-yellow-100);
358
+ --material-color-amber-light: var(--material-color-amber-100);
359
+ --material-color-orange-light: var(--material-color-orange-100);
360
+ --material-color-deep-orange-light: var(--material-color-deep-orange-100);
361
+ --material-color-brown-light: var(--material-color-brown-100);
362
+ --material-color-grey-light: var(--material-color-grey-100);
363
+ --material-color-blue-grey-light: var(--material-color-blue-grey-100);
364
+ }
365
+ :root {
366
+ /* shorthands... */
367
+ --red: var(--material-color-red);
368
+ --deep-orange: var(var(--material-color-deep-orange));
369
+ }
370
+ :root {
371
+ --code-font-size: 1rem;
372
+ --code-line-height: 1.5;
373
+ --code-tab-size: 4;
374
+ --code-width: min(75em, 100%);
375
+ --code-height: auto;
376
+ }
377
+ :root {
378
+ --hover-filter: brightness(1.2)
379
+ drop-shadow(var(--space) var(--space) var(--shadow-color));
380
+ --active-filter: brightness(0.9);
381
+ /* --hover-transform: translate(var(--space), var(--space)); */
382
+ /* --button-hover-filter: var(--hover-filter); */
383
+ --menu-hover-filter: var(--hover-filter);
384
+ --menu-hover-transform: var(--hover-transform);
385
+ /* --button-hover-transform: var(var(--button-hover-transform));
386
+ --button-hover-filter: var(var(--button-hover-filter)); */
387
+ --transition: 300ms;
388
+ --menu-transition: var(--transition);
389
+ --button-transition: var(--transition);
390
+ --sidebar-transition: var(--transition);
391
+ --checkbox-hover-filter: var(--hover-filter);
392
+ --checkbox-hover-transform: rotateY(-5deg);
393
+ --checkbox-active-filter: var(--active-filter);
394
+ --checkbox-active-transform: rotateY(5deg);
395
+ --checkbox-transition: 400ms;
396
+ --checked-weight: var(--bold);
397
+ --grab-bar-hover-bg: #fff2;
398
+ --grab-bar-active-bg: #fff4;
399
+ --grab-bar-hover-filter: drop-shadow(0 0 2px #fff);
400
+ --grab-bar-active-filter: drop-shdaow(0 0 4px #fff);
401
+ --greyed-out-filter: blur(2px) grayscale(0.5);
402
+ }
403
+ body {
404
+ margin: 0;
405
+ padding: 0;
406
+ }
407
+ :root {
408
+ /* Basic spacing */
409
+ --space: 2px;
410
+ --space-md: calc(var(--space) * 2);
411
+ --space-lg: calc(var(--space-md) * 2);
412
+ --space-xl: calc(var(--space-xl) * 2);
413
+ --padding: calc(var(--space) * 4);
414
+ --gap: calc(var(--padding) * 2);
415
+ --column-gap: var(--gap);
416
+ --row-gap: var(--gap);
417
+ --grab-bar-width: var(--padding);
418
+ --border-radius: 8px;
419
+ --border-style: solid;
420
+ --border-width: 1px;
421
+ /* Simple icon sizes and such */
422
+ --icon-size: 32px;
423
+ /* Cards */
424
+ --card-width: 420px;
425
+ --card-width-small: 250px;
426
+ --card-width-large: 600px;
427
+ --card-height: 300px;
428
+ --card-height-small: 150px;
429
+ --card-height-large: 450px;
430
+ --min-card-height: 200px;
431
+ /* header and footer heights in em so they scale with
432
+ typography changes that happen in media queries */
433
+ --card-header-height: 2em;
434
+ --card-footer-height: 1.5em;
435
+ --card-footer-border: 1px solid #1113;
436
+ }
437
+ :root {
438
+ --sidebar-width: 256px;
439
+ --sidebar-border: 1px solid var(--fg);
440
+ }
7
441
  :root {
8
442
  font-family: var(--font-family);
9
443
  font-size: var(--font-size);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contain-css-svelte",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build-css": "postcss src/lib/vars/defaults.css -o dist/vars/defaults.css",
@@ -9,7 +9,7 @@
9
9
  "preview": "vite preview",
10
10
  "package": "svelte-kit sync && svelte-package && publint",
11
11
  "deploy": "vite build && npm run add-nojekyll && gh-pages -d build -t true",
12
- "prepublishOnly": "npm run package",
12
+ "prepublishOnly": "npm run package && npm run build-css",
13
13
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
14
14
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
15
15
  },