RFC: added brandcolor for switch (#8213)

packages/config/tailwind-preset.js

@@ -26,9 +26,10 @@ module.exports = {
         error: "var(--cal-bg-error)",
         black: "#111111",
         brand: {
-          default: "var(--cal-brand,'#111827')",
-          emphasis: "var(--cal-brand-emphasis,'#101010')",
-          subtle: "var(--cal-brand-subtle,'#9CA3AF')",
+          default: "var(--cal-brand,#111827)",
+          emphasis: "var(--cal-brand-emphasis,#101010)",
+          subtle: "var(--cal-brand-subtle,#9CA3AF)",
+          accent: "var(--cal-brand-accent,white)",
         },
         gray: {
           50: "#F9FAFB",

packages/lib/getBrandColours.tsx

@@ -183,12 +183,14 @@ const useGetBrandingColours = ({
       "cal-brand-emphasis": lightColourMap["400"],
       "cal-brand-subtle": lightColourMap["200"],
       "cal-brand-text": getWCAGContrastColor(lightColourMap["500"]),
+      "cal-brand-accent": getWCAGContrastColor(lightColourMap["500"]),
     },
     dark: {
       "cal-brand": darkColourMap["500"],
       "cal-brand-emphasis": darkColourMap["600"],
       "cal-brand-subtle": darkColourMap["800"],
       "cal-brand-text": getWCAGContrastColor(darkColourMap["500"]),
+      "cal-brand-accent": getWCAGContrastColor(darkColourMap["500"]),
     },
   };
   return theme;

packages/ui/components/form/switch/Switch.tsx

@@ -27,7 +27,7 @@ const Switch = (
 ) => {
   const { label, fitToHeight, classNames, ...primitiveProps } = props;
   const id = useId();
-
+  const isChecked = props.checked || props.defaultChecked;
   return (
     <Wrapper tooltip={props.tooltip}>
       <div
@@ -38,7 +38,7 @@ const Switch = (
         )}>
         <PrimitiveSwitch.Root
           className={cx(
-            props.checked || props.defaultChecked ? "bg-inverted" : "bg-emphasis",
+            props.checked || props.defaultChecked ? "bg-brand-default" : "bg-emphasis",
             primitiveProps.disabled && "cursor-not-allowed",
             "focus:ring-brand-default h-5 w-[34px] rounded-full shadow-none",
             props.className
@@ -48,7 +48,7 @@ const Switch = (
             id={id}
             className={cx(
               "block h-[14px] w-[14px] rounded-full transition will-change-transform ltr:translate-x-[4px] rtl:-translate-x-[4px] ltr:[&[data-state='checked']]:translate-x-[17px] rtl:[&[data-state='checked']]:-translate-x-[17px]",
-              props.checked || props.defaultChecked ? "bg-default shadow-inner" : "bg-inverted",
+              isChecked ? "bg-brand-accent shadow-inner" : "bg-default",
               classNames?.thumb
             )}
           />