@sproutsocial/racine 11.0.2 → 11.1.2-badge-update.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 (274) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/__flow__/Badge/constants.js +48 -0
  3. package/__flow__/Badge/index.js +58 -32
  4. package/__flow__/Badge/index.stories.js +29 -42
  5. package/__flow__/Badge/index.test.js +34 -32
  6. package/__flow__/Badge/styles.js +22 -42
  7. package/__flow__/EnumIconNames.js +1 -1
  8. package/__flow__/IconViewBoxes.js +1 -1
  9. package/__flow__/index.js +1 -0
  10. package/__flow__/systemProps/background.js +28 -0
  11. package/__flow__/systemProps/border.js +76 -0
  12. package/__flow__/systemProps/color.js +25 -0
  13. package/__flow__/systemProps/custom.js +23 -0
  14. package/__flow__/systemProps/flexbox.js +42 -0
  15. package/__flow__/systemProps/grid.js +43 -0
  16. package/__flow__/systemProps/index.js +17 -0
  17. package/__flow__/systemProps/layout.js +43 -0
  18. package/__flow__/systemProps/position.js +29 -0
  19. package/__flow__/systemProps/shadow.js +18 -0
  20. package/__flow__/systemProps/space.js +83 -0
  21. package/__flow__/systemProps/systemProps.js +55 -0
  22. package/__flow__/systemProps/tests/__snapshots__/background.test.js.snap +96 -0
  23. package/__flow__/systemProps/tests/__snapshots__/border.test.js.snap +469 -0
  24. package/__flow__/systemProps/tests/__snapshots__/color.test.js.snap +55 -0
  25. package/__flow__/systemProps/tests/__snapshots__/custom.test.js.snap +36 -0
  26. package/__flow__/systemProps/tests/__snapshots__/flexbox.test.js.snap +239 -0
  27. package/__flow__/systemProps/tests/__snapshots__/grid.test.js.snap +166 -0
  28. package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap +218 -0
  29. package/__flow__/systemProps/tests/__snapshots__/position.test.js.snap +115 -0
  30. package/__flow__/systemProps/tests/__snapshots__/shadow.test.js.snap +25 -0
  31. package/__flow__/systemProps/tests/__snapshots__/space.test.js.snap +39 -0
  32. package/__flow__/systemProps/tests/__snapshots__/typography.test.js.snap +166 -0
  33. package/__flow__/systemProps/tests/__snapshots__/variant.test.js.snap +17 -0
  34. package/__flow__/systemProps/tests/background.test.js +90 -0
  35. package/__flow__/systemProps/tests/border.test.js +299 -0
  36. package/__flow__/systemProps/tests/color.test.js +49 -0
  37. package/__flow__/systemProps/tests/custom.test.js +38 -0
  38. package/__flow__/systemProps/tests/flexbox.test.js +150 -0
  39. package/__flow__/systemProps/tests/grid.test.js +123 -0
  40. package/__flow__/systemProps/tests/layout.test.js +135 -0
  41. package/__flow__/systemProps/tests/position.test.js +78 -0
  42. package/__flow__/systemProps/tests/shadow.test.js +30 -0
  43. package/__flow__/systemProps/tests/space.test.js +32 -0
  44. package/__flow__/systemProps/tests/types.flow.js +55 -0
  45. package/__flow__/systemProps/tests/typography.test.js +93 -0
  46. package/__flow__/systemProps/tests/variant.test.js +25 -0
  47. package/__flow__/systemProps/types.flow.js +20 -0
  48. package/__flow__/systemProps/typography.js +34 -0
  49. package/__flow__/systemProps/variant.js +18 -0
  50. package/__flow__/themes/dark/theme.js +1 -0
  51. package/__flow__/themes/light/literal-colors.js +2 -0
  52. package/__flow__/themes/light/theme.js +1 -0
  53. package/__flow__/types/theme.colors.flow.js +27 -0
  54. package/bin/buildNpm.js +58 -0
  55. package/commonjs/Avatar/index.js +7 -4
  56. package/commonjs/Badge/constants.js +43 -0
  57. package/commonjs/Badge/index.js +42 -38
  58. package/commonjs/Badge/styles.js +16 -32
  59. package/commonjs/Banner/index.js +3 -1
  60. package/commonjs/Banner/styles.js +1 -1
  61. package/commonjs/Box/styles.js +1 -1
  62. package/commonjs/Breadcrumb/index.js +5 -2
  63. package/commonjs/Button/index.js +3 -1
  64. package/commonjs/Card/index.js +3 -1
  65. package/commonjs/Card/styles.js +3 -3
  66. package/commonjs/CharacterCounter/index.js +3 -1
  67. package/commonjs/CharacterCounter/styles.js +1 -1
  68. package/commonjs/ChartLegend/index.js +3 -1
  69. package/commonjs/ChartLegend/styles.js +3 -3
  70. package/commonjs/Checkbox/index.js +3 -1
  71. package/commonjs/Checkbox/styles.js +1 -1
  72. package/commonjs/Collapsible/index.js +5 -2
  73. package/commonjs/DatePicker/DateRangePicker.js +3 -1
  74. package/commonjs/DatePicker/SingleDatePicker.js +3 -1
  75. package/commonjs/DatePicker/StatefulDateRangePicker.js +3 -1
  76. package/commonjs/DatePicker/StatefulSingleDatePicker.js +3 -1
  77. package/commonjs/DatePicker/common.js +1 -1
  78. package/commonjs/DatePicker/styles.js +2 -6
  79. package/commonjs/Drawer/SlideTransition.js +3 -1
  80. package/commonjs/Drawer/index.js +9 -4
  81. package/commonjs/Drawer/styles.js +2 -2
  82. package/commonjs/EmptyState/index.js +3 -1
  83. package/commonjs/Fieldset/index.js +7 -3
  84. package/commonjs/FormField/index.js +3 -1
  85. package/commonjs/Icon/index.js +5 -2
  86. package/commonjs/Icon/styles.js +1 -1
  87. package/commonjs/IconViewBoxes.js +1 -0
  88. package/commonjs/Image/index.js +3 -1
  89. package/commonjs/Image/styles.js +1 -1
  90. package/commonjs/Indicator/index.js +3 -1
  91. package/commonjs/Input/index.js +3 -1
  92. package/commonjs/Input/styles.js +2 -2
  93. package/commonjs/KeyboardKey/index.js +3 -1
  94. package/commonjs/Label/index.js +4 -2
  95. package/commonjs/Link/index.js +3 -1
  96. package/commonjs/Link/styles.js +1 -1
  97. package/commonjs/Listbox/index.js +7 -4
  98. package/commonjs/Loader/index.js +3 -1
  99. package/commonjs/Loader/styles.js +2 -2
  100. package/commonjs/LoaderButton/index.js +3 -1
  101. package/commonjs/Menu/constants.js +1 -1
  102. package/commonjs/Menu/descendants.js +10 -7
  103. package/commonjs/Menu/hooks.js +1 -1
  104. package/commonjs/Menu/index.js +22 -16
  105. package/commonjs/Menu/styles.js +2 -2
  106. package/commonjs/Message/index.js +3 -1
  107. package/commonjs/Message/styles.js +1 -1
  108. package/commonjs/Modal/index.js +7 -3
  109. package/commonjs/Modal/styles.js +4 -6
  110. package/commonjs/Numeral/constants.js +1 -1
  111. package/commonjs/Numeral/index.js +3 -1
  112. package/commonjs/Numeral/styles.js +3 -3
  113. package/commonjs/OverflowList/styles.js +1 -1
  114. package/commonjs/Popout/index.js +7 -3
  115. package/commonjs/Popout/styles.js +1 -1
  116. package/commonjs/Radio/index.js +3 -1
  117. package/commonjs/Radio/styles.js +4 -4
  118. package/commonjs/SegmentedControl/index.js +5 -2
  119. package/commonjs/Select/index.js +3 -1
  120. package/commonjs/Stack/index.js +3 -1
  121. package/commonjs/Switch/index.js +3 -1
  122. package/commonjs/Switch/styles.js +1 -1
  123. package/commonjs/Table/index.js +10 -5
  124. package/commonjs/TableCell/index.js +3 -1
  125. package/commonjs/TableHeaderCell/index.js +3 -1
  126. package/commonjs/TableRowAccordion/index.js +3 -1
  127. package/commonjs/Tabs/index.js +5 -2
  128. package/commonjs/Tabs/styles.js +4 -4
  129. package/commonjs/Text/index.js +3 -1
  130. package/commonjs/Text/styles.js +1 -1
  131. package/commonjs/Textarea/index.js +3 -1
  132. package/commonjs/Toast/index.js +15 -15
  133. package/commonjs/Toast/styles.js +4 -7
  134. package/commonjs/ToggleHint/index.js +3 -1
  135. package/commonjs/Token/index.js +3 -1
  136. package/commonjs/Token/styles.js +1 -1
  137. package/commonjs/TokenInput/index.js +3 -1
  138. package/commonjs/Tooltip/index.js +5 -2
  139. package/commonjs/Tooltip/styles.js +1 -1
  140. package/commonjs/VisuallyHidden/index.js +1 -1
  141. package/commonjs/include-icons.js +1 -1
  142. package/commonjs/index.js +79 -1
  143. package/commonjs/systemProps/background.js +9 -0
  144. package/commonjs/systemProps/border.js +9 -0
  145. package/commonjs/systemProps/color.js +9 -0
  146. package/commonjs/systemProps/custom.js +12 -0
  147. package/commonjs/systemProps/flexbox.js +9 -0
  148. package/commonjs/systemProps/grid.js +9 -0
  149. package/commonjs/systemProps/index.js +115 -0
  150. package/commonjs/systemProps/layout.js +9 -0
  151. package/commonjs/systemProps/position.js +9 -0
  152. package/commonjs/systemProps/shadow.js +9 -0
  153. package/commonjs/systemProps/space.js +10 -0
  154. package/commonjs/systemProps/systemProps.js +33 -0
  155. package/commonjs/systemProps/tests/types.flow.js +46 -0
  156. package/commonjs/systemProps/types.flow.js +1 -0
  157. package/commonjs/systemProps/typography.js +9 -0
  158. package/commonjs/systemProps/variant.js +12 -0
  159. package/commonjs/themes/dark/decorative-palettes.js +1 -1
  160. package/commonjs/themes/dark/theme.js +1 -1
  161. package/commonjs/themes/light/decorative-palettes.js +1 -1
  162. package/commonjs/themes/light/literal-colors.js +4 -2
  163. package/commonjs/themes/light/theme.js +1 -1
  164. package/commonjs/types/theme.colors.flow.js +2 -0
  165. package/commonjs/utils/hooks.js +3 -2
  166. package/commonjs/utils/mixins.js +1 -1
  167. package/commonjs/utils/system-props.js +1 -1
  168. package/dist/iconList.js +1 -1
  169. package/dist/icons.svg +1 -1
  170. package/dist/themes/dark/dark.scss +9 -7
  171. package/dist/themes/light/light.scss +99 -97
  172. package/icons/power-up-outline.svg +3 -0
  173. package/includeIcons.js +1 -1
  174. package/lib/Avatar/index.js +7 -4
  175. package/lib/Badge/constants.js +38 -0
  176. package/lib/Badge/index.js +39 -38
  177. package/lib/Badge/styles.js +13 -28
  178. package/lib/Banner/index.js +3 -1
  179. package/lib/Banner/styles.js +1 -1
  180. package/lib/Box/styles.js +1 -1
  181. package/lib/Breadcrumb/index.js +5 -2
  182. package/lib/Button/index.js +3 -1
  183. package/lib/Card/index.js +3 -1
  184. package/lib/Card/styles.js +2 -2
  185. package/lib/CharacterCounter/index.js +3 -1
  186. package/lib/CharacterCounter/styles.js +1 -1
  187. package/lib/ChartLegend/index.js +3 -1
  188. package/lib/ChartLegend/styles.js +3 -3
  189. package/lib/Checkbox/index.js +3 -1
  190. package/lib/Collapsible/index.js +5 -2
  191. package/lib/DatePicker/DateRangePicker.js +3 -1
  192. package/lib/DatePicker/SingleDatePicker.js +3 -1
  193. package/lib/DatePicker/StatefulDateRangePicker.js +3 -1
  194. package/lib/DatePicker/StatefulSingleDatePicker.js +3 -1
  195. package/lib/DatePicker/styles.js +2 -6
  196. package/lib/Drawer/SlideTransition.js +3 -1
  197. package/lib/Drawer/index.js +9 -4
  198. package/lib/Drawer/styles.js +2 -2
  199. package/lib/EmptyState/index.js +3 -1
  200. package/lib/Fieldset/index.js +7 -3
  201. package/lib/FormField/index.js +3 -1
  202. package/lib/Icon/index.js +5 -2
  203. package/lib/Icon/styles.js +1 -1
  204. package/lib/IconViewBoxes.js +1 -0
  205. package/lib/Image/index.js +3 -1
  206. package/lib/Image/styles.js +1 -1
  207. package/lib/Indicator/index.js +3 -1
  208. package/lib/Input/index.js +3 -1
  209. package/lib/Input/styles.js +2 -2
  210. package/lib/KeyboardKey/index.js +3 -1
  211. package/lib/Label/index.js +4 -2
  212. package/lib/Link/index.js +3 -1
  213. package/lib/Link/styles.js +1 -1
  214. package/lib/Listbox/index.js +6 -3
  215. package/lib/Loader/index.js +3 -1
  216. package/lib/Loader/styles.js +2 -2
  217. package/lib/LoaderButton/index.js +3 -1
  218. package/lib/Menu/descendants.js +5 -2
  219. package/lib/Menu/index.js +20 -16
  220. package/lib/Menu/styles.js +2 -2
  221. package/lib/Message/index.js +3 -1
  222. package/lib/Modal/index.js +7 -3
  223. package/lib/Modal/styles.js +3 -5
  224. package/lib/Numeral/index.js +3 -1
  225. package/lib/Numeral/styles.js +2 -2
  226. package/lib/OverflowList/styles.js +1 -1
  227. package/lib/Popout/index.js +7 -3
  228. package/lib/Popout/styles.js +1 -1
  229. package/lib/Radio/index.js +3 -1
  230. package/lib/Radio/styles.js +4 -4
  231. package/lib/SegmentedControl/index.js +5 -2
  232. package/lib/Select/index.js +3 -1
  233. package/lib/Stack/index.js +3 -1
  234. package/lib/Switch/index.js +3 -1
  235. package/lib/Switch/styles.js +1 -1
  236. package/lib/Table/index.js +9 -4
  237. package/lib/TableCell/index.js +3 -1
  238. package/lib/TableHeaderCell/index.js +3 -1
  239. package/lib/TableRowAccordion/index.js +3 -1
  240. package/lib/Tabs/index.js +5 -2
  241. package/lib/Tabs/styles.js +3 -3
  242. package/lib/Text/index.js +3 -1
  243. package/lib/Text/styles.js +1 -1
  244. package/lib/Textarea/index.js +3 -1
  245. package/lib/Toast/index.js +14 -14
  246. package/lib/Toast/styles.js +3 -7
  247. package/lib/ToggleHint/index.js +3 -1
  248. package/lib/Token/index.js +3 -1
  249. package/lib/Token/styles.js +1 -1
  250. package/lib/TokenInput/index.js +3 -1
  251. package/lib/Tooltip/index.js +5 -2
  252. package/lib/Tooltip/styles.js +1 -1
  253. package/lib/VisuallyHidden/index.js +1 -1
  254. package/lib/include-icons.js +1 -1
  255. package/lib/index.js +1 -0
  256. package/lib/systemProps/background.js +2 -0
  257. package/lib/systemProps/border.js +2 -0
  258. package/lib/systemProps/color.js +2 -0
  259. package/lib/systemProps/custom.js +5 -0
  260. package/lib/systemProps/flexbox.js +2 -0
  261. package/lib/systemProps/grid.js +2 -0
  262. package/lib/systemProps/index.js +14 -0
  263. package/lib/systemProps/layout.js +2 -0
  264. package/lib/systemProps/position.js +2 -0
  265. package/lib/systemProps/shadow.js +2 -0
  266. package/lib/systemProps/space.js +3 -0
  267. package/lib/systemProps/systemProps.js +14 -0
  268. package/lib/systemProps/tests/types.flow.js +44 -0
  269. package/lib/systemProps/types.flow.js +0 -0
  270. package/lib/systemProps/typography.js +2 -0
  271. package/lib/systemProps/variant.js +5 -0
  272. package/lib/themes/light/literal-colors.js +4 -2
  273. package/lib/types/theme.colors.flow.js +2 -1
  274. package/package.json +15 -3
@@ -0,0 +1,76 @@
1
+ // @flow strict-local
2
+
3
+ import { border } from "styled-system";
4
+ import type {
5
+ BorderBottomColorProperty,
6
+ BorderBottomLeftRadiusProperty,
7
+ BorderBottomProperty,
8
+ BorderBottomRightRadiusProperty,
9
+ BorderBottomStyleProperty,
10
+ BorderBottomWidthProperty,
11
+ BorderColorProperty,
12
+ BorderLeftColorProperty,
13
+ BorderLeftProperty,
14
+ BorderLeftStyleProperty,
15
+ BorderLeftWidthProperty,
16
+ BorderProperty,
17
+ BorderRadiusProperty,
18
+ BorderRightColorProperty,
19
+ BorderRightProperty,
20
+ BorderRightStyleProperty,
21
+ BorderRightWidthProperty,
22
+ BorderStyleProperty,
23
+ BorderTopColorProperty,
24
+ BorderTopLeftRadiusProperty,
25
+ BorderTopProperty,
26
+ BorderTopRightRadiusProperty,
27
+ BorderTopStyleProperty,
28
+ BorderTopWidthProperty,
29
+ BorderWidthProperty,
30
+ } from "csstype";
31
+
32
+ import type {
33
+ StyledSystemStyleFn,
34
+ TypeResponsiveBaseSystemProp,
35
+ } from "./types.flow.js";
36
+
37
+ // https://styled-system.com/table#border
38
+
39
+ export type TypeBorderSystemProps = $ReadOnly<{|
40
+ border?: TypeResponsiveBaseSystemProp<BorderProperty<number>>,
41
+ borderBottom?: TypeResponsiveBaseSystemProp<BorderBottomProperty<number>>,
42
+ borderBottomColor?: TypeResponsiveBaseSystemProp<BorderBottomColorProperty>,
43
+ // eslint-disable-next-line prettier/prettier
44
+ borderBottomLeftRadius?: TypeResponsiveBaseSystemProp<BorderBottomLeftRadiusProperty<number>>,
45
+ // eslint-disable-next-line prettier/prettier
46
+ borderBottomRightRadius?: TypeResponsiveBaseSystemProp<BorderBottomRightRadiusProperty<number>>,
47
+ borderBottomStyle?: TypeResponsiveBaseSystemProp<BorderBottomStyleProperty>,
48
+ // eslint-disable-next-line prettier/prettier
49
+ borderBottomWidth?: TypeResponsiveBaseSystemProp<BorderBottomWidthProperty<number>>,
50
+ borderColor?: TypeResponsiveBaseSystemProp<BorderColorProperty>,
51
+ borderLeft?: TypeResponsiveBaseSystemProp<BorderLeftProperty<number>>,
52
+ borderLeftColor?: TypeResponsiveBaseSystemProp<BorderLeftColorProperty>,
53
+ borderLeftStyle?: TypeResponsiveBaseSystemProp<BorderLeftStyleProperty>,
54
+ // eslint-disable-next-line prettier/prettier
55
+ borderLeftWidth?: TypeResponsiveBaseSystemProp<BorderLeftWidthProperty<number>>,
56
+ borderRadius?: TypeResponsiveBaseSystemProp<BorderRadiusProperty<number>>,
57
+ borderRight?: TypeResponsiveBaseSystemProp<BorderRightProperty<number>>,
58
+ borderRightColor?: TypeResponsiveBaseSystemProp<BorderRightColorProperty>,
59
+ borderRightStyle?: TypeResponsiveBaseSystemProp<BorderRightStyleProperty>,
60
+ // eslint-disable-next-line prettier/prettier
61
+ borderRightWidth?: TypeResponsiveBaseSystemProp<BorderRightWidthProperty<number>>,
62
+ borderStyle?: TypeResponsiveBaseSystemProp<BorderStyleProperty>,
63
+ borderTop?: TypeResponsiveBaseSystemProp<BorderTopProperty<number>>,
64
+ borderTopColor?: TypeResponsiveBaseSystemProp<BorderTopColorProperty>,
65
+ // eslint-disable-next-line prettier/prettier
66
+ borderTopLeftRadius?: TypeResponsiveBaseSystemProp<BorderTopLeftRadiusProperty<number>>,
67
+ // eslint-disable-next-line prettier/prettier
68
+ borderTopRightRadius?: TypeResponsiveBaseSystemProp<BorderTopRightRadiusProperty<number>>,
69
+ borderTopStyle?: TypeResponsiveBaseSystemProp<BorderTopStyleProperty>,
70
+ borderTopWidth?: TypeResponsiveBaseSystemProp<BorderTopWidthProperty<number>>,
71
+ borderWidth?: TypeResponsiveBaseSystemProp<BorderWidthProperty<number>>,
72
+ borderX?: TypeResponsiveBaseSystemProp<BorderLeftProperty<number>>,
73
+ borderY?: TypeResponsiveBaseSystemProp<BorderTopProperty<number>>,
74
+ |}>;
75
+
76
+ export const borderSystemProps: StyledSystemStyleFn = border;
@@ -0,0 +1,25 @@
1
+ // @flow strict-local
2
+
3
+ import { color } from "styled-system";
4
+ import type {
5
+ BackgroundColorProperty,
6
+ ColorProperty,
7
+ OpacityProperty,
8
+ } from "csstype";
9
+
10
+ import type {
11
+ StyledSystemStyleFn,
12
+ TypeResponsiveBaseSystemProp,
13
+ } from "./types.flow.js";
14
+
15
+ // https://styled-system.com/table#color
16
+
17
+ type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
18
+ export type TypeColorSystemProps = $ReadOnly<{|
19
+ backgroundColor?: TypeBackgroundColorSystemProp,
20
+ bg?: TypeBackgroundColorSystemProp,
21
+ color?: TypeResponsiveBaseSystemProp<ColorProperty>,
22
+ opacity?: TypeResponsiveBaseSystemProp<OpacityProperty>,
23
+ |}>;
24
+
25
+ export const colorSystemProps: StyledSystemStyleFn = color;
@@ -0,0 +1,23 @@
1
+ // @flow strict-local
2
+
3
+ import { compose, system } from "styled-system";
4
+ import type { CursorProperty, WhiteSpaceProperty } from "csstype";
5
+
6
+ import type {
7
+ StyledSystemStyleFn,
8
+ TypeResponsiveBaseSystemProp,
9
+ } from "./types.flow.js";
10
+
11
+ // https://styled-system.com/custom-props
12
+
13
+ export type TypeCustomSystemProps = $ReadOnly<{|
14
+ cursor?: TypeResponsiveBaseSystemProp<CursorProperty>,
15
+ whiteSpace?: TypeResponsiveBaseSystemProp<WhiteSpaceProperty>,
16
+ |}>;
17
+
18
+ export const customSystemProps: StyledSystemStyleFn = compose(
19
+ system({
20
+ cursor: true,
21
+ whiteSpace: true,
22
+ })
23
+ );
@@ -0,0 +1,42 @@
1
+ // @flow strict-local
2
+
3
+ import { flexbox } from "styled-system";
4
+ import type {
5
+ AlignItemsProperty,
6
+ AlignContentProperty,
7
+ JustifyContentProperty,
8
+ JustifyItemsProperty,
9
+ FlexWrapProperty,
10
+ FlexDirectionProperty,
11
+ FlexProperty,
12
+ FlexBasisProperty,
13
+ JustifySelfProperty,
14
+ AlignSelfProperty,
15
+ Globals,
16
+ } from "csstype";
17
+
18
+ import type {
19
+ StyledSystemStyleFn,
20
+ TypeResponsiveBaseSystemProp,
21
+ } from "./types.flow.js";
22
+
23
+ // https://styled-system.com/table#flexbox
24
+
25
+ type TypeGlobalsNumber = Globals | number;
26
+ export type TypeFlexboxSystemProps = $ReadOnly<{|
27
+ alignItems?: TypeResponsiveBaseSystemProp<AlignItemsProperty>,
28
+ alignContent?: TypeResponsiveBaseSystemProp<AlignContentProperty>,
29
+ justifyItems?: TypeResponsiveBaseSystemProp<JustifyContentProperty>,
30
+ justifyContent?: TypeResponsiveBaseSystemProp<JustifyItemsProperty>,
31
+ flexWrap?: TypeResponsiveBaseSystemProp<FlexWrapProperty>,
32
+ flexDirection?: TypeResponsiveBaseSystemProp<FlexDirectionProperty>,
33
+ flex?: TypeResponsiveBaseSystemProp<FlexProperty<void>>,
34
+ flexGrow?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
35
+ flexShrink?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
36
+ flexBasis?: TypeResponsiveBaseSystemProp<FlexBasisProperty<void>>,
37
+ justifySelf?: TypeResponsiveBaseSystemProp<JustifySelfProperty>,
38
+ alignSelf?: TypeResponsiveBaseSystemProp<AlignSelfProperty>,
39
+ order?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
40
+ |}>;
41
+
42
+ export const flexboxSystemProps: StyledSystemStyleFn = flexbox;
@@ -0,0 +1,43 @@
1
+ // @flow strict-local
2
+
3
+ import { grid } from "styled-system";
4
+ import type {
5
+ GridAreaProperty,
6
+ GridAutoColumnsProperty,
7
+ GridAutoFlowProperty,
8
+ GridAutoRowsProperty,
9
+ GridColumnProperty,
10
+ GridColumnGapProperty,
11
+ GridGapProperty,
12
+ GridRowProperty,
13
+ GridRowGapProperty,
14
+ GridTemplateAreasProperty,
15
+ GridTemplateColumnsProperty,
16
+ GridTemplateRowsProperty,
17
+ } from "csstype";
18
+
19
+ import type {
20
+ StyledSystemStyleFn,
21
+ TypeResponsiveBaseSystemProp,
22
+ } from "./types.flow.js";
23
+
24
+ // https://styled-system.com/table#grid-layout
25
+
26
+ export type TypeGridSystemProps = $ReadOnly<{|
27
+ gridArea?: TypeResponsiveBaseSystemProp<GridAreaProperty>,
28
+ gridAutoColumns?: TypeResponsiveBaseSystemProp<GridAutoColumnsProperty<void>>,
29
+ gridAutoFlow?: TypeResponsiveBaseSystemProp<GridAutoFlowProperty>,
30
+ gridAutoRows?: TypeResponsiveBaseSystemProp<GridAutoRowsProperty<void>>,
31
+ gridColumn?: TypeResponsiveBaseSystemProp<GridColumnProperty>,
32
+ gridColumnGap?: TypeResponsiveBaseSystemProp<GridColumnGapProperty<void>>,
33
+ gridGap?: TypeResponsiveBaseSystemProp<GridGapProperty<void>>,
34
+ gridRow?: TypeResponsiveBaseSystemProp<GridRowProperty>,
35
+ gridRowGap?: TypeResponsiveBaseSystemProp<GridRowGapProperty<void>>,
36
+ gridTemplateAreas?: TypeResponsiveBaseSystemProp<GridTemplateAreasProperty>,
37
+ // eslint-disable-next-line prettier/prettier
38
+ gridTemplateColumns?: TypeResponsiveBaseSystemProp<GridTemplateColumnsProperty<void>>,
39
+ // eslint-disable-next-line prettier/prettier
40
+ gridTemplateRows?: TypeResponsiveBaseSystemProp<GridTemplateRowsProperty<void>>,
41
+ |}>;
42
+
43
+ export const gridSystemProps: StyledSystemStyleFn = grid;
@@ -0,0 +1,17 @@
1
+ // @flow strict-local
2
+
3
+ export * from "./types.flow.js";
4
+
5
+ export * from "./background";
6
+ export * from "./border";
7
+ export * from "./color";
8
+ export * from "./custom";
9
+ export * from "./flexbox";
10
+ export * from "./grid";
11
+ export * from "./layout";
12
+ export * from "./position";
13
+ export * from "./shadow";
14
+ export * from "./space";
15
+ export * from "./systemProps";
16
+ export * from "./typography";
17
+ export * from "./variant";
@@ -0,0 +1,43 @@
1
+ // @flow strict-local
2
+
3
+ import { layout } from "styled-system";
4
+ import type {
5
+ DisplayProperty,
6
+ HeightProperty,
7
+ MaxHeightProperty,
8
+ MaxWidthProperty,
9
+ MinHeightProperty,
10
+ MinWidthProperty,
11
+ OverflowProperty,
12
+ OverflowXProperty,
13
+ OverflowYProperty,
14
+ VerticalAlignProperty,
15
+ WidthProperty,
16
+ } from "csstype";
17
+
18
+ import type {
19
+ StyledSystemStyleFn,
20
+ TypeResponsiveBaseSystemProp,
21
+ } from "./types.flow.js";
22
+
23
+ // https://styled-system.com/table#layout
24
+
25
+ type TypeHeightProp = HeightProperty<number>;
26
+ type TypeWidthProp = WidthProperty<number>;
27
+
28
+ export type TypeLayoutSystemProps = $ReadOnly<{|
29
+ display?: TypeResponsiveBaseSystemProp<DisplayProperty>,
30
+ height?: TypeResponsiveBaseSystemProp<TypeHeightProp>,
31
+ maxHeight?: TypeResponsiveBaseSystemProp<MaxHeightProperty<number>>,
32
+ maxWidth?: TypeResponsiveBaseSystemProp<MaxWidthProperty<number>>,
33
+ minHeight?: TypeResponsiveBaseSystemProp<MinHeightProperty<number>>,
34
+ minWidth?: TypeResponsiveBaseSystemProp<MinWidthProperty<number>>,
35
+ overflow?: TypeResponsiveBaseSystemProp<OverflowProperty>,
36
+ overflowX?: TypeResponsiveBaseSystemProp<OverflowXProperty>,
37
+ overflowY?: TypeResponsiveBaseSystemProp<OverflowYProperty>,
38
+ size?: TypeResponsiveBaseSystemProp<TypeHeightProp & TypeWidthProp>,
39
+ verticalAlign?: TypeResponsiveBaseSystemProp<VerticalAlignProperty<void>>,
40
+ width?: TypeResponsiveBaseSystemProp<TypeWidthProp>,
41
+ |}>;
42
+
43
+ export const layoutSystemProps: StyledSystemStyleFn = layout;
@@ -0,0 +1,29 @@
1
+ // @flow strict-local
2
+
3
+ import { position } from "styled-system";
4
+ import type {
5
+ BottomProperty,
6
+ LeftProperty,
7
+ PositionProperty,
8
+ RightProperty,
9
+ TopProperty,
10
+ ZIndexProperty,
11
+ } from "csstype";
12
+
13
+ import type {
14
+ StyledSystemStyleFn,
15
+ TypeResponsiveBaseSystemProp,
16
+ } from "./types.flow.js";
17
+
18
+ // https://styled-system.com/table#position
19
+
20
+ export type TypePositionSystemProps = $ReadOnly<{|
21
+ bottom?: TypeResponsiveBaseSystemProp<BottomProperty<number>>,
22
+ left?: TypeResponsiveBaseSystemProp<LeftProperty<number>>,
23
+ position?: TypeResponsiveBaseSystemProp<PositionProperty>,
24
+ right?: TypeResponsiveBaseSystemProp<RightProperty<number>>,
25
+ top?: TypeResponsiveBaseSystemProp<TopProperty<number>>,
26
+ zIndex?: TypeResponsiveBaseSystemProp<ZIndexProperty>,
27
+ |}>;
28
+
29
+ export const positionSystemProps: StyledSystemStyleFn = position;
@@ -0,0 +1,18 @@
1
+ // @flow strict-local
2
+
3
+ import { shadow } from "styled-system";
4
+ import type { BoxShadowProperty, TextShadowProperty } from "csstype";
5
+
6
+ import type {
7
+ StyledSystemStyleFn,
8
+ TypeResponsiveBaseSystemProp,
9
+ } from "./types.flow.js";
10
+
11
+ // https://styled-system.com/table#shadow
12
+
13
+ export type TypeShadowSystemProps = $ReadOnly<{|
14
+ boxShadow?: TypeResponsiveBaseSystemProp<BoxShadowProperty>,
15
+ textShadow?: TypeResponsiveBaseSystemProp<TextShadowProperty>,
16
+ |}>;
17
+
18
+ export const shadowSystemProps: StyledSystemStyleFn = shadow;
@@ -0,0 +1,83 @@
1
+ /* eslint-disable prettier/prettier */
2
+ // @flow strict-local
3
+
4
+ import { space } from "styled-system";
5
+ import type {
6
+ MarginProperty,
7
+ MarginBottomProperty,
8
+ MarginLeftProperty,
9
+ MarginRightProperty,
10
+ MarginTopProperty,
11
+ PaddingProperty,
12
+ PaddingBottomProperty,
13
+ PaddingLeftProperty,
14
+ PaddingRightProperty,
15
+ PaddingTopProperty,
16
+ } from "csstype";
17
+
18
+ import type {
19
+ StyledSystemStyleFn,
20
+ TypeResponsiveBaseSystemProp,
21
+ } from "./types.flow.js";
22
+
23
+ // https://styled-system.com/table#space
24
+
25
+ type TypeMarginSystemProp = TypeResponsiveBaseSystemProp<MarginProperty<number>>;
26
+ type TypeMarginBottomSystemProp = TypeResponsiveBaseSystemProp<MarginBottomProperty<number>>;
27
+ type TypeMarginLeftSystemProp = TypeResponsiveBaseSystemProp<MarginLeftProperty<number>>;
28
+ type TypeMarginRightSystemProp = TypeResponsiveBaseSystemProp<MarginRightProperty<number>>;
29
+ type TypeMarginTopSystemProp = TypeResponsiveBaseSystemProp<MarginTopProperty<number>>;
30
+ type TypeMarginXSystemProp = TypeResponsiveBaseSystemProp<MarginLeftProperty<number> & MarginRightProperty<number>>;
31
+ type TypeMarginYSystemProp = TypeResponsiveBaseSystemProp<MarginBottomProperty<number> & MarginTopProperty<number>>;
32
+
33
+ type TypePaddingSystemProp = TypeResponsiveBaseSystemProp<PaddingProperty<number>>;
34
+ type TypePaddingBottomSystemProp = TypeResponsiveBaseSystemProp<PaddingBottomProperty<number>>;
35
+ type TypePaddingLeftSystemProp = TypeResponsiveBaseSystemProp<PaddingLeftProperty<number>>;
36
+ type TypePaddingRightSystemProp = TypeResponsiveBaseSystemProp<PaddingRightProperty<number>>;
37
+ type TypePaddingTopSystemProp = TypeResponsiveBaseSystemProp<PaddingTopProperty<number>>;
38
+ type TypePaddingXSystemProp = TypeResponsiveBaseSystemProp<PaddingLeftProperty<number> & PaddingRightProperty<number>>;
39
+ type TypePaddingYSystemProp = TypeResponsiveBaseSystemProp<PaddingBottomProperty<number> & PaddingTopProperty<number>>;
40
+
41
+ export type TypeSpaceSystemProps = $ReadOnly<{|
42
+ // margin longhand
43
+ margin?: TypeMarginSystemProp,
44
+ marginBottom?: TypeMarginBottomSystemProp,
45
+ marginLeft?: TypeMarginLeftSystemProp,
46
+ marginRight?: TypeMarginRightSystemProp,
47
+ marginTop?: TypeMarginTopSystemProp,
48
+ // eslint-disable-next-line prettier/prettier
49
+ marginX?: TypeMarginXSystemProp,
50
+ // eslint-disable-next-line prettier/prettier
51
+ marginY?: TypeMarginYSystemProp,
52
+
53
+ // margin shorthand
54
+ m?: TypeMarginSystemProp,
55
+ mb?: TypeMarginBottomSystemProp,
56
+ ml?: TypeMarginLeftSystemProp,
57
+ mr?: TypeMarginRightSystemProp,
58
+ mt?: TypeMarginTopSystemProp,
59
+ mx?: TypeMarginXSystemProp,
60
+ my?: TypeMarginYSystemProp,
61
+
62
+ // padding longhand
63
+ padding?: TypePaddingSystemProp,
64
+ paddingBottom?: TypePaddingBottomSystemProp,
65
+ paddingLeft?: TypePaddingLeftSystemProp,
66
+ paddingRight?: TypePaddingRightSystemProp,
67
+ paddingTop?: TypePaddingTopSystemProp,
68
+ // eslint-disable-next-line prettier/prettier
69
+ paddingX?: TypePaddingXSystemProp,
70
+ // eslint-disable-next-line prettier/prettier
71
+ paddingY?: TypePaddingYSystemProp,
72
+
73
+ // padding shorthand
74
+ p?: TypePaddingSystemProp,
75
+ pb?: TypePaddingBottomSystemProp,
76
+ pl?: TypePaddingLeftSystemProp,
77
+ pr?: TypePaddingRightSystemProp,
78
+ pt?: TypePaddingTopSystemProp,
79
+ px?: TypePaddingXSystemProp,
80
+ py?: TypePaddingYSystemProp,
81
+ |}>;
82
+
83
+ export const spaceSystemProps: StyledSystemStyleFn = space;
@@ -0,0 +1,55 @@
1
+ // @flow strict-local
2
+ import { compose } from "styled-system";
3
+
4
+ import {
5
+ backgroundSystemProps,
6
+ type TypeBackgroundSystemProps,
7
+ } from "./background";
8
+ import { borderSystemProps, type TypeBorderSystemProps } from "./border";
9
+ import { colorSystemProps, type TypeColorSystemProps } from "./color";
10
+ import { customSystemProps, type TypeCustomSystemProps } from "./custom";
11
+ import { flexboxSystemProps, type TypeFlexboxSystemProps } from "./flexbox";
12
+ import { gridSystemProps, type TypeGridSystemProps } from "./grid";
13
+ import { layoutSystemProps, type TypeLayoutSystemProps } from "./layout";
14
+ import { positionSystemProps, type TypePositionSystemProps } from "./position";
15
+ import { shadowSystemProps, type TypeShadowSystemProps } from "./shadow";
16
+ import { spaceSystemProps, type TypeSpaceSystemProps } from "./space";
17
+ import {
18
+ typographySystemProps,
19
+ type TypeTypographySystemProps,
20
+ } from "./typography";
21
+ import { variantSystemProps, type TypeVariantSystemProps } from "./variant";
22
+
23
+ import type { StyledSystemStyleFn } from "./types.flow.js";
24
+
25
+ export type TypeSystemProps = $ReadOnly<{|
26
+ ...TypeCustomSystemProps,
27
+ ...TypeVariantSystemProps,
28
+
29
+ ...TypeBackgroundSystemProps,
30
+ ...TypeBorderSystemProps,
31
+ ...TypeColorSystemProps,
32
+ ...TypeFlexboxSystemProps,
33
+ ...TypeGridSystemProps,
34
+ ...TypeLayoutSystemProps,
35
+ ...TypePositionSystemProps,
36
+ ...TypeShadowSystemProps,
37
+ ...TypeSpaceSystemProps,
38
+ ...TypeTypographySystemProps,
39
+ |}>;
40
+
41
+ export const systemProps: StyledSystemStyleFn = compose(
42
+ customSystemProps,
43
+ variantSystemProps,
44
+
45
+ backgroundSystemProps,
46
+ borderSystemProps,
47
+ colorSystemProps,
48
+ flexboxSystemProps,
49
+ gridSystemProps,
50
+ layoutSystemProps,
51
+ positionSystemProps,
52
+ shadowSystemProps,
53
+ spaceSystemProps,
54
+ typographySystemProps
55
+ );
@@ -0,0 +1,96 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`background system props background 1`] = `
4
+ .c0 {
5
+ background: string;
6
+ }
7
+
8
+ .c1 {
9
+ background: 1px;
10
+ }
11
+
12
+ <div>
13
+ <div
14
+ class="c0"
15
+ />
16
+ <div
17
+ class="c1"
18
+ />
19
+ </div>
20
+ `;
21
+
22
+ exports[`background system props backgroundImage 1`] = `
23
+ .c0 {
24
+ background-image: string;
25
+ }
26
+
27
+ .c1 {
28
+ background-image: 1px;
29
+ }
30
+
31
+ <div>
32
+ <div
33
+ class="c0"
34
+ />
35
+ <div
36
+ class="c1"
37
+ />
38
+ </div>
39
+ `;
40
+
41
+ exports[`background system props backgroundPosition 1`] = `
42
+ .c0 {
43
+ background-position: string;
44
+ }
45
+
46
+ .c1 {
47
+ background-position: 1px;
48
+ }
49
+
50
+ <div>
51
+ <div
52
+ class="c0"
53
+ />
54
+ <div
55
+ class="c1"
56
+ />
57
+ </div>
58
+ `;
59
+
60
+ exports[`background system props backgroundRepeat 1`] = `
61
+ .c0 {
62
+ background-repeat: string;
63
+ }
64
+
65
+ .c1 {
66
+ background-repeat: 1px;
67
+ }
68
+
69
+ <div>
70
+ <div
71
+ class="c0"
72
+ />
73
+ <div
74
+ class="c1"
75
+ />
76
+ </div>
77
+ `;
78
+
79
+ exports[`background system props backgroundSize 1`] = `
80
+ .c0 {
81
+ background-size: string;
82
+ }
83
+
84
+ .c1 {
85
+ background-size: 1px;
86
+ }
87
+
88
+ <div>
89
+ <div
90
+ class="c0"
91
+ />
92
+ <div
93
+ class="c1"
94
+ />
95
+ </div>
96
+ `;