@mekari/pixel3-styled-system 0.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 (211) hide show
  1. package/.turbo/turbo-build.log +16 -0
  2. package/chunks/packages__accordion__src__accordion.css +10 -0
  3. package/chunks/packages__avatar2__src__modules__avatar.recipes.css +166 -0
  4. package/chunks/packages__avatar__src__avatar.style.css +150 -0
  5. package/chunks/packages__avatar__src__avatar.styles.css +171 -0
  6. package/chunks/packages__avatar__src__modules__avatar.recipes.css +191 -0
  7. package/chunks/packages__core__node_modules__@mekari__pixel3-accordion__src__accordion.css +10 -0
  8. package/chunks/packages__core__node_modules__@mekari__pixel3-avatar2__src__modules__avatar.recipes.css +166 -0
  9. package/chunks/packages__core__node_modules__@mekari__pixel3-avatar__src__avatar.css +16 -0
  10. package/chunks/packages__core__node_modules__@mekari__pixel3-avatar__src__avatar.style.css +150 -0
  11. package/chunks/packages__core__node_modules__@mekari__pixel3-avatar__src__avatar.styles.css +171 -0
  12. package/chunks/packages__core__node_modules__@mekari__pixel3-avatar__src__modules__avatar.recipes.css +191 -0
  13. package/css/conditions.mjs +34 -0
  14. package/css/css.d.ts +9 -0
  15. package/css/css.mjs +44 -0
  16. package/css/cva.d.ts +6 -0
  17. package/css/cva.mjs +85 -0
  18. package/css/cx.d.ts +5 -0
  19. package/css/cx.mjs +15 -0
  20. package/css/index.d.ts +5 -0
  21. package/css/index.mjs +4 -0
  22. package/css/sva.d.ts +4 -0
  23. package/css/sva.mjs +35 -0
  24. package/global.css +59 -0
  25. package/helpers.mjs +300 -0
  26. package/jsx/aspect-ratio.d.ts +10 -0
  27. package/jsx/aspect-ratio.mjs +16 -0
  28. package/jsx/bleed.d.ts +10 -0
  29. package/jsx/bleed.mjs +16 -0
  30. package/jsx/box.d.ts +10 -0
  31. package/jsx/box.mjs +16 -0
  32. package/jsx/center.d.ts +10 -0
  33. package/jsx/center.mjs +16 -0
  34. package/jsx/circle.d.ts +10 -0
  35. package/jsx/circle.mjs +16 -0
  36. package/jsx/container.d.ts +10 -0
  37. package/jsx/container.mjs +16 -0
  38. package/jsx/divider.d.ts +10 -0
  39. package/jsx/divider.mjs +16 -0
  40. package/jsx/factory-helper.mjs +22 -0
  41. package/jsx/factory.d.ts +4 -0
  42. package/jsx/factory.mjs +85 -0
  43. package/jsx/flex.d.ts +10 -0
  44. package/jsx/flex.mjs +16 -0
  45. package/jsx/float.d.ts +10 -0
  46. package/jsx/float.mjs +16 -0
  47. package/jsx/grid-item.d.ts +10 -0
  48. package/jsx/grid-item.mjs +16 -0
  49. package/jsx/grid.d.ts +10 -0
  50. package/jsx/grid.mjs +16 -0
  51. package/jsx/hstack.d.ts +10 -0
  52. package/jsx/hstack.mjs +16 -0
  53. package/jsx/index.d.ts +27 -0
  54. package/jsx/index.mjs +22 -0
  55. package/jsx/is-valid-prop.d.ts +5 -0
  56. package/jsx/is-valid-prop.mjs +17 -0
  57. package/jsx/link-box.d.ts +10 -0
  58. package/jsx/link-box.mjs +16 -0
  59. package/jsx/link-overlay.d.ts +10 -0
  60. package/jsx/link-overlay.mjs +16 -0
  61. package/jsx/spacer.d.ts +10 -0
  62. package/jsx/spacer.mjs +16 -0
  63. package/jsx/square.d.ts +10 -0
  64. package/jsx/square.mjs +16 -0
  65. package/jsx/stack.d.ts +10 -0
  66. package/jsx/stack.mjs +16 -0
  67. package/jsx/visually-hidden.d.ts +10 -0
  68. package/jsx/visually-hidden.mjs +16 -0
  69. package/jsx/vstack.d.ts +10 -0
  70. package/jsx/vstack.mjs +16 -0
  71. package/jsx/wrap.d.ts +10 -0
  72. package/jsx/wrap.mjs +16 -0
  73. package/package.json +40 -0
  74. package/patterns/aspect-ratio.d.ts +21 -0
  75. package/patterns/aspect-ratio.mjs +35 -0
  76. package/patterns/bleed.d.ts +22 -0
  77. package/patterns/bleed.mjs +19 -0
  78. package/patterns/box.d.ts +21 -0
  79. package/patterns/box.mjs +12 -0
  80. package/patterns/center.d.ts +21 -0
  81. package/patterns/center.mjs +18 -0
  82. package/patterns/circle.d.ts +21 -0
  83. package/patterns/circle.mjs +22 -0
  84. package/patterns/container.d.ts +21 -0
  85. package/patterns/container.mjs +18 -0
  86. package/patterns/divider.d.ts +23 -0
  87. package/patterns/divider.mjs +21 -0
  88. package/patterns/flex.d.ts +27 -0
  89. package/patterns/flex.mjs +23 -0
  90. package/patterns/float.d.ts +24 -0
  91. package/patterns/float.mjs +45 -0
  92. package/patterns/grid-item.d.ts +26 -0
  93. package/patterns/grid-item.mjs +22 -0
  94. package/patterns/grid.d.ts +25 -0
  95. package/patterns/grid.mjs +22 -0
  96. package/patterns/hstack.d.ts +22 -0
  97. package/patterns/hstack.mjs +20 -0
  98. package/patterns/index.d.ts +21 -0
  99. package/patterns/index.mjs +20 -0
  100. package/patterns/link-box.d.ts +21 -0
  101. package/patterns/link-box.mjs +19 -0
  102. package/patterns/link-overlay.d.ts +21 -0
  103. package/patterns/link-overlay.mjs +24 -0
  104. package/patterns/spacer.d.ts +21 -0
  105. package/patterns/spacer.mjs +18 -0
  106. package/patterns/square.d.ts +21 -0
  107. package/patterns/square.mjs +21 -0
  108. package/patterns/stack.d.ts +24 -0
  109. package/patterns/stack.mjs +20 -0
  110. package/patterns/visually-hidden.d.ts +21 -0
  111. package/patterns/visually-hidden.mjs +15 -0
  112. package/patterns/vstack.d.ts +22 -0
  113. package/patterns/vstack.mjs +20 -0
  114. package/patterns/wrap.d.ts +25 -0
  115. package/patterns/wrap.mjs +22 -0
  116. package/recipes/accordion.d.ts +27 -0
  117. package/recipes/accordion.mjs +50 -0
  118. package/recipes/avatar-group-recipe.d.ts +27 -0
  119. package/recipes/avatar-group-recipe.mjs +43 -0
  120. package/recipes/avatar-group-slot-recipe.d.ts +27 -0
  121. package/recipes/avatar-group-slot-recipe.mjs +43 -0
  122. package/recipes/avatar-recipe.d.ts +30 -0
  123. package/recipes/avatar-recipe.mjs +122 -0
  124. package/recipes/avatar-slot-recipe.d.ts +29 -0
  125. package/recipes/avatar-slot-recipe.mjs +116 -0
  126. package/recipes/badge-recipe.d.ts +29 -0
  127. package/recipes/badge-recipe.mjs +160 -0
  128. package/recipes/button-group-recipe.d.ts +27 -0
  129. package/recipes/button-group-recipe.mjs +22 -0
  130. package/recipes/button-recipe.d.ts +28 -0
  131. package/recipes/button-recipe.mjs +94 -0
  132. package/recipes/checkbox-slot-recipe.d.ts +27 -0
  133. package/recipes/checkbox-slot-recipe.mjs +38 -0
  134. package/recipes/create-recipe.d.ts +1 -0
  135. package/recipes/create-recipe.mjs +79 -0
  136. package/recipes/icon-recipe.d.ts +27 -0
  137. package/recipes/icon-recipe.mjs +29 -0
  138. package/recipes/index.d.ts +30 -0
  139. package/recipes/index.mjs +29 -0
  140. package/recipes/input-addon-recipe.d.ts +29 -0
  141. package/recipes/input-addon-recipe.mjs +107 -0
  142. package/recipes/input-addon-slot-recipe.d.ts +28 -0
  143. package/recipes/input-addon-slot-recipe.mjs +45 -0
  144. package/recipes/input-group-recipe.d.ts +27 -0
  145. package/recipes/input-group-recipe.mjs +30 -0
  146. package/recipes/input-group-slot-recipe.d.ts +27 -0
  147. package/recipes/input-group-slot-recipe.mjs +30 -0
  148. package/recipes/input-recipe.d.ts +30 -0
  149. package/recipes/input-recipe.mjs +63 -0
  150. package/recipes/input-slot-recipe.d.ts +28 -0
  151. package/recipes/input-slot-recipe.mjs +53 -0
  152. package/recipes/popover-content-recipe.d.ts +28 -0
  153. package/recipes/popover-content-recipe.mjs +34 -0
  154. package/recipes/popover-list-item-recipe.d.ts +27 -0
  155. package/recipes/popover-list-item-recipe.mjs +22 -0
  156. package/recipes/popover-list-recipe.d.ts +27 -0
  157. package/recipes/popover-list-recipe.mjs +22 -0
  158. package/recipes/progress-slot-recipe.d.ts +28 -0
  159. package/recipes/progress-slot-recipe.mjs +57 -0
  160. package/recipes/radio-slot-recipe.d.ts +27 -0
  161. package/recipes/radio-slot-recipe.mjs +38 -0
  162. package/recipes/select-slot-recipe.d.ts +27 -0
  163. package/recipes/select-slot-recipe.mjs +51 -0
  164. package/recipes/selected-border-recipe.d.ts +28 -0
  165. package/recipes/selected-border-recipe.mjs +88 -0
  166. package/recipes/shared-slot-recipe.d.ts +27 -0
  167. package/recipes/shared-slot-recipe.mjs +30 -0
  168. package/recipes/spinner-recipe.d.ts +27 -0
  169. package/recipes/spinner-recipe.mjs +29 -0
  170. package/recipes/tab-list-recipe.d.ts +27 -0
  171. package/recipes/tab-list-recipe.mjs +22 -0
  172. package/recipes/tab-recipe.d.ts +28 -0
  173. package/recipes/tab-recipe.mjs +87 -0
  174. package/recipes/table-container-recipe.d.ts +27 -0
  175. package/recipes/table-container-recipe.mjs +22 -0
  176. package/recipes/table-head-recipe.d.ts +27 -0
  177. package/recipes/table-head-recipe.mjs +22 -0
  178. package/recipes/table-recipe.d.ts +27 -0
  179. package/recipes/table-recipe.mjs +22 -0
  180. package/recipes/tag-recipe.d.ts +28 -0
  181. package/recipes/tag-recipe.mjs +66 -0
  182. package/recipes/tag-slot-recipe.d.ts +28 -0
  183. package/recipes/tag-slot-recipe.mjs +66 -0
  184. package/recipes/text-recipe.d.ts +28 -0
  185. package/recipes/text-recipe.mjs +40 -0
  186. package/recipes/textarea-recipe.d.ts +27 -0
  187. package/recipes/textarea-recipe.mjs +26 -0
  188. package/recipes/toggle-slot-recipe.d.ts +27 -0
  189. package/recipes/toggle-slot-recipe.mjs +38 -0
  190. package/recipes/tooltip-recipe.d.ts +27 -0
  191. package/recipes/tooltip-recipe.mjs +22 -0
  192. package/reset.css +214 -0
  193. package/styles.css +246 -0
  194. package/tokens/index.css +179 -0
  195. package/tokens/index.d.ts +9 -0
  196. package/tokens/index.mjs +848 -0
  197. package/tokens/keyframes.css +23 -0
  198. package/tokens/tokens.d.ts +57 -0
  199. package/types/composition.d.ts +111 -0
  200. package/types/conditions.d.ts +256 -0
  201. package/types/csstype.d.ts +20749 -0
  202. package/types/global.d.ts +19 -0
  203. package/types/index.d.ts +8 -0
  204. package/types/jsx.d.ts +54 -0
  205. package/types/parts.d.ts +8 -0
  206. package/types/pattern.d.ts +63 -0
  207. package/types/prop-type.d.ts +317 -0
  208. package/types/recipe.d.ts +146 -0
  209. package/types/selectors.d.ts +59 -0
  210. package/types/style-props.d.ts +653 -0
  211. package/types/system-types.d.ts +93 -0
@@ -0,0 +1,16 @@
1
+
2
+ > @pixel3-poc/styled-system@ build /Users/SastraNababan/mekari/pixel3-research/poc-pixel3/packages/styled
3
+ > tsup
4
+
5
+ CLI Building entry: src/index.ts
6
+ CLI Using tsconfig: ../../tsconfig.json
7
+ CLI tsup v7.2.0
8
+ CLI Using tsup config: /Users/SastraNababan/mekari/pixel3-research/poc-pixel3/packages/styled/tsup.config.ts
9
+ CLI Target: es2019
10
+ CLI Cleaning output folder
11
+ ESM Build start
12
+ CJS Build start
13
+ CJS dist/index.js 1.82 KB
14
+ CJS ⚡️ Build success in 679ms
15
+ ESM dist/index.mjs 887.00 B
16
+ ESM ⚡️ Build success in 679ms
@@ -0,0 +1,10 @@
1
+ @layer utilities {
2
+
3
+ .pixel-fs_xl {
4
+ font-size: var(--pixel-font-sizes-xl)
5
+ }
6
+
7
+ .pixel-font_bold {
8
+ font-weight: var(--pixel-font-weights-bold)
9
+ }
10
+ }
@@ -0,0 +1,166 @@
1
+ @layer utilities {
2
+ .pixel-text_white {
3
+ color: var(--pixel-colors-white)
4
+ }
5
+
6
+ .pixel-pos_relative {
7
+ position: relative
8
+ }
9
+
10
+ .pixel-d_inline-flex {
11
+ display: inline-flex
12
+ }
13
+
14
+ .pixel-items_center {
15
+ align-items: center
16
+ }
17
+
18
+ .pixel-justify_center {
19
+ justify-content: center
20
+ }
21
+
22
+ .pixel-align_top {
23
+ vertical-align: top
24
+ }
25
+
26
+ .pixel-shrink_0 {
27
+ flex-shrink: 0
28
+ }
29
+
30
+ .pixel-font_semibold {
31
+ font-weight: var(--pixel-font-weights-semibold)
32
+ }
33
+
34
+ .pixel-text_uppercase {
35
+ text-transform: uppercase
36
+ }
37
+
38
+ .pixel-select_none {
39
+ -webkit-user-select: none;
40
+ user-select: none
41
+ }
42
+
43
+ .pixel-rounded_full {
44
+ border-radius: var(--pixel-radii-full)
45
+ }
46
+
47
+ .pixel-bg_gray\.50 {
48
+ background-color: var(--pixel-colors-gray-50)
49
+ }
50
+
51
+ .pixel-bg_sky\.400 {
52
+ background-color: var(--pixel-colors-sky-400)
53
+ }
54
+
55
+ .pixel-bg_teal\.400 {
56
+ background-color: var(--pixel-colors-teal-400)
57
+ }
58
+
59
+ .pixel-bg_violet\.400 {
60
+ background-color: var(--pixel-colors-violet-400)
61
+ }
62
+
63
+ .pixel-bg_amber\.400 {
64
+ background-color: var(--pixel-colors-amber-400)
65
+ }
66
+
67
+ .pixel-bg_rose\.400 {
68
+ background-color: var(--pixel-colors-rose-400)
69
+ }
70
+
71
+ .pixel-bg_stone\.400 {
72
+ background-color: var(--pixel-colors-stone-400)
73
+ }
74
+
75
+ .pixel-bg_lime\.400 {
76
+ background-color: var(--pixel-colors-lime-400)
77
+ }
78
+
79
+ .pixel-bg_pink\.400 {
80
+ background-color: var(--pixel-colors-pink-400)
81
+ }
82
+
83
+ .pixel-w_6 {
84
+ width: var(--pixel-sizes-6)
85
+ }
86
+
87
+ .pixel-h_6 {
88
+ height: var(--pixel-sizes-6)
89
+ }
90
+
91
+ .pixel-fs_xs {
92
+ font-size: var(--pixel-font-sizes-xs)
93
+ }
94
+
95
+ .pixel-w_8 {
96
+ width: var(--pixel-sizes-8)
97
+ }
98
+
99
+ .pixel-h_8 {
100
+ height: var(--pixel-sizes-8)
101
+ }
102
+
103
+ .pixel-fs_sm {
104
+ font-size: var(--pixel-font-sizes-sm)
105
+ }
106
+
107
+ .pixel-w_12 {
108
+ width: var(--pixel-sizes-12)
109
+ }
110
+
111
+ .pixel-h_12 {
112
+ height: var(--pixel-sizes-12)
113
+ }
114
+
115
+ .pixel-fs_lg {
116
+ font-size: var(--pixel-font-sizes-lg)
117
+ }
118
+
119
+ .pixel-w_20 {
120
+ width: var(--pixel-sizes-20)
121
+ }
122
+
123
+ .pixel-h_20 {
124
+ height: var(--pixel-sizes-20)
125
+ }
126
+
127
+ .pixel-fs_2xl {
128
+ font-size: var(--pixel-font-sizes-2xl)
129
+ }
130
+
131
+ .pixel-border-width_0\.125rem {
132
+ border-width: 0.125rem
133
+ }
134
+
135
+ .pixel-rounded_sm {
136
+ border-radius: var(--pixel-radii-sm)
137
+ }
138
+
139
+ .pixel-rounded_md {
140
+ border-radius: var(--pixel-radii-md)
141
+ }
142
+
143
+ .pixel-rounded_lg {
144
+ border-radius: var(--pixel-radii-lg)
145
+ }
146
+
147
+ .pixel-rounded_xl {
148
+ border-radius: var(--pixel-radii-xl)
149
+ }
150
+
151
+ .pixel-text_gray\.600 {
152
+ color: var(--pixel-colors-gray-600)
153
+ }
154
+
155
+ .pixel-w_100\% {
156
+ width: 100%
157
+ }
158
+
159
+ .pixel-h_100\% {
160
+ height: 100%
161
+ }
162
+
163
+ .pixel-object_cover {
164
+ object-fit: cover
165
+ }
166
+ }
@@ -0,0 +1,150 @@
1
+ @layer utilities {
2
+
3
+ .pixel-bg_gray\.400 {
4
+ background-color: var(--pixel-colors-gray-400)
5
+ }
6
+
7
+ .pixel-d_inline-flex {
8
+ display: inline-flex
9
+ }
10
+
11
+ .pixel-items_center {
12
+ align-items: center
13
+ }
14
+
15
+ .pixel-shrink_0 {
16
+ flex-shrink: 0
17
+ }
18
+
19
+ .pixel-justify_center {
20
+ justify-content: center
21
+ }
22
+
23
+ .pixel-pos_relative {
24
+ position: relative
25
+ }
26
+
27
+ .pixel-font_semibold {
28
+ font-weight: var(--pixel-font-weights-semibold)
29
+ }
30
+
31
+ .pixel-align_top {
32
+ vertical-align: top
33
+ }
34
+
35
+ .pixel-bg_red\.200 {
36
+ background: var(--pixel-colors-red-200)
37
+ }
38
+
39
+ .pixel-text_white {
40
+ color: var(--pixel-colors-white)
41
+ }
42
+
43
+ .pixel-border-width_1px {
44
+ border-width: 1px
45
+ }
46
+
47
+ .pixel-border_red\.200 {
48
+ border-color: var(--pixel-colors-red-200)
49
+ }
50
+
51
+ .pixel-p_4 {
52
+ padding: var(--pixel-spacing-4)
53
+ }
54
+
55
+ .pixel-fs_12px {
56
+ font-size: 12px
57
+ }
58
+
59
+ .pixel-p_8 {
60
+ padding: var(--pixel-spacing-8)
61
+ }
62
+
63
+ .pixel-fs_24px {
64
+ font-size: 24px
65
+ }
66
+
67
+ .pixel-leading_xs {
68
+ line-height: xs
69
+ }
70
+
71
+ .pixel-leading_sm {
72
+ line-height: sm
73
+ }
74
+
75
+ .pixel-leading_lg {
76
+ line-height: lg
77
+ }
78
+
79
+ .pixel-leading_xl {
80
+ line-height: xl
81
+ }
82
+
83
+ .pixel-rounded_full {
84
+ border-radius: var(--pixel-radii-full)
85
+ }
86
+
87
+ .pixel-w_6 {
88
+ width: var(--pixel-sizes-6)
89
+ }
90
+
91
+ .pixel-h_6 {
92
+ height: var(--pixel-sizes-6)
93
+ }
94
+
95
+ .pixel-fs_xs {
96
+ font-size: var(--pixel-font-sizes-xs)
97
+ }
98
+
99
+ .pixel-w_8 {
100
+ width: var(--pixel-sizes-8)
101
+ }
102
+
103
+ .pixel-h_8 {
104
+ height: var(--pixel-sizes-8)
105
+ }
106
+
107
+ .pixel-fs_sm {
108
+ font-size: var(--pixel-font-sizes-sm)
109
+ }
110
+
111
+ .pixel-w_12 {
112
+ width: var(--pixel-sizes-12)
113
+ }
114
+
115
+ .pixel-h_12 {
116
+ height: var(--pixel-sizes-12)
117
+ }
118
+
119
+ .pixel-fs_lg {
120
+ font-size: var(--pixel-font-sizes-lg)
121
+ }
122
+
123
+ .pixel-w_20 {
124
+ width: var(--pixel-sizes-20)
125
+ }
126
+
127
+ .pixel-h_20 {
128
+ height: var(--pixel-sizes-20)
129
+ }
130
+
131
+ .pixel-fs_2xl {
132
+ font-size: var(--pixel-font-sizes-2xl)
133
+ }
134
+
135
+ .pixel-rounded_sm {
136
+ border-radius: var(--pixel-radii-sm)
137
+ }
138
+
139
+ .pixel-rounded_md {
140
+ border-radius: var(--pixel-radii-md)
141
+ }
142
+
143
+ .pixel-rounded_lg {
144
+ border-radius: var(--pixel-radii-lg)
145
+ }
146
+
147
+ .pixel-rounded_xl {
148
+ border-radius: var(--pixel-radii-xl)
149
+ }
150
+ }
@@ -0,0 +1,171 @@
1
+ @layer utilities {
2
+
3
+ .pixel-text_white {
4
+ color: var(--pixel-colors-white)
5
+ }
6
+
7
+ .pixel-text_uppercase {
8
+ text-transform: uppercase
9
+ }
10
+
11
+ .pixel-select_none {
12
+ -webkit-user-select: none;
13
+ user-select: none
14
+ }
15
+
16
+ .pixel-bg_gray\.400 {
17
+ background-color: var(--pixel-colors-gray-400)
18
+ }
19
+
20
+ .pixel-d_inline-flex {
21
+ display: inline-flex
22
+ }
23
+
24
+ .pixel-items_center {
25
+ align-items: center
26
+ }
27
+
28
+ .pixel-shrink_0 {
29
+ flex-shrink: 0
30
+ }
31
+
32
+ .pixel-justify_center {
33
+ justify-content: center
34
+ }
35
+
36
+ .pixel-pos_relative {
37
+ position: relative
38
+ }
39
+
40
+ .pixel-font_semibold {
41
+ font-weight: var(--pixel-font-weights-semibold)
42
+ }
43
+
44
+ .pixel-align_top {
45
+ vertical-align: top
46
+ }
47
+
48
+ .pixel-bg_teal\.50 {
49
+ background-color: var(--pixel-colors-teal-50)
50
+ }
51
+
52
+ .pixel-border-width_0\.5 {
53
+ border-width: 0.5px
54
+ }
55
+
56
+ .pixel-border_pink\.400 {
57
+ border-color: var(--pixel-colors-pink-400)
58
+ }
59
+
60
+ .pixel-rounded_full {
61
+ border-radius: var(--pixel-radii-full)
62
+ }
63
+
64
+ .pixel-bg_gray\.50 {
65
+ background-color: var(--pixel-colors-gray-50)
66
+ }
67
+
68
+ .pixel-bg_sky\.400 {
69
+ background-color: var(--pixel-colors-sky-400)
70
+ }
71
+
72
+ .pixel-bg_teal\.400 {
73
+ background-color: var(--pixel-colors-teal-400)
74
+ }
75
+
76
+ .pixel-bg_violet\.400 {
77
+ background-color: var(--pixel-colors-violet-400)
78
+ }
79
+
80
+ .pixel-bg_amber\.400 {
81
+ background-color: var(--pixel-colors-amber-400)
82
+ }
83
+
84
+ .pixel-bg_rose\.400 {
85
+ background-color: var(--pixel-colors-rose-400)
86
+ }
87
+
88
+ .pixel-bg_stone\.400 {
89
+ background-color: var(--pixel-colors-stone-400)
90
+ }
91
+
92
+ .pixel-bg_lime\.400 {
93
+ background-color: var(--pixel-colors-lime-400)
94
+ }
95
+
96
+ .pixel-bg_pink\.400 {
97
+ background-color: var(--pixel-colors-pink-400)
98
+ }
99
+
100
+ .pixel-w_6 {
101
+ width: var(--pixel-sizes-6)
102
+ }
103
+
104
+ .pixel-h_6 {
105
+ height: var(--pixel-sizes-6)
106
+ }
107
+
108
+ .pixel-fs_xs {
109
+ font-size: var(--pixel-font-sizes-xs)
110
+ }
111
+
112
+ .pixel-w_8 {
113
+ width: var(--pixel-sizes-8)
114
+ }
115
+
116
+ .pixel-h_8 {
117
+ height: var(--pixel-sizes-8)
118
+ }
119
+
120
+ .pixel-fs_sm {
121
+ font-size: var(--pixel-font-sizes-sm)
122
+ }
123
+
124
+ .pixel-w_12 {
125
+ width: var(--pixel-sizes-12)
126
+ }
127
+
128
+ .pixel-h_12 {
129
+ height: var(--pixel-sizes-12)
130
+ }
131
+
132
+ .pixel-fs_lg {
133
+ font-size: var(--pixel-font-sizes-lg)
134
+ }
135
+
136
+ .pixel-w_20 {
137
+ width: var(--pixel-sizes-20)
138
+ }
139
+
140
+ .pixel-h_20 {
141
+ height: var(--pixel-sizes-20)
142
+ }
143
+
144
+ .pixel-fs_2xl {
145
+ font-size: var(--pixel-font-sizes-2xl)
146
+ }
147
+
148
+ .pixel-border-width_0\.125rem {
149
+ border-width: 0.125rem
150
+ }
151
+
152
+ .pixel-rounded_sm {
153
+ border-radius: var(--pixel-radii-sm)
154
+ }
155
+
156
+ .pixel-rounded_md {
157
+ border-radius: var(--pixel-radii-md)
158
+ }
159
+
160
+ .pixel-rounded_lg {
161
+ border-radius: var(--pixel-radii-lg)
162
+ }
163
+
164
+ .pixel-rounded_xl {
165
+ border-radius: var(--pixel-radii-xl)
166
+ }
167
+
168
+ .pixel-text_gray\.600 {
169
+ color: var(--pixel-colors-gray-600)
170
+ }
171
+ }
@@ -0,0 +1,191 @@
1
+ @layer utilities {
2
+
3
+ .pixel-text_white {
4
+ color: var(--pixel-colors-white)
5
+ }
6
+
7
+ .pixel-pos_relative {
8
+ position: relative
9
+ }
10
+
11
+ .pixel-d_inline-flex {
12
+ display: inline-flex
13
+ }
14
+
15
+ .pixel-align_top {
16
+ vertical-align: top
17
+ }
18
+
19
+ .pixel-shrink_0 {
20
+ flex-shrink: 0
21
+ }
22
+
23
+ .pixel-text_uppercase {
24
+ text-transform: uppercase
25
+ }
26
+
27
+ .pixel-cursor_pointer {
28
+ cursor: pointer
29
+ }
30
+
31
+ .pixel-bg_gray\.50 {
32
+ background-color: var(--pixel-colors-gray-50)
33
+ }
34
+
35
+ .pixel-bg_sky\.400 {
36
+ background-color: var(--pixel-colors-sky-400)
37
+ }
38
+
39
+ .pixel-bg_teal\.400 {
40
+ background-color: var(--pixel-colors-teal-400)
41
+ }
42
+
43
+ .pixel-bg_violet\.400 {
44
+ background-color: var(--pixel-colors-violet-400)
45
+ }
46
+
47
+ .pixel-bg_amber\.400 {
48
+ background-color: var(--pixel-colors-amber-400)
49
+ }
50
+
51
+ .pixel-bg_rose\.400 {
52
+ background-color: var(--pixel-colors-rose-400)
53
+ }
54
+
55
+ .pixel-bg_stone\.400 {
56
+ background-color: var(--pixel-colors-stone-400)
57
+ }
58
+
59
+ .pixel-bg_lime\.400 {
60
+ background-color: var(--pixel-colors-lime-400)
61
+ }
62
+
63
+ .pixel-bg_pink\.400 {
64
+ background-color: var(--pixel-colors-pink-400)
65
+ }
66
+
67
+ .pixel-border-width_0\.125rem {
68
+ border-width: 0.125rem
69
+ }
70
+
71
+ .pixel-text_gray\.600 {
72
+ color: var(--pixel-colors-gray-600)
73
+ }
74
+
75
+ .pixel-w_100\% {
76
+ width: 100%
77
+ }
78
+
79
+ .pixel-h_100\% {
80
+ height: 100%
81
+ }
82
+
83
+ .pixel-object_cover {
84
+ object-fit: cover
85
+ }
86
+
87
+ .pixel-rounded_md {
88
+ border-radius: var(--pixel-radii-md)
89
+ }
90
+
91
+ .pixel-rounded_sm {
92
+ border-radius: var(--pixel-radii-sm)
93
+ }
94
+
95
+ .pixel-rounded_lg {
96
+ border-radius: var(--pixel-radii-lg)
97
+ }
98
+
99
+ .pixel-rounded_xl {
100
+ border-radius: var(--pixel-radii-xl)
101
+ }
102
+
103
+ .pixel-z_0 {
104
+ z-index: 0
105
+ }
106
+
107
+ .pixel-ml_2 {
108
+ margin-left: var(--pixel-spacing-2)
109
+ }
110
+
111
+ .pixel-text_blue\.400 {
112
+ color: var(--pixel-colors-blue-400)
113
+ }
114
+
115
+ .pixel-bg_blue\.50 {
116
+ background-color: var(--pixel-colors-blue-50)
117
+ }
118
+
119
+ .pixel-font_semibold {
120
+ font-weight: var(--pixel-font-weights-semibold)
121
+ }
122
+
123
+ .pixel-d_flex {
124
+ display: flex
125
+ }
126
+
127
+ .pixel-items_center {
128
+ align-items: center
129
+ }
130
+
131
+ .pixel-justify_center {
132
+ justify-content: center
133
+ }
134
+
135
+ .pixel-rounded_full {
136
+ border-radius: var(--pixel-radii-full)
137
+ }
138
+
139
+ .pixel-select_none {
140
+ -webkit-user-select: none;
141
+ user-select: none
142
+ }
143
+
144
+ .pixel-w_6 {
145
+ width: var(--pixel-sizes-6)
146
+ }
147
+
148
+ .pixel-h_6 {
149
+ height: var(--pixel-sizes-6)
150
+ }
151
+
152
+ .pixel-fs_xs {
153
+ font-size: var(--pixel-font-sizes-xs)
154
+ }
155
+
156
+ .pixel-w_8 {
157
+ width: var(--pixel-sizes-8)
158
+ }
159
+
160
+ .pixel-h_8 {
161
+ height: var(--pixel-sizes-8)
162
+ }
163
+
164
+ .pixel-fs_sm {
165
+ font-size: var(--pixel-font-sizes-sm)
166
+ }
167
+
168
+ .pixel-w_12 {
169
+ width: var(--pixel-sizes-12)
170
+ }
171
+
172
+ .pixel-h_12 {
173
+ height: var(--pixel-sizes-12)
174
+ }
175
+
176
+ .pixel-fs_lg {
177
+ font-size: var(--pixel-font-sizes-lg)
178
+ }
179
+
180
+ .pixel-w_20 {
181
+ width: var(--pixel-sizes-20)
182
+ }
183
+
184
+ .pixel-h_20 {
185
+ height: var(--pixel-sizes-20)
186
+ }
187
+
188
+ .pixel-fs_2xl {
189
+ font-size: var(--pixel-font-sizes-2xl)
190
+ }
191
+ }
@@ -0,0 +1,10 @@
1
+ @layer utilities {
2
+
3
+ .pixel-fs_xl {
4
+ font-size: var(--pixel-font-sizes-xl)
5
+ }
6
+
7
+ .pixel-font_bold {
8
+ font-weight: var(--pixel-font-weights-bold)
9
+ }
10
+ }