fix: Added relevant colors to preset and replaced with tailwind colors (#9733)

apps/storybook/styles/storybook-styles.css

@@ -209,6 +209,7 @@
     --cal-bg-success: #E2FBE8;
     --cal-bg-attention: #FCEED8;
     --cal-bg-error: #F9E3E2;
+    --cal-bg-dark-error: #752522;
 
 
     /* Borders */
@@ -216,6 +217,7 @@
     --cal-border: #D1D5DB;
     --cal-border-subtle:#E5E7EB;
     --cal-border-muted:#F3F4F6;
+    --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #111827;
@@ -251,6 +253,7 @@
     --cal-bg-success: #E2FBE8;
     --cal-bg-attention: #FCEED8;
     --cal-bg-error: #F9E3E2;
+    --cal-bg-dark-error: #752522;
 
 
     /* Borders */
@@ -258,6 +261,7 @@
     --cal-border: #444444;
     --cal-border-subtle: #2B2B2B;
     --cal-border-muted: #1C1C1C;
+    --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #F3F4F6;

apps/web/styles/globals.css

@@ -18,6 +18,7 @@
   --cal-bg-success: #e2fbe8;
   --cal-bg-attention: #fceed8;
   --cal-bg-error: #f9e3e2;
+  --cal-bg-dark-error: #752522;
 
   /* Borders */
   --cal-border-emphasis: #9ca3af;
@@ -25,6 +26,7 @@
   --cal-border-subtle: #e5e7eb;
   --cal-border-booker: #e5e7eb;
   --cal-border-muted: #f3f4f6;
+  --cal-border-error: #aa2e26;
 
   /* Content/Text */
   --cal-text-emphasis: #111827;
@@ -60,6 +62,7 @@
   --cal-bg-success: #e2fbe8;
   --cal-bg-attention: #fceed8;
   --cal-bg-error: #f9e3e2;
+  --cal-bg-dark-error: #752522;
 
   /* Borders */
   --cal-border-emphasis: #575757;
@@ -67,6 +70,7 @@
   --cal-border-subtle: #2b2b2b;
   --cal-border-booker: #2b2b2b;
   --cal-border-muted: #1c1c1c;
+  --cal-border-error: #aa2e26;
 
   /* Content/Text */
   --cal-text-emphasis: #f3f4f6;

packages/config/tailwind-preset.js

@@ -25,6 +25,7 @@ module.exports = {
         success: "var(--cal-bg-success)",
         attention: "var(--cal-bg-attention)",
         error: "var(--cal-bg-error)",
+        darkerror: "var(--cal-bg-dark-error)",
         black: "#111111",
         brand: {
           default: "var(--cal-brand,#111827)",
@@ -63,6 +64,7 @@ module.exports = {
         subtle: `var(--cal-border-subtle, ${subtleColor})`,
         muted: "var(--cal-border-muted, #F3F4F6)",
         booker: `var(--cal-border-booker, ${subtleColor})`,
+        error: "var(--cal-border-error, #AA2E26)",
       },
       textColor: {
         emphasis: "var(--cal-text-emphasis, #111827)",

packages/config/theme/colors.css

@@ -13,13 +13,15 @@
   --cal-bg-success: #E2FBE8;
   --cal-bg-attention: #FCEED8;
   --cal-bg-error: #F9E3E2;
+  --cal-bg-dark-error: #752522;
 
 
   /* Borders */
   --cal-border-emphasis:#9CA3AF;
-  --cal-border: #D1D5DB:
+  --cal-border: #D1D5DB;
   --cal-border-subtle:#E5E7EB;
   --cal-border-muted:#F3F4F6;
+  --cal-border-error: #aa2e26;
 
   /* Content/Text */
   --cal-text-emphasis: #111827;
@@ -56,6 +58,7 @@
   --cal-bg-success: #E2FBE8;
   --cal-bg-attention: #FCEED8;
   --cal-bg-error: #F9E3E2;
+  --cal-bg-dark-error: #752522;
 
 
   /* Borders */
@@ -63,6 +66,7 @@
   --cal-border: #444444;
   --cal-border-subtle:#2b2b2b;
   --cal-border-muted:#1c1c1c;
+  --cal-border-error: #aa2e26;
 
   /* Content/Text */
   --cal-text-emphasis: #f3f4f6;

packages/ui/components/form/checkbox/Checkbox.tsx

@@ -44,7 +44,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                 className: classNames(
                   "relative flex items-start",
                   !error && descriptionAsLabel ? "text-emphasis" : "text-emphasis",
-                  error && "text-red-800"
+                  error && "text-error"
                 ),
               },
               <>
@@ -56,11 +56,12 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     disabled={disabled}
                     id={rest.id ? rest.id : id}
                     className={classNames(
-                      "text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2",
+                      "text-primary-600 focus:ring-primary-500 border-default bg-default focus:bg-default active:bg-default h-4 w-4 rounded checked:hover:bg-gray-600 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
                       !error && disabled
                         ? "cursor-not-allowed bg-gray-300 checked:bg-gray-300 hover:bg-gray-300 hover:checked:bg-gray-300"
-                        : "hover:bg-subtle checked:bg-gray-800",
-                      error && "border-red-800 checked:bg-red-800 hover:bg-red-400",
+                        : "hover:bg-subtle hover:border-emphasis checked:bg-gray-800",
+                      error &&
+                        "border-error hover:bg-error hover:border-error checked:bg-darkerror checked:hover:border-error checked:hover:bg-darkerror",
                       rest.className
                     )}
                   />