@blocklet/payment-react 1.18.37 → 1.18.39

package/src/payment/product-item.tsx

@@ -96,9 +96,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}
@@ -134,9 +134,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',
               }}
             />
           </Typography>

package/src/payment/product-skeleton.tsx

@@ -10,7 +10,8 @@ export default function ProductSkeleton({ count }: { count: number }) {
         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/src/payment/success.tsx

@@ -1,6 +1,5 @@
 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';
@@ -162,7 +161,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 {
@@ -206,7 +205,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/src/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'] {