Updating colour variables (#486)

ClickHouse · Oct 15, 2024 · 3e5a2f7 · 3e5a2f7
1 parent 772f07b
commit 3e5a2f7
Show file tree

Hide file tree

Showing 6 changed files with 621 additions and 16 deletions.
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -25,6 +25,10 @@ export default {
     label: { control: "text" },
     orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
     dir: { control: "inline-radio", options: ["start", "end"] },
+    variant: {
+      control: "radio",
+      options: ["default", "var1", "var2", "var3", "var4", "var5", "var6"],
+    },
   },
 };
 

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -4,9 +4,12 @@ import { ReactNode, useId } from "react";
 import { styled } from "styled-components";
 import { FormRoot } from "../commonElement";
 
+type CheckboxVariants = "default" | "var1" | "var2" | "var3" | "var4" | "var5" | "var6";
+
 export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
   label?: ReactNode;
   orientation?: "vertical" | "horizontal";
+  variant?: CheckboxVariants;
   dir?: "start" | "end";
 }
 
@@ -18,6 +21,7 @@ const Wrapper = styled(FormRoot)`
 export const Checkbox = ({
   id,
   label,
+  variant,
   disabled,
   orientation,
   dir,
@@ -32,6 +36,7 @@ export const Checkbox = ({
       <CheckInput
         id={id ?? defaultId}
         data-testid="checkbox"
+        variant={variant ?? "default"}
         disabled={disabled}
         aria-label={`${label}`}
         {...delegated}
@@ -55,25 +60,27 @@ export const Checkbox = ({
   );
 };
 
-const CheckInput = styled(RadixCheckbox.Root)`
+const CheckInput = styled(RadixCheckbox.Root)<{
+  variant: CheckboxVariants;
+}>`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${({ theme }) => `
+  ${({ theme, variant = "default" }) => `
     border-radius: ${theme.click.checkbox.radii.all};
     width: ${theme.click.checkbox.size.all};
     height: ${theme.click.checkbox.size.all};
-    background: ${theme.click.checkbox.color.background.default};
-    border: 1px solid ${theme.click.checkbox.color.stroke.default};
+    background: ${theme.click.checkbox.color.variations[variant].background.default};
+    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};
     cursor: pointer;
 
     &:hover {
-      background: ${theme.click.checkbox.color.background.hover};
+      background: ${theme.click.checkbox.color.variations[variant].background.hover};
     }
     &[data-state="checked"] {
-      border-color: ${theme.click.checkbox.color.stroke.active};
-      background: ${theme.click.checkbox.color.background.active};
+      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
+      background: ${theme.click.checkbox.color.variations[variant].background.active};
     }
     &[data-disabled] {
       background: ${theme.click.checkbox.color.background.disabled};

diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -1057,6 +1057,154 @@
         }
       },
       "color": {
+        "variations": {
+          "default": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "label": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          },
+          "var1": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          },
+          "var2": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          },
+          "var3": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          },
+          "var4": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          },
+          "var5": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          },
+          "var6": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "check": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          }
+        },
         "background": {
           "default": string,
           "hover": string,
@@ -2890,6 +3038,10 @@
       },
       "icon": {
         "background": string
+      },
+      "gradients": {
+        "yellowToBlack": string,
+        "whiteToBlack": string
       }
     }
   },