From 47e1fc4c86f736f2fa27cb6644320577717f827e Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Fri, 1 Sep 2023 12:03:17 -0400 Subject: [PATCH] fix(color-handle,color-loupe,swatch,thumbnail): use the Opacity Checkerboard package --- packages/color-handle/package.json | 2 +- packages/color-handle/src/ColorHandle.ts | 3 +- .../src/spectrum-color-handle.css | 58 +++------ packages/color-loupe/package.json | 5 +- packages/color-loupe/src/ColorLoupe.ts | 36 +----- packages/color-loupe/src/color-loupe.css | 12 ++ packages/swatch/package.json | 5 +- packages/swatch/src/Swatch.ts | 5 +- packages/swatch/src/spectrum-swatch.css | 37 ++---- packages/swatch/stories/swatch.stories.ts | 4 + packages/thumbnail/package.json | 5 +- packages/thumbnail/src/Thumbnail.ts | 12 +- packages/thumbnail/src/spectrum-thumbnail.css | 120 +----------------- tools/opacity-checkerboard/package.json | 7 +- .../src/is-opacity-checkerboard.css | 13 ++ .../src/spectrum-config.js | 6 + .../src/spectrum-is-opacity-checkerboard.css | 62 +++++++++ yarn.lock | 40 +++--- 18 files changed, 179 insertions(+), 253 deletions(-) create mode 100644 tools/opacity-checkerboard/src/is-opacity-checkerboard.css create mode 100644 tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index cdd4d31cf5..d7959eec57 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/color-loupe": "^0.38.0" }, "devDependencies": { - "@spectrum-css/colorhandle": "^5.0.15" + "@spectrum-css/colorhandle": "^7.0.6" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/src/ColorHandle.ts b/packages/color-handle/src/ColorHandle.ts index 97eb303945..0ffae12c30 100644 --- a/packages/color-handle/src/ColorHandle.ts +++ b/packages/color-handle/src/ColorHandle.ts @@ -20,6 +20,7 @@ import { import { property } from '@spectrum-web-components/base/src/decorators.js'; import '@spectrum-web-components/color-loupe/sp-color-loupe.js'; +import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/is-opacity-checkerboard.css.js'; import styles from './color-handle.css.js'; /** @@ -27,7 +28,7 @@ import styles from './color-handle.css.js'; */ export class ColorHandle extends SpectrumElement { public static override get styles(): CSSResultArray { - return [styles]; + return [opacityCheckerboardStyles, styles]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css index 25ccab88ec..5147cdfb30 100644 --- a/packages/color-handle/src/spectrum-color-handle.css +++ b/packages/color-handle/src/spectrum-color-handle.css @@ -41,48 +41,15 @@ governing permissions and limitations under the License. --spectrum-color-handle-border-width ); --spectrum-colorhandle-border-color: var(--spectrum-white); - --spectrum-colorhandle-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-colorhandle-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --spectrum-colorhandle-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); --spectrum-colorhandle-border-color-disabled: var( --spectrum-disabled-content-color ); --spectrum-colorhandle-fill-color-disabled: var( --spectrum-disabled-background-color ); + --mod-opacity-checkerboard-position: 50%; } :host { - background: repeating-conic-gradient( - var( - --mod-colorhandle-checkerboard-light-color, - var(--spectrum-colorhandle-checkerboard-light-color) - ) - 0 25%, - var( - --mod-colorhandle-checkerboard-dark-color, - var(--spectrum-colorhandle-checkerboard-dark-color) - ) - 0 50% - ) - 50% / - calc( - var( - --mod-colorhandle-checkerboard-size, - var(--spectrum-colorhandle-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-colorhandle-checkerboard-size, - var(--spectrum-colorhandle-checkerboard-size) - ) * 2 - ); block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); border-color: var( --highcontrast-colorhandle-border-color, @@ -91,6 +58,7 @@ governing permissions and limitations under the License. var(--spectrum-colorhandle-border-color) ) ); + border-radius: 100%; border-style: solid; border-width: var( --mod-colorhandle-border-width, @@ -160,17 +128,23 @@ governing permissions and limitations under the License. --mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing) ); + transition: all + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ); z-index: 1; } -:host, -:host:after { - border-radius: 100%; -} :host:after { block-size: var( --mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size) ); + border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); content: ''; display: block; inline-size: var( @@ -193,8 +167,8 @@ governing permissions and limitations under the License. ); position: absolute; } -:host(.focus-visible), -:host([focused]) { +:host([focused]), +:host.focus-visible { block-size: var( --mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size) @@ -211,8 +185,8 @@ governing permissions and limitations under the License. ); outline: none; } -:host(:focus-visible), -:host([focused]) { +:host([focused]), +:host:focus-visible { block-size: var( --mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size) diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index 8b2e9eb200..65e6b39b9a 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -57,10 +57,11 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.38.0" + "@spectrum-web-components/base": "^0.38.0", + "@spectrum-web-components/opacity-checkerboard": "^0.38.0" }, "devDependencies": { - "@spectrum-css/colorloupe": "^4.1.10" + "@spectrum-css/colorloupe": "^4.1.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-loupe/src/ColorLoupe.ts b/packages/color-loupe/src/ColorLoupe.ts index b233eaefa0..7c187b9d9e 100644 --- a/packages/color-loupe/src/ColorLoupe.ts +++ b/packages/color-loupe/src/ColorLoupe.ts @@ -19,13 +19,14 @@ import { import { property } from '@spectrum-web-components/base/src/decorators.js'; import styles from './color-loupe.css.js'; +import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js'; /** * @element sp-color-loupe */ export class ColorLoupe extends SpectrumElement { public static override get styles(): CSSResultArray { - return [styles]; + return [styles, opacityCheckerboardStyles]; } @property({ type: Boolean, reflect: true }) @@ -36,6 +37,9 @@ export class ColorLoupe extends SpectrumElement { protected override render(): TemplateResult { return html` +
+
+
- - - - - - - - - - +
${when(this.disabled, this.renderDisabled)} ${when(this.mixedValue, this.renderMixedValue)} diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index d79d16557c..2833c4b13b 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -90,21 +90,21 @@ governing permissions and limitations under the License. } :host { align-items: center; + block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); display: flex; - height: var(--mod-swatch-size, var(--spectrum-swatch-size)); + inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); justify-content: center; outline: none; position: relative; -webkit-user-select: none; user-select: none; - width: var(--mod-swatch-size, var(--spectrum-swatch-size)); } .disabledIcon { - height: var( + block-size: var( --mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size) ); - width: var( + inline-size: var( --mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size) ); @@ -211,14 +211,14 @@ governing permissions and limitations under the License. var(--spectrum-swatch-slash-icon-color) ) ); + block-size: 200%; content: ''; - height: var( + inline-size: var( --mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness) ); position: absolute; transform: rotate(-45deg); - width: 200%; } :host([nothing][shape='rectangle']) .fill:after { transform: rotate(-25deg); @@ -285,33 +285,18 @@ governing permissions and limitations under the License. opacity: 1; } .fill { - --spectrum-swatch-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --spectrum-swatch-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-swatch-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); align-items: center; - background: repeating-conic-gradient( - var(--spectrum-swatch-checkerboard-light-color) 0 25%, - var(--spectrum-swatch-checkerboard-dark-color) 0 50% - ) - 0 0 / calc(var(--spectrum-swatch-checkerboard-size) * 2) - calc(var(--spectrum-swatch-checkerboard-size) * 2); + block-size: 100%; border-radius: var( --mod-swatch-border-radius, var(--spectrum-swatch-border-radius) ); box-sizing: border-box; display: flex; - height: 100%; + inline-size: 100%; justify-content: center; overflow: hidden; position: relative; - width: 100%; } .fill:before { background-color: var(--spectrum-picked-color, transparent); @@ -379,7 +364,7 @@ governing permissions and limitations under the License. ); } :host([shape='rectangle']) { - width: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); + inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); } :host([rounding='none']), :host([rounding='none']) .fill, @@ -412,7 +397,8 @@ governing permissions and limitations under the License. ); } ::slotted([slot='image']) { - height: 100%; + block-size: 100%; + inline-size: 100%; object-fit: contain; transition: width var( @@ -426,5 +412,4 @@ governing permissions and limitations under the License. var(--spectrum-animation-duration-100) ) ease-in-out; - width: 100%; } diff --git a/packages/swatch/stories/swatch.stories.ts b/packages/swatch/stories/swatch.stories.ts index 5db1383134..80f2b918dc 100644 --- a/packages/swatch/stories/swatch.stories.ts +++ b/packages/swatch/stories/swatch.stories.ts @@ -100,6 +100,10 @@ export const gradient = (args: Properties): TemplateResult => template(args); gradient.args = { color: 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)', }; +export const opacity = (args: Properties): TemplateResult => template(args); +opacity.args = { + color: 'rgba(255, 0, 0, 0.3)', +}; export const mixedValue = (args: Properties): TemplateResult => template(args); mixedValue.args = { mixedValue: true, diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index 9edfdfa59b..ab991af68f 100644 --- a/packages/thumbnail/package.json +++ b/packages/thumbnail/package.json @@ -57,10 +57,11 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.38.0" + "@spectrum-web-components/base": "^0.38.0", + "@spectrum-web-components/opacity-checkerboard": "^0.38.0" }, "devDependencies": { - "@spectrum-css/thumbnail": "^3.0.17" + "@spectrum-css/thumbnail": "^5.0.6" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/thumbnail/src/Thumbnail.ts b/packages/thumbnail/src/Thumbnail.ts index 4ae7eb0466..3a8d5202b3 100644 --- a/packages/thumbnail/src/Thumbnail.ts +++ b/packages/thumbnail/src/Thumbnail.ts @@ -18,6 +18,7 @@ import { TemplateResult, } from '@spectrum-web-components/base'; import { property } from '@spectrum-web-components/base/src/decorators.js'; +import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js'; import styles from './thumbnail.css.js'; @@ -47,7 +48,7 @@ const defaultSize = validSizes[6]; export class Thumbnail extends SpectrumElement { public static override get styles(): CSSResultArray { - return [styles]; + return [opacityCheckerboardStyles, styles]; } @property({ type: String, reflect: true }) @@ -115,7 +116,10 @@ export class Thumbnail extends SpectrumElement { protected override render(): TemplateResult { if (this.background) { return html` -
+
@@ -123,13 +127,13 @@ export class Thumbnail extends SpectrumElement { `; } else if (this.layer) { return html` -
+
`; } else { return html` -
+
`; diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css index cb1b0c5d2e..be2f40b0e5 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); --spectrum-thumbnail-border-color-rgba: rgba( var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) + var(--spectrum-thumbnail-border-color-opacity) ); --spectrum-thumbnail-layer-border-width-inner: var( --spectrum-border-width-400 @@ -45,15 +45,6 @@ governing permissions and limitations under the License. --spectrum-thumbnail-color-opacity-disabled: var( --spectrum-thumbnail-opacity-disabled ); - --spectrum-thumbnail-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --spectrum-thumbnail-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-thumbnail-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); } :host([size='50']) { --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); @@ -92,31 +83,6 @@ governing permissions and limitations under the License. --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); } :host { - background: repeating-conic-gradient( - var( - --mod-thumbnail-checkerboard-light-color, - var(--spectrum-thumbnail-checkerboard-light-color) - ) - 0 25%, - var( - --mod-thumbnail-checkerboard-dark-color, - var(--spectrum-thumbnail-checkerboard-dark-color) - ) - 0 50% - ) - 0 0 / - calc( - var( - --mod-thumbnail-checkerboard-size, - var(--spectrum-thumbnail-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-thumbnail-checkerboard-size, - var(--spectrum-thumbnail-checkerboard-size) - ) * 2 - ); block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); border-radius: var( --mod-thumbnail-border-radius, @@ -160,84 +126,9 @@ governing permissions and limitations under the License. var(--spectrum-thumbnail-color-opacity-disabled) ); } -:host(.focus-visible), -:host([focused]) { - overflow: visible; -} -:host(:focus-visible), :host([focused]) { overflow: visible; } -:host(.focus-visible):after, -:host([focused]):after { - border-color: var( - --highcontrast-thumbnail-focus-indicator-color, - var( - --mod-thumbnail-focus-indicator-color, - var(--spectrum-thumbnail-focus-indicator-color) - ) - ); - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); - border-style: solid; - border-width: var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ); - content: ''; - inset-block-end: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - inset-block-start: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - inset-inline-end: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - inset-inline-start: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - position: absolute; -} -:host(:focus-visible):after, :host([focused]):after { border-color: var( --highcontrast-thumbnail-focus-indicator-color, @@ -306,15 +197,6 @@ governing permissions and limitations under the License. ); position: absolute; } -:host(.focus-visible) .image-wrapper, -:host([focused]) .image-wrapper { - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); - overflow: hidden; -} -:host(:focus-visible) .image-wrapper, :host([focused]) .image-wrapper { border-radius: var( --mod-thumbnail-border-radius, diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json index 4f8158628d..d24ca98a6e 100644 --- a/tools/opacity-checkerboard/package.json +++ b/tools/opacity-checkerboard/package.json @@ -16,12 +16,13 @@ "bugs": { "url": "https://github.com/adobe/spectrum-web-components/issues" }, - "main": "./src/index.js", - "module": "./src/index.js", + "main": "./src/opacity-checkerboard.css.js", + "module": "./src/opacity-checkerboard.css.js", "type": "module", "exports": { ".": "./src/opacity-checkerboard.css.js", "./package.json": "./package.json", + "./src/is-opacity-checkerboard.css.js": "./src/is-opacity-checkerboard.css.js", "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js" }, "scripts": { @@ -44,7 +45,7 @@ "devDependencies": { "@spectrum-css/opacitycheckerboard": "^1.0.0" }, - "types": "./src/index.d.ts", + "types": "./src/opacity-checkerboard.d.ts", "sideEffects": [ "./sp-*.js", "./**/*.dev.js" diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css new file mode 100644 index 0000000000..278f215eec --- /dev/null +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css @@ -0,0 +1,13 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@import url('./spectrum-is-opacity-checkerboard.css'); diff --git a/tools/opacity-checkerboard/src/spectrum-config.js b/tools/opacity-checkerboard/src/spectrum-config.js index 3f2e8f1d1a..cf7a482fad 100644 --- a/tools/opacity-checkerboard/src/spectrum-config.js +++ b/tools/opacity-checkerboard/src/spectrum-config.js @@ -31,6 +31,12 @@ const config = { ), ], }, + { + inPackage: '@spectrum-css/opacitycheckerboard', + outPackage: ['tools', 'opacity-checkerboard'], + fileName: 'is-opacity-checkerboard', + components: [converter.classToHost('spectrum-OpacityCheckerboard')], + }, ], }; diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css new file mode 100644 index 0000000000..31cd3396b5 --- /dev/null +++ b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css @@ -0,0 +1,62 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --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 + ); + --spectrum-opacity-checkerboard-position: left top; +} +:host { + 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 + ); + block-size: 100%; + inline-size: 100%; +} +@media (forced-colors: active) { + :host { + forced-color-adjust: none; + } +} diff --git a/yarn.lock b/yarn.lock index dd36d814a1..e45935c18f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6227,15 +6227,15 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-4.0.33.tgz#911018942638550fef076c6f8328d8b5dd53bbcb" integrity sha512-gcTCc2DoKLEbWNRM0KymUVaxqFgC10Vef2KQMpN4IZF/QUbzHAWJA7stAzLGzta78X2rVGlUYhzJd+guW/aFMQ== -"@spectrum-css/colorhandle@^5.0.15": - version "5.0.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-5.0.15.tgz#933adead24b83e8850c98ed59bf9b3e263f35773" - integrity sha512-2m/L0vTJ4hbbmDCKpvvkqBP8G0Ek5+R6iglAjPtL1sdb9U/LgNEwqqlJHCmknpWZmciQqphP7XB217HGQDTayg== +"@spectrum-css/colorhandle@^7.0.6": + version "7.0.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-7.0.6.tgz#10c0c67b56aa84417571fc9e9883273ff2736ed3" + integrity sha512-UqLte3R8pVtlpgHwu8XEuiDrNkd36dwNMZhyOrWtRAgkqQSRetNTAVQj4jVvknhp8sChrUdKvsTdAQVM7/MCsg== -"@spectrum-css/colorloupe@^4.1.10": - version "4.1.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-4.1.15.tgz#00b9b6326f3df0086e50a206a2ed096f6f9485f3" - integrity sha512-EH5FuUp3873EjR/2kF1bQ6RE+IuXlV0Kyt8P/qwIlkcAaKj04haNi0G4XplaLV+nqUWpkZykn5pOSB8an8M+vg== +"@spectrum-css/colorloupe@^4.1.17": + version "4.1.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-4.1.17.tgz#900984b5f6ac84f77445d3858b646462e56dbd00" + integrity sha512-Srg7lqjTwrXdnCB0EjCAxLBP95Wde+HUTvHvxz8Dcwpx+tyS4w/+/B/QwF3hq+UfAbJl4OxP5pWh4fkQ9nHslQ== "@spectrum-css/colorslider@^3.0.23": version "3.0.23" @@ -6387,15 +6387,15 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-4.0.47.tgz#51aeb177b3b55d0b234f61a630b609cc14721914" integrity sha512-7/wywsv2jhZ/5iIPtSkJMch0PrX9BwUcSFxGbGbXIwNKCVlfIviZuVlxiW5bh0NtKCJ8GyaDK99rFLdPUm7QKA== -"@spectrum-css/swatch@^4.0.31": - version "4.0.31" - resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-4.0.31.tgz#ae54acf19240998e83d49c8a9057518b1c8715b4" - integrity sha512-P/CvmWTR8iGtwb6hFPdw18hlxrOcTblcd4CHZyAKSWRGbyN+tFlK5bvV5tiI+rR0A2b+/k0PhUGXYqfAxs57vQ== +"@spectrum-css/swatch@^5.0.11": + version "5.0.11" + resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-5.0.11.tgz#184dbf8e397070fe36c746cadd6a885413d27c61" + integrity sha512-gNBMBDHQcicfaWNo2SARew9YHQWld02gXVBS7/5C9qzlzWazhN2vAAmSV+PXxTSVTnwjgu38ZfgCyoIXJfMbYg== -"@spectrum-css/swatchgroup@^2.0.60": - version "2.0.60" - resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-2.0.60.tgz#0848aea0f6930474b6797d49edba1ad6fe22a219" - integrity sha512-dRuF3QDB1VBh/HFBMQoTcNpmozyx2VLhqKjtOOLHtIl9Z/G1+mwPWnKZ+z5FQHw3XDBcUKMyv85O5ezxam9d7w== +"@spectrum-css/swatchgroup@^2.0.67": + version "2.0.67" + resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-2.0.67.tgz#00294fa54bd46eb1f5d9c20a41ed14f11faa342b" + integrity sha512-JIOOXOu2SH+QAlNrL4Es9YrGt04A71zfZP5b6qrdwKZZQ7E0fC23V99YtVTSuG7266LARb4pvuqTGVfIvMnbFw== "@spectrum-css/switch@^3.1.13": version "3.1.13" @@ -6427,10 +6427,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-6.0.11.tgz#a4dbd8c2da1a317cd3c7208317364fe7a1026213" integrity sha512-lbqVZTUpk4UV18/8wRMTi8/0UwTGEKV5ocysNIeRSEhvHfO4ktQzhyn+T92E7TkY/WqKljEM8EnjX/K6hwUBNQ== -"@spectrum-css/thumbnail@^3.0.17": - version "3.0.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-3.0.17.tgz#1cd2f00e5b374aa0617ba3061c325f5174598ad3" - integrity sha512-EuL9dpniOcm8KHp9s+7bbyphrnjuj+VnjlgI8YFZwivTXizId3di4t9uDgoLuooYef5+h21xs1wE4ofGraXzKg== +"@spectrum-css/thumbnail@^5.0.6": + version "5.0.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-5.0.6.tgz#c5a86cccba6ceade26910b8dd6e07084220f7d9f" + integrity sha512-lK8J8m2k8eb5wDAOhik2fwqBeuea3ztohv9dAdFXAKuLTr789ibhzmi5U69JTxjLb0F6QunMbtU7Wz6q/cfH6A== "@spectrum-css/toast@^9.1.0": version "9.1.0"