Merge pull request #115 from bnb-chain/widget/classname

feat: Customize font family

packages/canonical-bridge-widget/docs/classname.md

@@ -0,0 +1,145 @@
+This document lists all the available styling class name in the widget. Please overwrite stylings
+based on these class name.
+
+1. Widget Main
+
+- bccb-widget-transfer-widget
+- bccb-widget-transfer-widget-title
+- bccb-widget-exchange-chain-icon
+- bccb-widget-copy-address
+- bccb-widget-info-tooltip
+- bccb-widget-switch-wallet-button
+
+2. Network selection section
+
+- bccb-widget-network
+- bccb-widget-network-title
+- bccb-widget-network-row
+- bccb-widget-network-from
+- bccb-widget-network-button
+- bccb-widget-network-to
+- bccb-widget-network-name
+
+3. Bridge Route Section
+
+- bccb-widget-route
+- bccb-widget-route-bottom
+- bccb-widget-route-wrapper
+- bccb-widget-route-container
+- bccb-widget-route-name
+- bccb-widget-route-name-text
+- bccb-widget-route-name-tag-bestTime
+- bccb-widget-route-name-tag-bestReturn
+- bccb-widget-route-token
+- bccb-widget-route-token-amount
+- bccb-widget-route-token-tooltip
+- bccb-widget-route-token-icon
+- bccb-widget-route-estimated-time
+- bccb-widget-route-info-text
+- bccb-widget-route-info-label
+- bccb-widget-route-info-tooltip-fee
+- bccb-widget-allowed-send-amount
+- bccb-widget-route-error
+- bccb-widget-route-skeleton
+- bccb-widget-route-header
+- bccb-widget-route-body
+- bccb-widget-route-list
+- bccb-widget-refreshing-button
+  - mobile
+- bccb-widget-modal-route-overlay
+- bccb-widget-modal-route-content
+- bccb-widget-modal-route-header
+- bccb-widget-modal-route-wrapper
+
+4. Header
+
+- bccb-widget-header-wallet-connect-button
+- bccb-widget-header-menu-button
+- bccb-widget-header-menu-item
+- bccb-widget-header-profile-list
+- bccb-widget-header-profile-disconnect-link
+- bccb-widget-header-profile-button
+- bccb-widget-header-switching-tips-modal
+- bccb-widget-header-preventing-modal
+
+5. Token Selection Modal
+
+- bccb-widget-token-modal
+- bccb-widget-token-virtual-list
+- bccb-widget-token-list-address
+- bccb-widget-token-address-link
+- bccb-widget-token-list-item
+- bccb-widget-token-list-token-balance
+
+6. From Network Selection
+
+- bccb-widget-from-network-list-item
+- bccb-widget-from-network-virtual-list
+- bccb-widget-from-network-modal
+
+7. To Network Selection
+
+- bccb-widget-to-network-virtual-list
+- bccb-widget-to-network-list-item
+- bccb-widget-to-network-modal
+
+8. Base Modal
+
+- bccb-widget-modal-search
+- bccb-widget-modal-search-right-element
+- bccb-widget-modal-no-result-found
+- bccb-widget-modal-no-result-found-title
+- bccb-widget-modal-no-result-found-text
+- bccb-widget-select-list-item-tag
+
+9. Send Amount Input
+
+- bccb-widget-transfer-input-container
+- bccb-widget-transfer-input
+- bccb-widget-transfer-max
+- bccb-widget-transfer-input-error
+- bccb-widget-token-select-button
+
+10. To Account Input
+
+- bccb-widget-to-account-container
+- bccb-widget-to-account-title
+- bccb-widget-to-account-input-error
+- bccb-widget-to-account-input
+- bccb-widget-to-account-confirm
+- bccb-widget-to-account-checkbox
+
+11. Received Amount Information
+
+- bccb-widget-received-info-container
+- bccb-widget-received-info-route-open
+- bccb-widget-received-info-route-content
+- bccb-widget-received-info-route-loading
+- bccb-widget-no-route-found-container
+- bccb-widget-no-route-found-icon
+- bccb-widget-no-route-found-title
+- bccb-widget-no-route-found-desc
+- bccb-widget-no-route-found-link
+
+12. Transfer Button
+
+- bccb-widget-transfer-button-container
+- bccb-widget-wallet-connect-button
+- bccb-widget-switch-network-button
+- bccb-widget-transfer-button
+
+13. Transfer Modal
+
+- bccb-widget-modal-close-button
+- bccb-widget-modal-main-button
+- bccb-widget-modal-second-button
+- bccb-widget-modal-body
+- bccb-widget-modal-body-icon
+- bccb-widget-modal-body-title
+- bccb-widget-modal-body-description
+- bccb-widget-modal-footer
+- bccb-widget-transaction-submitted-modal
+- bccb-widget-transaction-failed-modal
+- bccb-widget-transaction-confirming-modal
+- bccb-widget-transaction-approve-modal
+- bccb-widget-route-bottom

packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx

@@ -11,7 +11,7 @@ export interface ThemeProviderProps {
   colorMode?: ColorMode;
   children: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  themeConfig?: { dark?: any; light?: any };
+  themeConfig?: { dark?: any; light?: any; fontFamily?: string };
 }
 
 export const ThemeProvider = ({
@@ -37,7 +37,7 @@ export const ThemeProvider = ({
         global: ({ colorMode }: { colorMode: ColorMode }) => ({
           body: {
             bg: themeConfig?.[colorMode]?.background?.body ?? theme.colors[colorMode].background[3],
-            fontFamily: 'Space Grotesk',
+            fontFamily: themeConfig?.fontFamily ?? 'Space Grotesk',
           },
           ...walletStyles(colorMode),
         }),

packages/space/src/modules/theme/internal/typography.ts

@@ -1,42 +1,42 @@
 import { typography } from '../foundations/typography';
 
-const FONT_FAMILIES = {
-  ZEN_DOTS: `'Zen Dots', sans-serif`,
-  SPACE_GROTESK: `'Space Grotesk', sans-serif`,
-};
+// const FONT_FAMILIES = {
+//   ZEN_DOTS: `'Zen Dots', sans-serif`,
+//   SPACE_GROTESK: `'Space Grotesk', sans-serif`,
+// };
 
 const STYLES = {
   display: {
     lg: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['20'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['22'],
       letterSpacing: typography.letterSpacings.wider,
     },
     md: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['16'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['18'],
       letterSpacing: typography.letterSpacings.wider,
     },
     sm: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['12'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['14'],
       letterSpacing: typography.letterSpacings.wider,
     },
     xs: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['8'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['10'],
       letterSpacing: typography.letterSpacings.wider,
     },
     '2xs': {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['6'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['8'],
@@ -45,65 +45,65 @@ const STYLES = {
   },
   heading: {
     lg: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['12'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['14'],
     },
     md: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['8'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['10'],
     },
     sm: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['6'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['8'],
     },
     xs: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['7'],
     },
   },
   body: {
     lg: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['7'],
     },
     md: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['4'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['6'],
     },
     sm: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['3.5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['5'],
     },
   },
   label: {
     lg: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['4'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['6'],
     },
     md: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['3.5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['4'],
     },
     sm: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['3'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['4'],