@intergrav/dev.css 3.2.0 → 3.4.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 (8) hide show
  1. package/README.md +1 -1
  2. package/demo.html +10 -12
  3. package/dev.css +13 -2
  4. package/package.json +1 -1
  5. package/theme/boilerplate-auto.css +1 -1
  6. package/theme/catppuccin-frappe.css +5 -5
  7. package/theme/catppuccin-macchiato.css +5 -5
  8. package/theme/catppuccin-mocha.css +5 -5
package/README.md CHANGED
@@ -36,7 +36,7 @@ Optionally, use the `<footer>` tag to create a footer for your page. Place it at
36
36
 
37
37
  ### Text
38
38
 
39
- Wrap all body text in `<p>` tags, unless it's the sole child of another element. Use the `<blockquote>` tag for quotes. To highlight text, wrap it in the `<mark>` tag. For code, use `<code>` for short inline code snippets and `<pre>` for code blocks. Use `<kbd>` for keyboard input.
39
+ Wrap all body text in `<p>` tags, unless it's the sole child of another element. Use the `<blockquote>` tag for quotes. To highlight text, wrap it in the `<mark>` tag. For code, use `<code>` for short inline code snippets and wrap that with `<pre>` for code blocks. Use `<kbd>` for keyboard input.
40
40
 
41
41
  ### Button
42
42
 
package/demo.html CHANGED
@@ -1,4 +1,4 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
@@ -129,17 +129,15 @@
129
129
  – Edward Snowden
130
130
  </blockquote>
131
131
 
132
- <pre>
133
- &#x3C;!DOCTYPE html&#x3E;
134
- &#x3C;html&#x3E;
135
- &#x3C;head&#x3E;
136
- &#x3C;title&#x3E;Hello World&#x3C;/title&#x3E;
137
- &#x3C;/head&#x3E;
138
- &#x3C;body&#x3E;
139
- &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E;
140
- &#x3C;/body&#x3E;
141
- &#x3C;/html&#x3E;</pre
142
- >
132
+ <pre><code>&#x3C;!DOCTYPE html&#x3E;
133
+ &#x3C;html&#x3E;
134
+ &#x3C;head&#x3E;
135
+ &#x3C;title&#x3E;Hello World&#x3C;/title&#x3E;
136
+ &#x3C;/head&#x3E;
137
+ &#x3C;body&#x3E;
138
+ &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E;
139
+ &#x3C;/body&#x3E;
140
+ &#x3C;/html&#x3E;</code></pre>
143
141
 
144
142
  <br />
145
143
  <hr />
package/dev.css CHANGED
@@ -2,7 +2,7 @@
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
5
+ 1. default configuration
6
6
  2. dark mode handling
7
7
  3. root color scheme
8
8
  4. css reset
@@ -23,7 +23,7 @@
23
23
  19. lists
24
24
  */
25
25
 
26
- /* 1. configuration */
26
+ /* 1. default configuration */
27
27
  :root {
28
28
  /* font families */
29
29
  --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
@@ -378,6 +378,11 @@ textarea {
378
378
  max-width: 100%;
379
379
  }
380
380
 
381
+ input,
382
+ progress {
383
+ accent-color: var(--dc-ac-1);
384
+ }
385
+
381
386
  /* 13. code and keyboards */
382
387
  code,
383
388
  samp,
@@ -388,6 +393,7 @@ pre {
388
393
  border-radius: 0.25rem;
389
394
  padding: 0.125rem 0.25rem;
390
395
  font-size: 0.9rem;
396
+ tab-size: 2;
391
397
  }
392
398
 
393
399
  kbd {
@@ -400,6 +406,11 @@ pre {
400
406
  overflow: auto;
401
407
  }
402
408
 
409
+ pre code {
410
+ padding: 0;
411
+ border: 0;
412
+ }
413
+
403
414
  /* 14. details */
404
415
  details {
405
416
  padding: 0.5rem 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intergrav/dev.css",
3
- "version": "3.2.0",
3
+ "version": "3.4.0",
4
4
  "description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
5
5
  "keywords": [
6
6
  "css",
package/theme/boilerplate-auto.css CHANGED
@@ -22,7 +22,7 @@
22
22
  --dc-ac-tx: #ededed; /* accent color text */
23
23
 
24
24
  /* dark colors */
25
- --dc-cs: dark;
25
+ --dc-d-cs: dark;
26
26
  --dc-d-tx-1: #ededed;
27
27
  --dc-d-tx-2: #a1a1a1;
28
28
  --dc-d-bg-1: #000;
package/theme/catppuccin-frappe.css CHANGED
@@ -14,11 +14,11 @@
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,8 +28,8 @@
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) {
package/theme/catppuccin-macchiato.css CHANGED
@@ -14,11 +14,11 @@
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,8 +28,8 @@
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) {
package/theme/catppuccin-mocha.css CHANGED
@@ -14,11 +14,11 @@
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,8 +28,8 @@
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) {