fix: add border tokens

leather-io · Oct 13, 2023 · 44ddb76 · 44ddb76
1 parent 3379335
commit 44ddb76
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 21 deletions.
diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx
@@ -36,8 +36,7 @@ export function GenericErrorLayout(props: GenericErrorProps) {
         {body}
       </styled.h2>
       <styled.ul
-        border="1px solid"
-        borderColor="accent.border-default !important"
+        border="default"
         borderRadius="10px"
         fontSize="14px"
         lineHeight="1.6"

diff --git a/...features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx b/...features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx
@@ -32,9 +32,7 @@ export function PsbtInputsOutputsTotals() {
           <PsbtAddressTransferTotals showNativeSegwitTotal={isNativeSegwitTotalGreaterThanZero} />
         </Box>
       ) : null}
-      {showDivider ? (
-        <styled.hr border="1px solid" borderColor="accent.border-default !important" />
-      ) : null}
+      {showDivider ? <styled.hr border="default" /> : null}
       {isReceiving ? (
         <Box p="space.05">
           <PsbtRequestDetailsSectionHeader title="You'll receive" />

diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
@@ -4,15 +4,7 @@ import { HasChildren } from '@app/common/has-children';
 
 export function PsbtRequestDetailsSectionLayout({ children, ...props }: HasChildren & StackProps) {
   return (
-    <Stack
-      border="1px solid"
-      borderColor="accent.border-default !important"
-      borderRadius="16px"
-      gap="space.01"
-      p="space.05"
-      width="100%"
-      {...props}
-    >
+    <Stack border="default" borderRadius="16px" gap="space.01" p="space.05" width="100%" {...props}>
       {children}
     </Stack>
   );

diff --git a/src/app/pages/swap/components/selected-asset-field.tsx b/src/app/pages/swap/components/selected-asset-field.tsx
@@ -16,15 +16,12 @@ export function SelectedAssetField({
   return (
     <Flex
       alignItems="center"
-      border="1px solid"
-      borderColor={showError ? 'error !important' : 'accent.border-default !important'}
+      border={showError ? 'error' : 'default'}
       borderRadius="10px"
       css={{
         '&:focus-within': {
           border: '1px solid',
-          borderColor: `${
-            showError ? 'error !important' : 'accent.action-primary-default !important'
-          }`,
+          borderColor: `${showError ? 'error' : 'action-primary-default'}`,
         },
       }}
       height="76px"

diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
@@ -9,8 +9,7 @@ interface SwapAssetsPairLayoutProps {
 export function SwapAssetsPairLayout({ swapAssetFrom, swapAssetTo }: SwapAssetsPairLayoutProps) {
   return (
     <Stack
-      border="1px solid"
-      borderColor="accent.border-default !important"
+      border="default"
       borderRadius="12px"
       gap="space.01"
       mb="space.05"

diff --git a/theme/tokens.ts b/theme/tokens.ts
@@ -40,4 +40,9 @@ export const tokens = defineTokens({
     'extra-loose': { value: '32px' },
   },
   colors,
+  borders: {
+    default: { value: '1px solid {colors.accent.border-default}' },
+    error: { value: '1px solid {colors.error}' },
+    'action-primary-default': { value: '1px solid {colors.accent.action-primary-default}' },
+  },
 });