Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(color-handle,color-loupe,swatch,thumbnail): use the Opacity Checkerboard package #3625

Merged
merged 2 commits into from
Sep 7, 2023
Merged

fix(color-handle,color-loupe,swatch,thumbnail): use the Opacity Checkerboard package #3625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d8ff6c
fix(color-handle,color-loupe,swatch,thumbnail): use the Opacity Check…
Westbrook Sep 1, 2023
f52385a
ci: update golden images cache
Westbrook Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: 25d5270ff12f63383aeceefda261f94b6b299bae
default: 6ca0efa669a0e4a16b342ec9958083dce28e4a41
wireit_cache_name:
type: string
default: wireit
Expand Down
2 changes: 1 addition & 1 deletion packages/color-handle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion packages/color-handle/src/ColorHandle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand Down
58 changes: 16 additions & 42 deletions packages/color-handle/src/spectrum-color-handle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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(
Expand All @@ -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)
Expand All @@ -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)
Expand Down
5 changes: 3 additions & 2 deletions packages/color-loupe/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 7 additions & 29 deletions packages/color-loupe/src/ColorLoupe.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand All @@ -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"
Expand All @@ -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
Expand Down
12 changes: 12 additions & 0 deletions packages/color-loupe/src/color-loupe.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
5 changes: 3 additions & 2 deletions packages/swatch/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions packages/swatch/src/Swatch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 })
Expand Down Expand Up @@ -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)}
Expand Down
37 changes: 11 additions & 26 deletions packages/swatch/src/spectrum-swatch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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(
Expand All @@ -426,5 +412,4 @@ governing permissions and limitations under the License.
var(--spectrum-animation-duration-100)
)
ease-in-out;
width: 100%;
}
4 changes: 4 additions & 0 deletions packages/swatch/stories/swatch.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading