Merge pull request #427 from curvefi/figma-tokens

refactor: theme setup

.github/workflows/storybook.yaml

@@ -0,0 +1,44 @@
+name: Storybook
+description: Builds and deploys Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+      - figma-tokens
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: 'Build'
+        working-directory: packages/curve-ui-kit
+        run: |
+          yarn install --immutable
+          yarn build:storybook
+
+      - name: 'upload'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: packages/curve-ui-kit/storybook-static
+          name: 'github-pages'
+
+      - id: deploy
+        name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
+        with:
+          token: ${{ github.token }}

apps/lend/src/components/ChartLiquidationRange/index.tsx

@@ -17,7 +17,7 @@ import styled from 'styled-components'
 import { formatNumber } from '@/ui/utils'
 
 import ChartTooltip, { TipContent, TipIcon, TipTitle } from '@/components/ChartTooltip'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 interface Props {
   data: { name: string; curr: number[]; new: number[]; oraclePrice: string; oraclePriceBand: number | null }[]

apps/lend/src/layout/Header.tsx

@@ -11,12 +11,16 @@ import networks, { visibleNetworksList } from '@/networks'
 import useStore from '@/store/useStore'
 import { useTvl } from '@/entities/chain'
 import { Header as NewHeader } from '@/common/widgets/Header'
-import { ThemeKey } from '@ui-kit/shared/lib'
 import { NavigationSection } from '@/common/widgets/Header/types'
 import { Locale } from '@/ui/AppNav/types'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { type Theme } from '@mui/system'
+import { ThemeKey } from '@ui-kit/themes/basic-theme'
 
 type HeaderProps = { chainId: ChainId, sections: NavigationSection[] }
 
+const isMdUpQuery = (theme: Theme) => theme.breakpoints.up('tablet');
+
 const Header: FunctionComponent<HeaderProps> = ({ chainId, sections }) => {
   const [{ wallet }] = useConnectWallet()
   const navigate = useNavigate()
@@ -25,13 +29,13 @@ const Header: FunctionComponent<HeaderProps> = ({ chainId, sections }) => {
 
   const connectState = useStore((state) => state.connectState)
   const isAdvancedMode = useStore((state) => state.isAdvanceMode)
-  const isMdUp = useStore((state) => state.layout.isMdUp)
   const locale = useStore((state) => state.locale)
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
   const routerProps = useStore((state) => state.routerProps)
   const themeType = useStore((state) => state.themeType)
   const setAppCache = useStore((state) => state.setAppCache)
   const updateConnectState = useStore((state) => state.updateConnectState)
+  const isMdUp = useMediaQuery(isMdUpQuery, { noSsr: true })
   const { data: tvl } = useTvl(chainId);
 
   const { params: routerParams, location } = routerProps ?? {}
@@ -100,8 +104,8 @@ const Header: FunctionComponent<HeaderProps> = ({ chainId, sections }) => {
       appStats={[{ label: 'TVL', value: tvl && formatNumber(tvl, { ...FORMAT_OPTIONS.USD, showDecimalIfSmallNumberOnly: true }) || '' }]}
       sections={sections}
       translations={{
-        advanced: t`Advanced Mode`,
-        advancedMode: t`Advanced`,
+        advanced: t`Advanced`,
+        advancedMode: t`Advanced Mode`,
         theme: t`Mode`,
         language: t`Language`,
         otherApps: t`Other Apps`,

apps/lend/src/store/createAppSlice.ts

@@ -8,7 +8,7 @@ import { REFRESH_INTERVAL } from '@/constants'
 import { log } from '@/shared/lib/logging'
 import { setStorageValue } from '@/utils/utilsStorage'
 import isEqual from 'lodash/isEqual'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 import { LocaleValue } from '@/common/features/switch-language'
 
 export type DefaultStateKeys = keyof typeof DEFAULT_STATE

apps/lend/src/types/global.d.ts

@@ -9,7 +9,7 @@ import type lendingApi from '@curvefi/lending-api'
 import type { TooltipProps } from '@/ui/Tooltip/types'
 
 import { TITLE } from '@/constants'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 declare global {
   interface Window {

apps/lend/src/utils/utilsStorage.ts

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge'
 import dayjs from 'dayjs'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 export const APP_STORAGE = {
   APP_CACHE: 'lend-app-cache',

packages/curve-common/src/features/connect-wallet/ui/ConnectWalletButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'curve-ui-kit/src/shared/ui/Button'
+import Button from '@mui/material/Button'
 import type { SxProps, Theme } from '@mui/system'
 
 export type ConnectWalletButtonProps = {

packages/curve-common/src/features/connect-wallet/ui/ConnectedWalletLabel.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import { Button } from 'curve-ui-kit/src/shared/ui/Button'
+import Button from '@mui/material/Button'
 import { Address, AddressLabel } from 'curve-ui-kit/src/shared/ui/AddressLabel'
 
 import type { SxProps, Theme } from '@mui/system'

packages/curve-common/src/features/switch-advanced-mode/AdvancedModeSwitcher.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import Switch from '@mui/material/Switch'
 import Box from '@mui/material/Box'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 
 type AdvancedModeSwitcherProps = {
   label?: string,
@@ -10,15 +10,16 @@ type AdvancedModeSwitcherProps = {
 }
 
 export const AdvancedModeSwitcher: FunctionComponent<AdvancedModeSwitcherProps> = ({ advancedMode, onChange, label }) => (
-  <Box display="inline-flex" marginRight={4} alignItems="center">
+  <Box display="inline-flex" alignItems="center">
     <Switch
       checked={advancedMode}
       onChange={() => onChange(!advancedMode)}
       color="primary"
       inputProps={{ ...label && { 'aria-label': label } }}
+      size="small"
     />
     {label && (
-      <Typography variant="headingXsBold" display="inline-block" sx={{ textTransform: 'uppercase', lineHeight: '37px' }}>
+      <Typography variant="headingXsBold" display="inline-block" sx={{ marginLeft: 3, marginRight: 4, textTransform: 'uppercase', lineHeight: '37px' }}>
         {label}
       </Typography>
     )}

packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx

@@ -1,6 +1,6 @@
-import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem'
+import MenuItem from '@mui/material/MenuItem'
 import { FunctionComponent, SVGProps, useCallback, useMemo } from 'react'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown'
 
 export type IconType = FunctionComponent<SVGProps<SVGSVGElement>>
@@ -23,7 +23,7 @@ export const ChainSwitcher = <TChainId extends number>({ options, chainId, onCha
 
   const renderChainIcon = useCallback((value: TChainId) => {
     const { icon: Icon } = networkMapping[value]
-    return (<Icon width={24} />)
+    return (<Icon width={32} />)
   }, [networkMapping])
 
   return (
@@ -33,12 +33,12 @@ export const ChainSwitcher = <TChainId extends number>({ options, chainId, onCha
         variant="standard"
         disabled={disabled}
         renderValue={renderChainIcon}
-        sx={{marginTop: 2}}
-        disableUnderline
+        inputProps={{ sx: { paddingY: 0 } }}
+        MenuProps={{ MenuListProps: { sx: { paddingY: 0 } } }}
       >
         {
           options.map(({ chainId: id, icon: Icon, label }) => (
-            <MenuItem key={id} value={id}>
+            <MenuItem key={id} value={id} divider>
               <Icon width={28} />
               <Typography sx={{ marginLeft: 4 }} variant="bodySRegular">
                 {label}

packages/curve-common/src/features/switch-language/ui/LanguageSwitcher.tsx

@@ -1,5 +1,5 @@
-import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
 import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown'
 
 export type LocaleValue = 'en' | 'zh-Hans' | 'zh-Hant' | 'pseudo'
@@ -16,8 +16,10 @@ export type LanguageSwitcherProps = {
 }
 
 export const LanguageSwitcher = ({ locales, locale, onChange }: LanguageSwitcherProps) => locales.length > 1 && (
-  <CompactDropDown<LocaleValue> value={locale} onChange={onChange} //inputProps
-                                >
+  <CompactDropDown<LocaleValue>
+    value={locale} onChange={onChange}
+    inputProps={{ sx: { padding: 3 } }}
+  >
     {locales.map((languageOption) => (
       <MenuItem key={languageOption.value} value={languageOption.value}>
         <Typography fontWeight="bold">{languageOption.name}</Typography>

packages/curve-common/src/features/switch-theme/types.tsx

@@ -1,6 +1,6 @@
 import { ChadImg, RCMoon, RCSun } from 'ui'
 import Image from 'next/image'
-import type { ThemeKey } from 'curve-ui-kit/src/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 const DEFAULT_SIZE = 24
 export const themes = [

packages/curve-common/src/widgets/Header/DesktopHeader.tsx

@@ -8,10 +8,9 @@ import { AppButtonLinks } from './AppButtonLinks'
 import { HeaderLogo } from './HeaderLogo'
 import { HeaderStats } from './HeaderStats'
 import { PageTabs } from './PageTabs'
-import { Theme } from '@mui/system'
 import { ThemeSwitcherButton } from '../../features/switch-theme'
 import { AdvancedModeSwitcher } from '../../features/switch-advanced-mode'
-import { BaseHeaderProps, toolbarColors } from './types'
+import { BaseHeaderProps } from './types'
 
 export const DesktopHeader = <TChainId extends number>({
   currentApp,
@@ -25,7 +24,7 @@ export const DesktopHeader = <TChainId extends number>({
   translations: t
 }: BaseHeaderProps<TChainId>) => (
   <AppBar color="transparent" position="relative">
-    <Toolbar sx={{ backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][0], justifyContent: 'space-around' }}>
+    <Toolbar sx={{ backgroundColor: 'background.paper', justifyContent: 'space-around' }}>
       <Container>
         <HeaderLogo appName={currentApp} />
         <AppButtonLinks currentApp="lend" />
@@ -41,7 +40,7 @@ export const DesktopHeader = <TChainId extends number>({
         </Box>
       </Container>
     </Toolbar>
-    <Toolbar sx={{ backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][1], justifyContent: 'space-around' }}>
+    <Toolbar sx={{ backgroundColor: 'background.default', justifyContent: 'space-around' }}>
       <Container>
         <PageTabs pages={pages} />
         <Box flexGrow={1} />

packages/curve-common/src/widgets/Header/HeaderLogo.tsx

@@ -1,9 +1,9 @@
 import { RouterLink } from 'curve-ui-kit/src/shared/ui/RouterLink'
 import * as React from 'react'
-import { Box } from 'curve-ui-kit/src/shared/ui/Box'
+import Box from '@mui/material/Box'
 import { LogoImg, RCLogoText } from 'ui/src/images'
 import { styled } from '@mui/material/styles'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 import { APP_NAMES } from './types'
 import { AppName } from 'ui/src/AppNav/types'
 import { SxProps, Theme } from '@mui/system'

packages/curve-common/src/widgets/Header/HeaderStats.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react'
-import { Box } from 'curve-ui-kit/src/shared/ui/Box'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
 
 export type HeaderStatsProps = {
   appStats: {label: string, value: string}[]

packages/curve-common/src/widgets/Header/MobileHeader.tsx

@@ -1,6 +1,5 @@
 import { AppBar, Toolbar } from '@mui/material'
-import { Theme } from '@mui/system'
-import { BaseHeaderProps, toolbarColors } from './types'
+import { BaseHeaderProps } from './types'
 import React, { useCallback, useMemo, useState } from 'react'
 import Drawer from '@mui/material/Drawer'
 import { SidebarSection } from './SidebarSection'
@@ -12,7 +11,7 @@ import { HeaderStats } from './HeaderStats'
 import { SocialSidebarSection } from './SocialSidebarSection'
 import { SideBarFooter } from './SideBarFooter'
 import { MobileTopBar } from './MobileTopBar'
-import { DEFAULT_BAR_SIZE } from 'curve-ui-kit/src/entities/themes/model'
+import { DEFAULT_BAR_SIZE } from 'curve-ui-kit/src/themes/model'
 
 const SIDEBAR_WIDTH = {width: '100%', minWidth: 320} as const
 const HIDE_SCROLLBAR = {
@@ -22,7 +21,7 @@ const HIDE_SCROLLBAR = {
   scrollbarWidth: 'none', // Firefox
 }
 
-const SECONDARY_BACKGROUND = {backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][1]}
+const SECONDARY_BACKGROUND = {backgroundColor: 'background.default'}
 const zIndex = 1300
 
 export const MobileHeader = <TChainId extends number>({
@@ -100,4 +99,3 @@ export const MobileHeader = <TChainId extends number>({
     </AppBar>
   )
 }
-

packages/curve-common/src/widgets/Header/PageTabs.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 import type { AppPage } from 'ui/src/AppNav/types'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 
 export type PageTabsProps = {
   pages: AppPage[]

packages/curve-common/src/widgets/Header/SideBarFooter.tsx

@@ -1,4 +1,4 @@
-import { BaseHeaderProps, toolbarColors } from './types'
+import { BaseHeaderProps } from './types'
 import Box from '@mui/material/Box'
 import { LanguageSwitcher } from '../../features/switch-language'
 import { ThemeSwitcherButtons } from '../../features/switch-theme'
@@ -9,16 +9,15 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Accordion from '@mui/material/Accordion'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
-import { CSSProperties } from '@mui/material/styles/createTypography'
+import Typography from '@mui/material/Typography'
 import { FunctionComponent, ReactNode } from 'react'
 import { AdvancedModeSwitcher } from '../../features/switch-advanced-mode'
 
 type SideBarFooterProps = Pick<BaseHeaderProps, 'translations' | 'advancedMode' | 'LanguageProps' | 'themes' | 'WalletProps'> & {
   sx: SxProps<Theme>
 }
 
-const backgroundColor =  (t: Theme) => toolbarColors[t.palette.mode][0]
+const backgroundColor =  'background.paper'
 
 export const SideBarFooter = ({
   themes: [theme, setTheme],

packages/curve-common/src/widgets/Header/SidebarItem.tsx

@@ -3,7 +3,7 @@ import { ListItem } from '@mui/material'
 import { RouterLink } from 'curve-ui-kit/src/shared/ui/RouterLink'
 import type { AppPage } from 'ui/src/AppNav/types'
 import Link from '@mui/material/Link'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 
 type SidebarItemProps = {
   page: AppPage;

packages/curve-common/src/widgets/Header/SidebarSection.tsx

@@ -3,7 +3,7 @@ import { List, ListSubheader } from '@mui/material'
 import { SidebarItem } from './SidebarItem'
 import type { AppPage } from 'ui/src/AppNav/types'
 import Divider from '@mui/material/Divider'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 
 interface SidebarSectionProps {
   title: string

packages/curve-common/src/widgets/Header/SocialSidebarSection.tsx

@@ -7,7 +7,7 @@ import Tooltip from '@mui/material/Tooltip'
 import Link from '@mui/material/Link'
 import { DiscordIcon } from 'curve-ui-kit/src/shared/ui/DiscordIcon'
 import { DodoIcon } from 'curve-ui-kit/src/shared/ui/DodoIcon'
-import { Box } from 'curve-ui-kit/src/shared/ui/Box'
+import Box from '@mui/material/Box'
 import SvgIcon from '@mui/material/SvgIcon'
 import { Locale } from 'ui/src/AppNav/types'
 

packages/curve-common/src/widgets/Header/types.ts

@@ -2,8 +2,8 @@ import type { AppName, AppPage, Locale } from 'ui/src/AppNav/types'
 import { LanguageSwitcherProps } from '../../features/switch-language'
 import { ChainSwitcherProps } from '../../features/switch-chain'
 import { ConnectWalletIndicatorProps } from '../../features/connect-wallet'
-import { ThemeKey } from 'curve-ui-kit/src/shared/lib'
 import { Dispatch } from 'react'
+import { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 export type NavigationSection = {
   title: string
@@ -41,10 +41,3 @@ export const APP_NAMES = {
   lend: 'Llamalend',
   crvusd: 'crvUSD'
 } as const
-
-
-// TODO: Color should be in theme
-export const toolbarColors = {
-  light: ['#eeeceb', '#f4f3f0'],
-  dark: ['#1f1f1f', '#2f2f2f'] // todo
-} as const

packages/curve-ui-kit/.storybook/main.ts

@@ -86,6 +86,7 @@ const config: StorybookConfig = {
       config.resolve.alias = {
         ...config.resolve.alias,
         '@': path.resolve(__dirname, '../src'),
+        '@ui-kit': path.resolve(__dirname, '../src'),
       }
     }
     return config