@codenhub/styles 0.0.4 → 0.1.1

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 (74) hide show
  1. package/LICENSE +201 -201
  2. package/NOTICE +27 -0
  3. package/README.md +22 -116
  4. package/dist/aesthetics/chunky-tile.css +1 -0
  5. package/dist/aesthetics/glass.css +1 -0
  6. package/dist/aesthetics/index.css +2 -0
  7. package/dist/aesthetics/neobrutalism.css +1 -0
  8. package/dist/aesthetics/pixel.css +1 -0
  9. package/dist/components.css +2 -2
  10. package/dist/index.css +2 -2
  11. package/dist/native.css +2 -0
  12. package/dist/theme.css +2 -2
  13. package/dist/tw/aesthetics/chunky-tile.css +109 -0
  14. package/dist/tw/aesthetics/glass.css +66 -0
  15. package/dist/tw/aesthetics/index.css +9 -0
  16. package/dist/tw/aesthetics/neobrutalism.css +63 -0
  17. package/dist/tw/aesthetics/pixel.css +88 -0
  18. package/dist/tw/box.css +206 -0
  19. package/dist/tw/components/button.css +108 -0
  20. package/dist/tw/components/feedback.css +163 -0
  21. package/dist/tw/components/form.css +599 -0
  22. package/dist/tw/components/index.css +28 -0
  23. package/dist/tw/components/loader.css +122 -0
  24. package/dist/tw/components/surface.css +122 -0
  25. package/dist/tw/components/tooltip.css +132 -0
  26. package/dist/tw/elevation.css +46 -0
  27. package/dist/tw/index.css +27 -0
  28. package/dist/tw/intent.css +209 -0
  29. package/dist/tw/native.css +187 -0
  30. package/dist/tw/presentation.css +77 -0
  31. package/dist/tw/reset.css +129 -0
  32. package/dist/tw/theme.css +223 -0
  33. package/dist/tw/typography.css +34 -0
  34. package/dist/tw/utilities/content.css +361 -0
  35. package/dist/tw/utilities/index.css +6 -0
  36. package/dist/tw/utilities/layout.css +107 -0
  37. package/docs/accessibility.md +92 -0
  38. package/docs/changelog/0.1.0.md +37 -0
  39. package/docs/changelog/0.1.1.md +10 -0
  40. package/docs/changelog/index.md +10 -0
  41. package/docs/concepts.md +68 -0
  42. package/docs/index.md +35 -0
  43. package/docs/integrating/astro.md +35 -0
  44. package/docs/integrating/index.md +41 -0
  45. package/docs/integrating/nextjs.md +67 -0
  46. package/docs/integrating/svelte.md +43 -0
  47. package/docs/integrating/tailwind.md +56 -0
  48. package/docs/integrating/vue.md +31 -0
  49. package/docs/setup.md +96 -0
  50. package/docs/usage/aesthetics.md +120 -0
  51. package/docs/usage/buttons.md +58 -0
  52. package/docs/usage/composing.md +143 -0
  53. package/docs/usage/content-and-layout.md +175 -0
  54. package/docs/usage/customizing.md +148 -0
  55. package/docs/usage/feedback.md +79 -0
  56. package/docs/usage/forms.md +135 -0
  57. package/docs/usage/index.md +24 -0
  58. package/docs/usage/theming.md +154 -0
  59. package/docs/usage/tooltips.md +39 -0
  60. package/llms-full.txt +1676 -0
  61. package/llms.txt +26 -0
  62. package/package.json +176 -33
  63. package/src/components/button.css +0 -155
  64. package/src/components/feedback.css +0 -214
  65. package/src/components/form.css +0 -303
  66. package/src/components/index.css +0 -9
  67. package/src/components/loader.css +0 -56
  68. package/src/components/surface.css +0 -6
  69. package/src/components/tooltip.css +0 -60
  70. package/src/index.css +0 -7
  71. package/src/overrides.css +0 -76
  72. package/src/theme.css +0 -234
  73. package/src/typography.css +0 -30
  74. package/src/utilities.css +0 -40
package/src/theme.css DELETED
@@ -1,234 +0,0 @@
1
- @import "tailwindcss";
2
-
3
- @theme {
4
- --font-default: "Segoe UI", system-ui, sans-serif;
5
-
6
- --color-primary: var(--color-neutral-950);
7
- --color-primary-contrast: var(--color-neutral-50);
8
- --color-primary-hover: var(--color-neutral-700);
9
- --color-primary-subtle: var(--color-neutral-200);
10
- --color-primary-strong: var(--color-neutral-900);
11
- --color-accent: var(--color-neutral-600);
12
- --color-accent-contrast: var(--color-neutral-50);
13
- --color-accent-hover: var(--color-neutral-700);
14
- --color-accent-subtle: var(--color-neutral-100);
15
- --color-accent-strong: var(--color-neutral-800);
16
- --color-border: var(--color-neutral-300);
17
- --color-border-hover: var(--color-neutral-600);
18
- --color-background: var(--color-neutral-50);
19
- --color-foreground: var(--color-neutral-100);
20
- --color-surface: var(--color-neutral-200);
21
- --color-text: var(--color-neutral-950);
22
- --color-text-secondary: var(--color-neutral-700);
23
- --color-text-contrast: var(--color-neutral-50);
24
- --color-text-hover: var(--color-neutral-700);
25
- --color-text-subtle: var(--color-neutral-200);
26
- --color-text-strong: var(--color-neutral-900);
27
-
28
- --color-success: var(--color-emerald-600);
29
- --color-success-contrast: var(--color-neutral-50);
30
- --color-success-hover: color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong));
31
- --color-success-subtle: var(--color-emerald-100);
32
- --color-success-strong: var(--color-emerald-800);
33
- --color-warning: var(--color-amber-600);
34
- --color-warning-contrast: var(--color-neutral-50);
35
- --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong));
36
- --color-warning-subtle: var(--color-amber-100);
37
- --color-warning-strong: var(--color-amber-800);
38
- --color-destructive: var(--color-rose-700);
39
- --color-destructive-contrast: var(--color-neutral-50);
40
- --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong));
41
- --color-destructive-subtle: var(--color-rose-100);
42
- --color-destructive-strong: var(--color-rose-800);
43
- --color-info: var(--color-indigo-600);
44
- --color-info-contrast: var(--color-neutral-50);
45
- --color-info-hover: color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong));
46
- --color-info-subtle: var(--color-indigo-100);
47
- --color-info-strong: var(--color-indigo-800);
48
-
49
- --breakpoint-xs: 30rem;
50
- --breakpoint-2xl: 90rem;
51
- }
52
-
53
- :root {
54
- color-scheme: light;
55
-
56
- --container-narrow: 48rem;
57
- --container-max: 80rem;
58
- --container-wide: 90rem;
59
- --layout-gutter: clamp(1rem, 4vw, 2rem);
60
- --layout-section-block: clamp(4rem, 9vw, 7rem);
61
- --layout-stack-gap: 1rem;
62
- --layout-cluster-gap: 0.75rem;
63
- --layout-grid-min: 16rem;
64
-
65
- --radius-small: 0.25rem;
66
- --radius-control: 0.5rem;
67
- --radius-surface: 0.875rem;
68
- --control-height: 2.5rem;
69
- --border-width: 1px;
70
-
71
- --elevation-low: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
72
- --elevation-mid: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
73
- --elevation-high: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);
74
-
75
- --focus-ring: color-mix(in srgb, var(--color-primary) 64%, transparent);
76
- --focus-ring-offset: 2px;
77
- --focus-ring-width: 3px;
78
-
79
- --motion-duration-fast: 120ms;
80
- --motion-duration-normal: 200ms;
81
- --motion-duration-slow: 400ms;
82
- --motion-ease: cubic-bezier(0.2, 0, 0, 1);
83
-
84
- --z-popover: 40;
85
-
86
- --surface-hover-transform: translateY(-1px);
87
- }
88
-
89
- .light,
90
- .theme-light,
91
- [data-theme="light"] {
92
- color-scheme: light;
93
-
94
- --color-primary: var(--color-neutral-950);
95
- --color-primary-contrast: var(--color-neutral-50);
96
- --color-primary-hover: var(--color-neutral-700);
97
- --color-primary-subtle: var(--color-neutral-200);
98
- --color-primary-strong: var(--color-neutral-900);
99
- --color-accent: var(--color-neutral-600);
100
- --color-accent-contrast: var(--color-neutral-50);
101
- --color-accent-hover: var(--color-neutral-700);
102
- --color-accent-subtle: var(--color-neutral-100);
103
- --color-accent-strong: var(--color-neutral-800);
104
- --color-border: var(--color-neutral-300);
105
- --color-border-hover: var(--color-neutral-600);
106
- --color-background: var(--color-neutral-50);
107
- --color-foreground: var(--color-neutral-100);
108
- --color-surface: var(--color-neutral-200);
109
- --color-text: var(--color-neutral-950);
110
- --color-text-secondary: var(--color-neutral-700);
111
- --color-text-contrast: var(--color-neutral-50);
112
- --color-text-hover: var(--color-neutral-700);
113
- --color-text-subtle: var(--color-neutral-200);
114
- --color-text-strong: var(--color-neutral-900);
115
-
116
- --color-success: var(--color-emerald-600);
117
- --color-success-contrast: var(--color-neutral-50);
118
- --color-success-hover: color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong));
119
- --color-success-subtle: var(--color-emerald-100);
120
- --color-success-strong: var(--color-emerald-800);
121
- --color-warning: var(--color-amber-600);
122
- --color-warning-contrast: var(--color-neutral-50);
123
- --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong));
124
- --color-warning-subtle: var(--color-amber-100);
125
- --color-warning-strong: var(--color-amber-800);
126
- --color-destructive: var(--color-rose-700);
127
- --color-destructive-contrast: var(--color-neutral-50);
128
- --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong));
129
- --color-destructive-subtle: var(--color-rose-100);
130
- --color-destructive-strong: var(--color-rose-800);
131
- --color-info: var(--color-indigo-600);
132
- --color-info-contrast: var(--color-neutral-50);
133
- --color-info-hover: color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong));
134
- --color-info-subtle: var(--color-indigo-100);
135
- --color-info-strong: var(--color-indigo-800);
136
- }
137
-
138
- .dark {
139
- color-scheme: dark;
140
-
141
- --color-primary: var(--color-neutral-50);
142
- --color-primary-contrast: var(--color-neutral-950);
143
- --color-primary-hover: var(--color-neutral-200);
144
- --color-primary-subtle: var(--color-neutral-900);
145
- --color-primary-strong: var(--color-neutral-100);
146
- --color-accent: var(--color-neutral-400);
147
- --color-accent-contrast: var(--color-neutral-950);
148
- --color-accent-hover: var(--color-neutral-300);
149
- --color-accent-subtle: var(--color-neutral-800);
150
- --color-accent-strong: var(--color-neutral-200);
151
- --color-border: var(--color-neutral-700);
152
- --color-border-hover: var(--color-neutral-500);
153
- --color-background: var(--color-neutral-950);
154
- --color-foreground: var(--color-neutral-900);
155
- --color-surface: var(--color-neutral-800);
156
- --color-text: var(--color-neutral-50);
157
- --color-text-secondary: var(--color-neutral-400);
158
- --color-text-contrast: var(--color-neutral-950);
159
- --color-text-hover: var(--color-neutral-200);
160
- --color-text-subtle: var(--color-neutral-900);
161
- --color-text-strong: var(--color-neutral-100);
162
-
163
- --color-success: var(--color-emerald-600);
164
- --color-success-contrast: var(--color-neutral-50);
165
- --color-success-hover: color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong));
166
- --color-success-subtle: var(--color-emerald-800);
167
- --color-success-strong: var(--color-emerald-100);
168
- --color-warning: var(--color-amber-600);
169
- --color-warning-contrast: var(--color-neutral-50);
170
- --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong));
171
- --color-warning-subtle: var(--color-amber-800);
172
- --color-warning-strong: var(--color-amber-100);
173
- --color-destructive: var(--color-rose-700);
174
- --color-destructive-contrast: var(--color-neutral-50);
175
- --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong));
176
- --color-destructive-subtle: var(--color-rose-800);
177
- --color-destructive-strong: var(--color-rose-100);
178
- --color-info: var(--color-indigo-600);
179
- --color-info-contrast: var(--color-neutral-50);
180
- --color-info-hover: color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong));
181
- --color-info-subtle: var(--color-indigo-800);
182
- --color-info-strong: var(--color-indigo-100);
183
- }
184
-
185
- @media (prefers-color-scheme: dark) {
186
- :root:not(.light, .theme-light, [data-theme="light"]) {
187
- color-scheme: dark;
188
-
189
- --color-primary: var(--color-neutral-50);
190
- --color-primary-contrast: var(--color-neutral-950);
191
- --color-primary-hover: var(--color-neutral-200);
192
- --color-primary-subtle: var(--color-neutral-900);
193
- --color-primary-strong: var(--color-neutral-100);
194
- --color-accent: var(--color-neutral-400);
195
- --color-accent-contrast: var(--color-neutral-950);
196
- --color-accent-hover: var(--color-neutral-300);
197
- --color-accent-subtle: var(--color-neutral-800);
198
- --color-accent-strong: var(--color-neutral-200);
199
- --color-border: var(--color-neutral-700);
200
- --color-border-hover: var(--color-neutral-500);
201
- --color-background: var(--color-neutral-950);
202
- --color-foreground: var(--color-neutral-900);
203
- --color-surface: var(--color-neutral-800);
204
- --color-text: var(--color-neutral-50);
205
- --color-text-secondary: var(--color-neutral-400);
206
- --color-text-contrast: var(--color-neutral-950);
207
- --color-text-hover: var(--color-neutral-200);
208
- --color-text-subtle: var(--color-neutral-900);
209
- --color-text-strong: var(--color-neutral-100);
210
-
211
- --color-success: var(--color-emerald-600);
212
- --color-success-contrast: var(--color-neutral-50);
213
- --color-success-hover: color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong));
214
- --color-success-subtle: var(--color-emerald-800);
215
- --color-success-strong: var(--color-emerald-100);
216
- --color-warning: var(--color-amber-600);
217
- --color-warning-contrast: var(--color-neutral-50);
218
- --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong));
219
- --color-warning-subtle: var(--color-amber-800);
220
- --color-warning-strong: var(--color-amber-100);
221
- --color-destructive: var(--color-rose-700);
222
- --color-destructive-contrast: var(--color-neutral-50);
223
- --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong));
224
- --color-destructive-subtle: var(--color-rose-800);
225
- --color-destructive-strong: var(--color-rose-100);
226
- --color-info: var(--color-indigo-600);
227
- --color-info-contrast: var(--color-neutral-50);
228
- --color-info-hover: color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong));
229
- --color-info-subtle: var(--color-indigo-800);
230
- --color-info-strong: var(--color-indigo-100);
231
- }
232
- }
233
-
234
- @custom-variant dark (&:where(.dark, .dark *));
package/src/typography.css DELETED
@@ -1,30 +0,0 @@
1
- @import "tailwindcss";
2
- @import "./theme.css";
3
-
4
- @utility text-display {
5
- @apply text-6xl font-bold tracking-tight md:text-8xl;
6
- }
7
-
8
- @utility text-title-lg {
9
- @apply text-5xl font-bold tracking-tight md:text-6xl;
10
- }
11
-
12
- @utility text-title {
13
- @apply text-3xl font-bold tracking-tight;
14
- }
15
-
16
- @utility text-title-sm {
17
- @apply text-xl font-semibold tracking-tight;
18
- }
19
-
20
- @utility text-label-lg {
21
- @apply text-lg font-medium tracking-wide;
22
- }
23
-
24
- @utility text-label {
25
- @apply text-base font-medium tracking-wide;
26
- }
27
-
28
- @utility text-body {
29
- @apply text-sm font-normal tracking-wider;
30
- }
package/src/utilities.css DELETED
@@ -1,40 +0,0 @@
1
- @import "tailwindcss";
2
- @import "./theme.css";
3
-
4
- @utility stack {
5
- @apply flex flex-col gap-(--layout-stack-gap);
6
-
7
- &.tight {
8
- --layout-stack-gap: 0.5rem;
9
- }
10
-
11
- &.loose {
12
- --layout-stack-gap: 1.5rem;
13
- }
14
- }
15
-
16
- @utility cluster {
17
- @apply flex flex-wrap items-center gap-(--layout-cluster-gap);
18
-
19
- &.between {
20
- @apply justify-between;
21
- }
22
- }
23
-
24
- @utility auto-grid {
25
- @apply grid gap-(--layout-stack-gap);
26
-
27
- grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-grid-min), 100%), 1fr));
28
- }
29
-
30
- @utility selection-contrast {
31
- &::selection,
32
- & *::selection {
33
- background: var(--color-primary-contrast);
34
- color: var(--color-primary);
35
- }
36
- }
37
-
38
- @utility code {
39
- @apply bg-surface rounded-(--radius-small) px-1 py-0.5 font-mono;
40
- }