feat: added bubblegum theme (#723)

Co-authored-by: Pritish Budhiraja <[email protected]>
juspay · Oct 10, 2024 · 7df22f3 · 7df22f3
1 parent dc97235
commit 7df22f3
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 2 deletions.
diff --git a/src/BubblegumTheme.res b/src/BubblegumTheme.res
@@ -0,0 +1,224 @@
+open CardThemeType
+let bubblegum = {
+  fontFamily: "",
+  fontSizeBase: "1rem",
+  colorPrimary: "#f360a6",
+  colorBackground: "#ffffff",
+  colorText: "#545454",
+  colorDanger: "#fd1717",
+  colorDangerText: "#fd1717",
+  borderRadius: "2px",
+  fontVariantLigatures: "",
+  fontVariationSettings: "",
+  spacingUnit: "11px",
+  fontWeightLight: "400",
+  fontWeightNormal: "500",
+  fontWeightMedium: "600",
+  fontWeightBold: "700",
+  fontLineHeight: "",
+  fontSize2Xl: "24px",
+  fontSizeXl: "16px",
+  fontSizeLg: "14px",
+  fontSizeSm: "12px",
+  fontSizeXs: "10px",
+  fontSize2Xs: "8px",
+  fontSize3Xs: "6px",
+  colorSuccess: "",
+  colorWarning: "",
+  colorPrimaryText: "#5469d4",
+  colorBackgroundText: "",
+  colorSuccessText: "",
+  colorWarningText: "",
+  colorTextSecondary: "#6d6e78",
+  colorTextPlaceholder: "",
+  spacingTab: "12px",
+  borderColor: "#e6e6e6",
+  spacingAccordionItem: "10px",
+  colorIconCardCvc: "",
+  colorIconCardCvcError: "#fd1717",
+  colorIconCardError: "#fd1717",
+  spacingGridColumn: "20px",
+  spacingGridRow: "20px",
+  buttonBackgroundColor: "#006df9",
+  buttonHeight: "48px",
+  buttonWidth: "100%",
+  buttonBorderRadius: "4px",
+  buttonBorderColor: "#ffffff",
+  buttonTextColor: "#ffffff",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
+  buttonBorderWidth: "0px",
+}
+let bubblegumRules = theme =>
+  {
+    ".Tab": {
+      "border": "0",
+      "borderRadius": theme.borderRadius,
+      "backgroundColor": theme.colorBackground,
+      "color": theme.colorTextSecondary,
+      "alignItems": "start",
+      "transition": "background .15s ease, border .15s ease, box-shadow .15s ease",
+      "boxShadow": "0px 3px 10px rgba(18, 42, 66, 0.08)"
+    },
+    ".Tab:hover": {
+      "border": "0",
+      "color": theme.colorText,
+    },
+    ".Tab:focus":{
+      "border": "0"
+    },
+    ".Label": {
+      "color": theme.colorText,
+      "opacity": "10",
+      "textAlign": "left",
+    },
+    ".Tab--selected": {
+      "color": "#fff",
+      "backgroundColor": "#f360a6",
+      "boxShadow": `0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px ${theme.colorPrimary}`,
+    },
+    ".Tab--selected:hover": {
+      "color": "#fff",
+      "backgroundColor": "#f360a6",
+      "boxShadow": `0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px ${theme.colorPrimary}`,
+    },
+    ".Tab--selected:focus": {
+      "color": "#fff",
+      "backgroundColor": "#f360a6",
+      "boxShadow": `0 0 0 2px ${theme.colorPrimary}4c, 0 1px 1px 0 ${theme.colorBackground}, 0 0 0 1px ${theme.colorPrimary}4c`,
+    },
+    ".TabMore:focus": {
+      "border": `1px solid ${theme.colorPrimary}`,
+      "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`,
+    },
+    ".TabMore": {
+      "border": `1px solid ${theme.borderColor}`,
+    },
+    ".Input": {
+      "border": `1px solid #e6e6e6`,
+      "color": theme.colorText,
+      "fontWeight": theme.fontWeightLight,
+      "borderRadius": theme.borderRadius,
+      "boxShadow": "0px 3px 10px rgba(18, 42, 66, 0.08)",
+      "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease",
+    },
+    ".Input-Compressed": {
+      "border": `1px solid #e6e6e6`,
+      "color": theme.colorText,
+      "fontWeight": theme.fontWeightLight,
+      "boxShadow": `0px 1px 1px rgb(0 0 0 / 3%), 0px 3px 6px rgb(0 0 0 / 2%)`,
+      "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease",
+    },
+    ".Input:-webkit-autofill": {
+      "transition": "background-color 5000s ease-in-out 0s",
+      "-webkitTextFillColor": `${theme.colorText} !important`,
+    },
+    ".Input:focus": {
+      "border": `1px solid ${theme.colorPrimary}`,
+      "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`,
+    },
+    ".Input-Compressed:focus": {
+      "border": `1px solid ${theme.colorPrimary}`,
+      "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 2px`,
+      "position": "relative",
+      "zIndex": "2",
+    },
+    ".Input--invalid": {
+      "color": theme.colorDanger,
+      "border": `1px solid ${theme.colorDanger}`,
+      "transition": "border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease",
+    },
+    ".Input::placeholder": {
+      "fontWeight": theme.fontWeightLight,
+      "color": theme.colorTextPlaceholder,
+    },
+    ".TabLabel": {
+      "transition": "color .1s ease",
+      "textAlign": "start",
+    },
+    ".TabIcon": {
+      "transition": "color .1s ease",
+    },
+    ".Block": {
+      "backgroundColor": theme.colorBackground,
+      "borderRadius": theme.borderRadius,
+      // "border": `1px solid ${theme.borderColor}`,
+      "borderColor": "transparent",
+      "boxShadow": "0px 3px 10px rgba(18, 42, 66, 0.08)"
+    },
+    ".BlockDivider": {
+      "backgroundColor": "#ebebeb",
+      // "border": `1px solid ${theme.borderColor}`,
+    },
+    ".AccordionItem": {
+      "backgroundColor": theme.colorBackground,
+      "color": theme.colorTextSecondary,
+      "transition": "height 1s ease",
+      "boxShadow": "0px 1px 1px rgb(0 0 0 / 3%), 0px 3px 6px rgb(0 0 0 / 2%)",
+      "padding": "20px",
+    },
+    ".AccordionMore": {
+      "backgroundColor": theme.colorBackground,
+      "color": theme.colorTextSecondary,
+      "border": `1px solid ${theme.borderColor}`,
+    },
+    ".AccordionMore:hover": {
+      "color": theme.colorText,
+    },
+    ".AccordionItem:hover": {
+      "color": theme.colorText,
+    },
+    ".AccordionItem--selected": {
+      "color": theme.colorPrimary,
+    },
+    ".AccordionItem--selected:hover": {
+      "color": theme.colorPrimary,
+    },
+    ".AccordionItemLabel": {
+      "transition": "color .1s ease",
+    },
+    ".AccordionItemLabel--selected": {
+      "color": theme.colorPrimary,
+    },
+    ".AccordionItemIcon--selected": {
+      "color": theme.colorPrimary,
+    },
+    ".PickerItem": {
+      "backgroundColor": theme.colorBackground,
+      "borderRadius": theme.borderRadius,
+      "border": `1px solid ${theme.borderColor}`,
+      "color": theme.colorTextSecondary,
+      "padding": theme.spacingUnit,
+      "transition": "height 1s ease",
+      "boxShadow": "0px 1px 1px rgb(0 0 0 / 3%), 0px 3px 6px rgb(0 0 0 / 2%)",
+    },
+    ".PickerItem:hover": {
+      "color": theme.colorText,
+    },
+    ".PickerItem--selected": {
+      "color": theme.colorPrimary,
+      "border": `1px solid ${theme.colorPrimary}`,
+      "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`,
+    },
+    ".PickerItem--selected:hover": {
+      "color": theme.colorPrimary,
+      "border": `1px solid ${theme.colorPrimary}`,
+      "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`,
+    },
+    ".Checkbox": {
+      "fontWeight": theme.fontWeightLight,
+      "fontSize": theme.fontSizeLg,
+    },
+    ".CheckboxInput":{
+      "boxShadow": "0px 3px 10px rgba(18, 42, 66, 0.08)"
+    },
+    ".PaymentMethodsHeaderLabel": {
+      "color": theme.colorText,
+      "fontSize": theme.fontSize2Xl,
+      "fontWeight": theme.fontWeightMedium,
+      "marginBottom": "1.5rem",
+    },
+  }->Identity.anyTypeToJson
+
+let default = bubblegum
+let defaultRules = bubblegumRules
diff --git a/src/CardTheme.res b/src/CardTheme.res
@@ -9,10 +9,11 @@ let getTheme = (val, logger) => {
   | "midnight" => Midnight
   | "charcoal" => Charcoal
   | "soft" => Soft
+  | "bubblegum" => Bubblegum
   | "none" => NONE
   | str => {
       str->unknownPropValueWarning(
-        ["default", "midnight", "brutal", "charcoal", "soft", "none"],
+        ["default", "midnight", "brutal", "charcoal", "soft", "bubblegum", "none"],
         "appearance.theme",
         ~logger,
       )

diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res
@@ -1,4 +1,4 @@
-type theme = Default | Brutal | Midnight | Soft | Charcoal | NONE
+type theme = Default | Brutal | Midnight | Soft | Charcoal| Bubblegum | NONE
 
 type innerLayout = Spaced | Compressed