@blockle/blocks 0.1.0 → 0.2.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 (117) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +43 -12
  3. package/dist/index.cjs +3136 -0
  4. package/dist/index.d.ts +1 -28
  5. package/dist/index.mjs +3136 -0
  6. package/dist/reset.css.cjs +5 -0
  7. package/dist/reset.css.d.ts +295 -0
  8. package/dist/reset.css.mjs +4 -0
  9. package/dist/side-effects/lib/css/atoms/atoms.cjs +2 -0
  10. package/dist/side-effects/lib/css/atoms/atoms.mjs +1 -0
  11. package/dist/side-effects/themes/momotaro/index.cjs +2 -0
  12. package/dist/side-effects/themes/momotaro/index.mjs +1 -0
  13. package/dist/styles/lib/css/atoms/atomicProperties.cjs +69 -0
  14. package/dist/styles/lib/css/atoms/atomicProperties.mjs +70 -0
  15. package/dist/styles/lib/css/atoms/breakpoints.cjs +11 -0
  16. package/dist/styles/lib/css/atoms/breakpoints.mjs +12 -0
  17. package/dist/styles/lib/css/atoms/sprinkles.css.cjs +45 -0
  18. package/dist/styles/lib/css/atoms/sprinkles.css.mjs +46 -0
  19. package/dist/styles/lib/css/reset/reset.css.cjs +36 -0
  20. package/dist/styles/lib/css/reset/reset.css.mjs +35 -0
  21. package/dist/styles/lib/css/theme/makeTheme.cjs +10 -0
  22. package/dist/styles/lib/css/theme/makeTheme.mjs +11 -0
  23. package/dist/styles/lib/css/theme/makeVanillaTheme.cjs +15 -0
  24. package/dist/styles/lib/css/theme/makeVanillaTheme.mjs +16 -0
  25. package/dist/styles/lib/css/theme/tokens.cjs +70 -0
  26. package/dist/styles/lib/css/theme/tokens.mjs +71 -0
  27. package/dist/styles/lib/css/theme/vars.css.cjs +9 -0
  28. package/dist/styles/lib/css/theme/vars.css.mjs +10 -0
  29. package/dist/styles/themes/momotaro/momotaroTheme.css.cjs +11 -0
  30. package/dist/styles/themes/momotaro/momotaroTheme.css.mjs +12 -0
  31. package/dist/styles/themes/momotaro/tokens.cjs +70 -0
  32. package/dist/styles/themes/momotaro/tokens.mjs +71 -0
  33. package/dist/themes/momotaro.cjs +4 -0
  34. package/dist/themes/momotaro.d.ts +1 -0
  35. package/dist/themes/momotaro.mjs +4 -0
  36. package/package.json +57 -79
  37. package/reset.css/index.d.ts +1 -0
  38. package/reset.css/package.json +5 -0
  39. package/themes/momotaro/index.d.ts +1 -0
  40. package/themes/momotaro/package.json +5 -0
  41. package/dist/Badge/Badge.d.ts +0 -7
  42. package/dist/Badge/Badge.spec.d.ts +0 -1
  43. package/dist/Badge/Badge.stories.d.ts +0 -1
  44. package/dist/Badge/index.d.ts +0 -1
  45. package/dist/Box/Box.d.ts +0 -10
  46. package/dist/Box/index.d.ts +0 -1
  47. package/dist/Button/Button.d.ts +0 -13
  48. package/dist/Button/Button.spec.d.ts +0 -1
  49. package/dist/Button/Button.stories.d.ts +0 -1
  50. package/dist/Button/index.d.ts +0 -1
  51. package/dist/Card/Card.d.ts +0 -11
  52. package/dist/Card/Card.spec.d.ts +0 -1
  53. package/dist/Card/Card.stories.d.ts +0 -1
  54. package/dist/Card/index.d.ts +0 -1
  55. package/dist/Dialog/Dialog.d.ts +0 -13
  56. package/dist/Dialog/index.d.ts +0 -1
  57. package/dist/Divider/Divider.d.ts +0 -4
  58. package/dist/Divider/index.d.ts +0 -1
  59. package/dist/Drawer/Drawer.d.ts +0 -10
  60. package/dist/Drawer/index.d.ts +0 -1
  61. package/dist/Dropdown/Dropdown.d.ts +0 -17
  62. package/dist/Dropdown/index.d.ts +0 -1
  63. package/dist/FlatButton/FlatButton.d.ts +0 -15
  64. package/dist/FlatButton/index.d.ts +0 -1
  65. package/dist/Grid/Grid.d.ts +0 -10
  66. package/dist/Grid/index.d.ts +0 -1
  67. package/dist/Icon/Icon.d.ts +0 -26
  68. package/dist/Icon/Icon.spec.d.ts +0 -1
  69. package/dist/Icon/index.d.ts +0 -1
  70. package/dist/IconButton/IconButton.d.ts +0 -12
  71. package/dist/IconButton/index.d.ts +0 -1
  72. package/dist/Inline/Inline.d.ts +0 -8
  73. package/dist/Inline/index.d.ts +0 -1
  74. package/dist/Link/Link.d.ts +0 -9
  75. package/dist/Link/index.d.ts +0 -1
  76. package/dist/Loader/Loader.d.ts +0 -4
  77. package/dist/Loader/index.d.ts +0 -1
  78. package/dist/OutlineButton/OutlineButton.d.ts +0 -12
  79. package/dist/OutlineButton/index.d.ts +0 -1
  80. package/dist/Panel/Panel.d.ts +0 -10
  81. package/dist/Panel/index.d.ts +0 -1
  82. package/dist/Paper/Paper.d.ts +0 -14
  83. package/dist/Paper/Paper.spec.d.ts +0 -1
  84. package/dist/Paper/index.d.ts +0 -1
  85. package/dist/RippleBox/RippleBox.d.ts +0 -8
  86. package/dist/RippleBox/createRipple.d.ts +0 -2
  87. package/dist/RippleBox/index.d.ts +0 -1
  88. package/dist/Stack/Stack.d.ts +0 -13
  89. package/dist/Stack/index.d.ts +0 -1
  90. package/dist/Tag/Tag.d.ts +0 -8
  91. package/dist/Tag/index.d.ts +0 -1
  92. package/dist/Text/Text.d.ts +0 -10
  93. package/dist/Text/Text.spec.d.ts +0 -1
  94. package/dist/Text/index.d.ts +0 -1
  95. package/dist/TextField/TextField.d.ts +0 -22
  96. package/dist/TextField/TextField.stories.d.ts +0 -1
  97. package/dist/TextField/index.d.ts +0 -1
  98. package/dist/blockle-blocks.esm.js +0 -823
  99. package/dist/blockle-blocks.js +0 -854
  100. package/dist/blocks.css +0 -2554
  101. package/dist/blocks.css.map +0 -1
  102. package/dist/cx.d.ts +0 -3
  103. package/dist/setupTests.d.ts +0 -1
  104. package/dist/useAnimationState/index.d.ts +0 -1
  105. package/dist/useAnimationState/useAnimationState.d.ts +0 -6
  106. package/dist/useFlip/animate.d.ts +0 -14
  107. package/dist/useFlip/index.d.ts +0 -1
  108. package/dist/useFlip/useFlip.d.ts +0 -8
  109. package/dist/useLayer/index.d.ts +0 -1
  110. package/dist/useLayer/useLayer.d.ts +0 -1
  111. package/dist/useStyles/blocks.d.ts +0 -34
  112. package/dist/useStyles/index.d.ts +0 -2
  113. package/dist/useStyles/useStyles.d.ts +0 -3
  114. package/dist/utils/animate/animateCss.d.ts +0 -11
  115. package/dist/utils/animate/index.d.ts +0 -1
  116. package/dist/utils/getEventPosition.d.ts +0 -6
  117. package/dist/utils/index.d.ts +0 -1
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ const fileScope = require("@vanilla-extract/css/fileScope");
3
+ require("./styles/lib/css/reset/reset.css.cjs");
4
+ fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
5
+ fileScope.endFileScope();
@@ -0,0 +1,295 @@
1
+ import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
+
3
+ type BlocksProviderProps = {
4
+ children: React.ReactNode;
5
+ theme: {
6
+ vars: string;
7
+ };
8
+ };
9
+ declare const BlocksProvider: React.FC<BlocksProviderProps>;
10
+
11
+ declare const atoms: ((props: {
12
+ readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "caution" | "link") | undefined;
13
+ readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
14
+ readonly bottom?: 0 | undefined;
15
+ readonly boxShadow?: ("small" | "medium" | "large") | undefined;
16
+ readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "caution" | "link" | "currentColor" | undefined;
17
+ readonly cursor?: "auto" | "pointer" | undefined;
18
+ readonly fontFamily?: "secondary" | "standard" | undefined;
19
+ readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
20
+ readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
21
+ readonly height?: "auto" | "full" | undefined;
22
+ readonly left?: 0 | undefined;
23
+ readonly maxHeight?: "full" | undefined;
24
+ readonly maxWidth?: "full" | undefined;
25
+ readonly opacity?: 0 | 1 | undefined;
26
+ readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
27
+ readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
28
+ readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
29
+ readonly pointerEvents?: "none" | undefined;
30
+ readonly right?: 0 | undefined;
31
+ readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
32
+ readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
33
+ readonly top?: 0 | undefined;
34
+ readonly userSelect?: "none" | undefined;
35
+ readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
36
+ readonly width?: "auto" | "fit-content" | "full" | undefined;
37
+ readonly wordBreak?: "break-word" | undefined;
38
+ readonly wordWrap?: "break-word" | undefined;
39
+ readonly transition?: ("slow" | "normal" | "fast") | undefined;
40
+ inset?: 0 | undefined;
41
+ } & {
42
+ readonly alignItems?: ("center" | "stretch" | "flex-start" | "flex-end" | {
43
+ mobile?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
44
+ tablet?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
45
+ desktop?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
46
+ wide?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
47
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "stretch" | "flex-start" | "flex-end" | null>;
48
+ readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
49
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
50
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
51
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
52
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
53
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
54
+ readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
55
+ mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
56
+ tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
57
+ desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
58
+ wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
59
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
60
+ readonly flex?: (1 | {
61
+ mobile?: 1 | undefined;
62
+ tablet?: 1 | undefined;
63
+ desktop?: 1 | undefined;
64
+ wide?: 1 | undefined;
65
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
66
+ readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
67
+ mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
68
+ tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
69
+ desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
70
+ wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
71
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
72
+ readonly flexGrow?: (0 | 1 | {
73
+ mobile?: 0 | 1 | undefined;
74
+ tablet?: 0 | 1 | undefined;
75
+ desktop?: 0 | 1 | undefined;
76
+ wide?: 0 | 1 | undefined;
77
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
78
+ readonly flexShrink?: (0 | 1 | {
79
+ mobile?: 0 | 1 | undefined;
80
+ tablet?: 0 | 1 | undefined;
81
+ desktop?: 0 | 1 | undefined;
82
+ wide?: 0 | 1 | undefined;
83
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
84
+ readonly flexWrap?: ("nowrap" | "wrap" | {
85
+ mobile?: "nowrap" | "wrap" | undefined;
86
+ tablet?: "nowrap" | "wrap" | undefined;
87
+ desktop?: "nowrap" | "wrap" | undefined;
88
+ wide?: "nowrap" | "wrap" | undefined;
89
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "nowrap" | "wrap" | null>;
90
+ readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
91
+ mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
92
+ tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
93
+ desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
94
+ wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
95
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
96
+ readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
97
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
98
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
99
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
100
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
101
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
102
+ readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
103
+ mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
104
+ tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
105
+ desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
106
+ wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
107
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
108
+ readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
109
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
110
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
111
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
112
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
113
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
114
+ readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
115
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
116
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
117
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
118
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
119
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
120
+ readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
121
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
122
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
123
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
124
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
126
+ readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
127
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
128
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
129
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
130
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
131
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
132
+ readonly outline?: ("none" | {
133
+ mobile?: "none" | undefined;
134
+ tablet?: "none" | undefined;
135
+ desktop?: "none" | undefined;
136
+ wide?: "none" | undefined;
137
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
138
+ readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
139
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
140
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
141
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
142
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
143
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
144
+ readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
145
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
146
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
147
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
148
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
149
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
150
+ readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
151
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
152
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
153
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
154
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
156
+ readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
157
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
158
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
159
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
160
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
161
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
162
+ readonly position?: ("fixed" | "relative" | "absolute" | "sticky" | "static" | {
163
+ mobile?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
164
+ tablet?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
165
+ desktop?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
166
+ wide?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
167
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "fixed" | "relative" | "absolute" | "sticky" | "static" | null>;
168
+ readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
169
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
170
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
171
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
172
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
173
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
174
+ readonly textAlign?: ("left" | "right" | "center" | "justify" | {
175
+ mobile?: "left" | "right" | "center" | "justify" | undefined;
176
+ tablet?: "left" | "right" | "center" | "justify" | undefined;
177
+ desktop?: "left" | "right" | "center" | "justify" | undefined;
178
+ wide?: "left" | "right" | "center" | "justify" | undefined;
179
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
180
+ margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
181
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
182
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
183
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
184
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
185
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
186
+ marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
187
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
188
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
189
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
190
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
191
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
192
+ marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
193
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
194
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
195
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
196
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
197
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
198
+ padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
199
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
200
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
201
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
202
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
203
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
204
+ paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
205
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
206
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
207
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
208
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
209
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
210
+ paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
211
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
212
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
213
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
214
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
215
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
216
+ placeItems?: ("center" | "flex-start" | "flex-end" | {
217
+ mobile?: "center" | "flex-start" | "flex-end" | undefined;
218
+ tablet?: "center" | "flex-start" | "flex-end" | undefined;
219
+ desktop?: "center" | "flex-start" | "flex-end" | undefined;
220
+ wide?: "center" | "flex-start" | "flex-end" | undefined;
221
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
222
+ }) => string) & {
223
+ properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "transition" | "alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "marginX" | "marginY" | "paddingX" | "paddingY">;
224
+ };
225
+
226
+ declare const vars: {
227
+ space: {
228
+ none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
+ gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
235
+ };
236
+ borderRadius: {
237
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
238
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
239
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
240
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
241
+ };
242
+ color: {
243
+ white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
244
+ black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
245
+ body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
246
+ primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
247
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
+ primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
249
+ secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
250
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
+ secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
+ text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
+ textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
+ textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
+ caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
+ link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
257
+ };
258
+ borderWidth: {
259
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
260
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
261
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
262
+ };
263
+ fontFamily: {
264
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
265
+ standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
266
+ };
267
+ fontSize: {
268
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
272
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
+ };
274
+ fontWeight: {
275
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
276
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
277
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
278
+ };
279
+ transition: {
280
+ slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
281
+ normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
282
+ fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
283
+ };
284
+ shadow: {
285
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
286
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
287
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
288
+ };
289
+ };
290
+
291
+ declare const theme: {
292
+ vars: string;
293
+ };
294
+
295
+ export { BlocksProvider, atoms, theme, vars };
@@ -0,0 +1,4 @@
1
+ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
+ import "./styles/lib/css/reset/reset.css.mjs";
3
+ setFileScope("src/entries/reset.css.ts", "blocks");
4
+ endFileScope();
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ require("../../../../styles/lib/css/atoms/sprinkles.css.cjs");
@@ -0,0 +1 @@
1
+ import "../../../../styles/lib/css/atoms/sprinkles.css.mjs";
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ require("../../../styles/themes/momotaro/momotaroTheme.css.cjs");
@@ -0,0 +1 @@
1
+ import "../../../styles/themes/momotaro/momotaroTheme.css.mjs";
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ const styles_lib_css_theme_vars_css_cjs = require("../theme/vars.css.cjs");
3
+ const unresponsiveProperties = {
4
+ backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color,
5
+ borderRadius: styles_lib_css_theme_vars_css_cjs.vars.borderRadius,
6
+ bottom: [0],
7
+ boxShadow: styles_lib_css_theme_vars_css_cjs.vars.shadow,
8
+ color: { ...styles_lib_css_theme_vars_css_cjs.vars.color, currentColor: "currentColor" },
9
+ cursor: ["auto", "pointer"],
10
+ fontFamily: styles_lib_css_theme_vars_css_cjs.vars.fontFamily,
11
+ fontStyle: ["normal", "italic", "oblique"],
12
+ fontWeight: styles_lib_css_theme_vars_css_cjs.vars.fontWeight,
13
+ height: { auto: "auto", full: "100%" },
14
+ left: [0],
15
+ maxHeight: { full: "100%" },
16
+ maxWidth: { full: "100%" },
17
+ opacity: [0, 1],
18
+ overflow: ["hidden", "scroll", "visible", "auto"],
19
+ overflowX: ["hidden", "scroll", "visible", "auto"],
20
+ overflowY: ["hidden", "scroll", "visible", "auto"],
21
+ pointerEvents: ["none"],
22
+ right: [0],
23
+ textDecoration: ["overline", "line-through", "underline", "none"],
24
+ textTransform: ["lowercase", "uppercase", "capitalize"],
25
+ top: [0],
26
+ userSelect: ["none"],
27
+ whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
28
+ width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
29
+ wordBreak: ["break-word"],
30
+ wordWrap: ["break-word"],
31
+ transition: styles_lib_css_theme_vars_css_cjs.vars.transition
32
+ };
33
+ const marginSpace = { auto: "auto", ...styles_lib_css_theme_vars_css_cjs.vars.space };
34
+ const responsiveProperties = {
35
+ alignItems: ["stretch", "center", "flex-start", "flex-end"],
36
+ columnGap: styles_lib_css_theme_vars_css_cjs.vars.space,
37
+ display: [
38
+ "none",
39
+ "flex",
40
+ "inline-flex",
41
+ "block",
42
+ "inline",
43
+ "inline-block",
44
+ "grid",
45
+ "inline-grid"
46
+ ],
47
+ flex: [1],
48
+ flexDirection: ["row", "row-reverse", "column", "column-reverse"],
49
+ flexGrow: [0, 1],
50
+ flexShrink: [0, 1],
51
+ flexWrap: ["nowrap", "wrap"],
52
+ fontSize: styles_lib_css_theme_vars_css_cjs.vars.fontSize,
53
+ gap: styles_lib_css_theme_vars_css_cjs.vars.space,
54
+ justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
55
+ marginBottom: marginSpace,
56
+ marginLeft: marginSpace,
57
+ marginRight: marginSpace,
58
+ marginTop: marginSpace,
59
+ outline: ["none"],
60
+ paddingBottom: styles_lib_css_theme_vars_css_cjs.vars.space,
61
+ paddingLeft: styles_lib_css_theme_vars_css_cjs.vars.space,
62
+ paddingRight: styles_lib_css_theme_vars_css_cjs.vars.space,
63
+ paddingTop: styles_lib_css_theme_vars_css_cjs.vars.space,
64
+ position: ["relative", "fixed", "absolute", "sticky", "static"],
65
+ rowGap: styles_lib_css_theme_vars_css_cjs.vars.space,
66
+ textAlign: ["center", "left", "right", "justify"]
67
+ };
68
+ exports.responsiveProperties = responsiveProperties;
69
+ exports.unresponsiveProperties = unresponsiveProperties;
@@ -0,0 +1,70 @@
1
+ import { vars } from "../theme/vars.css.mjs";
2
+ const unresponsiveProperties = {
3
+ backgroundColor: vars.color,
4
+ borderRadius: vars.borderRadius,
5
+ bottom: [0],
6
+ boxShadow: vars.shadow,
7
+ color: { ...vars.color, currentColor: "currentColor" },
8
+ cursor: ["auto", "pointer"],
9
+ fontFamily: vars.fontFamily,
10
+ fontStyle: ["normal", "italic", "oblique"],
11
+ fontWeight: vars.fontWeight,
12
+ height: { auto: "auto", full: "100%" },
13
+ left: [0],
14
+ maxHeight: { full: "100%" },
15
+ maxWidth: { full: "100%" },
16
+ opacity: [0, 1],
17
+ overflow: ["hidden", "scroll", "visible", "auto"],
18
+ overflowX: ["hidden", "scroll", "visible", "auto"],
19
+ overflowY: ["hidden", "scroll", "visible", "auto"],
20
+ pointerEvents: ["none"],
21
+ right: [0],
22
+ textDecoration: ["overline", "line-through", "underline", "none"],
23
+ textTransform: ["lowercase", "uppercase", "capitalize"],
24
+ top: [0],
25
+ userSelect: ["none"],
26
+ whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
27
+ width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
28
+ wordBreak: ["break-word"],
29
+ wordWrap: ["break-word"],
30
+ transition: vars.transition
31
+ };
32
+ const marginSpace = { auto: "auto", ...vars.space };
33
+ const responsiveProperties = {
34
+ alignItems: ["stretch", "center", "flex-start", "flex-end"],
35
+ columnGap: vars.space,
36
+ display: [
37
+ "none",
38
+ "flex",
39
+ "inline-flex",
40
+ "block",
41
+ "inline",
42
+ "inline-block",
43
+ "grid",
44
+ "inline-grid"
45
+ ],
46
+ flex: [1],
47
+ flexDirection: ["row", "row-reverse", "column", "column-reverse"],
48
+ flexGrow: [0, 1],
49
+ flexShrink: [0, 1],
50
+ flexWrap: ["nowrap", "wrap"],
51
+ fontSize: vars.fontSize,
52
+ gap: vars.space,
53
+ justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
54
+ marginBottom: marginSpace,
55
+ marginLeft: marginSpace,
56
+ marginRight: marginSpace,
57
+ marginTop: marginSpace,
58
+ outline: ["none"],
59
+ paddingBottom: vars.space,
60
+ paddingLeft: vars.space,
61
+ paddingRight: vars.space,
62
+ paddingTop: vars.space,
63
+ position: ["relative", "fixed", "absolute", "sticky", "static"],
64
+ rowGap: vars.space,
65
+ textAlign: ["center", "left", "right", "justify"]
66
+ };
67
+ export {
68
+ responsiveProperties,
69
+ unresponsiveProperties
70
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
3
+ const breakpoints = {
4
+ mobile: 0,
5
+ tablet: 740,
6
+ desktop: 992,
7
+ wide: 1200
8
+ };
9
+ const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
10
+ exports.breakpointNames = breakpointNames;
11
+ exports.breakpointQuery = breakpointQuery;
@@ -0,0 +1,12 @@
1
+ const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
2
+ const breakpoints = {
3
+ mobile: 0,
4
+ tablet: 740,
5
+ desktop: 992,
6
+ wide: 1200
7
+ };
8
+ const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
9
+ export {
10
+ breakpointNames,
11
+ breakpointQuery
12
+ };
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ const fileScope = require("@vanilla-extract/css/fileScope");
3
+ const sprinkles = require("@vanilla-extract/sprinkles");
4
+ const styles_lib_css_atoms_atomicProperties_cjs = require("./atomicProperties.cjs");
5
+ const styles_lib_css_atoms_breakpoints_cjs = require("./breakpoints.cjs");
6
+ fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "blocks");
7
+ const unresponsiveAtomicProperties = sprinkles.defineProperties({
8
+ properties: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
9
+ shorthands: {
10
+ inset: ["top", "bottom", "left", "right"]
11
+ }
12
+ });
13
+ const responsiveAtomicProperties = sprinkles.defineProperties({
14
+ defaultCondition: "mobile",
15
+ conditions: {
16
+ mobile: {},
17
+ tablet: {
18
+ "@media": styles_lib_css_atoms_breakpoints_cjs.breakpointQuery("tablet")
19
+ },
20
+ desktop: {
21
+ "@media": styles_lib_css_atoms_breakpoints_cjs.breakpointQuery("desktop")
22
+ },
23
+ wide: {
24
+ "@media": styles_lib_css_atoms_breakpoints_cjs.breakpointQuery("wide")
25
+ }
26
+ },
27
+ responsiveArray: styles_lib_css_atoms_breakpoints_cjs.breakpointNames,
28
+ properties: styles_lib_css_atoms_atomicProperties_cjs.responsiveProperties,
29
+ shorthands: {
30
+ margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
31
+ marginX: ["marginLeft", "marginRight"],
32
+ marginY: ["marginTop", "marginBottom"],
33
+ padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
34
+ paddingX: ["paddingLeft", "paddingRight"],
35
+ paddingY: ["paddingTop", "paddingBottom"],
36
+ placeItems: ["justifyContent", "alignItems"]
37
+ }
38
+ });
39
+ const atoms = sprinkles.createSprinkles(
40
+ unresponsiveAtomicProperties,
41
+ responsiveAtomicProperties
42
+ // colorAtomicProperties,
43
+ );
44
+ fileScope.endFileScope();
45
+ exports.atoms = atoms;
@@ -0,0 +1,46 @@
1
+ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
+ import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
3
+ import { unresponsiveProperties, responsiveProperties } from "./atomicProperties.mjs";
4
+ import { breakpointQuery, breakpointNames } from "./breakpoints.mjs";
5
+ setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "blocks");
6
+ const unresponsiveAtomicProperties = defineProperties({
7
+ properties: unresponsiveProperties,
8
+ shorthands: {
9
+ inset: ["top", "bottom", "left", "right"]
10
+ }
11
+ });
12
+ const responsiveAtomicProperties = defineProperties({
13
+ defaultCondition: "mobile",
14
+ conditions: {
15
+ mobile: {},
16
+ tablet: {
17
+ "@media": breakpointQuery("tablet")
18
+ },
19
+ desktop: {
20
+ "@media": breakpointQuery("desktop")
21
+ },
22
+ wide: {
23
+ "@media": breakpointQuery("wide")
24
+ }
25
+ },
26
+ responsiveArray: breakpointNames,
27
+ properties: responsiveProperties,
28
+ shorthands: {
29
+ margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
30
+ marginX: ["marginLeft", "marginRight"],
31
+ marginY: ["marginTop", "marginBottom"],
32
+ padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
33
+ paddingX: ["paddingLeft", "paddingRight"],
34
+ paddingY: ["paddingTop", "paddingBottom"],
35
+ placeItems: ["justifyContent", "alignItems"]
36
+ }
37
+ });
38
+ const atoms = createSprinkles(
39
+ unresponsiveAtomicProperties,
40
+ responsiveAtomicProperties
41
+ // colorAtomicProperties,
42
+ );
43
+ endFileScope();
44
+ export {
45
+ atoms
46
+ };