@ponchia/ui 0.2.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 (32) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +160 -0
  3. package/behaviors/index.d.ts +40 -0
  4. package/behaviors/index.js +139 -0
  5. package/classes/index.d.ts +69 -0
  6. package/classes/index.js +159 -0
  7. package/css/app.css +309 -0
  8. package/css/base.css +206 -0
  9. package/css/cards.css +336 -0
  10. package/css/core.css +22 -0
  11. package/css/dots.css +159 -0
  12. package/css/fonts.css +60 -0
  13. package/css/forms.css +194 -0
  14. package/css/index.css +5 -0
  15. package/css/layout.css +219 -0
  16. package/css/motion.css +268 -0
  17. package/css/navigation.css +146 -0
  18. package/css/primitives.css +321 -0
  19. package/css/responsive.css +157 -0
  20. package/css/table.css +102 -0
  21. package/css/tokens.css +182 -0
  22. package/css/typography.css +139 -0
  23. package/fonts/doto-400.ttf +0 -0
  24. package/fonts/doto-500.ttf +0 -0
  25. package/fonts/doto-600.ttf +0 -0
  26. package/fonts/doto-700.ttf +0 -0
  27. package/fonts/doto-800.ttf +0 -0
  28. package/fonts/doto-900.ttf +0 -0
  29. package/package.json +77 -0
  30. package/tokens/index.d.ts +21 -0
  31. package/tokens/index.js +141 -0
  32. package/tokens/index.json +214 -0
package/tokens/index.json ADDED
@@ -0,0 +1,214 @@
1
+ {
2
+ "cssVars": {
3
+ "global": {
4
+ "--radius-xl": "4px",
5
+ "--radius-lg": "3px",
6
+ "--radius-md": "2px",
7
+ "--radius-sm": "1px",
8
+ "--radius-pill": "999px",
9
+ "--space-2xs": "0.25rem",
10
+ "--space-xs": "0.5rem",
11
+ "--space-sm": "0.75rem",
12
+ "--space-md": "1rem",
13
+ "--space-lg": "1.35rem",
14
+ "--space-xl": "1.75rem",
15
+ "--space-2xl": "2.5rem",
16
+ "--mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
17
+ "--sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
18
+ "--display": "'Doto', var(--mono)",
19
+ "--dot-font": "'Doto', var(--mono)",
20
+ "--text-2xs": "0.68rem",
21
+ "--text-xs": "0.76rem",
22
+ "--text-sm": "0.86rem",
23
+ "--text-base": "0.95rem",
24
+ "--text-lg": "1.15rem",
25
+ "--text-xl": "1.45rem",
26
+ "--tracking-wide": "0.14em",
27
+ "--tracking-wider": "0.22em",
28
+ "--ease-standard": "cubic-bezier(0.2, 0.8, 0.2, 1)",
29
+ "--ease-spring": "cubic-bezier(0.16, 1, 0.3, 1)",
30
+ "--ease-out": "cubic-bezier(0.33, 1, 0.68, 1)",
31
+ "--duration-fast": "130ms",
32
+ "--duration-base": "200ms",
33
+ "--duration-slow": "360ms",
34
+ "--dot-size": "2px",
35
+ "--dot-gap": "14px",
36
+ "--surface": "var(--panel)",
37
+ "--surface-raised": "var(--panel-strong)",
38
+ "--surface-muted": "var(--panel-soft)",
39
+ "--border": "var(--line)",
40
+ "--border-strong": "var(--line-strong)"
41
+ },
42
+ "light": {
43
+ "--bg": "#f4f4f2",
44
+ "--bg-elevated": "#fbfbfa",
45
+ "--bg-accent": "rgba(215, 25, 33, 0.06)",
46
+ "--panel": "#ffffff",
47
+ "--panel-strong": "#ffffff",
48
+ "--panel-soft": "#ececea",
49
+ "--line": "#d8d8d4",
50
+ "--line-strong": "#a8a8a2",
51
+ "--text": "#0a0a0a",
52
+ "--text-soft": "#353533",
53
+ "--text-dim": "#7a7a75",
54
+ "--accent": "#d71921",
55
+ "--accent-strong": "#b3141b",
56
+ "--accent-soft": "rgba(215, 25, 33, 0.1)",
57
+ "--success": "#2f7d4f",
58
+ "--success-soft": "rgba(47, 125, 79, 0.12)",
59
+ "--warning": "#8a6d1c",
60
+ "--warning-soft": "rgba(138, 109, 28, 0.13)",
61
+ "--orange": "#a85f32",
62
+ "--orange-soft": "rgba(168, 95, 50, 0.13)",
63
+ "--danger": "#c01622",
64
+ "--danger-soft": "rgba(192, 22, 34, 0.1)",
65
+ "--code-bg": "rgba(10, 10, 10, 0.05)",
66
+ "--button-text": "#ffffff",
67
+ "--field-dot": "rgba(10, 10, 10, 0.16)",
68
+ "--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)",
71
+ "--shadow": "none",
72
+ "--shadow-raised": "0 0 0 1px var(--line-strong)"
73
+ },
74
+ "dark": {
75
+ "--bg": "#000000",
76
+ "--bg-elevated": "#0a0a0a",
77
+ "--bg-accent": "rgba(255, 59, 65, 0.08)",
78
+ "--panel": "#0c0c0c",
79
+ "--panel-strong": "#141414",
80
+ "--panel-soft": "#1a1a1a",
81
+ "--line": "#2a2a2a",
82
+ "--line-strong": "#444444",
83
+ "--text": "#f2f2f2",
84
+ "--text-soft": "#c4c4c4",
85
+ "--text-dim": "#7d7d7d",
86
+ "--accent": "#ff3b41",
87
+ "--accent-strong": "#ff5b60",
88
+ "--accent-soft": "rgba(255, 59, 65, 0.14)",
89
+ "--success": "#4ec27e",
90
+ "--success-soft": "rgba(78, 194, 126, 0.14)",
91
+ "--warning": "#d8bd72",
92
+ "--warning-soft": "rgba(216, 189, 114, 0.14)",
93
+ "--orange": "#d08c5b",
94
+ "--orange-soft": "rgba(208, 140, 91, 0.15)",
95
+ "--danger": "#ff4d54",
96
+ "--danger-soft": "rgba(255, 77, 84, 0.15)",
97
+ "--code-bg": "rgba(255, 255, 255, 0.05)",
98
+ "--button-text": "#000000",
99
+ "--field-dot": "rgba(242, 242, 242, 0.14)",
100
+ "--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
+ "--shadow": "none",
104
+ "--shadow-raised": "0 0 0 1px var(--line-strong)"
105
+ }
106
+ },
107
+ "tokens": {
108
+ "scale": {
109
+ "radius-xl": "4px",
110
+ "radius-lg": "3px",
111
+ "radius-md": "2px",
112
+ "radius-sm": "1px",
113
+ "radius-pill": "999px",
114
+ "space-2xs": "0.25rem",
115
+ "space-xs": "0.5rem",
116
+ "space-sm": "0.75rem",
117
+ "space-md": "1rem",
118
+ "space-lg": "1.35rem",
119
+ "space-xl": "1.75rem",
120
+ "space-2xl": "2.5rem",
121
+ "mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
122
+ "sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
123
+ "display": "'Doto', var(--mono)",
124
+ "dot-font": "'Doto', var(--mono)",
125
+ "text-2xs": "0.68rem",
126
+ "text-xs": "0.76rem",
127
+ "text-sm": "0.86rem",
128
+ "text-base": "0.95rem",
129
+ "text-lg": "1.15rem",
130
+ "text-xl": "1.45rem",
131
+ "tracking-wide": "0.14em",
132
+ "tracking-wider": "0.22em",
133
+ "ease-standard": "cubic-bezier(0.2, 0.8, 0.2, 1)",
134
+ "ease-spring": "cubic-bezier(0.16, 1, 0.3, 1)",
135
+ "ease-out": "cubic-bezier(0.33, 1, 0.68, 1)",
136
+ "duration-fast": "130ms",
137
+ "duration-base": "200ms",
138
+ "duration-slow": "360ms",
139
+ "dot-size": "2px",
140
+ "dot-gap": "14px",
141
+ "surface": "var(--panel)",
142
+ "surface-raised": "var(--panel-strong)",
143
+ "surface-muted": "var(--panel-soft)",
144
+ "border": "var(--line)",
145
+ "border-strong": "var(--line-strong)"
146
+ },
147
+ "color": {
148
+ "light": {
149
+ "bg": "#f4f4f2",
150
+ "bg-elevated": "#fbfbfa",
151
+ "bg-accent": "rgba(215, 25, 33, 0.06)",
152
+ "panel": "#ffffff",
153
+ "panel-strong": "#ffffff",
154
+ "panel-soft": "#ececea",
155
+ "line": "#d8d8d4",
156
+ "line-strong": "#a8a8a2",
157
+ "text": "#0a0a0a",
158
+ "text-soft": "#353533",
159
+ "text-dim": "#7a7a75",
160
+ "accent": "#d71921",
161
+ "accent-strong": "#b3141b",
162
+ "accent-soft": "rgba(215, 25, 33, 0.1)",
163
+ "success": "#2f7d4f",
164
+ "success-soft": "rgba(47, 125, 79, 0.12)",
165
+ "warning": "#8a6d1c",
166
+ "warning-soft": "rgba(138, 109, 28, 0.13)",
167
+ "orange": "#a85f32",
168
+ "orange-soft": "rgba(168, 95, 50, 0.13)",
169
+ "danger": "#c01622",
170
+ "danger-soft": "rgba(192, 22, 34, 0.1)",
171
+ "code-bg": "rgba(10, 10, 10, 0.05)",
172
+ "button-text": "#ffffff",
173
+ "field-dot": "rgba(10, 10, 10, 0.16)",
174
+ "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)",
177
+ "shadow": "none",
178
+ "shadow-raised": "0 0 0 1px var(--line-strong)"
179
+ },
180
+ "dark": {
181
+ "bg": "#000000",
182
+ "bg-elevated": "#0a0a0a",
183
+ "bg-accent": "rgba(255, 59, 65, 0.08)",
184
+ "panel": "#0c0c0c",
185
+ "panel-strong": "#141414",
186
+ "panel-soft": "#1a1a1a",
187
+ "line": "#2a2a2a",
188
+ "line-strong": "#444444",
189
+ "text": "#f2f2f2",
190
+ "text-soft": "#c4c4c4",
191
+ "text-dim": "#7d7d7d",
192
+ "accent": "#ff3b41",
193
+ "accent-strong": "#ff5b60",
194
+ "accent-soft": "rgba(255, 59, 65, 0.14)",
195
+ "success": "#4ec27e",
196
+ "success-soft": "rgba(78, 194, 126, 0.14)",
197
+ "warning": "#d8bd72",
198
+ "warning-soft": "rgba(216, 189, 114, 0.14)",
199
+ "orange": "#d08c5b",
200
+ "orange-soft": "rgba(208, 140, 91, 0.15)",
201
+ "danger": "#ff4d54",
202
+ "danger-soft": "rgba(255, 77, 84, 0.15)",
203
+ "code-bg": "rgba(255, 255, 255, 0.05)",
204
+ "button-text": "#000000",
205
+ "field-dot": "rgba(242, 242, 242, 0.14)",
206
+ "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)",
209
+ "shadow": "none",
210
+ "shadow-raised": "0 0 0 1px var(--line-strong)"
211
+ }
212
+ }
213
+ }
214
+ }