fix(color-handle,color-loupe,swatch,thumbnail): use the Opacity Check…

…erboard package
adobe · Sep 7, 2023 · 47e1fc4 · 47e1fc4
1 parent 25eeb71
commit 47e1fc4
Show file tree

Hide file tree

Showing 18 changed files with 179 additions and 253 deletions.
diff --git 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
@@ -20,14 +20,15 @@ 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';
 
 /**
  * @element sp-color-handle
  */
 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
@@ -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
@@ -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
@@ -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`
+            <div class="opacity-checkerboard loupe-clipped"></div>
+            <div class="spectrum-ColorLoupe-inner-border loupe-clipped"></div>
+            <div class="spectrum-ColorLoupe-outer-border loupe-clipped"></div>
             <svg
                 aria-hidden="true"
                 class="spectrum-ColorLoupe is-open"
@@ -59,40 +63,14 @@ export class ColorLoupe extends SpectrumElement {
                         />
                         <use xlink:href="#path" fill="black" />
                     </mask>
-                    <pattern
-                        id="checkerboard-primary"
-                        patternUnits="userSpaceOnUse"
-                        width="16"
-                        height="16"
-                        class="spectrum-ColorLoupe-checkerboard-pattern"
-                    >
-                        <rect x="0" y="0" width="8" height="8" />
-                        <rect x="8" y="8" width="8" height="8" />
-                    </pattern>
-                    <pattern
-                        id="checkerboard-secondary"
-                        patternUnits="userSpaceOnUse"
-                        width="20"
-                        height="20"
-                        class="spectrum-ColorLoupe-checkerboard-pattern"
-                    >
-                        <rect x="0" y="0" width="10" height="10" />
-                        <rect x="10" y="10" width="10" height="10" />
-                    </pattern>
                 </defs>
 
                 <g class="spectrum-ColorLoupe-loupe">
                     <g>
                         <use
                             xlink:href="#loupe-path"
-                            class="spectrum-ColorLoupe-checkerboard-background"
-                        />
-                        <use
-                            xlink:href="#loupe-path"
-                            class="spectrum-ColorLoupe-checkerboard-fill"
-                        />
-                        <use
-                            xlink:href="#loupe-path"
+                            mask="url(#loupe-mask)"
+                            transform="translate(2, 2)"
                             class="spectrum-ColorLoupe-inner-border"
                         />
                         <use

diff --git a/packages/color-loupe/src/color-loupe.css b/packages/color-loupe/src/color-loupe.css
@@ -16,3 +16,15 @@ svg {
     width: inherit;
     height: inherit;
 }
+
+.loupe-clipped {
+    clip-path: path(
+        'M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ'
+    );
+}
+
+.opacity-checkerboard {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+}
diff --git a/packages/swatch/package.json b/packages/swatch/package.json
@@ -70,12 +70,13 @@
         "@spectrum-web-components/base": "^0.38.0",
         "@spectrum-web-components/icon": "^0.38.0",
         "@spectrum-web-components/icons-ui": "^0.38.0",
+        "@spectrum-web-components/opacity-checkerboard": "^0.38.0",
         "@spectrum-web-components/reactive-controllers": "^0.38.0",
         "@spectrum-web-components/shared": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/swatch": "^4.0.31",
-        "@spectrum-css/swatchgroup": "^2.0.60"
+        "@spectrum-css/swatch": "^5.0.11",
+        "@spectrum-css/swatchgroup": "^2.0.67"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
@@ -19,6 +19,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { when } from '@spectrum-web-components/base/src/directives.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';
@@ -66,7 +67,7 @@ export class Swatch extends SizedMixin(Focusable, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [styles, dashStyles];
+        return [opacityCheckerboardStyles, styles, dashStyles];
     }
 
     @property({ reflect: true })
@@ -198,7 +199,7 @@ export class Swatch extends SizedMixin(Focusable, {
 
     protected override render(): TemplateResult {
         return html`
-            <div class="fill" style="--spectrum-picked-color: ${this.color}">
+            <div class="opacity-checkerboard fill" style="--spectrum-picked-color: ${this.color}">
                 <slot name="image"></slot>
                 ${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
@@ -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
@@ -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,