RFC: added brandcolor for switch (#8213)

apps/web/pages/settings/my-account/appearance.tsx

@@ -52,6 +52,7 @@ const AppearanceView = () => {
   const utils = trpc.useContext();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
   const [darkModeError, setDarkModeError] = useState(false);
+  const [lightModeError, setLightModeError] = useState(false);
 
   const { isLoading: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
 
@@ -145,7 +146,14 @@ const AppearanceView = () => {
               <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
-                onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
+                onChange={(value) => {
+                  if (!checkWCAGContrastColor("#ffffff", value)) {
+                    setLightModeError(true);
+                  } else {
+                    setLightModeError(false);
+                  }
+                  formMethods.setValue("brandColor", value, { shouldDirty: true });
+                }}
               />
             </div>
           )}
@@ -180,6 +188,14 @@ const AppearanceView = () => {
           />
         </div>
       ) : null}
+      {lightModeError ? (
+        <div className="mt-4">
+          <Alert
+            severity="warning"
+            message="Light Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
+          />
+        </div>
+      ) : null}
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"

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
             )}
           />