Feat/rebranding

CHANGELOG.md

@@ -46,6 +46,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#826](https://github.com/alleslabs/celatone-frontend/pull/826) Apply dynamic component theme generation
+- [#795](https://github.com/alleslabs/celatone-frontend/pull/795) Rebranding
 - [#907](https://github.com/alleslabs/celatone-frontend/pull/907) Migrate mahalo and minitias from 2 to 3
 - [#905](https://github.com/alleslabs/celatone-frontend/pull/905) Refactor module related component for better readability
 - [#900](https://github.com/alleslabs/celatone-frontend/pull/900) Refactor module details info

public/font/main.css

@@ -0,0 +1,25 @@
+ /* Celatone  */
+@font-face {
+  font-family: "PP Neue Montreal Regular";
+  src: url("./PPNeueMontreal-Regular.woff");
+  src: url("./PPNeueMontreal-Regular.woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PP Neue Montreal Mono Regular";
+  src: url("./PPNeueMontrealMono-Regular.woff");
+  src: url("./PPNeueMontrealMono-Regular.woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+/* Initia */
+@font-face {
+  font-family: "Pilat Wide";
+  src: url("./PilatWide-Bold.woff");
+  src: url("./PilatWide-Bold.woff2");
+  font-weight: 600;
+  font-style: normal;
+}

src/config/theme/default.ts

@@ -1,14 +1,16 @@
-import type { ThemeConfig } from "./types";
+/* eslint-disable sonarjs/no-duplicate-string */
+import type { ComponentConfig, ThemeConfig } from "./types";
+import { generateTheme } from "./utils";
 
-export const DEFAULT_THEME: ThemeConfig = {
+const DEFAULT_BASE_THEME: ThemeConfig = {
   branding: {
-    logo: "https://assets.alleslabs.dev/branding/logo/logo.svg",
-    favicon: "https://assets.alleslabs.dev/branding/favicon.ico",
+    logo: "https://assets.alleslabs.dev/celatone-brand/logo/full-white.svg",
+    favicon: "https://assets.alleslabs.dev/celatone-brand/favicon.ico",
     seo: {
       appName: "Celatone",
       title: "Celatone Explorer for Cosmos chain",
       description: "A smart contract powered explorer for the Cosmos.",
-      image: "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
+      image: "https://assets.alleslabs.dev/celatone-brand/socials/ogimage.jpg",
       twitter: {
         handle: "@celatone_",
         cardType: "summary_large_image",
@@ -24,110 +26,169 @@ export const DEFAULT_THEME: ThemeConfig = {
       url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap",
       name: "Space Grotesk, sans-serif",
     },
+    mono: {
+      url: "/font/main.css",
+      name: "PP Neue Montreal Mono Regular",
+    },
   },
   colors: {
-    gradient: {
-      main: "linear(to-tr, #5942F3, #9793F3)",
+    primary: {
+      lighter: "#E0F1FB",
+      light: "#C2EAFF",
+      main: "#89D1F6",
+      dark: "#5ABAEC",
+      darker: "#2B8BBD",
+      background: "#244865",
+    },
+    secondary: {
+      light: "#C2EAFF",
+      main: "#89D1F6",
+      dark: "#5ABAEC",
+      darker: "#2B8BBD",
+      background: "#244865",
+    },
+    accent: {
+      lighter: "#FDFAEC",
+      light: "#F9F0C8",
+      main: "#F5E6A3",
+      dark: "#EDD25A",
+      darker: "#7B703A",
+      background: "#3B3928",
+    },
+    gray: {
+      100: "#F8FAFC",
+      400: "#B7C1CD",
+      500: "#8A99AE",
+      600: "#707E94",
+      700: "#334155",
+      800: "#1E2535",
+      900: "#151B27",
+    },
+    text: {
+      main: "#F8FAFC",
+      dark: "#CBD5E1",
+      disabled: "#94A3B8",
+    },
+    background: {
+      main: "#0E131C",
+      overlay: "rgba(2, 6, 23, 0.7)",
+    },
+    success: {
+      main: "#42BEA6",
+      light: "#67CBB7",
+      dark: "#207966",
+      background: "#102E28",
     },
     error: {
-      main: "#FF666E",
       light: "#FF8086",
+      main: "#FF666E",
       dark: "#B43E44",
       background: "#4C1A1D",
     },
     warning: {
-      main: "#FFBB33",
       light: "#FFCC66",
+      main: "#FFBB33",
       dark: "#CC8800",
       background: "#523600",
     },
-    success: {
-      main: "#42BEA6",
-      light: "#67CBB7",
-      dark: "#207966",
-      background: "#102E28",
+  },
+  jsonTheme: "pastel_on_dark",
+  illustration: {
+    "404":
+      "https://assets.alleslabs.dev/celatone-brand/illustration/states/404.svg",
+    error:
+      "https://assets.alleslabs.dev/celatone-brand/illustration/states/error.svg",
+    searchNotFound:
+      "https://assets.alleslabs.dev/celatone-brand/illustration/states/search-not-found.svg",
+    searchEmpty:
+      "https://assets.alleslabs.dev/celatone-brand/illustration/states/search-empty.svg",
+    disconnected:
+      "https://assets.alleslabs.dev/celatone-brand/illustration/states/disconnected.svg",
+    overview: {
+      main: "https://assets.alleslabs.dev/celatone-brand/illustration/left.svg",
+      secondary:
+        "https://assets.alleslabs.dev/celatone-brand/illustration/right.svg",
     },
-    background: {
-      main: "#111117",
-      overlay: "rgba(17, 17, 23, 0.7)",
+  },
+  socialMedia: {
+    website: "https://celat.one/",
+    github: "https://github.com/alleslabs",
+    twitter: "https://twitter.com/celatone_",
+    medium: "https://blog.alleslabs.com/",
+    telegram: "https://t.me/celatone_announcements",
+  },
+};
+
+const DEFAULT_COMPONENT_CONFIG: ComponentConfig = {
+  button: {
+    primary: {
+      background: "primary.main",
+      color: "gray.800",
+      disabledBackground: "primary.background",
+      disabledColor: "gray.800",
+      hoverBackground: "primary.dark",
+      activeBackground: "primary.darker",
+    },
+    outlinePrimary: {
+      borderColor: "primary.main",
+      color: "primary.main",
+      disabledBorderColor: "primary.background",
+      disabledColor: "primary.darker",
+      hoverBackground: "primary.background",
+      activeBackground: "primary.background",
     },
-    text: {
-      main: "#F7F2FE",
-      dark: "#ADADC2",
-      disabled: "#8A8AA5",
+  },
+  proposalChip: {
+    depositPeriod: {
+      bg: "primary.background",
     },
-    primary: {
-      main: "#5942F3",
-      light: "#9793F3",
-      lighter: "#DCDBFB",
-      dark: "#3E38B0",
-      darker: "#292676",
-      background: "#181733",
+    votingPeriod: {
+      bg: "primary.darker",
     },
-    secondary: {
-      main: "#D8BEFC",
-      light: "#E8D8FD",
-      dark: "#A28FBD",
-      darker: "#6C5F7E",
-      background: "#36303F",
+    failed: {
+      bg: "error.dark",
     },
-    accent: {
-      main: "#C6E141",
-      light: "#DDED8D",
-      lighter: "#E8F3B3",
-      dark: "#95A931",
-      darker: "#637121",
-      background: "#3D470B",
+    rejected: {
+      bg: "error.dark",
     },
-    gray: {
-      100: "#F7F2FE",
-      400: "#ADADC2",
-      500: "#8A8AA5",
-      600: "#68688A",
-      700: "#343445",
-      800: "#272734",
-      900: "#1A1A22",
+    passed: {
+      bg: "success.dark",
+    },
+    cancelled: {
+      bg: "error.background",
+    },
+    depositFailed: {
+      bg: "gray.700",
+    },
+  },
+  stepper: {
+    active: {
+      bg: "primary.darker",
+      color: "text.main",
+    },
+    disabled: {
+      bg: "gray.500",
+      color: "background.main",
     },
   },
   tag: {
     signer: {
       bg: "accent.darker",
-      color: "inherit",
+      color: "text.main",
     },
     related: {
-      bg: "primary.dark",
+      bg: "gray.700",
       color: "text.main",
     },
   },
-  borderRadius: {
-    default: "8px",
-    iconButton: "36px",
-    viewButton: "0 0 8px 8px",
-    uploadButton: "50%",
-    tag: "full",
-    badge: "16px",
-    radio: "12px",
-    indicator: "2px",
-    stepper: "full",
-  },
-  jsonTheme: "monokai",
-  illustration: {
-    "404": "https://assets.alleslabs.dev/illustration/404.svg",
-    error: "https://assets.alleslabs.dev/illustration/error.svg",
-    searchNotFound:
-      "https://assets.alleslabs.dev/illustration/search-not-found.svg",
-    searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg",
-    disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg",
-    overview: {
-      main: "https://assets.alleslabs.dev/illustration/bg-left.svg",
-      secondary: "https://assets.alleslabs.dev/illustration/bg-right.svg",
-    },
-  },
-  socialMedia: {
-    website: "https://celat.one/",
-    github: "https://github.com/alleslabs",
-    twitter: "https://twitter.com/celatone_",
-    medium: "https://blog.alleslabs.com/",
-    telegram: "https://t.me/celatone_announcements",
+  voteParticipations: {
+    voted: "primary.main",
+    votedAbstain: "primary.darker",
+    didNotVote: "gray.700",
   },
 };
+
+export const DEFAULT_THEME = generateTheme(
+  DEFAULT_BASE_THEME,
+  DEFAULT_COMPONENT_CONFIG
+);