From 9200791900c20e3c54dba31e8d1f5ae4619aa633 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 22 Oct 2024 09:05:50 -0500 Subject: [PATCH] feat(colorloupe): migrate to s2 drop-shadow tokens --- .changeset/strange-glasses-allow.md | 5 ++ components/colorloupe/index.css | 107 ++++++++++++++-------------- 2 files changed, 57 insertions(+), 55 deletions(-) create mode 100644 .changeset/strange-glasses-allow.md diff --git a/.changeset/strange-glasses-allow.md b/.changeset/strange-glasses-allow.md new file mode 100644 index 00000000000..e9bb9303c9c --- /dev/null +++ b/.changeset/strange-glasses-allow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/colorloupe": major +--- + +Migrates color loupe to Spectrum 2 tokens. Color loupe now uses the new drop shadow tokens `--spectrum-drop-shadow-elevated-x`, `--spectrum-drop-shadow-elevated-y`, `--spectrum-drop-shadow-elevated-blur`, and `--spectrum-drop-shadow-elevated-color` rather than specific color loupe tokens. diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index 287f6640bd2..ae6444e27cc 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -9,87 +9,84 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ .spectrum-ColorLoupe { - --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); - --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); + --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); + --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); - --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); - --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ + --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ - --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); - --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); - --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); + --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x); + --spectrum-colorloupe-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y); + --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur); + --spectrum-colorloupe-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color); - --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); - --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); - --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); - --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); - --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); + --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); } .spectrum-ColorLoupe { - inline-size: var(--spectrum-colorloupe-width); - block-size: var(--spectrum-colorloupe-height); - - position: absolute; - transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); - opacity: 0; - transform-origin: bottom center; - inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); - inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); - - transition: transform 100ms ease-in-out, opacity 125ms ease-in-out; - pointer-events: none; - - filter:drop-shadow( - var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) - var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) - var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) - var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color)) - ); - - &:dir(rtl) { - inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px);; - } - - &.is-open { - transform: translate(0, 0); - opacity: 1; - } + inline-size: var(--spectrum-colorloupe-width); + block-size: var(--spectrum-colorloupe-height); + + position: absolute; + transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); + opacity: 0; + transform-origin: bottom center; + inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); + + transition: + transform 100ms ease-in-out, + opacity 125ms ease-in-out; + pointer-events: none; + + filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))); + + &:dir(rtl) { + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px); + } + + &.is-open { + transform: translate(0, 0); + opacity: 1; + } } .spectrum-ColorLoupe-inner-border { - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - fill: var(--spectrum-picked-color); - stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); - stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + fill: var(--spectrum-picked-color); + stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); + stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); } .spectrum-ColorLoupe-outer-border { - fill: none; - stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); - stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); + fill: none; + stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); + stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); } /* The checkerboard classes use opacity checkerboard tokens for dark and light color. The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe.yml is using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */ .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-colorloupe-checkerboard-dark-color); + fill: var(--spectrum-colorloupe-checkerboard-dark-color); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-colorloupe-checkerboard-light-color); + fill: var(--spectrum-colorloupe-checkerboard-light-color); } .spectrum-ColorLoupe-checkerboard-fill { - fill: var(--spectrum-colorloupe-checkerboard-fill); + fill: var(--spectrum-colorloupe-checkerboard-fill); } @media (forced-colors: active) { - .spectrum-ColorLoupe { - --highcontrast-colorloupe-outer-border-color: CanvasText; - } + .spectrum-ColorLoupe { + --highcontrast-colorloupe-outer-border-color: CanvasText; + } }