ps-helix 6.2.3 → 7.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 (31) hide show
  1. package/CONFIGURATION.md +492 -0
  2. package/README.md +131 -125
  3. package/THEME.md +37 -27
  4. package/TOKENS.md +662 -0
  5. package/fesm2022/ps-helix.mjs +7777 -5714
  6. package/fesm2022/ps-helix.mjs.map +1 -1
  7. package/package.json +18 -8
  8. package/src/lib/styles/base/a11y.css +36 -0
  9. package/src/lib/styles/base/behavior.css +15 -0
  10. package/src/lib/styles/base/global.css +9 -26
  11. package/src/lib/styles/compat.css +580 -0
  12. package/src/lib/styles/themes/dark-auto.css +315 -0
  13. package/src/lib/styles/themes/dark.css +259 -157
  14. package/src/lib/styles/themes/light.css +236 -221
  15. package/src/lib/styles/tokens/animations.tokens.css +30 -21
  16. package/src/lib/styles/tokens/breakpoints.tokens.css +22 -6
  17. package/src/lib/styles/tokens/effects.tokens.css +25 -25
  18. package/src/lib/styles/tokens/layout.tokens.css +32 -32
  19. package/src/lib/styles/tokens/sizing.tokens.css +87 -75
  20. package/src/lib/styles/tokens/spacing.tokens.css +18 -18
  21. package/src/lib/styles/tokens/typography.tokens.css +34 -34
  22. package/src/lib/styles/utilities/animations.utils.css +18 -18
  23. package/src/lib/styles/utilities/colors.utils.css +196 -196
  24. package/src/lib/styles/utilities/focus.utils.css +13 -13
  25. package/src/lib/styles/utilities/layout.utils.css +9 -9
  26. package/src/lib/styles/utilities/responsive.utils.css +49 -49
  27. package/src/lib/styles/utilities/spacing.utils.css +96 -96
  28. package/src/lib/styles/utilities/typography.utils.css +25 -25
  29. package/styles-full.css +25 -0
  30. package/styles.css +17 -8
  31. package/types/ps-helix.d.ts +3251 -1724
package/src/lib/styles/utilities/colors.utils.css CHANGED
@@ -1,223 +1,223 @@
1
1
  /* Color utilities */
2
2
 
3
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); }
4
+ .psh-bg-primary { background-color: var(--psh-primary-color); }
5
+ .psh-bg-secondary { background-color: var(--psh-secondary-color); }
6
+ .psh-bg-success { background-color: var(--psh-success-color); }
7
+ .psh-bg-warning { background-color: var(--psh-warning-color); }
8
+ .psh-bg-danger { background-color: var(--psh-danger-color); }
9
9
 
10
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); }
11
+ .psh-bg-surface-card { background-color: var(--psh-surface-card); }
12
+ .psh-bg-surface-ground { background-color: var(--psh-surface-ground); }
13
+ .psh-bg-surface-section { background-color: var(--psh-surface-section); }
14
+ .psh-bg-surface-border { background-color: var(--psh-surface-border); }
15
+ .psh-bg-surface-hover { background-color: var(--psh-surface-hover); }
16
16
 
17
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); }
18
+ .psh-text-color { color: var(--psh-text-color); }
19
+ .psh-text-color-secondary { color: var(--psh-text-color-secondary); }
20
20
 
21
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); }
22
+ .psh-bg-teal-50 { background-color: var(--psh-teal-50); }
23
+ .psh-bg-teal-100 { background-color: var(--psh-teal-100); }
24
+ .psh-bg-teal-200 { background-color: var(--psh-teal-200); }
25
+ .psh-bg-teal-300 { background-color: var(--psh-teal-300); }
26
+ .psh-bg-teal-400 { background-color: var(--psh-teal-400); }
27
+ .psh-bg-teal-500 { background-color: var(--psh-teal-500); }
28
+ .psh-bg-teal-600 { background-color: var(--psh-teal-600); }
29
+ .psh-bg-teal-700 { background-color: var(--psh-teal-700); }
30
+ .psh-bg-teal-800 { background-color: var(--psh-teal-800); }
31
+ .psh-bg-teal-900 { background-color: var(--psh-teal-900); }
32
+
33
+ .psh-text-teal-50 { color: var(--psh-teal-50); }
34
+ .psh-text-teal-100 { color: var(--psh-teal-100); }
35
+ .psh-text-teal-200 { color: var(--psh-teal-200); }
36
+ .psh-text-teal-300 { color: var(--psh-teal-300); }
37
+ .psh-text-teal-400 { color: var(--psh-teal-400); }
38
+ .psh-text-teal-500 { color: var(--psh-teal-500); }
39
+ .psh-text-teal-600 { color: var(--psh-teal-600); }
40
+ .psh-text-teal-700 { color: var(--psh-teal-700); }
41
+ .psh-text-teal-800 { color: var(--psh-teal-800); }
42
+ .psh-text-teal-900 { color: var(--psh-teal-900); }
43
43
 
44
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); }
45
+ .psh-bg-emerald-50 { background-color: var(--psh-emerald-50); }
46
+ .psh-bg-emerald-100 { background-color: var(--psh-emerald-100); }
47
+ .psh-bg-emerald-200 { background-color: var(--psh-emerald-200); }
48
+ .psh-bg-emerald-300 { background-color: var(--psh-emerald-300); }
49
+ .psh-bg-emerald-400 { background-color: var(--psh-emerald-400); }
50
+ .psh-bg-emerald-500 { background-color: var(--psh-emerald-500); }
51
+ .psh-bg-emerald-600 { background-color: var(--psh-emerald-600); }
52
+ .psh-bg-emerald-700 { background-color: var(--psh-emerald-700); }
53
+ .psh-bg-emerald-800 { background-color: var(--psh-emerald-800); }
54
+ .psh-bg-emerald-900 { background-color: var(--psh-emerald-900); }
55
+
56
+ .psh-text-emerald-50 { color: var(--psh-emerald-50); }
57
+ .psh-text-emerald-100 { color: var(--psh-emerald-100); }
58
+ .psh-text-emerald-200 { color: var(--psh-emerald-200); }
59
+ .psh-text-emerald-300 { color: var(--psh-emerald-300); }
60
+ .psh-text-emerald-400 { color: var(--psh-emerald-400); }
61
+ .psh-text-emerald-500 { color: var(--psh-emerald-500); }
62
+ .psh-text-emerald-600 { color: var(--psh-emerald-600); }
63
+ .psh-text-emerald-700 { color: var(--psh-emerald-700); }
64
+ .psh-text-emerald-800 { color: var(--psh-emerald-800); }
65
+ .psh-text-emerald-900 { color: var(--psh-emerald-900); }
66
66
 
67
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); }
68
+ .psh-bg-indigo-50 { background-color: var(--psh-indigo-50); }
69
+ .psh-bg-indigo-100 { background-color: var(--psh-indigo-100); }
70
+ .psh-bg-indigo-200 { background-color: var(--psh-indigo-200); }
71
+ .psh-bg-indigo-300 { background-color: var(--psh-indigo-300); }
72
+ .psh-bg-indigo-400 { background-color: var(--psh-indigo-400); }
73
+ .psh-bg-indigo-500 { background-color: var(--psh-indigo-500); }
74
+ .psh-bg-indigo-600 { background-color: var(--psh-indigo-600); }
75
+ .psh-bg-indigo-700 { background-color: var(--psh-indigo-700); }
76
+ .psh-bg-indigo-800 { background-color: var(--psh-indigo-800); }
77
+ .psh-bg-indigo-900 { background-color: var(--psh-indigo-900); }
78
+
79
+ .psh-text-indigo-50 { color: var(--psh-indigo-50); }
80
+ .psh-text-indigo-100 { color: var(--psh-indigo-100); }
81
+ .psh-text-indigo-200 { color: var(--psh-indigo-200); }
82
+ .psh-text-indigo-300 { color: var(--psh-indigo-300); }
83
+ .psh-text-indigo-400 { color: var(--psh-indigo-400); }
84
+ .psh-text-indigo-500 { color: var(--psh-indigo-500); }
85
+ .psh-text-indigo-600 { color: var(--psh-indigo-600); }
86
+ .psh-text-indigo-700 { color: var(--psh-indigo-700); }
87
+ .psh-text-indigo-800 { color: var(--psh-indigo-800); }
88
+ .psh-text-indigo-900 { color: var(--psh-indigo-900); }
89
89
 
90
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); }
91
+ .psh-bg-purple-50 { background-color: var(--psh-purple-50); }
92
+ .psh-bg-purple-100 { background-color: var(--psh-purple-100); }
93
+ .psh-bg-purple-200 { background-color: var(--psh-purple-200); }
94
+ .psh-bg-purple-300 { background-color: var(--psh-purple-300); }
95
+ .psh-bg-purple-400 { background-color: var(--psh-purple-400); }
96
+ .psh-bg-purple-500 { background-color: var(--psh-purple-500); }
97
+ .psh-bg-purple-600 { background-color: var(--psh-purple-600); }
98
+ .psh-bg-purple-700 { background-color: var(--psh-purple-700); }
99
+ .psh-bg-purple-800 { background-color: var(--psh-purple-800); }
100
+ .psh-bg-purple-900 { background-color: var(--psh-purple-900); }
101
+
102
+ .psh-text-purple-50 { color: var(--psh-purple-50); }
103
+ .psh-text-purple-100 { color: var(--psh-purple-100); }
104
+ .psh-text-purple-200 { color: var(--psh-purple-200); }
105
+ .psh-text-purple-300 { color: var(--psh-purple-300); }
106
+ .psh-text-purple-400 { color: var(--psh-purple-400); }
107
+ .psh-text-purple-500 { color: var(--psh-purple-500); }
108
+ .psh-text-purple-600 { color: var(--psh-purple-600); }
109
+ .psh-text-purple-700 { color: var(--psh-purple-700); }
110
+ .psh-text-purple-800 { color: var(--psh-purple-800); }
111
+ .psh-text-purple-900 { color: var(--psh-purple-900); }
112
112
 
113
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); }
114
+ .psh-bg-fuchsia-50 { background-color: var(--psh-fuchsia-50); }
115
+ .psh-bg-fuchsia-100 { background-color: var(--psh-fuchsia-100); }
116
+ .psh-bg-fuchsia-200 { background-color: var(--psh-fuchsia-200); }
117
+ .psh-bg-fuchsia-300 { background-color: var(--psh-fuchsia-300); }
118
+ .psh-bg-fuchsia-400 { background-color: var(--psh-fuchsia-400); }
119
+ .psh-bg-fuchsia-500 { background-color: var(--psh-fuchsia-500); }
120
+ .psh-bg-fuchsia-600 { background-color: var(--psh-fuchsia-600); }
121
+ .psh-bg-fuchsia-700 { background-color: var(--psh-fuchsia-700); }
122
+ .psh-bg-fuchsia-800 { background-color: var(--psh-fuchsia-800); }
123
+ .psh-bg-fuchsia-900 { background-color: var(--psh-fuchsia-900); }
124
+
125
+ .psh-text-fuchsia-50 { color: var(--psh-fuchsia-50); }
126
+ .psh-text-fuchsia-100 { color: var(--psh-fuchsia-100); }
127
+ .psh-text-fuchsia-200 { color: var(--psh-fuchsia-200); }
128
+ .psh-text-fuchsia-300 { color: var(--psh-fuchsia-300); }
129
+ .psh-text-fuchsia-400 { color: var(--psh-fuchsia-400); }
130
+ .psh-text-fuchsia-500 { color: var(--psh-fuchsia-500); }
131
+ .psh-text-fuchsia-600 { color: var(--psh-fuchsia-600); }
132
+ .psh-text-fuchsia-700 { color: var(--psh-fuchsia-700); }
133
+ .psh-text-fuchsia-800 { color: var(--psh-fuchsia-800); }
134
+ .psh-text-fuchsia-900 { color: var(--psh-fuchsia-900); }
135
135
 
136
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); }
137
+ .psh-bg-rose-50 { background-color: var(--psh-rose-50); }
138
+ .psh-bg-rose-100 { background-color: var(--psh-rose-100); }
139
+ .psh-bg-rose-200 { background-color: var(--psh-rose-200); }
140
+ .psh-bg-rose-300 { background-color: var(--psh-rose-300); }
141
+ .psh-bg-rose-400 { background-color: var(--psh-rose-400); }
142
+ .psh-bg-rose-500 { background-color: var(--psh-rose-500); }
143
+ .psh-bg-rose-600 { background-color: var(--psh-rose-600); }
144
+ .psh-bg-rose-700 { background-color: var(--psh-rose-700); }
145
+ .psh-bg-rose-800 { background-color: var(--psh-rose-800); }
146
+ .psh-bg-rose-900 { background-color: var(--psh-rose-900); }
147
+
148
+ .psh-text-rose-50 { color: var(--psh-rose-50); }
149
+ .psh-text-rose-100 { color: var(--psh-rose-100); }
150
+ .psh-text-rose-200 { color: var(--psh-rose-200); }
151
+ .psh-text-rose-300 { color: var(--psh-rose-300); }
152
+ .psh-text-rose-400 { color: var(--psh-rose-400); }
153
+ .psh-text-rose-500 { color: var(--psh-rose-500); }
154
+ .psh-text-rose-600 { color: var(--psh-rose-600); }
155
+ .psh-text-rose-700 { color: var(--psh-rose-700); }
156
+ .psh-text-rose-800 { color: var(--psh-rose-800); }
157
+ .psh-text-rose-900 { color: var(--psh-rose-900); }
158
158
 
159
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); }
160
+ .psh-bg-amber-50 { background-color: var(--psh-amber-50); }
161
+ .psh-bg-amber-100 { background-color: var(--psh-amber-100); }
162
+ .psh-bg-amber-200 { background-color: var(--psh-amber-200); }
163
+ .psh-bg-amber-300 { background-color: var(--psh-amber-300); }
164
+ .psh-bg-amber-400 { background-color: var(--psh-amber-400); }
165
+ .psh-bg-amber-500 { background-color: var(--psh-amber-500); }
166
+ .psh-bg-amber-600 { background-color: var(--psh-amber-600); }
167
+ .psh-bg-amber-700 { background-color: var(--psh-amber-700); }
168
+ .psh-bg-amber-800 { background-color: var(--psh-amber-800); }
169
+ .psh-bg-amber-900 { background-color: var(--psh-amber-900); }
170
+
171
+ .psh-text-amber-50 { color: var(--psh-amber-50); }
172
+ .psh-text-amber-100 { color: var(--psh-amber-100); }
173
+ .psh-text-amber-200 { color: var(--psh-amber-200); }
174
+ .psh-text-amber-300 { color: var(--psh-amber-300); }
175
+ .psh-text-amber-400 { color: var(--psh-amber-400); }
176
+ .psh-text-amber-500 { color: var(--psh-amber-500); }
177
+ .psh-text-amber-600 { color: var(--psh-amber-600); }
178
+ .psh-text-amber-700 { color: var(--psh-amber-700); }
179
+ .psh-text-amber-800 { color: var(--psh-amber-800); }
180
+ .psh-text-amber-900 { color: var(--psh-amber-900); }
181
181
 
182
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); }
183
+ .psh-border-teal-50 { border-color: var(--psh-teal-50); }
184
+ .psh-border-teal-100 { border-color: var(--psh-teal-100); }
185
+ .psh-border-teal-200 { border-color: var(--psh-teal-200); }
186
+ .psh-border-teal-300 { border-color: var(--psh-teal-300); }
187
+ .psh-border-teal-400 { border-color: var(--psh-teal-400); }
188
+ .psh-border-teal-500 { border-color: var(--psh-teal-500); }
189
+ .psh-border-teal-600 { border-color: var(--psh-teal-600); }
190
+ .psh-border-teal-700 { border-color: var(--psh-teal-700); }
191
+ .psh-border-teal-800 { border-color: var(--psh-teal-800); }
192
+ .psh-border-teal-900 { border-color: var(--psh-teal-900); }
193
+
194
+ .psh-border-emerald-500 { border-color: var(--psh-emerald-500); }
195
+ .psh-border-indigo-500 { border-color: var(--psh-indigo-500); }
196
+ .psh-border-purple-500 { border-color: var(--psh-purple-500); }
197
+ .psh-border-fuchsia-500 { border-color: var(--psh-fuchsia-500); }
198
+ .psh-border-rose-500 { border-color: var(--psh-rose-500); }
199
+ .psh-border-amber-500 { border-color: var(--psh-amber-500); }
200
200
 
201
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); }
202
+ .psh-border-primary { border-color: var(--psh-primary-color); }
203
+ .psh-border-secondary { border-color: var(--psh-secondary-color); }
204
+ .psh-border-success { border-color: var(--psh-success-color); }
205
+ .psh-border-warning { border-color: var(--psh-warning-color); }
206
+ .psh-border-danger { border-color: var(--psh-danger-color); }
207
207
 
208
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); }
209
+ .psh-hover\:bg-teal-500:hover { background-color: var(--psh-teal-500); }
210
+ .psh-hover\:bg-emerald-500:hover { background-color: var(--psh-emerald-500); }
211
+ .psh-hover\:bg-indigo-500:hover { background-color: var(--psh-indigo-500); }
212
+ .psh-hover\:bg-purple-500:hover { background-color: var(--psh-purple-500); }
213
+ .psh-hover\:bg-fuchsia-500:hover { background-color: var(--psh-fuchsia-500); }
214
+ .psh-hover\:bg-rose-500:hover { background-color: var(--psh-rose-500); }
215
+ .psh-hover\:bg-amber-500:hover { background-color: var(--psh-amber-500); }
216
+
217
+ .psh-hover\:text-teal-500:hover { color: var(--psh-teal-500); }
218
+ .psh-hover\:text-emerald-500:hover { color: var(--psh-emerald-500); }
219
+ .psh-hover\:text-indigo-500:hover { color: var(--psh-indigo-500); }
220
+ .psh-hover\:text-purple-500:hover { color: var(--psh-purple-500); }
221
+ .psh-hover\:text-fuchsia-500:hover { color: var(--psh-fuchsia-500); }
222
+ .psh-hover\:text-rose-500:hover { color: var(--psh-rose-500); }
223
+ .psh-hover\:text-amber-500:hover { color: var(--psh-amber-500); }
package/src/lib/styles/utilities/focus.utils.css CHANGED
@@ -2,28 +2,28 @@
2
2
 
3
3
  /* Focus utilities */
4
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);
5
+ outline: var(--psh-focus-outline-width) var(--psh-focus-outline-style) var(--psh-focus-outline-color);
6
+ outline-offset: var(--psh-focus-outline-offset);
7
7
  }
8
8
 
9
9
  .psh-focus-ring-primary:focus {
10
10
  outline: none;
11
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
11
+ box-shadow: 0 0 0 var(--psh-focus-ring-width) var(--psh-focus-ring-color);
12
12
  }
13
13
 
14
14
  .psh-focus-ring-error:focus {
15
15
  outline: none;
16
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-error);
16
+ box-shadow: 0 0 0 var(--psh-focus-ring-width) var(--psh-focus-ring-error);
17
17
  }
18
18
 
19
19
  .psh-focus-ring-success:focus {
20
20
  outline: none;
21
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-success);
21
+ box-shadow: 0 0 0 var(--psh-focus-ring-width) var(--psh-focus-ring-success);
22
22
  }
23
23
 
24
24
  .psh-focus-ring-warning:focus {
25
25
  outline: none;
26
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-warning);
26
+ box-shadow: 0 0 0 var(--psh-focus-ring-width) var(--psh-focus-ring-warning);
27
27
  }
28
28
 
29
29
  /* Focus visible only (pour éviter les focus au clic) */
@@ -34,7 +34,7 @@
34
34
 
35
35
  /* Focus states for common elements */
36
36
  .psh-focus-within-ring:focus-within {
37
- box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
37
+ box-shadow: 0 0 0 var(--psh-focus-ring-width) var(--psh-focus-ring-color);
38
38
  }
39
39
 
40
40
  /* Skip link utility for accessibility */
@@ -42,13 +42,13 @@
42
42
  position: absolute;
43
43
  top: -40px;
44
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);
45
+ background: var(--psh-primary-color);
46
+ color: var(--psh-primary-color-text);
47
+ padding: var(--psh-spacing-sm) var(--psh-spacing-md);
48
+ border-radius: var(--psh-radius-lg);
49
49
  text-decoration: none;
50
- z-index: var(--z-index-modal);
51
- transition: top var(--animation-duration-fast) var(--animation-easing-default);
50
+ z-index: var(--psh-z-index-modal);
51
+ transition: top var(--psh-animation-duration-fast) var(--psh-animation-easing-default);
52
52
  }
53
53
 
54
54
  .psh-skip-link:focus {
package/src/lib/styles/utilities/layout.utils.css CHANGED
@@ -33,9 +33,9 @@
33
33
  .psh-justify-around { justify-content: space-around; }
34
34
  .psh-justify-evenly { justify-content: space-evenly; }
35
35
 
36
- .psh-flex-none { flex: var(--flex-none); }
37
- .psh-flex-auto { flex: var(--flex-auto); }
38
- .psh-flex-initial { flex: var(--flex-initial); }
36
+ .psh-flex-none { flex: var(--psh-flex-none); }
37
+ .psh-flex-auto { flex: var(--psh-flex-auto); }
38
+ .psh-flex-initial { flex: var(--psh-flex-initial); }
39
39
  .psh-flex-1 { flex: 1 1 0%; }
40
40
  .psh-flex-2 { flex: 2 2 0%; }
41
41
  .psh-flex-3 { flex: 3 3 0%; }
@@ -47,12 +47,12 @@
47
47
  .psh-grow-0 { flex-grow: 0; }
48
48
 
49
49
  /* Grid utilities */
50
- .psh-grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
51
- .psh-grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
52
- .psh-grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
53
- .psh-grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
54
- .psh-grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
55
- .psh-grid-cols-12 { grid-template-columns: var(--grid-cols-12); }
50
+ .psh-grid-cols-1 { grid-template-columns: var(--psh-grid-cols-1); }
51
+ .psh-grid-cols-2 { grid-template-columns: var(--psh-grid-cols-2); }
52
+ .psh-grid-cols-3 { grid-template-columns: var(--psh-grid-cols-3); }
53
+ .psh-grid-cols-4 { grid-template-columns: var(--psh-grid-cols-4); }
54
+ .psh-grid-cols-6 { grid-template-columns: var(--psh-grid-cols-6); }
55
+ .psh-grid-cols-12 { grid-template-columns: var(--psh-grid-cols-12); }
56
56
 
57
57
  .psh-col-span-1 { grid-column: span 1 / span 1; }
58
58
  .psh-col-span-2 { grid-column: span 2 / span 2; }