@blocklet/payment-react 1.18.36 → 1.18.38

package/lib/theme/types.d.ts

@@ -0,0 +1,76 @@
+import '@blocklet/theme';
+import '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface Palette {
+        chip: {
+            success: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            default: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            secondary: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            error: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            warning: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            info: {
+                text: string;
+                background: string;
+                border: string;
+            };
+        };
+    }
+    interface PaletteOptions {
+        chip?: {
+            success?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            default?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            secondary?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            error?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            warning?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            info?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+        };
+    }
+    interface TypeText {
+        lighter?: string;
+        link?: string;
+    }
+}

package/lib/theme/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("@blocklet/theme");
+require("@mui/material/styles");

package/lib/theme/typography.js

@@ -51,9 +51,5 @@ const typography = exports.typography = {
   body1: {
     fontSize: "0.875rem",
     lineHeight: 1.75
-  },
-  fontWeightLight: 300,
-  fontWeightRegular: 400,
-  fontWeightMedium: 500,
-  fontWeightBold: 700
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.36",
+  "version": "1.18.38",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,15 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.13",
-    "@arcblock/ux": "^2.13.13",
-    "@arcblock/ws": "^1.20.2",
-    "@blocklet/ui-react": "^2.13.13",
+    "@arcblock/did-connect": "^2.13.18",
+    "@arcblock/ux": "^2.13.18",
+    "@arcblock/ws": "^1.20.4",
+    "@blocklet/theme": "^2.13.18",
+    "@blocklet/ui-react": "^2.13.18",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.20.2",
+    "@ocap/util": "^1.20.4",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -93,7 +94,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.36",
+    "@blocklet/payment-types": "1.18.38",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +125,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "98872e06bac0c437b53a6648ce4487e9f6d2336b"
+  "gitHead": "c273fb068cea55d95017c8b9672f30d5d6c60167"
 }

package/src/checkout/donate.tsx

@@ -165,11 +165,12 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
           sx={{
             padding: '6px',
             '&:hover': {
-              backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+              backgroundColor: (theme) => theme.palette.grey[100],
               transition: 'background-color 200ms linear',
               cursor: 'pointer',
             },
-            borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)',
+            borderBottom: '1px solid',
+            borderColor: 'grey.100',
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -290,13 +291,13 @@ function SupporterAvatar({
           pr: 1,
           ml: -1,
           borderRadius: '8px',
-          backgroundColor: '#f4f4f5',
+          backgroundColor: 'grey.100',
           height: '24px',
           ...(showDonateDetails
             ? {
                 cursor: 'pointer',
                 '&:hover': {
-                  backgroundColor: '#e5e7eb',
+                  backgroundColor: 'grey.200',
                 },
               }
             : {}),
@@ -587,7 +588,8 @@ function CheckoutDonateInner({
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                backgroundColor: 'background.paper',
+                opacity: 0.8,
               }}>
               <CircularProgress />
             </div>
@@ -623,12 +625,8 @@ function CheckoutDonateInner({
         sx={{
           ...(!donateSettings.appearance?.button?.variant
             ? {
-                color: 'var(--foregrounds-fg-base, #010714)',
-                borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
-                '&:hover': {
-                  backgroundColor: 'var(--buttons-button-neutral-hover, #F3F4F6)',
-                  borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
-                },
+                color: 'primary.main',
+                borderColor: 'grey.200',
               }
             : {}),
           // @ts-ignore
@@ -750,7 +748,8 @@ function CheckoutDonateInner({
           sx={{
             '.MuiDialogContent-root': {
               padding: '16px 24px',
-              borderTop: '1px solid var(--stroke-border-base, #EFF1F5)',
+              borderTop: '1px solid',
+              borderColor: 'grey.100',
               width: '100%',
             },
             '.ux-dialog_header': {

package/src/components/blockchain/tx.tsx

@@ -38,7 +38,7 @@ export default function TxLink(props: {
           justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
           sx={{ color: 'text.link' }}
           spacing={1}>
-          <Typography component="span" color="text.link">
+          <Typography component="span" sx={{ color: 'text.link' }}>
             {text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join('...') : text}
           </Typography>
           <OpenInNewOutlined fontSize="small" />

package/src/components/country-select.tsx

@@ -253,14 +253,14 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
                     display: 'flex',
                     alignItems: 'center',
                     '&.Mui-selected': {
-                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      backgroundColor: 'primary.lighter',
                     },
                     '&:hover': {
-                      backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                      backgroundColor: 'grey.100',
                     },
                     ...(isFocused
                       ? {
-                          backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                          backgroundColor: 'grey.100',
                           outline: 'none',
                         }
                       : {}),
@@ -405,6 +405,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
               position: 'absolute',
               bottom: 0,
               m: 0,
+              p: 0,
               borderBottomLeftRadius: 0,
               borderBottomRightRadius: 0,
               width: '100%',
@@ -416,7 +417,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
               ✕
             </IconButton>
           </Box>
-          <DialogContent sx={{ p: 0 }}>{countryListContent}</DialogContent>
+          <DialogContent sx={{ '&.MuiDialogContent-root': { p: 0 } }}>{countryListContent}</DialogContent>
         </Dialog>
       </Box>
     );

package/src/components/over-due-invoice-payment.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/indent */
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Typography, Stack, Alert, SxProps } from '@mui/material';
+import { Button, Typography, Stack, Alert, SxProps, useTheme } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { joinURL } from 'ufo';
@@ -104,6 +104,7 @@ function OverdueInvoicePayment({
   authToken,
 }: Props) {
   const { t, locale } = useLocaleContext();
+  const theme = useTheme();
   const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState('');
   const [payLoading, setPayLoading] = useState(false);
@@ -487,7 +488,7 @@ function OverdueInvoicePayment({
                       target="_blank"
                       onClick={handleViewDetailClick}
                       rel="noreferrer"
-                      style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                      style={{ color: theme.palette.text.link }}>
                       {getDetailLinkText()}
                     </a>
                   </>
@@ -516,7 +517,7 @@ function OverdueInvoicePayment({
                       target="_blank"
                       rel="noreferrer"
                       onClick={handleViewDetailClick}
-                      style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                      style={{ color: theme.palette.text.link }}>
                       {getDetailLinkText()}
                     </a>
                   </>
@@ -535,9 +536,10 @@ function OverdueInvoicePayment({
                     sx={{
                       py: 1,
                       px: 0.5,
-                      borderBottom: '1px solid var(--foregrounds-fg-border, #E0E0E0)',
+                      borderBottom: '1px solid',
+                      borderColor: 'grey.200',
                       '&:hover': {
-                        background: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                        backgroundColor: () => theme.palette.grey[100],
                       },
                       mt: 0,
                     }}>

package/src/components/pricing-table.tsx

@@ -264,7 +264,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     borderRadius: '36px',
                     height: '40px',
                     boxSizing: 'border-box',
-                    backgroundColor: '#f1f3f5',
+                    backgroundColor: 'grey.100',
                     border: 0,
                   }}
                   onChange={(_, value) => {
@@ -282,11 +282,15 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         textTransform: 'capitalize',
                         padding: '5px 12px',
                         fontSize: '13px',
-                        backgroundColor: x === state.interval ? '#fff !important' : '#f1f3f5 !important',
+                        backgroundColor: ({ palette }) =>
+                          x === state.interval
+                            ? `${palette.background.default} !important`
+                            : `${palette.grey[100]} !important`,
                         border: '0px',
                         '&.Mui-selected': {
                           borderRadius: '9999px !important',
-                          border: '1px solid #e5e7eb',
+                          border: '1px solid',
+                          borderColor: 'divider',
                         },
                       }}>
                       {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
@@ -346,15 +350,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   cursor: 'pointer',
                   borderWidth: '1px',
                   borderStyle: 'solid',
-                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
+                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : 'grey.100',
                   borderRadius: 2,
                   transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
-                  boxShadow:
-                    '0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)',
+                  boxShadow: 2,
                   '&:hover': {
-                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
-                    boxShadow:
-                      '0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))',
+                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : 'grey.200',
+                    boxShadow: 2,
                   },
                   width: {
                     xs: '100%',

package/src/components/table.tsx

@@ -79,19 +79,21 @@ const Wrapped = styled(Datatable)`
     overflow: hidden;
   }
   table.MuiTable-root {
-    outline: 1px solid var(--stroke-border-base, #eff1f5);
-    border-radius: var(--radius-m, 8px);
+    outline: 1px solid;
+    outline-color: ${({ theme }) => theme.palette.grey[100]};
+    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
-    outline: 1px solid var(--stroke-border-base, #eff1f5);
-    border-radius: var(--radius-m, 8px);
+    outline: 1px solid;
+    outline-color: ${({ theme }) => theme.palette.grey[100]};
+    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
   }
 
   th.MuiTableCell-head {
     padding: 8px 16px 8px 16px;
     text-transform: inherit;
-    background: var(--backgrounds-bg-subtle, #f9fafb);
+    background: ${({ theme }) => theme.palette.grey[50]};
     border-bottom: none;
     &:first-of-type {
       border-top-left-radius: 8px;
@@ -103,7 +105,7 @@ const Wrapped = styled(Datatable)`
   }
 
   tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
-    background: var(--backgrounds-bg-highlight, #eff6ff);
+    background: ${({ theme }) => theme.palette.grey[100]};
   }
   tr.MuiTableRow-root:last-of-type td:first-of-type {
     border-bottom-left-radius: 8px;
@@ -114,7 +116,7 @@ const Wrapped = styled(Datatable)`
   }
 
   tr.MuiTableRow-root:nth-of-type(even) {
-    background: var(--backgrounds-bg-subtle, #f9fafb);
+    background: ${({ theme }) => theme.palette.grey[50]};
   }
   td.MuiTableCell-root {
     border-bottom: none;

package/src/history/invoice/list.tsx

@@ -316,7 +316,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
                 variant="text"
                 size="small"
                 onClick={(e) => handleLinkClick(e, invoice)}
-                sx={{ color: 'var(--foregrounds-fg-interactive, #0086FF) !important' }}
+                sx={{ color: 'text.link' }}
                 rel="noreferrer">
                 {t('payment.customer.invoice.pay')}
               </Button>

package/src/payment/donation-form.tsx

@@ -555,7 +555,7 @@ export default function DonationForm({
           theme={undefined}
           hideNavMenu={undefined}
           maxWidth={false}
-          sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
+          sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
         />
       ) : null}
       <Root
@@ -574,11 +574,10 @@ export default function DonationForm({
                   left: 0,
                   right: 0,
                   zIndex: 999,
-                  background: '#fff',
+                  backgroundColor: 'background.paper',
                   padding: '10px',
                   textAlign: 'center',
                   button: {
-                    color: '#fff',
                     maxWidth: 542,
                   },
                 },
@@ -631,7 +630,7 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
     position: relative;
     flex-direction: column;
     display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'flex')};
-    background: var(--backgrounds-bg-base);
+    background: ${({ theme }) => theme.palette.background.default};
     min-height: 'auto';
   }
 
@@ -643,7 +642,7 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
 
   .cko-payment-form {
     .MuiFormLabel-root {
-      color: var(--foregrounds-fg-base, #010714);
+      color: ${({ theme }) => theme.palette.grey.A700};
       font-weight: 500;
       margin-top: 12px;
       margin-bottom: 4px;

package/src/payment/form/address.tsx

@@ -134,8 +134,8 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                           <CountrySelect
                             {...field}
                             sx={{
-                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                                borderColor: 'transparent',
+                              '.MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'transparent !important',
                               },
                             }}
                           />

package/src/payment/form/currency.tsx

@@ -57,29 +57,18 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
 const Root = styled<any>('section')`
   .cko-payment-card {
     position: relative;
-    border: 1px solid var(--stroke-border-interactive, #0086ff);
+    border: 1px solid;
+    border-color: ${({ theme }) => theme.palette.secondary.main};
     padding: 4px 8px;
     cursor: pointer;
-    background: var(--backgrounds-bg-field, #f9fafb);
+    background: ${({ theme }) => theme.palette.grey[50]};
   }
 
   .cko-payment-card-unselect {
-    border: 1px solid #ddd;
+    border: 1px solid;
+    border-color: ${({ theme }) => theme.palette.grey[100]};
     padding: 4px 8px;
     cursor: pointer;
-    background: var(--backgrounds-bg-field, #f9fafb);
-  }
-
-  .cko-payment-card::after {
-    content: '';
-    width: 6px;
-    height: 10px;
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-    border: 1px solid #fff;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    transform: rotate(35deg);
+    background: ${({ theme }) => theme.palette.grey[50]};
   }
 `;

package/src/payment/form/index.tsx

@@ -667,7 +667,7 @@ export default function PaymentForm({
             fullWidth
             disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
             {(state.submitting || state.paying) && (
-              <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
+              <CircularProgress size={16} sx={{ mr: 0.5, color: 'primary.contrastText' }} />
             )}
             {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
           </Button>

package/src/payment/form/phone.tsx

@@ -89,8 +89,8 @@ export default function PhoneInput({ ...props }) {
               onChange={onCountryChange}
               name={countryFieldName}
               sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  borderColor: 'transparent',
+                '&.MuiOutlinedInput-notchedOutline': {
+                  borderColor: 'transparent !important',
                 },
               }}
               showDialCode

package/src/payment/index.tsx

@@ -281,7 +281,7 @@ function PaymentInner({
                 action={action}
               />
               {mode === 'standalone' && !isMobile && (
-                <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
+                <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />
               )}
             </Stack>
           </Fade>
@@ -326,9 +326,7 @@ function PaymentInner({
             />
           )}
         </Stack>
-        {mode === 'standalone' && isMobile && (
-          <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
-        )}
+        {mode === 'standalone' && isMobile && <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />}
       </Stack>
     </FormProvider>
   );
@@ -390,17 +388,11 @@ export default function Payment({
               <Box className="cko-product">
                 <OverviewSkeleton />
               </Box>
-              {/* {mode === 'standalone' && !isMobile && (
-              <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
-            )} */}
             </Stack>
           )}
           <Stack className="base-card cko-payment">
             <PaymentSkeleton />
           </Stack>
-          {/* {mode === 'standalone' && isMobile && (
-            <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
-          )} */}
         </Stack>
       );
     }
@@ -458,7 +450,7 @@ export default function Payment({
           theme={undefined}
           hideNavMenu={undefined}
           maxWidth={false}
-          sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
+          sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
         />
       ) : null}
       <Root
@@ -477,11 +469,10 @@ export default function Payment({
                   left: 0,
                   right: 0,
                   zIndex: 999,
-                  background: '#fff',
+                  backgroundColor: 'background.paper',
                   padding: '10px',
                   textAlign: 'center',
                   button: {
-                    color: '#fff',
                     maxWidth: 542,
                   },
                 },
@@ -491,7 +482,7 @@ export default function Payment({
                   left: 0,
                   right: 0,
                   zIndex: 999,
-                  background: '#fff',
+                  backgroundColor: 'background.paper',
                   marginBottom: 0,
                 },
                 '.cko-payment': {
@@ -549,7 +540,7 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
     position: relative;
     flex-direction: column;
     display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'flex')};
-    background: var(--backgrounds-bg-base);
+    background: ${({ theme }) => theme.palette.background.default};
     min-height: 'auto';
   }
   .cko-header {
@@ -603,7 +594,7 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
 
   .cko-payment-form {
     .MuiFormLabel-root {
-      color: var(--foregrounds-fg-base, #010714);
+      color: ${({ theme }) => theme.palette.grey.A700};
       font-weight: 500;
       margin-top: 12px;
       margin-bottom: 4px;
@@ -639,20 +630,21 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
   }
 
   .product-item {
-    border-radius: var(--radius-l, 12px);
-    border: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    border: 1px solid;
+    border-color: ${({ theme }) => theme.palette.grey[100]};
     .product-item-content {
       padding: 16px;
-      background: var(--backgrounds-bg-subtle, #f9fafb);
-      border-top-left-radius: var(--radius-l, 12px);
-      border-top-right-radius: var(--radius-l, 12px);
+      background: ${({ theme }) => theme.palette.grey[50]};
+      border-top-left-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+      border-top-right-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
     }
     .product-item-upsell {
       margin-top: 0;
       padding: 16px;
-      background: var(--backgrounds-bg-component, #f1f3f5);
-      border-bottom-left-radius: var(--radius-l, 12px);
-      border-bottom-right-radius: var(--radius-l, 12px);
+      background: ${({ theme }) => theme.palette.grey[100]};
+      border-bottom-left-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+      border-bottom-right-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
     }
   }
 
@@ -679,7 +671,8 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
       width: 100%;
       height: fit-content;
       flex: none;
-      border-top: 1px solid var(--stroke-border-base, #eff1f5);
+      border-top: 1px solid;
+      border-color: ${({ theme }) => theme.palette.grey[100]};
       &:before {
         display: none;
       }