@intergrav/dev.css 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@intergrav/dev.css",
-	"version": "3.1.0",
+	"version": "3.1.2",
 	"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
 	"author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
 	"license": "MIT",

package/theme/boilerplate-auto.css

@@ -0,0 +1,51 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: a template that you can modify, but with an automatic light/dark mode */
+/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
+
+:root {
+	/* font families */
+	--dc-font-sans: sans-serif; /* sans serif */
+	--dc-font-mono: monospace; /* monospace */
+
+	/* light colors */
+	--dc-tx-1: #000000; /* primary text */
+	--dc-tx-2: #1a1a1a; /* secondary text */
+	--dc-bg-1: #fafafa; /* main background */
+	--dc-bg-2: #fff; /* secondary background */
+	--dc-bg-3: #ebebeb; /* outlines */
+	--dc-lk-1: #0068d6; /* link text */
+	--dc-lkb-1: #0072f5; /* link button background */
+	--dc-lkb-2: #0062d1; /* link button background (hover) */
+	--dc-lkb-tx: #ededed; /* link button text */
+	--dc-ac-1: #8e4ec6; /* accent color */
+	--dc-ac-tx: #ededed; /* accent color text */
+
+	/* dark colors */
+	--dc-d-tx-1: #ededed;
+	--dc-d-tx-2: #a1a1a1;
+	--dc-d-bg-1: #000;
+	--dc-d-bg-2: #0a0a0a;
+	--dc-d-bg-3: #2e2e2e;
+	--dc-d-lk-1: #52a8ff;
+	--dc-d-lkb-1: #0072f5;
+	--dc-d-lkb-2: #0062d1;
+	--dc-d-lkb-tx: #ededed;
+	--dc-d-ac-1: #8e4ec6;
+	--dc-d-ac-tx: #ededed;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--dc-tx-1: var(--dc-d-tx-1);
+		--dc-tx-2: var(--dc-d-tx-2);
+		--dc-bg-1: var(--dc-d-bg-1);
+		--dc-bg-2: var(--dc-d-bg-2);
+		--dc-bg-3: var(--dc-d-bg-3);
+		--dc-lk-1: var(--dc-d-lk-1);
+		--dc-lkb-1: var(--dc-d-lkb-1);
+		--dc-lkb-2: var(--dc-d-lkb-2);
+		--dc-lkb-tx: var(--dc-d-lkb-tx);
+		--dc-ac-1: var(--dc-d-ac-1);
+		--dc-ac-tx: var(--dc-d-ac-tx);
+	}
+}

package/theme/boilerplate.css

@@ -1,19 +1,22 @@
-/* This theme is a template that you can modify */
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: a template that you can modify */
+/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
 
 :root {
-	/* Fonts */
-	--dc-font-sans: sans-serif; /* Sans Serif */
-	--dc-font-mono: monospace; /* Monospace */
-	/* Colors */
-	--dc-tx-1: #000000; /* Primary text */
-	--dc-tx-2: #1a1a1a; /* Secondary text */
-	--dc-bg-1: #fafafa; /* Main background */
-	--dc-bg-2: #fff; /* Secondary background */
-	--dc-bg-3: #ebebeb; /* Outlines */
-	--dc-lk-1: #0068d6; /* Link text */
-	--dc-lkb-1: #0072f5; /* Link button background */
-	--dc-lkb-2: #0062d1; /* Link button background (hover) */
-	--dc-lkb-tx: #ededed; /* Link button text */
-	--dc-ac-1: #8e4ec6; /* Accent color */
-	--dc-ac-tx: #ededed; /* Accent color text */
+	/* font families */
+	--dc-font-sans: sans-serif; /* sans serif */
+	--dc-font-mono: monospace; /* monospace */
+
+	/* colors */
+	--dc-tx-1: #000000; /* primary text */
+	--dc-tx-2: #1a1a1a; /* secondary text */
+	--dc-bg-1: #fafafa; /* main background */
+	--dc-bg-2: #fff; /* secondary background */
+	--dc-bg-3: #ebebeb; /* outlines */
+	--dc-lk-1: #0068d6; /* link text */
+	--dc-lkb-1: #0072f5; /* link button background */
+	--dc-lkb-2: #0062d1; /* link button background (hover) */
+	--dc-lkb-tx: #ededed; /* link button text */
+	--dc-ac-1: #8e4ec6; /* accent color */
+	--dc-ac-tx: #ededed; /* accent color text */
 }

package/theme/catppuccin-frappe.css

@@ -0,0 +1,47 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: catppuccin's frappé color scheme - https://github.com/catppuccin */
+/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
+
+:root {
+	/* light colors - latte */
+	--dc-tx-1: #4c4f69; /* primary text | Text */
+	--dc-tx-2: #4c4f69; /* secondary text | Text */
+	--dc-bg-1: #e6e9ef; /* main background | Mantle */
+	--dc-bg-2: #eff1f5; /* secondary background | Base */
+	--dc-bg-3: #ccd0da; /* outlines | Surface0 */
+	--dc-lk-1: #1e66f5; /* link text | Blue */
+	--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
+	--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
+	--dc-lkb-tx: #4c4f69; /* link button text | Text */
+	--dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
+	--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
+
+	/* dark colors */
+	--dc-d-tx-1: #c6d0f5; /* primary text | Text */
+	--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
+	--dc-d-bg-1: #292c3c; /* main background | Mantle */
+	--dc-d-bg-2: #303446; /* secondary background | Base */
+	--dc-d-bg-3: #414559; /* outlines | Surface0 */
+	--dc-d-lk-1: #8caaee; /* link text | Blue */
+	--dc-d-lkb-1: #51576d; /* link button background | Surface1 */
+	--dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
+	--dc-d-lkb-tx: #c6d0f5; /* link button text | Text */
+	--dc-d-ac-1: #949cbb1e; /* accent/selection color | Overlay2 + 1e */
+	--dc-d-ac-tx: #c6d0f5; /* accent/selection color text | Text */
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--dc-tx-1: var(--dc-d-tx-1);
+		--dc-tx-2: var(--dc-d-tx-2);
+		--dc-bg-1: var(--dc-d-bg-1);
+		--dc-bg-2: var(--dc-d-bg-2);
+		--dc-bg-3: var(--dc-d-bg-3);
+		--dc-lk-1: var(--dc-d-lk-1);
+		--dc-lkb-1: var(--dc-d-lkb-1);
+		--dc-lkb-2: var(--dc-d-lkb-2);
+		--dc-lkb-tx: var(--dc-d-lkb-tx);
+		--dc-ac-1: var(--dc-d-ac-1);
+		--dc-ac-tx: var(--dc-d-ac-tx);
+	}
+}

package/theme/catppuccin-macchiato.css

@@ -0,0 +1,47 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */
+/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
+
+:root {
+	/* light colors - latte */
+	--dc-tx-1: #4c4f69; /* primary text | Text */
+	--dc-tx-2: #4c4f69; /* secondary text | Text */
+	--dc-bg-1: #e6e9ef; /* main background | Mantle */
+	--dc-bg-2: #eff1f5; /* secondary background | Base */
+	--dc-bg-3: #ccd0da; /* outlines | Surface0 */
+	--dc-lk-1: #1e66f5; /* link text | Blue */
+	--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
+	--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
+	--dc-lkb-tx: #4c4f69; /* link button text | Text */
+	--dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
+	--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
+
+	/* dark colors */
+	--dc-d-tx-1: #cad3f5; /* primary text | Text */
+	--dc-d-tx-2: #cad3f5; /* secondary text | Text */
+	--dc-d-bg-1: #1e2030; /* main background | Mantle */
+	--dc-d-bg-2: #24273a; /* secondary background | Base */
+	--dc-d-bg-3: #363a4f; /* outlines | Surface0 */
+	--dc-d-lk-1: #8aadf4; /* link text | Blue */
+	--dc-d-lkb-1: #494d64; /* link button background | Surface1 */
+	--dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
+	--dc-d-lkb-tx: #cad3f5; /* link button text | Text */
+	--dc-d-ac-1: #939ab71e; /* accent/selection color | Overlay2 + 1e */
+	--dc-d-ac-tx: #cad3f5; /* accent/selection color text | Text */
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--dc-tx-1: var(--dc-d-tx-1);
+		--dc-tx-2: var(--dc-d-tx-2);
+		--dc-bg-1: var(--dc-d-bg-1);
+		--dc-bg-2: var(--dc-d-bg-2);
+		--dc-bg-3: var(--dc-d-bg-3);
+		--dc-lk-1: var(--dc-d-lk-1);
+		--dc-lkb-1: var(--dc-d-lkb-1);
+		--dc-lkb-2: var(--dc-d-lkb-2);
+		--dc-lkb-tx: var(--dc-d-lkb-tx);
+		--dc-ac-1: var(--dc-d-ac-1);
+		--dc-ac-tx: var(--dc-d-ac-tx);
+	}
+}

package/theme/catppuccin-mocha.css

@@ -0,0 +1,47 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: catppuccin's mocha color scheme - https://github.com/catppuccin */
+/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
+
+:root {
+	/* light colors - latte */
+	--dc-tx-1: #4c4f69; /* primary text | Text */
+	--dc-tx-2: #4c4f69; /* secondary text | Text */
+	--dc-bg-1: #e6e9ef; /* main background | Mantle */
+	--dc-bg-2: #eff1f5; /* secondary background | Base */
+	--dc-bg-3: #ccd0da; /* outlines | Surface0 */
+	--dc-lk-1: #1e66f5; /* link text | Blue */
+	--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
+	--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
+	--dc-lkb-tx: #4c4f69; /* link button text | Text */
+	--dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
+	--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
+
+	/* dark colors */
+	--dc-d-tx-1: #cdd6f4; /* primary text | Text */
+	--dc-d-tx-2: #cdd6f4; /* secondary text | Text */
+	--dc-d-bg-1: #181825; /* main background | Mantle */
+	--dc-d-bg-2: #1e1e2e; /* secondary background | Base */
+	--dc-d-bg-3: #313244; /* outlines | Surface0 */
+	--dc-d-lk-1: #89b4fa; /* link text | Blue */
+	--dc-d-lkb-1: #45475a; /* link button background | Surface1 */
+	--dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
+	--dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
+	--dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */
+	--dc-d-ac-tx: #cdd6f4; /* accent/selection color text | Text */
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--dc-tx-1: var(--dc-d-tx-1);
+		--dc-tx-2: var(--dc-d-tx-2);
+		--dc-bg-1: var(--dc-d-bg-1);
+		--dc-bg-2: var(--dc-d-bg-2);
+		--dc-bg-3: var(--dc-d-bg-3);
+		--dc-lk-1: var(--dc-d-lk-1);
+		--dc-lkb-1: var(--dc-d-lkb-1);
+		--dc-lkb-2: var(--dc-d-lkb-2);
+		--dc-lkb-tx: var(--dc-d-lkb-tx);
+		--dc-ac-1: var(--dc-d-ac-1);
+		--dc-ac-tx: var(--dc-d-ac-tx);
+	}
+}

package/theme/day.css

@@ -0,0 +1,17 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: makes it always light, regardless of device setting */
+
+:root {
+	/* colors */
+	--dc-tx-1: #000000;
+	--dc-tx-2: #1a1a1a;
+	--dc-bg-1: #fafafa;
+	--dc-bg-2: #fff;
+	--dc-bg-3: #ebebeb;
+	--dc-lk-1: #0068d6;
+	--dc-lkb-1: #0072f5;
+	--dc-lkb-2: #0062d1;
+	--dc-lkb-tx: #ededed;
+	--dc-ac-1: #8e4ec6;
+	--dc-ac-tx: #ededed;
+}

package/theme/night.css

@@ -1,7 +1,8 @@
-/* This theme will make it always dark, regardless of device setting */
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: makes it always dark, regardless of device setting */
 
 :root {
-	/* Colors */
+	/* colors */
 	--dc-tx-1: #ededed;
 	--dc-tx-2: #a1a1a1;
 	--dc-bg-1: #000;

package/theme/terminal.css

@@ -1,12 +1,14 @@
-/* This theme has a similar look to a computer terminal */
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: has a similar look to a computer terminal */
 
 @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
 
 :root {
-	/* Fonts */
+	/* font families */
 	--dc-font-sans: "Geist Mono", monospace;
 	--dc-font-mono: "Geist Mono", monospace;
-	/* Colors */
+
+	/* colors */
 	--dc-tx-1: #ffffff;
 	--dc-tx-2: #eeeeee;
 	--dc-bg-1: #000000;