@ponchia/ui 0.3.2 → 0.3.4

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/README.md +10 -3
  2. package/behaviors/index.d.ts +8 -1
  3. package/behaviors/index.js +26 -2
  4. package/classes/index.d.ts +24 -4
  5. package/classes/index.js +16 -2
  6. package/classes/vscode.css-custom-data.json +13 -1
  7. package/css/app.css +22 -11
  8. package/css/dots.css +5 -1
  9. package/css/feedback.css +12 -0
  10. package/css/overlay.css +10 -0
  11. package/css/primitives.css +45 -0
  12. package/css/tokens.css +8 -1
  13. package/dist/bronto.css +1 -1
  14. package/dist/css/app.css +1 -1
  15. package/dist/css/dots.css +1 -1
  16. package/dist/css/feedback.css +1 -1
  17. package/dist/css/overlay.css +1 -1
  18. package/dist/css/primitives.css +1 -1
  19. package/dist/css/tokens.css +1 -1
  20. package/docs/contrast.md +100 -0
  21. package/docs/reference.md +950 -0
  22. package/docs/theming.md +209 -0
  23. package/docs/usage.md +113 -0
  24. package/llms.txt +91 -0
  25. package/package.json +19 -4
  26. package/tokens/index.d.ts +5 -5
  27. package/tokens/index.js +6 -1
  28. package/tokens/index.json +12 -2
  29. package/tokens/resolved.json +131 -0
  30. package/tokens/tokens.dtcg.json +36 -9
package/tokens/resolved.json ADDED
@@ -0,0 +1,131 @@
1
+ {
2
+ "$comment": "@ponchia/ui colour tokens resolved to static values per theme (var() + sRGB color-mix() evaluated at build). For non-CSS render targets: MapLibre/canvas/WebGL/SVG. Generated from tokens/index.js — do not edit by hand; run `npm run resolved:build`. Drift-checked in CI.",
3
+ "light": {
4
+ "--accent-1": "#f2e2e1",
5
+ "--accent-2": "#efd1d1",
6
+ "--accent-3": "#ebaeaf",
7
+ "--accent-4": "#e37175",
8
+ "--accent-5": "#d71921",
9
+ "--accent-6": "#b2151b",
10
+ "--surface-1": "#f4f4f2",
11
+ "--surface-2": "#fbfbfa",
12
+ "--surface-3": "#ffffff",
13
+ "--surface-4": "#ececea",
14
+ "--surface-5": "#d8d8d4",
15
+ "--surface-6": "#a8a8a2",
16
+ "--bronto-color-bg": "#f4f4f2",
17
+ "--bronto-color-surface": "#ffffff",
18
+ "--bronto-color-surface-raised": "#ffffff",
19
+ "--bronto-color-border": "#d8d8d4",
20
+ "--bronto-color-border-strong": "#a8a8a2",
21
+ "--bronto-color-text": "#0a0a0a",
22
+ "--bronto-color-text-muted": "#686863",
23
+ "--bronto-color-action": "#d71921",
24
+ "--bronto-color-on-action": "#ffffff",
25
+ "--bronto-color-focus": "#d71921",
26
+ "--bronto-color-success": "#2f7d4f",
27
+ "--bronto-color-warning": "#806414",
28
+ "--bronto-color-danger": "#c01622",
29
+ "--bronto-color-info": "#1f63c4",
30
+ "--surface": "#ffffff",
31
+ "--surface-raised": "#ffffff",
32
+ "--surface-muted": "#ececea",
33
+ "--border": "#d8d8d4",
34
+ "--border-strong": "#a8a8a2",
35
+ "--bg": "#f4f4f2",
36
+ "--bg-elevated": "#fbfbfa",
37
+ "--bg-accent": "rgba(215, 25, 33, 0.06)",
38
+ "--panel": "#ffffff",
39
+ "--panel-strong": "#ffffff",
40
+ "--panel-soft": "#ececea",
41
+ "--line": "#d8d8d4",
42
+ "--line-strong": "#a8a8a2",
43
+ "--text": "#0a0a0a",
44
+ "--text-soft": "#353533",
45
+ "--text-dim": "#686863",
46
+ "--accent": "#d71921",
47
+ "--accent-strong": "#b2151b",
48
+ "--accent-text": "#b2151b",
49
+ "--accent-soft": "rgba(215, 25, 33, 0.1)",
50
+ "--success": "#2f7d4f",
51
+ "--success-soft": "rgba(47, 125, 79, 0.12)",
52
+ "--warning": "#806414",
53
+ "--warning-soft": "rgba(128, 100, 20, 0.13)",
54
+ "--orange": "#a85f32",
55
+ "--orange-soft": "rgba(168, 95, 50, 0.13)",
56
+ "--danger": "#c01622",
57
+ "--danger-soft": "rgba(192, 22, 34, 0.1)",
58
+ "--info": "#1f63c4",
59
+ "--info-soft": "rgba(31, 99, 196, 0.12)",
60
+ "--code-bg": "rgba(10, 10, 10, 0.05)",
61
+ "--button-text": "#ffffff",
62
+ "--field-dot": "rgba(10, 10, 10, 0.16)",
63
+ "--field-dot-hot": "rgba(10, 10, 10, 0.4)",
64
+ "--field-dot-accent": "rgba(215, 25, 33, 0.78)",
65
+ "--focus-ring": "#d71921"
66
+ },
67
+ "dark": {
68
+ "--accent-1": "#140505",
69
+ "--accent-2": "#29090a",
70
+ "--accent-3": "#521315",
71
+ "--accent-4": "#992327",
72
+ "--accent-5": "#ff3b41",
73
+ "--accent-6": "#ff5a5f",
74
+ "--surface-1": "#000000",
75
+ "--surface-2": "#0a0a0a",
76
+ "--surface-3": "#0c0c0c",
77
+ "--surface-4": "#1a1a1a",
78
+ "--surface-5": "#2a2a2a",
79
+ "--surface-6": "#444444",
80
+ "--bronto-color-bg": "#000000",
81
+ "--bronto-color-surface": "#0c0c0c",
82
+ "--bronto-color-surface-raised": "#141414",
83
+ "--bronto-color-border": "#2a2a2a",
84
+ "--bronto-color-border-strong": "#444444",
85
+ "--bronto-color-text": "#f2f2f2",
86
+ "--bronto-color-text-muted": "#858585",
87
+ "--bronto-color-action": "#ff3b41",
88
+ "--bronto-color-on-action": "#000000",
89
+ "--bronto-color-focus": "#ff3b41",
90
+ "--bronto-color-success": "#4ec27e",
91
+ "--bronto-color-warning": "#d8bd72",
92
+ "--bronto-color-danger": "#ff4d54",
93
+ "--bronto-color-info": "#6fb0e6",
94
+ "--surface": "#0c0c0c",
95
+ "--surface-raised": "#141414",
96
+ "--surface-muted": "#1a1a1a",
97
+ "--border": "#2a2a2a",
98
+ "--border-strong": "#444444",
99
+ "--bg": "#000000",
100
+ "--bg-elevated": "#0a0a0a",
101
+ "--bg-accent": "rgba(255, 59, 65, 0.08)",
102
+ "--panel": "#0c0c0c",
103
+ "--panel-strong": "#141414",
104
+ "--panel-soft": "#1a1a1a",
105
+ "--line": "#2a2a2a",
106
+ "--line-strong": "#444444",
107
+ "--text": "#f2f2f2",
108
+ "--text-soft": "#c4c4c4",
109
+ "--text-dim": "#858585",
110
+ "--accent": "#ff3b41",
111
+ "--accent-strong": "#ff5a5f",
112
+ "--accent-text": "#ff5a5f",
113
+ "--accent-soft": "rgba(255, 59, 65, 0.14)",
114
+ "--success": "#4ec27e",
115
+ "--success-soft": "rgba(78, 194, 126, 0.14)",
116
+ "--warning": "#d8bd72",
117
+ "--warning-soft": "rgba(216, 189, 114, 0.14)",
118
+ "--orange": "#d08c5b",
119
+ "--orange-soft": "rgba(208, 140, 91, 0.15)",
120
+ "--danger": "#ff4d54",
121
+ "--danger-soft": "rgba(255, 77, 84, 0.15)",
122
+ "--info": "#6fb0e6",
123
+ "--info-soft": "rgba(111, 176, 230, 0.14)",
124
+ "--code-bg": "rgba(255, 255, 255, 0.05)",
125
+ "--button-text": "#000000",
126
+ "--field-dot": "rgba(242, 242, 242, 0.14)",
127
+ "--field-dot-hot": "rgba(242, 242, 242, 0.36)",
128
+ "--field-dot-accent": "rgba(255, 59, 65, 0.82)",
129
+ "--focus-ring": "#ff3b41"
130
+ }
131
+ }
package/tokens/tokens.dtcg.json CHANGED
@@ -80,15 +80,6 @@
80
80
  ]
81
81
  }
82
82
  },
83
- "display": {
84
- "DEFAULT": {
85
- "$type": "fontFamily",
86
- "$value": null,
87
- "$extensions": {
88
- "com.ponchia.css": "'Doto', var(--mono)"
89
- }
90
- }
91
- },
92
83
  "dot": {
93
84
  "font": {
94
85
  "$type": "fontFamily",
@@ -106,6 +97,15 @@
106
97
  "$value": "14px"
107
98
  }
108
99
  },
100
+ "display": {
101
+ "DEFAULT": {
102
+ "$type": "fontFamily",
103
+ "$value": null,
104
+ "$extensions": {
105
+ "com.ponchia.css": "var(--dot-font)"
106
+ }
107
+ }
108
+ },
109
109
  "text": {
110
110
  "2xs": {
111
111
  "$type": "dimension",
@@ -420,6 +420,13 @@
420
420
  "$extensions": {
421
421
  "com.ponchia.css": "var(--danger)"
422
422
  }
423
+ },
424
+ "color-info": {
425
+ "$type": "color",
426
+ "$value": null,
427
+ "$extensions": {
428
+ "com.ponchia.css": "var(--info)"
429
+ }
423
430
  }
424
431
  },
425
432
  "border": {
@@ -563,6 +570,16 @@
563
570
  "$value": "rgb(192, 22, 34, 0.1)"
564
571
  }
565
572
  },
573
+ "info": {
574
+ "DEFAULT": {
575
+ "$type": "color",
576
+ "$value": "#1f63c4"
577
+ },
578
+ "soft": {
579
+ "$type": "color",
580
+ "$value": "rgb(31, 99, 196, 0.12)"
581
+ }
582
+ },
566
583
  "code": {
567
584
  "bg": {
568
585
  "$type": "color",
@@ -738,6 +755,16 @@
738
755
  "$value": "rgb(255, 77, 84, 0.15)"
739
756
  }
740
757
  },
758
+ "info": {
759
+ "DEFAULT": {
760
+ "$type": "color",
761
+ "$value": "#6fb0e6"
762
+ },
763
+ "soft": {
764
+ "$type": "color",
765
+ "$value": "rgb(111, 176, 230, 0.14)"
766
+ }
767
+ },
741
768
  "code": {
742
769
  "bg": {
743
770
  "$type": "color",