@arcblock/ux 2.13.31 → 2.13.33

package/lib/BlockletV2/blocklet.js

@@ -135,11 +135,11 @@ export default function BlockletStore(props) {
           }) : item.icon
         }, item.key))]
       }), onButtonClick && /*#__PURE__*/_jsxs(Button, {
-        color: "reverse",
         variant: "outlined",
         size: "small",
         disabled: buttonDisabled || buttonLoading,
         style: {
+          color: theme.palette.text.primary,
           borderColor: theme.palette.grey[300],
           borderRadius: 8,
           fontSize: 13,

package/lib/BlockletV2/components/tooltip-icon.js

@@ -7,7 +7,7 @@ export default function TooltipIcon({
   slotProps,
   fontSize = 12,
   fontWeight = 500,
-  color = 'text.secondary',
+  color = 'text.contrast',
   ...props
 }) {
   return title ? /*#__PURE__*/_jsx(Tooltip, {
@@ -19,10 +19,9 @@ export default function TooltipIcon({
         ...slotProps?.popper,
         sx: [{
           [`& .${tooltipClasses.tooltip}`]: {
-            backgroundColor: 'common.white',
             fontSize,
             fontWeight,
-            boxShadow: '0px 4px 8px 0px #03071214, 0px 0px 0px 1px #03071214',
+            boxShadow: 2,
             marginBottom: '6px !important',
             borderRadius: '8px',
             cursor: 'default',

package/lib/Config/index.d.ts

@@ -1 +1,2 @@
 export * from './config-provider';
+export { default as ThemeModeToggle } from './theme-mode-toggle';

package/lib/Config/index.js

@@ -1 +1,2 @@
-export * from './config-provider';
+export * from './config-provider';
+export { default as ThemeModeToggle } from './theme-mode-toggle';

package/lib/CookieConsent/index.js

@@ -75,10 +75,21 @@ const Wrapper = styled('div')`
   max-width: 440px;
   padding: 16px 24px;
   font-size: 16px;
-  color: #666;
-  background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
+  color: ${({
+  theme
+}) => theme.palette.grey[500]};
+  background: ${({
+  theme
+}) => theme.palette.background.paper};
+  border: 1px solid ${({
+  theme
+}) => theme.palette.divider};
+  border-radius: ${({
+  theme
+}) => theme.shape.borderRadius}px;
+  box-shadow: ${({
+  theme
+}) => theme.shadows[4]};
   &:empty {
     display: none;
   }

package/lib/Metric/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-danger */
-import { Link } from '@mui/material';
+import { Link, useTheme } from '@mui/material';
 import ImageIcon from '../Icon/image';
 import { styled } from '../Theme';
 export default function Metric({
@@ -12,6 +12,9 @@ export default function Metric({
   LinkComponent = Link,
   prefix = '/images'
 }) {
+  const {
+    palette
+  } = useTheme();
   const metric = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       className: "metric__image",
@@ -20,7 +23,7 @@ export default function Metric({
         alt: typeof name === 'string' ? name : '',
         size: 30,
         prefix: prefix,
-        color: "#222222"
+        color: palette.text.primary
       })
     }), /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("div", {
@@ -42,7 +45,7 @@ export default function Metric({
   });
 }
 const Container = styled('div')`
-  border-left: 1px solid ${props => props.theme.typography.color.main};
+  border-left: 1px solid ${props => props.theme.palette.divider};
   padding: 10px 0 10px 16px;
   @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
     padding: 0 0 0 8px;
@@ -67,7 +70,7 @@ const Container = styled('div')`
     font-size: ${props => props.size === 'small' ? 32 : 36}px;
     font-weight: 600;
     line-height: 36px;
-    color: ${props => props.theme.typography.color.main};
+    color: ${props => props.theme.palette.text.primary};
 
     small {
       font-size: 12px;
@@ -94,7 +97,7 @@ const Container = styled('div')`
     text-transform: capitalize;
     line-height: 1.2;
     font-weight: 500;
-    color: ${props => props.theme.typography.color.main};
+    color: ${props => props.theme.palette.text.primary};
     @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
       font-size: 10px;
       line-height: 1;

package/lib/NavMenu/nav-menu.js

@@ -42,7 +42,7 @@ function NavMenu({
   ...rest
 }) {
   const theme = useTheme();
-  const $textColor = useCreation(() => theme.palette.grey[400], [theme]);
+  const $textColor = useCreation(() => theme.palette.text.secondary, [theme]);
   const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
   const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
   // eslint-disable-next-line no-param-reassign

package/lib/NavMenu/products.js

@@ -1608,7 +1608,7 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(AIKitSvg, {})
       }, {
         label: /*#__PURE__*/_jsx(Link, {
-          to: `https://www.blocklet.io/${locale}`,
+          to: `https://www.blocklet.io/${locale}/payment-kit`,
           target: "_blank",
           rel: "noreferrer noopener",
           children: "Payment Kit"

package/lib/RelativeTime/index.js

@@ -43,9 +43,9 @@ const translations = {
   },
   zh: {
     utc: 'UTC 时区',
-    local: '本地时区',
+    local: '当前时区',
     shortUTC: 'UTC',
-    shortLocal: '本地'
+    shortLocal: '当前时区'
   }
 };
 function useRelativeTime({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.31",
+  "version": "2.13.33",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "66ef51b4b217d15985838eb2c058ec833c07e1cd",
+  "gitHead": "b835dedcd8f2e473082e4c1aee0a8cb3ed0e78ec",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.31",
-    "@arcblock/nft-display": "^2.13.31",
-    "@arcblock/react-hooks": "^2.13.31",
+    "@arcblock/icons": "^2.13.33",
+    "@arcblock/nft-display": "^2.13.33",
+    "@arcblock/react-hooks": "^2.13.33",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.31",
+    "@blocklet/theme": "^2.13.33",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/BlockletV2/blocklet.tsx

@@ -136,11 +136,11 @@ export default function BlockletStore(props: IBlockletStore) {
         </Box>
         {onButtonClick && (
           <Button
-            color="reverse"
             variant="outlined"
             size="small"
             disabled={buttonDisabled || buttonLoading}
             style={{
+              color: theme.palette.text.primary,
               borderColor: theme.palette.grey[300],
               borderRadius: 8,
               fontSize: 13,

package/src/BlockletV2/components/tooltip-icon.tsx

@@ -13,7 +13,7 @@ export default function TooltipIcon({
   slotProps,
   fontSize = 12,
   fontWeight = 500,
-  color = 'text.secondary',
+  color = 'text.contrast',
   ...props
 }: TooltipIconProps) {
   return title ? (
@@ -27,10 +27,9 @@ export default function TooltipIcon({
           sx: [
             {
               [`& .${tooltipClasses.tooltip}`]: {
-                backgroundColor: 'common.white',
                 fontSize,
                 fontWeight,
-                boxShadow: '0px 4px 8px 0px #03071214, 0px 0px 0px 1px #03071214',
+                boxShadow: 2,
                 marginBottom: '6px !important',
                 borderRadius: '8px',
                 cursor: 'default',

package/src/Config/index.ts

@@ -1 +1,2 @@
 export * from './config-provider';
+export { default as ThemeModeToggle } from './theme-mode-toggle';

package/src/CookieConsent/index.tsx

@@ -79,10 +79,11 @@ const Wrapper = styled('div')`
   max-width: 440px;
   padding: 16px 24px;
   font-size: 16px;
-  color: #666;
-  background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
+  color: ${({ theme }) => theme.palette.grey[500]};
+  background: ${({ theme }) => theme.palette.background.paper};
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  box-shadow: ${({ theme }) => theme.shadows[4]};
   &:empty {
     display: none;
   }

package/src/Metric/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import { Link } from '@mui/material';
+import { Link, useTheme } from '@mui/material';
 
 import ImageIcon from '../Icon/image';
 import { styled } from '../Theme';
@@ -23,10 +23,17 @@ export default function Metric({
   LinkComponent = Link,
   prefix = '/images',
 }: MetricProps) {
+  const { palette } = useTheme();
   const metric = (
     <>
       <div className="metric__image">
-        <ImageIcon name={icon} alt={typeof name === 'string' ? name : ''} size={30} prefix={prefix} color="#222222" />
+        <ImageIcon
+          name={icon}
+          alt={typeof name === 'string' ? name : ''}
+          size={30}
+          prefix={prefix}
+          color={palette.text.primary}
+        />
       </div>
       <div>
         <div
@@ -46,7 +53,7 @@ type ContainerProps = {
 };
 
 const Container = styled('div')<ContainerProps>`
-  border-left: 1px solid ${(props) => props.theme.typography.color.main};
+  border-left: 1px solid ${(props) => props.theme.palette.divider};
   padding: 10px 0 10px 16px;
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     padding: 0 0 0 8px;
@@ -71,7 +78,7 @@ const Container = styled('div')<ContainerProps>`
     font-size: ${(props) => (props.size === 'small' ? 32 : 36)}px;
     font-weight: 600;
     line-height: 36px;
-    color: ${(props) => props.theme.typography.color.main};
+    color: ${(props) => props.theme.palette.text.primary};
 
     small {
       font-size: 12px;
@@ -98,7 +105,7 @@ const Container = styled('div')<ContainerProps>`
     text-transform: capitalize;
     line-height: 1.2;
     font-weight: 500;
-    color: ${(props) => props.theme.typography.color.main};
+    color: ${(props) => props.theme.palette.text.primary};
     @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
       font-size: 10px;
       line-height: 1;

package/src/NavMenu/nav-menu.tsx

@@ -65,7 +65,7 @@ function NavMenu({
   ...rest
 }: NavMenuProps) {
   const theme = useTheme();
-  const $textColor = useCreation(() => theme.palette.grey[400], [theme]);
+  const $textColor = useCreation(() => theme.palette.text.secondary, [theme]);
   const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
   const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
   // eslint-disable-next-line no-param-reassign

package/src/NavMenu/products.tsx

@@ -295,7 +295,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
             },
             {
               label: (
-                <Link to={`https://www.blocklet.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
                   Payment Kit
                 </Link>
               ),

package/src/RelativeTime/index.tsx

@@ -45,9 +45,9 @@ const translations: Record<Locale, { utc: string; local: string; shortUTC: strin
   },
   zh: {
     utc: 'UTC 时区',
-    local: '本地时区',
+    local: '当前时区',
     shortUTC: 'UTC',
-    shortLocal: '本地',
+    shortLocal: '当前时区',
   },
 };