lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
fix: fix dc-cs in themes, some other theme color changes
+16
-16
+1
-1
theme/boilerplate-auto.css
+1
-1
theme/boilerplate-auto.css
+5
-5
theme/catppuccin-frappe.css
+5
-5
theme/catppuccin-frappe.css
···
14
14
--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
15
--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
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 */
17
+
--dc-ac-1: #8839ef; /* accent color | Mauve */
18
+
--dc-ac-tx: #eff1f5; /* accent color text | Base */
19
19
20
20
/* dark colors */
21
-
--dc-cs: dark;
21
+
--dc-d-cs: dark;
22
22
--dc-d-tx-1: #c6d0f5; /* primary text | Text */
23
23
--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
24
24
--dc-d-bg-1: #292c3c; /* main background | Mantle */
···
28
28
--dc-d-lkb-1: #51576d; /* link button background | Surface1 */
29
29
--dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
30
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 */
31
+
--dc-d-ac-1: #ca9ee6; /* accent color | Mauve */
32
+
--dc-d-ac-tx: #303446; /* accent color text | Base */
33
33
}
34
34
35
35
@media (prefers-color-scheme: dark) {
+5
-5
theme/catppuccin-macchiato.css
+5
-5
theme/catppuccin-macchiato.css
···
14
14
--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
15
--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
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 */
17
+
--dc-ac-1: #8839ef; /* accent color | Mauve */
18
+
--dc-ac-tx: #eff1f5; /* accent color text | Base */
19
19
20
20
/* dark colors */
21
-
--dc-cs: dark;
21
+
--dc-d-cs: dark;
22
22
--dc-d-tx-1: #cad3f5; /* primary text | Text */
23
23
--dc-d-tx-2: #cad3f5; /* secondary text | Text */
24
24
--dc-d-bg-1: #1e2030; /* main background | Mantle */
···
28
28
--dc-d-lkb-1: #494d64; /* link button background | Surface1 */
29
29
--dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
30
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 */
31
+
--dc-d-ac-1: #c6a0f6; /* accent color | Mauve */
32
+
--dc-d-ac-tx: #24273a; /* accent color text | Base */
33
33
}
34
34
35
35
@media (prefers-color-scheme: dark) {
+5
-5
theme/catppuccin-mocha.css
+5
-5
theme/catppuccin-mocha.css
···
14
14
--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
15
--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
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 */
17
+
--dc-ac-1: #8839ef; /* accent color | Mauve */
18
+
--dc-ac-tx: #eff1f5; /* accent color text | Base */
19
19
20
20
/* dark colors */
21
-
--dc-cs: dark;
21
+
--dc-d-cs: dark;
22
22
--dc-d-tx-1: #cdd6f4; /* primary text | Text */
23
23
--dc-d-tx-2: #cdd6f4; /* secondary text | Text */
24
24
--dc-d-bg-1: #181825; /* main background | Mantle */
···
28
28
--dc-d-lkb-1: #45475a; /* link button background | Surface1 */
29
29
--dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
30
30
--dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
31
-
--dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */
32
-
--dc-d-ac-tx: #cdd6f4; /* accent/selection color text | Text */
31
+
--dc-d-ac-1: #cba6f7; /* accent color | Mauve */
32
+
--dc-d-ac-tx: #1e1e2e; /* accent color text | Base */
33
33
}
34
34
35
35
@media (prefers-color-scheme: dark) {