@intergrav/dev.css 3.6.2 → 4.0.0

package/theme/catppuccin-macchiato.user.css

@@ -0,0 +1,26 @@
+/* ==userstyle==
+@name         catppuccin macchiato and latte for dev.css
+@description  dev.css theme based on catppuccin's macchiato and latte colors - https://github.com/catppuccin
+@namespace    intergrav
+@version      1.0.0
+@author       intergrav <intergrav@proton.me> (https://devins.page)
+@homepageURL  https://devcss.devins.page
+@supportURL   https://github.com/intergrav/dev.css/issues
+@license      MIT
+==/userstyle== */
+
+:root {
+	/* colors - latte and macchiato */
+	--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
+	--dc-tx-1: light-dark(#4c4f69, #cad3f5); /* primary text | Text */
+	--dc-tx-2: light-dark(#4c4f69, #cad3f5); /* secondary text | Text */
+	--dc-bg-1: light-dark(#eff1f5, #24273a); /* primary background | Base */
+	--dc-bg-2: light-dark(#e6e9ef, #1e2030); /* secondary background | Mantle */
+	--dc-bg-3: light-dark(#ccd0da, #363a4f); /* border | Surface0 */
+	--dc-lk-1: light-dark(#1e66f5, #8aadf4); /* link text | Blue */
+	--dc-lkb-1: light-dark(#bcc0cc, #494d64); /* link button | Surface1 */
+	--dc-lkb-2: light-dark(#ccd0da, #363a4f); /* link button hover | Surface0 */
+	--dc-lkb-tx: light-dark(#4c4f69, #cad3f5); /* text over link button | Text */
+	--dc-ac-1: light-dark(#8839ef, #c6a0f6); /* accent color | Mauve */
+	--dc-ac-tx: light-dark(#eff1f5, #24273a); /* text over accent color | Base */
+}

package/theme/catppuccin-mocha.user.css

@@ -0,0 +1,26 @@
+/* ==userstyle==
+@name         catppuccin mocha and latte for dev.css
+@description  dev.css theme based on catppuccin's mocha and latte colors - https://github.com/catppuccin
+@namespace    intergrav
+@version      1.0.0
+@author       intergrav <intergrav@proton.me> (https://devins.page)
+@homepageURL  https://devcss.devins.page
+@supportURL   https://github.com/intergrav/dev.css/issues
+@license      MIT
+==/userstyle== */
+
+:root {
+	/* colors - latte and mocha */
+	--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
+	--dc-tx-1: light-dark(#4c4f69, #cdd6f4); /* primary text | Text */
+	--dc-tx-2: light-dark(#4c4f69, #cdd6f4); /* secondary text | Text */
+	--dc-bg-1: light-dark(#eff1f5, #1e1e2e); /* primary background | Base */
+	--dc-bg-2: light-dark(#e6e9ef, #181825); /* secondary background | Mantle */
+	--dc-bg-3: light-dark(#ccd0da, #313244); /* border | Surface0 */
+	--dc-lk-1: light-dark(#1e66f5, #89b4fa); /* link text | Blue */
+	--dc-lkb-1: light-dark(#bcc0cc, #45475a); /* link button | Surface1 */
+	--dc-lkb-2: light-dark(#ccd0da, #313244); /* link button hover | Surface0 */
+	--dc-lkb-tx: light-dark(#4c4f69, #cdd6f4); /* text over link button | Text */
+	--dc-ac-1: light-dark(#8839ef, #cba6f7); /* accent color | Mauve */
+	--dc-ac-tx: light-dark(#eff1f5, #1e1e2e); /* text over accent color | Base */
+}

package/theme/day.user.css

@@ -0,0 +1,26 @@
+/* ==userstyle==
+@name         day for dev.css
+@description  dev.css theme that makes it always light mode regardless of device setting
+@namespace    intergrav
+@version      1.0.0
+@author       intergrav <intergrav@proton.me> (https://devins.page)
+@homepageURL  https://devcss.devins.page
+@supportURL   https://github.com/intergrav/dev.css/issues
+@license      MIT
+==/userstyle== */
+
+:root {
+	/* colors */
+	--dc-cs: light;
+	--dc-tx-1: #171717;
+	--dc-tx-2: #666;
+	--dc-bg-1: #fff;
+	--dc-bg-2: #fafafa;
+	--dc-bg-3: #ebebeb;
+	--dc-lk-1: #005ff2;
+	--dc-lkb-1: #006bff;
+	--dc-lkb-2: #0059ec;
+	--dc-lkb-tx: #fff;
+	--dc-ac-1: #a000f8;
+	--dc-ac-tx: #fff;
+}

package/theme/night.user.css

@@ -0,0 +1,26 @@
+/* ==userstyle==
+@name         night for dev.css
+@description  dev.css theme that makes it always dark mode regardless of device setting
+@namespace    intergrav
+@version      1.0.0
+@author       intergrav <intergrav@proton.me> (https://devins.page)
+@homepageURL  https://devcss.devins.page
+@supportURL   https://github.com/intergrav/dev.css/issues
+@license      MIT
+==/userstyle== */
+
+:root {
+	/* colors */
+	--dc-cs: dark;
+	--dc-tx-1: #ededed;
+	--dc-tx-2: #a1a1a1;
+	--dc-bg-1: #0a0a0a;
+	--dc-bg-2: #000;
+	--dc-bg-3: #2e2e2e;
+	--dc-lk-1: #47a8ff;
+	--dc-lkb-1: #006efe;
+	--dc-lkb-2: #005be7;
+	--dc-lkb-tx: #fff;
+	--dc-ac-1: #9440d5;
+	--dc-ac-tx: #fff;
+}

package/theme/terminal.user.css

@@ -0,0 +1,29 @@
+/* ==userstyle==
+@name         terminal for dev.css
+@description  dev.css theme that has a similar look to a computer terminal
+@namespace    intergrav
+@version      1.0.0
+@author       intergrav <intergrav@proton.me> (https://devins.page)
+@homepageURL  https://devcss.devins.page
+@supportURL   https://github.com/intergrav/dev.css/issues
+@license      MIT
+==/userstyle== */
+
+:root {
+	/* font families */
+	--dc-font: var(--dc-font-mono);
+
+	/* colors */
+	--dc-cs: dark;
+	--dc-tx-1: #ffffff;
+	--dc-tx-2: #eeeeee;
+	--dc-bg-1: #001a00;
+	--dc-bg-2: #000;
+	--dc-bg-3: #005800;
+	--dc-lk-1: #00ff00;
+	--dc-lkb-1: #00ff00;
+	--dc-lkb-2: #00d400;
+	--dc-lkb-tx: #000;
+	--dc-ac-1: #00ff00;
+	--dc-ac-tx: #000;
+}

package/addon/header-sidebar.css

@@ -1,97 +0,0 @@
-/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
-/* about: turns the header into a sidebar if the viewport is wide enough */
-/* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */
-
-@media (min-width: 84rem) {
-	header {
-		all: unset;
-	}
-
-	header * {
-		margin-top: 0;
-		margin-bottom: 0.25rem;
-	}
-
-	header {
-		padding: 3rem 2rem;
-		padding-right: 0;
-		position: fixed;
-		top: 0;
-		left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
-		width: 16rem;
-		height: calc(100% - 6rem);
-		overflow-y: auto;
-	}
-
-	header nav ul {
-		padding-left: 1rem;
-		border-top: 1px solid var(--dc-bg-3);
-		padding-top: 1rem;
-		margin-top: 0.75rem;
-	}
-
-	header nav ul li {
-		display: list-item;
-	}
-
-	header nav ul li:not(:first-child)::before {
-		content: unset;
-	}
-
-	/* hacky: reset stuff to default incase you are using header-oneline.css */
-	h1 {
-		font-size: 2rem !important;
-	}
-
-	h2 {
-		font-size: 1.5rem !important;
-	}
-
-	h3 {
-		font-size: 1.17rem !important;
-	}
-
-	h4,
-	p,
-	a {
-		font-size: 1rem !important;
-	}
-
-	h5 {
-		font-size: 0.83rem !important;
-	}
-
-	h6 {
-		font-size: 0.67rem !important;
-	}
-
-	header nav {
-		font-size: 1rem !important;
-	}
-
-	header h2 header h3,
-	header h4,
-	header h5,
-	header h6 {
-		color: var(--dc-tx-1);
-		font-weight: bold;
-	}
-
-	header h1,
-	header h2,
-	header h3,
-	header h4,
-	header h5,
-	header h6 {
-		white-space: normal;
-		line-height: 1;
-	}
-
-	header h2::after,
-	header h3::after,
-	header h4::after,
-	header h5::after,
-	header h6::after {
-		content: unset;
-	}
-}

package/demo.html

@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Demo - dev.css</title>
-		<link rel="stylesheet" href="dev.css" />
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"
-		/>
-	</head>
-
-	<body>
-		<header>
-			<h1>dev.css</h1>
-			<p>This is the demo page for dev.css.</p>
-			<nav>
-				<ul>
-					<li><a href="demo">Demo</a></li>
-					<li><a href="https://github.com/intergrav/dev.css">GitHub</a></li>
-					<li>
-						<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a>
-					</li>
-					<li>
-						<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/"
-							>jsDelivr</a
-						>
-					</li>
-				</ul>
-			</nav>
-		</header>
-
-		<h1>Demo</h1>
-		<p>
-			This is the demo page for dev.css, a classless, lightweight, and accessible CSS framework!
-		</p>
-		<h2>Heading 2</h2>
-		<p>
-			This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
-			elit.
-		</p>
-		<h3>Heading 3</h3>
-		<p>
-			This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
-			elit.
-		</p>
-		<h4>Heading 4</h4>
-		<p>
-			This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
-			elit.
-		</p>
-		<h5>Heading 5</h5>
-		<p>
-			This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
-			elit.
-		</p>
-		<h6>Heading 6</h6>
-		<p>
-			This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
-			elit.
-		</p>
-
-		<br />
-		<hr />
-		<br />
-
-		<blockquote>
-			This entire page was made with dev.css. You can view the source
-			<a href="https://github.com/intergrav/dev.css/blob/main/demo.html">here</a
-			>.
-		</blockquote>
-
-		<br />
-		<hr />
-		<br />
-
-		<p>
-			Lorem <mark>ipsum</mark> dolor sit amet
-			<strong>consectetur</strong> adipisicing elit. Aut
-			<i>harum molestias</i> labore amet possimus
-			<s>exercitationem aperiam</s> earum, doloribus
-			<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
-			quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
-		</p>
-
-		<p>
-			Lorem ipsum dolor sit amet consectetur adipisicing elit.
-			<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
-			repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
-			debitis eveniet totam minima vel.
-		</p>
-
-		<ul>
-			<li>List item</li>
-			<li>List item</li>
-			<li>List item</li>
-			<li>List item</li>
-		</ul>
-
-		<ol>
-			<li>Step 1</li>
-			<li>Step 2</li>
-			<li>????</li>
-			<li>Profit!</li>
-		</ol>
-
-		<dl>
-			<dt>Web</dt>
-			<dd>The part of the Internet that contains websites and web pages</dd>
-			<dt>HTML</dt>
-			<dd>A markup language for creating web pages</dd>
-			<dt>CSS</dt>
-			<dd>A technology to make HTML look better</dd>
-		</dl>
-
-		<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
-			If you think privacy is unimportant for you because you have nothing to
-			hide, you might as well say free speech is unimportant for you because you
-			have nothing useful to say.
-			<br />
-			<br />
-			– Edward Snowden
-		</blockquote>
-
-		<pre><code>&#x3C;!DOCTYPE html&#x3E;
-	&#x3C;html&#x3E;
-		&#x3C;head&#x3E;
-			&#x3C;title&#x3E;Hello World&#x3C;/title&#x3E;
-		&#x3C;/head&#x3E;
-		&#x3C;body&#x3E;
-			&#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E;
-		&#x3C;/body&#x3E;
-&#x3C;/html&#x3E;</code></pre>
-
-		<br />
-		<hr />
-		<br />
-
-		<details>
-			<summary>Click me!</summary>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-		</details>
-
-		<br />
-		<hr />
-		<br />
-
-		<table>
-			<caption>
-				Ho-kago Tea Time
-			</caption>
-			<thead>
-				<tr>
-					<th>Name</th>
-					<th>Instrument</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td>Yui Hirasawa</td>
-					<td>Lead Guitar</td>
-				</tr>
-				<tr>
-					<td>Mio Akiyama</td>
-					<td>Bass</td>
-				</tr>
-				<tr>
-					<td>Ritsu Tainaka</td>
-					<td>Drums</td>
-				</tr>
-				<tr>
-					<td>Tsumugi Kotobuki</td>
-					<td>Keyboard</td>
-				</tr>
-				<tr>
-					<td>Azusa Nakano</td>
-					<td>Rhythm Guitar</td>
-				</tr>
-			</tbody>
-			<tfoot>
-				<tr>
-					<th>Name</th>
-					<th>Instrument</th>
-				</tr>
-			</tfoot>
-		</table>
-
-		<br />
-		<hr />
-		<br />
-
-		<form>
-			<p>
-				<em>
-					This is not a real form and does not submit or save any information.
-				</em>
-			</p>
-			<p>
-				<label>First name</label><br />
-				<input type="text" name="first_name" />
-			</p>
-			<p>
-				<label>Last name</label><br />
-				<input type="text" name="last_name" />
-			</p>
-			<p>
-				<label>Gender</label><br />
-				<label>
-					<input type="radio" name="gender" value="Male" />
-					Male
-				</label>
-				<br />
-				<label>
-					<input type="radio" name="gender" value="Female" />
-					Female
-				</label>
-				<br />
-				<label>
-					<input type="radio" name="gender" value="other-none-na" />
-					Non-binary
-				</label>
-			</p>
-			<p>
-				<label>Email</label><br />
-				<input type="email" name="email" required="" />
-			</p>
-			<p>
-				<label>Phone number</label><br />
-				<input type="tel" name="phone" />
-			</p>
-			<p>
-				<label>Password</label><br />
-				<input type="password" name="password" />
-			</p>
-			<p>
-				<label>Country</label><br />
-				<select>
-					<option>China</option>
-					<option>India</option>
-					<option>United States</option>
-					<option>Indonesia</option>
-					<option>Brazil</option>
-				</select>
-			</p>
-			<p>
-				<label>Comments</label><br />
-				<textarea></textarea>
-			</p>
-			<p>
-				<label>
-					<input type="checkbox" value="terms" />
-					I agree to the <a>terms and conditions</a>
-				</label>
-			</p>
-			<p>
-				<button>Sign up</button>
-				<button type="reset">Reset form</button>
-				<button disabled="disabled">Disabled</button>
-			</p>
-		</form>
-
-		<br />
-		<hr />
-		<br />
-
-		<img
-			src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
-			alt="Mt. Fuji"
-		/>
-
-		<p>
-			Inline image:
-			<a href="#"
-				><img
-					src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
-					width="50"
-					alt="Mt. Fuji"
-			/></a>
-		</p>
-
-		<footer>
-			<p>This is an optional footer.</p>
-		</footer>
-	</body>
-</html>

package/theme/boilerplate-auto.css

@@ -1,54 +0,0 @@
-/* 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-cs: light; /* light/dark scrollbars, inputs, etc */
-	--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-cs: dark;
-	--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-cs: var(--dc-d-cs);
-		--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,23 +0,0 @@
-/* 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 {
-	/* font families */
-	--dc-font-sans: sans-serif; /* sans serif */
-	--dc-font-mono: monospace; /* monospace */
-
-	/* colors */
-	--dc-cs: light; /* light/dark scrollbars, inputs, etc */
-	--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

@@ -1,50 +0,0 @@
-/* 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-cs: light;
-	--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: #8839ef; /* accent color | Mauve */
-	--dc-ac-tx: #eff1f5; /* accent color text | Base */
-
-	/* dark colors */
-	--dc-d-cs: dark;
-	--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: #ca9ee6; /* accent color | Mauve */
-	--dc-d-ac-tx: #303446; /* accent color text | Base */
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--dc-cs: var(--dc-d-cs);
-		--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);
-	}
-}