From a11f87fbebb72232c084d8147c75c00e03693be6 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 12 Nov 2024 14:56:14 -0800 Subject: [PATCH 1/6] feat(thumbnail-opacity-checkboard): s2 migration --- .changeset/afraid-ladybugs-smile.md | 7 +++++++ components/thumbnail/index.css | 4 ++++ components/thumbnail/stories/template.js | 3 --- 3 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 .changeset/afraid-ladybugs-smile.md diff --git a/.changeset/afraid-ladybugs-smile.md b/.changeset/afraid-ladybugs-smile.md new file mode 100644 index 00000000000..d43236f67ff --- /dev/null +++ b/.changeset/afraid-ladybugs-smile.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/thumbnail": major +--- + +# thumbnail-pacity-checkerboard S2 migration + +Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component. diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 97f5c014719..031685d34b6 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -33,6 +33,10 @@ governing permissions and limitations under the License. --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); } +.spectrum-OpacityCheckerboard { + --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); +} + .spectrum-Thumbnail--size50 { --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); } diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index 623ff770e2c..4c292705599 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -113,9 +113,6 @@ export const Template = ({ ${OpacityCheckerboard({ rootClass: backgroundColor ? `${rootClass}-image-wrapper` : undefined, customClasses: isLayer ? [`${rootClass}-layer-inner`] : !backgroundColor ? [`${rootClass}-image-wrapper`] : [], - customStyles: { - "--spectrum-opacity-checkerboard-size": "var(--spectrum-thumbnail-opacity-checkerboard-square-size)" - }, content: image ? [image] : [], })} From 1e7042edde16b90ff752862c46123ee7645a8b5f Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 19 Nov 2024 07:20:17 -0800 Subject: [PATCH 2/6] feat(thumbnail-opacity-checkboard): fix token rule --- components/opacitycheckerboard/index.css | 49 +++++------------------- components/thumbnail/index.css | 8 ++-- 2 files changed, 13 insertions(+), 44 deletions(-) diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 379a4534e6f..5d36432b9cb 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -8,53 +8,22 @@ express or implied. See the License for the specific language governing permissions and limitations under the License. */ .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --spectrum-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size-medium - ); + --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); + --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size-medium); --spectrum-opacity-checkerboard-position: left top; } .spectrum-OpacityCheckerboard--sizeS { - --spectrum-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size-small - ); + --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size-small); } .spectrum-OpacityCheckerboard { - background: repeating-conic-gradient( - var( - --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) - ) - 0% 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0% 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); + background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2); + + .spectrum-Thumbnail & { + --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square- size); + } } @media (forced-colors: active) { diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 031685d34b6..b418e9accfd 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -33,10 +33,6 @@ governing permissions and limitations under the License. --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); } -.spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); -} - .spectrum-Thumbnail--size50 { --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); } @@ -127,6 +123,10 @@ governing permissions and limitations under the License. overflow: hidden; border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } + + & .spectrum-OpacityCheckerboard { + --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square- size); + } } /* stylelint-enable selector-pseudo-class-no-unknown */ From fe7f4579ab15e8d1d7ba3ac54000abe23d3a0880 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 19 Nov 2024 08:37:17 -0800 Subject: [PATCH 3/6] feat(thumbnail-opacity-checkboard): fix typo, update changeset, move rule --- .../{afraid-ladybugs-smile.md => twenty-tables-know.md} | 1 + components/thumbnail/index.css | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) rename .changeset/{afraid-ladybugs-smile.md => twenty-tables-know.md} (87%) diff --git a/.changeset/afraid-ladybugs-smile.md b/.changeset/twenty-tables-know.md similarity index 87% rename from .changeset/afraid-ladybugs-smile.md rename to .changeset/twenty-tables-know.md index d43236f67ff..4e428551125 100644 --- a/.changeset/afraid-ladybugs-smile.md +++ b/.changeset/twenty-tables-know.md @@ -1,4 +1,5 @@ --- +"@spectrum-css/opacitycheckerboard": major "@spectrum-css/thumbnail": major --- diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index b418e9accfd..a13087675b1 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -92,6 +92,10 @@ governing permissions and limitations under the License. border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + & .spectrum-OpacityCheckerboard { + --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); + } + &::before { content: ""; z-index: 2; @@ -123,10 +127,6 @@ governing permissions and limitations under the License. overflow: hidden; border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } - - & .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square- size); - } } /* stylelint-enable selector-pseudo-class-no-unknown */ From 6577d13ae4f4bb3be9b590e376a313b2b3b49707 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 19 Nov 2024 08:39:40 -0800 Subject: [PATCH 4/6] feat(thumbnail-opacity-checkboard): drop unnecessary styles --- .changeset/twenty-tables-know.md | 2 +- components/opacitycheckerboard/index.css | 2 +- components/thumbnail/index.css | 4 ---- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/.changeset/twenty-tables-know.md b/.changeset/twenty-tables-know.md index 4e428551125..f81a98165a5 100644 --- a/.changeset/twenty-tables-know.md +++ b/.changeset/twenty-tables-know.md @@ -3,6 +3,6 @@ "@spectrum-css/thumbnail": major --- -# thumbnail-pacity-checkerboard S2 migration +# thumbnail-opacity-checkerboard S2 migration Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component. diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 5d36432b9cb..50b2b035b97 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -22,7 +22,7 @@ permissions and limitations under the License. */ background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2); .spectrum-Thumbnail & { - --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square- size); + --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); } } diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index a13087675b1..97f5c014719 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -92,10 +92,6 @@ governing permissions and limitations under the License. border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); - & .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); - } - &::before { content: ""; z-index: 2; From 0b71b807601428285c53ef2600b8bb0b63dd7ddf Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 19 Nov 2024 09:45:59 -0800 Subject: [PATCH 5/6] feat(thumbnail-opacity-checkboard): update token --- components/thumbnail/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 97f5c014719..f08eb220eb6 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity)); + --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)); --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); From cdeaa8f120db2442821208f0b297d2493009c97d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 19 Nov 2024 11:47:08 -0800 Subject: [PATCH 6/6] feat(thumbnail-opacity-checkboard): update changeset --- .changeset/twenty-tables-know.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/twenty-tables-know.md b/.changeset/twenty-tables-know.md index f81a98165a5..584bf66b2da 100644 --- a/.changeset/twenty-tables-know.md +++ b/.changeset/twenty-tables-know.md @@ -1,8 +1,10 @@ --- "@spectrum-css/opacitycheckerboard": major -"@spectrum-css/thumbnail": major +"@spectrum-css/thumbnail": minor --- # thumbnail-opacity-checkerboard S2 migration Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component. + +This also corrects an issue with a token name in the `thumbnail` component by renaming `--spectrum-thumbnail-border-color-opacity` to `--spectrum-thumbnail-border-opacity`.