clampography 2.0.0-beta.3 → 2.0.0-beta.30

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 (30) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +133 -35
  3. package/css/base.css +501 -0
  4. package/css/base.min.css +1 -0
  5. package/css/clampography.css +1050 -0
  6. package/css/clampography.min.css +1 -0
  7. package/css/extra.css +189 -0
  8. package/css/extra.min.css +1 -0
  9. package/css/figma-tokens.json +110 -0
  10. package/css/forms.css +244 -0
  11. package/css/forms.min.css +1 -0
  12. package/css/kbd.css +28 -0
  13. package/css/kbd.min.css +1 -0
  14. package/css/theme.css +73 -0
  15. package/css/theme.min.css +1 -0
  16. package/package.json +42 -22
  17. package/src/base.js +628 -428
  18. package/src/convert.js +285 -0
  19. package/src/export-figma.js +89 -0
  20. package/src/extra.js +256 -137
  21. package/src/forms.js +298 -0
  22. package/src/index.js +254 -90
  23. package/src/kbd.js +88 -0
  24. package/src/print.js +92 -0
  25. package/src/theme-plugin.js +68 -14
  26. package/src/theme.js +34 -0
  27. package/src/themes.js +43 -48
  28. package/src/types/index.d.ts +22 -0
  29. package/src/types/theme-plugin.d.ts +32 -0
  30. package/src/types/themes.d.ts +28 -0
package/css/theme.css ADDED
@@ -0,0 +1,73 @@
1
+ @layer base {
2
+
3
+ :where(:root) {
4
+ color-scheme: light;
5
+ --clampography-background: oklch(100.0% 0.000 89.9);
6
+ --clampography-border: oklch(94.6% 0.000 89.9);
7
+ --clampography-error: oklch(65.4% 0.229 27.0);
8
+ --clampography-heading: oklch(15.0% 0.021 264.3);
9
+ --clampography-info: oklch(68.3% 0.166 259.7);
10
+ --clampography-link: oklch(60.3% 0.216 259.8);
11
+ --clampography-muted: oklch(51.9% 0.014 259.8);
12
+ --clampography-primary: oklch(60.3% 0.216 259.8);
13
+ --clampography-secondary: oklch(54.9% 0.280 300.0);
14
+ --clampography-success: oklch(75.8% 0.166 161.7);
15
+ --clampography-surface: oklch(98.5% 0.000 89.9);
16
+ --clampography-text: oklch(31.1% 0.020 257.3);
17
+ --clampography-warning: oklch(79.9% 0.136 72.2);
18
+ }
19
+
20
+ @media (prefers-color-scheme: dark) {
21
+
22
+ :root {
23
+ color-scheme: dark;
24
+ --clampography-background: oklch(13.3% 0.016 284.0);
25
+ --clampography-border: oklch(43.4% 0.006 258.3);
26
+ --clampography-error: oklch(62.9% 0.220 27.0);
27
+ --clampography-heading: oklch(94.6% 0.000 89.9);
28
+ --clampography-info: oklch(71.2% 0.155 251.4);
29
+ --clampography-link: oklch(75.3% 0.133 248.6);
30
+ --clampography-muted: oklch(68.9% 0.006 264.5);
31
+ --clampography-primary: oklch(75.3% 0.133 248.6);
32
+ --clampography-secondary: oklch(62.6% 0.243 301.2);
33
+ --clampography-success: oklch(66.3% 0.148 160.6);
34
+ --clampography-surface: oklch(21.2% 0.009 255.6);
35
+ --clampography-text: oklch(88.8% 0.007 268.5);
36
+ --clampography-warning: oklch(72.1% 0.164 63.1);
37
+ }
38
+ }
39
+
40
+ [data-theme="dark"] {
41
+ color-scheme: dark;
42
+ --clampography-background: oklch(13.3% 0.016 284.0);
43
+ --clampography-border: oklch(43.4% 0.006 258.3);
44
+ --clampography-error: oklch(62.9% 0.220 27.0);
45
+ --clampography-heading: oklch(94.6% 0.000 89.9);
46
+ --clampography-info: oklch(71.2% 0.155 251.4);
47
+ --clampography-link: oklch(75.3% 0.133 248.6);
48
+ --clampography-muted: oklch(68.9% 0.006 264.5);
49
+ --clampography-primary: oklch(75.3% 0.133 248.6);
50
+ --clampography-secondary: oklch(62.6% 0.243 301.2);
51
+ --clampography-success: oklch(66.3% 0.148 160.6);
52
+ --clampography-surface: oklch(21.2% 0.009 255.6);
53
+ --clampography-text: oklch(88.8% 0.007 268.5);
54
+ --clampography-warning: oklch(72.1% 0.164 63.1);
55
+ }
56
+
57
+ [data-theme="light"] {
58
+ color-scheme: light;
59
+ --clampography-background: oklch(100.0% 0.000 89.9);
60
+ --clampography-border: oklch(94.6% 0.000 89.9);
61
+ --clampography-error: oklch(65.4% 0.229 27.0);
62
+ --clampography-heading: oklch(15.0% 0.021 264.3);
63
+ --clampography-info: oklch(68.3% 0.166 259.7);
64
+ --clampography-link: oklch(60.3% 0.216 259.8);
65
+ --clampography-muted: oklch(51.9% 0.014 259.8);
66
+ --clampography-primary: oklch(60.3% 0.216 259.8);
67
+ --clampography-secondary: oklch(54.9% 0.280 300.0);
68
+ --clampography-success: oklch(75.8% 0.166 161.7);
69
+ --clampography-surface: oklch(98.5% 0.000 89.9);
70
+ --clampography-text: oklch(31.1% 0.020 257.3);
71
+ --clampography-warning: oklch(79.9% 0.136 72.2);
72
+ }
73
+ }
package/css/theme.min.css ADDED
@@ -0,0 +1 @@
1
+ @layer base{:where(:root){color-scheme:light;--clampography-background:oklch(100.0% 0.000 89.9);--clampography-border:oklch(94.6% 0.000 89.9);--clampography-error:oklch(65.4% 0.229 27.0);--clampography-heading:oklch(15.0% 0.021 264.3);--clampography-info:oklch(68.3% 0.166 259.7);--clampography-link:oklch(60.3% 0.216 259.8);--clampography-muted:oklch(51.9% 0.014 259.8);--clampography-primary:oklch(60.3% 0.216 259.8);--clampography-secondary:oklch(54.9% 0.280 300.0);--clampography-success:oklch(75.8% 0.166 161.7);--clampography-surface:oklch(98.5% 0.000 89.9);--clampography-text:oklch(31.1% 0.020 257.3);--clampography-warning:oklch(79.9% 0.136 72.2)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(13.3% 0.016 284.0);--clampography-border:oklch(43.4% 0.006 258.3);--clampography-error:oklch(62.9% 0.220 27.0);--clampography-heading:oklch(94.6% 0.000 89.9);--clampography-info:oklch(71.2% 0.155 251.4);--clampography-link:oklch(75.3% 0.133 248.6);--clampography-muted:oklch(68.9% 0.006 264.5);--clampography-primary:oklch(75.3% 0.133 248.6);--clampography-secondary:oklch(62.6% 0.243 301.2);--clampography-success:oklch(66.3% 0.148 160.6);--clampography-surface:oklch(21.2% 0.009 255.6);--clampography-text:oklch(88.8% 0.007 268.5);--clampography-warning:oklch(72.1% 0.164 63.1)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(13.3% 0.016 284.0);--clampography-border:oklch(43.4% 0.006 258.3);--clampography-error:oklch(62.9% 0.220 27.0);--clampography-heading:oklch(94.6% 0.000 89.9);--clampography-info:oklch(71.2% 0.155 251.4);--clampography-link:oklch(75.3% 0.133 248.6);--clampography-muted:oklch(68.9% 0.006 264.5);--clampography-primary:oklch(75.3% 0.133 248.6);--clampography-secondary:oklch(62.6% 0.243 301.2);--clampography-success:oklch(66.3% 0.148 160.6);--clampography-surface:oklch(21.2% 0.009 255.6);--clampography-text:oklch(88.8% 0.007 268.5);--clampography-warning:oklch(72.1% 0.164 63.1)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100.0% 0.000 89.9);--clampography-border:oklch(94.6% 0.000 89.9);--clampography-error:oklch(65.4% 0.229 27.0);--clampography-heading:oklch(15.0% 0.021 264.3);--clampography-info:oklch(68.3% 0.166 259.7);--clampography-link:oklch(60.3% 0.216 259.8);--clampography-muted:oklch(51.9% 0.014 259.8);--clampography-primary:oklch(60.3% 0.216 259.8);--clampography-secondary:oklch(54.9% 0.280 300.0);--clampography-success:oklch(75.8% 0.166 161.7);--clampography-surface:oklch(98.5% 0.000 89.9);--clampography-text:oklch(31.1% 0.020 257.3);--clampography-warning:oklch(79.9% 0.136 72.2)}}
package/package.json CHANGED
@@ -1,50 +1,70 @@
1
1
  {
2
- "name": "clampography",
3
- "version": "2.0.0-beta.3",
2
+ "author": "Dawid Wasowski",
4
3
  "description": "Fluid typography system based on CSS clamp() with optional themes and extra styles. A feature-rich alternative to Tailwind CSS Typography plugin.",
5
- "main": "src/index.js",
6
- "type": "module",
4
+ "devDependencies": {
5
+ "@tailwindcss/cli": "^4.3.1",
6
+ "tailwindcss": "^4.3.1"
7
+ },
7
8
  "exports": {
8
- ".": "./src/index.js",
9
- "./theme": "./src/theme-plugin.js"
9
+ ".": {
10
+ "import": "./src/index.js",
11
+ "types": "./src/types/index.d.ts"
12
+ },
13
+ "./package.json": "./package.json",
14
+ "./theme": {
15
+ "import": "./src/theme-plugin.js",
16
+ "types": "./src/types/theme-plugin.d.ts"
17
+ },
18
+ "./themes": {
19
+ "import": "./src/themes.js",
20
+ "types": "./src/types/themes.d.ts"
21
+ }
10
22
  },
11
23
  "files": [
12
- "src"
24
+ "src",
25
+ "css"
13
26
  ],
27
+ "homepage": "https://github.com/Avaray/clampography",
28
+ "jsdelivr": "css/clampography.min.css",
14
29
  "keywords": [
15
- "alternative",
16
30
  "blog",
17
31
  "clamp",
18
- "clampography",
19
32
  "content",
20
33
  "css",
21
- "fluid",
34
+ "design",
22
35
  "fluid-typography",
23
- "font",
36
+ "fluid",
24
37
  "font-size",
25
- "markdown",
38
+ "font",
39
+ "reset",
26
40
  "style",
27
41
  "styles",
28
- "tailwind",
29
42
  "tailwind-css",
30
43
  "tailwind-plugin",
44
+ "tailwind",
31
45
  "tailwindcss",
32
46
  "text",
33
47
  "theme",
34
48
  "themes",
35
49
  "typography"
36
50
  ],
37
- "repository": {
38
- "type": "git",
39
- "url": "https://github.com/Avaray/clampography.git"
40
- },
41
- "homepage": "https://next.dav.one/clampography/",
42
- "author": "Dawid Wąsowski",
43
51
  "license": "MIT",
52
+ "main": "src/index.js",
53
+ "name": "clampography",
44
54
  "peerDependencies": {
45
55
  "tailwindcss": ">=4.0.0"
46
56
  },
47
- "devDependencies": {
48
- "tailwindcss": "^4.0.0"
49
- }
57
+ "repository": {
58
+ "type": "git",
59
+ "url": "git+https://github.com/Avaray/clampography.git"
60
+ },
61
+ "scripts": {
62
+ "build": "bun src/convert.js && bun src/export-figma.js",
63
+ "dev": "bun run dev/server.js",
64
+ "test": "bun test"
65
+ },
66
+ "sideEffects": false,
67
+ "type": "module",
68
+ "unpkg": "css/clampography.min.css",
69
+ "version": "2.0.0-beta.30"
50
70
  }