Skip to content

Commit

Permalink
feat(form): Updated toggle inactive and active colors to be configurable
Browse files Browse the repository at this point in the history 
This also fixes the colors to better match the v1 behavior of having the
unchecked/inactive state be the secondary color while only the
checked/active state is the secondary theme color.
  • Loading branch information
@mlaursen
mlaursen committed Aug 7, 2020
1 parent b6d2318 commit 49319e6
Show file tree
Hide file tree
Showing 5 changed files with 237 additions and 28 deletions.
124 changes: 98 additions & 26 deletions packages/documentation/src/constants/sassdoc/form.ts
View file
Expand Up @@ -946,28 +946,43 @@ const sassdoc: PackageSassDoc = {
name: "rmd-toggle-hidden",
description:
"Creates the styles for a form input that should be hidden from view. This should normally be applied to checkbox or radio input types.\n",
source: "packages/form/src/toggle/_mixins.scss#L78-L91",
source: "packages/form/src/toggle/_mixins.scss#L78-L97",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-input-hidden", type: "mixin", packageName: "form" },
{
name: "rmd-toggle-active-color",
type: "variable",
packageName: "form",
},
{
name: "rmd-toggle-inactive-color",
type: "variable",
packageName: "form",
},
],
packageName: "form",
code: "@mixin rmd-toggle-hidden { … }",
sourceCode:
"@mixin rmd-toggle-hidden {\n @include rmd-input-hidden;\n\n &:checked + .rmd-toggle__icon::before {\n opacity: 0;\n }\n\n &:checked + .rmd-toggle__icon--indeterminate {\n &::before,\n &::after {\n opacity: 1;\n }\n }\n}\n",
"@mixin rmd-toggle-hidden {\n @include rmd-input-hidden;\n\n @if $rmd-toggle-active-color != $rmd-toggle-inactive-color {\n &:checked + .rmd-toggle__icon {\n color: $rmd-toggle-active-color;\n }\n }\n\n &:checked + .rmd-toggle__icon::before {\n opacity: 0;\n }\n\n &:checked + .rmd-toggle__icon--indeterminate {\n &::before,\n &::after {\n opacity: 1;\n }\n }\n}\n",
type: "mixin",
},
"rmd-toggle-icon": {
name: "rmd-toggle-icon",
description:
"Creates the styles for the checkbox and radio input types' icon\n",
source: "packages/form/src/toggle/_mixins.scss#L95-L161",
source: "packages/form/src/toggle/_mixins.scss#L101-L167",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-icon-theme", type: "mixin", packageName: "icon" },
{ name: "rmd-form-theme", type: "mixin", packageName: "form" },
{ name: "rmd-transition", type: "mixin", packageName: "transition" },
{ name: "rmd-form-theme", type: "mixin", packageName: "form" },
{ name: "rmd-theme", type: "mixin", packageName: "theme" },
{
name: "rmd-toggle-inactive-color",
type: "variable",
packageName: "form",
},
{
name: "rmd-transition-standard-time",
type: "variable",
Expand All @@ -982,14 +997,14 @@ const sassdoc: PackageSassDoc = {
packageName: "form",
code: "@mixin rmd-toggle-icon { … }",
sourceCode:
'@mixin rmd-toggle-icon {\n @include rmd-icon-theme(height, size);\n @include rmd-icon-theme(width, size);\n @include rmd-form-theme(color, active-color);\n\n .rmd-icon {\n color: inherit;\n fill: currentColor;\n height: inherit;\n width: inherit;\n }\n\n align-items: center;\n display: inline-flex;\n justify-content: center;\n pointer-events: none;\n position: absolute;\n\n &--overlay {\n &::before {\n @include rmd-transition(standard);\n @include rmd-form-theme(bottom, toggle-inset);\n @include rmd-form-theme(left, toggle-inset);\n @include rmd-form-theme(right, toggle-inset);\n @include rmd-form-theme(top, toggle-inset);\n @include rmd-theme(background-color, background);\n\n content: "";\n opacity: 1;\n position: absolute;\n transition: opacity $rmd-transition-standard-time;\n z-index: 1;\n }\n }\n\n &--indeterminate::after {\n @include rmd-transition(standard);\n @include rmd-form-theme(background-color, active-color);\n @include rmd-form-theme(left, toggle-inset);\n @include rmd-form-theme(right, toggle-inset);\n @include rmd-form-theme(height, indeterminate-height);\n\n content: "";\n opacity: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: opacity $rmd-transition-standard-time;\n z-index: 2;\n }\n\n &--circle::before {\n border-radius: $rmd-toggle-border-radius;\n }\n\n &--disabled {\n @include rmd-theme(color, text-disabled-on-background);\n }\n\n &--dense {\n @include rmd-form-theme(bottom, toggle-dense-inset);\n @include rmd-form-theme(left, toggle-dense-inset);\n @include rmd-form-theme(right, toggle-dense-inset);\n @include rmd-form-theme(top, toggle-dense-inset);\n @include rmd-form-theme(height, indeterminate-dense-height);\n }\n}\n',
'@mixin rmd-toggle-icon {\n @include rmd-icon-theme(height, size);\n @include rmd-icon-theme(width, size);\n\n .rmd-icon {\n color: inherit;\n fill: currentColor;\n height: inherit;\n width: inherit;\n }\n\n align-items: center;\n color: $rmd-toggle-inactive-color;\n display: inline-flex;\n justify-content: center;\n pointer-events: none;\n position: absolute;\n\n &--overlay {\n &::before {\n @include rmd-transition(standard);\n @include rmd-form-theme(bottom, toggle-inset);\n @include rmd-form-theme(left, toggle-inset);\n @include rmd-form-theme(right, toggle-inset);\n @include rmd-form-theme(top, toggle-inset);\n @include rmd-theme(background-color, background);\n\n content: "";\n opacity: 1;\n position: absolute;\n transition: opacity $rmd-transition-standard-time;\n z-index: 1;\n }\n }\n\n &--indeterminate::after {\n @include rmd-transition(standard);\n @include rmd-form-theme(background-color, active-color);\n @include rmd-form-theme(left, toggle-inset);\n @include rmd-form-theme(right, toggle-inset);\n @include rmd-form-theme(height, indeterminate-height);\n\n content: "";\n opacity: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: opacity $rmd-transition-standard-time;\n z-index: 2;\n }\n\n &--circle::before {\n border-radius: $rmd-toggle-border-radius;\n }\n\n &--disabled {\n @include rmd-theme(color, text-disabled-on-background);\n }\n\n &--dense {\n @include rmd-form-theme(bottom, toggle-dense-inset);\n @include rmd-form-theme(left, toggle-dense-inset);\n @include rmd-form-theme(right, toggle-dense-inset);\n @include rmd-form-theme(top, toggle-dense-inset);\n @include rmd-form-theme(height, indeterminate-dense-height);\n }\n}\n',
type: "mixin",
},
"rmd-toggle-dense-theme": {
name: "rmd-toggle-dense-theme",
description:
"Updates the checkbox and radio components to have a dense theme by updating the toggle-inset css variable to be the dense version. This should generally be used within media queries.\n",
source: "packages/form/src/toggle/_mixins.scss#L166-L172",
source: "packages/form/src/toggle/_mixins.scss#L172-L178",
usedBy: [
{ name: "rmd-utils-dense", type: "mixin", packageName: "utils" },
],
Expand All @@ -1010,7 +1025,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch": {
name: "rmd-switch",
description: "Creates the styles for the switch component\n",
source: "packages/form/src/toggle/_mixins.scss#L176-L196",
source: "packages/form/src/toggle/_mixins.scss#L182-L202",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-transition", type: "mixin", packageName: "transition" },
Expand Down Expand Up @@ -1062,7 +1077,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-input": {
name: "rmd-switch-input",
description: "\n",
source: "packages/form/src/toggle/_mixins.scss#L200-L247",
source: "packages/form/src/toggle/_mixins.scss#L206-L253",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-input-hidden", type: "mixin", packageName: "form" },
Expand Down Expand Up @@ -1103,7 +1118,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-ball": {
name: "rmd-switch-ball",
description: "",
source: "packages/form/src/toggle/_mixins.scss#L250-L295",
source: "packages/form/src/toggle/_mixins.scss#L256-L301",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{
Expand Down Expand Up @@ -1160,7 +1175,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-container": {
name: "rmd-switch-container",
description: "",
source: "packages/form/src/toggle/_mixins.scss#L298-L300",
source: "packages/form/src/toggle/_mixins.scss#L304-L306",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{
Expand All @@ -1184,7 +1199,7 @@ const sassdoc: PackageSassDoc = {
name: "react-md-toggle",
description:
"Creates all the styles for the toggle components in the form package.\n",
source: "packages/form/src/toggle/_mixins.scss#L304-L343",
source: "packages/form/src/toggle/_mixins.scss#L310-L349",
usedBy: [{ name: "react-md-form", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-toggle-container", type: "mixin", packageName: "form" },
Expand Down Expand Up @@ -2044,11 +2059,68 @@ const sassdoc: PackageSassDoc = {
value: "0.25rem",
overridable: true,
},
"rmd-toggle-inactive-color": {
name: "rmd-toggle-inactive-color",
description:
"The color to use for the checkbox and radio components while unchecked. If you want to be able to dynamically configure the active color, you can set this to a custom css variable string.",
source: "packages/form/src/toggle/_variables.scss#L44",
since: "2.2.0",
usedBy: [
{ name: "rmd-toggle-hidden", type: "mixin", packageName: "form" },
{ name: "rmd-toggle-icon", type: "mixin", packageName: "form" },
],
requires: [
{ name: "rmd-theme-var", type: "function", packageName: "theme" },
],
packageName: "form",
examples: [
{
code:
"$rmd-toggle-inactive-color: --toggle-inactive;\n$rmd-toggle-active-color: --toggle-active;\n\n:root {\n --toggle-active: #{rmd-theme-var(secondary)};\n --toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};\n}\n\n.overriding {\n --toggle-active: #{$rmd-orange-700};\n --toggle-inactive: #{$rmd-orange-a-100};\n}\n",
compiled:
":root {\n --toggle-active: var(--rmd-theme-secondary, #f50057);\n --toggle-inactive: var(--rmd-theme-text-secondary-on-background, #757575);\n}\n\n.overriding {\n --toggle-active: #f57c00;\n --toggle-inactive: #ffd180;\n}\n",
type: "scss",
description: "As a Custom CSS Variable",
},
],
type: "Color|String",
value: "rmd-theme-var(text-secondary-on-background)",
compiled: "var(--rmd-theme-text-secondary-on-background, #757575)",
overridable: true,
},
"rmd-toggle-active-color": {
name: "rmd-toggle-active-color",
description:
"The color to use for the checkbox and radio components while checked. If you want to be able to dynamically configure the active color, you can set this to a custom css variable string.",
source: "packages/form/src/toggle/_variables.scss#L67",
since: "2.2.0",
usedBy: [
{ name: "rmd-toggle-hidden", type: "mixin", packageName: "form" },
],
requires: [
{ name: "rmd-theme-var", type: "function", packageName: "theme" },
],
packageName: "form",
examples: [
{
code:
"$rmd-toggle-inactive-color: --toggle-inactive;\n$rmd-toggle-active-color: --toggle-active;\n\n:root {\n --toggle-active: #{rmd-theme-var(secondary)};\n --toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};\n}\n\n.overriding {\n --toggle-active: #{$rmd-orange-700};\n --toggle-inactive: #{$rmd-orange-a-100};\n}\n",
compiled:
":root {\n --toggle-active: var(--rmd-theme-secondary, #f50057);\n --toggle-inactive: var(--rmd-theme-text-secondary-on-background, #757575);\n}\n\n.overriding {\n --toggle-active: #f57c00;\n --toggle-inactive: #ffd180;\n}\n",
type: "scss",
description: "As a Custom CSS Variable",
},
],
type: "Color|String",
value: "rmd-theme-var(secondary)",
compiled: "var(--rmd-theme-secondary, #f50057)",
overridable: true,
},
"rmd-checkbox-indeterminate-height": {
name: "rmd-checkbox-indeterminate-height",
description:
"The height for the indeterminate checkbox's state line that covers the icon.\n",
source: "packages/form/src/toggle/_variables.scss#L26",
source: "packages/form/src/toggle/_variables.scss#L72",
packageName: "form",
type: "Number",
value: "0.15rem",
Expand All @@ -2058,7 +2130,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-checkbox-indeterminate-dense-height",
description:
"The height for the indeterminate checkbox's state line that covers the icon when the dense spec is enabled.\n",
source: "packages/form/src/toggle/_variables.scss#L31",
source: "packages/form/src/toggle/_variables.scss#L77",
packageName: "form",
type: "Number",
value: "0.125rem",
Expand All @@ -2068,7 +2140,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-track-height",
description:
"The height for a switch's track. The track is the background that the ball animates left and right on.\n",
source: "packages/form/src/toggle/_variables.scss#L36",
source: "packages/form/src/toggle/_variables.scss#L82",
usedBy: [
{ name: "rmd-switch", type: "mixin", packageName: "form" },
{ name: "rmd-switch-ball", type: "mixin", packageName: "form" },
Expand All @@ -2082,7 +2154,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-track-width",
description:
"The width for a switch's track. The track is the background that the ball animates left and right on.\n",
source: "packages/form/src/toggle/_variables.scss#L41",
source: "packages/form/src/toggle/_variables.scss#L87",
usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2093,7 +2165,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-track-background-color",
description:
"The background color for a switch's track. This is the element that the ball animates left and right on.",
source: "packages/form/src/toggle/_variables.scss#L50-L54",
source: "packages/form/src/toggle/_variables.scss#L96-L100",
requires: [
{ name: "rmd-black-base", type: "variable", packageName: "theme" },
{
Expand All @@ -2118,7 +2190,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-track-border-radius",
description:
"The border radius to apply to the switch's track. This is the element that the ball animates left and right on.\n",
source: "packages/form/src/toggle/_variables.scss#L59",
source: "packages/form/src/toggle/_variables.scss#L105",
usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2128,7 +2200,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-ball-size": {
name: "rmd-switch-ball-size",
description: "The size of the switch's ball.\n",
source: "packages/form/src/toggle/_variables.scss#L63",
source: "packages/form/src/toggle/_variables.scss#L109",
usedBy: [
{ name: "rmd-switch", type: "mixin", packageName: "form" },
{ name: "rmd-switch-input", type: "mixin", packageName: "form" },
Expand All @@ -2142,7 +2214,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-ball-border-radius": {
name: "rmd-switch-ball-border-radius",
description: "The border radius for the switch's ball.\n",
source: "packages/form/src/toggle/_variables.scss#L67",
source: "packages/form/src/toggle/_variables.scss#L113",
usedBy: [{ name: "rmd-switch-ball", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2153,7 +2225,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-ball-offset",
description:
"The amount of offset that should be applied to the ball relative to its track. This is really used so the ball can overlap the track a bit to look a bit nicer.\n",
source: "packages/form/src/toggle/_variables.scss#L72",
source: "packages/form/src/toggle/_variables.scss#L118",
usedBy: [
{ name: "rmd-switch-input", type: "mixin", packageName: "form" },
{ name: "rmd-switch-ball", type: "mixin", packageName: "form" },
Expand All @@ -2167,7 +2239,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-container-vertical-padding",
description:
"The vertical padding for the switch container. This should generally be large enough so that the ball does not overlap any other elements.\n",
source: "packages/form/src/toggle/_variables.scss#L77",
source: "packages/form/src/toggle/_variables.scss#L123",
usedBy: [
{ name: "rmd-switch-container", type: "mixin", packageName: "form" },
],
Expand All @@ -2180,7 +2252,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-container-horizontal-padding",
description:
"The horizontal padding for the switch container. This should generally be large enough so that the ball does not overlap the label or other elements.",
source: "packages/form/src/toggle/_variables.scss#L83",
source: "packages/form/src/toggle/_variables.scss#L129",
usedBy: [
{ name: "rmd-switch-container", type: "mixin", packageName: "form" },
],
Expand All @@ -2194,7 +2266,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-ball-disabled-color",
description:
"The color to use for the switch's ball when it is toggled on and disabled.",
source: "packages/form/src/toggle/_variables.scss#L90-L96",
source: "packages/form/src/toggle/_variables.scss#L136-L142",
usedBy: [
{ name: "rmd-switch-input", type: "mixin", packageName: "form" },
],
Expand All @@ -2217,7 +2289,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-progress-width",
description:
"The width of the circular progress bar. This will make the progress bar more prominent than the normal circular progress.\n",
source: "packages/form/src/toggle/_variables.scss#L101",
source: "packages/form/src/toggle/_variables.scss#L147",
usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2228,7 +2300,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-progress-background-color",
description:
"The background color to use for the switch's ball while the the switch is loading.",
source: "packages/form/src/toggle/_variables.scss#L107",
source: "packages/form/src/toggle/_variables.scss#L153",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-white-base", type: "variable", packageName: "theme" },
Expand All @@ -2243,7 +2315,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-progress-padding",
description:
"The amount of padding to apply to the async switch's progress bar. This will make it so there is some space between the switch's ball and the progress bar.\n",
source: "packages/form/src/toggle/_variables.scss#L112",
source: "packages/form/src/toggle/_variables.scss#L158",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand Down

0 comments on commit 49319e6

Please sign in to comment.