Rl.design tokens

packages/core/src/components/AdvancedOptions/AdvancedOptions.tsx

@@ -40,12 +40,12 @@ export default function AdvancedOptions(props: Props) {
         <Typography variant="caption" onClick={handleToggle} sx={{ cursor: 'pointer' }}>
           {isExpanded ? (
             <Flex alignItems="center">
-              <KeyboardArrowUpIcon />
+              <KeyboardArrowUpIcon color="info" />
               {lessTitle}
             </Flex>
           ) : (
             <Flex alignItems="center">
-              <KeyboardArrowDownIcon />
+              <KeyboardArrowDownIcon color="info" />
               {moreTitle}
             </Flex>
           )}

packages/core/src/components/Back/Back.tsx

@@ -59,7 +59,7 @@ export default function Back(props: BackProps) {
   return (
     <Flex gap={1} alignItems={alignItems}>
       <IconButton onClick={handleGoBack} sx={iconStyle}>
-        <ArrowBackIosNew />
+        <ArrowBackIosNew color="info" />
       </IconButton>
 
       <Typography variant={variant}>{children}</Typography>

packages/core/src/components/Button/Button.tsx

@@ -1,8 +1,10 @@
-import { Button as BaseButton, ButtonProps as BaseButtonProps } from '@mui/material';
+import { alpha, Button as BaseButton, ButtonProps as BaseButtonProps } from '@mui/material';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import Color from '../../constants/Color';
+
 const StyledBaseButton = styled(({ nowrap: boolean, selected, ...rest }) => <BaseButton {...rest} />)`
   white-space: ${({ nowrap }) => (nowrap ? 'nowrap' : 'normal')};
   ${({ selected, theme }) => {
@@ -11,11 +13,11 @@ const StyledBaseButton = styled(({ nowrap: boolean, selected, ...rest }) => <Bas
     }
 
     const isDark = theme.palette.mode === 'dark';
-    const color = isDark ? '255' : '0';
+    const level = isDark ? '50' : '900';
 
     return `
-      background-color: rgba(${color}, ${color}, ${color}, 0.1);
-      border-color: rgba(${color}, ${color}, ${color}, 0.3) !important;
+      background-color: ${alpha(Color.Neutral[level], 0.1)};
+      border-color: ${alpha(Color.Neutral[level], 0.3)} !important;
     `;
   }}
 `;

packages/core/src/components/CardListItem/CardListItem.tsx

@@ -1,6 +1,7 @@
-import { Box, Card, CardContent, CardActionArea } from '@mui/material';
+import { alpha, Box, Card, CardContent, CardActionArea } from '@mui/material';
 import React, { type ReactNode } from 'react';
 
+import Color from '../../constants/Color';
 import getColorModeValue from '../../utils/useColorModeValue';
 import Loading from '../Loading';
 
@@ -29,7 +30,7 @@ export default function CardListItem(props: CardListItemProps) {
       sx={{
         width: '100%',
         borderRadius: (theme) => `${theme.spacing(1)}`,
-        border: (theme) => `1px solid ${selected ? theme.palette.highlight.main : theme.palette.divider}`,
+        border: (theme) => `1px solid ${selected ? theme.palette.highlight.main : getColorModeValue(theme, 'border')}`,
         backgroundColor: (theme) =>
           `${selected ? getColorModeValue(theme, 'sidebarBackground') : theme.palette.background.paper}`,
         position: 'relative',
@@ -52,7 +53,7 @@ export default function CardListItem(props: CardListItemProps) {
           display="flex"
           alignItems="center"
           justifyContent="center"
-          bgcolor={disabled ? 'rgba(0, 0, 0, 0.2)' : 'transparent'}
+          bgcolor={disabled ? alpha(Color.Neutral[900], 0.2) : 'transparent'}
           zIndex={1}
         >
           {loading && <Loading center />}

packages/core/src/components/Dropdown/DropdownActions.tsx

@@ -3,6 +3,7 @@ import Button, { type ButtonProps } from '@mui/material/Button';
 import { styled, alpha } from '@mui/material/styles';
 import React, { cloneElement, type ReactNode, forwardRef } from 'react';
 
+import Color from '../../constants/Color';
 import { Menu, type MenuProps } from '../Menu';
 
 const StyledMenu = styled((props: MenuProps) => (
@@ -23,16 +24,18 @@ const StyledMenu = styled((props: MenuProps) => (
     borderRadius: 6,
     marginTop: theme.spacing(1),
     minWidth: 180,
-    color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
-    boxShadow:
-      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    color: theme.palette.mode === 'light' ? Color.Comet[700] : theme.palette.grey[300],
+    boxShadow: `${Color.Neutral[50]} 0px 0px 0px 0px, ${alpha(Color.Neutral[900], 0.05)} 0px 0px 0px 1px, ${alpha(
+      Color.Neutral[900],
+      0.1
+    )} 0px 10px 15px -3px, ${alpha(Color.Neutral[900], 0.05)} 0px 4px 6px -2px`,
     '& .MuiMenu-list': {
       padding: '4px 0',
     },
     '& .MuiMenuItem-root': {
       '& .MuiSvgIcon-root': {
         fontSize: 18,
-        color: theme.palette.text.secondary,
+        color: theme.palette.mode === 'dark' ? Color.Neutral[400] : Color.Neutral[500],
         marginRight: theme.spacing(1.5),
       },
       '&:active': {

packages/core/src/components/Dropdown/DropdownBase.tsx

@@ -3,6 +3,8 @@ import Menu, { MenuProps } from '@mui/material/Menu';
 import { styled, alpha } from '@mui/material/styles';
 import React, { type ReactNode } from 'react';
 
+import Color from '../../constants/Color';
+
 const StyledMenu = styled((props: MenuProps) => (
   <Menu
     elevation={0}
@@ -21,9 +23,11 @@ const StyledMenu = styled((props: MenuProps) => (
     borderRadius: 6,
     marginTop: theme.spacing(1),
     minWidth: 180,
-    color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
-    boxShadow:
-      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    color: theme.palette.mode === 'light' ? Color.Comet[700] : theme.palette.grey[300],
+    boxShadow: `${Color.Neutral[50]} 0px 0px 0px 0px, ${alpha(Color.Neutral[900], 0.05)} 0px 0px 0px 1px, ${alpha(
+      Color.Neutral[900],
+      0.1
+    )} 0px 10px 15px -3px, ${alpha(Color.Neutral[900], 0.05)} 0px 4px 6px -2px`,
     '& .MuiMenu-list': {
       padding: '4px 0',
     },

packages/core/src/components/Dropzone/Dropzone.tsx

@@ -2,14 +2,15 @@ import { Paper, CircularProgress } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { useDropzone, DropzoneOptions } from 'react-dropzone';
 
+import Color from '../../constants/Color';
 import AspectRatio from '../AspectRatio';
 import Flex from '../Flex';
 
 function StyledPaper({ children }: { children: ReactNode | ChildrenRender }) {
   return (
     <Paper
       sx={{
-        backgroundColor: '#999999',
+        backgroundColor: Color.Neutral[400],
         padding: (theme) => `${theme.spacing(1)} ${theme.spacing(2)}`,
       }}
     >

packages/core/src/components/EstimatedFee/EstimatedFee.tsx

@@ -12,6 +12,7 @@ import {
 import React, { useState, useEffect, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
+import Color from '../../constants/Color';
 import useCurrencyCode from '../../hooks/useCurrencyCode';
 import useLocale from '../../hooks/useLocale';
 import mojoToChiaLocaleString from '../../utils/mojoToChiaLocaleString';
@@ -126,22 +127,22 @@ function CountdownBar({ startTime, refreshSeconds }: { startTime: number; refres
   const containerStyle = {
     height: 2,
     width: '100%',
-    backgroundColor: '#e0e0de',
+    backgroundColor: Color.Neutral[200],
     borderRadius: 0,
     margin: 0,
   };
 
   const fillerStyle = {
     height: '100%',
     width: `${currentProgress}%`,
-    backgroundColor: 'green',
+    backgroundColor: Color.Green[600],
     borderRadius: 'inherit',
     // textAlign: 'right',
   };
 
   const labelStyle = {
     padding: 0,
-    color: 'white',
+    color: Color.Neutral[50],
     fontWeight: 'bold',
   };
 

packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx

@@ -7,6 +7,7 @@ import React, { type ReactNode, useState, Suspense, useCallback } from 'react';
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 
+import Color from '../../constants/Color';
 import useGetLatestVersionFromWebsite from '../../hooks/useGetLatestVersionFromWebsite';
 import useOpenDialog from '../../hooks/useOpenDialog';
 import EmojiAndColorPicker from '../../screens/SelectKey/EmojiAndColorPicker';
@@ -19,7 +20,7 @@ import NewerAppVersionAvailable from './NewerAppVersionAvailable';
 // import LayoutFooter from '../LayoutMain/LayoutFooter';
 
 const StyledAppBar = styled(({ drawer, ...rest }) => <AppBar {...rest} />)`
-  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+  border-bottom: 1px solid ${({ theme }) => (theme.palette.mode === 'dark' ? Color.Neutral[700] : Color.Neutral[300])};
   width: ${({ theme, drawer }) => (drawer ? `calc(100% - ${theme.drawer.width})` : '100%')};
   margin-left: ${({ theme, drawer }) => (drawer ? theme.drawer.width : 0)};
   z-index: ${({ theme }) => theme.zIndex.drawer + 1};};
@@ -33,6 +34,7 @@ const StyledDrawer = styled(Drawer)`
   > div {
     width: ${({ theme }) => theme.drawer.width};
     // border-width: 0px;
+    border-right: 1px solid ${({ theme }) => (theme.palette.mode === 'dark' ? Color.Neutral[700] : Color.Neutral[300])};
   }
 `;
 
@@ -235,7 +237,11 @@ export default function LayoutDashboard(props: LayoutDashboardProps) {
                                 data-testid="LayoutDashboard-edit-walletName"
                                 sx={{ padding: '8px' }}
                               >
-                                <EditIcon color="disabled" />
+                                <EditIcon
+                                  style={{
+                                    color: isDark ? Color.Neutral[600] : Color.Neutral[400],
+                                  }}
+                                />
                               </IconButton>
                             </Flex>
                             {fingerprint && (

packages/core/src/components/LayoutHero/LayoutHero.tsx

@@ -4,6 +4,7 @@ import React, { type ReactNode } from 'react';
 import { Outlet, Link } from 'react-router-dom';
 import styled from 'styled-components';
 
+import Color from '../../constants/Color';
 import Flex from '../Flex';
 
 const StyledWrapper = styled(Box)`
@@ -13,8 +14,8 @@ const StyledWrapper = styled(Box)`
   flex-grow: 1;
   background: ${({ theme }) =>
     theme.palette.mode === 'dark'
-      ? `linear-gradient(45deg, #222222 30%, #333333 90%)`
-      : `linear-gradient(45deg, #ffffff 30%, #fdfdfd 90%)`};
+      ? `linear-gradient(45deg, ${Color.Neutral[900]} 30%, ${Color.Neutral[800]} 90%)`
+      : `linear-gradient(45deg, ${Color.Neutral[50]} 30%, ${Color.Neutral[100]} 90%)`};
 `;
 
 const StyledBody = styled(Box)`

packages/core/src/components/LayoutMain/LayoutFooter.tsx

@@ -4,17 +4,18 @@ import React from 'react';
 import styled from 'styled-components';
 
 import walletPackageJson from '../../../package.json';
+import Color from '../../constants/Color';
 import useAppVersion from '../../hooks/useAppVersion';
 import Flex from '../Flex';
 
 const { productName } = walletPackageJson;
 
 const FAQ = styled.a`
-  color: rgb(128, 160, 194);
+  color: ${Color.Royal[300]};
 `;
 
 const SendFeedback = styled.a`
-  color: rgb(128, 160, 194);
+  color: ${Color.Royal[300]};
 `;
 
 async function openFAQURL(): Promise<void> {

packages/core/src/components/LayoutMain/LayoutMain.tsx

@@ -1,8 +1,9 @@
-import { Container } from '@mui/material';
+import { alpha, Container } from '@mui/material';
 import React, { ReactElement, ReactNode } from 'react';
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 
+import Color from '../../constants/Color';
 import Flex from '../Flex';
 import LayoutFooter from './LayoutFooter';
 
@@ -14,7 +15,7 @@ const StyledContainer = styled(Container)`
 `;
 
 const StyledInnerContainer = styled(Flex)`
-  box-shadow: inset 6px 0 8px -8px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 6px 0 8px -8px ${alpha(Color.Neutral[900], 0.2)};
   flex-grow: 1;
 `;
 

packages/core/src/components/Loading/Loading.tsx

@@ -2,10 +2,11 @@ import { CircularProgress, CircularProgressProps, Typography } from '@mui/materi
 import React, { type ReactNode } from 'react';
 import styled from 'styled-components';
 
+import Color from '../../constants/Color';
 import Flex from '../Flex';
 
 const StyledCircularProgress = styled(CircularProgress)`
-  color: ${({ theme }) => (theme.palette.mode === 'dark' ? 'white' : 'inherit')}; ;
+  color: ${({ theme }) => (theme.palette.mode === 'dark' ? Color.Neutral[50] : 'inherit')}; ;
 `;
 
 export type LoadingProps = CircularProgressProps & {

packages/core/src/components/LoadingOverlay/LoadingOverlay.tsx

@@ -1,7 +1,8 @@
-import { Box } from '@mui/material';
+import { alpha, Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
+import Color from '../../constants/Color';
 import Loading from '../Loading';
 
 const StyledLoadingContainer = styled(Box)`
@@ -13,7 +14,7 @@ const StyledLoadingContainer = styled(Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: ${alpha(Color.Neutral[900], 0.2)};
 `;
 
 export type LoadingOverlayProps = {

packages/core/src/components/Log/Log.tsx

@@ -2,6 +2,8 @@ import { Paper } from '@mui/material';
 import React, { ReactNode } from 'react';
 import ScrollToBottom from 'react-scroll-to-bottom';
 import styled from 'styled-components';
+
+import Color from '../../constants/Color';
 // @ts-ignore
 
 const StyledScrollToBottom = styled(ScrollToBottom)`
@@ -10,8 +12,8 @@ const StyledScrollToBottom = styled(ScrollToBottom)`
 `;
 
 const StyledPaper = styled(Paper)`
-  background-color: #272c34;
-  color: white;
+  background-color: ${Color.Neutral[800]};
+  color: ${Color.Neutral[50]};
   min-width: 50vw;
   width: 100%;
   height: 40vh;

packages/core/src/components/More/More.tsx

@@ -26,7 +26,7 @@ export default function More(props: MoreProps) {
   return (
     <>
       <IconButton aria-label="more" aria-haspopup="true" onClick={handleClick} disabled={disabled}>
-        <MoreVertIcon />
+        <MoreVertIcon color="info" />
       </IconButton>
       <Menu anchorEl={anchorEl} onClose={handleClose} {...rest} open={open}>
         {children}

packages/core/src/components/SideBarItem/SideBarItem.tsx

@@ -1,8 +1,9 @@
-import { ListItem, ListItemIcon, Typography } from '@mui/material';
+import { alpha, ListItem, ListItemIcon, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { type ReactNode } from 'react';
 import { useNavigate, useMatch } from 'react-router-dom';
 
+import Color from '../../constants/Color';
 import useColorModeValue from '../../utils/useColorModeValue';
 import Flex from '../Flex';
 
@@ -30,7 +31,7 @@ const StyledListItemIcon = styled(ListItemIcon)`
     left: 0;
     width: 100%;
     height: 100%;
-    box-shadow: 0px -2px 4px rgba(104, 249, 127, 0.41), 0px 1px 8px rgba(145, 247, 53, 0.45);
+    box-shadow: 0px -2px 4px ${alpha(Color.Green[300], 0.41)}, 0px 1px 8px ${alpha(Color.Lime[400], 0.45)};
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
   }
@@ -55,7 +56,7 @@ const StyledListItem = styled(ListItem)`
   }
 
   &:hover ${StyledListItemIcon} {
-    border-color: #4caf50;
+    border-color: ${Color.Green[500]};
 
     svg {
       color: ${({ theme }) => useColorModeValue(theme, 'sidebarIconHover')} !important;