@ponchia/ui 0.2.1 → 0.3.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 (48) hide show
  1. package/README.md +128 -54
  2. package/behaviors/index.d.ts +36 -0
  3. package/behaviors/index.js +321 -7
  4. package/classes/index.d.ts +228 -3
  5. package/classes/index.js +139 -4
  6. package/css/app.css +64 -64
  7. package/css/base.css +136 -24
  8. package/css/content.css +324 -0
  9. package/css/core.css +9 -5
  10. package/css/disclosure.css +323 -0
  11. package/css/dots.css +125 -8
  12. package/css/feedback.css +243 -0
  13. package/css/fonts.css +11 -0
  14. package/css/forms.css +41 -14
  15. package/css/motion.css +29 -5
  16. package/css/navigation.css +22 -86
  17. package/css/overlay.css +206 -0
  18. package/css/primitives.css +37 -18
  19. package/css/site.css +295 -0
  20. package/css/table.css +9 -9
  21. package/css/tokens.css +84 -20
  22. package/dist/bronto.css +1 -0
  23. package/dist/css/app.css +1 -0
  24. package/dist/css/base.css +1 -0
  25. package/dist/css/content.css +1 -0
  26. package/dist/css/disclosure.css +1 -0
  27. package/dist/css/dots.css +1 -0
  28. package/dist/css/feedback.css +1 -0
  29. package/dist/css/fonts.css +1 -0
  30. package/dist/css/forms.css +1 -0
  31. package/dist/css/motion.css +1 -0
  32. package/dist/css/navigation.css +1 -0
  33. package/dist/css/overlay.css +1 -0
  34. package/dist/css/primitives.css +1 -0
  35. package/dist/css/site.css +1 -0
  36. package/dist/css/table.css +1 -0
  37. package/dist/css/tokens.css +1 -0
  38. package/package.json +62 -21
  39. package/shiki/nothing.json +83 -0
  40. package/tokens/index.d.ts +18 -10
  41. package/tokens/index.js +16 -14
  42. package/tokens/index.json +32 -28
  43. package/tokens/tokens.dtcg.json +589 -0
  44. package/css/cards.css +0 -336
  45. package/css/index.css +0 -5
  46. package/css/layout.css +0 -219
  47. package/css/responsive.css +0 -157
  48. package/css/typography.css +0 -139
package/tokens/index.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "light": {
43
43
  "--bg": "#f4f4f2",
44
44
  "--bg-elevated": "#fbfbfa",
45
- "--bg-accent": "rgba(215, 25, 33, 0.06)",
45
+ "--bg-accent": "color-mix(in srgb, var(--accent) 6%, transparent)",
46
46
  "--panel": "#ffffff",
47
47
  "--panel-strong": "#ffffff",
48
48
  "--panel-soft": "#ececea",
@@ -50,14 +50,15 @@
50
50
  "--line-strong": "#a8a8a2",
51
51
  "--text": "#0a0a0a",
52
52
  "--text-soft": "#353533",
53
- "--text-dim": "#7a7a75",
53
+ "--text-dim": "#686863",
54
54
  "--accent": "#d71921",
55
- "--accent-strong": "#b3141b",
56
- "--accent-soft": "rgba(215, 25, 33, 0.1)",
55
+ "--accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
56
+ "--accent-text": "var(--accent-strong)",
57
+ "--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
57
58
  "--success": "#2f7d4f",
58
59
  "--success-soft": "rgba(47, 125, 79, 0.12)",
59
- "--warning": "#8a6d1c",
60
- "--warning-soft": "rgba(138, 109, 28, 0.13)",
60
+ "--warning": "#806414",
61
+ "--warning-soft": "rgba(128, 100, 20, 0.13)",
61
62
  "--orange": "#a85f32",
62
63
  "--orange-soft": "rgba(168, 95, 50, 0.13)",
63
64
  "--danger": "#c01622",
@@ -66,15 +67,15 @@
66
67
  "--button-text": "#ffffff",
67
68
  "--field-dot": "rgba(10, 10, 10, 0.16)",
68
69
  "--field-dot-hot": "rgba(10, 10, 10, 0.4)",
69
- "--field-dot-accent": "rgba(215, 25, 33, 0.78)",
70
- "--focus-ring": "rgba(215, 25, 33, 0.5)",
70
+ "--field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
71
+ "--focus-ring": "var(--accent)",
71
72
  "--shadow": "none",
72
73
  "--shadow-raised": "0 0 0 1px var(--line-strong)"
73
74
  },
74
75
  "dark": {
75
76
  "--bg": "#000000",
76
77
  "--bg-elevated": "#0a0a0a",
77
- "--bg-accent": "rgba(255, 59, 65, 0.08)",
78
+ "--bg-accent": "color-mix(in srgb, var(--accent) 8%, transparent)",
78
79
  "--panel": "#0c0c0c",
79
80
  "--panel-strong": "#141414",
80
81
  "--panel-soft": "#1a1a1a",
@@ -82,10 +83,11 @@
82
83
  "--line-strong": "#444444",
83
84
  "--text": "#f2f2f2",
84
85
  "--text-soft": "#c4c4c4",
85
- "--text-dim": "#7d7d7d",
86
+ "--text-dim": "#858585",
86
87
  "--accent": "#ff3b41",
87
- "--accent-strong": "#ff5b60",
88
- "--accent-soft": "rgba(255, 59, 65, 0.14)",
88
+ "--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
89
+ "--accent-text": "var(--accent-strong)",
90
+ "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
89
91
  "--success": "#4ec27e",
90
92
  "--success-soft": "rgba(78, 194, 126, 0.14)",
91
93
  "--warning": "#d8bd72",
@@ -98,8 +100,8 @@
98
100
  "--button-text": "#000000",
99
101
  "--field-dot": "rgba(242, 242, 242, 0.14)",
100
102
  "--field-dot-hot": "rgba(242, 242, 242, 0.36)",
101
- "--field-dot-accent": "rgba(255, 59, 65, 0.82)",
102
- "--focus-ring": "rgba(255, 59, 65, 0.55)",
103
+ "--field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
104
+ "--focus-ring": "var(--accent)",
103
105
  "--shadow": "none",
104
106
  "--shadow-raised": "0 0 0 1px var(--line-strong)"
105
107
  }
@@ -148,7 +150,7 @@
148
150
  "light": {
149
151
  "bg": "#f4f4f2",
150
152
  "bg-elevated": "#fbfbfa",
151
- "bg-accent": "rgba(215, 25, 33, 0.06)",
153
+ "bg-accent": "color-mix(in srgb, var(--accent) 6%, transparent)",
152
154
  "panel": "#ffffff",
153
155
  "panel-strong": "#ffffff",
154
156
  "panel-soft": "#ececea",
@@ -156,14 +158,15 @@
156
158
  "line-strong": "#a8a8a2",
157
159
  "text": "#0a0a0a",
158
160
  "text-soft": "#353533",
159
- "text-dim": "#7a7a75",
161
+ "text-dim": "#686863",
160
162
  "accent": "#d71921",
161
- "accent-strong": "#b3141b",
162
- "accent-soft": "rgba(215, 25, 33, 0.1)",
163
+ "accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
164
+ "accent-text": "var(--accent-strong)",
165
+ "accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
163
166
  "success": "#2f7d4f",
164
167
  "success-soft": "rgba(47, 125, 79, 0.12)",
165
- "warning": "#8a6d1c",
166
- "warning-soft": "rgba(138, 109, 28, 0.13)",
168
+ "warning": "#806414",
169
+ "warning-soft": "rgba(128, 100, 20, 0.13)",
167
170
  "orange": "#a85f32",
168
171
  "orange-soft": "rgba(168, 95, 50, 0.13)",
169
172
  "danger": "#c01622",
@@ -172,15 +175,15 @@
172
175
  "button-text": "#ffffff",
173
176
  "field-dot": "rgba(10, 10, 10, 0.16)",
174
177
  "field-dot-hot": "rgba(10, 10, 10, 0.4)",
175
- "field-dot-accent": "rgba(215, 25, 33, 0.78)",
176
- "focus-ring": "rgba(215, 25, 33, 0.5)",
178
+ "field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
179
+ "focus-ring": "var(--accent)",
177
180
  "shadow": "none",
178
181
  "shadow-raised": "0 0 0 1px var(--line-strong)"
179
182
  },
180
183
  "dark": {
181
184
  "bg": "#000000",
182
185
  "bg-elevated": "#0a0a0a",
183
- "bg-accent": "rgba(255, 59, 65, 0.08)",
186
+ "bg-accent": "color-mix(in srgb, var(--accent) 8%, transparent)",
184
187
  "panel": "#0c0c0c",
185
188
  "panel-strong": "#141414",
186
189
  "panel-soft": "#1a1a1a",
@@ -188,10 +191,11 @@
188
191
  "line-strong": "#444444",
189
192
  "text": "#f2f2f2",
190
193
  "text-soft": "#c4c4c4",
191
- "text-dim": "#7d7d7d",
194
+ "text-dim": "#858585",
192
195
  "accent": "#ff3b41",
193
- "accent-strong": "#ff5b60",
194
- "accent-soft": "rgba(255, 59, 65, 0.14)",
196
+ "accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
197
+ "accent-text": "var(--accent-strong)",
198
+ "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
195
199
  "success": "#4ec27e",
196
200
  "success-soft": "rgba(78, 194, 126, 0.14)",
197
201
  "warning": "#d8bd72",
@@ -204,8 +208,8 @@
204
208
  "button-text": "#000000",
205
209
  "field-dot": "rgba(242, 242, 242, 0.14)",
206
210
  "field-dot-hot": "rgba(242, 242, 242, 0.36)",
207
- "field-dot-accent": "rgba(255, 59, 65, 0.82)",
208
- "focus-ring": "rgba(255, 59, 65, 0.55)",
211
+ "field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
212
+ "focus-ring": "var(--accent)",
209
213
  "shadow": "none",
210
214
  "shadow-raised": "0 0 0 1px var(--line-strong)"
211
215
  }