diff --git a/.changeset/cyan-dodos-prove.md b/.changeset/cyan-dodos-prove.md new file mode 100644 index 00000000..7491f4d1 --- /dev/null +++ b/.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 diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts index 4dfb10fc..4e6415df 100644 --- a/src/theme/sprinkles.css.ts +++ b/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"],