ps-helix 5.1.2 → 6.0.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 (20) hide show
  1. package/README.md +1188 -1188
  2. package/THEME.md +446 -446
  3. package/fesm2022/ps-helix.mjs +1949 -1012
  4. package/fesm2022/ps-helix.mjs.map +1 -1
  5. package/package.json +6 -5
  6. package/src/lib/styles/base/global.css +48 -32
  7. package/src/lib/styles/themes/dark.css +200 -200
  8. package/src/lib/styles/themes/light.css +278 -278
  9. package/src/lib/styles/tokens/breakpoints.tokens.css +20 -0
  10. package/src/lib/styles/tokens/sizing.tokens.css +94 -94
  11. package/src/lib/styles/tokens/spacing.tokens.css +27 -27
  12. package/src/lib/styles/utilities/animations.utils.css +157 -157
  13. package/src/lib/styles/utilities/colors.utils.css +223 -223
  14. package/src/lib/styles/utilities/focus.utils.css +56 -62
  15. package/src/lib/styles/utilities/layout.utils.css +135 -135
  16. package/src/lib/styles/utilities/responsive.utils.css +219 -226
  17. package/src/lib/styles/utilities/spacing.utils.css +150 -150
  18. package/src/lib/styles/utilities/typography.utils.css +36 -36
  19. package/styles.css +34 -33
  20. package/types/ps-helix.d.ts +291 -67
package/src/lib/styles/utilities/responsive.utils.css CHANGED
@@ -1,227 +1,220 @@
1
- /* Responsive utilities */
2
- :root {
3
- /* Breakpoint variables (em-based for accessibility) */
4
- --breakpoint-xs: 30em; /* 480px */
5
- --breakpoint-sm: 40em; /* 640px */
6
- --breakpoint-md: 48em; /* 768px */
7
- --breakpoint-lg: 64em; /* 1024px */
8
- --breakpoint-xl: 80em; /* 1280px */
9
- --breakpoint-2xl: 96em; /* 1536px */
10
- }
11
-
12
- /* Container utilities */
13
- .container {
14
- width: 100%;
15
- margin-left: auto;
16
- margin-right: auto;
17
- padding-left: var(--container-padding-sm);
18
- padding-right: var(--container-padding-sm);
19
- max-width: var(--container-max-width);
20
- }
21
-
22
- @media (min-width: 40em) {
23
- .container {
24
- padding-left: var(--container-padding-md);
25
- padding-right: var(--container-padding-md);
26
- }
27
- }
28
-
29
- @media (min-width: 64em) {
30
- .container {
31
- padding-left: var(--container-padding-lg);
32
- padding-right: var(--container-padding-lg);
33
- }
34
- }
35
-
36
- /* Responsive display utilities */
37
- @media (max-width: 39.9375em) {
38
- .sm\:hidden { display: none; }
39
- }
40
-
41
- @media (min-width: 40em) {
42
- .sm\:block { display: block; }
43
- .sm\:inline { display: inline; }
44
- .sm\:flex { display: flex; }
45
- .sm\:grid { display: grid; }
46
- }
47
-
48
- @media (min-width: 48em) {
49
- .md\:block { display: block; }
50
- .md\:inline { display: inline; }
51
- .md\:flex { display: flex; }
52
- .md\:grid { display: grid; }
53
- .md\:hidden { display: none; }
54
- }
55
-
56
- @media (min-width: 64em) {
57
- .lg\:block { display: block; }
58
- .lg\:inline { display: inline; }
59
- .lg\:flex { display: flex; }
60
- .lg\:grid { display: grid; }
61
- .lg\:hidden { display: none; }
62
- }
63
-
64
- /* Responsive flexbox utilities */
65
- @media (min-width: 40em) {
66
- .sm\:flex-row { flex-direction: row; }
67
- .sm\:flex-col { flex-direction: column; }
68
- .sm\:items-center { align-items: center; }
69
- .sm\:justify-center { justify-content: center; }
70
- }
71
-
72
- @media (min-width: 48em) {
73
- .md\:flex-row { flex-direction: row; }
74
- .md\:flex-col { flex-direction: column; }
75
- .md\:items-center { align-items: center; }
76
- .md\:justify-center { justify-content: center; }
77
- }
78
-
79
- @media (min-width: 64em) {
80
- .lg\:flex-row { flex-direction: row; }
81
- .lg\:flex-col { flex-direction: column; }
82
- .lg\:items-center { align-items: center; }
83
- .lg\:justify-center { justify-content: center; }
84
- }
85
-
86
- /* Responsive grid utilities */
87
- @media (min-width: 40em) {
88
- .sm\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
89
- .sm\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
90
- .sm\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
91
- }
92
-
93
- @media (min-width: 48em) {
94
- .md\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
95
- .md\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
96
- .md\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
97
- .md\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
98
- }
99
-
100
- @media (min-width: 64em) {
101
- .lg\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
102
- .lg\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
103
- .lg\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
104
- .lg\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
105
- .lg\:grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
106
- }
107
-
108
- /* Responsive spacing utilities */
109
- @media (min-width: 40em) {
110
- .sm\:p-0 { padding: 0; }
111
- .sm\:p-sm { padding: var(--spacing-sm); }
112
- .sm\:p-md { padding: var(--spacing-md); }
113
- .sm\:p-lg { padding: var(--spacing-lg); }
114
- .sm\:p-xl { padding: var(--spacing-xl); }
115
-
116
- .sm\:m-0 { margin: 0; }
117
- .sm\:m-sm { margin: var(--spacing-sm); }
118
- .sm\:m-md { margin: var(--spacing-md); }
119
- .sm\:m-lg { margin: var(--spacing-lg); }
120
- .sm\:m-xl { margin: var(--spacing-xl); }
121
- }
122
-
123
- @media (min-width: 48em) {
124
- .md\:p-0 { padding: 0; }
125
- .md\:p-sm { padding: var(--spacing-sm); }
126
- .md\:p-md { padding: var(--spacing-md); }
127
- .md\:p-lg { padding: var(--spacing-lg); }
128
- .md\:p-xl { padding: var(--spacing-xl); }
129
-
130
- .md\:m-0 { margin: 0; }
131
- .md\:m-sm { margin: var(--spacing-sm); }
132
- .md\:m-md { margin: var(--spacing-md); }
133
- .md\:m-lg { margin: var(--spacing-lg); }
134
- .md\:m-xl { margin: var(--spacing-xl); }
135
- }
136
-
137
- @media (min-width: 64em) {
138
- .lg\:p-0 { padding: 0; }
139
- .lg\:p-sm { padding: var(--spacing-sm); }
140
- .lg\:p-md { padding: var(--spacing-md); }
141
- .lg\:p-lg { padding: var(--spacing-lg); }
142
- .lg\:p-xl { padding: var(--spacing-xl); }
143
-
144
- .lg\:m-0 { margin: 0; }
145
- .lg\:m-sm { margin: var(--spacing-sm); }
146
- .lg\:m-md { margin: var(--spacing-md); }
147
- .lg\:m-lg { margin: var(--spacing-lg); }
148
- .lg\:m-xl { margin: var(--spacing-xl); }
149
- }
150
-
151
- /* Text alignment utilities */
152
- .text-left { text-align: left; }
153
- .text-center { text-align: center; }
154
- .text-right { text-align: right; }
155
- .text-justify { text-align: justify; }
156
-
157
- /* Mobile-first utilities */
158
- .mobile-only { display: block; }
159
- .desktop-only { display: none; }
160
-
161
- @media (min-width: 48em) {
162
- .mobile-only { display: none; }
163
- .desktop-only { display: block; }
164
- }
165
-
166
- /* Responsive text alignment */
167
- @media (min-width: 40em) {
168
- .sm\:text-left { text-align: left; }
169
- .sm\:text-center { text-align: center; }
170
- .sm\:text-right { text-align: right; }
171
- }
172
-
173
- @media (min-width: 48em) {
174
- .md\:text-left { text-align: left; }
175
- .md\:text-center { text-align: center; }
176
- .md\:text-right { text-align: right; }
177
- }
178
-
179
- /* Visibility utilities */
180
- .visible { visibility: visible; }
181
- .invisible { visibility: hidden; }
182
-
183
- /* Opacity utilities */
184
- .opacity-0 { opacity: 0; }
185
- .opacity-25 { opacity: 0.25; }
186
- .opacity-50 { opacity: 0.5; }
187
- .opacity-75 { opacity: 0.75; }
188
- .opacity-100 { opacity: 1; }
189
-
190
- /* Cursor utilities */
191
- .cursor-auto { cursor: auto; }
192
- .cursor-default { cursor: default; }
193
- .cursor-pointer { cursor: pointer; }
194
- .cursor-wait { cursor: wait; }
195
- .cursor-text { cursor: text; }
196
- .cursor-move { cursor: move; }
197
- .cursor-help { cursor: help; }
198
- .cursor-not-allowed { cursor: not-allowed; }
199
-
200
- /* User select utilities */
201
- .select-none { user-select: none; }
202
- .select-text { user-select: text; }
203
- .select-all { user-select: all; }
204
- .select-auto { user-select: auto; }
205
-
206
- /* Pointer events utilities */
207
- .pointer-events-none { pointer-events: none; }
208
- .pointer-events-auto { pointer-events: auto; }
209
-
210
- /* Mobile-specific utilities */
211
- @media (max-width: 48em) {
212
- .mobile\:flex-col { flex-direction: column; }
213
- .mobile\:gap-sm { gap: var(--spacing-sm); }
214
- .mobile\:gap-xs { gap: var(--spacing-xs); }
215
- .mobile\:p-sm { padding: var(--spacing-sm); }
216
- .mobile\:p-xs { padding: var(--spacing-xs); }
217
- .mobile\:text-center { text-align: center; }
218
- .mobile\:w-full { width: 100%; }
219
- }
220
-
221
- /* Touch-friendly targets */
222
- @media (max-width: 48em) {
223
- .touch-target {
224
- min-height: 2.75rem;
225
- min-width: 2.75rem;
226
- }
1
+ /* Responsive utilities */
2
+ /* Breakpoint tokens are the single source of truth — see tokens/breakpoints.tokens.css.
3
+ The min-width/max-width values below use the canonical em scale from that file. */
4
+
5
+ /* Container utilities */
6
+ .psh-container {
7
+ width: 100%;
8
+ margin-left: auto;
9
+ margin-right: auto;
10
+ padding-left: var(--container-padding-sm);
11
+ padding-right: var(--container-padding-sm);
12
+ max-width: var(--container-max-width);
13
+ }
14
+
15
+ @media (min-width: 40em) {
16
+ .psh-container {
17
+ padding-left: var(--container-padding-md);
18
+ padding-right: var(--container-padding-md);
19
+ }
20
+ }
21
+
22
+ @media (min-width: 64em) {
23
+ .psh-container {
24
+ padding-left: var(--container-padding-lg);
25
+ padding-right: var(--container-padding-lg);
26
+ }
27
+ }
28
+
29
+ /* Responsive display utilities */
30
+ @media (max-width: 39.9375em) {
31
+ .psh-sm\:hidden { display: none; }
32
+ }
33
+
34
+ @media (min-width: 40em) {
35
+ .psh-sm\:block { display: block; }
36
+ .psh-sm\:inline { display: inline; }
37
+ .psh-sm\:flex { display: flex; }
38
+ .psh-sm\:grid { display: grid; }
39
+ }
40
+
41
+ @media (min-width: 48em) {
42
+ .psh-md\:block { display: block; }
43
+ .psh-md\:inline { display: inline; }
44
+ .psh-md\:flex { display: flex; }
45
+ .psh-md\:grid { display: grid; }
46
+ .psh-md\:hidden { display: none; }
47
+ }
48
+
49
+ @media (min-width: 64em) {
50
+ .psh-lg\:block { display: block; }
51
+ .psh-lg\:inline { display: inline; }
52
+ .psh-lg\:flex { display: flex; }
53
+ .psh-lg\:grid { display: grid; }
54
+ .psh-lg\:hidden { display: none; }
55
+ }
56
+
57
+ /* Responsive flexbox utilities */
58
+ @media (min-width: 40em) {
59
+ .psh-sm\:flex-row { flex-direction: row; }
60
+ .psh-sm\:flex-col { flex-direction: column; }
61
+ .psh-sm\:items-center { align-items: center; }
62
+ .psh-sm\:justify-center { justify-content: center; }
63
+ }
64
+
65
+ @media (min-width: 48em) {
66
+ .psh-md\:flex-row { flex-direction: row; }
67
+ .psh-md\:flex-col { flex-direction: column; }
68
+ .psh-md\:items-center { align-items: center; }
69
+ .psh-md\:justify-center { justify-content: center; }
70
+ }
71
+
72
+ @media (min-width: 64em) {
73
+ .psh-lg\:flex-row { flex-direction: row; }
74
+ .psh-lg\:flex-col { flex-direction: column; }
75
+ .psh-lg\:items-center { align-items: center; }
76
+ .psh-lg\:justify-center { justify-content: center; }
77
+ }
78
+
79
+ /* Responsive grid utilities */
80
+ @media (min-width: 40em) {
81
+ .psh-sm\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
82
+ .psh-sm\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
83
+ .psh-sm\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
84
+ }
85
+
86
+ @media (min-width: 48em) {
87
+ .psh-md\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
88
+ .psh-md\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
89
+ .psh-md\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
90
+ .psh-md\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
91
+ }
92
+
93
+ @media (min-width: 64em) {
94
+ .psh-lg\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
95
+ .psh-lg\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
96
+ .psh-lg\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
97
+ .psh-lg\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
98
+ .psh-lg\:grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
99
+ }
100
+
101
+ /* Responsive spacing utilities */
102
+ @media (min-width: 40em) {
103
+ .psh-sm\:p-0 { padding: 0; }
104
+ .psh-sm\:p-sm { padding: var(--spacing-sm); }
105
+ .psh-sm\:p-md { padding: var(--spacing-md); }
106
+ .psh-sm\:p-lg { padding: var(--spacing-lg); }
107
+ .psh-sm\:p-xl { padding: var(--spacing-xl); }
108
+
109
+ .psh-sm\:m-0 { margin: 0; }
110
+ .psh-sm\:m-sm { margin: var(--spacing-sm); }
111
+ .psh-sm\:m-md { margin: var(--spacing-md); }
112
+ .psh-sm\:m-lg { margin: var(--spacing-lg); }
113
+ .psh-sm\:m-xl { margin: var(--spacing-xl); }
114
+ }
115
+
116
+ @media (min-width: 48em) {
117
+ .psh-md\:p-0 { padding: 0; }
118
+ .psh-md\:p-sm { padding: var(--spacing-sm); }
119
+ .psh-md\:p-md { padding: var(--spacing-md); }
120
+ .psh-md\:p-lg { padding: var(--spacing-lg); }
121
+ .psh-md\:p-xl { padding: var(--spacing-xl); }
122
+
123
+ .psh-md\:m-0 { margin: 0; }
124
+ .psh-md\:m-sm { margin: var(--spacing-sm); }
125
+ .psh-md\:m-md { margin: var(--spacing-md); }
126
+ .psh-md\:m-lg { margin: var(--spacing-lg); }
127
+ .psh-md\:m-xl { margin: var(--spacing-xl); }
128
+ }
129
+
130
+ @media (min-width: 64em) {
131
+ .psh-lg\:p-0 { padding: 0; }
132
+ .psh-lg\:p-sm { padding: var(--spacing-sm); }
133
+ .psh-lg\:p-md { padding: var(--spacing-md); }
134
+ .psh-lg\:p-lg { padding: var(--spacing-lg); }
135
+ .psh-lg\:p-xl { padding: var(--spacing-xl); }
136
+
137
+ .psh-lg\:m-0 { margin: 0; }
138
+ .psh-lg\:m-sm { margin: var(--spacing-sm); }
139
+ .psh-lg\:m-md { margin: var(--spacing-md); }
140
+ .psh-lg\:m-lg { margin: var(--spacing-lg); }
141
+ .psh-lg\:m-xl { margin: var(--spacing-xl); }
142
+ }
143
+
144
+ /* Text alignment utilities */
145
+ .psh-text-left { text-align: left; }
146
+ .psh-text-center { text-align: center; }
147
+ .psh-text-right { text-align: right; }
148
+ .psh-text-justify { text-align: justify; }
149
+
150
+ /* Mobile-first utilities */
151
+ .psh-mobile-only { display: block; }
152
+ .psh-desktop-only { display: none; }
153
+
154
+ @media (min-width: 48em) {
155
+ .psh-mobile-only { display: none; }
156
+ .psh-desktop-only { display: block; }
157
+ }
158
+
159
+ /* Responsive text alignment */
160
+ @media (min-width: 40em) {
161
+ .psh-sm\:text-left { text-align: left; }
162
+ .psh-sm\:text-center { text-align: center; }
163
+ .psh-sm\:text-right { text-align: right; }
164
+ }
165
+
166
+ @media (min-width: 48em) {
167
+ .psh-md\:text-left { text-align: left; }
168
+ .psh-md\:text-center { text-align: center; }
169
+ .psh-md\:text-right { text-align: right; }
170
+ }
171
+
172
+ /* Visibility utilities */
173
+ .psh-visible { visibility: visible; }
174
+ .psh-invisible { visibility: hidden; }
175
+
176
+ /* Opacity utilities */
177
+ .psh-opacity-0 { opacity: 0; }
178
+ .psh-opacity-25 { opacity: 0.25; }
179
+ .psh-opacity-50 { opacity: 0.5; }
180
+ .psh-opacity-75 { opacity: 0.75; }
181
+ .psh-opacity-100 { opacity: 1; }
182
+
183
+ /* Cursor utilities */
184
+ .psh-cursor-auto { cursor: auto; }
185
+ .psh-cursor-default { cursor: default; }
186
+ .psh-cursor-pointer { cursor: pointer; }
187
+ .psh-cursor-wait { cursor: wait; }
188
+ .psh-cursor-text { cursor: text; }
189
+ .psh-cursor-move { cursor: move; }
190
+ .psh-cursor-help { cursor: help; }
191
+ .psh-cursor-not-allowed { cursor: not-allowed; }
192
+
193
+ /* User select utilities */
194
+ .psh-select-none { user-select: none; }
195
+ .psh-select-text { user-select: text; }
196
+ .psh-select-all { user-select: all; }
197
+ .psh-select-auto { user-select: auto; }
198
+
199
+ /* Pointer events utilities */
200
+ .psh-pointer-events-none { pointer-events: none; }
201
+ .psh-pointer-events-auto { pointer-events: auto; }
202
+
203
+ /* Mobile-specific utilities */
204
+ @media (max-width: 48em) {
205
+ .psh-mobile\:flex-col { flex-direction: column; }
206
+ .psh-mobile\:gap-sm { gap: var(--spacing-sm); }
207
+ .psh-mobile\:gap-xs { gap: var(--spacing-xs); }
208
+ .psh-mobile\:p-sm { padding: var(--spacing-sm); }
209
+ .psh-mobile\:p-xs { padding: var(--spacing-xs); }
210
+ .psh-mobile\:text-center { text-align: center; }
211
+ .psh-mobile\:w-full { width: 100%; }
212
+ }
213
+
214
+ /* Touch-friendly targets */
215
+ @media (max-width: 48em) {
216
+ .psh-touch-target {
217
+ min-height: 2.75rem;
218
+ min-width: 2.75rem;
219
+ }
227
220
  }