@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/feedback.css CHANGED
@@ -1,214 +1,214 @@
1
- @import "tailwindcss";
2
- @import "../theme.css";
3
-
4
- @keyframes anim-skeleton {
5
- 0% {
6
- background-position: 200% 0;
7
- }
8
-
9
- 100% {
10
- background-position: -200% 0;
11
- }
12
- }
13
-
14
- @utility alert {
15
- --feedback-color: var(--color-text);
16
- --feedback-contrast: var(--color-text-contrast);
17
- --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
18
- --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
19
-
20
- @apply flex rounded-(--radius-surface) bg-(--feedback-surface) p-4 leading-5 text-(--feedback-color);
21
- border: var(--border-width) solid var(--feedback-border);
22
-
23
- &.primary {
24
- --feedback-color: var(--color-primary);
25
- --feedback-contrast: var(--color-primary-contrast);
26
- }
27
-
28
- &.secondary {
29
- --feedback-color: var(--color-accent);
30
- --feedback-contrast: var(--color-accent-contrast);
31
- }
32
-
33
- &.success {
34
- --feedback-color: var(--color-success);
35
- --feedback-contrast: var(--color-success-contrast);
36
- }
37
-
38
- &.warning {
39
- --feedback-color: var(--color-warning);
40
- --feedback-contrast: var(--color-warning-contrast);
41
- }
42
-
43
- &.destructive,
44
- &.danger,
45
- &.error {
46
- --feedback-color: var(--color-destructive);
47
- --feedback-contrast: var(--color-destructive-contrast);
48
- }
49
-
50
- &.info {
51
- --feedback-color: var(--color-info);
52
- --feedback-contrast: var(--color-info-contrast);
53
- }
54
-
55
- &.flat {
56
- @apply bg-(--feedback-color) text-(--feedback-contrast);
57
- border-color: var(--feedback-color);
58
- }
59
-
60
- &.soft {
61
- @apply border-transparent bg-(--feedback-surface) text-(--feedback-color);
62
- }
63
-
64
- &.left-accent {
65
- @apply border-y-transparent border-r-transparent bg-(--feedback-surface) text-(--feedback-color);
66
- border-left-width: 4px;
67
- border-left-color: var(--feedback-color);
68
- }
69
-
70
- &.icon {
71
- @apply relative pl-11;
72
-
73
- &::before {
74
- @apply absolute top-4 left-4 block size-5 bg-current;
75
-
76
- content: "";
77
- 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
78
- -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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
79
- mask-size: contain;
80
- -webkit-mask-size: contain;
81
- mask-repeat: no-repeat;
82
- -webkit-mask-repeat: no-repeat;
83
- mask-position: center;
84
- -webkit-mask-position: center;
85
- }
86
-
87
- &.success::before {
88
- 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
89
- -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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
90
- }
91
-
92
- &.warning::before {
93
- 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="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
94
- -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="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
95
- }
96
-
97
- &.destructive::before,
98
- &.danger::before,
99
- &.error::before {
100
- 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>');
101
- -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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>');
102
- }
103
-
104
- &.info::before {
105
- 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
106
- -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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
107
- }
108
- }
109
- }
110
-
111
- @utility badge {
112
- --feedback-color: var(--color-text);
113
- --feedback-contrast: var(--color-text-contrast);
114
- --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
115
- --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
116
-
117
- @apply inline-flex min-h-6 w-fit items-center gap-1 rounded-full bg-(--feedback-surface) px-2.5 text-xs font-bold text-(--feedback-color);
118
- border: var(--border-width) solid var(--feedback-border);
119
-
120
- &.primary {
121
- --feedback-color: var(--color-primary);
122
- --feedback-contrast: var(--color-primary-contrast);
123
- }
124
-
125
- &.secondary {
126
- --feedback-color: var(--color-accent);
127
- --feedback-contrast: var(--color-accent-contrast);
128
- }
129
-
130
- &.success {
131
- --feedback-color: var(--color-success);
132
- --feedback-contrast: var(--color-success-contrast);
133
- }
134
-
135
- &.warning {
136
- --feedback-color: var(--color-warning);
137
- --feedback-contrast: var(--color-warning-contrast);
138
- }
139
-
140
- &.destructive,
141
- &.danger,
142
- &.error {
143
- --feedback-color: var(--color-destructive);
144
- --feedback-contrast: var(--color-destructive-contrast);
145
- }
146
-
147
- &.info {
148
- --feedback-color: var(--color-info);
149
- --feedback-contrast: var(--color-info-contrast);
150
- }
151
-
152
- &.flat {
153
- @apply bg-(--feedback-color) text-(--feedback-contrast);
154
- border-color: var(--feedback-color);
155
- }
156
-
157
- &.soft {
158
- @apply border-transparent;
159
- }
160
- }
161
-
162
- @utility skeleton {
163
- @apply min-h-4 w-full rounded-(--radius-control);
164
-
165
- animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
166
- background: linear-gradient(90deg, var(--color-surface), var(--color-foreground), var(--color-surface));
167
- background-size: 200% 100%;
168
- }
169
-
170
- @utility progress {
171
- --progress-color: var(--color-text);
172
- --progress-surface: color-mix(var(--color-text-subtle) 60%, transparent);
173
-
174
- @apply h-2.5 w-full overflow-hidden rounded-full bg-(--progress-surface);
175
-
176
- > * {
177
- @apply block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
178
-
179
- background-color: var(--progress-color);
180
- width: var(--progress-value, 0%);
181
- }
182
-
183
- &.primary {
184
- --progress-color: var(--color-primary);
185
- --progress-surface: color-mix(var(--color-primary-subtle) 60%, transparent);
186
- }
187
-
188
- &.secondary {
189
- --progress-color: var(--color-accent);
190
- --progress-surface: color-mix(var(--color-accent-subtle) 60%, transparent);
191
- }
192
-
193
- &.success {
194
- --progress-color: var(--color-success);
195
- --progress-surface: color-mix(var(--color-success-subtle) 60%, transparent);
196
- }
197
-
198
- &.warning {
199
- --progress-color: var(--color-warning);
200
- --progress-surface: color-mix(var(--color-warning-subtle) 60%, transparent);
201
- }
202
-
203
- &.destructive,
204
- &.danger,
205
- &.error {
206
- --progress-color: var(--color-destructive);
207
- --progress-surface: color-mix(var(--color-destructive-subtle) 60%, transparent);
208
- }
209
-
210
- &.info {
211
- --progress-color: var(--color-info);
212
- --progress-surface: color-mix(var(--color-info-subtle) 60%, transparent);
213
- }
214
- }
1
+ @import "tailwindcss";
2
+ @import "../theme.css";
3
+
4
+ @keyframes anim-skeleton {
5
+ 0% {
6
+ background-position: 200% 0;
7
+ }
8
+
9
+ 100% {
10
+ background-position: -200% 0;
11
+ }
12
+ }
13
+
14
+ @utility alert {
15
+ --feedback-color: var(--color-text);
16
+ --feedback-contrast: var(--color-text-contrast);
17
+ --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
18
+ --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
19
+
20
+ @apply flex rounded-(--radius-surface) bg-(--feedback-surface) p-4 leading-5 text-(--feedback-color);
21
+ border: var(--border-width) solid var(--feedback-border);
22
+
23
+ &.primary {
24
+ --feedback-color: var(--color-primary);
25
+ --feedback-contrast: var(--color-primary-contrast);
26
+ }
27
+
28
+ &.secondary {
29
+ --feedback-color: var(--color-accent);
30
+ --feedback-contrast: var(--color-accent-contrast);
31
+ }
32
+
33
+ &.success {
34
+ --feedback-color: var(--color-success);
35
+ --feedback-contrast: var(--color-success-contrast);
36
+ }
37
+
38
+ &.warning {
39
+ --feedback-color: var(--color-warning);
40
+ --feedback-contrast: var(--color-warning-contrast);
41
+ }
42
+
43
+ &.destructive,
44
+ &.danger,
45
+ &.error {
46
+ --feedback-color: var(--color-destructive);
47
+ --feedback-contrast: var(--color-destructive-contrast);
48
+ }
49
+
50
+ &.info {
51
+ --feedback-color: var(--color-info);
52
+ --feedback-contrast: var(--color-info-contrast);
53
+ }
54
+
55
+ &.flat {
56
+ @apply bg-(--feedback-color) text-(--feedback-contrast);
57
+ border-color: var(--feedback-color);
58
+ }
59
+
60
+ &.soft {
61
+ @apply border-transparent bg-(--feedback-surface) text-(--feedback-color);
62
+ }
63
+
64
+ &.left-accent {
65
+ @apply border-y-transparent border-r-transparent bg-(--feedback-surface) text-(--feedback-color);
66
+ border-left-width: 4px;
67
+ border-left-color: var(--feedback-color);
68
+ }
69
+
70
+ &.icon {
71
+ @apply relative pl-11;
72
+
73
+ &::before {
74
+ @apply absolute top-4 left-4 block size-5 bg-current;
75
+
76
+ content: "";
77
+ 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
78
+ -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
79
+ mask-size: contain;
80
+ -webkit-mask-size: contain;
81
+ mask-repeat: no-repeat;
82
+ -webkit-mask-repeat: no-repeat;
83
+ mask-position: center;
84
+ -webkit-mask-position: center;
85
+ }
86
+
87
+ &.success::before {
88
+ 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
89
+ -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
90
+ }
91
+
92
+ &.warning::before {
93
+ 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
94
+ -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
95
+ }
96
+
97
+ &.destructive::before,
98
+ &.danger::before,
99
+ &.error::before {
100
+ 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
101
+ -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
102
+ }
103
+
104
+ &.info::before {
105
+ 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
106
+ -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
107
+ }
108
+ }
109
+ }
110
+
111
+ @utility badge {
112
+ --feedback-color: var(--color-text);
113
+ --feedback-contrast: var(--color-text-contrast);
114
+ --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
115
+ --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
116
+
117
+ @apply inline-flex min-h-6 w-fit items-center gap-1 rounded-full bg-(--feedback-surface) px-2.5 text-xs font-bold text-(--feedback-color);
118
+ border: var(--border-width) solid var(--feedback-border);
119
+
120
+ &.primary {
121
+ --feedback-color: var(--color-primary);
122
+ --feedback-contrast: var(--color-primary-contrast);
123
+ }
124
+
125
+ &.secondary {
126
+ --feedback-color: var(--color-accent);
127
+ --feedback-contrast: var(--color-accent-contrast);
128
+ }
129
+
130
+ &.success {
131
+ --feedback-color: var(--color-success);
132
+ --feedback-contrast: var(--color-success-contrast);
133
+ }
134
+
135
+ &.warning {
136
+ --feedback-color: var(--color-warning);
137
+ --feedback-contrast: var(--color-warning-contrast);
138
+ }
139
+
140
+ &.destructive,
141
+ &.danger,
142
+ &.error {
143
+ --feedback-color: var(--color-destructive);
144
+ --feedback-contrast: var(--color-destructive-contrast);
145
+ }
146
+
147
+ &.info {
148
+ --feedback-color: var(--color-info);
149
+ --feedback-contrast: var(--color-info-contrast);
150
+ }
151
+
152
+ &.flat {
153
+ @apply bg-(--feedback-color) text-(--feedback-contrast);
154
+ border-color: var(--feedback-color);
155
+ }
156
+
157
+ &.soft {
158
+ @apply border-transparent;
159
+ }
160
+ }
161
+
162
+ @utility skeleton {
163
+ @apply min-h-4 w-full rounded-(--radius-control);
164
+
165
+ animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
166
+ background: linear-gradient(90deg, var(--color-surface), var(--color-foreground), var(--color-surface));
167
+ background-size: 200% 100%;
168
+ }
169
+
170
+ @utility progress {
171
+ --progress-color: var(--color-text);
172
+ --progress-surface: color-mix(in srgb, var(--color-text-subtle) 60%, transparent);
173
+
174
+ @apply h-2.5 w-full overflow-hidden rounded-full bg-(--progress-surface);
175
+
176
+ > * {
177
+ @apply block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
178
+
179
+ background-color: var(--progress-color);
180
+ width: var(--progress-value, 0%);
181
+ }
182
+
183
+ &.primary {
184
+ --progress-color: var(--color-primary);
185
+ --progress-surface: color-mix(in srgb, var(--color-primary-subtle) 60%, transparent);
186
+ }
187
+
188
+ &.secondary {
189
+ --progress-color: var(--color-accent);
190
+ --progress-surface: color-mix(in srgb, var(--color-accent-subtle) 60%, transparent);
191
+ }
192
+
193
+ &.success {
194
+ --progress-color: var(--color-success);
195
+ --progress-surface: color-mix(in srgb, var(--color-success-subtle) 60%, transparent);
196
+ }
197
+
198
+ &.warning {
199
+ --progress-color: var(--color-warning);
200
+ --progress-surface: color-mix(in srgb, var(--color-warning-subtle) 60%, transparent);
201
+ }
202
+
203
+ &.destructive,
204
+ &.danger,
205
+ &.error {
206
+ --progress-color: var(--color-destructive);
207
+ --progress-surface: color-mix(in srgb, var(--color-destructive-subtle) 60%, transparent);
208
+ }
209
+
210
+ &.info {
211
+ --progress-color: var(--color-info);
212
+ --progress-surface: color-mix(in srgb, var(--color-info-subtle) 60%, transparent);
213
+ }
214
+ }