@intergrav/dev.css 3.1.0 → 3.1.1
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.
- package/README.md +3 -1
- package/addon/header-sidebar.css +1 -1
- package/addon/header-sticky.css +2 -1
- package/demo.html +6 -6
- package/dev.css +42 -41
- package/package.json +1 -1
- package/theme/boilerplate-auto.css +51 -0
- package/theme/boilerplate.css +19 -16
- package/theme/catppuccin-frappe.css +47 -0
- package/theme/catppuccin-macchiato.css +47 -0
- package/theme/catppuccin-mocha.css +47 -0
- package/theme/day.css +17 -0
- package/theme/night.css +3 -2
- package/theme/terminal.css +5 -3
package/README.md
CHANGED
|
@@ -113,8 +113,10 @@ This turns the header into a sidebar on displays that are wide enough to support
|
|
|
113
113
|
|
|
114
114
|
## Themes
|
|
115
115
|
|
|
116
|
-
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones.
|
|
116
|
+
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. I provide a terminal-like theme, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, place this after your main stylesheet:
|
|
117
117
|
|
|
118
118
|
```html
|
|
119
119
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
|
|
120
120
|
```
|
|
121
|
+
|
|
122
|
+
If you're making a theme, I highly recommend using the `boilerplate-auto.css` template rather than the `boilerplate.css` template for accessibility reasons.
|
package/addon/header-sidebar.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: turns the header into a sidebar if the viewport is wide enough */
|
|
2
3
|
/* warn: if using with the header-sticky addon, be sure to include this after it */
|
|
3
4
|
|
|
4
5
|
@media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
|
|
5
|
-
/* unset header */
|
|
6
6
|
header {
|
|
7
7
|
all: unset;
|
|
8
8
|
}
|
package/addon/header-sticky.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: makes the header sticky, always at the top of the screen */
|
|
2
3
|
/* warn: if using with the header-sidebar addon, be sure to include this before it */
|
|
3
|
-
/* warn: i do not recommend using this if your header is large
|
|
4
|
+
/* warn: i do not recommend using this if your header is large. may affect usability */
|
|
4
5
|
|
|
5
6
|
header {
|
|
6
7
|
position: sticky;
|
package/demo.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>
|
|
6
|
+
<title>Demo - dev.css</title>
|
|
7
7
|
<link rel="stylesheet" href="dev.css" />
|
|
8
8
|
<link
|
|
9
9
|
rel="stylesheet"
|
|
@@ -17,19 +17,19 @@
|
|
|
17
17
|
|
|
18
18
|
<body>
|
|
19
19
|
<header>
|
|
20
|
-
<h4>
|
|
21
|
-
<h1>
|
|
20
|
+
<h4>dev.css</h4>
|
|
21
|
+
<h1>Demo</h1>
|
|
22
22
|
<p>This is the demo page for dev.css.</p>
|
|
23
23
|
<nav>
|
|
24
24
|
<ul>
|
|
25
|
-
<li><a href="demo">
|
|
26
|
-
<li><a href="https://github.com/intergrav/dev.css">
|
|
25
|
+
<li><a href="demo">Demo</a></li>
|
|
26
|
+
<li><a href="https://github.com/intergrav/dev.css">Git</a></li>
|
|
27
27
|
<li>
|
|
28
28
|
<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a>
|
|
29
29
|
</li>
|
|
30
30
|
<li>
|
|
31
31
|
<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/"
|
|
32
|
-
>
|
|
32
|
+
>jsDelivr</a
|
|
33
33
|
>
|
|
34
34
|
</li>
|
|
35
35
|
</ul>
|
package/dev.css
CHANGED
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
2
|
+
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
|
|
3
|
+
|
|
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
|
|
22
23
|
*/
|
|
23
24
|
|
|
24
|
-
/* 1.
|
|
25
|
+
/* 1. configuration */
|
|
25
26
|
:root {
|
|
26
|
-
/*
|
|
27
|
+
/* font families */
|
|
27
28
|
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
|
|
28
29
|
"Segoe UI", sans-serif;
|
|
29
30
|
--dc-font-mono: "Geist Mono", monospace;
|
|
30
31
|
|
|
31
|
-
/*
|
|
32
|
+
/* light colors */
|
|
32
33
|
--dc-tx-1: #000000;
|
|
33
34
|
--dc-tx-2: #1a1a1a;
|
|
34
35
|
--dc-bg-1: #fafafa;
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
--dc-ac-1: #8e4ec6;
|
|
42
43
|
--dc-ac-tx: #ededed;
|
|
43
44
|
|
|
44
|
-
/*
|
|
45
|
+
/* dark colors */
|
|
45
46
|
--dc-d-tx-1: #ededed;
|
|
46
47
|
--dc-d-tx-2: #a1a1a1;
|
|
47
48
|
--dc-d-bg-1: #000;
|
|
@@ -55,7 +56,7 @@
|
|
|
55
56
|
--dc-d-ac-tx: #ededed;
|
|
56
57
|
}
|
|
57
58
|
|
|
58
|
-
/* 2.
|
|
59
|
+
/* 2. dark mode handling */
|
|
59
60
|
@media (prefers-color-scheme: dark) {
|
|
60
61
|
:root {
|
|
61
62
|
--dc-tx-1: var(--dc-d-tx-1);
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
}
|
|
73
74
|
}
|
|
74
75
|
|
|
75
|
-
/* 3.
|
|
76
|
+
/* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
|
|
76
77
|
*,
|
|
77
78
|
*::before,
|
|
78
79
|
*::after {
|
|
@@ -106,7 +107,7 @@ select {
|
|
|
106
107
|
isolation: isolate;
|
|
107
108
|
}
|
|
108
109
|
|
|
109
|
-
/* 4.
|
|
110
|
+
/* 4. margins for most elements */
|
|
110
111
|
address,
|
|
111
112
|
area,
|
|
112
113
|
article,
|
|
@@ -140,7 +141,7 @@ video {
|
|
|
140
141
|
margin-bottom: 1rem;
|
|
141
142
|
}
|
|
142
143
|
|
|
143
|
-
/* 5.
|
|
144
|
+
/* 5. font family */
|
|
144
145
|
html {
|
|
145
146
|
font-family: var(--dc-font-sans);
|
|
146
147
|
}
|
|
@@ -152,7 +153,7 @@ samp {
|
|
|
152
153
|
font-family: var(--dc-font-mono);
|
|
153
154
|
}
|
|
154
155
|
|
|
155
|
-
/* 6.
|
|
156
|
+
/* 6. body and selection styling */
|
|
156
157
|
body {
|
|
157
158
|
margin: 0 auto;
|
|
158
159
|
max-width: 48rem;
|
|
@@ -166,7 +167,7 @@ body {
|
|
|
166
167
|
color: var(--dc-ac-tx);
|
|
167
168
|
}
|
|
168
169
|
|
|
169
|
-
/* 7.
|
|
170
|
+
/* 7. typography */
|
|
170
171
|
h1,
|
|
171
172
|
h2,
|
|
172
173
|
h3,
|
|
@@ -208,7 +209,7 @@ mark {
|
|
|
208
209
|
border-radius: 0.25rem;
|
|
209
210
|
}
|
|
210
211
|
|
|
211
|
-
/* 8.
|
|
212
|
+
/* 8. blockquotes */
|
|
212
213
|
blockquote {
|
|
213
214
|
padding: 1.25rem;
|
|
214
215
|
background: var(--dc-bg-2);
|
|
@@ -222,7 +223,7 @@ blockquote *:last-child {
|
|
|
222
223
|
margin-bottom: 0;
|
|
223
224
|
}
|
|
224
225
|
|
|
225
|
-
/* 9.
|
|
226
|
+
/* 9. header */
|
|
226
227
|
header {
|
|
227
228
|
background: var(--dc-bg-2);
|
|
228
229
|
border-bottom: 1px solid var(--dc-bg-3);
|
|
@@ -288,7 +289,7 @@ header nav ul li:not(:first-child)::before {
|
|
|
288
289
|
content: "• ";
|
|
289
290
|
}
|
|
290
291
|
|
|
291
|
-
/* 10.
|
|
292
|
+
/* 10. footer */
|
|
292
293
|
footer {
|
|
293
294
|
border-top: 1px solid var(--dc-bg-3);
|
|
294
295
|
padding: 0.5rem calc(50vw - 50%);
|
|
@@ -308,7 +309,7 @@ footer h3 {
|
|
|
308
309
|
border-bottom: 0;
|
|
309
310
|
}
|
|
310
311
|
|
|
311
|
-
/* 11.
|
|
312
|
+
/* 11. buttons and inputs */
|
|
312
313
|
a button,
|
|
313
314
|
button,
|
|
314
315
|
input[type="submit"],
|
|
@@ -366,7 +367,7 @@ textarea {
|
|
|
366
367
|
max-width: 100%;
|
|
367
368
|
}
|
|
368
369
|
|
|
369
|
-
/* 12.
|
|
370
|
+
/* 12. code and keyboards */
|
|
370
371
|
code,
|
|
371
372
|
samp,
|
|
372
373
|
kbd,
|
|
@@ -388,7 +389,7 @@ pre {
|
|
|
388
389
|
overflow: auto;
|
|
389
390
|
}
|
|
390
391
|
|
|
391
|
-
/* 13.
|
|
392
|
+
/* 13. details */
|
|
392
393
|
details {
|
|
393
394
|
padding: 0.5rem 1rem;
|
|
394
395
|
background: var(--dc-bg-2);
|
|
@@ -415,7 +416,7 @@ details[open] > *:last-child {
|
|
|
415
416
|
padding-bottom: 0;
|
|
416
417
|
}
|
|
417
418
|
|
|
418
|
-
/* 14.
|
|
419
|
+
/* 14. description lists */
|
|
419
420
|
dt {
|
|
420
421
|
font-weight: bold;
|
|
421
422
|
}
|
|
@@ -424,14 +425,14 @@ dd::before {
|
|
|
424
425
|
content: "→ ";
|
|
425
426
|
}
|
|
426
427
|
|
|
427
|
-
/* 15.
|
|
428
|
+
/* 15. horizontal rules */
|
|
428
429
|
hr {
|
|
429
430
|
border: 0;
|
|
430
431
|
border-bottom: 1px solid var(--dc-bg-3);
|
|
431
432
|
margin: 1rem auto;
|
|
432
433
|
}
|
|
433
434
|
|
|
434
|
-
/* 16.
|
|
435
|
+
/* 16. fieldsets */
|
|
435
436
|
fieldset {
|
|
436
437
|
margin-top: 1rem;
|
|
437
438
|
padding: 2rem;
|
|
@@ -443,7 +444,7 @@ legend {
|
|
|
443
444
|
padding: auto 0.5rem;
|
|
444
445
|
}
|
|
445
446
|
|
|
446
|
-
/* 17.
|
|
447
|
+
/* 17. tables */
|
|
447
448
|
table {
|
|
448
449
|
border-collapse: collapse;
|
|
449
450
|
width: 100%;
|
|
@@ -469,7 +470,7 @@ table caption {
|
|
|
469
470
|
margin-bottom: 0.5rem;
|
|
470
471
|
}
|
|
471
472
|
|
|
472
|
-
/* 18.
|
|
473
|
+
/* 18. lists */
|
|
473
474
|
ol,
|
|
474
475
|
ul {
|
|
475
476
|
padding-left: 2rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intergrav/dev.css",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.1",
|
|
4
4
|
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
|
|
5
5
|
"author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -0,0 +1,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-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
|
+
}
|
package/theme/boilerplate.css
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
/*
|
|
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 */
|
|
2
4
|
|
|
3
5
|
:root {
|
|
4
|
-
/*
|
|
5
|
-
--dc-font-sans: sans-serif; /*
|
|
6
|
-
--dc-font-mono: monospace; /*
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
--dc-tx-
|
|
10
|
-
--dc-
|
|
11
|
-
--dc-bg-
|
|
12
|
-
--dc-bg-
|
|
13
|
-
--dc-
|
|
14
|
-
--dc-
|
|
15
|
-
--dc-lkb-
|
|
16
|
-
--dc-lkb-
|
|
17
|
-
--dc-
|
|
18
|
-
--dc-ac-
|
|
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 */
|
|
19
22
|
}
|
|
@@ -0,0 +1,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-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
|
+
}
|
|
@@ -0,0 +1,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-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
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: catppuccin's mocha 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: #cdd6f4; /* primary text | Text */
|
|
21
|
+
--dc-d-tx-2: #cdd6f4; /* secondary text | Text */
|
|
22
|
+
--dc-d-bg-1: #181825; /* main background | Mantle */
|
|
23
|
+
--dc-d-bg-2: #1e1e2e; /* secondary background | Base */
|
|
24
|
+
--dc-d-bg-3: #313244; /* outlines | Surface0 */
|
|
25
|
+
--dc-d-lk-1: #89b4fa; /* link text | Blue */
|
|
26
|
+
--dc-d-lkb-1: #45475a; /* link button background | Surface1 */
|
|
27
|
+
--dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
|
|
28
|
+
--dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
|
|
29
|
+
--dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */
|
|
30
|
+
--dc-d-ac-tx: #cdd6f4; /* 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
|
+
}
|
package/theme/day.css
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: makes it always light, regardless of device setting */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* colors */
|
|
6
|
+
--dc-tx-1: #000000;
|
|
7
|
+
--dc-tx-2: #1a1a1a;
|
|
8
|
+
--dc-bg-1: #fafafa;
|
|
9
|
+
--dc-bg-2: #fff;
|
|
10
|
+
--dc-bg-3: #ebebeb;
|
|
11
|
+
--dc-lk-1: #0068d6;
|
|
12
|
+
--dc-lkb-1: #0072f5;
|
|
13
|
+
--dc-lkb-2: #0062d1;
|
|
14
|
+
--dc-lkb-tx: #ededed;
|
|
15
|
+
--dc-ac-1: #8e4ec6;
|
|
16
|
+
--dc-ac-tx: #ededed;
|
|
17
|
+
}
|
package/theme/night.css
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: makes it always dark, regardless of device setting */
|
|
2
3
|
|
|
3
4
|
:root {
|
|
4
|
-
/*
|
|
5
|
+
/* colors */
|
|
5
6
|
--dc-tx-1: #ededed;
|
|
6
7
|
--dc-tx-2: #a1a1a1;
|
|
7
8
|
--dc-bg-1: #000;
|
package/theme/terminal.css
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: has a similar look to a computer terminal */
|
|
2
3
|
|
|
3
4
|
@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
|
|
4
5
|
|
|
5
6
|
:root {
|
|
6
|
-
/*
|
|
7
|
+
/* font families */
|
|
7
8
|
--dc-font-sans: "Geist Mono", monospace;
|
|
8
9
|
--dc-font-mono: "Geist Mono", monospace;
|
|
9
|
-
|
|
10
|
+
|
|
11
|
+
/* colors */
|
|
10
12
|
--dc-tx-1: #ffffff;
|
|
11
13
|
--dc-tx-2: #eeeeee;
|
|
12
14
|
--dc-bg-1: #000000;
|