Skip to content

Commit

Permalink
feat: selectors: add var theme support to check box radio and toggle (#…
Browse files Browse the repository at this point in the history 
…659)

* feat: selectors: add var theme support to check box radio and toggle

* chore: selectors: reverts transition change to limit scope

* chore: selectors: address pr feedback
  • Loading branch information
@dkilgore-eightfold
dkilgore-eightfold committed Jun 29, 2023
1 parent d79f7f9 commit 8525e42
Show file tree
Hide file tree
Showing 3 changed files with 218 additions and 75 deletions.
116 changes: 61 additions & 55 deletions src/components/CheckBox/checkbox.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.selector {
display: flex;
font-family: $octuple-font-family;
font-family: var(--font-stack-full);
position: relative;
width: fit-content;

Expand Down Expand Up @@ -37,7 +37,8 @@
}

.checkmark {
border: $space-xxxs solid var(--grey-secondary-color);
background: var(--check-box-background-color);
border: var(--check-box-border);
border-radius: $border-radius-xs;
height: $checkmark-medium-height;
width: $checkmark-medium-width;
Expand All @@ -50,7 +51,7 @@
$motion-delay-s;

&:after {
border: solid var(--primary-color);
border: solid var(--check-box-mark-color);
border-width: 0 $space-xxxs $space-xxxs 0;
content: '';
display: block;
Expand All @@ -66,7 +67,8 @@
}

&.toggle {
border: $space-xxxs solid var(--grey-secondary-color);
background: var(--toggle-switch-background-color);
border: var(--toggle-switch-border);
border-radius: $toggle-medium-height;
min-height: $toggle-medium-height;
height: $toggle-medium-height;
Expand All @@ -79,8 +81,8 @@
width: $toggle-medium-width;

&:after {
background-color: var(--grey-secondary-color);
border: solid var(--grey-secondary-color);
background: var(--toggle-switch-pip-color);
border: solid var(--toggle-switch-pip-color);
border-radius: 50%;
border-width: $space-xxxs;
content: '';
Expand All @@ -101,33 +103,33 @@

&:not(.disabled):not([disabled]):active + label {
.checkmark {
border: $space-xxxs solid var(--primary-secondary-color);
background-color: var(--accent-background3-color);
background: var(--check-box-active-background-color);
border: var(--check-box-active-border);

&.toggle {
border: $space-xxxs solid var(--primary-secondary-color);
background-color: var(--accent-background3-color);
background: var(--toggle-switch-active-background-color);
border: var(--toggle-switch-active-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-active-pip-color);
border-color: var(--toggle-switch-active-pip-color);
}
}
}
}

&:not(.disabled):not([disabled]):hover + label {
.checkmark {
border: $space-xxxs solid var(--primary-secondary-color);
background-color: var(--accent-background1-color);
background: var(--check-box-hover-background-color);
border: var(--check-box-hover-border);

&.toggle {
border: $space-xxxs solid var(--primary-secondary-color);
background-color: var(--accent-background1-color);
background: var(--toggle-switch-hover-background-color);
border: var(--toggle-switch-hover-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-hover-pip-color);
border-color: var(--toggle-switch-hover-pip-color);
}
}
}
Expand All @@ -144,23 +146,23 @@
$motion-delay-s;

.checkmark {
background-color: var(--accent-background3-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--check-box-checked-background-color);
border: var(--check-box-checked-border);

&.toggle {
background-color: var(--accent-background3-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--toggle-switch-checked-background-color);
border: var(--toggle-switch-checked-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-checked-pip-color);
border-color: var(--toggle-switch-checked-pip-color);
}
}
}

.checkmark {
&:after {
border-color: var(--primary-secondary-color);
border-color: var(--check-box-mark-color);
opacity: 1;
transform: rotate(45deg) scale(0.7);
transition: all $motion-duration-extra-fast $motion-ease-out-back
Expand All @@ -169,8 +171,8 @@

&.toggle {
&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-checked-pip-color);
border-color: var(--toggle-switch-checked-pip-color);
left: $toggle-medium-after-left-checked;
opacity: 1;
transform: none;
Expand All @@ -184,34 +186,34 @@
&:not(.disabled):not([disabled]):active + label {
.checkmark {
transform: scale(0.98);
background-color: var(--accent-background1-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--check-box-checked-active-background-color);
border: var(--check-box-checked-active-border);

&.toggle {
transform: scale(0.98);
background-color: var(--accent-background1-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--toggle-switch-checked-active-background-color);
border: var(--toggle-switch-checked-active-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-checked-active-pip-color);
border-color: var(--toggle-switch-checked-active-pip-color);
}
}
}
}

&:not(.disabled):not([disabled]):hover + label {
.checkmark {
background-color: var(--accent-background2-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--check-box-checked-hover-background-color);
border: var(--check-box-checked-hover-border);

&.toggle {
background-color: var(--accent-background2-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--toggle-switch-checked-hover-background-color);
border: var(--toggle-switch-checked-hover-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-checked-hover-pip-color);
border-color: var(--toggle-switch-checked-hover-pip-color);
}
}
}
Expand Down Expand Up @@ -504,11 +506,11 @@
&:checked {
&:focus-visible + label {
.checkmark {
outline: $space-xxxs solid var(--primary-color-50);
outline: var(--focus-visible-outline);
outline-offset: $selector-outline-offset;

&.toggle {
outline: $space-xxxs solid var(--primary-color-50);
outline: var(--focus-visible-outline);
outline-offset: $selector-outline-offset;
}
}
Expand All @@ -517,18 +519,22 @@

&:focus-visible + label {
.checkmark {
border: $space-xxxs solid var(--primary-color);
outline: $space-xxxs solid var(--primary-color-50);
border: var(--check-box-focus-visible-border);
outline: var(--focus-visible-outline);
outline-offset: $selector-outline-offset;

&:after {
border-color: var(--check-box-focus-visible-mark-color);
}

&.toggle {
border: $space-xxxs solid var(--primary-color);
outline: $space-xxxs solid var(--primary-color-50);
border: var(--toggle-switch-focus-visible-border);
outline: var(--focus-visible-outline);
outline-offset: $selector-outline-offset;

&:after {
background-color: var(--primary-color);
border-color: var(--primary-color);
background: var(--toggle-switch-focus-visible-pip-color);
border-color: var(--toggle-switch-focus-visible-pip-color);
}
}
}
Expand All @@ -550,15 +556,15 @@
&:focus-visible + label {
.checkmark {
outline: none;
border: $space-xxxs solid var(--grey-secondary-color);
border: var(--check-box-border);

&.toggle {
outline: none;
border: $space-xxxs solid var(--grey-secondary-color);
border: var(--toggle-switch-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-pip-color);
border-color: var(--toggle-switch-pip-color);
}
}
}
Expand All @@ -584,15 +590,15 @@
&:focus-visible + label {
.checkmark {
outline: none;
border: $space-xxxs solid var(--grey-secondary-color);
border: var(--check-box-border);

&.toggle {
outline: none;
border: $space-xxxs solid var(--grey-secondary-color);
border: var(--toggle-switch-border);

&:after {
background-color: var(--primary-secondary-color);
border-color: var(--primary-secondary-color);
background: var(--toggle-switch-pip-color);
border-color: var(--toggle-switch-pip-color);
}
}
}
Expand Down
46 changes: 27 additions & 19 deletions src/components/RadioButton/radio.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.selector {
display: flex;
font-family: $octuple-font-family;
font-family: var(--font-stack-full);
position: relative;
width: fit-content;

Expand Down Expand Up @@ -35,7 +35,8 @@
}

.radio-button {
border: $space-xxxs solid var(--grey-secondary-color);
background: var(--radio-button-background-color);
border: var(--radio-button-border);
border-radius: 50%;
height: $radio-medium-height;
width: $radio-medium-width;
Expand All @@ -50,9 +51,9 @@
left: $radio-medium-after-left;
width: $radio-medium-after-width;
height: $radio-medium-after-height;
background-color: var(--primary-secondary-color);
background: var(--radio-button-pip-color);
border-radius: 50%;
border: solid 1px var(--primary-secondary-color);
border: solid 1px var(--radio-button-pip-color);
content: '';
position: absolute;
transform: scale(0);
Expand All @@ -68,15 +69,15 @@

&:not(.disabled):not([disabled]):hover + label {
.radio-button {
background-color: var(--accent-background2-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--radio-button-hover-background-color);
border: var(--radio-button-hover-border);
}
}

&:not(.disabled):not([disabled]):active + label {
.radio-button {
background-color: var(--accent-background3-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--radio-button-active-background-color);
border: var(--radio-button-active-border);
}
}
}
Expand All @@ -93,8 +94,8 @@
transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;

.radio-button {
background-color: var(--accent-background3-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--radio-button-checked-background-color);
border: var(--radio-button-checked-border);
}

.radio-button:after {
Expand All @@ -109,16 +110,16 @@

&:not(.disabled):not([disabled]):hover + label {
.radio-button {
background-color: var(--accent-background2-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--radio-button-checked-hover-background-color);
border: var(--radio-button-checked-hover-border);
}
}

&:not(.disabled):not([disabled]):active + label {
.radio-button {
transform: scale(0.98);
background-color: var(--accent-background1-color);
border: $space-xxxs solid var(--primary-secondary-color);
background: var(--radio-button-checked-active-background-color);
border: var(--radio-button-checked-active-border);
}
}
}
Expand Down Expand Up @@ -337,15 +338,22 @@
&:checked {
&:focus-visible + label {
.radio-button {
outline: $space-xxxs solid var(--primary-color-50);
outline: var(--focus-visible-outline);
outline-offset: $selector-outline-offset;
}
}
}

&:focus-visible + label {
.radio-button {
outline: $space-xxxs solid var(--primary-color-50);
border: $space-xxxs solid var(--primary-secondary-color);
border: var(--radio-button-focus-visible-border);
outline: var(--focus-visible-outline);
outline-offset: $selector-outline-offset;

&:after {
background: var(--radio-button-focus-visible-pip-color);
border-color: var(--radio-button-focus-visible-pip-color);
}
}
}

Expand All @@ -361,7 +369,7 @@
&:focus-visible + label {
.radio-button {
outline: none;
border: $space-xxxs solid var(--grey-secondary-color);
border: var(--radio-button-border);
}
}
}
Expand All @@ -381,7 +389,7 @@
&:focus-visible + label {
.radio-button {
outline: none;
border: $space-xxxs solid var(--grey-secondary-color);
border: var(--radio-button-border);
}
}
}
Expand Down

0 comments on commit 8525e42

Please sign in to comment.