ps-helix 5.1.3 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +1188 -1188
  2. package/THEME.md +446 -446
  3. package/fesm2022/ps-helix.mjs +1949 -1012
  4. package/fesm2022/ps-helix.mjs.map +1 -1
  5. package/package.json +6 -5
  6. package/src/lib/styles/base/global.css +48 -32
  7. package/src/lib/styles/themes/dark.css +200 -200
  8. package/src/lib/styles/themes/light.css +278 -278
  9. package/src/lib/styles/tokens/breakpoints.tokens.css +20 -0
  10. package/src/lib/styles/tokens/sizing.tokens.css +94 -94
  11. package/src/lib/styles/tokens/spacing.tokens.css +27 -27
  12. package/src/lib/styles/utilities/animations.utils.css +157 -157
  13. package/src/lib/styles/utilities/colors.utils.css +223 -223
  14. package/src/lib/styles/utilities/focus.utils.css +56 -62
  15. package/src/lib/styles/utilities/layout.utils.css +135 -135
  16. package/src/lib/styles/utilities/responsive.utils.css +219 -226
  17. package/src/lib/styles/utilities/spacing.utils.css +150 -150
  18. package/src/lib/styles/utilities/typography.utils.css +36 -36
  19. package/styles.css +34 -33
  20. package/types/ps-helix.d.ts +291 -67
package/src/lib/styles/utilities/layout.utils.css CHANGED
@@ -1,135 +1,135 @@
1
- /* Utility Classes - Layout */
2
-
3
- /* Display utilities */
4
- .hidden { display: none; }
5
- .block { display: block; }
6
- .inline { display: inline; }
7
- .inline-block { display: inline-block; }
8
- .flex { display: flex; }
9
- .inline-flex { display: inline-flex; }
10
- .grid { display: grid; }
11
- .inline-grid { display: inline-grid; }
12
-
13
- /* Flexbox utilities */
14
- .flex-row { flex-direction: row; }
15
- .flex-row-reverse { flex-direction: row-reverse; }
16
- .flex-col { flex-direction: column; }
17
- .flex-col-reverse { flex-direction: column-reverse; }
18
-
19
- .flex-wrap { flex-wrap: wrap; }
20
- .flex-wrap-reverse { flex-wrap: wrap-reverse; }
21
- .flex-nowrap { flex-wrap: nowrap; }
22
-
23
- .items-start { align-items: flex-start; }
24
- .items-end { align-items: flex-end; }
25
- .items-center { align-items: center; }
26
- .items-baseline { align-items: baseline; }
27
- .items-stretch { align-items: stretch; }
28
-
29
- .justify-start { justify-content: flex-start; }
30
- .justify-end { justify-content: flex-end; }
31
- .justify-center { justify-content: center; }
32
- .justify-between { justify-content: space-between; }
33
- .justify-around { justify-content: space-around; }
34
- .justify-evenly { justify-content: space-evenly; }
35
-
36
- .flex-none { flex: var(--flex-none); }
37
- .flex-auto { flex: var(--flex-auto); }
38
- .flex-initial { flex: var(--flex-initial); }
39
- .flex-1 { flex: 1 1 0%; }
40
- .flex-2 { flex: 2 2 0%; }
41
- .flex-3 { flex: 3 3 0%; }
42
-
43
- .shrink { flex-shrink: 1; }
44
- .shrink-0 { flex-shrink: 0; }
45
-
46
- .grow { flex-grow: 1; }
47
- .grow-0 { flex-grow: 0; }
48
-
49
- /* Grid utilities */
50
- .grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
51
- .grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
52
- .grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
53
- .grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
54
- .grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
55
- .grid-cols-12 { grid-template-columns: var(--grid-cols-12); }
56
-
57
- .col-span-1 { grid-column: span 1 / span 1; }
58
- .col-span-2 { grid-column: span 2 / span 2; }
59
- .col-span-3 { grid-column: span 3 / span 3; }
60
- .col-span-4 { grid-column: span 4 / span 4; }
61
- .col-span-6 { grid-column: span 6 / span 6; }
62
- .col-span-12 { grid-column: span 12 / span 12; }
63
- .col-span-full { grid-column: 1 / -1; }
64
-
65
- .row-span-1 { grid-row: span 1 / span 1; }
66
- .row-span-2 { grid-row: span 2 / span 2; }
67
- .row-span-3 { grid-row: span 3 / span 3; }
68
- .row-span-full { grid-row: 1 / -1; }
69
-
70
- /* Position utilities */
71
- .static { position: static; }
72
- .fixed { position: fixed; }
73
- .absolute { position: absolute; }
74
- .relative { position: relative; }
75
- .sticky { position: sticky; }
76
-
77
- .inset-0 { inset: 0; }
78
- .top-0 { top: 0; }
79
- .right-0 { right: 0; }
80
- .bottom-0 { bottom: 0; }
81
- .left-0 { left: 0; }
82
-
83
- /* Width utilities */
84
- .w-full { width: 100%; }
85
- .w-auto { width: auto; }
86
- .w-fit { width: fit-content; }
87
- .w-min { width: min-content; }
88
- .w-max { width: max-content; }
89
-
90
- .min-w-0 { min-width: 0; }
91
- .min-w-full { min-width: 100%; }
92
- .min-w-fit { min-width: fit-content; }
93
- .min-w-min { min-width: min-content; }
94
- .min-w-max { min-width: max-content; }
95
-
96
- .max-w-none { max-width: none; }
97
- .max-w-xs { max-width: 20rem; }
98
- .max-w-sm { max-width: 24rem; }
99
- .max-w-md { max-width: 28rem; }
100
- .max-w-lg { max-width: 32rem; }
101
- .max-w-xl { max-width: 36rem; }
102
- .max-w-2xl { max-width: 42rem; }
103
- .max-w-3xl { max-width: 48rem; }
104
- .max-w-4xl { max-width: 56rem; }
105
- .max-w-5xl { max-width: 64rem; }
106
- .max-w-6xl { max-width: 72rem; }
107
- .max-w-7xl { max-width: 80rem; }
108
- .max-w-full { max-width: 100%; }
109
-
110
- /* Height utilities */
111
- .h-full { height: 100%; }
112
- .h-screen { height: 100vh; }
113
- .h-auto { height: auto; }
114
- .h-fit { height: fit-content; }
115
-
116
- .min-h-0 { min-height: 0; }
117
- .min-h-full { min-height: 100%; }
118
- .min-h-screen { min-height: 100vh; }
119
- .min-h-fit { min-height: fit-content; }
120
-
121
- /* Overflow utilities */
122
- .overflow-auto { overflow: auto; }
123
- .overflow-hidden { overflow: hidden; }
124
- .overflow-visible { overflow: visible; }
125
- .overflow-scroll { overflow: scroll; }
126
-
127
- .overflow-x-auto { overflow-x: auto; }
128
- .overflow-x-hidden { overflow-x: hidden; }
129
- .overflow-x-visible { overflow-x: visible; }
130
- .overflow-x-scroll { overflow-x: scroll; }
131
-
132
- .overflow-y-auto { overflow-y: auto; }
133
- .overflow-y-hidden { overflow-y: hidden; }
134
- .overflow-y-visible { overflow-y: visible; }
135
- .overflow-y-scroll { overflow-y: scroll; }
1
+ /* Utility Classes - Layout */
2
+
3
+ /* Display utilities */
4
+ .psh-hidden { display: none; }
5
+ .psh-block { display: block; }
6
+ .psh-inline { display: inline; }
7
+ .psh-inline-block { display: inline-block; }
8
+ .psh-flex { display: flex; }
9
+ .psh-inline-flex { display: inline-flex; }
10
+ .psh-grid { display: grid; }
11
+ .psh-inline-grid { display: inline-grid; }
12
+
13
+ /* Flexbox utilities */
14
+ .psh-flex-row { flex-direction: row; }
15
+ .psh-flex-row-reverse { flex-direction: row-reverse; }
16
+ .psh-flex-col { flex-direction: column; }
17
+ .psh-flex-col-reverse { flex-direction: column-reverse; }
18
+
19
+ .psh-flex-wrap { flex-wrap: wrap; }
20
+ .psh-flex-wrap-reverse { flex-wrap: wrap-reverse; }
21
+ .psh-flex-nowrap { flex-wrap: nowrap; }
22
+
23
+ .psh-items-start { align-items: flex-start; }
24
+ .psh-items-end { align-items: flex-end; }
25
+ .psh-items-center { align-items: center; }
26
+ .psh-items-baseline { align-items: baseline; }
27
+ .psh-items-stretch { align-items: stretch; }
28
+
29
+ .psh-justify-start { justify-content: flex-start; }
30
+ .psh-justify-end { justify-content: flex-end; }
31
+ .psh-justify-center { justify-content: center; }
32
+ .psh-justify-between { justify-content: space-between; }
33
+ .psh-justify-around { justify-content: space-around; }
34
+ .psh-justify-evenly { justify-content: space-evenly; }
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); }
39
+ .psh-flex-1 { flex: 1 1 0%; }
40
+ .psh-flex-2 { flex: 2 2 0%; }
41
+ .psh-flex-3 { flex: 3 3 0%; }
42
+
43
+ .psh-shrink { flex-shrink: 1; }
44
+ .psh-shrink-0 { flex-shrink: 0; }
45
+
46
+ .psh-grow { flex-grow: 1; }
47
+ .psh-grow-0 { flex-grow: 0; }
48
+
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); }
56
+
57
+ .psh-col-span-1 { grid-column: span 1 / span 1; }
58
+ .psh-col-span-2 { grid-column: span 2 / span 2; }
59
+ .psh-col-span-3 { grid-column: span 3 / span 3; }
60
+ .psh-col-span-4 { grid-column: span 4 / span 4; }
61
+ .psh-col-span-6 { grid-column: span 6 / span 6; }
62
+ .psh-col-span-12 { grid-column: span 12 / span 12; }
63
+ .psh-col-span-full { grid-column: 1 / -1; }
64
+
65
+ .psh-row-span-1 { grid-row: span 1 / span 1; }
66
+ .psh-row-span-2 { grid-row: span 2 / span 2; }
67
+ .psh-row-span-3 { grid-row: span 3 / span 3; }
68
+ .psh-row-span-full { grid-row: 1 / -1; }
69
+
70
+ /* Position utilities */
71
+ .psh-static { position: static; }
72
+ .psh-fixed { position: fixed; }
73
+ .psh-absolute { position: absolute; }
74
+ .psh-relative { position: relative; }
75
+ .psh-sticky { position: sticky; }
76
+
77
+ .psh-inset-0 { inset: 0; }
78
+ .psh-top-0 { top: 0; }
79
+ .psh-right-0 { right: 0; }
80
+ .psh-bottom-0 { bottom: 0; }
81
+ .psh-left-0 { left: 0; }
82
+
83
+ /* Width utilities */
84
+ .psh-w-full { width: 100%; }
85
+ .psh-w-auto { width: auto; }
86
+ .psh-w-fit { width: fit-content; }
87
+ .psh-w-min { width: min-content; }
88
+ .psh-w-max { width: max-content; }
89
+
90
+ .psh-min-w-0 { min-width: 0; }
91
+ .psh-min-w-full { min-width: 100%; }
92
+ .psh-min-w-fit { min-width: fit-content; }
93
+ .psh-min-w-min { min-width: min-content; }
94
+ .psh-min-w-max { min-width: max-content; }
95
+
96
+ .psh-max-w-none { max-width: none; }
97
+ .psh-max-w-xs { max-width: 20rem; }
98
+ .psh-max-w-sm { max-width: 24rem; }
99
+ .psh-max-w-md { max-width: 28rem; }
100
+ .psh-max-w-lg { max-width: 32rem; }
101
+ .psh-max-w-xl { max-width: 36rem; }
102
+ .psh-max-w-2xl { max-width: 42rem; }
103
+ .psh-max-w-3xl { max-width: 48rem; }
104
+ .psh-max-w-4xl { max-width: 56rem; }
105
+ .psh-max-w-5xl { max-width: 64rem; }
106
+ .psh-max-w-6xl { max-width: 72rem; }
107
+ .psh-max-w-7xl { max-width: 80rem; }
108
+ .psh-max-w-full { max-width: 100%; }
109
+
110
+ /* Height utilities */
111
+ .psh-h-full { height: 100%; }
112
+ .psh-h-screen { height: 100vh; }
113
+ .psh-h-auto { height: auto; }
114
+ .psh-h-fit { height: fit-content; }
115
+
116
+ .psh-min-h-0 { min-height: 0; }
117
+ .psh-min-h-full { min-height: 100%; }
118
+ .psh-min-h-screen { min-height: 100vh; }
119
+ .psh-min-h-fit { min-height: fit-content; }
120
+
121
+ /* Overflow utilities */
122
+ .psh-overflow-auto { overflow: auto; }
123
+ .psh-overflow-hidden { overflow: hidden; }
124
+ .psh-overflow-visible { overflow: visible; }
125
+ .psh-overflow-scroll { overflow: scroll; }
126
+
127
+ .psh-overflow-x-auto { overflow-x: auto; }
128
+ .psh-overflow-x-hidden { overflow-x: hidden; }
129
+ .psh-overflow-x-visible { overflow-x: visible; }
130
+ .psh-overflow-x-scroll { overflow-x: scroll; }
131
+
132
+ .psh-overflow-y-auto { overflow-y: auto; }
133
+ .psh-overflow-y-hidden { overflow-y: hidden; }
134
+ .psh-overflow-y-visible { overflow-y: visible; }
135
+ .psh-overflow-y-scroll { overflow-y: scroll; }