change css var, better selector

Author: Barsnes

.changeset/rude-snails-report.md

@@ -4,6 +4,6 @@
 
 **input**: Add outline on `:hover` when not `:focus-visible`, `:disabled` or `[readonly]`. This adds a few new CSS variables:
 - `--dsc-input-outline-color--hover`
-- `--dsc-input-outline-color-checkbox-radio-switch--hover`
+- `--dsc-input-outline-color--toggle--hover`
 - `--dsc-input-outline-width--hover`
 - `--dsc-input-outline-style--hover`

packages/css/src/input.css

@@ -16,7 +16,7 @@
   --dsc-input-border-width: var(--ds-border-width-default);
   /* hover */
   --dsc-input-outline-color--hover: var(--ds-color-neutral-border-default);
-  --dsc-input-outline-color-checkbox-radio-switch--hover: var(--dsc-input-accent-color);
+  --dsc-input-outline-color--toggle--hover: var(--dsc-input-accent-color);
   --dsc-input-outline-width--hover: var(--ds-border-width-default);
   --dsc-input-outline-style--hover: solid;
   /* Color */
@@ -56,13 +56,13 @@
   @composes ds-print-preserve from './base.css';
   @composes ds-focus from './base.css';
 
-  &:not(:focus-visible):not(:disabled):not([readonly]):hover {
+  &:not(:focus-visible, :disabled, [readonly]):hover {
     outline-color: var(--dsc-input-outline-color--hover);
     outline-width: var(--dsc-input-outline-width--hover);
     outline-style: var(--dsc-input-outline-style--hover);
 
     &:is(:checked, :indeterminate:where([type='checkbox'])):not([aria-invalid='true']) {
-      outline-color: var(--dsc-input-outline-color-checkbox-radio-switch--hover);
+      outline-color: var(--dsc-input-outline-color--toggle--hover);
     }
 
     &:is([aria-invalid='true']) {