@codenhub/styles 0.0.3 → 0.0.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 (23) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +25 -0
  3. package/README.md +2 -0
  4. package/dist/components.css +1 -1
  5. package/dist/index.css +1 -1
  6. package/dist/theme.css +1 -1
  7. package/package.json +6 -8
  8. package/src/components/button.css +155 -155
  9. package/src/components/feedback.css +214 -214
  10. package/src/components/form.css +303 -296
  11. package/src/components/index.css +9 -9
  12. package/src/components/loader.css +56 -56
  13. package/src/components/surface.css +6 -6
  14. package/src/index.css +7 -7
  15. package/src/overrides.css +76 -76
  16. package/src/theme.css +98 -0
  17. package/src/typography.css +30 -30
  18. package/docs/accessibility.md +0 -53
  19. package/docs/classes.md +0 -198
  20. package/docs/index.md +0 -73
  21. package/docs/roadmap.md +0 -34
  22. package/docs/tests.md +0 -128
  23. package/docs/tokens.md +0 -101
package/src/components/form.css CHANGED
@@ -1,296 +1,303 @@
1
- @import "tailwindcss";
2
- @import "../theme.css";
3
-
4
- @utility field {
5
- @apply flex w-full flex-col gap-1.5;
6
-
7
- .label {
8
- @apply text-text text-sm font-semibold;
9
- }
10
-
11
- .hint {
12
- @apply text-text-secondary text-[0.8125rem];
13
- }
14
-
15
- .error:not(.btn),
16
- &-error {
17
- @apply text-destructive text-[0.8125rem] font-medium;
18
- }
19
- }
20
-
21
- @utility ipt {
22
- --control-bg: var(--color-background);
23
- --control-border: var(--color-border);
24
- --control-border-active: var(--color-primary);
25
- --control-fg: var(--color-text);
26
- --control-placeholder: var(--color-text-secondary);
27
-
28
- @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
29
- border: var(--border-width) solid var(--control-border);
30
-
31
- &::placeholder {
32
- color: var(--control-placeholder);
33
- }
34
-
35
- &:focus {
36
- @apply outline-none;
37
- }
38
-
39
- &:focus-visible {
40
- border-color: var(--control-border-active);
41
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
42
- }
43
-
44
- &[aria-invalid="true"] {
45
- --control-border: var(--color-destructive);
46
- --control-border-active: var(--color-destructive);
47
- }
48
-
49
- &:disabled,
50
- &[aria-disabled="true"],
51
- &[data-disabled] {
52
- @apply cursor-not-allowed;
53
-
54
- opacity: 0.58;
55
- }
56
- }
57
-
58
- @utility textarea {
59
- --control-bg: var(--color-background);
60
- --control-border: var(--color-border);
61
- --control-border-active: var(--color-primary);
62
- --control-fg: var(--color-text);
63
- --control-placeholder: var(--color-text-secondary);
64
-
65
- @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
66
- border: var(--border-width) solid var(--control-border);
67
-
68
- &::placeholder {
69
- color: var(--control-placeholder);
70
- }
71
-
72
- &:focus {
73
- @apply outline-none;
74
- }
75
-
76
- &:focus-visible {
77
- border-color: var(--control-border-active);
78
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
79
- }
80
-
81
- &[aria-invalid="true"] {
82
- --control-border: var(--color-destructive);
83
- --control-border-active: var(--color-destructive);
84
- }
85
-
86
- &:disabled,
87
- &[aria-disabled="true"],
88
- &[data-disabled] {
89
- @apply cursor-not-allowed;
90
-
91
- opacity: 0.58;
92
- }
93
-
94
- @apply min-h-28 resize-y;
95
- }
96
-
97
- @utility select {
98
- --control-bg: var(--color-background);
99
- --control-border: var(--color-border);
100
- --control-border-active: var(--color-primary);
101
- --control-fg: var(--color-text);
102
- --control-placeholder: var(--color-text-secondary);
103
-
104
- @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
105
- border: var(--border-width) solid var(--control-border);
106
-
107
- &::placeholder {
108
- color: var(--control-placeholder);
109
- }
110
-
111
- &:focus {
112
- @apply outline-none;
113
- }
114
-
115
- &:focus-visible {
116
- border-color: var(--control-border-active);
117
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
118
- }
119
-
120
- &[aria-invalid="true"] {
121
- --control-border: var(--color-destructive);
122
- --control-border-active: var(--color-destructive);
123
- }
124
-
125
- &:disabled,
126
- &[aria-disabled="true"],
127
- &[data-disabled] {
128
- @apply cursor-not-allowed;
129
-
130
- opacity: 0.58;
131
- }
132
-
133
- appearance: none;
134
- }
135
-
136
- @utility checkbox {
137
- --control-color: var(--color-text);
138
- --control-contrast: var(--color-text-contrast);
139
-
140
- @apply inline-grid size-4 cursor-pointer appearance-none place-content-center rounded-sm bg-(--color-background) transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
141
- border: var(--border-width) solid var(--color-border);
142
-
143
- &:hover {
144
- @apply border-(--color-border-hover);
145
- }
146
-
147
- &:focus {
148
- @apply outline-none;
149
- }
150
-
151
- &:focus-visible {
152
- border-color: var(--control-color);
153
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
154
- }
155
-
156
- &::after {
157
- @apply block size-3 opacity-0 transition-opacity duration-(--motion-duration-normal) ease-(--motion-ease);
158
-
159
- background-color: var(--control-contrast);
160
- content: "";
161
- mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
162
- -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
163
- mask-size: contain;
164
- -webkit-mask-size: contain;
165
- }
166
-
167
- &:checked {
168
- border-color: var(--control-color);
169
- background-color: var(--control-color);
170
-
171
- &::after {
172
- @apply opacity-100;
173
- }
174
- }
175
-
176
- &.primary {
177
- --control-color: var(--color-primary);
178
- --control-contrast: var(--color-primary-contrast);
179
- }
180
-
181
- &.secondary {
182
- --control-color: var(--color-accent);
183
- --control-contrast: var(--color-accent-contrast);
184
- }
185
-
186
- &.success {
187
- --control-color: var(--color-success);
188
- --control-contrast: var(--color-success-contrast);
189
- }
190
-
191
- &.warning {
192
- --control-color: var(--color-warning);
193
- --control-contrast: var(--color-warning-contrast);
194
- }
195
-
196
- &.destructive,
197
- &.danger,
198
- &.error {
199
- --control-color: var(--color-destructive);
200
- --control-contrast: var(--color-destructive-contrast);
201
- }
202
-
203
- &.info {
204
- --control-color: var(--color-info);
205
- --control-contrast: var(--color-info-contrast);
206
- }
207
-
208
- &[aria-invalid="true"] {
209
- @apply border-(--color-destructive);
210
- }
211
-
212
- &:disabled,
213
- &[aria-disabled="true"],
214
- &[data-disabled] {
215
- @apply cursor-not-allowed opacity-[0.58];
216
- }
217
- }
218
-
219
- @utility switch {
220
- --control-color: var(--color-text);
221
- --control-contrast: var(--color-text-contrast);
222
-
223
- @apply relative h-4.5 w-9 cursor-pointer appearance-none rounded-full bg-(--color-surface) transition-[background-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
224
-
225
- &::after {
226
- @apply absolute top-0.5 left-0.5 size-3.5 rounded-full bg-(--color-text-secondary) transition-[transform,translate,background-color] duration-(--motion-duration-normal) ease-(--motion-ease);
227
-
228
- content: "";
229
- }
230
-
231
- &:hover {
232
- @apply border-(--color-border-hover);
233
- }
234
-
235
- &:focus {
236
- @apply outline-none;
237
- }
238
-
239
- &:focus-visible {
240
- border-color: var(--control-color);
241
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
242
- }
243
-
244
- &:checked {
245
- border-color: var(--control-color);
246
- background-color: var(--control-color);
247
-
248
- &::after {
249
- @apply translate-x-4.5;
250
-
251
- background-color: var(--control-contrast);
252
- }
253
- }
254
-
255
- &.primary {
256
- --control-color: var(--color-primary);
257
- --control-contrast: var(--color-primary-contrast);
258
- }
259
-
260
- &.secondary {
261
- --control-color: var(--color-accent);
262
- --control-contrast: var(--color-accent-contrast);
263
- }
264
-
265
- &.success {
266
- --control-color: var(--color-success);
267
- --control-contrast: var(--color-success-contrast);
268
- }
269
-
270
- &.warning {
271
- --control-color: var(--color-warning);
272
- --control-contrast: var(--color-warning-contrast);
273
- }
274
-
275
- &.destructive,
276
- &.danger,
277
- &.error {
278
- --control-color: var(--color-destructive);
279
- --control-contrast: var(--color-destructive-contrast);
280
- }
281
-
282
- &.info {
283
- --control-color: var(--color-info);
284
- --control-contrast: var(--color-info-contrast);
285
- }
286
-
287
- &[aria-invalid="true"] {
288
- @apply border-(--color-destructive);
289
- }
290
-
291
- &:disabled,
292
- &[aria-disabled="true"],
293
- &[data-disabled] {
294
- @apply cursor-not-allowed opacity-[0.58];
295
- }
296
- }
1
+ @import "tailwindcss";
2
+ @import "../theme.css";
3
+
4
+ @utility field {
5
+ @apply flex w-full flex-col gap-1.5;
6
+
7
+ .label {
8
+ @apply text-text text-sm font-semibold;
9
+ }
10
+
11
+ .hint {
12
+ @apply text-text-secondary text-[0.8125rem];
13
+ }
14
+
15
+ .error:not(.btn) {
16
+ @apply text-destructive text-[0.8125rem] font-medium;
17
+ }
18
+ }
19
+
20
+ @utility ipt {
21
+ --control-bg: transparent;
22
+ --control-border: var(--color-border);
23
+ --control-border-active: var(--color-primary);
24
+ --control-fg: var(--color-text);
25
+ --control-placeholder: var(--color-text-secondary);
26
+
27
+ @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
28
+ border: var(--border-width) solid var(--control-border);
29
+
30
+ &::placeholder {
31
+ color: var(--control-placeholder);
32
+ }
33
+
34
+ &:focus {
35
+ @apply outline-none;
36
+ }
37
+
38
+ &:focus-visible {
39
+ border-color: var(--control-border-active);
40
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
41
+ }
42
+
43
+ &[aria-invalid="true"] {
44
+ --control-border: var(--color-destructive);
45
+ --control-border-active: var(--color-destructive);
46
+ }
47
+
48
+ &:disabled,
49
+ &[aria-disabled="true"],
50
+ &[data-disabled] {
51
+ @apply cursor-not-allowed;
52
+
53
+ opacity: 0.58;
54
+ }
55
+ }
56
+
57
+ @utility textarea {
58
+ --control-bg: transparent;
59
+ --control-border: var(--color-border);
60
+ --control-border-active: var(--color-primary);
61
+ --control-fg: var(--color-text);
62
+ --control-placeholder: var(--color-text-secondary);
63
+
64
+ @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
65
+ border: var(--border-width) solid var(--control-border);
66
+
67
+ &::placeholder {
68
+ color: var(--control-placeholder);
69
+ }
70
+
71
+ &:focus {
72
+ @apply outline-none;
73
+ }
74
+
75
+ &:focus-visible {
76
+ border-color: var(--control-border-active);
77
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
78
+ }
79
+
80
+ &[aria-invalid="true"] {
81
+ --control-border: var(--color-destructive);
82
+ --control-border-active: var(--color-destructive);
83
+ }
84
+
85
+ &:disabled,
86
+ &[aria-disabled="true"],
87
+ &[data-disabled] {
88
+ @apply cursor-not-allowed;
89
+
90
+ opacity: 0.58;
91
+ }
92
+
93
+ @apply min-h-28 resize-y;
94
+ }
95
+
96
+ @utility select {
97
+ --control-bg: transparent;
98
+ --control-border: var(--color-border);
99
+ --control-border-active: var(--color-primary);
100
+ --control-fg: var(--color-text);
101
+ --control-placeholder: var(--color-text-secondary);
102
+
103
+ @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
104
+ border: var(--border-width) solid var(--control-border);
105
+
106
+ &::placeholder {
107
+ color: var(--control-placeholder);
108
+ }
109
+
110
+ &:focus {
111
+ @apply outline-none;
112
+ }
113
+
114
+ &:focus-visible {
115
+ border-color: var(--control-border-active);
116
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
117
+ }
118
+
119
+ &[aria-invalid="true"] {
120
+ --control-border: var(--color-destructive);
121
+ --control-border-active: var(--color-destructive);
122
+ }
123
+
124
+ &:disabled,
125
+ &[aria-disabled="true"],
126
+ &[data-disabled] {
127
+ @apply cursor-not-allowed;
128
+
129
+ opacity: 0.58;
130
+ }
131
+
132
+ appearance: none;
133
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
134
+ background-position: right 0.75rem center;
135
+ background-repeat: no-repeat;
136
+ background-size: 1rem;
137
+ padding-right: 2.5rem;
138
+ }
139
+
140
+ @utility checkbox {
141
+ --control-color: var(--color-text);
142
+ --control-contrast: var(--color-text-contrast);
143
+
144
+ @apply inline-grid size-4 cursor-pointer appearance-none place-content-center rounded-sm bg-transparent transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
145
+ border: var(--border-width) solid var(--color-border);
146
+
147
+ &:hover:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
148
+ @apply border-(--color-border-hover);
149
+ }
150
+
151
+ &:focus {
152
+ @apply outline-none;
153
+ }
154
+
155
+ &:focus-visible {
156
+ border-color: var(--control-color);
157
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
158
+ }
159
+
160
+ &::after {
161
+ @apply block size-3 opacity-0 transition-opacity duration-(--motion-duration-normal) ease-(--motion-ease);
162
+
163
+ background-color: var(--control-contrast);
164
+ content: "";
165
+ mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
166
+ -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
167
+ mask-size: contain;
168
+ -webkit-mask-size: contain;
169
+ }
170
+
171
+ &:checked {
172
+ border-color: var(--control-color);
173
+ background-color: var(--control-color);
174
+
175
+ &::after {
176
+ @apply opacity-100;
177
+ }
178
+ }
179
+
180
+ &.primary {
181
+ --control-color: var(--color-primary);
182
+ --control-contrast: var(--color-primary-contrast);
183
+ }
184
+
185
+ &.secondary {
186
+ --control-color: var(--color-accent);
187
+ --control-contrast: var(--color-accent-contrast);
188
+ }
189
+
190
+ &.success {
191
+ --control-color: var(--color-success);
192
+ --control-contrast: var(--color-success-contrast);
193
+ }
194
+
195
+ &.warning {
196
+ --control-color: var(--color-warning);
197
+ --control-contrast: var(--color-warning-contrast);
198
+ }
199
+
200
+ &.destructive,
201
+ &.danger,
202
+ &.error {
203
+ --control-color: var(--color-destructive);
204
+ --control-contrast: var(--color-destructive-contrast);
205
+ }
206
+
207
+ &.info {
208
+ --control-color: var(--color-info);
209
+ --control-contrast: var(--color-info-contrast);
210
+ }
211
+
212
+ &[aria-invalid="true"] {
213
+ @apply border-(--color-destructive);
214
+ }
215
+
216
+ &:disabled,
217
+ &[aria-disabled="true"],
218
+ &[data-disabled] {
219
+ @apply cursor-not-allowed opacity-[0.58];
220
+ }
221
+ }
222
+
223
+ @utility switch {
224
+ --control-color: var(--color-text);
225
+ --control-contrast: var(--color-text-contrast);
226
+
227
+ @apply relative h-4.5 w-9 cursor-pointer appearance-none rounded-full bg-(--color-surface) transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
228
+ border: var(--border-width) solid transparent;
229
+
230
+ &::after {
231
+ @apply absolute size-3.5 rounded-full bg-(--color-text-secondary) transition-[transform,translate,background-color] duration-(--motion-duration-normal) ease-(--motion-ease);
232
+
233
+ content: "";
234
+ top: 1px;
235
+ left: 1px;
236
+ }
237
+
238
+ &:hover:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
239
+ @apply border-(--color-border-hover);
240
+ }
241
+
242
+ &:focus {
243
+ @apply outline-none;
244
+ }
245
+
246
+ &:focus-visible {
247
+ border-color: var(--control-color);
248
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
249
+ }
250
+
251
+ &:checked {
252
+ border-color: var(--control-color);
253
+ background-color: var(--control-color);
254
+
255
+ &::after {
256
+ @apply translate-x-4.5;
257
+
258
+ background-color: var(--control-contrast);
259
+ }
260
+ }
261
+
262
+ &.primary {
263
+ --control-color: var(--color-primary);
264
+ --control-contrast: var(--color-primary-contrast);
265
+ }
266
+
267
+ &.secondary {
268
+ --control-color: var(--color-accent);
269
+ --control-contrast: var(--color-accent-contrast);
270
+ }
271
+
272
+ &.success {
273
+ --control-color: var(--color-success);
274
+ --control-contrast: var(--color-success-contrast);
275
+ }
276
+
277
+ &.warning {
278
+ --control-color: var(--color-warning);
279
+ --control-contrast: var(--color-warning-contrast);
280
+ }
281
+
282
+ &.destructive,
283
+ &.danger,
284
+ &.error {
285
+ --control-color: var(--color-destructive);
286
+ --control-contrast: var(--color-destructive-contrast);
287
+ }
288
+
289
+ &.info {
290
+ --control-color: var(--color-info);
291
+ --control-contrast: var(--color-info-contrast);
292
+ }
293
+
294
+ &[aria-invalid="true"] {
295
+ @apply border-(--color-destructive);
296
+ }
297
+
298
+ &:disabled,
299
+ &[aria-disabled="true"],
300
+ &[data-disabled] {
301
+ @apply cursor-not-allowed opacity-[0.58];
302
+ }
303
+ }
package/src/components/index.css CHANGED
@@ -1,9 +1,9 @@
1
- @import "tailwindcss";
2
- @import "../theme.css";
3
- @import "../typography.css";
4
- @import "./button.css";
5
- @import "./feedback.css";
6
- @import "./form.css";
7
- @import "./loader.css";
8
- @import "./surface.css";
9
- @import "./tooltip.css";
1
+ @import "tailwindcss";
2
+ @import "../theme.css";
3
+ @import "../typography.css";
4
+ @import "./button.css";
5
+ @import "./feedback.css";
6
+ @import "./form.css";
7
+ @import "./loader.css";
8
+ @import "./surface.css";
9
+ @import "./tooltip.css";