fix(color-handle,color-loupe): accept updated CSS token names

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",

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;

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",

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))
     );

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,

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"