diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss index a82c5f78bb0..01d53d286d5 100644 --- a/packages/calcite-components/src/components/block-section/block-section.scss +++ b/packages/calcite-components/src/components/block-section/block-section.scss @@ -11,8 +11,6 @@ * @prop --calcite-block-section-switch-handle-background-color: Specifies the background color of the switch handle. * @prop --calcite-block-section-switch-handle-border-color-hover: Specifies the border color of the switch handle on hover. * @prop --calcite-block-section-switch-handle-border-color: Specifies the border color of the switch handle. - * @prop --calcite-block-section-switch-handle-shadow-hover: Specifies the shadow of the switch handle on hover. - * @prop --calcite-block-section-switch-handle-shadow: Specifies the shadow of the switch handle. * @prop --calcite-block-section-switch-track-background-color-checked: Specifies the background color of the switch track when checked. * @prop --calcite-block-section-switch-track-background-color: Specifies the background color of the switch track. * @prop --calcite-block-section-switch-track-border-color-checked: Specifies the border color of the switch track when checked. @@ -132,14 +130,12 @@ calcite-switch { --calcite-switch-corner-radius: var(--calcite-block-section-switch-corner-radius); --calcite-switch-handle-background-color: var(--calcite-block-section-switch-handle-background-color); --calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color); - --calcite-switch-handle-shadow: var(--calcite-block-section-switch-handle-shadow); --calcite-switch-track-background-color: var(--calcite-block-section-switch-track-background-color); --calcite-switch-track-border-color: var(--calcite-block-section-switch-track-border-color); &:focus, &:hover { --calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color-hover); - --calcite-switch-handle-shadow: var(--calcite-block-section-switch-handle-shadow-hover); } &[checked] { diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss index 447a92a75fd..61f59959bd4 100644 --- a/packages/calcite-components/src/components/switch/switch.scss +++ b/packages/calcite-components/src/components/switch/switch.scss @@ -6,13 +6,16 @@ * @prop --calcite-switch-corner-radius: Specifies the corner radius of the component. * @prop --calcite-switch-handle-background-color: Specifies the background color of the component handle. * @prop --calcite-switch-handle-border-color: Specifies the border color of the component handle. - * @prop --calcite-switch-handle-shadow: Specifies the shadow of the component handle. * @prop --calcite-switch-track-background-color: Specifies the background color of the component track. * @prop --calcite-switch-track-border-color: Specifies the border color of the component track. */ :host { --calcite-internal-switch-border-radius: 9999px; // TODO: drop once --calcite-corner-radius is updated + --calcite-internal-switch-handle-border-color: var( + --calcite-switch-handle-border-color, + var(--calcite-color-border-input) + ); @apply relative inline-block @@ -59,13 +62,13 @@ inset-block-start: -1px; inset-inline: -1px theme("inset.auto"); - border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-border-input)); + border-color: var(--calcite-internal-switch-handle-border-color); background-color: var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1)); border-radius: var( --calcite-switch-corner-radius, var(--calcite-internal-switch-border-radius, var(--calcite-corner-radius-pill)) ); - box-shadow: var(--calcite-switch-handle-shadow, none); + box-shadow: var(--calcite-internal-switch-handle-box-shadow); block-size: var(--calcite-internal-switch-handle-height); inline-size: var(--calcite-internal-switch-handle-width); } @@ -95,12 +98,10 @@ @apply focus-outset; } +:host([checked]), :host(:hover), :host(:focus) { - .handle { - border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand)); - box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand)); - } + --calcite-internal-switch-handle-border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand)); } :host([checked]) { @@ -110,16 +111,21 @@ } .handle { - border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand)); inset-inline: theme("inset.auto") -1px; } } +:host(:hover), +:host(:focus), :host([checked]:hover) { - .handle { - border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover)); - box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand-hover)); - } + --calcite-internal-switch-handle-box-shadow: inset 0 0 0 1px var(--calcite-internal-switch-handle-border-color); +} + +:host([checked]:hover) { + --calcite-internal-switch-handle-border-color: var( + --calcite-switch-handle-border-color, + var(--calcite-color-brand-hover) + ); } @media (forced-colors: active) {