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/colors.utils.css CHANGED
@@ -1,223 +1,223 @@
1
- /* Color utilities */
2
-
3
- /* Background colors */
4
- .bg-primary { background-color: var(--primary-color); }
5
- .bg-secondary { background-color: var(--secondary-color); }
6
- .bg-success { background-color: var(--success-color); }
7
- .bg-warning { background-color: var(--warning-color); }
8
- .bg-danger { background-color: var(--danger-color); }
9
-
10
- /* Surface colors */
11
- .bg-surface-card { background-color: var(--surface-card); }
12
- .bg-surface-ground { background-color: var(--surface-ground); }
13
- .bg-surface-section { background-color: var(--surface-section); }
14
- .bg-surface-border { background-color: var(--surface-border); }
15
- .bg-surface-hover { background-color: var(--surface-hover); }
16
-
17
- /* Text colors - Semantic colors defined in typography.utils.css */
18
- .text-color { color: var(--text-color); }
19
- .text-color-secondary { color: var(--text-color-secondary); }
20
-
21
- /* Teal utilities */
22
- .bg-teal-50 { background-color: var(--teal-50); }
23
- .bg-teal-100 { background-color: var(--teal-100); }
24
- .bg-teal-200 { background-color: var(--teal-200); }
25
- .bg-teal-300 { background-color: var(--teal-300); }
26
- .bg-teal-400 { background-color: var(--teal-400); }
27
- .bg-teal-500 { background-color: var(--teal-500); }
28
- .bg-teal-600 { background-color: var(--teal-600); }
29
- .bg-teal-700 { background-color: var(--teal-700); }
30
- .bg-teal-800 { background-color: var(--teal-800); }
31
- .bg-teal-900 { background-color: var(--teal-900); }
32
-
33
- .text-teal-50 { color: var(--teal-50); }
34
- .text-teal-100 { color: var(--teal-100); }
35
- .text-teal-200 { color: var(--teal-200); }
36
- .text-teal-300 { color: var(--teal-300); }
37
- .text-teal-400 { color: var(--teal-400); }
38
- .text-teal-500 { color: var(--teal-500); }
39
- .text-teal-600 { color: var(--teal-600); }
40
- .text-teal-700 { color: var(--teal-700); }
41
- .text-teal-800 { color: var(--teal-800); }
42
- .text-teal-900 { color: var(--teal-900); }
43
-
44
- /* Emerald utilities */
45
- .bg-emerald-50 { background-color: var(--emerald-50); }
46
- .bg-emerald-100 { background-color: var(--emerald-100); }
47
- .bg-emerald-200 { background-color: var(--emerald-200); }
48
- .bg-emerald-300 { background-color: var(--emerald-300); }
49
- .bg-emerald-400 { background-color: var(--emerald-400); }
50
- .bg-emerald-500 { background-color: var(--emerald-500); }
51
- .bg-emerald-600 { background-color: var(--emerald-600); }
52
- .bg-emerald-700 { background-color: var(--emerald-700); }
53
- .bg-emerald-800 { background-color: var(--emerald-800); }
54
- .bg-emerald-900 { background-color: var(--emerald-900); }
55
-
56
- .text-emerald-50 { color: var(--emerald-50); }
57
- .text-emerald-100 { color: var(--emerald-100); }
58
- .text-emerald-200 { color: var(--emerald-200); }
59
- .text-emerald-300 { color: var(--emerald-300); }
60
- .text-emerald-400 { color: var(--emerald-400); }
61
- .text-emerald-500 { color: var(--emerald-500); }
62
- .text-emerald-600 { color: var(--emerald-600); }
63
- .text-emerald-700 { color: var(--emerald-700); }
64
- .text-emerald-800 { color: var(--emerald-800); }
65
- .text-emerald-900 { color: var(--emerald-900); }
66
-
67
- /* Indigo utilities */
68
- .bg-indigo-50 { background-color: var(--indigo-50); }
69
- .bg-indigo-100 { background-color: var(--indigo-100); }
70
- .bg-indigo-200 { background-color: var(--indigo-200); }
71
- .bg-indigo-300 { background-color: var(--indigo-300); }
72
- .bg-indigo-400 { background-color: var(--indigo-400); }
73
- .bg-indigo-500 { background-color: var(--indigo-500); }
74
- .bg-indigo-600 { background-color: var(--indigo-600); }
75
- .bg-indigo-700 { background-color: var(--indigo-700); }
76
- .bg-indigo-800 { background-color: var(--indigo-800); }
77
- .bg-indigo-900 { background-color: var(--indigo-900); }
78
-
79
- .text-indigo-50 { color: var(--indigo-50); }
80
- .text-indigo-100 { color: var(--indigo-100); }
81
- .text-indigo-200 { color: var(--indigo-200); }
82
- .text-indigo-300 { color: var(--indigo-300); }
83
- .text-indigo-400 { color: var(--indigo-400); }
84
- .text-indigo-500 { color: var(--indigo-500); }
85
- .text-indigo-600 { color: var(--indigo-600); }
86
- .text-indigo-700 { color: var(--indigo-700); }
87
- .text-indigo-800 { color: var(--indigo-800); }
88
- .text-indigo-900 { color: var(--indigo-900); }
89
-
90
- /* Purple utilities */
91
- .bg-purple-50 { background-color: var(--purple-50); }
92
- .bg-purple-100 { background-color: var(--purple-100); }
93
- .bg-purple-200 { background-color: var(--purple-200); }
94
- .bg-purple-300 { background-color: var(--purple-300); }
95
- .bg-purple-400 { background-color: var(--purple-400); }
96
- .bg-purple-500 { background-color: var(--purple-500); }
97
- .bg-purple-600 { background-color: var(--purple-600); }
98
- .bg-purple-700 { background-color: var(--purple-700); }
99
- .bg-purple-800 { background-color: var(--purple-800); }
100
- .bg-purple-900 { background-color: var(--purple-900); }
101
-
102
- .text-purple-50 { color: var(--purple-50); }
103
- .text-purple-100 { color: var(--purple-100); }
104
- .text-purple-200 { color: var(--purple-200); }
105
- .text-purple-300 { color: var(--purple-300); }
106
- .text-purple-400 { color: var(--purple-400); }
107
- .text-purple-500 { color: var(--purple-500); }
108
- .text-purple-600 { color: var(--purple-600); }
109
- .text-purple-700 { color: var(--purple-700); }
110
- .text-purple-800 { color: var(--purple-800); }
111
- .text-purple-900 { color: var(--purple-900); }
112
-
113
- /* Fuchsia utilities */
114
- .bg-fuchsia-50 { background-color: var(--fuchsia-50); }
115
- .bg-fuchsia-100 { background-color: var(--fuchsia-100); }
116
- .bg-fuchsia-200 { background-color: var(--fuchsia-200); }
117
- .bg-fuchsia-300 { background-color: var(--fuchsia-300); }
118
- .bg-fuchsia-400 { background-color: var(--fuchsia-400); }
119
- .bg-fuchsia-500 { background-color: var(--fuchsia-500); }
120
- .bg-fuchsia-600 { background-color: var(--fuchsia-600); }
121
- .bg-fuchsia-700 { background-color: var(--fuchsia-700); }
122
- .bg-fuchsia-800 { background-color: var(--fuchsia-800); }
123
- .bg-fuchsia-900 { background-color: var(--fuchsia-900); }
124
-
125
- .text-fuchsia-50 { color: var(--fuchsia-50); }
126
- .text-fuchsia-100 { color: var(--fuchsia-100); }
127
- .text-fuchsia-200 { color: var(--fuchsia-200); }
128
- .text-fuchsia-300 { color: var(--fuchsia-300); }
129
- .text-fuchsia-400 { color: var(--fuchsia-400); }
130
- .text-fuchsia-500 { color: var(--fuchsia-500); }
131
- .text-fuchsia-600 { color: var(--fuchsia-600); }
132
- .text-fuchsia-700 { color: var(--fuchsia-700); }
133
- .text-fuchsia-800 { color: var(--fuchsia-800); }
134
- .text-fuchsia-900 { color: var(--fuchsia-900); }
135
-
136
- /* Rose utilities */
137
- .bg-rose-50 { background-color: var(--rose-50); }
138
- .bg-rose-100 { background-color: var(--rose-100); }
139
- .bg-rose-200 { background-color: var(--rose-200); }
140
- .bg-rose-300 { background-color: var(--rose-300); }
141
- .bg-rose-400 { background-color: var(--rose-400); }
142
- .bg-rose-500 { background-color: var(--rose-500); }
143
- .bg-rose-600 { background-color: var(--rose-600); }
144
- .bg-rose-700 { background-color: var(--rose-700); }
145
- .bg-rose-800 { background-color: var(--rose-800); }
146
- .bg-rose-900 { background-color: var(--rose-900); }
147
-
148
- .text-rose-50 { color: var(--rose-50); }
149
- .text-rose-100 { color: var(--rose-100); }
150
- .text-rose-200 { color: var(--rose-200); }
151
- .text-rose-300 { color: var(--rose-300); }
152
- .text-rose-400 { color: var(--rose-400); }
153
- .text-rose-500 { color: var(--rose-500); }
154
- .text-rose-600 { color: var(--rose-600); }
155
- .text-rose-700 { color: var(--rose-700); }
156
- .text-rose-800 { color: var(--rose-800); }
157
- .text-rose-900 { color: var(--rose-900); }
158
-
159
- /* Amber utilities */
160
- .bg-amber-50 { background-color: var(--amber-50); }
161
- .bg-amber-100 { background-color: var(--amber-100); }
162
- .bg-amber-200 { background-color: var(--amber-200); }
163
- .bg-amber-300 { background-color: var(--amber-300); }
164
- .bg-amber-400 { background-color: var(--amber-400); }
165
- .bg-amber-500 { background-color: var(--amber-500); }
166
- .bg-amber-600 { background-color: var(--amber-600); }
167
- .bg-amber-700 { background-color: var(--amber-700); }
168
- .bg-amber-800 { background-color: var(--amber-800); }
169
- .bg-amber-900 { background-color: var(--amber-900); }
170
-
171
- .text-amber-50 { color: var(--amber-50); }
172
- .text-amber-100 { color: var(--amber-100); }
173
- .text-amber-200 { color: var(--amber-200); }
174
- .text-amber-300 { color: var(--amber-300); }
175
- .text-amber-400 { color: var(--amber-400); }
176
- .text-amber-500 { color: var(--amber-500); }
177
- .text-amber-600 { color: var(--amber-600); }
178
- .text-amber-700 { color: var(--amber-700); }
179
- .text-amber-800 { color: var(--amber-800); }
180
- .text-amber-900 { color: var(--amber-900); }
181
-
182
- /* Border color utilities */
183
- .border-teal-50 { border-color: var(--teal-50); }
184
- .border-teal-100 { border-color: var(--teal-100); }
185
- .border-teal-200 { border-color: var(--teal-200); }
186
- .border-teal-300 { border-color: var(--teal-300); }
187
- .border-teal-400 { border-color: var(--teal-400); }
188
- .border-teal-500 { border-color: var(--teal-500); }
189
- .border-teal-600 { border-color: var(--teal-600); }
190
- .border-teal-700 { border-color: var(--teal-700); }
191
- .border-teal-800 { border-color: var(--teal-800); }
192
- .border-teal-900 { border-color: var(--teal-900); }
193
-
194
- .border-emerald-500 { border-color: var(--emerald-500); }
195
- .border-indigo-500 { border-color: var(--indigo-500); }
196
- .border-purple-500 { border-color: var(--purple-500); }
197
- .border-fuchsia-500 { border-color: var(--fuchsia-500); }
198
- .border-rose-500 { border-color: var(--rose-500); }
199
- .border-amber-500 { border-color: var(--amber-500); }
200
-
201
- /* Functional color utilities */
202
- .border-primary { border-color: var(--primary-color); }
203
- .border-secondary { border-color: var(--secondary-color); }
204
- .border-success { border-color: var(--success-color); }
205
- .border-warning { border-color: var(--warning-color); }
206
- .border-danger { border-color: var(--danger-color); }
207
-
208
- /* Hover utilities */
209
- .hover\:bg-teal-500:hover { background-color: var(--teal-500); }
210
- .hover\:bg-emerald-500:hover { background-color: var(--emerald-500); }
211
- .hover\:bg-indigo-500:hover { background-color: var(--indigo-500); }
212
- .hover\:bg-purple-500:hover { background-color: var(--purple-500); }
213
- .hover\:bg-fuchsia-500:hover { background-color: var(--fuchsia-500); }
214
- .hover\:bg-rose-500:hover { background-color: var(--rose-500); }
215
- .hover\:bg-amber-500:hover { background-color: var(--amber-500); }
216
-
217
- .hover\:text-teal-500:hover { color: var(--teal-500); }
218
- .hover\:text-emerald-500:hover { color: var(--emerald-500); }
219
- .hover\:text-indigo-500:hover { color: var(--indigo-500); }
220
- .hover\:text-purple-500:hover { color: var(--purple-500); }
221
- .hover\:text-fuchsia-500:hover { color: var(--fuchsia-500); }
222
- .hover\:text-rose-500:hover { color: var(--rose-500); }
223
- .hover\:text-amber-500:hover { color: var(--amber-500); }
1
+ /* Color utilities */
2
+
3
+ /* Background colors */
4
+ .psh-bg-primary { background-color: var(--primary-color); }
5
+ .psh-bg-secondary { background-color: var(--secondary-color); }
6
+ .psh-bg-success { background-color: var(--success-color); }
7
+ .psh-bg-warning { background-color: var(--warning-color); }
8
+ .psh-bg-danger { background-color: var(--danger-color); }
9
+
10
+ /* Surface colors */
11
+ .psh-bg-surface-card { background-color: var(--surface-card); }
12
+ .psh-bg-surface-ground { background-color: var(--surface-ground); }
13
+ .psh-bg-surface-section { background-color: var(--surface-section); }
14
+ .psh-bg-surface-border { background-color: var(--surface-border); }
15
+ .psh-bg-surface-hover { background-color: var(--surface-hover); }
16
+
17
+ /* Text colors - Semantic colors defined in typography.utils.css */
18
+ .psh-text-color { color: var(--text-color); }
19
+ .psh-text-color-secondary { color: var(--text-color-secondary); }
20
+
21
+ /* Teal utilities */
22
+ .psh-bg-teal-50 { background-color: var(--teal-50); }
23
+ .psh-bg-teal-100 { background-color: var(--teal-100); }
24
+ .psh-bg-teal-200 { background-color: var(--teal-200); }
25
+ .psh-bg-teal-300 { background-color: var(--teal-300); }
26
+ .psh-bg-teal-400 { background-color: var(--teal-400); }
27
+ .psh-bg-teal-500 { background-color: var(--teal-500); }
28
+ .psh-bg-teal-600 { background-color: var(--teal-600); }
29
+ .psh-bg-teal-700 { background-color: var(--teal-700); }
30
+ .psh-bg-teal-800 { background-color: var(--teal-800); }
31
+ .psh-bg-teal-900 { background-color: var(--teal-900); }
32
+
33
+ .psh-text-teal-50 { color: var(--teal-50); }
34
+ .psh-text-teal-100 { color: var(--teal-100); }
35
+ .psh-text-teal-200 { color: var(--teal-200); }
36
+ .psh-text-teal-300 { color: var(--teal-300); }
37
+ .psh-text-teal-400 { color: var(--teal-400); }
38
+ .psh-text-teal-500 { color: var(--teal-500); }
39
+ .psh-text-teal-600 { color: var(--teal-600); }
40
+ .psh-text-teal-700 { color: var(--teal-700); }
41
+ .psh-text-teal-800 { color: var(--teal-800); }
42
+ .psh-text-teal-900 { color: var(--teal-900); }
43
+
44
+ /* Emerald utilities */
45
+ .psh-bg-emerald-50 { background-color: var(--emerald-50); }
46
+ .psh-bg-emerald-100 { background-color: var(--emerald-100); }
47
+ .psh-bg-emerald-200 { background-color: var(--emerald-200); }
48
+ .psh-bg-emerald-300 { background-color: var(--emerald-300); }
49
+ .psh-bg-emerald-400 { background-color: var(--emerald-400); }
50
+ .psh-bg-emerald-500 { background-color: var(--emerald-500); }
51
+ .psh-bg-emerald-600 { background-color: var(--emerald-600); }
52
+ .psh-bg-emerald-700 { background-color: var(--emerald-700); }
53
+ .psh-bg-emerald-800 { background-color: var(--emerald-800); }
54
+ .psh-bg-emerald-900 { background-color: var(--emerald-900); }
55
+
56
+ .psh-text-emerald-50 { color: var(--emerald-50); }
57
+ .psh-text-emerald-100 { color: var(--emerald-100); }
58
+ .psh-text-emerald-200 { color: var(--emerald-200); }
59
+ .psh-text-emerald-300 { color: var(--emerald-300); }
60
+ .psh-text-emerald-400 { color: var(--emerald-400); }
61
+ .psh-text-emerald-500 { color: var(--emerald-500); }
62
+ .psh-text-emerald-600 { color: var(--emerald-600); }
63
+ .psh-text-emerald-700 { color: var(--emerald-700); }
64
+ .psh-text-emerald-800 { color: var(--emerald-800); }
65
+ .psh-text-emerald-900 { color: var(--emerald-900); }
66
+
67
+ /* Indigo utilities */
68
+ .psh-bg-indigo-50 { background-color: var(--indigo-50); }
69
+ .psh-bg-indigo-100 { background-color: var(--indigo-100); }
70
+ .psh-bg-indigo-200 { background-color: var(--indigo-200); }
71
+ .psh-bg-indigo-300 { background-color: var(--indigo-300); }
72
+ .psh-bg-indigo-400 { background-color: var(--indigo-400); }
73
+ .psh-bg-indigo-500 { background-color: var(--indigo-500); }
74
+ .psh-bg-indigo-600 { background-color: var(--indigo-600); }
75
+ .psh-bg-indigo-700 { background-color: var(--indigo-700); }
76
+ .psh-bg-indigo-800 { background-color: var(--indigo-800); }
77
+ .psh-bg-indigo-900 { background-color: var(--indigo-900); }
78
+
79
+ .psh-text-indigo-50 { color: var(--indigo-50); }
80
+ .psh-text-indigo-100 { color: var(--indigo-100); }
81
+ .psh-text-indigo-200 { color: var(--indigo-200); }
82
+ .psh-text-indigo-300 { color: var(--indigo-300); }
83
+ .psh-text-indigo-400 { color: var(--indigo-400); }
84
+ .psh-text-indigo-500 { color: var(--indigo-500); }
85
+ .psh-text-indigo-600 { color: var(--indigo-600); }
86
+ .psh-text-indigo-700 { color: var(--indigo-700); }
87
+ .psh-text-indigo-800 { color: var(--indigo-800); }
88
+ .psh-text-indigo-900 { color: var(--indigo-900); }
89
+
90
+ /* Purple utilities */
91
+ .psh-bg-purple-50 { background-color: var(--purple-50); }
92
+ .psh-bg-purple-100 { background-color: var(--purple-100); }
93
+ .psh-bg-purple-200 { background-color: var(--purple-200); }
94
+ .psh-bg-purple-300 { background-color: var(--purple-300); }
95
+ .psh-bg-purple-400 { background-color: var(--purple-400); }
96
+ .psh-bg-purple-500 { background-color: var(--purple-500); }
97
+ .psh-bg-purple-600 { background-color: var(--purple-600); }
98
+ .psh-bg-purple-700 { background-color: var(--purple-700); }
99
+ .psh-bg-purple-800 { background-color: var(--purple-800); }
100
+ .psh-bg-purple-900 { background-color: var(--purple-900); }
101
+
102
+ .psh-text-purple-50 { color: var(--purple-50); }
103
+ .psh-text-purple-100 { color: var(--purple-100); }
104
+ .psh-text-purple-200 { color: var(--purple-200); }
105
+ .psh-text-purple-300 { color: var(--purple-300); }
106
+ .psh-text-purple-400 { color: var(--purple-400); }
107
+ .psh-text-purple-500 { color: var(--purple-500); }
108
+ .psh-text-purple-600 { color: var(--purple-600); }
109
+ .psh-text-purple-700 { color: var(--purple-700); }
110
+ .psh-text-purple-800 { color: var(--purple-800); }
111
+ .psh-text-purple-900 { color: var(--purple-900); }
112
+
113
+ /* Fuchsia utilities */
114
+ .psh-bg-fuchsia-50 { background-color: var(--fuchsia-50); }
115
+ .psh-bg-fuchsia-100 { background-color: var(--fuchsia-100); }
116
+ .psh-bg-fuchsia-200 { background-color: var(--fuchsia-200); }
117
+ .psh-bg-fuchsia-300 { background-color: var(--fuchsia-300); }
118
+ .psh-bg-fuchsia-400 { background-color: var(--fuchsia-400); }
119
+ .psh-bg-fuchsia-500 { background-color: var(--fuchsia-500); }
120
+ .psh-bg-fuchsia-600 { background-color: var(--fuchsia-600); }
121
+ .psh-bg-fuchsia-700 { background-color: var(--fuchsia-700); }
122
+ .psh-bg-fuchsia-800 { background-color: var(--fuchsia-800); }
123
+ .psh-bg-fuchsia-900 { background-color: var(--fuchsia-900); }
124
+
125
+ .psh-text-fuchsia-50 { color: var(--fuchsia-50); }
126
+ .psh-text-fuchsia-100 { color: var(--fuchsia-100); }
127
+ .psh-text-fuchsia-200 { color: var(--fuchsia-200); }
128
+ .psh-text-fuchsia-300 { color: var(--fuchsia-300); }
129
+ .psh-text-fuchsia-400 { color: var(--fuchsia-400); }
130
+ .psh-text-fuchsia-500 { color: var(--fuchsia-500); }
131
+ .psh-text-fuchsia-600 { color: var(--fuchsia-600); }
132
+ .psh-text-fuchsia-700 { color: var(--fuchsia-700); }
133
+ .psh-text-fuchsia-800 { color: var(--fuchsia-800); }
134
+ .psh-text-fuchsia-900 { color: var(--fuchsia-900); }
135
+
136
+ /* Rose utilities */
137
+ .psh-bg-rose-50 { background-color: var(--rose-50); }
138
+ .psh-bg-rose-100 { background-color: var(--rose-100); }
139
+ .psh-bg-rose-200 { background-color: var(--rose-200); }
140
+ .psh-bg-rose-300 { background-color: var(--rose-300); }
141
+ .psh-bg-rose-400 { background-color: var(--rose-400); }
142
+ .psh-bg-rose-500 { background-color: var(--rose-500); }
143
+ .psh-bg-rose-600 { background-color: var(--rose-600); }
144
+ .psh-bg-rose-700 { background-color: var(--rose-700); }
145
+ .psh-bg-rose-800 { background-color: var(--rose-800); }
146
+ .psh-bg-rose-900 { background-color: var(--rose-900); }
147
+
148
+ .psh-text-rose-50 { color: var(--rose-50); }
149
+ .psh-text-rose-100 { color: var(--rose-100); }
150
+ .psh-text-rose-200 { color: var(--rose-200); }
151
+ .psh-text-rose-300 { color: var(--rose-300); }
152
+ .psh-text-rose-400 { color: var(--rose-400); }
153
+ .psh-text-rose-500 { color: var(--rose-500); }
154
+ .psh-text-rose-600 { color: var(--rose-600); }
155
+ .psh-text-rose-700 { color: var(--rose-700); }
156
+ .psh-text-rose-800 { color: var(--rose-800); }
157
+ .psh-text-rose-900 { color: var(--rose-900); }
158
+
159
+ /* Amber utilities */
160
+ .psh-bg-amber-50 { background-color: var(--amber-50); }
161
+ .psh-bg-amber-100 { background-color: var(--amber-100); }
162
+ .psh-bg-amber-200 { background-color: var(--amber-200); }
163
+ .psh-bg-amber-300 { background-color: var(--amber-300); }
164
+ .psh-bg-amber-400 { background-color: var(--amber-400); }
165
+ .psh-bg-amber-500 { background-color: var(--amber-500); }
166
+ .psh-bg-amber-600 { background-color: var(--amber-600); }
167
+ .psh-bg-amber-700 { background-color: var(--amber-700); }
168
+ .psh-bg-amber-800 { background-color: var(--amber-800); }
169
+ .psh-bg-amber-900 { background-color: var(--amber-900); }
170
+
171
+ .psh-text-amber-50 { color: var(--amber-50); }
172
+ .psh-text-amber-100 { color: var(--amber-100); }
173
+ .psh-text-amber-200 { color: var(--amber-200); }
174
+ .psh-text-amber-300 { color: var(--amber-300); }
175
+ .psh-text-amber-400 { color: var(--amber-400); }
176
+ .psh-text-amber-500 { color: var(--amber-500); }
177
+ .psh-text-amber-600 { color: var(--amber-600); }
178
+ .psh-text-amber-700 { color: var(--amber-700); }
179
+ .psh-text-amber-800 { color: var(--amber-800); }
180
+ .psh-text-amber-900 { color: var(--amber-900); }
181
+
182
+ /* Border color utilities */
183
+ .psh-border-teal-50 { border-color: var(--teal-50); }
184
+ .psh-border-teal-100 { border-color: var(--teal-100); }
185
+ .psh-border-teal-200 { border-color: var(--teal-200); }
186
+ .psh-border-teal-300 { border-color: var(--teal-300); }
187
+ .psh-border-teal-400 { border-color: var(--teal-400); }
188
+ .psh-border-teal-500 { border-color: var(--teal-500); }
189
+ .psh-border-teal-600 { border-color: var(--teal-600); }
190
+ .psh-border-teal-700 { border-color: var(--teal-700); }
191
+ .psh-border-teal-800 { border-color: var(--teal-800); }
192
+ .psh-border-teal-900 { border-color: var(--teal-900); }
193
+
194
+ .psh-border-emerald-500 { border-color: var(--emerald-500); }
195
+ .psh-border-indigo-500 { border-color: var(--indigo-500); }
196
+ .psh-border-purple-500 { border-color: var(--purple-500); }
197
+ .psh-border-fuchsia-500 { border-color: var(--fuchsia-500); }
198
+ .psh-border-rose-500 { border-color: var(--rose-500); }
199
+ .psh-border-amber-500 { border-color: var(--amber-500); }
200
+
201
+ /* Functional color utilities */
202
+ .psh-border-primary { border-color: var(--primary-color); }
203
+ .psh-border-secondary { border-color: var(--secondary-color); }
204
+ .psh-border-success { border-color: var(--success-color); }
205
+ .psh-border-warning { border-color: var(--warning-color); }
206
+ .psh-border-danger { border-color: var(--danger-color); }
207
+
208
+ /* Hover utilities */
209
+ .psh-hover\:bg-teal-500:hover { background-color: var(--teal-500); }
210
+ .psh-hover\:bg-emerald-500:hover { background-color: var(--emerald-500); }
211
+ .psh-hover\:bg-indigo-500:hover { background-color: var(--indigo-500); }
212
+ .psh-hover\:bg-purple-500:hover { background-color: var(--purple-500); }
213
+ .psh-hover\:bg-fuchsia-500:hover { background-color: var(--fuchsia-500); }
214
+ .psh-hover\:bg-rose-500:hover { background-color: var(--rose-500); }
215
+ .psh-hover\:bg-amber-500:hover { background-color: var(--amber-500); }
216
+
217
+ .psh-hover\:text-teal-500:hover { color: var(--teal-500); }
218
+ .psh-hover\:text-emerald-500:hover { color: var(--emerald-500); }
219
+ .psh-hover\:text-indigo-500:hover { color: var(--indigo-500); }
220
+ .psh-hover\:text-purple-500:hover { color: var(--purple-500); }
221
+ .psh-hover\:text-fuchsia-500:hover { color: var(--fuchsia-500); }
222
+ .psh-hover\:text-rose-500:hover { color: var(--rose-500); }
223
+ .psh-hover\:text-amber-500:hover { color: var(--amber-500); }
package/src/lib/styles/utilities/focus.utils.css CHANGED
@@ -1,62 +1,56 @@
1
- /* Focus system utilities - Variables defined in tokens/effects.tokens.css */
2
-
3
- /* Focus utilities */
4
- .focus-ring {
5
- outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
6
- outline-offset: var(--focus-outline-offset);
7
- }
8
-
9
- .focus-ring-primary:focus {
10
- outline: none;
11
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
12
- }
13
-
14
- .focus-ring-error:focus {
15
- outline: none;
16
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-error);
17
- }
18
-
19
- .focus-ring-success:focus {
20
- outline: none;
21
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-success);
22
- }
23
-
24
- .focus-ring-warning:focus {
25
- outline: none;
26
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-warning);
27
- }
28
-
29
- /* Focus visible only (pour éviter les focus au clic) */
30
- .focus-visible-only:focus:not(:focus-visible) {
31
- outline: none;
32
- box-shadow: none;
33
- }
34
-
35
- /* Focus states for common elements */
36
- .focus-within-ring:focus-within {
37
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
38
- }
39
-
40
- /* Removes focus styles when not using keyboard navigation */
41
- .js-focus-visible button:focus:not(.focus-visible) {
42
- outline: none;
43
- box-shadow: none;
44
- }
45
-
46
- /* Skip link utility for accessibility */
47
- .skip-link {
48
- position: absolute;
49
- top: -40px;
50
- left: 6px;
51
- background: var(--primary-color);
52
- color: var(--primary-color-text);
53
- padding: var(--spacing-sm) var(--spacing-md);
54
- border-radius: var(--border-radius);
55
- text-decoration: none;
56
- z-index: var(--z-index-modal);
57
- transition: top var(--animation-duration-fast) var(--animation-easing-default);
58
- }
59
-
60
- .skip-link:focus {
61
- top: 6px;
62
- }
1
+ /* Focus system utilities - Variables defined in tokens/effects.tokens.css */
2
+
3
+ /* Focus utilities */
4
+ .psh-focus-ring {
5
+ outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
6
+ outline-offset: var(--focus-outline-offset);
7
+ }
8
+
9
+ .psh-focus-ring-primary:focus {
10
+ outline: none;
11
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
12
+ }
13
+
14
+ .psh-focus-ring-error:focus {
15
+ outline: none;
16
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-error);
17
+ }
18
+
19
+ .psh-focus-ring-success:focus {
20
+ outline: none;
21
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-success);
22
+ }
23
+
24
+ .psh-focus-ring-warning:focus {
25
+ outline: none;
26
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-warning);
27
+ }
28
+
29
+ /* Focus visible only (pour éviter les focus au clic) */
30
+ .psh-focus-visible-only:focus:not(:focus-visible) {
31
+ outline: none;
32
+ box-shadow: none;
33
+ }
34
+
35
+ /* Focus states for common elements */
36
+ .psh-focus-within-ring:focus-within {
37
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
38
+ }
39
+
40
+ /* Skip link utility for accessibility */
41
+ .psh-skip-link {
42
+ position: absolute;
43
+ top: -40px;
44
+ left: 6px;
45
+ background: var(--primary-color);
46
+ color: var(--primary-color-text);
47
+ padding: var(--spacing-sm) var(--spacing-md);
48
+ border-radius: var(--border-radius);
49
+ text-decoration: none;
50
+ z-index: var(--z-index-modal);
51
+ transition: top var(--animation-duration-fast) var(--animation-easing-default);
52
+ }
53
+
54
+ .psh-skip-link:focus {
55
+ top: 6px;
56
+ }