From 8c28f6d002973bf7398f134ca4e73be8fee967dd Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Fri, 19 May 2023 09:10:42 -0400 Subject: [PATCH] fix(color-handle,color-loupe): accept updated CSS token names --- packages/color-handle/package.json | 2 +- .../color-handle/src/spectrum-color-handle.css | 11 ++++------- packages/color-loupe/package.json | 2 +- .../color-loupe/src/spectrum-color-loupe.css | 14 +++++++++----- tools/styles/spectrum-core-global.css | 6 ------ yarn.lock | 16 ++++++++-------- 6 files changed, 23 insertions(+), 28 deletions(-) diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index e232b574e4..952c158db1 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/color-loupe": "^0.31.0" }, "devDependencies": { - "@spectrum-css/colorhandle": "^4.0.7" + "@spectrum-css/colorhandle": "^5.0.3" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css index 386bfdc0b8..25ccab88ec 100644 --- a/packages/color-handle/src/spectrum-color-handle.css +++ b/packages/color-handle/src/spectrum-color-handle.css @@ -12,9 +12,9 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorhandle-size: var(--spectrum-color-handle-size-interim); + --spectrum-colorhandle-size: var(--spectrum-color-handle-size); --spectrum-colorhandle-focused-size: var( - --spectrum-color-handle-size-key-focus-interim + --spectrum-color-handle-size-key-focus ); --spectrum-colorhandle-hitarea-size: var( --spectrum-color-control-track-width @@ -25,14 +25,14 @@ governing permissions and limitations under the License. --spectrum-colorhandle-animation-easing: ease-in-out; --spectrum-colorhandle-outer-border-color: rgba( var(--spectrum-black-rgb), - 0.42 + var(--spectrum-color-handle-outer-border-opacity) ); --spectrum-colorhandle-outer-border-width: var( --spectrum-color-handle-outer-border-width ); --spectrum-colorhandle-inner-border-color: rgba( var(--spectrum-black-rgb), - 0.42 + var(--spectrum-color-handle-inner-border-opacity) ); --spectrum-colorhandle-inner-border-width: var( --spectrum-color-handle-inner-border-width @@ -265,9 +265,6 @@ governing permissions and limitations under the License. ); inline-size: 100%; } -.🤫 { - --spectrum-picked-color: 0; -} @media (forced-colors: active) { :host { forced-color-adjust: none; diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index 7613d69a1b..12d16b9e17 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -60,7 +60,7 @@ "@spectrum-web-components/base": "^0.31.0" }, "devDependencies": { - "@spectrum-css/colorloupe": "^3.0.7" + "@spectrum-css/colorloupe": "^4.0.3" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css index c52574a3f5..6e32e66e37 100644 --- a/packages/color-loupe/src/spectrum-color-loupe.css +++ b/packages/color-loupe/src/spectrum-color-loupe.css @@ -12,9 +12,11 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorloupe-width: 48px; - --spectrum-colorloupe-height: 64px; - --spectrum-colorloupe-offset: 12px; + --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; --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); --spectrum-colorloupe-drop-shadow-y: var( @@ -29,7 +31,9 @@ governing permissions and limitations under the License. --spectrum-colorloupe-outer-border-width: var( --spectrum-color-loupe-outer-border-width ); - --spectrum-colorloupe-inner-border-width: 1px; + --spectrum-colorloupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); --spectrum-colorloupe-outer-border-color: var( --spectrum-color-loupe-outer-border ); @@ -65,7 +69,7 @@ governing permissions and limitations under the License. ); inline-size: var(--spectrum-colorloupe-width); inset-block-end: calc( - var(--spectrum-color-handle-size-interim) - + var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)) ); diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css index 63d12cc780..62c16ba9fc 100644 --- a/tools/styles/spectrum-core-global.css +++ b/tools/styles/spectrum-core-global.css @@ -1832,12 +1832,6 @@ governing permissions and limitations under the License. --spectrum-alias-ui-icon-asterisk-size-100: var( --spectrum-global-dimension-size-100 ); - --spectrum-alias-transparent-blue-background-color-hover: rgba( - 0, - 87, - 190, - 0.15 - ); --spectrum-alias-transparent-blue-background-color-down: rgba( 0, 72, diff --git a/yarn.lock b/yarn.lock index 42cf84efed..1586f015c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4417,15 +4417,15 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-3.0.10.tgz#1c05a4ed4e9148047f1f585cd629fec76b9613f3" integrity sha512-94veu17ZCWEX2H7M0AZcyJV+/TYvkELGwqA9LG6509yNNnNuk8h/lGCZ/bOcbyzqnrgt5pZ2pYlGdrhCq0tQDQ== -"@spectrum-css/colorhandle@^4.0.7": - version "4.0.7" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-4.0.7.tgz#26536b83256fc76e2b8683ad725f51979c0c4847" - integrity sha512-qDtpRP2kA6tDMkrPKaRrfhyr+CsKyBP4dTeJ9JYNo8OSTHJLwdEU/IB5RLiW55MkYz3UdOLHOujGtR+/I76BXw== +"@spectrum-css/colorhandle@^5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-5.0.3.tgz#ebb0fecace921cc10c0955759f1e4da0ba90fe25" + integrity sha512-1veCH29J5cfjvcWarc463K+VPcJhmO/+XmMF7JW5Q7UcdXNDPunQhYiJ0Ew10BKLa+cPrXx0+KESBtweHJTIIA== -"@spectrum-css/colorloupe@^3.0.7": - version "3.0.7" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-3.0.7.tgz#6d6137ad46b57e54934f7e1ee7bcbe4f63f43eb4" - integrity sha512-o12K9nnRRn1N91fMY2q+XB6T/mGyk7IYMXgV/Hhys28Yggw1cIeVy45e22/ZbDRnjc19ZRp6P02KbR273+YxtQ== +"@spectrum-css/colorloupe@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-4.0.3.tgz#3e7e88a66263b89c085d93b54907ddf10d83db8a" + integrity sha512-6O3GR9JbYightePGtjIerH66vqqcJ/5jLy275727khNEsKAIsIk5EzBhhrVgdJ7TdoNaFL+zlDs8v5uOefuR8g== "@spectrum-css/colorslider@^3.0.3": version "3.0.3"