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/TOKENS.md ADDED
@@ -0,0 +1,662 @@
1
+ # Token reference
2
+
3
+ > **Generated from the stylesheets — do not edit by hand.**
4
+ > Run `npm run docs:tokens` after changing anything under `src/lib/styles/`.
5
+
6
+ **407 tokens** across 8 files.
7
+
8
+ Every custom property the library exposes is namespaced `--psh-*`. The unprefixed names
9
+ used before 7.0.0 remain available through the opt-in `styles/compat.css`.
10
+
11
+ ## Theme
12
+
13
+ 229 semantic tokens. Each one is redefined in `dark.css`; the two themes are kept symmetrical, and this generator fails if they drift apart.
14
+
15
+ | Token | Light | Dark |
16
+ |---|---|---|
17
+ | `--psh-surface-0` | `#ffffff` | `#0a0d16` |
18
+ | `--psh-surface-50` | `#f8fafc` | `#141a27` |
19
+ | `--psh-surface-100` | `#f1f5f9` | `#1e293b` |
20
+ | `--psh-surface-200` | `#e2e8f0` | `#334155` |
21
+ | `--psh-surface-300` | `#cbd5e1` | `#475569` |
22
+ | `--psh-surface-400` | `#94a3b8` | `#64748b` |
23
+ | `--psh-surface-500` | `#64748b` | `#94a3b8` |
24
+ | `--psh-surface-600` | `#475569` | `#cbd5e1` |
25
+ | `--psh-surface-700` | `#334155` | `#e2e8f0` |
26
+ | `--psh-surface-800` | `#1e293b` | `#f1f5f9` |
27
+ | `--psh-surface-900` | `#0f172a` | `#f8fafc` |
28
+ | `--psh-surface-900-rgb` | `15, 23, 42` | `248, 250, 252` |
29
+ | `--psh-surface-ground` | `var(--psh-surface-50)` | `var(--psh-surface-0)` |
30
+ | `--psh-surface-section` | `var(--psh-surface-0)` | `var(--psh-surface-50)` |
31
+ | `--psh-alert-info-bg` | `rgba(11, 1, 145, 0.1)` | `rgba(107, 95, 227, 0.15)` |
32
+ | `--psh-alert-info-border-color` | `#0B0191` | `#6B5FE3` |
33
+ | `--psh-alert-info-text-color` | `#0B0191` | `#A5B4FC` |
34
+ | `--psh-surface-card` | `var(--psh-surface-0)` | `var(--psh-surface-50)` |
35
+ | `--psh-surface-overlay` | `var(--psh-surface-0)` | `var(--psh-surface-200)` |
36
+ | `--psh-surface-border` | `var(--psh-surface-200)` | `var(--psh-surface-300)` |
37
+ | `--psh-surface-hover` | `var(--psh-surface-100)` | `rgba(255, 255, 255, 0.05)` |
38
+ | `--psh-text-color` | `var(--psh-surface-800)` | `rgba(255, 255, 255, 0.95)` |
39
+ | `--psh-text-color-secondary` | `var(--psh-surface-600)` | `rgba(255, 255, 255, 0.75)` |
40
+ | `--psh-text-color-tertiary` | `var(--psh-surface-500)` | `rgba(255, 255, 255, 0.6)` |
41
+ | `--psh-text-color-disabled` | `var(--psh-surface-400)` | `rgba(255, 255, 255, 0.4)` |
42
+ | `--psh-text-on-primary` | `#FFFFFF` | `#FFFFFF` |
43
+ | `--psh-text-on-secondary` | `#FFFFFF` | `#FFFFFF` |
44
+ | `--psh-text-on-success` | `#FFFFFF` | `#000000` |
45
+ | `--psh-text-on-warning` | `#FFFFFF` | `#000000` |
46
+ | `--psh-text-on-danger` | `#FFFFFF` | `#000000` |
47
+ | `--psh-text-on-info` | `#FFFFFF` | `#000000` |
48
+ | `--psh-text-on-neutral` | `#FFFFFF` | `#000000` |
49
+ | `--psh-text-on-surface` | `var(--psh-text-color)` | `var(--psh-text-color)` |
50
+ | `--psh-text-on-dark` | `#FFFFFF` | `#FFFFFF` |
51
+ | `--psh-text-on-light` | `#0a0d16` | `#0a0d16` |
52
+ | `--psh-blue-50` | `#EEF2FF` | `#312E81` |
53
+ | `--psh-blue-100` | `#E0E7FF` | `#3730A3` |
54
+ | `--psh-blue-200` | `#C7D2FE` | `#4338CA` |
55
+ | `--psh-blue-300` | `#A5B4FC` | `#4F46E5` |
56
+ | `--psh-blue-400` | `#818CF8` | `#6366F1` |
57
+ | `--psh-blue-500` | `#6366F1` | `#818CF8` |
58
+ | `--psh-blue-600` | `#4F46E5` | `#A5B4FC` |
59
+ | `--psh-blue-700` | `#4338CA` | `#C7D2FE` |
60
+ | `--psh-blue-800` | `#3730A3` | `#E0E7FF` |
61
+ | `--psh-blue-900` | `#312E81` | `#EEF2FF` |
62
+ | `--psh-red-50` | `#FEF2F2` | `#7F1D1D` |
63
+ | `--psh-red-100` | `#FEE2E2` | `#991B1B` |
64
+ | `--psh-red-200` | `#FECACA` | `#B91C1C` |
65
+ | `--psh-red-300` | `#FCA5A5` | `#DC2626` |
66
+ | `--psh-red-400` | `#F87171` | `#EF4444` |
67
+ | `--psh-red-500` | `#EF4444` | `#F87171` |
68
+ | `--psh-red-600` | `#DC2626` | `#FCA5A5` |
69
+ | `--psh-red-700` | `#B91C1C` | `#FECACA` |
70
+ | `--psh-red-800` | `#991B1B` | `#FEE2E2` |
71
+ | `--psh-red-900` | `#7F1D1D` | `#FEF2F2` |
72
+ | `--psh-green-50` | `#F0FDF4` | `#14532D` |
73
+ | `--psh-green-100` | `#DCFCE7` | `#166534` |
74
+ | `--psh-green-200` | `#BBF7D0` | `#15803D` |
75
+ | `--psh-green-300` | `#86EFAC` | `#16A34A` |
76
+ | `--psh-green-400` | `#4ADE80` | `#22C55E` |
77
+ | `--psh-green-500` | `#22C55E` | `#4ADE80` |
78
+ | `--psh-green-600` | `#16A34A` | `#86EFAC` |
79
+ | `--psh-green-700` | `#15803D` | `#BBF7D0` |
80
+ | `--psh-green-800` | `#166534` | `#DCFCE7` |
81
+ | `--psh-green-900` | `#14532D` | `#F0FDF4` |
82
+ | `--psh-orange-50` | `#FFF7ED` | `#7C2D12` |
83
+ | `--psh-orange-100` | `#FFEDD5` | `#9A3412` |
84
+ | `--psh-orange-200` | `#FED7AA` | `#C2410C` |
85
+ | `--psh-orange-300` | `#FDBA74` | `#EA580C` |
86
+ | `--psh-orange-400` | `#FB923C` | `#F97316` |
87
+ | `--psh-orange-500` | `#F97316` | `#FB923C` |
88
+ | `--psh-orange-600` | `#EA580C` | `#FDBA74` |
89
+ | `--psh-orange-700` | `#C2410C` | `#FED7AA` |
90
+ | `--psh-orange-800` | `#9A3412` | `#FFEDD5` |
91
+ | `--psh-orange-900` | `#7C2D12` | `#FFF7ED` |
92
+ | `--psh-yellow-50` | `#FEFCE8` | `#713F12` |
93
+ | `--psh-yellow-100` | `#FEF9C3` | `#854D0E` |
94
+ | `--psh-yellow-200` | `#FEF08A` | `#A16207` |
95
+ | `--psh-yellow-300` | `#FDE047` | `#CA8A04` |
96
+ | `--psh-yellow-400` | `#FACC15` | `#EAB308` |
97
+ | `--psh-yellow-500` | `#EAB308` | `#FACC15` |
98
+ | `--psh-yellow-600` | `#CA8A04` | `#FDE047` |
99
+ | `--psh-yellow-700` | `#A16207` | `#FEF08A` |
100
+ | `--psh-yellow-800` | `#854D0E` | `#FEF9C3` |
101
+ | `--psh-yellow-900` | `#713F12` | `#FEFCE8` |
102
+ | `--psh-violet-50` | `#F5F3FF` | `#4C1D95` |
103
+ | `--psh-violet-100` | `#EDE9FE` | `#5B21B6` |
104
+ | `--psh-violet-200` | `#DDD6FE` | `#6D28D9` |
105
+ | `--psh-violet-300` | `#C4B5FD` | `#7C3AED` |
106
+ | `--psh-violet-400` | `#A78BFA` | `#8B5CF6` |
107
+ | `--psh-violet-500` | `#8B5CF6` | `#A78BFA` |
108
+ | `--psh-violet-600` | `#7C3AED` | `#C4B5FD` |
109
+ | `--psh-violet-700` | `#6D28D9` | `#DDD6FE` |
110
+ | `--psh-violet-800` | `#5B21B6` | `#EDE9FE` |
111
+ | `--psh-violet-900` | `#4C1D95` | `#F5F3FF` |
112
+ | `--psh-cyan-50` | `#ECFEFF` | `#164E63` |
113
+ | `--psh-cyan-100` | `#CFFAFE` | `#155E75` |
114
+ | `--psh-cyan-200` | `#A5F3FC` | `#0E7490` |
115
+ | `--psh-cyan-300` | `#67E8F9` | `#0891B2` |
116
+ | `--psh-cyan-400` | `#22D3EE` | `#06B6D4` |
117
+ | `--psh-cyan-500` | `#06B6D4` | `#22D3EE` |
118
+ | `--psh-cyan-600` | `#0891B2` | `#67E8F9` |
119
+ | `--psh-cyan-700` | `#0E7490` | `#A5F3FC` |
120
+ | `--psh-cyan-800` | `#155E75` | `#CFFAFE` |
121
+ | `--psh-cyan-900` | `#164E63` | `#ECFEFF` |
122
+ | `--psh-teal-50` | `#F0FDFA` | `#134E4A` |
123
+ | `--psh-teal-100` | `#CCFBF1` | `#115E59` |
124
+ | `--psh-teal-200` | `#99F6E4` | `#0F766E` |
125
+ | `--psh-teal-300` | `#5EEAD4` | `#0D9488` |
126
+ | `--psh-teal-400` | `#2DD4BF` | `#14B8A6` |
127
+ | `--psh-teal-500` | `#14B8A6` | `#2DD4BF` |
128
+ | `--psh-teal-600` | `#0D9488` | `#5EEAD4` |
129
+ | `--psh-teal-700` | `#0F766E` | `#99F6E4` |
130
+ | `--psh-teal-800` | `#115E59` | `#CCFBF1` |
131
+ | `--psh-teal-900` | `#134E4A` | `#F0FDFA` |
132
+ | `--psh-emerald-50` | `#ECFDF5` | `#064E3B` |
133
+ | `--psh-emerald-100` | `#D1FAE5` | `#065F46` |
134
+ | `--psh-emerald-200` | `#A7F3D0` | `#047857` |
135
+ | `--psh-emerald-300` | `#6EE7B7` | `#059669` |
136
+ | `--psh-emerald-400` | `#34D399` | `#10B981` |
137
+ | `--psh-emerald-500` | `#10B981` | `#34D399` |
138
+ | `--psh-emerald-600` | `#059669` | `#6EE7B7` |
139
+ | `--psh-emerald-700` | `#047857` | `#A7F3D0` |
140
+ | `--psh-emerald-800` | `#065F46` | `#D1FAE5` |
141
+ | `--psh-emerald-900` | `#064E3B` | `#ECFDF5` |
142
+ | `--psh-indigo-50` | `#EEF2FF` | `#312E81` |
143
+ | `--psh-indigo-100` | `#E0E7FF` | `#3730A3` |
144
+ | `--psh-indigo-200` | `#C7D2FE` | `#4338CA` |
145
+ | `--psh-indigo-300` | `#A5B4FC` | `#4F46E5` |
146
+ | `--psh-indigo-400` | `#818CF8` | `#6366F1` |
147
+ | `--psh-indigo-500` | `#6366F1` | `#818CF8` |
148
+ | `--psh-indigo-600` | `#4F46E5` | `#A5B4FC` |
149
+ | `--psh-indigo-700` | `#4338CA` | `#C7D2FE` |
150
+ | `--psh-indigo-800` | `#3730A3` | `#E0E7FF` |
151
+ | `--psh-indigo-900` | `#312E81` | `#EEF2FF` |
152
+ | `--psh-purple-50` | `#FAF5FF` | `#581C87` |
153
+ | `--psh-purple-100` | `#F3E8FF` | `#6B21A8` |
154
+ | `--psh-purple-200` | `#E9D5FF` | `#7C3AED` |
155
+ | `--psh-purple-300` | `#D8B4FE` | `#9333EA` |
156
+ | `--psh-purple-400` | `#C084FC` | `#A855F7` |
157
+ | `--psh-purple-500` | `#A855F7` | `#C084FC` |
158
+ | `--psh-purple-600` | `#9333EA` | `#D8B4FE` |
159
+ | `--psh-purple-700` | `#7C3AED` | `#E9D5FF` |
160
+ | `--psh-purple-800` | `#6B21A8` | `#F3E8FF` |
161
+ | `--psh-purple-900` | `#581C87` | `#FAF5FF` |
162
+ | `--psh-fuchsia-50` | `#FDF4FF` | `#701A75` |
163
+ | `--psh-fuchsia-100` | `#FAE8FF` | `#86198F` |
164
+ | `--psh-fuchsia-200` | `#F5D0FE` | `#A21CAF` |
165
+ | `--psh-fuchsia-300` | `#F0ABFC` | `#C026D3` |
166
+ | `--psh-fuchsia-400` | `#E879F9` | `#D946EF` |
167
+ | `--psh-fuchsia-500` | `#D946EF` | `#E879F9` |
168
+ | `--psh-fuchsia-600` | `#C026D3` | `#F0ABFC` |
169
+ | `--psh-fuchsia-700` | `#A21CAF` | `#F5D0FE` |
170
+ | `--psh-fuchsia-800` | `#86198F` | `#FAE8FF` |
171
+ | `--psh-fuchsia-900` | `#701A75` | `#FDF4FF` |
172
+ | `--psh-rose-50` | `#FFF1F2` | `#881337` |
173
+ | `--psh-rose-100` | `#FFE4E6` | `#9F1239` |
174
+ | `--psh-rose-200` | `#FECDD3` | `#BE123C` |
175
+ | `--psh-rose-300` | `#FDA4AF` | `#E11D48` |
176
+ | `--psh-rose-400` | `#FB7185` | `#F43F5E` |
177
+ | `--psh-rose-500` | `#F43F5E` | `#FB7185` |
178
+ | `--psh-rose-600` | `#E11D48` | `#FDA4AF` |
179
+ | `--psh-rose-700` | `#BE123C` | `#FECDD3` |
180
+ | `--psh-rose-800` | `#9F1239` | `#FFE4E6` |
181
+ | `--psh-rose-900` | `#881337` | `#FFF1F2` |
182
+ | `--psh-amber-50` | `#FFFBEB` | `#78350F` |
183
+ | `--psh-amber-100` | `#FEF3C7` | `#92400E` |
184
+ | `--psh-amber-200` | `#FDE68A` | `#B45309` |
185
+ | `--psh-amber-300` | `#FCD34D` | `#D97706` |
186
+ | `--psh-amber-400` | `#FBBF24` | `#F59E0B` |
187
+ | `--psh-amber-500` | `#F59E0B` | `#FBBF24` |
188
+ | `--psh-amber-600` | `#D97706` | `#FCD34D` |
189
+ | `--psh-amber-700` | `#B45309` | `#FDE68A` |
190
+ | `--psh-amber-800` | `#92400E` | `#FEF3C7` |
191
+ | `--psh-amber-900` | `#78350F` | `#FFFBEB` |
192
+ | `--psh-pink-50` | `#FDF2F8` | `#831843` |
193
+ | `--psh-pink-100` | `#FCE7F3` | `#9D174D` |
194
+ | `--psh-pink-200` | `#FBCFE8` | `#BE185D` |
195
+ | `--psh-pink-300` | `#F9A8D4` | `#DB2777` |
196
+ | `--psh-pink-400` | `#F472B6` | `#EC4899` |
197
+ | `--psh-pink-500` | `#EC4899` | `#F472B6` |
198
+ | `--psh-pink-600` | `#DB2777` | `#F9A8D4` |
199
+ | `--psh-pink-700` | `#BE185D` | `#FBCFE8` |
200
+ | `--psh-pink-800` | `#9D174D` | `#FCE7F3` |
201
+ | `--psh-pink-900` | `#831843` | `#FDF2F8` |
202
+ | `--psh-primary-color` | `var(--psh-customer-primary-color, var(--customer-primary-color, #0B0191))` | `var(--psh-customer-primary-color, var(--customer-primary-color, #8178F7))` |
203
+ | `--psh-primary-color-light` | `var(--psh-customer-primary-color-light, var(--customer-primary-color-light, #0F02C4))` | `var(--psh-customer-primary-color-light, var(--customer-primary-color-light, #8A7FED))` |
204
+ | `--psh-primary-color-lighter` | `var(--psh-customer-primary-color-lighter, var(--customer-primary-color-lighter, #4A3FD9))` | `var(--psh-customer-primary-color-lighter, var(--customer-primary-color-lighter, #A99FF7))` |
205
+ | `--psh-primary-color-dark` | `var(--psh-customer-primary-color-dark, var(--customer-primary-color-dark, #09017A))` | `var(--psh-customer-primary-color-dark, var(--customer-primary-color-dark, #4A3FD9))` |
206
+ | `--psh-primary-color-darker` | `var(--psh-customer-primary-color-darker, var(--customer-primary-color-darker, #07015E))` | `var(--psh-customer-primary-color-darker, var(--customer-primary-color-darker, #3730A3))` |
207
+ | `--psh-primary-color-text` | `var(--psh-customer-primary-color-text, var(--customer-primary-color-text, #FFFFFF))` | `var(--psh-customer-primary-color-text, var(--customer-primary-color-text, #FFFFFF))` |
208
+ | `--psh-primary-color-rgb` | `var(--psh-customer-primary-color-rgb, var(--customer-primary-color-rgb, 11, 1, 145))` | `var(--psh-customer-primary-color-rgb, var(--customer-primary-color-rgb, 107, 95, 227))` |
209
+ | `--psh-primary-gradient` | `linear-gradient(to right, var(--psh-primary-color-darker), var(--psh-primary-color-light))` | `linear-gradient(to right, var(--psh-primary-color), var(--psh-primary-color-light))` |
210
+ | `--psh-primary-gradient-hover` | `linear-gradient(to right, var(--psh-primary-color-dark), var(--psh-primary-color-lighter))` | `linear-gradient(to right, var(--psh-primary-color), var(--psh-primary-color-lighter))` |
211
+ | `--psh-primary-gradient-reversed` | `linear-gradient(to left, var(--psh-primary-color-darker), var(--psh-primary-color-light))` | `linear-gradient(to left, var(--psh-primary-color-dark), var(--psh-primary-color-light))` |
212
+ | `--psh-secondary-color` | `var(--psh-customer-secondary-color, var(--customer-secondary-color, #5E5E5E))` | `var(--psh-customer-secondary-color, var(--customer-secondary-color, #5B5A5A))` |
213
+ | `--psh-secondary-color-light` | `var(--psh-customer-secondary-color-light, var(--customer-secondary-color-light, #7B7B7B))` | `var(--psh-customer-secondary-color-light, var(--customer-secondary-color-light, #838181))` |
214
+ | `--psh-secondary-color-lighter` | `var(--psh-customer-secondary-color-lighter, var(--customer-secondary-color-lighter, #969696))` | `var(--psh-customer-secondary-color-lighter, var(--customer-secondary-color-lighter, #9E9D9D))` |
215
+ | `--psh-secondary-color-dark` | `var(--psh-customer-secondary-color-dark, var(--customer-secondary-color-dark, #404040))` | `var(--psh-customer-secondary-color-dark, var(--customer-secondary-color-dark, #4E4D4D))` |
216
+ | `--psh-secondary-color-darker` | `var(--psh-customer-secondary-color-darker, var(--customer-secondary-color-darker, #2B2B2B))` | `var(--psh-customer-secondary-color-darker, var(--customer-secondary-color-darker, #3D3838))` |
217
+ | `--psh-secondary-color-text` | `var(--psh-customer-secondary-color-text, var(--customer-secondary-color-text, #FFFFFF))` | `var(--psh-customer-secondary-color-text, var(--customer-secondary-color-text, #FFFFFF))` |
218
+ | `--psh-secondary-color-rgb` | `var(--psh-customer-secondary-color-rgb, var(--customer-secondary-color-rgb, 94, 94, 94))` | `var(--psh-customer-secondary-color-rgb, var(--customer-secondary-color-rgb, 48, 48, 48))` |
219
+ | `--psh-success-color` | `#0F853A` | `#12B94F` |
220
+ | `--psh-success-color-rgb` | `15, 133, 58` | `18, 185, 79` |
221
+ | `--psh-success-color-text` | `#FFFFFF` | `#000000` |
222
+ | `--psh-info-color` | `#1F5FBF` | `#5B9BFF` |
223
+ | `--psh-info-color-rgb` | `31, 95, 191` | `91, 155, 255` |
224
+ | `--psh-info-color-text` | `#FFFFFF` | `#000000` |
225
+ | `--psh-neutral-color` | `#5A6070` | `#9AA0B0` |
226
+ | `--psh-neutral-color-rgb` | `90, 96, 112` | `154, 160, 176` |
227
+ | `--psh-neutral-color-text` | `#FFFFFF` | `#000000` |
228
+ | `--psh-warning-color` | `#b25310` | `#E07518` |
229
+ | `--psh-warning-color-rgb` | `178, 83, 16` | `224, 117, 24` |
230
+ | `--psh-warning-color-text` | `#FFFFFF` | `#000000` |
231
+ | `--psh-danger-color` | `#D92626` | `#FF4040` |
232
+ | `--psh-danger-color-rgb` | `217, 38, 38` | `255, 64, 64` |
233
+ | `--psh-danger-color-text` | `#FFFFFF` | `#000000` |
234
+ | `--psh-chart-text-color` | `var(--psh-text-color)` | `var(--psh-text-color)` |
235
+ | `--psh-chart-grid-color` | `var(--psh-surface-200)` | `var(--psh-surface-border)` |
236
+ | `--psh-chart-primary-color` | `var(--psh-primary-color)` | `var(--psh-primary-color)` |
237
+ | `--psh-chart-secondary-color` | `var(--psh-secondary-color)` | `var(--psh-secondary-color)` |
238
+ | `--psh-chart-success-color` | `var(--psh-success-color)` | `var(--psh-success-color)` |
239
+ | `--psh-chart-warning-color` | `var(--psh-warning-color)` | `var(--psh-warning-color)` |
240
+ | `--psh-chart-danger-color` | `var(--psh-danger-color)` | `var(--psh-danger-color)` |
241
+ | `--psh-chart-tooltip-background` | `var(--psh-surface-card)` | `var(--psh-surface-card)` |
242
+ | `--psh-chart-tooltip-text` | `var(--psh-text-color)` | `var(--psh-text-color)` |
243
+ | `--psh-chart-legend-text` | `var(--psh-text-color)` | `var(--psh-text-color)` |
244
+ | `--psh-background-opacity` | `0.5` | `0.3` |
245
+ | `--psh-body-gradient` | `radial-gradient(184.52% 111.8% at 100% 0%, #E0E4F7 0%, rgba(255, 255, 255, 0.00) 100%)` | `radial-gradient(325.86% 141.42% at 100% 0%, #1A1F33 0%, #0A0D16 100%)` |
246
+
247
+ ## Motion
248
+
249
+ | Token | Value | |
250
+ |---|---|---|
251
+ | `--psh-animation-duration-fast` | `0.15s` | |
252
+ | `--psh-animation-duration-normal` | `0.2s` | |
253
+ | `--psh-animation-duration-default` | `0.3s` | |
254
+ | `--psh-animation-duration-slow` | `0.5s` | |
255
+ | `--psh-animation-easing-default` | `ease` | |
256
+ | `--psh-animation-easing-in` | `ease-in` | |
257
+ | `--psh-animation-easing-out` | `ease-out` | |
258
+ | `--psh-animation-easing-in-out` | `ease-in-out` | |
259
+ | `--psh-animation-easing-smooth` | `cubic-bezier(0.4, 0, 0.2, 1)` | |
260
+ | `--psh-animation-easing-linear` | `linear` | |
261
+ | `--psh-animation-loop-fast` | `0.8s` | |
262
+ | `--psh-animation-loop-normal` | `1s` | |
263
+ | `--psh-animation-loop-slow` | `1.5s` | |
264
+ | `--psh-animation-loop-slower` | `2s` | |
265
+ | `--psh-animation-distance-sm` | `10px` | |
266
+ | `--psh-animation-distance-md` | `20px` | |
267
+ | `--psh-animation-distance-lg` | `30px` | |
268
+
269
+ ## Breakpoints
270
+
271
+ | Token | Value | |
272
+ |---|---|---|
273
+ | `--psh-breakpoint-xs` | `30em` | 480px |
274
+ | `--psh-breakpoint-sm` | `40em` | 640px |
275
+ | `--psh-breakpoint-md` | `48em` | 768px |
276
+ | `--psh-breakpoint-lg` | `64em` | 1024px |
277
+ | `--psh-breakpoint-xl` | `80em` | 1280px |
278
+ | `--psh-breakpoint-2xl` | `96em` | 1536px |
279
+
280
+ ## Shadows, focus rings and z-index layers
281
+
282
+ | Token | Value | |
283
+ |---|---|---|
284
+ | `--psh-shadow-sm` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` | |
285
+ | `--psh-shadow-md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)` | |
286
+ | `--psh-shadow-lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)` | |
287
+ | `--psh-z-index-navigation` | `50` | |
288
+ | `--psh-z-index-dropdown` | `100` | |
289
+ | `--psh-z-index-tooltip` | `200` | |
290
+ | `--psh-z-index-modal-backdrop` | `999` | |
291
+ | `--psh-z-index-modal` | `1000` | |
292
+ | `--psh-z-index-overlay` | `1100` | body-teleported popovers (select/dropdown/menu) above modals |
293
+ | `--psh-z-index-toast` | `9999` | |
294
+ | `--psh-focus-outline-width` | `2px` | |
295
+ | `--psh-focus-outline-style` | `solid` | |
296
+ | `--psh-focus-outline-color` | `var(--psh-primary-color)` | |
297
+ | `--psh-focus-outline-offset` | `2px` | |
298
+ | `--psh-focus-ring-width` | `3px` | |
299
+ | `--psh-focus-ring-color` | `rgba(var(--psh-primary-color-rgb), 0.2)` | |
300
+ | `--psh-focus-ring-error` | `rgba(var(--psh-danger-color-rgb), 0.2)` | |
301
+ | `--psh-focus-ring-success` | `rgba(var(--psh-success-color-rgb), 0.2)` | |
302
+ | `--psh-focus-ring-warning` | `rgba(var(--psh-warning-color-rgb), 0.2)` | |
303
+ | `--psh-opacity-disabled` | `0.6` | |
304
+ | `--psh-opacity-loading` | `0.7` | |
305
+
306
+ ## Layout
307
+
308
+ | Token | Value | |
309
+ |---|---|---|
310
+ | `--psh-container-padding-sm` | `var(--psh-spacing-md)` | |
311
+ | `--psh-container-padding-md` | `var(--psh-spacing-lg)` | |
312
+ | `--psh-container-padding-lg` | `var(--psh-spacing-xl)` | |
313
+ | `--psh-container-max-width` | `80rem` | 1280px |
314
+ | `--psh-grid-gap-sm` | `var(--psh-spacing-sm)` | |
315
+ | `--psh-grid-gap-md` | `var(--psh-spacing-md)` | |
316
+ | `--psh-grid-gap-lg` | `var(--psh-spacing-lg)` | |
317
+ | `--psh-flex-none` | `0 0 auto` | |
318
+ | `--psh-flex-auto` | `1 1 auto` | |
319
+ | `--psh-flex-initial` | `0 1 auto` | |
320
+ | `--psh-grid-cols-1` | `repeat(1, minmax(0, 1fr))` | |
321
+ | `--psh-grid-cols-2` | `repeat(2, minmax(0, 1fr))` | |
322
+ | `--psh-grid-cols-3` | `repeat(3, minmax(0, 1fr))` | |
323
+ | `--psh-grid-cols-4` | `repeat(4, minmax(0, 1fr))` | |
324
+ | `--psh-grid-cols-6` | `repeat(6, minmax(0, 1fr))` | |
325
+ | `--psh-grid-cols-12` | `repeat(12, minmax(0, 1fr))` | |
326
+ | `--psh-select-max-width` | `var(--psh-container-sm)` | |
327
+ | `--psh-dropdown-max-height` | `var(--psh-size-52)` | |
328
+ | `--psh-select-checkbox-size` | `var(--psh-size-4-5)` | |
329
+
330
+ ## Sizing, radii and control heights
331
+
332
+ | Token | Value | |
333
+ |---|---|---|
334
+ | `--psh-size-0` | `0` | |
335
+ | `--psh-size-px` | `0.0625rem` | 1px |
336
+ | `--psh-size-0-5` | `0.125rem` | 2px |
337
+ | `--psh-size-1` | `0.25rem` | 4px |
338
+ | `--psh-size-1-5` | `0.375rem` | 6px |
339
+ | `--psh-size-2` | `0.5rem` | 8px |
340
+ | `--psh-size-2-5` | `0.625rem` | 10px |
341
+ | `--psh-size-3` | `0.75rem` | 12px |
342
+ | `--psh-size-3-5` | `0.875rem` | 14px |
343
+ | `--psh-size-4` | `1rem` | 16px |
344
+ | `--psh-size-4-5` | `1.125rem` | 18px |
345
+ | `--psh-size-5` | `1.25rem` | 20px |
346
+ | `--psh-size-5-5` | `1.375rem` | 22px |
347
+ | `--psh-size-6` | `1.5rem` | 24px |
348
+ | `--psh-size-6-5` | `1.625rem` | 26px |
349
+ | `--psh-size-7` | `1.75rem` | 28px |
350
+ | `--psh-size-8` | `2rem` | 32px |
351
+ | `--psh-size-8-5` | `2.125rem` | 34px |
352
+ | `--psh-size-9` | `2.25rem` | 36px |
353
+ | `--psh-size-10` | `2.5rem` | 40px |
354
+ | `--psh-size-11` | `2.75rem` | 44px |
355
+ | `--psh-size-12` | `3rem` | 48px |
356
+ | `--psh-size-14` | `3.5rem` | 56px |
357
+ | `--psh-size-16` | `4rem` | 64px |
358
+ | `--psh-size-18` | `4.5rem` | 72px |
359
+ | `--psh-size-20` | `5rem` | 80px |
360
+ | `--psh-size-24` | `6rem` | 96px |
361
+ | `--psh-size-28` | `7rem` | 112px |
362
+ | `--psh-size-32` | `8rem` | 128px |
363
+ | `--psh-size-36` | `9rem` | 144px |
364
+ | `--psh-size-40` | `10rem` | 160px |
365
+ | `--psh-size-44` | `11rem` | 176px |
366
+ | `--psh-size-48` | `12rem` | 192px |
367
+ | `--psh-size-52` | `13rem` | 208px |
368
+ | `--psh-size-56` | `14rem` | 224px |
369
+ | `--psh-size-60` | `15rem` | 240px |
370
+ | `--psh-size-64` | `16rem` | 256px |
371
+ | `--psh-size-72` | `18rem` | 288px |
372
+ | `--psh-size-80` | `20rem` | 320px |
373
+ | `--psh-size-96` | `24rem` | 384px |
374
+ | `--psh-icon-size-xs` | `0.75rem` | 12px |
375
+ | `--psh-icon-size-sm` | `1rem` | 16px |
376
+ | `--psh-icon-size-md` | `1.25rem` | 20px |
377
+ | `--psh-icon-size-lg` | `1.5rem` | 24px |
378
+ | `--psh-icon-size-xl` | `2rem` | 32px |
379
+ | `--psh-icon-size-2xl` | `3rem` | 48px |
380
+ | `--psh-border-width-0` | `0` | |
381
+ | `--psh-border-width-1` | `1px` | |
382
+ | `--psh-border-width-2` | `2px` | |
383
+ | `--psh-border-width-4` | `4px` | |
384
+ | `--psh-border-width-8` | `8px` | |
385
+ | `--psh-radius-none` | `0` | |
386
+ | `--psh-radius-sm` | `0.125rem` | 2px |
387
+ | `--psh-radius-base` | `0.25rem` | 4px |
388
+ | `--psh-radius-md` | `0.375rem` | 6px |
389
+ | `--psh-radius-lg` | `0.5rem` | 8px |
390
+ | `--psh-radius-xl` | `0.75rem` | 12px |
391
+ | `--psh-radius-2xl` | `1rem` | 16px |
392
+ | `--psh-radius-3xl` | `1.5rem` | 24px |
393
+ | `--psh-radius-full` | `9999px` | |
394
+ | `--psh-container-xs` | `20rem` | 320px |
395
+ | `--psh-container-sm` | `24rem` | 384px |
396
+ | `--psh-container-md` | `28rem` | 448px |
397
+ | `--psh-container-lg` | `32rem` | 512px |
398
+ | `--psh-container-xl` | `36rem` | 576px |
399
+ | `--psh-container-2xl` | `42rem` | 672px |
400
+ | `--psh-container-3xl` | `48rem` | 768px |
401
+ | `--psh-container-4xl` | `56rem` | 896px |
402
+ | `--psh-container-5xl` | `64rem` | 1024px |
403
+ | `--psh-container-6xl` | `72rem` | 1152px |
404
+ | `--psh-container-7xl` | `80rem` | 1280px |
405
+ | `--psh-control-height-sm` | `2rem` | 32px |
406
+ | `--psh-control-height-md` | `2.5rem` | 40px |
407
+ | `--psh-control-height-lg` | `3rem` | 48px |
408
+ | `--psh-touch-target-min` | `2.75rem` | 44px |
409
+ | `--psh-scrollbar-width` | `0` | |
410
+
411
+ ## Spacing
412
+
413
+ | Token | Value | |
414
+ |---|---|---|
415
+ | `--psh-spacing-xxs` | `0.125rem` | 2px |
416
+ | `--psh-spacing-xs` | `0.25rem` | 4px |
417
+ | `--psh-spacing-sm` | `0.5rem` | 8px |
418
+ | `--psh-spacing-md` | `1rem` | 16px |
419
+ | `--psh-spacing-lg` | `1.5rem` | 24px |
420
+ | `--psh-spacing-xl` | `2rem` | 32px |
421
+ | `--psh-spacing-2xl` | `3rem` | 48px |
422
+ | `--psh-spacing-3xl` | `4rem` | 64px |
423
+ | `--psh-spacing-4xl` | `5rem` | 80px |
424
+ | `--psh-form-field-gap` | `var(--psh-spacing-xs)` | label <-> control <-> message |
425
+ | `--psh-form-label-gap` | `var(--psh-spacing-sm)` | control <-> inline label (checkbox/radio/switch) |
426
+ | `--psh-negative-spacing-xxs` | `-0.125rem` | |
427
+ | `--psh-negative-spacing-xs` | `-0.25rem` | |
428
+ | `--psh-negative-spacing-sm` | `-0.5rem` | |
429
+ | `--psh-negative-spacing-md` | `-1rem` | |
430
+ | `--psh-negative-spacing-lg` | `-1.5rem` | |
431
+ | `--psh-negative-spacing-xl` | `-2rem` | |
432
+ | `--psh-negative-spacing-2xl` | `-3rem` | |
433
+
434
+ ## Typography
435
+
436
+ | Token | Value | |
437
+ |---|---|---|
438
+ | `--psh-font-family` | `'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif` | |
439
+ | `--psh-font-size-xs` | `clamp(0.6875rem, 0.5vw + 0.625rem, 0.75rem)` | 11-12px |
440
+ | `--psh-font-size-sm` | `clamp(0.8125rem, 0.5vw + 0.75rem, 0.875rem)` | 13-14px |
441
+ | `--psh-font-size-base` | `clamp(0.9375rem, 0.5vw + 0.875rem, 1rem)` | 15-16px |
442
+ | `--psh-font-size-lg` | `clamp(1.0625rem, 0.75vw + 0.9375rem, 1.125rem)` | 17-18px |
443
+ | `--psh-font-size-xl` | `clamp(1.125rem, 1vw + 1rem, 1.25rem)` | 18-20px |
444
+ | `--psh-font-size-2xl` | `clamp(1.25rem, 1.5vw + 1rem, 1.5rem)` | 20-24px |
445
+ | `--psh-font-size-3xl` | `clamp(1.5rem, 2vw + 1.125rem, 1.875rem)` | 24-30px |
446
+ | `--psh-font-size-4xl` | `clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem)` | 28-36px |
447
+ | `--psh-font-weight-normal` | `400` | |
448
+ | `--psh-font-weight-medium` | `500` | |
449
+ | `--psh-font-weight-semibold` | `600` | |
450
+ | `--psh-font-weight-bold` | `700` | |
451
+ | `--psh-line-height-tight` | `1.25` | |
452
+ | `--psh-line-height-normal` | `1.5` | |
453
+ | `--psh-line-height-relaxed` | `1.75` | |
454
+ | `--psh-letter-spacing-tight` | `-0.025em` | |
455
+ | `--psh-letter-spacing-normal` | `0` | |
456
+ | `--psh-letter-spacing-wide` | `0.025em` | |
457
+ | `--psh-letter-spacing-wider` | `0.05em` | |
458
+ | `--psh-letter-spacing-widest` | `0.1em` | |
459
+
460
+ ## Component CSS API
461
+
462
+ 96 properties across 19 components. Set any of them on the
463
+ component element to restyle it without reaching inside:
464
+
465
+ ```css
466
+ psh-button { --psh-btn-min-width-md: 10rem; }
467
+ ```
468
+
469
+ They are read with their default as the `var()` fallback rather than declared on
470
+ `:host`. A declaration would outrank a plain `psh-button { … }` rule from a global
471
+ stylesheet and quietly beat the override; a fallback has no specificity to fight.
472
+
473
+ ### `psh-alert`
474
+
475
+ | Property | Default |
476
+ |---|---|
477
+ | `--psh-alert-actions-gap` | `var(--psh-spacing-sm` |
478
+ | `--psh-alert-animation-distance` | `var(--psh-animation-distance-sm` |
479
+ | `--psh-alert-animation-duration` | `var(--psh-animation-duration-fast` |
480
+ | `--psh-alert-dismiss-hover-bg` | `rgba(0, 0, 0, 0.1` |
481
+ | `--psh-alert-icon-size` | `var(--psh-icon-size-md` |
482
+ | `--psh-alert-icon-size-lg` | `var(--psh-icon-size-lg` |
483
+ | `--psh-alert-icon-size-sm` | `var(--psh-icon-size-sm` |
484
+
485
+ ### `psh-avatar`
486
+
487
+ | Property | Default |
488
+ |---|---|
489
+ | `--psh-avatar-icon-size-lg` | `var(--psh-icon-size-lg` |
490
+ | `--psh-avatar-icon-size-sm` | `var(--psh-icon-size-sm` |
491
+ | `--psh-avatar-icon-size-xl` | `var(--psh-icon-size-xl` |
492
+ | `--psh-avatar-size-lg` | `var(--psh-size-12` |
493
+ | `--psh-avatar-size-md` | `var(--psh-size-10` |
494
+ | `--psh-avatar-size-sm` | `var(--psh-size-8` |
495
+ | `--psh-avatar-size-xl` | `var(--psh-size-16` |
496
+ | `--psh-avatar-status-border` | `var(--psh-border-width-2` |
497
+ | `--psh-avatar-status-offset-md` | `calc(-1 * var(--psh-border-width-2` |
498
+ | `--psh-avatar-status-offset-sm` | `calc(-1 * var(--psh-size-px` |
499
+ | `--psh-avatar-status-offset-xl` | `calc(-1 * var(--psh-size-1` |
500
+ | `--psh-avatar-status-size-lg` | `var(--psh-size-3-5` |
501
+ | `--psh-avatar-status-size-md` | `var(--psh-size-3` |
502
+ | `--psh-avatar-status-size-sm` | `var(--psh-size-2-5` |
503
+ | `--psh-avatar-status-size-xl` | `var(--psh-size-4` |
504
+ | `--psh-focus-ring-offset` | `2px` |
505
+
506
+ ### `psh-badge`
507
+
508
+ | Property | Default |
509
+ |---|---|
510
+ | `--psh-badge-dot-shadow` | `0 0 0 var(--psh-border-width-2` |
511
+ | `--psh-badge-height` | `var(--psh-size-5` |
512
+ | `--psh-badge-height-lg` | `var(--psh-size-6` |
513
+ | `--psh-badge-height-sm` | `var(--psh-size-4` |
514
+ | `--psh-badge-width` | `var(--psh-size-5` |
515
+ | `--psh-badge-width-lg` | `var(--psh-size-6` |
516
+ | `--psh-badge-width-sm` | `var(--psh-size-4` |
517
+
518
+ ### `psh-button`
519
+
520
+ | Property | Default |
521
+ |---|---|
522
+ | `--psh-btn-font-weight` | `500` |
523
+ | `--psh-btn-min-width-icon-only` | `2.5rem` |
524
+ | `--psh-btn-min-width-lg` | `8.75rem` |
525
+ | `--psh-btn-min-width-md` | `7.5rem` |
526
+ | `--psh-btn-min-width-sm` | `6rem` |
527
+ | `--psh-btn-transition` | `all var(--psh-animation-duration-normal) var(--psh-animation-easing-default` |
528
+
529
+ ### `psh-card`
530
+
531
+ | Property | Default |
532
+ |---|---|
533
+ | `--psh-card-actions-padding` | `var(--psh-card-density-actions-padding` |
534
+ | `--psh-card-body-gap` | `var(--psh-card-density-body-gap` |
535
+ | `--psh-card-body-padding` | `var(--psh-card-density-body-padding` |
536
+ | `--psh-card-footer-padding` | `var(--psh-card-density-footer-padding` |
537
+ | `--psh-card-header-gap` | `var(--psh-card-density-header-gap` |
538
+ | `--psh-card-header-padding` | `var(--psh-card-density-header-padding` |
539
+
540
+ ### `psh-collapse`
541
+
542
+ | Property | Default |
543
+ |---|---|
544
+ | `--psh-collapse-transition-duration` | `var(--psh-animation-duration-default` |
545
+ | `--psh-collapse-transition-timing` | `var(--psh-animation-easing-smooth` |
546
+
547
+ ### `psh-dropdown`
548
+
549
+ | Property | Default |
550
+ |---|---|
551
+ | `--psh-dropdown-max-width` | `calc(100vw - var(--psh-spacing-lg) * 2` |
552
+ | `--psh-dropdown-min-width` | `12.5rem` |
553
+
554
+ ### `psh-horizontal-card`
555
+
556
+ | Property | Default |
557
+ |---|---|
558
+ | `--psh-horizontal-content-padding` | `var(--psh-spacing-md` |
559
+ | `--psh-horizontal-gap` | `var(--psh-spacing-md` |
560
+ | `--psh-horizontal-mobile-height` | `var(--psh-size-48` |
561
+ | `--psh-horizontal-side-width` | `var(--psh-size-48` |
562
+
563
+ ### `psh-input`
564
+
565
+ | Property | Default |
566
+ |---|---|
567
+ | `--psh-input-max-width` | `18.75rem` |
568
+
569
+ ### `psh-modal`
570
+
571
+ | Property | Default |
572
+ |---|---|
573
+ | `--psh-modal-animation-distance` | `20px` |
574
+ | `--psh-modal-animation-scale` | `0.95` |
575
+ | `--psh-modal-backdrop-blur` | `4px` |
576
+ | `--psh-modal-backdrop-opacity` | `0.6` |
577
+ | `--psh-modal-max-width-lg` | `50rem` |
578
+ | `--psh-modal-max-width-md` | `37.5rem` |
579
+ | `--psh-modal-max-width-sm` | `25rem` |
580
+
581
+ ### `psh-progressbar`
582
+
583
+ | Property | Default |
584
+ |---|---|
585
+ | `--psh-progressbar-height-lg` | `var(--psh-size-3` |
586
+ | `--psh-progressbar-height-md` | `var(--psh-size-2` |
587
+ | `--psh-progressbar-height-sm` | `var(--psh-size-1` |
588
+ | `--psh-progressbar-stripe-opacity` | `0.15` |
589
+
590
+ ### `psh-radio-group`
591
+
592
+ | Property | Default |
593
+ |---|---|
594
+ | `--psh-radio-group-disabled-opacity` | `0.6` |
595
+ | `--psh-radio-group-gap` | `var(--psh-spacing-sm` |
596
+ | `--psh-radio-group-gap-horizontal` | `var(--psh-spacing-lg` |
597
+ | `--psh-radio-group-label-gap` | `var(--psh-spacing-xs` |
598
+ | `--psh-radio-group-message-gap` | `var(--psh-spacing-xs` |
599
+
600
+ ### `psh-select`
601
+
602
+ | Property | Default |
603
+ |---|---|
604
+ | `--psh-select-panel-max-height` | `15rem` |
605
+
606
+ ### `psh-sidebar`
607
+
608
+ | Property | Default |
609
+ |---|---|
610
+ | `--psh-sidebar-width` | `250px` |
611
+
612
+ ### `psh-spinloader`
613
+
614
+ | Property | Default |
615
+ |---|---|
616
+ | `--psh-spinner-dot-size-lg` | `var(--psh-size-3` |
617
+ | `--psh-spinner-dot-size-md` | `var(--psh-size-2` |
618
+ | `--psh-spinner-dot-size-sm` | `var(--psh-size-1-5` |
619
+ | `--psh-spinner-pulse-height-lg` | `var(--psh-size-12` |
620
+ | `--psh-spinner-pulse-height-md` | `var(--psh-size-8` |
621
+ | `--psh-spinner-pulse-height-sm` | `var(--psh-size-6` |
622
+ | `--psh-spinner-pulse-width-lg` | `var(--psh-size-3` |
623
+ | `--psh-spinner-pulse-width-md` | `var(--psh-size-2` |
624
+ | `--psh-spinner-pulse-width-sm` | `var(--psh-size-1-5` |
625
+ | `--psh-spinner-size-lg` | `var(--psh-size-12` |
626
+ | `--psh-spinner-size-md` | `var(--psh-size-8` |
627
+ | `--psh-spinner-size-sm` | `var(--psh-size-6` |
628
+
629
+ ### `psh-state-flow-indicator`
630
+
631
+ | Property | Default |
632
+ |---|---|
633
+ | `--psh-flow-panel-gap` | `var(--psh-spacing-lg` |
634
+
635
+ ### `psh-tag`
636
+
637
+ | Property | Default |
638
+ |---|---|
639
+ | `--psh-tag-close-hover-bg` | `rgba(0, 0, 0, 0.1` |
640
+ | `--psh-tag-close-opacity` | `0.7` |
641
+ | `--psh-tag-close-opacity-hover` | `1` |
642
+ | `--psh-tag-close-padding` | `var(--psh-spacing-xxs` |
643
+ | `--psh-tag-font-size` | `var(--psh-font-size-sm` |
644
+ | `--psh-tag-icon-size` | `var(--psh-icon-size-sm` |
645
+ | `--psh-tag-padding-x` | `var(--psh-spacing-sm` |
646
+ | `--psh-tag-padding-y` | `var(--psh-spacing-xs` |
647
+ | `--psh-tag-transition` | `all var(--psh-animation-duration-normal) var(--psh-animation-easing-default` |
648
+
649
+ ### `psh-textarea`
650
+
651
+ | Property | Default |
652
+ |---|---|
653
+ | `--psh-textarea-max-width` | `32rem` |
654
+
655
+ ### `psh-toast`
656
+
657
+ | Property | Default |
658
+ |---|---|
659
+ | `--psh-toast-icon-size` | `1.5rem` |
660
+ | `--psh-toast-max-width` | `31.25rem` |
661
+ | `--psh-toast-min-width` | `18.75rem` |
662
+ | `--psh-toast-progress-height` | `3px` |