chore: audit colours, update token package, brown becomes ink

leather-io · Jan 19, 2024 · c82c612 · c82c612
1 parent ab1fb5b
commit c82c612
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -131,7 +131,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.4",
+    "@leather-wallet/tokens": "0.0.5",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",

diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
@@ -34,17 +34,8 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
   const [field, meta] = useField(name);
   const [isFocused, setIsFocused] = useState(false);
   const isDirty = useIsFieldDirty(name);
-
   return (
     <TextField.Root
-      /**
-       * Focus styling:
-       * radix inserts a <div inside the root with .rt-TextFieldChrome
-       * onFocus - this adds an unwanted box-shadow
-       * setting color="brown" makes this transparent
-       * then focus border can be controlled more easily
-       */
-      color="brown"
       data-state={isDirty && meta.error ? 'error' : undefined}
       className={css({
         borderRadius: 'sm',
@@ -66,9 +57,24 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
             border: 'error',
           },
         },
+        /**
+         * Focus styling:
+         * radix inserts a <div inside the root with .rt-TextFieldChrome
+         * onFocus - this adds an unwanted box-shadow
+         * setting outline: 'none' removes this
+         * then focus border can be controlled more easily
+         */
+        '& .rt-TextFieldChrome': {
+          outline: 'none',
+        },
       })}
     >
-      <TextField.Slot className={css({ padding: 'space.00', marginRight: 'space.01' })}>
+      <TextField.Slot
+        className={css({
+          padding: 'space.00',
+          marginRight: 'space.01',
+        })}
+      >
         <styled.span textStyle="label.01" color="accent.text-subdued">{`${name}.`}</styled.span>
       </TextField.Slot>
       <TextField.Input

diff --git a/src/app/features/feedback-button/feedback-button.tsx b/src/app/features/feedback-button/feedback-button.tsx
@@ -19,8 +19,8 @@ export function FeedbackButton() {
   const { theme } = useThemeSwitcher();
   return (
     <LeatherButton
-      background="brown.1"
-      _hover={{ background: 'brown.2' }}
+      background="ink.1"
+      _hover={{ background: 'ink.2' }}
       variant="ghost"
       size="sm"
       pos="fixed"

diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -48,7 +48,7 @@ export function FundAccountTile(props: FundAccountTileProps) {
             height="40px"
             justifyContent="center"
             width="40px"
-            backgroundColor="lightModeBrown.1"
+            backgroundColor="lightModeInk.1"
           >
             <img src={icon} width="24px" />
           </Box>

diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx
@@ -23,7 +23,7 @@ export function AccountInfoCard() {
   return (
     <Flex
       direction="column"
-      bgColor={{ base: 'brown.2', sm: 'unset' }}
+      bgColor={{ base: 'ink.2', sm: 'unset' }}
       rounded="sm"
       px={{ base: 'space.05', sm: '0' }}
       pt={{ base: 'space.05', sm: 'space.06' }}

diff --git a/src/app/pages/home/components/home.layout.tsx b/src/app/pages/home/components/home.layout.tsx
@@ -14,7 +14,7 @@ export function HomeLayout({ children }: HomeLayoutProps) {
         maxWidth={['unset', 'unset', '882px']}
         px={['space.04', 'space.04', 'space.08']}
         width="100%"
-        backgroundColor="brown.1"
+        backgroundColor="ink.1"
         borderRadius="lg"
       >
         <AccountInfoCard />

diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx
@@ -137,7 +137,7 @@ function SetPasswordPage() {
                 <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
                   Your password protects your Secret Key on this device only.
                 </styled.p>
-                <styled.p textStyle="body.02" color="brown.10">
+                <styled.p textStyle="body.02" color="ink.10">
                   You'll need just your Secret Key to access your wallet on another device, or this
                   one if you lose your password.
                 </styled.p>

diff --git a/src/app/pages/onboarding/welcome/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx
@@ -26,12 +26,12 @@ export function WelcomeLayout({
 
   return (
     <Flex flexDir={['column-reverse', '', 'row']} minW="100vw" minH="100vh">
-      <Flex flexDir="column" bg={['brown.2', '', 'brown.12']} flex={[1, 2]} p="space.05">
+      <Flex flexDir="column" bg={['ink.2', '', 'ink.12']} flex={[1, 2]} p="space.05">
         <Flex
           flexDir="column"
           flex={[1, 1, 0]}
           justifyContent={['center', '', 'flex-start']}
-          color={['brown.12', '', 'brown.2']}
+          color={['ink.12', '', 'ink.2']}
         >
           <Box>
             <styled.h1 textStyle={['heading.03', '', 'display.02', 'display.01']}>
@@ -86,8 +86,8 @@ export function WelcomeLayout({
       </Flex>
       <Flex
         p="space.05"
-        bg="brown.2"
-        color="brown.12"
+        bg="ink.2"
+        color="ink.12"
         flexDir="column"
         justifyContent="space-between"
         flex={['', '', 1]}

diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx
@@ -37,7 +37,7 @@ export function Unlock() {
     <>
       {/* Hide the logo when user hasn't consented yet */}
       {!hasApprovedNewBrand && (
-        <Box position="fixed" w="200px" h="60px" background="brown.2" top={0} left={0} />
+        <Box position="fixed" w="200px" h="60px" background="ink.2" top={0} left={0} />
       )}
 
       <RequestPassword

diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts
@@ -68,52 +68,52 @@ export const buttonRecipe = defineRecipe({
     variant: {
       // Solid button
       solid: {
-        bg: 'brown.12',
-        color: 'brown.1',
-        _hover: { bg: 'brown.10' },
-        _active: { bg: 'brown.12' },
+        bg: 'ink.12',
+        color: 'ink.1',
+        _hover: { bg: 'ink.10' },
+        _active: { bg: 'ink.12' },
         _disabled: {
           _hover: {
-            bg: 'brown.6',
+            bg: 'ink.6',
           },
-          bg: 'brown.6',
+          bg: 'ink.6',
           color: 'white',
         },
         ...focusStyles,
-        ...loadingStyles('brown.2'),
+        ...loadingStyles('ink.2'),
       },
 
       // Outline button
       outline: {
-        _hover: { bg: 'brown.3' },
+        _hover: { bg: 'ink.3' },
         _focus: {
           _before: { border: '2px solid', borderColor: 'blue.500' },
         },
         _before: {
           ...basePesudoOutlineProps,
           border: '1px solid',
-          borderColor: 'brown.12',
+          borderColor: 'ink.12',
         },
-        ...loadingStyles('brown.12'),
+        ...loadingStyles('ink.12'),
       },
 
       // Ghost button
       ghost: {
         _hover: { bg: 'accent.component-background-hover' },
         _focus: { _before: { border: '2px solid', borderColor: 'blue.500' } },
-        ...loadingStyles('brown.12'),
+        ...loadingStyles('ink.12'),
       },
 
       // Link button
       link: {
         appearance: 'none',
         pos: 'relative',
-        color: 'brown.12',
+        color: 'ink.12',
         display: 'inline',
         p: 'unset',
         textAlign: 'left',
-        _hover: { color: 'brown.8' },
-        _active: { color: 'brown.8' },
+        _hover: { color: 'ink.8' },
+        _active: { color: 'ink.8' },
         _focus: {
           outline: 0,
           _before: { color: 'blue.500' },
@@ -128,24 +128,24 @@ export const buttonRecipe = defineRecipe({
           background: 'currentColor',
         },
         _disabled: {
-          color: 'brown.6',
-          _hover: { color: 'brown.6' },
+          color: 'ink.6',
+          _hover: { color: 'ink.6' },
         },
       },
 
       // Text as action button
       text: {
         appearance: 'none',
         pos: 'relative',
-        color: 'brown.12',
+        color: 'ink.12',
         display: 'inline',
         p: 'unset',
         textAlign: 'left',
-        _hover: { color: 'brown.8' },
-        _active: { color: 'brown.8' },
+        _hover: { color: 'ink.8' },
+        _active: { color: 'ink.8' },
         _disabled: {
-          color: 'brown.6',
-          _hover: { color: 'brown.6' },
+          color: 'ink.6',
+          _hover: { color: 'ink.6' },
         },
       },
     },
@@ -168,30 +168,30 @@ export const buttonRecipe = defineRecipe({
       variant: 'solid',
       invert: true,
       css: {
-        bg: 'brown.2',
-        color: 'brown.12',
-        _hover: { bg: 'brown.1' },
-        _active: { bg: 'brown.4' },
-        _loading: { _after: { borderColor: 'brown.12' } },
+        bg: 'ink.2',
+        color: 'ink.12',
+        _hover: { bg: 'ink.1' },
+        _active: { bg: 'ink.4' },
+        _loading: { _after: { borderColor: 'ink.12' } },
       },
     },
     {
       variant: 'outline',
       invert: true,
       css: {
-        color: 'brown.2',
-        _before: { borderColor: 'brown.2' },
-        _hover: { bg: 'brown.10' },
-        _active: { bg: 'brown.12' },
-        _loading: { _after: { borderColor: 'brown.12' } },
+        color: 'ink.2',
+        _before: { borderColor: 'ink.2' },
+        _hover: { bg: 'ink.10' },
+        _active: { bg: 'ink.12' },
+        _loading: { _after: { borderColor: 'ink.12' } },
       },
     },
     {
       variant: 'link',
       invert: true,
       css: {
-        color: 'brown.2',
-        _hover: { color: 'brown.5' },
+        color: 'ink.2',
+        _hover: { color: 'ink.5' },
       },
     },
   ],

diff --git a/yarn.lock b/yarn.lock
@@ -2484,10 +2484,10 @@
     "@trivago/prettier-plugin-sort-imports" "^4.2.0"
     prettier "^3.0.3"
 
-"@leather-wallet/[email protected].4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.4.tgz#16eefec9ebce9b546436243bc07b0942a4e9d55f"
-  integrity sha512-6klYyoM/frCl+5HNYHooZaAIv0pZJ2103xu3lN3CRqHQl/epMWfq58BPtquh48/XmQT8VoMD/qLR+o/tUvBopQ==
+"@leather-wallet/[email protected].5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.5.tgz#075daf05a3d65451731a26f870058ec41b6b42b9"
+  integrity sha512-ljs4kSFEkTWtRa1+fEB1+mBQJgqYmoF1o/zbNOP23pjUCCgqLxTViOwZcFStqnTgf0hfu7JenGSsS/GV7HI21g==
 
 "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0":
   version "8.2.0"