chore: reverted checkbox changes

adobe · May 1, 2024 · 12230c7 · 12230c7
1 parent 0f01013
commit 12230c7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 75 deletions.
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -71,7 +71,7 @@
         "@spectrum-web-components/shared": "^0.42.2"
     },
     "devDependencies": {
-        "@spectrum-css/checkbox": "^14.0.0-next.2"
+        "@spectrum-css/checkbox": "^8.1.5"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts
@@ -116,10 +116,6 @@ export class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {
         delegatesFocus: true,
     };
 
-    override spectrumConfig = {
-        downstate: ['spectrum-two'],
-    };
-
     /**
      * Disable this control. It will not receive focus or events
      */

diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
@@ -34,7 +34,7 @@ governing permissions and limitations under the License.
     --spectrum-checkbox-control-color-disabled: var(
         --spectrum-disabled-content-color
     );
-    --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
+    --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
     --spectrum-checkbox-invalid-color-default: var(
         --spectrum-negative-color-900
     );
@@ -76,9 +76,7 @@ governing permissions and limitations under the License.
     --spectrum-checkbox-control-size: var(
         --spectrum-checkbox-control-size-medium
     );
-    --spectrum-checkbox-control-corner-radius: var(
-        --spectrum-corner-radius-small-size-medium
-    );
+    --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
     --spectrum-checkbox-focus-indicator-gap: var(
         --spectrum-focus-indicator-gap
     );
@@ -97,9 +95,6 @@ governing permissions and limitations under the License.
 }
 
 :host([size='s']) {
-    --spectrum-checkbox-control-corner-radius: var(
-        --spectrum-corner-radius-small-size-small
-    );
     --spectrum-checkbox-font-size: var(--spectrum-font-size-75);
     --spectrum-checkbox-height: var(--spectrum-component-height-75);
     --spectrum-checkbox-control-size: var(
@@ -109,10 +104,17 @@ governing permissions and limitations under the License.
     --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
 }
 
-:host([size='l']) {
-    --spectrum-checkbox-control-corner-radius: var(
-        --spectrum-corner-radius-small-size-large
+:host {
+    --spectrum-checkbox-font-size: var(--spectrum-font-size-100);
+    --spectrum-checkbox-height: var(--spectrum-component-height-100);
+    --spectrum-checkbox-control-size: var(
+        --spectrum-checkbox-control-size-medium
     );
+    --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
+    --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
+}
+
+:host([size='l']) {
     --spectrum-checkbox-font-size: var(--spectrum-font-size-200);
     --spectrum-checkbox-height: var(--spectrum-component-height-200);
     --spectrum-checkbox-control-size: var(
@@ -123,9 +125,6 @@ governing permissions and limitations under the License.
 }
 
 :host([size='xl']) {
-    --spectrum-checkbox-control-corner-radius: var(
-        --spectrum-corner-radius-small-size-extra-large
-    );
     --spectrum-checkbox-font-size: var(--spectrum-font-size-300);
     --spectrum-checkbox-height: var(--spectrum-component-height-300);
     --spectrum-checkbox-control-size: var(
@@ -181,13 +180,6 @@ governing permissions and limitations under the License.
     );
 }
 
-:host(:not([readonly]):is(:active, [active])) #input:not(:disabled) + #box {
-    transform: perspective(
-            var(--spectrum-component-size-minimum-perspective-down)
-        )
-        translateZ(var(--spectrum-component-size-difference-down));
-}
-
 :host([invalid][invalid]) #input:checked + #box:before,
 :host([invalid][invalid]) #box:before {
     border-color: var(
@@ -348,36 +340,6 @@ governing permissions and limitations under the License.
 }
 
 @media (hover: hover) {
-    :host(:hover) #box:before {
-        border-color: var(
-            --highcontrast-checkbox-highlight-color-hover,
-            var(
-                --mod-checkbox-control-color-hover,
-                var(--spectrum-checkbox-control-color-hover)
-            )
-        );
-    }
-
-    :host(:hover) #input:checked + #box:before {
-        border-color: var(
-            --highcontrast-checkbox-highlight-color-hover,
-            var(
-                --mod-checkbox-control-selected-color-hover,
-                var(--spectrum-checkbox-control-selected-color-hover)
-            )
-        );
-    }
-
-    :host(:hover) #label {
-        color: var(
-            --highcontrast-checkbox-content-color-hover,
-            var(
-                --mod-checkbox-content-color-hover,
-                var(--spectrum-checkbox-content-color-hover)
-            )
-        );
-    }
-
     :host([invalid][invalid]:hover) #input:checked + #box:before,
     :host([invalid][invalid]:hover) #box:before {
         border-color: var(
@@ -421,6 +383,27 @@ governing permissions and limitations under the License.
         );
     }
 
+    :host(:hover) #box:before {
+        border-color: var(
+            --highcontrast-checkbox-highlight-color-hover,
+            var(
+                --mod-checkbox-control-color-hover,
+                var(--spectrum-checkbox-control-color-hover)
+            )
+        );
+    }
+
+    :host(:hover) #input:checked + #box:before {
+        border-color: var(
+            --highcontrast-checkbox-highlight-color-hover,
+            var(
+                --mod-checkbox-control-selected-color-hover,
+                var(--spectrum-checkbox-control-selected-color-hover)
+            )
+        );
+    }
+
+    :host(:hover) #label,
     :host([invalid][invalid][indeterminate]:hover) #label {
         color: var(
             --highcontrast-checkbox-content-color-hover,
@@ -470,8 +453,8 @@ governing permissions and limitations under the License.
     }
 }
 
-:host([emphasized][indeterminate]:is(:active, [active])) #box:before,
-:host([emphasized][indeterminate]:is(:active, [active]))
+:host([emphasized]:is(:active, [active])[indeterminate]) #box:before,
+:host([emphasized]:is(:active, [active])[indeterminate])
     #input:checked
     + #box:before,
 :host([emphasized]:is(:active, [active])) #input:checked + #box:before {

diff --git a/packages/checkbox/src/spectrum-config.js b/packages/checkbox/src/spectrum-config.js
@@ -11,10 +11,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import {
-    builder,
-    converterFor,
-} from '../../../tasks/process-spectrum-utils.js';
+import { converterFor } from '../../../tasks/process-spectrum-utils.js';
 
 const converter = converterFor('spectrum-Checkbox');
 
@@ -53,20 +50,6 @@ const config = {
                             ],
                         ],
                     },
-
-                    hoist: true,
-                },
-                {
-                    find: {
-                        type: 'pseudo-class',
-                        kind: 'not',
-                        selectors: [[builder.class('is-readOnly')]],
-                    },
-                    replace: {
-                        type: 'pseudo-class',
-                        kind: 'not',
-                        selectors: [[builder.attribute('readonly')]],
-                    },
                     hoist: true,
                 },
                 converter.classToAttribute('is-readOnly', 'readonly'),