From f7da300ef06eca2bd4730b4b71a05f58e6530b6d Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Fri, 8 Dec 2023 10:56:59 +0200 Subject: [PATCH 1/5] Add ability to customize colors for disabled toggle --- src/form/Toggle/Toggle.module.css | 15 ++++++++++++++- src/utils/Theme/themes/dark.ts | 7 ++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css index 74ddaae4..0bc96cdf 100644 --- a/src/form/Toggle/Toggle.module.css +++ b/src/form/Toggle/Toggle.module.css @@ -15,7 +15,20 @@ &.disabled { cursor: not-allowed; - opacity: 0.8; + opacity: var(--toggle-disabled-opacity); + background-color: var(--toggle-disabled-background); + + .handle { + background-color: var(--toggle-handle-disabled-background); + } + + &.checked { + background-color: var(--toggle-checked-disabled-background); + + .handle { + background-color: var(--toggle-handle-checked-disabled-background); + } + } } &.small { diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts index 3b20044d..b57f0185 100644 --- a/src/utils/Theme/themes/dark.ts +++ b/src/utils/Theme/themes/dark.ts @@ -358,7 +358,12 @@ export const darkTheme: Theme = { 'toggle-spacing': spacings.sm, 'toggle-handle-background': darkColors.gray['300'], 'toggle-handle-checked-background': darkColors.gray['300'], - 'toggle-handle-border-radius': borders.radius.lg + 'toggle-handle-border-radius': borders.radius.lg, + 'toggle-disabled-background': darkColors.gray['100'], + 'toggle-handle-disabled-background': darkColors.gray['300'], + 'toggle-checked-disabled-background': darkColors.blue['50'], + 'toggle-handle-checked-disabled-background': darkColors.gray['300'], + 'toggle-disabled-opacity': '0.8' }, tooltip: { 'tooltip-background': darkColors.slate['500'], From d6c51292dbc35a559020ed1a517bec9850cbe0a4 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Fri, 8 Dec 2023 13:39:54 +0200 Subject: [PATCH 2/5] Move toggle-width, toggle-height and toggle-handle-size to global variables --- src/form/Toggle/Toggle.module.css | 5 ----- src/utils/Theme/themes/dark.ts | 3 +++ 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css index 0bc96cdf..f1d85338 100644 --- a/src/form/Toggle/Toggle.module.css +++ b/src/form/Toggle/Toggle.module.css @@ -1,9 +1,4 @@ .switch { - /** TODO: Improve this sizing logic */ - --toggle-width: 55px; - --toggle-height: 35px; - --toggle-handle-size: 25px; - display: flex; align-items: center; justify-content: flex-start; diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts index b57f0185..cf1909f8 100644 --- a/src/utils/Theme/themes/dark.ts +++ b/src/utils/Theme/themes/dark.ts @@ -350,6 +350,9 @@ export const darkTheme: Theme = { 'select-chip-icon-color': darkColors.slate['50'] }, toggle: { + 'toggle-width': '55px', + 'toggle-height': '35px', + 'toggle-handle-size': '25px', 'toggle-background': darkColors.gray['100'], 'toggle-background-checked': darkColors.blue['50'], 'toggle-border': 'none', From f1671bb19e3a0898679d3dd4af3fd2cc2c94fd5f Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Fri, 8 Dec 2023 14:44:13 +0200 Subject: [PATCH 3/5] Update documentation --- docs/theme/ThemeExample.mdx | 10 +++++++++- src/form/Toggle/Toggle.module.css | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/theme/ThemeExample.mdx b/docs/theme/ThemeExample.mdx index 5c2dbab9..910beb6f 100644 --- a/docs/theme/ThemeExample.mdx +++ b/docs/theme/ThemeExample.mdx @@ -386,6 +386,9 @@ export const darkTheme: Theme = { 'select-chip-icon-color': darkColors.slate['50'] }, toggle: { + 'toggle-width': '55px', + 'toggle-height': '35px', + 'toggle-handle-size': '25px', 'toggle-background': darkColors.gray['100'], 'toggle-background-checked': darkColors.blue['50'], 'toggle-border': 'none', @@ -394,7 +397,12 @@ export const darkTheme: Theme = { 'toggle-spacing': spacings.sm, 'toggle-handle-background': darkColors.gray['300'], 'toggle-handle-checked-background': darkColors.gray['300'], - 'toggle-handle-border-radius': borders.radius.lg + 'toggle-handle-border-radius': borders.radius.lg, + 'toggle-disabled-background': darkColors.gray['100'], + 'toggle-handle-disabled-background': darkColors.gray['300'], + 'toggle-checked-disabled-background': darkColors.blue['50'], + 'toggle-handle-checked-disabled-background': darkColors.gray['300'], + 'toggle-disabled-opacity': '0.8' }, tooltip: { 'tooltip-background': darkColors.slate['500'], diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css index f1d85338..b7b4bdcf 100644 --- a/src/form/Toggle/Toggle.module.css +++ b/src/form/Toggle/Toggle.module.css @@ -10,7 +10,7 @@ &.disabled { cursor: not-allowed; - opacity: var(--toggle-disabled-opacity); + opacity: var(--toggle-disabled-opacity, 0.8); background-color: var(--toggle-disabled-background); .handle { From 5cadd5722622dc7bc227a97fa8ebf6702b1ce981 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Fri, 8 Dec 2023 14:51:26 +0200 Subject: [PATCH 4/5] Update documentation --- docs/components/form/Toggle.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/components/form/Toggle.mdx b/docs/components/form/Toggle.mdx index 663dd5ad..65c3f9d0 100644 --- a/docs/components/form/Toggle.mdx +++ b/docs/components/form/Toggle.mdx @@ -19,12 +19,20 @@ It's commonly used for settings, preferences, and quick mode changes. ## Design Tokens This component uses the following design tokens: +- `toggle-width` +- `toggle-height` +- `ttoggle-handle-size` - `toggle-background` - `toggle-border-radius` - `toggle-spacing` - `toggle-handle-background` - `toggle-handle-checked-background` - `toggle-handle-border-radius` +- `toggle-disabled-background` +- `toggle-handle-disabled-background` +- `toggle-checked-disabled-background` +- `toggle-handle-checked-disabled-background` +- `toggle-disabled-opacity` Learn more about design tokens in the [design tokens documentation](?path=/story/docs-design-tokens-getting-started--page). From 17caadc74485fddb8387ce24ba9c602597bec095 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Fri, 8 Dec 2023 15:01:36 +0200 Subject: [PATCH 5/5] Add defaults --- src/form/Toggle/Toggle.module.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css index b7b4bdcf..177decb2 100644 --- a/src/form/Toggle/Toggle.module.css +++ b/src/form/Toggle/Toggle.module.css @@ -27,35 +27,35 @@ } &.small { - height: calc(var(--toggle-height) / 2); - width: calc(var(--toggle-width) / 2); + height: calc(var(--toggle-width, 35px) / 2); + width: calc(var(--toggle-width, 55px) / 2); padding: calc(var(--toggle-spacing) / 2); .handle { - height: calc(var(--toggle-handle-size) / 2); - width: calc(var(--toggle-handle-size) / 2); + height: calc(var(--toggle-width, 25px) / 2); + width: calc(var(--toggle-width, 25px) / 2); } } &.medium { - height: calc(var(--toggle-height) / 1.5); - width: calc(var(--toggle-width) / 1.5); + height: calc(var(--toggle-width, 35px) / 1.5); + width: calc(var(--toggle-width, 55px) / 1.5); padding: calc(var(--toggle-spacing) / 1.5); .handle { - height: calc(var(--toggle-handle-size) / 1.5); - width: calc(var(--toggle-handle-size) / 1.5); + height: calc(var(--toggle-width, 25px) / 1.5); + width: calc(var(--toggle-width, 25px) / 1.5); } } &.large { - height: var(--toggle-height); - width: var(--toggle-width); + height: var(--toggle-width, 35px); + width: var(--toggle-width, 55px); padding: var(--toggle-spacing); .handle { - height: var(--toggle-handle-size); - width: var(--toggle-handle-size); + height: var(--toggle-width, 25px); + width: var(--toggle-width, 25px); } }