@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
package/tokens/index.css ADDED
@@ -0,0 +1,179 @@
1
+ @layer pixel_tokens {
2
+ :where(:root, :host) {
3
+ --mp-borders-none: none;
4
+ --mp-borders-sm: 1px;
5
+ --mp-borders-md: 1.5px;
6
+ --mp-borders-lg: 2px;
7
+ --mp-colors-currentcolor: currentcolor;
8
+ --mp-colors-dark: #232933;
9
+ --mp-colors-white: #FFFFFF;
10
+ --mp-colors-background: #F1F5F9;
11
+ --mp-colors-overlay: rgba(22, 26, 32, 0.8);
12
+ --mp-colors-brand-capital: #2F5573;
13
+ --mp-colors-brand-esign: #00C853;
14
+ --mp-colors-brand-expense: #183883;
15
+ --mp-colors-brand-flex: #7C4DFF;
16
+ --mp-colors-brand-jurnal: #40C3FF;
17
+ --mp-colors-brand-klikpajak: #FF9100;
18
+ --mp-colors-brand-mekari: #651FFF;
19
+ --mp-colors-brand-qontak: #2979FF;
20
+ --mp-colors-brand-talenta: #F22929;
21
+ --mp-colors-brand-university: #448AFF;
22
+ --mp-colors-gray-25: #F8F9FB;
23
+ --mp-colors-gray-50: #EDF0F2;
24
+ --mp-colors-gray-100: #D0D6DD;
25
+ --mp-colors-gray-400: #8B95A5;
26
+ --mp-colors-gray-600: #626B79;
27
+ --mp-colors-blue-50: #EAECFB;
28
+ --mp-colors-blue-100: #D5DEFF;
29
+ --mp-colors-blue-400: #4B61DD;
30
+ --mp-colors-blue-500: #1C44D5;
31
+ --mp-colors-blue-700: #0031BE;
32
+ --mp-colors-red-50: #FDECEE;
33
+ --mp-colors-red-400: #DA473F;
34
+ --mp-colors-red-500: #C83E39;
35
+ --mp-colors-red-700: #AB3129;
36
+ --mp-colors-green-50: #E8F5EB;
37
+ --mp-colors-green-400: #68BE79;
38
+ --mp-colors-green-500: #4FB262;
39
+ --mp-colors-green-700: #3C914D;
40
+ --mp-colors-orange-50: #FBF3DD;
41
+ --mp-colors-orange-400: #E0AB00;
42
+ --mp-colors-orange-500: #DE9400;
43
+ --mp-colors-orange-700: #DB8000;
44
+ --mp-colors-sky-100: #60A5FA;
45
+ --mp-colors-sky-400: #3B82F6;
46
+ --mp-colors-teal-100: #2DD4BF;
47
+ --mp-colors-teal-400: #14B8A6;
48
+ --mp-colors-violet-100: #A78BFA;
49
+ --mp-colors-violet-400: #8B5CF6;
50
+ --mp-colors-amber-100: #FBBF24;
51
+ --mp-colors-amber-400: #F59E0B;
52
+ --mp-colors-rose-100: #F87171;
53
+ --mp-colors-rose-400: #EF4444;
54
+ --mp-colors-stone-100: #A1A1AA;
55
+ --mp-colors-stone-400: #71717A;
56
+ --mp-colors-lime-100: #A3E635;
57
+ --mp-colors-lime-400: #84CC16;
58
+ --mp-colors-pink-100: #F472B6;
59
+ --mp-colors-pink-400: #EC4899;
60
+ --mp-colors-apricot-100: #FB923C;
61
+ --mp-colors-apricot-400: #F97316;
62
+ --mp-colors-aqua-100: #22D3EE;
63
+ --mp-colors-aqua-400: #06B6D4;
64
+ --mp-colors-leaf-100: #4ADE80;
65
+ --mp-colors-leaf-400: #22C55E;
66
+ --mp-colors-fuchsia-100: #E879F9;
67
+ --mp-colors-fuchsia-400: #D946EF;
68
+ --mp-colors-ice-50: #E0EEFF;
69
+ --mp-colors-ice-100: #B4D3F2;
70
+ --mp-colors-ash-100: #E7EDF5;
71
+ --mp-durations-slow: 100ms;
72
+ --mp-durations-normal: 250ms;
73
+ --mp-durations-fast: 300ms;
74
+ --mp-fonts-body: "inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
75
+ --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace;
76
+ --mp-font-sizes-xs: 0.625rem;
77
+ --mp-font-sizes-sm: 0.75rem;
78
+ --mp-font-sizes-md: 0.875rem;
79
+ --mp-font-sizes-lg: 1rem;
80
+ --mp-font-sizes-xl: 1.25rem;
81
+ --mp-font-sizes-2xl: 1.5rem;
82
+ --mp-font-weights-regular: 400;
83
+ --mp-font-weights-semi-bold: 600;
84
+ --mp-font-weights-bold: 800;
85
+ --mp-line-heights-xs: 1.2;
86
+ --mp-line-heights-sm: 1.34;
87
+ --mp-line-heights-md: 1.4;
88
+ --mp-line-heights-lg: 1.429;
89
+ --mp-line-heights-xl: 1.5;
90
+ --mp-line-heights-2xl: 1.67;
91
+ --mp-line-heights-3xl: 1.71;
92
+ --mp-letter-spacings-tighter: -0.05em;
93
+ --mp-letter-spacings-tight: -0.025em;
94
+ --mp-letter-spacings-normal: 0;
95
+ --mp-letter-spacings-wide: 0.025em;
96
+ --mp-letter-spacings-wider: 0.05em;
97
+ --mp-letter-spacings-widest: 0.1em;
98
+ --mp-opacity-0: 0;
99
+ --mp-opacity-40: 0.4;
100
+ --mp-opacity-60: 0.6;
101
+ --mp-opacity-100: 1;
102
+ --mp-radii-none: 0;
103
+ --mp-radii-xs: 0.125rem;
104
+ --mp-radii-sm: 0.25rem;
105
+ --mp-radii-md: 0.375rem;
106
+ --mp-radii-lg: 0.5rem;
107
+ --mp-radii-xl: 0.75rem;
108
+ --mp-radii-full: 50%;
109
+ --mp-shadows-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
110
+ --mp-shadows-sm: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
111
+ --mp-shadows-md: 0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.10);
112
+ --mp-shadows-lg: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
113
+ --mp-shadows-focus: 0 0 0 3px rgba(224, 238, 255, 1);
114
+ --mp-shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
115
+ --mp-shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
116
+ --mp-shadows-outline: 0 0 0 3px #E0EEFF;
117
+ --mp-shadows-outline-tab: 0 0 0 2px #E0EEFF;
118
+ --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);
119
+ --mp-shadows-inner: inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06);
120
+ --mp-shadows-none: none;
121
+ --mp-sizes-0: 0;
122
+ --mp-sizes-1: 0.25rem;
123
+ --mp-sizes-2: 0.5rem;
124
+ --mp-sizes-3: 0.75rem;
125
+ --mp-sizes-4: 1rem;
126
+ --mp-sizes-5: 1.25rem;
127
+ --mp-sizes-6: 1.5rem;
128
+ --mp-sizes-7: 1.75rem;
129
+ --mp-sizes-8: 2rem;
130
+ --mp-sizes-9: 2.25rem;
131
+ --mp-sizes-10: 2.5rem;
132
+ --mp-sizes-11: 2.75rem;
133
+ --mp-sizes-12: 3rem;
134
+ --mp-sizes-16: 4rem;
135
+ --mp-sizes-20: 5rem;
136
+ --mp-sizes-22: 5.5rem;
137
+ --mp-sizes-65: 17.5rem;
138
+ --mp-sizes-0\.25: 0.0625rem;
139
+ --mp-sizes-0\.5: 0.125rem;
140
+ --mp-sizes-2\.5: 0.625rem;
141
+ --mp-sizes-7\.5: 1.875rem;
142
+ --mp-sizes-9\.5: 2.375rem;
143
+ --mp-sizes-full: 100%;
144
+ --mp-sizes-breakpoint-sm: 22.5em;
145
+ --mp-sizes-breakpoint-md: 48em;
146
+ --mp-sizes-breakpoint-lg: 64em;
147
+ --mp-sizes-breakpoint-xl: 80em;
148
+ --mp-spacing-0: 0;
149
+ --mp-spacing-1: 0.25rem;
150
+ --mp-spacing-2: 0.5rem;
151
+ --mp-spacing-3: 0.75rem;
152
+ --mp-spacing-4: 1rem;
153
+ --mp-spacing-5: 1.3rem;
154
+ --mp-spacing-6: 1.5rem;
155
+ --mp-spacing-8: 2rem;
156
+ --mp-spacing-12: 3rem;
157
+ --mp-spacing-16: 4rem;
158
+ --mp-spacing-20: 5rem;
159
+ --mp-spacing-24: 6rem;
160
+ --mp-spacing-32: 8rem;
161
+ --mp-spacing-40: 10rem;
162
+ --mp-spacing-64: 16rem;
163
+ --mp-spacing-0\.5: 0.125rem;
164
+ --mp-spacing-1\.5: 0.375rem;
165
+ --mp-z-index-hide: -1;
166
+ --mp-z-index-base: 0;
167
+ --mp-z-index-docked: 10;
168
+ --mp-z-index-sticky: 1100;
169
+ --mp-z-index-overlay: 1300;
170
+ --mp-z-index-modal: 1400;
171
+ --mp-z-index-popover: 1500;
172
+ --mp-z-index-tooltip: 1800;
173
+ --mp-breakpoints-sm: 22.5em;
174
+ --mp-breakpoints-md: 48em;
175
+ --mp-breakpoints-lg: 64em;
176
+ --mp-breakpoints-xl: 80em
177
+ }
178
+ }
179
+
package/tokens/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ /* eslint-disable */
2
+ import type { Token } from './tokens';
3
+
4
+ export declare const token: {
5
+ (path: Token, fallback?: string): string
6
+ var: (path: Token, fallback?: string) => string
7
+ }
8
+
9
+ export * from './tokens';