From 566e185d046c1e2d81b350696a2d8178b1ad6ccf Mon Sep 17 00:00:00 2001 From: Ankith Date: Thu, 29 Dec 2022 14:10:49 +0530 Subject: [PATCH 1/2] Button colors --- .../components/Button/button.styles.css.ts | 230 ++++++++++++++---- lib/src/components/Button/button.types.ts | 20 +- 2 files changed, 200 insertions(+), 50 deletions(-) diff --git a/lib/src/components/Button/button.styles.css.ts b/lib/src/components/Button/button.styles.css.ts index 2c41b23..6c98fc8 100644 --- a/lib/src/components/Button/button.styles.css.ts +++ b/lib/src/components/Button/button.styles.css.ts @@ -1,54 +1,186 @@ import { recipe } from "@vanilla-extract/recipes"; +import { createTheme } from "@vanilla-extract/css"; +import { ButtonTheme } from "./button.types"; + +export const [defaultButtonTheme, defaultButtonVars]: ButtonTheme = createTheme( + { + color: "#FFFFFF", + backgroundColor: "#1AB5EB", + borderColor: "none", + hoverBackgroundColor: "#008FCB", + hoverColor: "#FFFFFF", + hoverBorderColor: "none", + focusBackgroundColor: "#1AB5EB40", + focusColor: "#FFFFFF", + focusBorderColor: "#C6EDFB", + disabledBackgroundColor: "#8CDAF5", + disabledColor: "#FFFFFF", + disabledBorderColor: "none", + } +); + +export const [lightButtonTheme, lightButtonVars]: ButtonTheme = createTheme({ + color: "#1AB5EB", + backgroundColor: "#F9F9F9", + borderColor: "#DDDDDD", + hoverBackgroundColor: "#F0F0F0", + hoverColor: "#008FCB", + hoverBorderColor: "none", + focusBackgroundColor: "#F9F9F9", + focusColor: "#1AB5EB", + focusBorderColor: "#C6EDFB", + disabledBackgroundColor: "#F9F9F9", + disabledColor: "#1AB5EB", + disabledBorderColor: "#DDDDDD", +}); + +export const [ghostButtonTheme, ghostButtonVars]: ButtonTheme = createTheme({ + color: "#1AB5EB", + backgroundColor: "none", + borderColor: "none", + hoverBackgroundColor: "#0000000D", + hoverColor: "#008FCB", + hoverBorderColor: "none", + focusBackgroundColor: "none", + focusColor: "#1AB5EB", + focusBorderColor: "#C6EDFB", + disabledBackgroundColor: "none", + disabledColor: "#1AB5EB", + disabledBorderColor: "", +}); + +export const [hallowButtonTheme, hallowButtonVars]: ButtonTheme = createTheme({ + color: "#1AB5EB", + backgroundColor: "none", + borderColor: "#1AB5EB", + hoverBackgroundColor: "none", + hoverColor: "#1AB5EB", + hoverBorderColor: "#AAAAAA", + focusBackgroundColor: "none", + focusColor: "#101010", + focusBorderColor: "#C6EDFB", + disabledBackgroundColor: "none", + disabledColor: "#878787", + disabledBorderColor: "#EEEEEE", +}); export const buttonStyles = recipe({ - base: { - borderRadius: 4, - color: "white", - cursor: "pointer", - }, + base: { + borderRadius: 4, + color: "white", + cursor: "pointer", + }, - variants: { - variant: { - default: { - background: "#1AB5EB", - border: 0, - }, - light: { - background: "#F9F9F9", - color: "#1AB5EB", - border: "1px solid #DDD", - }, - ghost: { - background: "none", - border: 0, - color: "#1AB5EB", - }, - hallow: { - background: "none", - border: "1px solid #1AB5EB", - color: "#1AB5EB", - }, - }, - padding: { - default: { padding: 0 }, - small: { padding: "8px 16px" }, - medium: { padding: "8px 16px" }, - large: { padding: 24 }, - }, - fontSize: { - small: { fontSize: 14 }, - medium: { fontSize: 16 }, - large: { fontSize: 24 }, - }, - margin: { - default: { margin: 0 }, - small: { margin: 12 }, - medium: { margin: 16 }, - large: { margin: 24 }, - }, - isBlock: { - true: { width: "100%" }, - false: { width: "auto" }, - }, - }, + variants: { + variant: { + default: { + background: defaultButtonVars.backgroundColor, + color: defaultButtonVars.color, + borderColor: defaultButtonVars.borderColor, + border: 0, + ":hover": { + background: defaultButtonVars.hoverBackgroundColor, + color: defaultButtonVars.hoverColor, + borderColor: defaultButtonVars.hoverBorderColor, + }, + ":focus": { + borderWidth: "2px", + background: defaultButtonVars.focusBackgroundColor, + color: defaultButtonVars.focusColor, + borderColor: defaultButtonVars.focusBorderColor, + }, + ":disabled": { + background: defaultButtonVars.disabledBackgroundColor, + color: defaultButtonVars.disabledColor, + borderColor: defaultButtonVars.disabledBorderColor, + }, + }, + light: { + background: lightButtonVars.backgroundColor, + color: lightButtonVars.color, + border: "1px solid", + borderColor: lightButtonVars.borderColor, + ":hover": { + background: lightButtonVars.hoverBackgroundColor, + color: lightButtonVars.hoverColor, + borderColor: lightButtonVars.hoverBorderColor, + }, + ":focus": { + borderWidth: "2px", + background: lightButtonVars.focusBackgroundColor, + color: lightButtonVars.focusColor, + borderColor: lightButtonVars.focusBorderColor, + }, + ":disabled": { + background: lightButtonVars.disabledBackgroundColor, + color: lightButtonVars.disabledColor, + borderColor: lightButtonVars.disabledBorderColor, + }, + }, + ghost: { + background: ghostButtonVars.backgroundColor, + border: 0, + color: ghostButtonVars.color, + ":hover": { + background: ghostButtonVars.hoverBackgroundColor, + color: ghostButtonVars.hoverColor, + borderColor: ghostButtonVars.hoverBorderColor, + }, + ":focus": { + borderWidth: "2px", + background: ghostButtonVars.focusBackgroundColor, + color: ghostButtonVars.focusColor, + borderColor: ghostButtonVars.focusBorderColor, + }, + ":disabled": { + background: ghostButtonVars.disabledBackgroundColor, + color: ghostButtonVars.disabledColor, + borderColor: ghostButtonVars.disabledBorderColor, + }, + }, + hallow: { + background: hallowButtonVars.backgroundColor, + border: "1px solid", + color: hallowButtonVars.color, + borderColor: hallowButtonVars.borderColor, + ":hover": { + background: hallowButtonVars.hoverBackgroundColor, + color: hallowButtonVars.hoverColor, + borderColor: hallowButtonVars.hoverBorderColor, + }, + ":focus": { + borderWidth: "2px", + background: hallowButtonVars.focusBackgroundColor, + color: hallowButtonVars.focusColor, + borderColor: hallowButtonVars.focusBorderColor, + }, + ":disabled": { + background: hallowButtonVars.disabledBackgroundColor, + color: hallowButtonVars.disabledColor, + borderColor: hallowButtonVars.disabledBorderColor, + }, + }, + }, + padding: { + default: { padding: 0 }, + small: { padding: "8px 16px" }, + medium: { padding: "8px 16px" }, + large: { padding: 24 }, + }, + fontSize: { + small: { fontSize: 14 }, + medium: { fontSize: 16 }, + large: { fontSize: 24 }, + }, + margin: { + default: { margin: 0 }, + small: { margin: 12 }, + medium: { margin: 16 }, + large: { margin: 24 }, + }, + isBlock: { + true: { width: "100%" }, + false: { width: "auto" }, + }, + }, }); diff --git a/lib/src/components/Button/button.types.ts b/lib/src/components/Button/button.types.ts index a744496..25c44f4 100644 --- a/lib/src/components/Button/button.types.ts +++ b/lib/src/components/Button/button.types.ts @@ -2,4 +2,22 @@ import { RecipeVariants } from "@vanilla-extract/recipes"; import { buttonStyles } from "./button.styles.css"; export type ButtonProps = RecipeVariants & - JSX.IntrinsicElements["button"]; + JSX.IntrinsicElements["button"]; + +export type ButtonTheme = [ + string, + { + color: string; + backgroundColor: string; + borderColor: string; + hoverColor: string; + hoverBackgroundColor: string; + hoverBorderColor: string; + focusColor: string; + focusBackgroundColor: string; + focusBorderColor: string; + disabledColor: string; + disabledBackgroundColor: string; + disabledBorderColor: string; + } +]; From 794c7bb4269e83ecad771b0cac6e2174c5ebb7ed Mon Sep 17 00:00:00 2001 From: Ankith Date: Mon, 30 Jan 2023 11:48:16 +0530 Subject: [PATCH 2/2] requested Changes --- .../components/Button/button.styles.css.ts | 158 ++++++------------ lib/src/components/Button/button.types.ts | 18 -- lib/src/styles/colors.ts | 15 ++ lib/src/themes/index.ts | 80 +++++++++ 4 files changed, 143 insertions(+), 128 deletions(-) create mode 100644 lib/src/styles/colors.ts create mode 100644 lib/src/themes/index.ts diff --git a/lib/src/components/Button/button.styles.css.ts b/lib/src/components/Button/button.styles.css.ts index 6c98fc8..2a624cd 100644 --- a/lib/src/components/Button/button.styles.css.ts +++ b/lib/src/components/Button/button.styles.css.ts @@ -1,68 +1,6 @@ import { recipe } from "@vanilla-extract/recipes"; -import { createTheme } from "@vanilla-extract/css"; -import { ButtonTheme } from "./button.types"; -export const [defaultButtonTheme, defaultButtonVars]: ButtonTheme = createTheme( - { - color: "#FFFFFF", - backgroundColor: "#1AB5EB", - borderColor: "none", - hoverBackgroundColor: "#008FCB", - hoverColor: "#FFFFFF", - hoverBorderColor: "none", - focusBackgroundColor: "#1AB5EB40", - focusColor: "#FFFFFF", - focusBorderColor: "#C6EDFB", - disabledBackgroundColor: "#8CDAF5", - disabledColor: "#FFFFFF", - disabledBorderColor: "none", - } -); - -export const [lightButtonTheme, lightButtonVars]: ButtonTheme = createTheme({ - color: "#1AB5EB", - backgroundColor: "#F9F9F9", - borderColor: "#DDDDDD", - hoverBackgroundColor: "#F0F0F0", - hoverColor: "#008FCB", - hoverBorderColor: "none", - focusBackgroundColor: "#F9F9F9", - focusColor: "#1AB5EB", - focusBorderColor: "#C6EDFB", - disabledBackgroundColor: "#F9F9F9", - disabledColor: "#1AB5EB", - disabledBorderColor: "#DDDDDD", -}); - -export const [ghostButtonTheme, ghostButtonVars]: ButtonTheme = createTheme({ - color: "#1AB5EB", - backgroundColor: "none", - borderColor: "none", - hoverBackgroundColor: "#0000000D", - hoverColor: "#008FCB", - hoverBorderColor: "none", - focusBackgroundColor: "none", - focusColor: "#1AB5EB", - focusBorderColor: "#C6EDFB", - disabledBackgroundColor: "none", - disabledColor: "#1AB5EB", - disabledBorderColor: "", -}); - -export const [hallowButtonTheme, hallowButtonVars]: ButtonTheme = createTheme({ - color: "#1AB5EB", - backgroundColor: "none", - borderColor: "#1AB5EB", - hoverBackgroundColor: "none", - hoverColor: "#1AB5EB", - hoverBorderColor: "#AAAAAA", - focusBackgroundColor: "none", - focusColor: "#101010", - focusBorderColor: "#C6EDFB", - disabledBackgroundColor: "none", - disabledColor: "#878787", - disabledBorderColor: "#EEEEEE", -}); +import { defaultVars, lightVars, ghostVars, hallowVars } from "src/themes"; export const buttonStyles = recipe({ base: { @@ -74,90 +12,90 @@ export const buttonStyles = recipe({ variants: { variant: { default: { - background: defaultButtonVars.backgroundColor, - color: defaultButtonVars.color, - borderColor: defaultButtonVars.borderColor, + background: defaultVars.backgroundColor, + color: defaultVars.color, + borderColor: defaultVars.borderColor, border: 0, ":hover": { - background: defaultButtonVars.hoverBackgroundColor, - color: defaultButtonVars.hoverColor, - borderColor: defaultButtonVars.hoverBorderColor, + background: defaultVars.hoverBackgroundColor, + color: defaultVars.hoverColor, + borderColor: defaultVars.hoverBorderColor, }, ":focus": { borderWidth: "2px", - background: defaultButtonVars.focusBackgroundColor, - color: defaultButtonVars.focusColor, - borderColor: defaultButtonVars.focusBorderColor, + background: defaultVars.focusBackgroundColor, + color: defaultVars.focusColor, + borderColor: defaultVars.focusBorderColor, }, ":disabled": { - background: defaultButtonVars.disabledBackgroundColor, - color: defaultButtonVars.disabledColor, - borderColor: defaultButtonVars.disabledBorderColor, + background: defaultVars.disabledBackgroundColor, + color: defaultVars.disabledColor, + borderColor: defaultVars.disabledBorderColor, }, }, light: { - background: lightButtonVars.backgroundColor, - color: lightButtonVars.color, + background: lightVars.backgroundColor, + color: lightVars.color, border: "1px solid", - borderColor: lightButtonVars.borderColor, + borderColor: lightVars.borderColor, ":hover": { - background: lightButtonVars.hoverBackgroundColor, - color: lightButtonVars.hoverColor, - borderColor: lightButtonVars.hoverBorderColor, + background: lightVars.hoverBackgroundColor, + color: lightVars.hoverColor, + borderColor: lightVars.hoverBorderColor, }, ":focus": { borderWidth: "2px", - background: lightButtonVars.focusBackgroundColor, - color: lightButtonVars.focusColor, - borderColor: lightButtonVars.focusBorderColor, + background: lightVars.focusBackgroundColor, + color: lightVars.focusColor, + borderColor: lightVars.focusBorderColor, }, ":disabled": { - background: lightButtonVars.disabledBackgroundColor, - color: lightButtonVars.disabledColor, - borderColor: lightButtonVars.disabledBorderColor, + background: lightVars.disabledBackgroundColor, + color: lightVars.disabledColor, + borderColor: lightVars.disabledBorderColor, }, }, ghost: { - background: ghostButtonVars.backgroundColor, + background: ghostVars.backgroundColor, border: 0, - color: ghostButtonVars.color, + color: ghostVars.color, ":hover": { - background: ghostButtonVars.hoverBackgroundColor, - color: ghostButtonVars.hoverColor, - borderColor: ghostButtonVars.hoverBorderColor, + background: ghostVars.hoverBackgroundColor, + color: ghostVars.hoverColor, + borderColor: ghostVars.hoverBorderColor, }, ":focus": { borderWidth: "2px", - background: ghostButtonVars.focusBackgroundColor, - color: ghostButtonVars.focusColor, - borderColor: ghostButtonVars.focusBorderColor, + background: ghostVars.focusBackgroundColor, + color: ghostVars.focusColor, + borderColor: ghostVars.focusBorderColor, }, ":disabled": { - background: ghostButtonVars.disabledBackgroundColor, - color: ghostButtonVars.disabledColor, - borderColor: ghostButtonVars.disabledBorderColor, + background: ghostVars.disabledBackgroundColor, + color: ghostVars.disabledColor, + borderColor: ghostVars.disabledBorderColor, }, }, hallow: { - background: hallowButtonVars.backgroundColor, + background: hallowVars.backgroundColor, border: "1px solid", - color: hallowButtonVars.color, - borderColor: hallowButtonVars.borderColor, + color: hallowVars.color, + borderColor: hallowVars.borderColor, ":hover": { - background: hallowButtonVars.hoverBackgroundColor, - color: hallowButtonVars.hoverColor, - borderColor: hallowButtonVars.hoverBorderColor, + background: hallowVars.hoverBackgroundColor, + color: hallowVars.hoverColor, + borderColor: hallowVars.hoverBorderColor, }, ":focus": { borderWidth: "2px", - background: hallowButtonVars.focusBackgroundColor, - color: hallowButtonVars.focusColor, - borderColor: hallowButtonVars.focusBorderColor, + background: hallowVars.focusBackgroundColor, + color: hallowVars.focusColor, + borderColor: hallowVars.focusBorderColor, }, ":disabled": { - background: hallowButtonVars.disabledBackgroundColor, - color: hallowButtonVars.disabledColor, - borderColor: hallowButtonVars.disabledBorderColor, + background: hallowVars.disabledBackgroundColor, + color: hallowVars.disabledColor, + borderColor: hallowVars.disabledBorderColor, }, }, }, diff --git a/lib/src/components/Button/button.types.ts b/lib/src/components/Button/button.types.ts index 25c44f4..6a3d941 100644 --- a/lib/src/components/Button/button.types.ts +++ b/lib/src/components/Button/button.types.ts @@ -3,21 +3,3 @@ import { buttonStyles } from "./button.styles.css"; export type ButtonProps = RecipeVariants & JSX.IntrinsicElements["button"]; - -export type ButtonTheme = [ - string, - { - color: string; - backgroundColor: string; - borderColor: string; - hoverColor: string; - hoverBackgroundColor: string; - hoverBorderColor: string; - focusColor: string; - focusBackgroundColor: string; - focusBorderColor: string; - disabledColor: string; - disabledBackgroundColor: string; - disabledBorderColor: string; - } -]; diff --git a/lib/src/styles/colors.ts b/lib/src/styles/colors.ts new file mode 100644 index 0000000..34f11cd --- /dev/null +++ b/lib/src/styles/colors.ts @@ -0,0 +1,15 @@ +export const Colors = { + white: "#FFFFFF", + defaultBackground: "#1AB5EB", + defaultHover: "#008FCB", + defaultFocus: "#1AB5EB40", + defaultFocusBorder: "#C6EDFB", + defaultDisabledBlue: "#8CDAF5", + lightBackground: "#F9F9F9", + lightBorder: "#DDDDDD", + lightHover: "#F0F0F0", + hallowHover: "#AAAAAA", + hallowDisabled: "#878787", + hallowDisabledBorder: "#EEEEEE", + hallowFocus: "#101010", +}; diff --git a/lib/src/themes/index.ts b/lib/src/themes/index.ts new file mode 100644 index 0000000..0753a01 --- /dev/null +++ b/lib/src/themes/index.ts @@ -0,0 +1,80 @@ +import { Colors } from "src/styles/colors"; +import { createTheme } from "@vanilla-extract/css"; + +export type Theme = [ + string, + { + color: string; + backgroundColor: string; + borderColor: string; + hoverColor: string; + hoverBackgroundColor: string; + hoverBorderColor: string; + focusColor: string; + focusBackgroundColor: string; + focusBorderColor: string; + disabledColor: string; + disabledBackgroundColor: string; + disabledBorderColor: string; + } +]; + +export const [defaultTheme, defaultVars]: Theme = createTheme({ + color: Colors.white, + backgroundColor: Colors.defaultBackground, + borderColor: "none", + hoverBackgroundColor: Colors.defaultHover, + hoverColor: Colors.white, + hoverBorderColor: "none", + focusBackgroundColor: Colors.defaultFocus, + focusColor: Colors.white, + focusBorderColor: Colors.defaultFocusBorder, + disabledBackgroundColor: Colors.defaultDisabledBlue, + disabledColor: Colors.white, + disabledBorderColor: "none", +}); + +export const [lightTheme, lightVars]: Theme = createTheme({ + color: Colors.defaultBackground, + backgroundColor: Colors.lightBackground, + borderColor: Colors.lightBorder, + hoverBackgroundColor: Colors.lightHover, + hoverColor: Colors.defaultHover, + hoverBorderColor: "none", + focusBackgroundColor: Colors.lightBackground, + focusColor: Colors.defaultBackground, + focusBorderColor: Colors.defaultFocusBorder, + disabledBackgroundColor: Colors.lightBackground, + disabledColor: Colors.defaultBackground, + disabledBorderColor: Colors.lightBorder, +}); + +export const [ghostTheme, ghostVars]: Theme = createTheme({ + color: Colors.defaultBackground, + backgroundColor: "none", + borderColor: "none", + hoverBackgroundColor: "#0000000D", + hoverColor: Colors.defaultHover, + hoverBorderColor: "none", + focusBackgroundColor: "none", + focusColor: Colors.defaultBackground, + focusBorderColor: Colors.defaultFocusBorder, + disabledBackgroundColor: "none", + disabledColor: Colors.defaultBackground, + disabledBorderColor: "", +}); + +export const [hallowTheme, hallowVars]: Theme = createTheme({ + color: Colors.defaultBackground, + backgroundColor: "none", + borderColor: Colors.defaultBackground, + hoverBackgroundColor: "none", + hoverColor: Colors.defaultBackground, + hoverBorderColor: Colors.hallowHover, + focusBackgroundColor: "none", + focusColor: Colors.hallowFocus, + focusBorderColor: Colors.defaultFocusBorder, + disabledBackgroundColor: "none", + disabledColor: Colors.hallowDisabled, + disabledBorderColor: Colors.hallowDisabledBorder, +});