diff --git a/.changeset/quiet-pants-kneel.md b/.changeset/quiet-pants-kneel.md new file mode 100644 index 0000000000..ff932fe9e1 --- /dev/null +++ b/.changeset/quiet-pants-kneel.md @@ -0,0 +1,6 @@ +--- +"@marigold/theme-b2b": minor +"@marigold/theme-core": minor +--- + +fix: remove and update `Switch` styles for themes diff --git a/themes/theme-b2b/src/components/Switch.styles.ts b/themes/theme-b2b/src/components/Switch.styles.ts index 537cdf3a41..4c4e7d6c2a 100644 --- a/themes/theme-b2b/src/components/Switch.styles.ts +++ b/themes/theme-b2b/src/components/Switch.styles.ts @@ -6,7 +6,7 @@ export const Switch: ThemeComponent<'Switch'> = { [ 'bg-bg-inverted/20 border-border-base border', 'group-selected/switch:bg-bg-selected-input', - 'group-disabled/switch:bg-bg-base-disabled group-disabled/switch:opacity-[0.5]', + 'group-disabled/switch:bg-bg-base-disabled', ], { variants: { @@ -18,9 +18,9 @@ export const Switch: ThemeComponent<'Switch'> = { ), thumb: cva( [ - 'bg-white', + 'bg-bg-base', 'group-disabled/switch:bg-bg-base-disabled', - 'shadow-[1px_1px_4px]', + 'border-border-base border border-solid', ], { variants: { diff --git a/themes/theme-core/src/components/Switch.styles.ts b/themes/theme-core/src/components/Switch.styles.ts index eac2f89a54..17aeb80da9 100644 --- a/themes/theme-core/src/components/Switch.styles.ts +++ b/themes/theme-core/src/components/Switch.styles.ts @@ -4,14 +4,13 @@ export const Switch: ThemeComponent<'Switch'> = { container: cva('justify-start'), track: cva([ 'h-[22px]', - 'bg-bg-surface-raised shadow-[0_0_0_1px]', - 'group-selected/switch:bg-bg-brand group-selected/switch:shadow-[#ae440a]', - 'group-disabled/switch:bg-bg-inverted-disabled group-disabled/switch:opacity-[0.5] group-disabled/switch:shadow-[0_0_0_1px] ', + 'bg-bg-inverted border-border-inverted border border-solid', + 'group-selected/switch:bg-bg-selected-input group-selected/switch:border-border-selected', + 'group-disabled/switch:bg-bg-base-disabled group-disabled/switch:border-border-base', ]), thumb: cva([ 'size-[20px]', - 'bg-white', - 'group-disabled/switch:bg-bg-inverted-disabled', - 'shadow-[1px_1px_4px]', + 'bg-bg-base', + 'group-selected/switch:border-border-selected', ]), };