From 00f61ce9b2c8ed4dd57b86525a1eea92674a8a4f Mon Sep 17 00:00:00 2001 From: droniu Date: Thu, 25 Apr 2024 14:27:24 +0200 Subject: [PATCH 1/5] Add table css properties to sprinkles --- src/theme/sprinkles.css.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts index 4dfb10fc..96cc6fb4 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,6 +219,10 @@ 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: { From 7df5b3d0cf9b8c35b7371786651634dac9c14fba Mon Sep 17 00:00:00 2001 From: droniu Date: Thu, 25 Apr 2024 14:41:30 +0200 Subject: [PATCH 2/5] Add changeset --- .changeset/cyan-dodos-prove.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cyan-dodos-prove.md 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 From dcf8a3648f61753cc1ab442331c22889c46170d3 Mon Sep 17 00:00:00 2001 From: droniu Date: Thu, 25 Apr 2024 17:07:02 +0200 Subject: [PATCH 3/5] Add selector border styles --- src/theme/sprinkles.css.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts index 96cc6fb4..01d49f84 100644 --- a/src/theme/sprinkles.css.ts +++ b/src/theme/sprinkles.css.ts @@ -227,6 +227,10 @@ const stateProperties = defineProperties({ defaultCondition: "default", properties: { borderColor: { ...vars.colors.border, transparent: "transparent" }, + borderLeftStyle: ["none", "solid"], + borderRightStyle: ["none", "solid"], + borderTopStyle: ["none", "solid"], + borderBottomStyle: ["none", "solid"], color: { ...vars.colors.text, inherit: "inherit" }, backgroundColor: { ...vars.colors.background, transparent: "transparent" }, pointerEvents: ["none", "auto"], From 2214fb390bcc15b677095a8ad7f5694e630df0ee Mon Sep 17 00:00:00 2001 From: droniu Date: Thu, 25 Apr 2024 17:59:30 +0200 Subject: [PATCH 4/5] Add selector paddings --- src/theme/sprinkles.css.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts index 01d49f84..a3f3a6d8 100644 --- a/src/theme/sprinkles.css.ts +++ b/src/theme/sprinkles.css.ts @@ -227,10 +227,16 @@ const stateProperties = defineProperties({ 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, + padding: vars.spacing, color: { ...vars.colors.text, inherit: "inherit" }, backgroundColor: { ...vars.colors.background, transparent: "transparent" }, pointerEvents: ["none", "auto"], From fbc5021fb2a5f2ecacd71a64ffdd19d7c9fee857 Mon Sep 17 00:00:00 2001 From: droniu Date: Thu, 25 Apr 2024 18:18:17 +0200 Subject: [PATCH 5/5] Remove all-direction padding from selectors --- src/theme/sprinkles.css.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts index a3f3a6d8..4e6415df 100644 --- a/src/theme/sprinkles.css.ts +++ b/src/theme/sprinkles.css.ts @@ -236,7 +236,6 @@ const stateProperties = defineProperties({ paddingRight: vars.spacing, paddingTop: vars.spacing, paddingBottom: vars.spacing, - padding: vars.spacing, color: { ...vars.colors.text, inherit: "inherit" }, backgroundColor: { ...vars.colors.background, transparent: "transparent" }, pointerEvents: ["none", "auto"],