@blocklet/payment-react 1.18.37 → 1.18.39

package/es/checkout/donate.js

@@ -81,11 +81,12 @@ export function DonateDetails({ supporters = [], currency, method }) {
           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"
@@ -227,12 +228,12 @@ function SupporterAvatar({
           pr: 1,
           ml: -1,
           borderRadius: "8px",
-          backgroundColor: "#f4f4f5",
+          backgroundColor: "grey.100",
           height: "24px",
           ...showDonateDetails ? {
             cursor: "pointer",
             "&:hover": {
-              backgroundColor: "#e5e7eb"
+              backgroundColor: "grey.200"
             }
           } : {}
         },
@@ -503,7 +504,8 @@ function CheckoutDonateInner({
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                    backgroundColor: "rgba(255, 255, 255, 0.7)"
+                    backgroundColor: "background.paper",
+                    opacity: 0.8
                   },
                   children: /* @__PURE__ */ jsx(CircularProgress, {})
                 }
@@ -538,12 +540,8 @@ function CheckoutDonateInner({
             variant: donateSettings.appearance?.button?.variant || "outlined",
             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
               ...donateSettings.appearance?.button?.sx || {}
@@ -642,7 +640,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/es/components/blockchain/tx.js

@@ -24,7 +24,7 @@ export default function TxLink(props) {
         sx: { color: "text.link" },
         spacing: 1,
         children: [
-          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.link", children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
+          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "text.link" }, children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
           /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
         ]
       }

package/es/components/country-select.js

@@ -214,13 +214,13 @@ const CountrySelect = forwardRef(
                   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"
                   } : {}
                 },
@@ -363,6 +363,7 @@ const CountrySelect = forwardRef(
               position: "absolute",
               bottom: 0,
               m: 0,
+              p: 0,
               borderBottomLeftRadius: 0,
               borderBottomRightRadius: 0,
               width: "100%"
@@ -373,7 +374,7 @@ const CountrySelect = forwardRef(
               /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Select Country" }),
               /* @__PURE__ */ jsx(IconButton, { edge: "end", onClick: () => setOpen(false), sx: { "-webkit-tap-highlight-color": "transparent" }, children: "\u2715" })
             ] }),
-            /* @__PURE__ */ jsx(DialogContent, { sx: { p: 0 }, children: countryListContent })
+            /* @__PURE__ */ jsx(DialogContent, { sx: { "&.MuiDialogContent-root": { p: 0 } }, children: countryListContent })
           ]
         }
       )

package/es/components/over-due-invoice-payment.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Typography, Stack, Alert } from "@mui/material";
+import { Button, Typography, Stack, Alert, useTheme } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { joinURL } from "ufo";
@@ -41,6 +41,7 @@ function OverdueInvoicePayment({
   authToken
 }) {
   const { t, locale } = useLocaleContext();
+  const theme = useTheme();
   const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState("");
   const [payLoading, setPayLoading] = useState(false);
@@ -361,7 +362,7 @@ function OverdueInvoicePayment({
                   target: "_blank",
                   onClick: handleViewDetailClick,
                   rel: "noreferrer",
-                  style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                  style: { color: theme.palette.text.link },
                   children: getDetailLinkText()
                 }
               )
@@ -385,7 +386,7 @@ function OverdueInvoicePayment({
                   target: "_blank",
                   rel: "noreferrer",
                   onClick: handleViewDetailClick,
-                  style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                  style: { color: theme.palette.text.link },
                   children: getDetailLinkText()
                 }
               )
@@ -401,9 +402,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/es/components/pricing-table.js

@@ -231,7 +231,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) => {
@@ -249,11 +249,12 @@ 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"
                         }
                       },
                       children: formatRecurring(recurring[x], true, "", locale)
@@ -312,13 +313,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/es/components/table.js

@@ -59,19 +59,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;
@@ -83,7 +85,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;
@@ -94,7 +96,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/es/history/invoice/list.js

@@ -241,7 +241,7 @@ const InvoiceTable = React.memo((props) => {
                 variant: "text",
                 size: "small",
                 onClick: (e) => handleLinkClick(e, invoice),
-                sx: { color: "var(--foregrounds-fg-interactive, #0086FF) !important" },
+                sx: { color: "text.link" },
                 rel: "noreferrer",
                 children: t("payment.customer.invoice.pay")
               }

package/es/payment/donation-form.js

@@ -521,7 +521,7 @@ export default function DonationForm({
             theme: void 0,
             hideNavMenu: void 0,
             maxWidth: false,
-            sx: { borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)" }
+            sx: { borderBottom: "1px solid", borderColor: "grey.100" }
           }
         ) : null,
         /* @__PURE__ */ jsxs(
@@ -541,11 +541,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
                   }
                 }
@@ -590,7 +589,7 @@ export const Root = styled(Box)`
     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';
   }
 
@@ -602,7 +601,7 @@ export const Root = styled(Box)`
 
   .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/es/payment/form/address.js

@@ -128,8 +128,8 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                   {
                     ...field,
                     sx: {
-                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                        borderColor: "transparent"
+                      ".MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent !important"
                       }
                     }
                   }

package/es/payment/form/currency.js

@@ -55,29 +55,18 @@ export default function CurrencySelector({ value, currencies, onChange }) {
 const Root = styled("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/es/payment/form/index.js

@@ -523,7 +523,7 @@ export default function PaymentForm({
           fullWidth: true,
           disabled: state.stripePaying || !quantityInventoryStatus || !payable,
           children: [
-            (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
+            (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "primary.contrastText" } }),
             state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
           ]
         }

package/es/payment/form/phone.js

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

package/es/payment/index.js

@@ -228,7 +228,7 @@ function PaymentInner({
           action
         }
       ),
-      mode === "standalone" && !isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "var(--foregrounds-fg-muted, #98A3B1)" } })
+      mode === "standalone" && !isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })
     ] }) }),
     /* @__PURE__ */ jsxs(
       Stack,
@@ -272,7 +272,7 @@ function PaymentInner({
         ]
       }
     ),
-    mode === "standalone" && isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "var(--foregrounds-fg-muted, #98A3B1)" } })
+    mode === "standalone" && isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })
   ] }) });
 }
 Payment.defaultProps = {
@@ -383,7 +383,7 @@ export default function Payment({
             theme: void 0,
             hideNavMenu: void 0,
             maxWidth: false,
-            sx: { borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)" }
+            sx: { borderBottom: "1px solid", borderColor: "grey.100" }
           }
         ) : null,
         /* @__PURE__ */ jsxs(
@@ -403,11 +403,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
                   }
                 },
@@ -417,7 +416,7 @@ export default function Payment({
                   left: 0,
                   right: 0,
                   zIndex: 999,
-                  background: "#fff",
+                  backgroundColor: "background.paper",
                   marginBottom: 0
                 },
                 ".cko-payment": {
@@ -473,7 +472,7 @@ export const Root = styled(Box)`
     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 {
@@ -527,7 +526,7 @@ export const Root = styled(Box)`
 
   .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;
@@ -563,20 +562,21 @@ export const Root = styled(Box)`
   }
 
   .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`};
     }
   }
 
@@ -603,7 +603,8 @@ export const Root = styled(Box)`
       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;
       }

package/es/payment/product-item.js

@@ -77,9 +77,9 @@ export default function ProductItem({
           variant: "outlined",
           sx: {
             mt: 1,
-            borderColor: "var(--tags-tag-red-border, #FFC8D3)",
-            background: "var(--tags-tag-red-bg, #FFE2E6)",
-            color: "var(--tags-tag-red-text, #E40031)"
+            borderColor: "chip.error.border",
+            backgroundColor: "chip.error.background",
+            color: "chip.error.text"
           }
         }
       ) : null,
@@ -125,9 +125,9 @@ export default function ProductItem({
                     variant: "outlined",
                     sx: {
                       ml: 1,
-                      borderColor: " var(--tags-tag-orange-border, #FFE467)",
-                      background: "var(--tags-tag-orange-bg, #FFF4BC)",
-                      color: "var(--tags-tag-orange-text, #D24000)"
+                      borderColor: "chip.warning.border",
+                      backgroundColor: "chip.warning.background",
+                      color: "chip.warning.text"
                     }
                   }
                 )

package/es/payment/product-skeleton.js

@@ -10,7 +10,8 @@ export default function ProductSkeleton({ count }) {
       spacing: 1,
       sx: {
         width: 320,
-        border: "1px solid #eee",
+        border: "1px solid",
+        borderColor: "grey.100",
         borderRadius: 1,
         transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
         boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",

package/es/payment/success.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Grow, Link, Stack, Typography, Box, Paper } from "@mui/material";
-import { styled } from "@mui/system";
+import { Grow, Link, Stack, Typography, Box, Paper, styled } from "@mui/material";
 import { joinURL } from "ufo";
 import { Button } from "@arcblock/ux";
 import { usePaymentContext } from "../contexts/payment.js";
@@ -142,7 +141,7 @@ const Div = styled("div")`
     content: '';
     height: 100px;
     position: absolute;
-    background: #ffffff;
+    background: ${(props) => props.theme.palette.background.paper};
     transform: rotate(-45deg);
   }
   .check-icon .icon-line {
@@ -186,7 +185,7 @@ const Div = styled("div")`
     height: 85px;
     position: absolute;
     transform: rotate(-45deg);
-    background-color: #ffffff;
+    background-color: ${(props) => props.theme.palette.background.paper};
   }
 
   @keyframes rotate-circle {

package/es/theme/index.css

@@ -1,20 +1,26 @@
 :root {
   /* Light Theme */
   /* Color */
+  /* background.default */
   --backgrounds-bg-base: #ffffff;
   --backgrounds-bg-base-hover: #f9fafb;
   --backgrounds-bg-base-pressed: #f3f4f6;
+  /* grey.100 */
   --backgrounds-bg-component: #f1f3f5;
   --backgrounds-bg-component-hover: #e5e7eb;
+  /* grey.100 */
   --backgrounds-bg-disabled: #f3f4f6;
+  /* grey.50 */
   --backgrounds-bg-field: #f9fafb;
   --backgrounds-bg-field-hover: #f3f4f6;
   --backgrounds-bg-glass: #ffffffb8;
+  /* grey.100 */
   --backgrounds-bg-highlight: #eff6ff;
   --backgrounds-bg-highlight-hover: #dbeafe;
   --backgrounds-bg-interactive: #3b82f6;
   --backgrounds-bg-interactive-hover: #2563eb;
   --backgrounds-bg-overlay: #03071266;
+  /* grey.50 */
   --backgrounds-bg-subtle: #f9fafb;
   --backgrounds-bg-subtle-hover: #f3f4f6;
   --backgrounds-bg-subtle-pressed: #e5e7eb;
@@ -32,15 +38,21 @@
   --buttons-button-transparent: #ffffff00;
   --buttons-button-transparent-hover: #f3f4f6;
   --buttons-button-transparent-pressed: #e5e7eb;
+  /* grey.A700 */
   --foregrounds-fg-base: #030712;
   --foregrounds-fg-danger: #e11d48;
   --foregrounds-fg-disabled: #d1d5db;
+  /* text.link */
   --foregrounds-fg-interactive: #3b82f6;
   --foregrounds-fg-interactive-hover: #2563eb;
+  /* text.lighter */
   --foregrounds-fg-muted: #9ca3af;
+  /* primary.contrastText */
   --foregrounds-fg-on-color: #ffffff;
   --foregrounds-fg-on-inverted: #ffffff;
   --foregrounds-fg-subtle: #4b5563;
+  /* grey.200 */
+  --foregrounds-fg-border: #e0e0e0;
   --others-spacer: #ffffff00;
   --shadows-card-hover-1: #03071214;
   --shadows-card-hover-2: #03071214;
@@ -75,47 +87,72 @@
   --shadows-switch-handle-7: #03071214;
   --shadows-tooltip-1: #03071214;
   --shadows-tooltip-2: #03071214;
+  /* grey.100 */
   --stroke-border-base: #eff1f5;
   --stroke-border-error: #e11d48;
+  /* secondary.main */
   --stroke-border-interactive: #3b82f6;
   --stroke-border-loud: #030712;
   --stroke-border-strong: #d1d5db;
+  /* grey.200 */
   --stroke-sep: #eff1f5;
+  /* chip.info.background */
   --tags-tag-blue-bg: #dbeafe;
   --tags-tag-blue-bg-hover: #bfdbfe;
+  /* chip.info.border */
   --tags-tag-blue-border: #bfdbfe;
   --tags-tag-blue-icon: #2563eb;
+  /* chip.info.text */
   --tags-tag-blue-text: #1d4ed8;
+  /* chip.success.background */
   --tags-tag-green-bg: #d1fae5;
   --tags-tag-green-bg-hover: #a7f3d0;
+  /* chip.success.border */
   --tags-tag-green-border: #a7f3d0;
   --tags-tag-green-icon: #059669;
+  /* chip.success.text */
   --tags-tag-green-text: #047857;
+  /* chip.default.background */
   --tags-tag-neutral-bg: #f3f4f6;
   --tags-tag-neutral-bg-hover: #e5e7eb;
+  /* chip.default.border */
   --tags-tag-neutral-border: #e5e7eb;
   --tags-tag-neutral-icon: #6b7280;
+  /* chip.default.text */
   --tags-tag-neutral-text: #4b5563;
+  /* chip.warning.background */
   --tags-tag-orange-bg: #fef4c7;
   --tags-tag-orange-bg-hover: #fde68a;
+  /* chip.warning.border */
   --tags-tag-orange-border: #fde68a;
   --tags-tag-orange-icon: #d97706;
+  /* chip.warning.text */
   --tags-tag-orange-text: #b45309;
+  /* chip.secondary.background */
   --tags-tag-purple-bg: #ede9fe;
   --tags-tag-purple-bg-hover: #ddd6fe;
+  /* chip.secondary.border */
   --tags-tag-purple-border: #ddd6fe;
   --tags-tag-purple-icon: #7c3aed;
+  /* chip.secondary.text */
   --tags-tag-purple-text: #6d28d9;
+  /* chip.error.background */
   --tags-tag-red-bg: #ffe4e6;
   --tags-tag-red-bg-hover: #fecdd3;
+  /* chip.error.border */
   --tags-tag-red-border: #fecdd3;
   --tags-tag-red-icon: #e11d48;
+  /* chip.error.text */
   --tags-tag-red-text: #be123c;
   /* Number */
+  /* borderRadius: 0.5 */
   --radius-s: 0.25rem;
+  /* borderRadius: 1 */
   --radius-m: 0.5rem;
+  /* borderRadius: 1.5 */
   --radius-l: 0.75rem;
   --radius-round: 624.9375rem;
+  /* grey.200 */
   --stroke-button-secondary-border: #e5e7eb;
 }
 [data-theme='dark'] {