@intergrav/dev.css 3.1.2 → 3.2.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 +45 -34
  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,24 +2,25 @@
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. 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
26
  /* 1. configuration */
@@ -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,7 @@ textarea {
367
378
  max-width: 100%;
368
379
  }
369
380
 
370
- /* 12. code and keyboards */
381
+ /* 13. code and keyboards */
371
382
  code,
372
383
  samp,
373
384
  kbd,
@@ -389,7 +400,7 @@ pre {
389
400
  overflow: auto;
390
401
  }
391
402
 
392
- /* 13. details */
403
+ /* 14. details */
393
404
  details {
394
405
  padding: 0.5rem 1rem;
395
406
  background: var(--dc-bg-2);
@@ -416,7 +427,7 @@ details[open] > *:last-child {
416
427
  padding-bottom: 0;
417
428
  }
418
429
 
419
- /* 14. description lists */
430
+ /* 15. description lists */
420
431
  dt {
421
432
  font-weight: bold;
422
433
  }
@@ -425,14 +436,14 @@ dd::before {
425
436
  content: "→ ";
426
437
  }
427
438
 
428
- /* 15. horizontal rules */
439
+ /* 16. horizontal rules */
429
440
  hr {
430
441
  border: 0;
431
442
  border-bottom: 1px solid var(--dc-bg-3);
432
443
  margin: 1rem auto;
433
444
  }
434
445
 
435
- /* 16. fieldsets */
446
+ /* 17. fieldsets */
436
447
  fieldset {
437
448
  margin-top: 1rem;
438
449
  padding: 2rem;
@@ -444,7 +455,7 @@ legend {
444
455
  padding: auto 0.5rem;
445
456
  }
446
457
 
447
- /* 17. tables */
458
+ /* 18. tables */
448
459
  table {
449
460
  border-collapse: collapse;
450
461
  width: 100%;
@@ -470,7 +481,7 @@ table caption {
470
481
  margin-bottom: 0.5rem;
471
482
  }
472
483
 
473
- /* 18. lists */
484
+ /* 19. lists */
474
485
  ol,
475
486
  ul {
476
487
  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.2.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-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: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
18
+ --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
19
+
20
+ /* dark colors */
21
+ --dc-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: #949cbb1e; /* accent/selection color | Overlay2 + 1e */
32
+ --dc-d-ac-tx: #c6d0f5; /* accent/selection color text | Text */
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: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
18
+ --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
19
+
20
+ /* dark colors */
21
+ --dc-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: #939ab71e; /* accent/selection color | Overlay2 + 1e */
32
+ --dc-d-ac-tx: #cad3f5; /* accent/selection color text | Text */
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
+ }