Add table css properties to sprinkles (#793)

* Add table css properties to sprinkles

* Add changeset

* Add selector border styles

* Add selector paddings

* Remove all-direction padding from selectors

.changeset/cyan-dodos-prove.md

@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+This change adds border-collapse to sprinkles as well as child selectors

src/theme/sprinkles.css.ts

@@ -171,6 +171,7 @@ const responsiveProperties = defineProperties({
  alignSelf: ["auto", "normal", "end", "center", "start"],
  justifySelf: ["auto", "normal", "end", "center", "start"],
  visibility: ["visible", "hidden"],
+ borderCollapse: ["collapse"],
  },
  shorthands: {
  padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
@@ -218,10 +219,23 @@ const stateProperties = defineProperties({
  active: { selector: "&:active" },
  disabled: { selector: "&[disabled]" },
  placeholder: { selector: "&::placeholder" },
+ firstChild: { selector: "&:first-child" },
+ lastChild: { selector: "&:last-child" },
+ oddChild: { selector: "&:nth-child(odd)" },
+ evenChild: { selector: "&:nth-child(even)" },
  },
  defaultCondition: "default",
  properties: {
  borderColor: { ...vars.colors.border, transparent: "transparent" },
+ borderStyle: ["none", "solid"],
+ borderLeftStyle: ["none", "solid"],
+ borderRightStyle: ["none", "solid"],
+ borderTopStyle: ["none", "solid"],
+ borderBottomStyle: ["none", "solid"],
+ paddingLeft: vars.spacing,
+ paddingRight: vars.spacing,
+ paddingTop: vars.spacing,
+ paddingBottom: vars.spacing,
  color: { ...vars.colors.text, inherit: "inherit" },
  backgroundColor: { ...vars.colors.background, transparent: "transparent" },
  pointerEvents: ["none", "auto"],