@intergrav/dev.css 3.1.2 → 3.3.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.
Files changed (13) hide show
  1. package/README.md +19 -43
  2. package/addon/header-sticky.css +9 -9
  3. package/demo.html +294 -294
  4. package/dev.css +51 -35
  5. package/package.json +32 -30
  6. package/theme/boilerplate-auto.css +54 -51
  7. package/theme/boilerplate.css +23 -22
  8. package/theme/catppuccin-frappe.css +50 -47
  9. package/theme/catppuccin-macchiato.css +50 -47
  10. package/theme/catppuccin-mocha.css +50 -47
  11. package/theme/day.css +18 -17
  12. package/theme/night.css +18 -17
  13. package/theme/terminal.css +24 -23
package/dev.css CHANGED
@@ -2,27 +2,28 @@
2
2
  /* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
3
3
 
4
4
  /* table of contents
5
- 1. configuration
6
- 2. dark mode handling
7
- 3. css reset
8
- 4. margins for most elements
9
- 5. font family
10
- 6. body and selection styling
11
- 7. typography
12
- 8. blockquotes
13
- 9. header
14
- 10. footer
15
- 11. buttons and inputs
16
- 12. code and keyboards
17
- 13. details
18
- 14. description lists
19
- 15. horizontal rules
20
- 16. fieldsets
21
- 17. tables
22
- 18. lists
5
+ 1. default configuration
6
+ 2. dark mode handling
7
+ 3. root color scheme
8
+ 4. css reset
9
+ 5. margins for most elements
10
+ 6. font family
11
+ 7. body and selection styling
12
+ 8. typography
13
+ 9. blockquotes
14
+ 10. header
15
+ 11. footer
16
+ 12. buttons and inputs
17
+ 13. code and keyboards
18
+ 14. details
19
+ 15. description lists
20
+ 16. horizontal rules
21
+ 17. fieldsets
22
+ 18. tables
23
+ 19. lists
23
24
  */
24
25
 
25
- /* 1. configuration */
26
+ /* 1. default configuration */
26
27
  :root {
27
28
  /* font families */
28
29
  --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
@@ -30,6 +31,7 @@
30
31
  --dc-font-mono: "Geist Mono", monospace;
31
32
 
32
33
  /* light colors */
34
+ --dc-cs: light;
33
35
  --dc-tx-1: #000000;
34
36
  --dc-tx-2: #1a1a1a;
35
37
  --dc-bg-1: #fafafa;
@@ -43,6 +45,7 @@
43
45
  --dc-ac-tx: #ededed;
44
46
 
45
47
  /* dark colors */
48
+ --dc-d-cs: dark;
46
49
  --dc-d-tx-1: #ededed;
47
50
  --dc-d-tx-2: #a1a1a1;
48
51
  --dc-d-bg-1: #000;
@@ -59,6 +62,7 @@
59
62
  /* 2. dark mode handling */
60
63
  @media (prefers-color-scheme: dark) {
61
64
  :root {
65
+ --dc-cs: var(--dc-d-cs);
62
66
  --dc-tx-1: var(--dc-d-tx-1);
63
67
  --dc-tx-2: var(--dc-d-tx-2);
64
68
  --dc-bg-1: var(--dc-d-bg-1);
@@ -73,7 +77,12 @@
73
77
  }
74
78
  }
75
79
 
76
- /* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
80
+ /* 3. root color scheme */
81
+ :root {
82
+ color-scheme: only var(--dc-cs);
83
+ }
84
+
85
+ /* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
77
86
  *,
78
87
  *::before,
79
88
  *::after {
@@ -107,7 +116,7 @@ select {
107
116
  isolation: isolate;
108
117
  }
109
118
 
110
- /* 4. margins for most elements */
119
+ /* 5. margins for most elements */
111
120
  address,
112
121
  area,
113
122
  article,
@@ -141,7 +150,7 @@ video {
141
150
  margin-bottom: 1rem;
142
151
  }
143
152
 
144
- /* 5. font family */
153
+ /* 6. font family */
145
154
  html {
146
155
  font-family: var(--dc-font-sans);
147
156
  }
@@ -153,13 +162,15 @@ samp {
153
162
  font-family: var(--dc-font-mono);
154
163
  }
155
164
 
156
- /* 6. body and selection styling */
165
+ /* 7. body and selection styling */
157
166
  body {
158
167
  margin: 0 auto;
159
168
  max-width: 48rem;
160
169
  padding: 2rem;
161
170
  background: var(--dc-bg-1);
162
171
  color: var(--dc-tx-2);
172
+ overflow-wrap: break-word;
173
+ overflow-x: hidden;
163
174
  }
164
175
 
165
176
  ::selection {
@@ -167,7 +178,7 @@ body {
167
178
  color: var(--dc-ac-tx);
168
179
  }
169
180
 
170
- /* 7. typography */
181
+ /* 8. typography */
171
182
  h1,
172
183
  h2,
173
184
  h3,
@@ -209,7 +220,7 @@ mark {
209
220
  border-radius: 0.25rem;
210
221
  }
211
222
 
212
- /* 8. blockquotes */
223
+ /* 9. blockquotes */
213
224
  blockquote {
214
225
  padding: 1.25rem;
215
226
  background: var(--dc-bg-2);
@@ -223,7 +234,7 @@ blockquote *:last-child {
223
234
  margin-bottom: 0;
224
235
  }
225
236
 
226
- /* 9. header */
237
+ /* 10. header */
227
238
  header {
228
239
  background: var(--dc-bg-2);
229
240
  border-bottom: 1px solid var(--dc-bg-3);
@@ -289,7 +300,7 @@ header nav ul li:not(:first-child)::before {
289
300
  content: "• ";
290
301
  }
291
302
 
292
- /* 10. footer */
303
+ /* 11. footer */
293
304
  footer {
294
305
  border-top: 1px solid var(--dc-bg-3);
295
306
  padding: 0.5rem calc(50vw - 50%);
@@ -309,7 +320,7 @@ footer h3 {
309
320
  border-bottom: 0;
310
321
  }
311
322
 
312
- /* 11. buttons and inputs */
323
+ /* 12. buttons and inputs */
313
324
  a button,
314
325
  button,
315
326
  input[type="submit"],
@@ -367,7 +378,12 @@ textarea {
367
378
  max-width: 100%;
368
379
  }
369
380
 
370
- /* 12. code and keyboards */
381
+ input,
382
+ progress {
383
+ accent-color: var(--dc-ac-1);
384
+ }
385
+
386
+ /* 13. code and keyboards */
371
387
  code,
372
388
  samp,
373
389
  kbd,
@@ -389,7 +405,7 @@ pre {
389
405
  overflow: auto;
390
406
  }
391
407
 
392
- /* 13. details */
408
+ /* 14. details */
393
409
  details {
394
410
  padding: 0.5rem 1rem;
395
411
  background: var(--dc-bg-2);
@@ -416,7 +432,7 @@ details[open] > *:last-child {
416
432
  padding-bottom: 0;
417
433
  }
418
434
 
419
- /* 14. description lists */
435
+ /* 15. description lists */
420
436
  dt {
421
437
  font-weight: bold;
422
438
  }
@@ -425,14 +441,14 @@ dd::before {
425
441
  content: "→ ";
426
442
  }
427
443
 
428
- /* 15. horizontal rules */
444
+ /* 16. horizontal rules */
429
445
  hr {
430
446
  border: 0;
431
447
  border-bottom: 1px solid var(--dc-bg-3);
432
448
  margin: 1rem auto;
433
449
  }
434
450
 
435
- /* 16. fieldsets */
451
+ /* 17. fieldsets */
436
452
  fieldset {
437
453
  margin-top: 1rem;
438
454
  padding: 2rem;
@@ -444,7 +460,7 @@ legend {
444
460
  padding: auto 0.5rem;
445
461
  }
446
462
 
447
- /* 17. tables */
463
+ /* 18. tables */
448
464
  table {
449
465
  border-collapse: collapse;
450
466
  width: 100%;
@@ -470,7 +486,7 @@ table caption {
470
486
  margin-bottom: 0.5rem;
471
487
  }
472
488
 
473
- /* 18. lists */
489
+ /* 19. lists */
474
490
  ol,
475
491
  ul {
476
492
  padding-left: 2rem;
package/package.json CHANGED
@@ -1,30 +1,32 @@
1
- {
2
- "name": "@intergrav/dev.css",
3
- "version": "3.1.2",
4
- "description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
5
- "author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
6
- "license": "MIT",
7
- "repository": "github:intergrav/dev.css",
8
- "bugs": {
9
- "url": "https://github.com/intergrav/dev.css/issues"
10
- },
11
- "keywords": [
12
- "css",
13
- "stylesheet",
14
- "framework",
15
- "classless",
16
- "minimal",
17
- "lightweight",
18
- "vercel",
19
- "geist"
20
- ],
21
- "main": "dev.css",
22
- "files": [
23
- "theme",
24
- "addon",
25
- "demo.html"
26
- ],
27
- "prettier": {
28
- "useTabs": true
29
- }
30
- }
1
+ {
2
+ "name": "@intergrav/dev.css",
3
+ "version": "3.3.0",
4
+ "description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
5
+ "keywords": [
6
+ "css",
7
+ "stylesheet",
8
+ "framework",
9
+ "classless",
10
+ "minimal",
11
+ "lightweight",
12
+ "vercel",
13
+ "geist",
14
+ "open-source"
15
+ ],
16
+ "homepage": "https://github.com/intergrav/dev.css#readme",
17
+ "bugs": {
18
+ "url": "https://github.com/intergrav/dev.css/issues"
19
+ },
20
+ "license": "MIT",
21
+ "author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
22
+ "files": [
23
+ "theme",
24
+ "addon",
25
+ "demo.html"
26
+ ],
27
+ "main": "dev.css",
28
+ "repository": "github:intergrav/dev.css",
29
+ "prettier": {
30
+ "useTabs": true
31
+ }
32
+ }
package/theme/boilerplate-auto.css CHANGED
@@ -1,51 +1,54 @@
1
- /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
- /* about: a template that you can modify, but with an automatic light/dark mode */
3
- /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
-
5
- :root {
6
- /* font families */
7
- --dc-font-sans: sans-serif; /* sans serif */
8
- --dc-font-mono: monospace; /* monospace */
9
-
10
- /* light colors */
11
- --dc-tx-1: #000000; /* primary text */
12
- --dc-tx-2: #1a1a1a; /* secondary text */
13
- --dc-bg-1: #fafafa; /* main background */
14
- --dc-bg-2: #fff; /* secondary background */
15
- --dc-bg-3: #ebebeb; /* outlines */
16
- --dc-lk-1: #0068d6; /* link text */
17
- --dc-lkb-1: #0072f5; /* link button background */
18
- --dc-lkb-2: #0062d1; /* link button background (hover) */
19
- --dc-lkb-tx: #ededed; /* link button text */
20
- --dc-ac-1: #8e4ec6; /* accent color */
21
- --dc-ac-tx: #ededed; /* accent color text */
22
-
23
- /* dark colors */
24
- --dc-d-tx-1: #ededed;
25
- --dc-d-tx-2: #a1a1a1;
26
- --dc-d-bg-1: #000;
27
- --dc-d-bg-2: #0a0a0a;
28
- --dc-d-bg-3: #2e2e2e;
29
- --dc-d-lk-1: #52a8ff;
30
- --dc-d-lkb-1: #0072f5;
31
- --dc-d-lkb-2: #0062d1;
32
- --dc-d-lkb-tx: #ededed;
33
- --dc-d-ac-1: #8e4ec6;
34
- --dc-d-ac-tx: #ededed;
35
- }
36
-
37
- @media (prefers-color-scheme: dark) {
38
- :root {
39
- --dc-tx-1: var(--dc-d-tx-1);
40
- --dc-tx-2: var(--dc-d-tx-2);
41
- --dc-bg-1: var(--dc-d-bg-1);
42
- --dc-bg-2: var(--dc-d-bg-2);
43
- --dc-bg-3: var(--dc-d-bg-3);
44
- --dc-lk-1: var(--dc-d-lk-1);
45
- --dc-lkb-1: var(--dc-d-lkb-1);
46
- --dc-lkb-2: var(--dc-d-lkb-2);
47
- --dc-lkb-tx: var(--dc-d-lkb-tx);
48
- --dc-ac-1: var(--dc-d-ac-1);
49
- --dc-ac-tx: var(--dc-d-ac-tx);
50
- }
51
- }
1
+ /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: a template that you can modify, but with an automatic light/dark mode */
3
+ /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
+
5
+ :root {
6
+ /* font families */
7
+ --dc-font-sans: sans-serif; /* sans serif */
8
+ --dc-font-mono: monospace; /* monospace */
9
+
10
+ /* light colors */
11
+ --dc-cs: light; /* light/dark scrollbars, inputs, etc */
12
+ --dc-tx-1: #000000; /* primary text */
13
+ --dc-tx-2: #1a1a1a; /* secondary text */
14
+ --dc-bg-1: #fafafa; /* main background */
15
+ --dc-bg-2: #fff; /* secondary background */
16
+ --dc-bg-3: #ebebeb; /* outlines */
17
+ --dc-lk-1: #0068d6; /* link text */
18
+ --dc-lkb-1: #0072f5; /* link button background */
19
+ --dc-lkb-2: #0062d1; /* link button background (hover) */
20
+ --dc-lkb-tx: #ededed; /* link button text */
21
+ --dc-ac-1: #8e4ec6; /* accent color */
22
+ --dc-ac-tx: #ededed; /* accent color text */
23
+
24
+ /* dark colors */
25
+ --dc-d-cs: dark;
26
+ --dc-d-tx-1: #ededed;
27
+ --dc-d-tx-2: #a1a1a1;
28
+ --dc-d-bg-1: #000;
29
+ --dc-d-bg-2: #0a0a0a;
30
+ --dc-d-bg-3: #2e2e2e;
31
+ --dc-d-lk-1: #52a8ff;
32
+ --dc-d-lkb-1: #0072f5;
33
+ --dc-d-lkb-2: #0062d1;
34
+ --dc-d-lkb-tx: #ededed;
35
+ --dc-d-ac-1: #8e4ec6;
36
+ --dc-d-ac-tx: #ededed;
37
+ }
38
+
39
+ @media (prefers-color-scheme: dark) {
40
+ :root {
41
+ --dc-cs: var(--dc-d-cs);
42
+ --dc-tx-1: var(--dc-d-tx-1);
43
+ --dc-tx-2: var(--dc-d-tx-2);
44
+ --dc-bg-1: var(--dc-d-bg-1);
45
+ --dc-bg-2: var(--dc-d-bg-2);
46
+ --dc-bg-3: var(--dc-d-bg-3);
47
+ --dc-lk-1: var(--dc-d-lk-1);
48
+ --dc-lkb-1: var(--dc-d-lkb-1);
49
+ --dc-lkb-2: var(--dc-d-lkb-2);
50
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
51
+ --dc-ac-1: var(--dc-d-ac-1);
52
+ --dc-ac-tx: var(--dc-d-ac-tx);
53
+ }
54
+ }
package/theme/boilerplate.css CHANGED
@@ -1,22 +1,23 @@
1
- /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
- /* about: a template that you can modify */
3
- /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
-
5
- :root {
6
- /* font families */
7
- --dc-font-sans: sans-serif; /* sans serif */
8
- --dc-font-mono: monospace; /* monospace */
9
-
10
- /* colors */
11
- --dc-tx-1: #000000; /* primary text */
12
- --dc-tx-2: #1a1a1a; /* secondary text */
13
- --dc-bg-1: #fafafa; /* main background */
14
- --dc-bg-2: #fff; /* secondary background */
15
- --dc-bg-3: #ebebeb; /* outlines */
16
- --dc-lk-1: #0068d6; /* link text */
17
- --dc-lkb-1: #0072f5; /* link button background */
18
- --dc-lkb-2: #0062d1; /* link button background (hover) */
19
- --dc-lkb-tx: #ededed; /* link button text */
20
- --dc-ac-1: #8e4ec6; /* accent color */
21
- --dc-ac-tx: #ededed; /* accent color text */
22
- }
1
+ /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: a template that you can modify */
3
+ /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
+
5
+ :root {
6
+ /* font families */
7
+ --dc-font-sans: sans-serif; /* sans serif */
8
+ --dc-font-mono: monospace; /* monospace */
9
+
10
+ /* colors */
11
+ --dc-cs: light; /* light/dark scrollbars, inputs, etc */
12
+ --dc-tx-1: #000000; /* primary text */
13
+ --dc-tx-2: #1a1a1a; /* secondary text */
14
+ --dc-bg-1: #fafafa; /* main background */
15
+ --dc-bg-2: #fff; /* secondary background */
16
+ --dc-bg-3: #ebebeb; /* outlines */
17
+ --dc-lk-1: #0068d6; /* link text */
18
+ --dc-lkb-1: #0072f5; /* link button background */
19
+ --dc-lkb-2: #0062d1; /* link button background (hover) */
20
+ --dc-lkb-tx: #ededed; /* link button text */
21
+ --dc-ac-1: #8e4ec6; /* accent color */
22
+ --dc-ac-tx: #ededed; /* accent color text */
23
+ }
package/theme/catppuccin-frappe.css CHANGED
@@ -1,47 +1,50 @@
1
- /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
- /* about: catppuccin's frappé color scheme - https://github.com/catppuccin */
3
- /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
-
5
- :root {
6
- /* light colors - latte */
7
- --dc-tx-1: #4c4f69; /* primary text | Text */
8
- --dc-tx-2: #4c4f69; /* secondary text | Text */
9
- --dc-bg-1: #e6e9ef; /* main background | Mantle */
10
- --dc-bg-2: #eff1f5; /* secondary background | Base */
11
- --dc-bg-3: #ccd0da; /* outlines | Surface0 */
12
- --dc-lk-1: #1e66f5; /* link text | Blue */
13
- --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
14
- --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
15
- --dc-lkb-tx: #4c4f69; /* link button text | Text */
16
- --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
17
- --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
18
-
19
- /* dark colors */
20
- --dc-d-tx-1: #c6d0f5; /* primary text | Text */
21
- --dc-d-tx-2: #c6d0f5; /* secondary text | Text */
22
- --dc-d-bg-1: #292c3c; /* main background | Mantle */
23
- --dc-d-bg-2: #303446; /* secondary background | Base */
24
- --dc-d-bg-3: #414559; /* outlines | Surface0 */
25
- --dc-d-lk-1: #8caaee; /* link text | Blue */
26
- --dc-d-lkb-1: #51576d; /* link button background | Surface1 */
27
- --dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
28
- --dc-d-lkb-tx: #c6d0f5; /* link button text | Text */
29
- --dc-d-ac-1: #949cbb1e; /* accent/selection color | Overlay2 + 1e */
30
- --dc-d-ac-tx: #c6d0f5; /* accent/selection color text | Text */
31
- }
32
-
33
- @media (prefers-color-scheme: dark) {
34
- :root {
35
- --dc-tx-1: var(--dc-d-tx-1);
36
- --dc-tx-2: var(--dc-d-tx-2);
37
- --dc-bg-1: var(--dc-d-bg-1);
38
- --dc-bg-2: var(--dc-d-bg-2);
39
- --dc-bg-3: var(--dc-d-bg-3);
40
- --dc-lk-1: var(--dc-d-lk-1);
41
- --dc-lkb-1: var(--dc-d-lkb-1);
42
- --dc-lkb-2: var(--dc-d-lkb-2);
43
- --dc-lkb-tx: var(--dc-d-lkb-tx);
44
- --dc-ac-1: var(--dc-d-ac-1);
45
- --dc-ac-tx: var(--dc-d-ac-tx);
46
- }
47
- }
1
+ /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: catppuccin's frappé color scheme - https://github.com/catppuccin */
3
+ /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
+
5
+ :root {
6
+ /* light colors - latte */
7
+ --dc-cs: light;
8
+ --dc-tx-1: #4c4f69; /* primary text | Text */
9
+ --dc-tx-2: #4c4f69; /* secondary text | Text */
10
+ --dc-bg-1: #e6e9ef; /* main background | Mantle */
11
+ --dc-bg-2: #eff1f5; /* secondary background | Base */
12
+ --dc-bg-3: #ccd0da; /* outlines | Surface0 */
13
+ --dc-lk-1: #1e66f5; /* link text | Blue */
14
+ --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
+ --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
+ --dc-lkb-tx: #4c4f69; /* link button text | Text */
17
+ --dc-ac-1: #8839ef; /* accent color | Mauve */
18
+ --dc-ac-tx: #eff1f5; /* accent color text | Base */
19
+
20
+ /* dark colors */
21
+ --dc-d-cs: dark;
22
+ --dc-d-tx-1: #c6d0f5; /* primary text | Text */
23
+ --dc-d-tx-2: #c6d0f5; /* secondary text | Text */
24
+ --dc-d-bg-1: #292c3c; /* main background | Mantle */
25
+ --dc-d-bg-2: #303446; /* secondary background | Base */
26
+ --dc-d-bg-3: #414559; /* outlines | Surface0 */
27
+ --dc-d-lk-1: #8caaee; /* link text | Blue */
28
+ --dc-d-lkb-1: #51576d; /* link button background | Surface1 */
29
+ --dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
30
+ --dc-d-lkb-tx: #c6d0f5; /* link button text | Text */
31
+ --dc-d-ac-1: #ca9ee6; /* accent color | Mauve */
32
+ --dc-d-ac-tx: #303446; /* accent color text | Base */
33
+ }
34
+
35
+ @media (prefers-color-scheme: dark) {
36
+ :root {
37
+ --dc-cs: var(--dc-d-cs);
38
+ --dc-tx-1: var(--dc-d-tx-1);
39
+ --dc-tx-2: var(--dc-d-tx-2);
40
+ --dc-bg-1: var(--dc-d-bg-1);
41
+ --dc-bg-2: var(--dc-d-bg-2);
42
+ --dc-bg-3: var(--dc-d-bg-3);
43
+ --dc-lk-1: var(--dc-d-lk-1);
44
+ --dc-lkb-1: var(--dc-d-lkb-1);
45
+ --dc-lkb-2: var(--dc-d-lkb-2);
46
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
47
+ --dc-ac-1: var(--dc-d-ac-1);
48
+ --dc-ac-tx: var(--dc-d-ac-tx);
49
+ }
50
+ }
package/theme/catppuccin-macchiato.css CHANGED
@@ -1,47 +1,50 @@
1
- /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
- /* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */
3
- /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
-
5
- :root {
6
- /* light colors - latte */
7
- --dc-tx-1: #4c4f69; /* primary text | Text */
8
- --dc-tx-2: #4c4f69; /* secondary text | Text */
9
- --dc-bg-1: #e6e9ef; /* main background | Mantle */
10
- --dc-bg-2: #eff1f5; /* secondary background | Base */
11
- --dc-bg-3: #ccd0da; /* outlines | Surface0 */
12
- --dc-lk-1: #1e66f5; /* link text | Blue */
13
- --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
14
- --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
15
- --dc-lkb-tx: #4c4f69; /* link button text | Text */
16
- --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
17
- --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
18
-
19
- /* dark colors */
20
- --dc-d-tx-1: #cad3f5; /* primary text | Text */
21
- --dc-d-tx-2: #cad3f5; /* secondary text | Text */
22
- --dc-d-bg-1: #1e2030; /* main background | Mantle */
23
- --dc-d-bg-2: #24273a; /* secondary background | Base */
24
- --dc-d-bg-3: #363a4f; /* outlines | Surface0 */
25
- --dc-d-lk-1: #8aadf4; /* link text | Blue */
26
- --dc-d-lkb-1: #494d64; /* link button background | Surface1 */
27
- --dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
28
- --dc-d-lkb-tx: #cad3f5; /* link button text | Text */
29
- --dc-d-ac-1: #939ab71e; /* accent/selection color | Overlay2 + 1e */
30
- --dc-d-ac-tx: #cad3f5; /* accent/selection color text | Text */
31
- }
32
-
33
- @media (prefers-color-scheme: dark) {
34
- :root {
35
- --dc-tx-1: var(--dc-d-tx-1);
36
- --dc-tx-2: var(--dc-d-tx-2);
37
- --dc-bg-1: var(--dc-d-bg-1);
38
- --dc-bg-2: var(--dc-d-bg-2);
39
- --dc-bg-3: var(--dc-d-bg-3);
40
- --dc-lk-1: var(--dc-d-lk-1);
41
- --dc-lkb-1: var(--dc-d-lkb-1);
42
- --dc-lkb-2: var(--dc-d-lkb-2);
43
- --dc-lkb-tx: var(--dc-d-lkb-tx);
44
- --dc-ac-1: var(--dc-d-ac-1);
45
- --dc-ac-tx: var(--dc-d-ac-tx);
46
- }
47
- }
1
+ /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */
3
+ /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
+
5
+ :root {
6
+ /* light colors - latte */
7
+ --dc-cs: light;
8
+ --dc-tx-1: #4c4f69; /* primary text | Text */
9
+ --dc-tx-2: #4c4f69; /* secondary text | Text */
10
+ --dc-bg-1: #e6e9ef; /* main background | Mantle */
11
+ --dc-bg-2: #eff1f5; /* secondary background | Base */
12
+ --dc-bg-3: #ccd0da; /* outlines | Surface0 */
13
+ --dc-lk-1: #1e66f5; /* link text | Blue */
14
+ --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
+ --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
+ --dc-lkb-tx: #4c4f69; /* link button text | Text */
17
+ --dc-ac-1: #8839ef; /* accent color | Mauve */
18
+ --dc-ac-tx: #eff1f5; /* accent color text | Base */
19
+
20
+ /* dark colors */
21
+ --dc-d-cs: dark;
22
+ --dc-d-tx-1: #cad3f5; /* primary text | Text */
23
+ --dc-d-tx-2: #cad3f5; /* secondary text | Text */
24
+ --dc-d-bg-1: #1e2030; /* main background | Mantle */
25
+ --dc-d-bg-2: #24273a; /* secondary background | Base */
26
+ --dc-d-bg-3: #363a4f; /* outlines | Surface0 */
27
+ --dc-d-lk-1: #8aadf4; /* link text | Blue */
28
+ --dc-d-lkb-1: #494d64; /* link button background | Surface1 */
29
+ --dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
30
+ --dc-d-lkb-tx: #cad3f5; /* link button text | Text */
31
+ --dc-d-ac-1: #c6a0f6; /* accent color | Mauve */
32
+ --dc-d-ac-tx: #24273a; /* accent color text | Base */
33
+ }
34
+
35
+ @media (prefers-color-scheme: dark) {
36
+ :root {
37
+ --dc-cs: var(--dc-d-cs);
38
+ --dc-tx-1: var(--dc-d-tx-1);
39
+ --dc-tx-2: var(--dc-d-tx-2);
40
+ --dc-bg-1: var(--dc-d-bg-1);
41
+ --dc-bg-2: var(--dc-d-bg-2);
42
+ --dc-bg-3: var(--dc-d-bg-3);
43
+ --dc-lk-1: var(--dc-d-lk-1);
44
+ --dc-lkb-1: var(--dc-d-lkb-1);
45
+ --dc-lkb-2: var(--dc-d-lkb-2);
46
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
47
+ --dc-ac-1: var(--dc-d-ac-1);
48
+ --dc-ac-tx: var(--dc-d-ac-tx);
49
+ }
50
+ }