ps-helix 6.2.4 → 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 +7715 -5651
  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 +3252 -1724
package/src/lib/styles/utilities/responsive.utils.css CHANGED
@@ -7,22 +7,22 @@
7
7
  width: 100%;
8
8
  margin-left: auto;
9
9
  margin-right: auto;
10
- padding-left: var(--container-padding-sm);
11
- padding-right: var(--container-padding-sm);
12
- max-width: var(--container-max-width);
10
+ padding-left: var(--psh-container-padding-sm);
11
+ padding-right: var(--psh-container-padding-sm);
12
+ max-width: var(--psh-container-max-width);
13
13
  }
14
14
 
15
15
  @media (min-width: 40em) {
16
16
  .psh-container {
17
- padding-left: var(--container-padding-md);
18
- padding-right: var(--container-padding-md);
17
+ padding-left: var(--psh-container-padding-md);
18
+ padding-right: var(--psh-container-padding-md);
19
19
  }
20
20
  }
21
21
 
22
22
  @media (min-width: 64em) {
23
23
  .psh-container {
24
- padding-left: var(--container-padding-lg);
25
- padding-right: var(--container-padding-lg);
24
+ padding-left: var(--psh-container-padding-lg);
25
+ padding-right: var(--psh-container-padding-lg);
26
26
  }
27
27
  }
28
28
 
@@ -78,67 +78,67 @@
78
78
 
79
79
  /* Responsive grid utilities */
80
80
  @media (min-width: 40em) {
81
- .psh-sm\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
82
- .psh-sm\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
83
- .psh-sm\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
81
+ .psh-sm\:grid-cols-1 { grid-template-columns: var(--psh-grid-cols-1); }
82
+ .psh-sm\:grid-cols-2 { grid-template-columns: var(--psh-grid-cols-2); }
83
+ .psh-sm\:grid-cols-3 { grid-template-columns: var(--psh-grid-cols-3); }
84
84
  }
85
85
 
86
86
  @media (min-width: 48em) {
87
- .psh-md\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
88
- .psh-md\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
89
- .psh-md\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
90
- .psh-md\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
87
+ .psh-md\:grid-cols-1 { grid-template-columns: var(--psh-grid-cols-1); }
88
+ .psh-md\:grid-cols-2 { grid-template-columns: var(--psh-grid-cols-2); }
89
+ .psh-md\:grid-cols-3 { grid-template-columns: var(--psh-grid-cols-3); }
90
+ .psh-md\:grid-cols-4 { grid-template-columns: var(--psh-grid-cols-4); }
91
91
  }
92
92
 
93
93
  @media (min-width: 64em) {
94
- .psh-lg\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
95
- .psh-lg\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
96
- .psh-lg\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
97
- .psh-lg\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
98
- .psh-lg\:grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
94
+ .psh-lg\:grid-cols-1 { grid-template-columns: var(--psh-grid-cols-1); }
95
+ .psh-lg\:grid-cols-2 { grid-template-columns: var(--psh-grid-cols-2); }
96
+ .psh-lg\:grid-cols-3 { grid-template-columns: var(--psh-grid-cols-3); }
97
+ .psh-lg\:grid-cols-4 { grid-template-columns: var(--psh-grid-cols-4); }
98
+ .psh-lg\:grid-cols-6 { grid-template-columns: var(--psh-grid-cols-6); }
99
99
  }
100
100
 
101
101
  /* Responsive spacing utilities */
102
102
  @media (min-width: 40em) {
103
103
  .psh-sm\:p-0 { padding: 0; }
104
- .psh-sm\:p-sm { padding: var(--spacing-sm); }
105
- .psh-sm\:p-md { padding: var(--spacing-md); }
106
- .psh-sm\:p-lg { padding: var(--spacing-lg); }
107
- .psh-sm\:p-xl { padding: var(--spacing-xl); }
104
+ .psh-sm\:p-sm { padding: var(--psh-spacing-sm); }
105
+ .psh-sm\:p-md { padding: var(--psh-spacing-md); }
106
+ .psh-sm\:p-lg { padding: var(--psh-spacing-lg); }
107
+ .psh-sm\:p-xl { padding: var(--psh-spacing-xl); }
108
108
 
109
109
  .psh-sm\:m-0 { margin: 0; }
110
- .psh-sm\:m-sm { margin: var(--spacing-sm); }
111
- .psh-sm\:m-md { margin: var(--spacing-md); }
112
- .psh-sm\:m-lg { margin: var(--spacing-lg); }
113
- .psh-sm\:m-xl { margin: var(--spacing-xl); }
110
+ .psh-sm\:m-sm { margin: var(--psh-spacing-sm); }
111
+ .psh-sm\:m-md { margin: var(--psh-spacing-md); }
112
+ .psh-sm\:m-lg { margin: var(--psh-spacing-lg); }
113
+ .psh-sm\:m-xl { margin: var(--psh-spacing-xl); }
114
114
  }
115
115
 
116
116
  @media (min-width: 48em) {
117
117
  .psh-md\:p-0 { padding: 0; }
118
- .psh-md\:p-sm { padding: var(--spacing-sm); }
119
- .psh-md\:p-md { padding: var(--spacing-md); }
120
- .psh-md\:p-lg { padding: var(--spacing-lg); }
121
- .psh-md\:p-xl { padding: var(--spacing-xl); }
118
+ .psh-md\:p-sm { padding: var(--psh-spacing-sm); }
119
+ .psh-md\:p-md { padding: var(--psh-spacing-md); }
120
+ .psh-md\:p-lg { padding: var(--psh-spacing-lg); }
121
+ .psh-md\:p-xl { padding: var(--psh-spacing-xl); }
122
122
 
123
123
  .psh-md\:m-0 { margin: 0; }
124
- .psh-md\:m-sm { margin: var(--spacing-sm); }
125
- .psh-md\:m-md { margin: var(--spacing-md); }
126
- .psh-md\:m-lg { margin: var(--spacing-lg); }
127
- .psh-md\:m-xl { margin: var(--spacing-xl); }
124
+ .psh-md\:m-sm { margin: var(--psh-spacing-sm); }
125
+ .psh-md\:m-md { margin: var(--psh-spacing-md); }
126
+ .psh-md\:m-lg { margin: var(--psh-spacing-lg); }
127
+ .psh-md\:m-xl { margin: var(--psh-spacing-xl); }
128
128
  }
129
129
 
130
130
  @media (min-width: 64em) {
131
131
  .psh-lg\:p-0 { padding: 0; }
132
- .psh-lg\:p-sm { padding: var(--spacing-sm); }
133
- .psh-lg\:p-md { padding: var(--spacing-md); }
134
- .psh-lg\:p-lg { padding: var(--spacing-lg); }
135
- .psh-lg\:p-xl { padding: var(--spacing-xl); }
132
+ .psh-lg\:p-sm { padding: var(--psh-spacing-sm); }
133
+ .psh-lg\:p-md { padding: var(--psh-spacing-md); }
134
+ .psh-lg\:p-lg { padding: var(--psh-spacing-lg); }
135
+ .psh-lg\:p-xl { padding: var(--psh-spacing-xl); }
136
136
 
137
137
  .psh-lg\:m-0 { margin: 0; }
138
- .psh-lg\:m-sm { margin: var(--spacing-sm); }
139
- .psh-lg\:m-md { margin: var(--spacing-md); }
140
- .psh-lg\:m-lg { margin: var(--spacing-lg); }
141
- .psh-lg\:m-xl { margin: var(--spacing-xl); }
138
+ .psh-lg\:m-sm { margin: var(--psh-spacing-sm); }
139
+ .psh-lg\:m-md { margin: var(--psh-spacing-md); }
140
+ .psh-lg\:m-lg { margin: var(--psh-spacing-lg); }
141
+ .psh-lg\:m-xl { margin: var(--psh-spacing-xl); }
142
142
  }
143
143
 
144
144
  /* Text alignment utilities */
@@ -201,18 +201,18 @@
201
201
  .psh-pointer-events-auto { pointer-events: auto; }
202
202
 
203
203
  /* Mobile-specific utilities */
204
- @media (max-width: 48em) {
204
+ @media (max-width: 47.9375em) {
205
205
  .psh-mobile\:flex-col { flex-direction: column; }
206
- .psh-mobile\:gap-sm { gap: var(--spacing-sm); }
207
- .psh-mobile\:gap-xs { gap: var(--spacing-xs); }
208
- .psh-mobile\:p-sm { padding: var(--spacing-sm); }
209
- .psh-mobile\:p-xs { padding: var(--spacing-xs); }
206
+ .psh-mobile\:gap-sm { gap: var(--psh-spacing-sm); }
207
+ .psh-mobile\:gap-xs { gap: var(--psh-spacing-xs); }
208
+ .psh-mobile\:p-sm { padding: var(--psh-spacing-sm); }
209
+ .psh-mobile\:p-xs { padding: var(--psh-spacing-xs); }
210
210
  .psh-mobile\:text-center { text-align: center; }
211
211
  .psh-mobile\:w-full { width: 100%; }
212
212
  }
213
213
 
214
214
  /* Touch-friendly targets */
215
- @media (max-width: 48em) {
215
+ @media (max-width: 47.9375em) {
216
216
  .psh-touch-target {
217
217
  min-height: 2.75rem;
218
218
  min-width: 2.75rem;
package/src/lib/styles/utilities/spacing.utils.css CHANGED
@@ -9,54 +9,54 @@
9
9
  .psh-mx-0 { margin-left: 0; margin-right: 0; }
10
10
  .psh-my-0 { margin-top: 0; margin-bottom: 0; }
11
11
 
12
- .psh-m-xs { margin: var(--spacing-xs); }
13
- .psh-m-sm { margin: var(--spacing-sm); }
14
- .psh-m-md { margin: var(--spacing-md); }
15
- .psh-m-lg { margin: var(--spacing-lg); }
16
- .psh-m-xl { margin: var(--spacing-xl); }
17
- .psh-m-2xl { margin: var(--spacing-2xl); }
12
+ .psh-m-xs { margin: var(--psh-spacing-xs); }
13
+ .psh-m-sm { margin: var(--psh-spacing-sm); }
14
+ .psh-m-md { margin: var(--psh-spacing-md); }
15
+ .psh-m-lg { margin: var(--psh-spacing-lg); }
16
+ .psh-m-xl { margin: var(--psh-spacing-xl); }
17
+ .psh-m-2xl { margin: var(--psh-spacing-2xl); }
18
18
 
19
19
  /* Margin top */
20
- .psh-mt-xs { margin-top: var(--spacing-xs); }
21
- .psh-mt-sm { margin-top: var(--spacing-sm); }
22
- .psh-mt-md { margin-top: var(--spacing-md); }
23
- .psh-mt-lg { margin-top: var(--spacing-lg); }
24
- .psh-mt-xl { margin-top: var(--spacing-xl); }
25
- .psh-mt-2xl { margin-top: var(--spacing-2xl); }
20
+ .psh-mt-xs { margin-top: var(--psh-spacing-xs); }
21
+ .psh-mt-sm { margin-top: var(--psh-spacing-sm); }
22
+ .psh-mt-md { margin-top: var(--psh-spacing-md); }
23
+ .psh-mt-lg { margin-top: var(--psh-spacing-lg); }
24
+ .psh-mt-xl { margin-top: var(--psh-spacing-xl); }
25
+ .psh-mt-2xl { margin-top: var(--psh-spacing-2xl); }
26
26
 
27
27
  /* Margin bottom */
28
- .psh-mb-xs { margin-bottom: var(--spacing-xs); }
29
- .psh-mb-sm { margin-bottom: var(--spacing-sm); }
30
- .psh-mb-md { margin-bottom: var(--spacing-md); }
31
- .psh-mb-lg { margin-bottom: var(--spacing-lg); }
32
- .psh-mb-xl { margin-bottom: var(--spacing-xl); }
33
- .psh-mb-2xl { margin-bottom: var(--spacing-2xl); }
28
+ .psh-mb-xs { margin-bottom: var(--psh-spacing-xs); }
29
+ .psh-mb-sm { margin-bottom: var(--psh-spacing-sm); }
30
+ .psh-mb-md { margin-bottom: var(--psh-spacing-md); }
31
+ .psh-mb-lg { margin-bottom: var(--psh-spacing-lg); }
32
+ .psh-mb-xl { margin-bottom: var(--psh-spacing-xl); }
33
+ .psh-mb-2xl { margin-bottom: var(--psh-spacing-2xl); }
34
34
 
35
35
  /* Margin left/right */
36
- .psh-ml-xs { margin-left: var(--spacing-xs); }
37
- .psh-ml-sm { margin-left: var(--spacing-sm); }
38
- .psh-ml-md { margin-left: var(--spacing-md); }
39
- .psh-ml-lg { margin-left: var(--spacing-lg); }
40
- .psh-ml-xl { margin-left: var(--spacing-xl); }
41
-
42
- .psh-mr-xs { margin-right: var(--spacing-xs); }
43
- .psh-mr-sm { margin-right: var(--spacing-sm); }
44
- .psh-mr-md { margin-right: var(--spacing-md); }
45
- .psh-mr-lg { margin-right: var(--spacing-lg); }
46
- .psh-mr-xl { margin-right: var(--spacing-xl); }
36
+ .psh-ml-xs { margin-left: var(--psh-spacing-xs); }
37
+ .psh-ml-sm { margin-left: var(--psh-spacing-sm); }
38
+ .psh-ml-md { margin-left: var(--psh-spacing-md); }
39
+ .psh-ml-lg { margin-left: var(--psh-spacing-lg); }
40
+ .psh-ml-xl { margin-left: var(--psh-spacing-xl); }
41
+
42
+ .psh-mr-xs { margin-right: var(--psh-spacing-xs); }
43
+ .psh-mr-sm { margin-right: var(--psh-spacing-sm); }
44
+ .psh-mr-md { margin-right: var(--psh-spacing-md); }
45
+ .psh-mr-lg { margin-right: var(--psh-spacing-lg); }
46
+ .psh-mr-xl { margin-right: var(--psh-spacing-xl); }
47
47
 
48
48
  /* Margin horizontal/vertical */
49
- .psh-mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
50
- .psh-mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
51
- .psh-mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
52
- .psh-mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
53
- .psh-mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
54
-
55
- .psh-my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
56
- .psh-my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
57
- .psh-my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
58
- .psh-my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
59
- .psh-my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
49
+ .psh-mx-xs { margin-left: var(--psh-spacing-xs); margin-right: var(--psh-spacing-xs); }
50
+ .psh-mx-sm { margin-left: var(--psh-spacing-sm); margin-right: var(--psh-spacing-sm); }
51
+ .psh-mx-md { margin-left: var(--psh-spacing-md); margin-right: var(--psh-spacing-md); }
52
+ .psh-mx-lg { margin-left: var(--psh-spacing-lg); margin-right: var(--psh-spacing-lg); }
53
+ .psh-mx-xl { margin-left: var(--psh-spacing-xl); margin-right: var(--psh-spacing-xl); }
54
+
55
+ .psh-my-xs { margin-top: var(--psh-spacing-xs); margin-bottom: var(--psh-spacing-xs); }
56
+ .psh-my-sm { margin-top: var(--psh-spacing-sm); margin-bottom: var(--psh-spacing-sm); }
57
+ .psh-my-md { margin-top: var(--psh-spacing-md); margin-bottom: var(--psh-spacing-md); }
58
+ .psh-my-lg { margin-top: var(--psh-spacing-lg); margin-bottom: var(--psh-spacing-lg); }
59
+ .psh-my-xl { margin-top: var(--psh-spacing-xl); margin-bottom: var(--psh-spacing-xl); }
60
60
 
61
61
  /* Auto margins */
62
62
  .psh-mx-auto { margin-left: auto; margin-right: auto; }
@@ -75,76 +75,76 @@
75
75
  .psh-px-0 { padding-left: 0; padding-right: 0; }
76
76
  .psh-py-0 { padding-top: 0; padding-bottom: 0; }
77
77
 
78
- .psh-p-xs { padding: var(--spacing-xs); }
79
- .psh-p-sm { padding: var(--spacing-sm); }
80
- .psh-p-md { padding: var(--spacing-md); }
81
- .psh-p-lg { padding: var(--spacing-lg); }
82
- .psh-p-xl { padding: var(--spacing-xl); }
83
- .psh-p-2xl { padding: var(--spacing-2xl); }
78
+ .psh-p-xs { padding: var(--psh-spacing-xs); }
79
+ .psh-p-sm { padding: var(--psh-spacing-sm); }
80
+ .psh-p-md { padding: var(--psh-spacing-md); }
81
+ .psh-p-lg { padding: var(--psh-spacing-lg); }
82
+ .psh-p-xl { padding: var(--psh-spacing-xl); }
83
+ .psh-p-2xl { padding: var(--psh-spacing-2xl); }
84
84
 
85
85
  /* Padding top */
86
- .psh-pt-xs { padding-top: var(--spacing-xs); }
87
- .psh-pt-sm { padding-top: var(--spacing-sm); }
88
- .psh-pt-md { padding-top: var(--spacing-md); }
89
- .psh-pt-lg { padding-top: var(--spacing-lg); }
90
- .psh-pt-xl { padding-top: var(--spacing-xl); }
91
- .psh-pt-2xl { padding-top: var(--spacing-2xl); }
86
+ .psh-pt-xs { padding-top: var(--psh-spacing-xs); }
87
+ .psh-pt-sm { padding-top: var(--psh-spacing-sm); }
88
+ .psh-pt-md { padding-top: var(--psh-spacing-md); }
89
+ .psh-pt-lg { padding-top: var(--psh-spacing-lg); }
90
+ .psh-pt-xl { padding-top: var(--psh-spacing-xl); }
91
+ .psh-pt-2xl { padding-top: var(--psh-spacing-2xl); }
92
92
 
93
93
  /* Padding bottom */
94
- .psh-pb-xs { padding-bottom: var(--spacing-xs); }
95
- .psh-pb-sm { padding-bottom: var(--spacing-sm); }
96
- .psh-pb-md { padding-bottom: var(--spacing-md); }
97
- .psh-pb-lg { padding-bottom: var(--spacing-lg); }
98
- .psh-pb-xl { padding-bottom: var(--spacing-xl); }
99
- .psh-pb-2xl { padding-bottom: var(--spacing-2xl); }
94
+ .psh-pb-xs { padding-bottom: var(--psh-spacing-xs); }
95
+ .psh-pb-sm { padding-bottom: var(--psh-spacing-sm); }
96
+ .psh-pb-md { padding-bottom: var(--psh-spacing-md); }
97
+ .psh-pb-lg { padding-bottom: var(--psh-spacing-lg); }
98
+ .psh-pb-xl { padding-bottom: var(--psh-spacing-xl); }
99
+ .psh-pb-2xl { padding-bottom: var(--psh-spacing-2xl); }
100
100
 
101
101
  /* Padding left/right */
102
- .psh-pl-xs { padding-left: var(--spacing-xs); }
103
- .psh-pl-sm { padding-left: var(--spacing-sm); }
104
- .psh-pl-md { padding-left: var(--spacing-md); }
105
- .psh-pl-lg { padding-left: var(--spacing-lg); }
106
- .psh-pl-xl { padding-left: var(--spacing-xl); }
107
-
108
- .psh-pr-xs { padding-right: var(--spacing-xs); }
109
- .psh-pr-sm { padding-right: var(--spacing-sm); }
110
- .psh-pr-md { padding-right: var(--spacing-md); }
111
- .psh-pr-lg { padding-right: var(--spacing-lg); }
112
- .psh-pr-xl { padding-right: var(--spacing-xl); }
102
+ .psh-pl-xs { padding-left: var(--psh-spacing-xs); }
103
+ .psh-pl-sm { padding-left: var(--psh-spacing-sm); }
104
+ .psh-pl-md { padding-left: var(--psh-spacing-md); }
105
+ .psh-pl-lg { padding-left: var(--psh-spacing-lg); }
106
+ .psh-pl-xl { padding-left: var(--psh-spacing-xl); }
107
+
108
+ .psh-pr-xs { padding-right: var(--psh-spacing-xs); }
109
+ .psh-pr-sm { padding-right: var(--psh-spacing-sm); }
110
+ .psh-pr-md { padding-right: var(--psh-spacing-md); }
111
+ .psh-pr-lg { padding-right: var(--psh-spacing-lg); }
112
+ .psh-pr-xl { padding-right: var(--psh-spacing-xl); }
113
113
 
114
114
  /* Padding horizontal/vertical */
115
- .psh-px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
116
- .psh-px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
117
- .psh-px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
118
- .psh-px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
119
- .psh-px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
120
-
121
- .psh-py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
122
- .psh-py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
123
- .psh-py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
124
- .psh-py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
125
- .psh-py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
115
+ .psh-px-xs { padding-left: var(--psh-spacing-xs); padding-right: var(--psh-spacing-xs); }
116
+ .psh-px-sm { padding-left: var(--psh-spacing-sm); padding-right: var(--psh-spacing-sm); }
117
+ .psh-px-md { padding-left: var(--psh-spacing-md); padding-right: var(--psh-spacing-md); }
118
+ .psh-px-lg { padding-left: var(--psh-spacing-lg); padding-right: var(--psh-spacing-lg); }
119
+ .psh-px-xl { padding-left: var(--psh-spacing-xl); padding-right: var(--psh-spacing-xl); }
120
+
121
+ .psh-py-xs { padding-top: var(--psh-spacing-xs); padding-bottom: var(--psh-spacing-xs); }
122
+ .psh-py-sm { padding-top: var(--psh-spacing-sm); padding-bottom: var(--psh-spacing-sm); }
123
+ .psh-py-md { padding-top: var(--psh-spacing-md); padding-bottom: var(--psh-spacing-md); }
124
+ .psh-py-lg { padding-top: var(--psh-spacing-lg); padding-bottom: var(--psh-spacing-lg); }
125
+ .psh-py-xl { padding-top: var(--psh-spacing-xl); padding-bottom: var(--psh-spacing-xl); }
126
126
 
127
127
  /* Gap utilities */
128
128
  .psh-gap-0 { gap: 0; }
129
- .psh-gap-xs { gap: var(--spacing-xs); }
130
- .psh-gap-sm { gap: var(--spacing-sm); }
131
- .psh-gap-md { gap: var(--spacing-md); }
132
- .psh-gap-lg { gap: var(--spacing-lg); }
133
- .psh-gap-xl { gap: var(--spacing-xl); }
134
- .psh-gap-2xl { gap: var(--spacing-2xl); }
129
+ .psh-gap-xs { gap: var(--psh-spacing-xs); }
130
+ .psh-gap-sm { gap: var(--psh-spacing-sm); }
131
+ .psh-gap-md { gap: var(--psh-spacing-md); }
132
+ .psh-gap-lg { gap: var(--psh-spacing-lg); }
133
+ .psh-gap-xl { gap: var(--psh-spacing-xl); }
134
+ .psh-gap-2xl { gap: var(--psh-spacing-2xl); }
135
135
 
136
136
  /* Column gap utilities */
137
137
  .psh-gap-x-0 { column-gap: 0; }
138
- .psh-gap-x-xs { column-gap: var(--spacing-xs); }
139
- .psh-gap-x-sm { column-gap: var(--spacing-sm); }
140
- .psh-gap-x-md { column-gap: var(--spacing-md); }
141
- .psh-gap-x-lg { column-gap: var(--spacing-lg); }
142
- .psh-gap-x-xl { column-gap: var(--spacing-xl); }
138
+ .psh-gap-x-xs { column-gap: var(--psh-spacing-xs); }
139
+ .psh-gap-x-sm { column-gap: var(--psh-spacing-sm); }
140
+ .psh-gap-x-md { column-gap: var(--psh-spacing-md); }
141
+ .psh-gap-x-lg { column-gap: var(--psh-spacing-lg); }
142
+ .psh-gap-x-xl { column-gap: var(--psh-spacing-xl); }
143
143
 
144
144
  /* Row gap utilities */
145
145
  .psh-gap-y-0 { row-gap: 0; }
146
- .psh-gap-y-xs { row-gap: var(--spacing-xs); }
147
- .psh-gap-y-sm { row-gap: var(--spacing-sm); }
148
- .psh-gap-y-md { row-gap: var(--spacing-md); }
149
- .psh-gap-y-lg { row-gap: var(--spacing-lg); }
150
- .psh-gap-y-xl { row-gap: var(--spacing-xl); }
146
+ .psh-gap-y-xs { row-gap: var(--psh-spacing-xs); }
147
+ .psh-gap-y-sm { row-gap: var(--psh-spacing-sm); }
148
+ .psh-gap-y-md { row-gap: var(--psh-spacing-md); }
149
+ .psh-gap-y-lg { row-gap: var(--psh-spacing-lg); }
150
+ .psh-gap-y-xl { row-gap: var(--psh-spacing-xl); }
package/src/lib/styles/utilities/typography.utils.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* Utility Classes - Typography */
2
2
 
3
3
  /* Font size utilities */
4
- .psh-text-xs { font-size: var(--font-size-xs); }
5
- .psh-text-sm { font-size: var(--font-size-sm); }
6
- .psh-text-base { font-size: var(--font-size-base); }
7
- .psh-text-lg { font-size: var(--font-size-lg); }
8
- .psh-text-xl { font-size: var(--font-size-xl); }
9
- .psh-text-2xl { font-size: var(--font-size-2xl); }
10
- .psh-text-3xl { font-size: var(--font-size-3xl); }
11
- .psh-text-4xl { font-size: var(--font-size-4xl); }
4
+ .psh-text-xs { font-size: var(--psh-font-size-xs); }
5
+ .psh-text-sm { font-size: var(--psh-font-size-sm); }
6
+ .psh-text-base { font-size: var(--psh-font-size-base); }
7
+ .psh-text-lg { font-size: var(--psh-font-size-lg); }
8
+ .psh-text-xl { font-size: var(--psh-font-size-xl); }
9
+ .psh-text-2xl { font-size: var(--psh-font-size-2xl); }
10
+ .psh-text-3xl { font-size: var(--psh-font-size-3xl); }
11
+ .psh-text-4xl { font-size: var(--psh-font-size-4xl); }
12
12
 
13
13
  /* Font weight utilities */
14
- .psh-font-normal { font-weight: var(--font-weight-normal); }
15
- .psh-font-medium { font-weight: var(--font-weight-medium); }
16
- .psh-font-semibold { font-weight: var(--font-weight-semibold); }
17
- .psh-font-bold { font-weight: var(--font-weight-bold); }
14
+ .psh-font-normal { font-weight: var(--psh-font-weight-normal); }
15
+ .psh-font-medium { font-weight: var(--psh-font-weight-medium); }
16
+ .psh-font-semibold { font-weight: var(--psh-font-weight-semibold); }
17
+ .psh-font-bold { font-weight: var(--psh-font-weight-bold); }
18
18
 
19
19
  /* Line height utilities */
20
- .psh-leading-tight { line-height: var(--line-height-tight); }
21
- .psh-leading-normal { line-height: var(--line-height-normal); }
22
- .psh-leading-relaxed { line-height: var(--line-height-relaxed); }
20
+ .psh-leading-tight { line-height: var(--psh-line-height-tight); }
21
+ .psh-leading-normal { line-height: var(--psh-line-height-normal); }
22
+ .psh-leading-relaxed { line-height: var(--psh-line-height-relaxed); }
23
23
 
24
24
  /* Letter spacing utilities */
25
- .psh-tracking-tight { letter-spacing: var(--letter-spacing-tight); }
26
- .psh-tracking-normal { letter-spacing: var(--letter-spacing-normal); }
27
- .psh-tracking-wide { letter-spacing: var(--letter-spacing-wide); }
28
- .psh-tracking-wider { letter-spacing: var(--letter-spacing-wider); }
29
- .psh-tracking-widest { letter-spacing: var(--letter-spacing-widest); }
25
+ .psh-tracking-tight { letter-spacing: var(--psh-letter-spacing-tight); }
26
+ .psh-tracking-normal { letter-spacing: var(--psh-letter-spacing-normal); }
27
+ .psh-tracking-wide { letter-spacing: var(--psh-letter-spacing-wide); }
28
+ .psh-tracking-wider { letter-spacing: var(--psh-letter-spacing-wider); }
29
+ .psh-tracking-widest { letter-spacing: var(--psh-letter-spacing-widest); }
30
30
 
31
31
  /* Text color utilities */
32
- .psh-text-primary { color: var(--primary-color); }
33
- .psh-text-secondary { color: var(--text-color-secondary); }
34
- .psh-text-success { color: var(--success-color); }
35
- .psh-text-warning { color: var(--warning-color); }
36
- .psh-text-danger { color: var(--danger-color); }
32
+ .psh-text-primary { color: var(--psh-primary-color); }
33
+ .psh-text-secondary { color: var(--psh-text-color-secondary); }
34
+ .psh-text-success { color: var(--psh-success-color); }
35
+ .psh-text-warning { color: var(--psh-warning-color); }
36
+ .psh-text-danger { color: var(--psh-danger-color); }
package/styles-full.css ADDED
@@ -0,0 +1,25 @@
1
+ /* ============================================================================
2
+ PS-HELIX DESIGN SYSTEM - FULL STYLESHEET
3
+
4
+ Everything in styles.css, plus the CSS reset and the page-level styling that used
5
+ to be bundled into it before 7.0.0.
6
+
7
+ @import 'ps-helix/styles-full.css';
8
+
9
+ Use this when the application has no reset of its own and wants ps-helix to own the
10
+ page chrome. Prefer styles.css otherwise: the two files below reach outside the
11
+ library and into the host document.
12
+
13
+ reset.css zeroes every margin and padding, removes list markers, normalises
14
+ form element typography.
15
+ global.css sets the body font, colour, background gradient, min-height and
16
+ scroll behaviour, and declares color-scheme: light dark.
17
+
18
+ The accessibility guarantees and the modal scroll lock are NOT here — they ship
19
+ with styles.css unconditionally, because losing them is never a valid trade.
20
+ ========================================================================== */
21
+
22
+ @import './styles.css';
23
+
24
+ @import './src/lib/styles/base/reset.css';
25
+ @import './src/lib/styles/base/global.css';
package/styles.css CHANGED
@@ -2,9 +2,20 @@
2
2
  PS-HELIX DESIGN SYSTEM - LIBRARY STYLESHEET
3
3
  ============================================ */
4
4
 
5
- /* 1. BASE - CSS Reset and Global Styles */
6
- @import './src/lib/styles/base/reset.css';
7
- @import './src/lib/styles/base/global.css';
5
+ /* ----------------------------------------------------------------------------
6
+ This stylesheet no longer ships a CSS reset or page-level styling.
7
+
8
+ It used to import reset.css and global.css unconditionally, which meant importing
9
+ ps-helix also zeroed every margin and padding in the host application, stripped list
10
+ markers, and painted a gradient on its <body>. Those are opinions an application is
11
+ entitled to decline.
12
+
13
+ Want the previous behaviour? Import styles-full.css instead.
14
+ ---------------------------------------------------------------------------- */
15
+
16
+ /* 1. NON-NEGOTIABLE - accessibility guarantees and component machinery */
17
+ @import './src/lib/styles/base/a11y.css';
18
+ @import './src/lib/styles/base/behavior.css';
8
19
 
9
20
  /* 2. DESIGN TOKENS - Primitive Values */
10
21
  @import './src/lib/styles/tokens/spacing.tokens.css';
@@ -18,6 +29,9 @@
18
29
  /* 3. THEMES - Color Tokens and Theme Variables */
19
30
  @import './src/lib/styles/themes/light.css';
20
31
  @import './src/lib/styles/themes/dark.css';
32
+ /* The same tokens behind prefers-color-scheme, so the stylesheet is correct without
33
+ PshThemeService and on the SSR first paint. Generated from dark.css. */
34
+ @import './src/lib/styles/themes/dark-auto.css';
21
35
 
22
36
  /* 4. UTILITY CLASSES - Functional Helpers */
23
37
  @import './src/lib/styles/utilities/spacing.utils.css';
@@ -27,8 +41,3 @@
27
41
  @import './src/lib/styles/utilities/animations.utils.css';
28
42
  @import './src/lib/styles/utilities/focus.utils.css';
29
43
  @import './src/lib/styles/utilities/responsive.utils.css';
30
-
31
- /* Demo navigation scrollbar compensation */
32
- .demo-navigation {
33
- padding-right: var(--scrollbar-width);
34
- }