@ponchia/ui 0.2.1 → 0.2.2
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.
- package/README.md +58 -31
- package/behaviors/index.d.ts +29 -0
- package/behaviors/index.js +172 -0
- package/classes/index.d.ts +37 -0
- package/classes/index.js +85 -0
- package/css/app.css +22 -22
- package/css/base.css +130 -10
- package/css/cards.css +21 -21
- package/css/content.css +289 -0
- package/css/core.css +4 -0
- package/css/disclosure.css +311 -0
- package/css/dots.css +125 -8
- package/css/feedback.css +243 -0
- package/css/fonts.css +11 -0
- package/css/forms.css +39 -12
- package/css/layout.css +5 -5
- package/css/motion.css +29 -5
- package/css/navigation.css +13 -8
- package/css/overlay.css +198 -0
- package/css/primitives.css +33 -16
- package/css/responsive.css +14 -14
- package/css/table.css +9 -9
- package/css/tokens.css +77 -20
- package/css/typography.css +9 -9
- package/dist/bronto-core.css +1 -0
- package/dist/bronto.css +1 -0
- package/package.json +21 -4
- package/tokens/index.js +14 -14
- package/tokens/index.json +28 -28
- package/tokens/tokens.dtcg.json +575 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ponchia/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -19,29 +19,41 @@
|
|
|
19
19
|
],
|
|
20
20
|
"files": [
|
|
21
21
|
"css",
|
|
22
|
+
"dist",
|
|
22
23
|
"fonts",
|
|
23
24
|
"tokens",
|
|
24
25
|
"classes",
|
|
25
26
|
"behaviors"
|
|
26
27
|
],
|
|
28
|
+
"style": "./dist/bronto.css",
|
|
27
29
|
"scripts": {
|
|
28
30
|
"lint": "stylelint \"css/**/*.css\"",
|
|
29
31
|
"lint:fix": "stylelint \"css/**/*.css\" --fix",
|
|
30
32
|
"tokens:build": "node scripts/gen-tokens-json.mjs",
|
|
33
|
+
"dtcg:build": "node scripts/gen-dtcg.mjs",
|
|
34
|
+
"dist:build": "node scripts/build-dist.mjs",
|
|
31
35
|
"check:exports": "node scripts/check-exports.mjs",
|
|
32
36
|
"check:tokens": "node scripts/check-tokens.mjs",
|
|
33
37
|
"check:classes": "node scripts/check-classes.mjs",
|
|
38
|
+
"check:dtcg": "node scripts/check-dtcg.mjs",
|
|
39
|
+
"check:dist": "node scripts/check-dist.mjs",
|
|
34
40
|
"check:pack": "node scripts/check-pack.mjs",
|
|
35
|
-
"check": "npm run lint && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:pack",
|
|
41
|
+
"check": "npm run lint && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dtcg && npm run check:dist && npm run check:pack",
|
|
36
42
|
"test": "node --test \"test/*.test.mjs\"",
|
|
37
|
-
"prepack": "npm run tokens:build"
|
|
43
|
+
"prepack": "npm run tokens:build && npm run dtcg:build && npm run dist:build"
|
|
38
44
|
},
|
|
39
45
|
"devDependencies": {
|
|
46
|
+
"@axe-core/playwright": "^4.11.3",
|
|
47
|
+
"@playwright/test": "^1.60.0",
|
|
40
48
|
"jsdom": "^25.0.1",
|
|
41
49
|
"stylelint": "^16.10.0",
|
|
42
|
-
"stylelint-config-standard": "^36.0.1"
|
|
50
|
+
"stylelint-config-standard": "^36.0.1",
|
|
51
|
+
"stylelint-use-logical": "^2.1.3"
|
|
43
52
|
},
|
|
44
53
|
"exports": {
|
|
54
|
+
".": "./dist/bronto.css",
|
|
55
|
+
"./dist/bronto.css": "./dist/bronto.css",
|
|
56
|
+
"./dist/bronto-core.css": "./dist/bronto-core.css",
|
|
45
57
|
"./css": "./css/index.css",
|
|
46
58
|
"./css/index.css": "./css/index.css",
|
|
47
59
|
"./css/core.css": "./css/core.css",
|
|
@@ -53,8 +65,12 @@
|
|
|
53
65
|
"./css/layout.css": "./css/layout.css",
|
|
54
66
|
"./css/navigation.css": "./css/navigation.css",
|
|
55
67
|
"./css/typography.css": "./css/typography.css",
|
|
68
|
+
"./css/content.css": "./css/content.css",
|
|
56
69
|
"./css/primitives.css": "./css/primitives.css",
|
|
57
70
|
"./css/forms.css": "./css/forms.css",
|
|
71
|
+
"./css/feedback.css": "./css/feedback.css",
|
|
72
|
+
"./css/overlay.css": "./css/overlay.css",
|
|
73
|
+
"./css/disclosure.css": "./css/disclosure.css",
|
|
58
74
|
"./css/table.css": "./css/table.css",
|
|
59
75
|
"./css/cards.css": "./css/cards.css",
|
|
60
76
|
"./css/app.css": "./css/app.css",
|
|
@@ -64,6 +80,7 @@
|
|
|
64
80
|
"default": "./tokens/index.js"
|
|
65
81
|
},
|
|
66
82
|
"./tokens.json": "./tokens/index.json",
|
|
83
|
+
"./tokens.dtcg.json": "./tokens/tokens.dtcg.json",
|
|
67
84
|
"./classes": {
|
|
68
85
|
"types": "./classes/index.d.ts",
|
|
69
86
|
"default": "./classes/index.js"
|
package/tokens/index.js
CHANGED
|
@@ -60,7 +60,7 @@ export const cssVars = {
|
|
|
60
60
|
light: {
|
|
61
61
|
'--bg': '#f4f4f2',
|
|
62
62
|
'--bg-elevated': '#fbfbfa',
|
|
63
|
-
'--bg-accent': '
|
|
63
|
+
'--bg-accent': 'color-mix(in srgb, var(--accent) 6%, transparent)',
|
|
64
64
|
'--panel': '#ffffff',
|
|
65
65
|
'--panel-strong': '#ffffff',
|
|
66
66
|
'--panel-soft': '#ececea',
|
|
@@ -68,14 +68,14 @@ export const cssVars = {
|
|
|
68
68
|
'--line-strong': '#a8a8a2',
|
|
69
69
|
'--text': '#0a0a0a',
|
|
70
70
|
'--text-soft': '#353533',
|
|
71
|
-
'--text-dim': '#
|
|
71
|
+
'--text-dim': '#686863',
|
|
72
72
|
'--accent': '#d71921',
|
|
73
|
-
'--accent-strong': '#
|
|
74
|
-
'--accent-soft': '
|
|
73
|
+
'--accent-strong': 'color-mix(in srgb, var(--accent) 83%, #000)',
|
|
74
|
+
'--accent-soft': 'color-mix(in srgb, var(--accent) 10%, transparent)',
|
|
75
75
|
'--success': '#2f7d4f',
|
|
76
76
|
'--success-soft': 'rgba(47, 125, 79, 0.12)',
|
|
77
|
-
'--warning': '#
|
|
78
|
-
'--warning-soft': 'rgba(
|
|
77
|
+
'--warning': '#806414',
|
|
78
|
+
'--warning-soft': 'rgba(128, 100, 20, 0.13)',
|
|
79
79
|
'--orange': '#a85f32',
|
|
80
80
|
'--orange-soft': 'rgba(168, 95, 50, 0.13)',
|
|
81
81
|
'--danger': '#c01622',
|
|
@@ -84,8 +84,8 @@ export const cssVars = {
|
|
|
84
84
|
'--button-text': '#ffffff',
|
|
85
85
|
'--field-dot': 'rgba(10, 10, 10, 0.16)',
|
|
86
86
|
'--field-dot-hot': 'rgba(10, 10, 10, 0.4)',
|
|
87
|
-
'--field-dot-accent': '
|
|
88
|
-
'--focus-ring': '
|
|
87
|
+
'--field-dot-accent': 'color-mix(in srgb, var(--accent) 78%, transparent)',
|
|
88
|
+
'--focus-ring': 'color-mix(in srgb, var(--accent) 50%, transparent)',
|
|
89
89
|
'--shadow': 'none',
|
|
90
90
|
'--shadow-raised': '0 0 0 1px var(--line-strong)',
|
|
91
91
|
},
|
|
@@ -93,7 +93,7 @@ export const cssVars = {
|
|
|
93
93
|
dark: {
|
|
94
94
|
'--bg': '#000000',
|
|
95
95
|
'--bg-elevated': '#0a0a0a',
|
|
96
|
-
'--bg-accent': '
|
|
96
|
+
'--bg-accent': 'color-mix(in srgb, var(--accent) 8%, transparent)',
|
|
97
97
|
'--panel': '#0c0c0c',
|
|
98
98
|
'--panel-strong': '#141414',
|
|
99
99
|
'--panel-soft': '#1a1a1a',
|
|
@@ -101,10 +101,10 @@ export const cssVars = {
|
|
|
101
101
|
'--line-strong': '#444444',
|
|
102
102
|
'--text': '#f2f2f2',
|
|
103
103
|
'--text-soft': '#c4c4c4',
|
|
104
|
-
'--text-dim': '#
|
|
104
|
+
'--text-dim': '#858585',
|
|
105
105
|
'--accent': '#ff3b41',
|
|
106
|
-
'--accent-strong': '#
|
|
107
|
-
'--accent-soft': '
|
|
106
|
+
'--accent-strong': 'color-mix(in srgb, var(--accent) 84%, #fff)',
|
|
107
|
+
'--accent-soft': 'color-mix(in srgb, var(--accent) 14%, transparent)',
|
|
108
108
|
'--success': '#4ec27e',
|
|
109
109
|
'--success-soft': 'rgba(78, 194, 126, 0.14)',
|
|
110
110
|
'--warning': '#d8bd72',
|
|
@@ -117,8 +117,8 @@ export const cssVars = {
|
|
|
117
117
|
'--button-text': '#000000',
|
|
118
118
|
'--field-dot': 'rgba(242, 242, 242, 0.14)',
|
|
119
119
|
'--field-dot-hot': 'rgba(242, 242, 242, 0.36)',
|
|
120
|
-
'--field-dot-accent': '
|
|
121
|
-
'--focus-ring': '
|
|
120
|
+
'--field-dot-accent': 'color-mix(in srgb, var(--accent) 82%, transparent)',
|
|
121
|
+
'--focus-ring': 'color-mix(in srgb, var(--accent) 55%, transparent)',
|
|
122
122
|
'--shadow': 'none',
|
|
123
123
|
'--shadow-raised': '0 0 0 1px var(--line-strong)',
|
|
124
124
|
},
|
package/tokens/index.json
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"light": {
|
|
43
43
|
"--bg": "#f4f4f2",
|
|
44
44
|
"--bg-elevated": "#fbfbfa",
|
|
45
|
-
"--bg-accent": "
|
|
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,14 @@
|
|
|
50
50
|
"--line-strong": "#a8a8a2",
|
|
51
51
|
"--text": "#0a0a0a",
|
|
52
52
|
"--text-soft": "#353533",
|
|
53
|
-
"--text-dim": "#
|
|
53
|
+
"--text-dim": "#686863",
|
|
54
54
|
"--accent": "#d71921",
|
|
55
|
-
"--accent-strong": "#
|
|
56
|
-
"--accent-soft": "
|
|
55
|
+
"--accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
|
|
56
|
+
"--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
|
|
57
57
|
"--success": "#2f7d4f",
|
|
58
58
|
"--success-soft": "rgba(47, 125, 79, 0.12)",
|
|
59
|
-
"--warning": "#
|
|
60
|
-
"--warning-soft": "rgba(
|
|
59
|
+
"--warning": "#806414",
|
|
60
|
+
"--warning-soft": "rgba(128, 100, 20, 0.13)",
|
|
61
61
|
"--orange": "#a85f32",
|
|
62
62
|
"--orange-soft": "rgba(168, 95, 50, 0.13)",
|
|
63
63
|
"--danger": "#c01622",
|
|
@@ -66,15 +66,15 @@
|
|
|
66
66
|
"--button-text": "#ffffff",
|
|
67
67
|
"--field-dot": "rgba(10, 10, 10, 0.16)",
|
|
68
68
|
"--field-dot-hot": "rgba(10, 10, 10, 0.4)",
|
|
69
|
-
"--field-dot-accent": "
|
|
70
|
-
"--focus-ring": "
|
|
69
|
+
"--field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
|
|
70
|
+
"--focus-ring": "color-mix(in srgb, var(--accent) 50%, transparent)",
|
|
71
71
|
"--shadow": "none",
|
|
72
72
|
"--shadow-raised": "0 0 0 1px var(--line-strong)"
|
|
73
73
|
},
|
|
74
74
|
"dark": {
|
|
75
75
|
"--bg": "#000000",
|
|
76
76
|
"--bg-elevated": "#0a0a0a",
|
|
77
|
-
"--bg-accent": "
|
|
77
|
+
"--bg-accent": "color-mix(in srgb, var(--accent) 8%, transparent)",
|
|
78
78
|
"--panel": "#0c0c0c",
|
|
79
79
|
"--panel-strong": "#141414",
|
|
80
80
|
"--panel-soft": "#1a1a1a",
|
|
@@ -82,10 +82,10 @@
|
|
|
82
82
|
"--line-strong": "#444444",
|
|
83
83
|
"--text": "#f2f2f2",
|
|
84
84
|
"--text-soft": "#c4c4c4",
|
|
85
|
-
"--text-dim": "#
|
|
85
|
+
"--text-dim": "#858585",
|
|
86
86
|
"--accent": "#ff3b41",
|
|
87
|
-
"--accent-strong": "#
|
|
88
|
-
"--accent-soft": "
|
|
87
|
+
"--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
|
|
88
|
+
"--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
|
|
89
89
|
"--success": "#4ec27e",
|
|
90
90
|
"--success-soft": "rgba(78, 194, 126, 0.14)",
|
|
91
91
|
"--warning": "#d8bd72",
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
"--button-text": "#000000",
|
|
99
99
|
"--field-dot": "rgba(242, 242, 242, 0.14)",
|
|
100
100
|
"--field-dot-hot": "rgba(242, 242, 242, 0.36)",
|
|
101
|
-
"--field-dot-accent": "
|
|
102
|
-
"--focus-ring": "
|
|
101
|
+
"--field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
|
|
102
|
+
"--focus-ring": "color-mix(in srgb, var(--accent) 55%, transparent)",
|
|
103
103
|
"--shadow": "none",
|
|
104
104
|
"--shadow-raised": "0 0 0 1px var(--line-strong)"
|
|
105
105
|
}
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
"light": {
|
|
149
149
|
"bg": "#f4f4f2",
|
|
150
150
|
"bg-elevated": "#fbfbfa",
|
|
151
|
-
"bg-accent": "
|
|
151
|
+
"bg-accent": "color-mix(in srgb, var(--accent) 6%, transparent)",
|
|
152
152
|
"panel": "#ffffff",
|
|
153
153
|
"panel-strong": "#ffffff",
|
|
154
154
|
"panel-soft": "#ececea",
|
|
@@ -156,14 +156,14 @@
|
|
|
156
156
|
"line-strong": "#a8a8a2",
|
|
157
157
|
"text": "#0a0a0a",
|
|
158
158
|
"text-soft": "#353533",
|
|
159
|
-
"text-dim": "#
|
|
159
|
+
"text-dim": "#686863",
|
|
160
160
|
"accent": "#d71921",
|
|
161
|
-
"accent-strong": "#
|
|
162
|
-
"accent-soft": "
|
|
161
|
+
"accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
|
|
162
|
+
"accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
|
|
163
163
|
"success": "#2f7d4f",
|
|
164
164
|
"success-soft": "rgba(47, 125, 79, 0.12)",
|
|
165
|
-
"warning": "#
|
|
166
|
-
"warning-soft": "rgba(
|
|
165
|
+
"warning": "#806414",
|
|
166
|
+
"warning-soft": "rgba(128, 100, 20, 0.13)",
|
|
167
167
|
"orange": "#a85f32",
|
|
168
168
|
"orange-soft": "rgba(168, 95, 50, 0.13)",
|
|
169
169
|
"danger": "#c01622",
|
|
@@ -172,15 +172,15 @@
|
|
|
172
172
|
"button-text": "#ffffff",
|
|
173
173
|
"field-dot": "rgba(10, 10, 10, 0.16)",
|
|
174
174
|
"field-dot-hot": "rgba(10, 10, 10, 0.4)",
|
|
175
|
-
"field-dot-accent": "
|
|
176
|
-
"focus-ring": "
|
|
175
|
+
"field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
|
|
176
|
+
"focus-ring": "color-mix(in srgb, var(--accent) 50%, transparent)",
|
|
177
177
|
"shadow": "none",
|
|
178
178
|
"shadow-raised": "0 0 0 1px var(--line-strong)"
|
|
179
179
|
},
|
|
180
180
|
"dark": {
|
|
181
181
|
"bg": "#000000",
|
|
182
182
|
"bg-elevated": "#0a0a0a",
|
|
183
|
-
"bg-accent": "
|
|
183
|
+
"bg-accent": "color-mix(in srgb, var(--accent) 8%, transparent)",
|
|
184
184
|
"panel": "#0c0c0c",
|
|
185
185
|
"panel-strong": "#141414",
|
|
186
186
|
"panel-soft": "#1a1a1a",
|
|
@@ -188,10 +188,10 @@
|
|
|
188
188
|
"line-strong": "#444444",
|
|
189
189
|
"text": "#f2f2f2",
|
|
190
190
|
"text-soft": "#c4c4c4",
|
|
191
|
-
"text-dim": "#
|
|
191
|
+
"text-dim": "#858585",
|
|
192
192
|
"accent": "#ff3b41",
|
|
193
|
-
"accent-strong": "#
|
|
194
|
-
"accent-soft": "
|
|
193
|
+
"accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
|
|
194
|
+
"accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
|
|
195
195
|
"success": "#4ec27e",
|
|
196
196
|
"success-soft": "rgba(78, 194, 126, 0.14)",
|
|
197
197
|
"warning": "#d8bd72",
|
|
@@ -204,8 +204,8 @@
|
|
|
204
204
|
"button-text": "#000000",
|
|
205
205
|
"field-dot": "rgba(242, 242, 242, 0.14)",
|
|
206
206
|
"field-dot-hot": "rgba(242, 242, 242, 0.36)",
|
|
207
|
-
"field-dot-accent": "
|
|
208
|
-
"focus-ring": "
|
|
207
|
+
"field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
|
|
208
|
+
"focus-ring": "color-mix(in srgb, var(--accent) 55%, transparent)",
|
|
209
209
|
"shadow": "none",
|
|
210
210
|
"shadow-raised": "0 0 0 1px var(--line-strong)"
|
|
211
211
|
}
|