diff --git a/changelog.txt b/changelog.txt index 147739b2..6dbf68df 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,6 @@ Version 1.4.2 - xxth February, 2025 - Improvement - Adjusted the ring width of the Radio Button component. +- Improvement - Added shadow to the disabled switch component for better visual consistency. Version 1.4.1 - 10th February, 2025 - Improvement - Show active preset with background color in the DatePicker component. diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index bc0df3ed..d0e73ca4 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -202,7 +202,7 @@ export const SwitchComponent = ( }; const disabledClassNames = { - input: 'bg-toggle-off-disabled disabled:border-transparent shadow-none disabled:cursor-not-allowed checked:disabled:bg-toggle-on-disabled', + input: 'bg-toggle-off-disabled disabled:border-transparent disabled:cursor-not-allowed checked:disabled:bg-toggle-on-disabled disabled:shadow-toggle-disabled', toggleDial: 'peer-disabled:cursor-not-allowed', }; diff --git a/src/theme/default-config.js b/src/theme/default-config.js index 39d248f9..abf90c16 100644 --- a/src/theme/default-config.js +++ b/src/theme/default-config.js @@ -192,6 +192,7 @@ const defaultTheme = { 'soft-shadow-2xl': '0px 24px 64px -12px rgba(149, 160, 178, 0.32)', 'soft-shadow-inner': '0px 1px 1px 0px rgba(0, 0, 0, 0.05)', + 'toggle-disabled': '1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset', }, fontSize: { tiny: '0.625rem',