refactor: colors, closes #4831

leather-io · Feb 22, 2024 · 934cfd0 · 934cfd0
1 parent c4fb072
commit 934cfd0
Show file tree

Hide file tree

Showing 141 changed files with 376 additions and 358 deletions.
diff --git a/package.json b/package.json
@@ -132,7 +132,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/tokens": "0.0.6",
+    "@leather-wallet/tokens": "0.0.8",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",

diff --git a/public/assets/splash-screen.js b/public/assets/splash-screen.js
@@ -1,11 +1,11 @@
 var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 var splashScreen = document.getElementById('splash-screen');
 
-// set accent.background-secondary
+// set ink.background-secondary
 if (isDark) {
-  // darkModeInk.2
-  splashScreen.style.backgroundColor = '#2C2A24';
+  // background-secondary (_dark)
+  splashScreen.style.backgroundColor = '#12100F';
 } else {
-  // lightModeInk.3
+  // background-secondary (base)
   splashScreen.style.backgroundColor = '#F5F1ED';
 }
diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx
@@ -40,12 +40,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
         titleLeft={accountName}
         titleRight={
           isLoading ? (
-            <Spinner
-              color="accent.text-subdued"
-              position="absolute"
-              right={0}
-              top="calc(50% - 8px)"
-            />
+            <Spinner color="ink.text-subdued" position="absolute" right={0} top="calc(50% - 8px)" />
           ) : (
             balanceLabel
           )

diff --git a/src/app/components/address-displayer/address-displayer.layout.tsx b/src/app/components/address-displayer/address-displayer.layout.tsx
@@ -7,7 +7,7 @@ interface AddressDisplayerLayoutProps {
 export function AddressDisplayerLayout({ isEven, ...props }: AddressDisplayerLayoutProps) {
   return (
     <styled.span
-      color={isEven ? 'accent.text-primary' : 'accent.text-subdued'}
+      color={isEven ? 'ink.text-primary' : 'ink.text-subdued'}
       mr="space.02"
       textStyle="mono.01"
       {...props}

diff --git a/src/app/components/available-balance.tsx b/src/app/components/available-balance.tsx
@@ -15,16 +15,16 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <HStack gap="space.01">
-        <styled.span color="accent.text-subdued" textStyle="caption.01">
+        <styled.span color="ink.text-subdued" textStyle="caption.01">
           Available balance
         </styled.span>
         <BasicTooltip label={balanceTooltipLabel} side="top">
           <Box>
-            <InfoCircleIcon color="accent.text-subdued" variant="small" />
+            <InfoCircleIcon color="ink.text-subdued" variant="small" />
           </Box>
         </BasicTooltip>
       </HStack>
-      <styled.span color="accent.text-subdued" mr="space.02" textStyle="caption.01">
+      <styled.span color="ink.text-subdued" mr="space.02" textStyle="caption.01">
         {formatMoney(balance)}
       </styled.span>
     </Flex>

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx
@@ -39,10 +39,10 @@ export function BitcoinCustomFeeFiat({
 
   return (
     <Flex justifyContent="space-between">
-      <styled.span color="accent.text-subdued" textStyle="body.02">
+      <styled.span color="ink.text-subdued" textStyle="body.02">
         {feeData.fiatFeeValue}
       </styled.span>
-      <styled.span color="accent.text-subdued" textStyle="body.02">
+      <styled.span color="ink.text-subdued" textStyle="body.02">
         {feeData.feeInBtc} BTC
       </styled.span>
     </Flex>

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -87,7 +87,7 @@ export function BitcoinCustomFee({
           <Form>
             <Stack gap="space.06" mt="space.02">
               <Stack gap="space.05">
-                <styled.span color="accent.text-subdued" textStyle="body.02" maxWidth="21.5rem">
+                <styled.span color="ink.text-subdued" textStyle="body.02" maxWidth="21.5rem">
                   Higher fee rates typically lead to faster confirmation times.
                   <Link
                     ml="space.01"

diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -21,7 +21,7 @@ export function FeesListItem({
 }: FeesListItemProps) {
   return (
     <styled.button
-      _hover={{ background: 'accent.component-background-hover' }}
+      _hover={{ background: 'ink.component-background-hover' }}
       border={isSelected ? 'focus' : 'default'}
       borderRadius="xs"
       boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04)"

diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
@@ -31,8 +31,8 @@ export function BitcoinTransactionIcon({
         right="-9px"
         position="absolute"
         size="21px"
-        bg={transaction.status.confirmed ? 'stacks' : 'warning.label'}
-        color="accent.background-primary"
+        bg={transaction.status.confirmed ? 'stacks' : 'yellow.action-primary-default'}
+        color="ink.background-primary"
         border="background"
         {...props}
       >

diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx
@@ -10,7 +10,7 @@ export function InscriptionIcon({ inscription, ...rest }: { inscription: Support
       return (
         <Circle
           bg="stacks"
-          color="accent.background-primary"
+          color="ink.background-primary"
           flexShrink={0}
           position="relative"
           size="36px"

diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-status.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-status.tsx
@@ -13,7 +13,7 @@ export function BitcoinTransactionStatus({ transaction }: BitcoinTransactionStat
   const isPending = !transaction.status.confirmed;
   return isPending ? (
     <BasicTooltip asChild label={pendingWaitingMessage} side="bottom">
-      <Caption color="warning.label">Pending</Caption>
+      <Caption color="yellow.action-primary-default">Pending</Caption>
     </BasicTooltip>
   ) : null;
 }
diff --git a/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx b/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
@@ -11,13 +11,13 @@ export function ChooseAssetContainer({ children }: HasChildren) {
         height="fit-content"
         maxWidth={['100%', 'centeredPageFullWidth']}
         minWidth={['100%', 'centeredPageFullWidth']}
-        background="accent.background-primary"
+        background="ink.background-primary"
       >
         {children}
       </Flex>
     ),
     popup: (
-      <Flex background="accent.background-primary" width="100%">
+      <Flex background="ink.background-primary" width="100%">
         {children}
       </Flex>
     ),

diff --git a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx b/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx
@@ -4,13 +4,7 @@ import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon';
 
 export function StxAvatar({ ...props }: CircleProps) {
   return (
-    <Circle
-      bg="stacks"
-      color="accent.background-primary"
-      position="relative"
-      size="36px"
-      {...props}
-    >
+    <Circle bg="stacks" color="ink.background-primary" position="relative" size="36px" {...props}>
       <StxIcon />
     </Circle>
   );

diff --git a/src/app/components/drawer/base-drawer.tsx b/src/app/components/drawer/base-drawer.tsx
@@ -90,7 +90,7 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => {
         willChange="transform, opacity"
         width="100%"
         maxWidth={['768px', '768px', '472px']}
-        bg="accent.background-primary"
+        bg="ink.background-primary"
         borderTopLeftRadius="lg"
         borderTopRightRadius="lg"
         borderBottomLeftRadius={[0, 0, 'lg']}

diff --git a/src/app/components/drawer/components/drawer-header.tsx b/src/app/components/drawer/components/drawer-header.tsx
@@ -40,7 +40,7 @@ export function DrawerHeader({
       {icon && icon}
       {title && <styled.h1 textStyle="heading.05">{title}</styled.h1>}
       {isHovered && isWaitingOnPerformedAction && (
-        <styled.span color="accent.text-subdued" textStyle="caption.01">
+        <styled.span color="ink.text-subdued" textStyle="caption.01">
           {waitingOnPerformedActionMessage}
         </styled.span>
       )}

diff --git a/src/app/components/drawer/components/header-action-button.tsx b/src/app/components/drawer/components/header-action-button.tsx
@@ -12,12 +12,12 @@ export function HeaderActionButton(props: HeaderActionButtonProps) {
   return (
     <Grid
       _hover={{
-        bg: isWaitingOnPerformedAction ? 'unset' : 'accent.component-background-hover',
+        bg: isWaitingOnPerformedAction ? 'unset' : 'ink.component-background-hover',
         cursor: isWaitingOnPerformedAction ? 'unset' : 'pointer',
       }}
       data-testid={HomePageSelectors.DrawerHeaderActionBtn}
       borderRadius="xs"
-      color="accent.action-primary-default"
+      color="ink.action-primary-default"
       height="36px"
       onClick={isWaitingOnPerformedAction ? undefined : onAction}
       opacity={isWaitingOnPerformedAction ? '0.3' : 'unset'}

diff --git a/src/app/components/error-label.tsx b/src/app/components/error-label.tsx
@@ -12,7 +12,7 @@ export function ErrorLabel({ children, ...rest }: HstackProps) {
           mt: '2px',
         },
       })}
-      color="error.label"
+      color="red.action-primary-default"
       gap="space.02"
       textAlign="left"
       textStyle="body.02"

diff --git a/src/app/components/fees-row/components/custom-fee-field.tsx b/src/app/components/fees-row/components/custom-fee-field.tsx
@@ -40,7 +40,7 @@ export function CustomFeeField({
     <Stack position="relative">
       <Flex
         alignSelf="flex-end"
-        color="accent.text-subdued"
+        color="ink.text-subdued"
         flexDirection="column"
         justifyContent="center"
         position="relative"
@@ -53,7 +53,7 @@ export function CustomFeeField({
         <styled.input
           autoComplete="off"
           borderRadius="xs"
-          color="accent.text-subdued"
+          color="ink.text-subdued"
           data-testid={SharedComponentsSelectors.CustomFeeFieldInput}
           display="block"
           height="32px"

diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx
@@ -32,9 +32,9 @@ export function FeeEstimateItem({
     <Link
       _before={{ bg: 'transparent' }}
       _hover={{
-        bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
+        bg: isVisible ? 'ink.component-background-hover' : 'ink.background-primary',
         borderRadius: 'xs',
-        color: 'accent.text-primary',
+        color: 'ink.text-primary',
       }}
       alignItems="center"
       data-testid={`${testLabels[index]}-fee`}

diff --git a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx
@@ -39,7 +39,7 @@ export function FeeEstimateSelectLayout({
         />
         {isVisible ? (
           <Stack
-            bg="accent.background-primary"
+            bg="ink.background-primary"
             borderRadius="xs"
             boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)"
             data-testid={SharedComponentsSelectors.FeeEstimateSelect}

diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx
@@ -27,11 +27,11 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
         <HStack alignItems="center" width="100%">
           <BasicTooltip label={feesInfo} side="bottom">
             <HStack gap="space.01">
-              <styled.span color="accent.text-subdued" textStyle="label.02">
+              <styled.span color="ink.text-subdued" textStyle="label.02">
                 Fee
               </styled.span>
               <InfoCircleIcon
-                color="accent.text-subdued"
+                color="ink.text-subdued"
                 onClick={() => openInNewTab(url)}
                 variant="small"
               />

diff --git a/src/app/components/fees-row/components/transaction-fee.tsx b/src/app/components/fees-row/components/transaction-fee.tsx
@@ -15,7 +15,7 @@ interface TransactionFeeProps {
 export function TransactionFee({ fee, feeCurrencySymbol, usdAmount }: TransactionFeeProps) {
   const feeLabel = (
     <styled.span
-      color="accent.text-subdued"
+      color="ink.text-subdued"
       data-testid={SharedComponentsSelectors.FeeToBePaidLabel}
       textStyle="label.02"
     >

diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
@@ -32,7 +32,7 @@ export function Header(props: HeaderProps) {
   return (
     <Flex
       alignItems={hideActions ? 'center' : 'flex-start'}
-      backgroundColor={['accent.background-primary', 'accent.background-secondary']}
+      backgroundColor={['ink.background-primary', 'ink.background-secondary']}
       justifyContent="space-between"
       minHeight={['unset', '80px']}
       p="space.04"

diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
@@ -31,14 +31,14 @@ export function InfoCardRow({ title, value, titleAdditionalElement, ...props }:
   return (
     <HStack alignItems="start" fontSize="14px" justifyContent="space-between" {...props}>
       <Flex alignItems="center" gap="space.01">
-        <styled.span color="accent.text-subdued" mr="space.01" textStyle="body.02">
+        <styled.span color="ink.text-subdued" mr="space.01" textStyle="body.02">
           {title}
         </styled.span>
         {titleAdditionalElement && titleAdditionalElement}
       </Flex>
       {isString(value) ? (
         <styled.span
-          color="accent.text-primary"
+          color="ink.text-primary"
           textStyle="label.02"
           fontVariant="tabular-nums"
           data-testid={SharedComponentsSelectors.InfoCardRowValue}
@@ -126,7 +126,7 @@ export function InfoCardFooter({ children }: InfoCardFooterProps) {
       alignItems="center"
       bg={whenPageMode({
         full: '',
-        popup: 'accent.background-primary',
+        popup: 'ink.background-primary',
       })}
       bottom="0"
       justifyContent="center"

diff --git a/src/app/components/info-label.tsx b/src/app/components/info-label.tsx
@@ -18,7 +18,7 @@ export function InfoLabel({ children, title, ...rest }: InfoLabelProps) {
         py="space.03"
         gap="space.02"
         width="100%"
-        color="accent.notification-text"
+        color="ink.text-primary"
       >
         <styled.span textStyle="label.02">{title}</styled.span>
         <styled.span textStyle="label.03">{children}</styled.span>

diff --git a/src/app/components/item-hover.tsx b/src/app/components/item-hover.tsx
@@ -18,7 +18,7 @@ function ItemHover({
       size="calc(100% + 24px)"
       left="-12px"
       top="-12px"
-      bg="accent.component-background-hover"
+      bg="ink.component-background-hover"
       zIndex={-1}
       {...rest}
     />

diff --git a/src/app/components/layout/divider.tsx b/src/app/components/layout/divider.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps } from 'leather-styles/jsx';
 
 export function Divider(props: BoxProps) {
-  return <Box bg="accent.border-default" height="1px" width="100%" {...props} />;
+  return <Box bg="ink.border-default" height="1px" width="100%" {...props} />;
 }
diff --git a/src/app/components/leather-logo.tsx b/src/app/components/leather-logo.tsx
@@ -12,8 +12,8 @@ export const LeatherLogo = memo((props: LeatherLogoProps) => {
 
   return (
     <styled.button
-      _hover={{ color: 'accent.action-primary-hover' }}
-      color="accent.text-primary"
+      _hover={{ color: 'ink.action-primary-hover' }}
+      color="ink.text-primary"
       onClick={onClick}
       type="button"
     >

diff --git a/src/app/components/loading-rectangle.tsx b/src/app/components/loading-rectangle.tsx
@@ -4,7 +4,7 @@ export function LoadingRectangle(props: BoxProps) {
   return (
     <Box
       animation="shine 5s infinite linear"
-      backgroundColor="accent.background-secondary"
+      backgroundColor="ink.background-secondary"
       backgroundImage="linear-gradient(90deg, rgba(219,219,219,1) 0%, rgba(192,192,247,0.5) 35%, rgba(219,219,219,1) 100%)"
       {...props}
     />

diff --git a/src/app/components/modal-header.tsx b/src/app/components/modal-header.tsx
@@ -68,7 +68,7 @@ export function ModalHeader({
       )}
 
       <Flex alignItems="center" flexBasis="35%" justifyContent="center">
-        <styled.h5 textStyle="heading.05" color={token('colors.accent.background-secondary')}>
+        <styled.h5 textStyle="heading.05" color={token('colors.ink.background-secondary')}>
           {title}
         </styled.h5>
       </Flex>

diff --git a/src/app/components/network-mode-badge.tsx b/src/app/components/network-mode-badge.tsx
@@ -31,7 +31,7 @@ export const NetworkModeBadge = memo((props: FlexProps) => {
       zIndex={999}
       {...props}
     >
-      <styled.span color="accent.text-subdued" textStyle="label.03">
+      <styled.span color="ink.text-subdued" textStyle="label.03">
         {name}
       </styled.span>
     </Flex>

diff --git a/src/app/components/secret-key/two-column.layout.tsx b/src/app/components/secret-key/two-column.layout.tsx
@@ -43,7 +43,7 @@ export function TwoColumnLayout({
           pt={['space.02', 'space.05']}
           pb={['space.02', 'space.05']}
           gap="space.04"
-          backgroundColor="accent.background-primary"
+          backgroundColor="ink.background-primary"
           borderRadius="xs"
           width="100%"
           flex="1"

diff --git a/src/app/components/sponsored-label.tsx b/src/app/components/sponsored-label.tsx
@@ -8,14 +8,14 @@ export function SponsoredLabel(): React.JSX.Element {
     <Stack width="100%">
       <HStack
         alignItems="center"
-        bg="accent.component-background-hover"
+        bg="ink.component-background-hover"
         borderRadius="sm"
         height="48px"
         pl="space.04"
       >
         <ErrorCircleIcon color="stacks" />
 
-        <styled.span color="accent.text-primary">
+        <styled.span color="ink.text-primary">
           This transaction is sponsored, so no fee is charged
         </styled.span>
       </HStack>

diff --git a/src/app/components/stacks-transaction-item/increase-fee-button.tsx b/src/app/components/stacks-transaction-item/increase-fee-button.tsx
@@ -13,8 +13,8 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
 
   return (
     <styled.button
-      _hover={{ color: 'accent.text-subdued' }}
-      bg="accent.background-primary"
+      _hover={{ color: 'ink.text-subdued' }}
+      bg="ink.background-primary"
       minWidth="105px"
       ml="auto"
       onClick={e => {