diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss index b969123b99..50435ab2a8 100644 --- a/packages/styles/src/components/form-check.scss +++ b/packages/styles/src/components/form-check.scss @@ -1,5 +1,6 @@ @forward './../variables/options'; +@use 'sass:map'; @use '../variables/color'; @use '../variables/commons'; @use '../variables/type'; @@ -12,7 +13,22 @@ @use '../tokens/components' as components; @use '../functions/tokens' as tokens; -tokens.$default-map: components.$post-switch; +$temp-map: ( + 'post-switch-disabled-border-width': 1px, + 'post-switch-disabled-border-stroke': grey, + 'post-switch-disabled-border-style': dashed, + 'post-switch-border-width': 1px, + 'post-switch-border-stroke': tokens.get('switch', 'element-enabled-bg'), + 'post-switch-handle-disabled-border-width': 1px, + 'post-switch-handle-disabled-border-stroke': grey, + 'post-switch-handle-disabled-border-style': dashed, + 'post-switch-handle-border-width': 1px, + 'post-switch-handle-border-stroke': tokens.get('switch', 'element-enabled-fg'), +); + +$merged-map: map.merge(components.$post-switch, $temp-map); + +tokens.$default-map: $merged-map; .form-check { display: flex; @@ -152,14 +168,14 @@ tokens.$default-map: components.$post-switch; } border: 0; - background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}'); + // background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}'); @include color-mx.on-dark-background { - background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}'); + // background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}'); } @include utility-mx.high-contrast-mode { - background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important; + // background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important; } .form-check-sm &[type='checkbox'] { @@ -209,6 +225,9 @@ tokens.$default-map: components.$post-switch; } } +$switch-handle-icon: url("data:image/svg+xml,"); +$switch-handle-icon-disabled: url("data:image/svg+xml,"); + .form-switch { .form-check-input { position: relative; @@ -216,44 +235,60 @@ tokens.$default-map: components.$post-switch; align-items: center; height: tokens.get('switch', 'element-height'); width: tokens.get('switch', 'element-width'); - border: 0; + border: tokens.get('switch', 'border-width') solid tokens.get('switch', 'border-stroke'); border-radius: tokens.get('switch', 'element-width'); background-color: tokens.get('switch', 'element-enabled-bg'); - padding: tokens.get('switch', 'padding-block-text') 0 tokens.get('switch', 'padding-block-text') tokens.get('switch', 'padding-inline-handle'); + padding: tokens.get('switch', 'padding-block-text') 0 tokens.get('switch', 'padding-block-text') + tokens.get('switch', 'padding-inline-handle'); transition: - background-color animation.$transition-base-timing; - - &::before, &::after { + background-color animation.$transition-base-timing, + border-color animation.$transition-base-timing; + + &::before, + &::after { position: absolute; display: block; width: tokens.get('switch', 'element-handle'); height: tokens.get('switch', 'element-handle'); background-color: tokens.get('switch', 'element-enabled-fg'); border-radius: tokens.get('switch', 'border-radius-round'); - transition: + transition: transform animation.$transition-base-timing, background-color animation.$transition-base-timing; } &::before { content: ''; - mask-image: form-check.$form-switch-handle-checkmark; + mask-image: $switch-handle-icon; background-color: transparent; z-index: 1; } + &::after { + border: tokens.get('switch', 'handle-border-width') solid + tokens.get('switch', 'handle-border-stroke'); + } + &:checked { background-color: tokens.get('switch', 'element-selected-bg'); + border-color: tokens.get('switch', 'element-selected-bg'); + + &::before, + &::after { + transform: translateX( + calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') * 1.5) + ); + } - &::before{ - transform: translateX(calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get('switch', 'padding-inline-handle') * 2)); + &::before { background-color: tokens.get('switch', 'icon-success'); - } + } + &::after { @include icons-mx.remove-icon; background-color: tokens.get('switch', 'element-selected-fg'); - transform: translateX(calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get('switch', 'padding-inline-handle') * 2)); } + & + .form-check-label { color: tokens.get('switch', 'text-selected-fg'); } @@ -262,11 +297,11 @@ tokens.$default-map: components.$post-switch; @include utility-mx.high-contrast-mode { transition: none; border: form-check.$form-check-input-border-width solid CanvasText; - + &:checked { background-color: SelectedItem !important; } - + &::after { max-width: tokens.get('switch', 'element-handle'); border-color: Canvas; @@ -274,20 +309,30 @@ tokens.$default-map: components.$post-switch; } &:checked::after { - transform: translateX(calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get('switch', 'padding-inline-handle') * 2 - form-check.$form-check-input-border-width * 2)); + transform: translateX( + calc( + tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get( + 'switch', + 'padding-inline-handle' + ) * 2 - form-check.$form-check-input-border-width * 2 + ) + ); } } &[disabled] { background-color: tokens.get('switch', 'element-disabled-bg'); - background-image: url('#{form-check.$form-check-input-switch-disabled-background-url-light}'); - + border: tokens.get('switch', 'disabled-border-width') + tokens.get('switch', 'disabled-border-style') tokens.get('switch', 'disabled-border-stroke'); + @include color-mx.on-dark-background { - background-image: url('#{form-check.$form-check-input-switch-disabled-background-url-dark}'); + border: tokens.get('switch', 'disabled-border-width') + tokens.get('switch', 'disabled-border-style') color.$white-alpha-80; } @include utility-mx.high-contrast-mode { - background-image: url('#{form-check.$form-check-input-switch-disabled-background-url-hcm}') !important; + border: tokens.get('switch', 'disabled-border-width') + tokens.get('switch', 'disabled-border-style') GrayText; } & + .form-check-label { @@ -296,19 +341,24 @@ tokens.$default-map: components.$post-switch; &::after { background-color: tokens.get('switch', 'element-disabled-fg'); - background-image: url('#{form-check.$form-check-input-switch-handle-disabled-background-url-light}'); - + border: tokens.get('switch', 'handle-disabled-border-width') + tokens.get('switch', 'handle-disabled-border-style') + tokens.get('switch', 'handle-disabled-border-stroke'); + @include color-mx.on-dark-background { - background-image: url('#{form-check.$form-check-input-switch-handle-disabled-background-url-dark}'); + border: tokens.get('switch', 'handle-disabled-border-width') + tokens.get('switch', 'handle-disabled-border-style') color.$white-alpha-80; } - + @include utility-mx.high-contrast-mode { - background-image: url('#{form-check.$form-check-input-switch-handle-disabled-background-url-hcm}') !important; + border: tokens.get('switch', 'handle-disabled-border-width') + tokens.get('switch', 'handle-disabled-border-style') GrayText; } } - &::before { - background-color: transparent; + &:checked::before { + background-color: tokens.get('switch', 'disabled-border-stroke'); + mask-image: $switch-handle-icon-disabled; } @include utility-mx.high-contrast-mode { @@ -325,9 +375,11 @@ tokens.$default-map: components.$post-switch; &:hover > .form-check-input:not([disabled]) { background-color: tokens.get('switch', 'element-hover-bg'); + border-color: tokens.get('switch', 'element-hover-bg'); &::after { background-color: tokens.get('switch', 'element-hover-fg'); + border-color: tokens.get('switch', 'element-hover-fg'); } &::before { @@ -336,7 +388,7 @@ tokens.$default-map: components.$post-switch; @include utility-mx.high-contrast-mode { border-color: Highlight; - &::after{ + &::after { background-color: CanvasText; } } diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss index c17f7fb7f0..9eea10127d 100644 --- a/packages/styles/src/variables/components/_form-check.scss +++ b/packages/styles/src/variables/components/_form-check.scss @@ -7,10 +7,10 @@ @use './../../functions/sizing'; @use './../../functions/forms' as forms-fn; -@use '../../tokens/components' as components; -@use '../../functions/tokens' as tokens; +// @use '../../tokens/components' as components; +// @use '../../functions/tokens' as tokens; -tokens.$default-map: components.$post-switch; +// tokens.$default-map: components.$post-switch; $form-check-row-gap: spacing.$size-small-regular !default; $form-check-column-gap: spacing.$size-mini !default; @@ -27,13 +27,6 @@ $form-check-input-disabled-svg-stroke-square-pattern-sm: '2 1.5 4 1.5 4 1.5 2 3. $form-check-input-disabled-svg-stroke-square-pathlength-sm: 66; $form-check-input-disabled-svg-stroke-circle-pattern: '4 2'; -// Switch -$form-check-input-disabled-svg-stroke-switch-color: #696864; -$form-check-input-disabled-svg-stroke-switch-border-width: 2px; -$form-check-input-disabled-svg-stroke-switch-pattern:'4 2'; -$form-check-input-disabled-svg-stroke-switch-pathlength: 138; -$form-check-input-disabled-svg-stroke-switch-handle-pathlength: 48; - // Checkbox lg $form-check-input-disabled-background-url-light-lg: forms-fn.get-background-svg-stroke( 'square', @@ -100,91 +93,3 @@ $form-check-input-radio-disabled-background-url-hcm: forms-fn.get-background-svg initial, $form-check-input-disabled-svg-border-width ); - -// Switch -$form-check-input-switch-disabled-background-url-light: forms-fn.get-background-svg-stroke( - 'switch', - $form-check-input-disabled-svg-stroke-switch-color, - $form-check-input-disabled-svg-stroke-switch-pattern, - $form-check-input-disabled-svg-stroke-switch-pathlength, - $form-check-input-disabled-svg-stroke-switch-border-width -); -$form-check-input-switch-disabled-background-url-dark: forms-fn.get-background-svg-stroke( - 'switch', - color.$white-alpha-80, - $form-check-input-disabled-svg-stroke-switch-pattern, - $form-check-input-disabled-svg-stroke-switch-pathlength, - $form-check-input-disabled-svg-stroke-switch-border-width -); -$form-check-input-switch-disabled-background-url-hcm: forms-fn.get-background-svg-stroke( - 'switch', - 'GrayText', - $form-check-input-disabled-svg-stroke-switch-pattern, - $form-check-input-disabled-svg-stroke-switch-pathlength, - $form-check-input-disabled-svg-stroke-switch-border-width -); - -// Switch handle -$form-check-input-switch-handle-disabled-background-url-light: forms-fn.get-background-svg-stroke( - 'circle', - $form-check-input-disabled-svg-stroke-switch-color, - $form-check-input-disabled-svg-stroke-switch-pattern, - $form-check-input-disabled-svg-stroke-switch-handle-pathlength, - $form-check-input-disabled-svg-stroke-switch-border-width -); -$form-check-input-switch-handle-disabled-background-url-dark: forms-fn.get-background-svg-stroke( - 'circle', - color.$white-alpha-80, - $form-check-input-disabled-svg-stroke-switch-pattern, - $form-check-input-disabled-svg-stroke-switch-handle-pathlength, - $form-check-input-disabled-svg-stroke-switch-border-width -); -$form-check-input-switch-handle-disabled-background-url-hcm: forms-fn.get-background-svg-stroke( - 'circle', - 'GrayText', - $form-check-input-disabled-svg-stroke-switch-pattern, - $form-check-input-disabled-svg-stroke-switch-handle-pathlength, - $form-check-input-disabled-svg-stroke-switch-border-width -); - -$form-switch-column-gap: spacing.$size-regular !default; -$form-switch-height: spacing.$size-big !default; -$form-switch-width: 2 * spacing.$size-big !default; -$form-switch-bg: rgba(var(--post-contrast-color-rgb), 0.3) !default; -$form-switch-checked-bg: var(--post-success) !default; -$form-switch-disabled-bg: color.$gray-20 !default; -$form-switch-background-image: linear-gradient( - to right, - #{$form-switch-bg} 50%, - #{$form-switch-checked-bg} 50% -) !default; -$form-switch-color: color.$white !default; -$form-switch-border-color: color.$gray-60 !default; -$form-switch-checked-border-color: color.$black !default; -$form-switch-disabled-border-color: color.$gray-40 !default; -$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default; -$form-switch-handle-checkmark: url("data:image/svg+xml,") !default; - -// DEPRECATED - -$form-switch-padding-start: 0 !default; -$form-switch-bg-image: url("data:image/svg+xml,") !default; -$form-switch-border-radius: $form-switch-width !default; -$form-switch-transition: - background-position animation.$transition-base-timing, - background-color animation.$transition-time-default !default; -$form-switch-checked-color: color.$white !default; -$form-switch-checked-bg-image: url("data:image/svg+xml,") !default; -$form-switch-focus-bg-image: $form-switch-checked-bg-image; -$form-switch-checked-bg-image-size: $form-switch-height; -$form-switch-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default; -$form-switch-linear-gradient: linear-gradient( - to right, - #{$form-switch-bg} 50%, - #{$form-switch-checked-bg} 50% -); -$form-switch-linear-gradient-size: (2 * $form-switch-width - $form-switch-height) - $form-switch-height; -$form-switch-label-padding-x: spacing.$size-regular !default; -$form-switch-label-padding-start: $form-switch-label-padding-top 0 0 $form-switch-label-padding-x !default; -$form-switch-label-padding-end: $form-switch-label-padding-top $form-switch-label-padding-x 0 0 !default;