@arcblock/ux 2.13.12 → 2.13.13

package/lib/Datatable/index.js

@@ -503,99 +503,133 @@ const alignCss = css`
 `;
 const TableContainer = styled('div', {
   shouldForwardProp: prop => prop !== 'verticalKeyWidth'
-})`
-  &.datatable-hide-header {
-    thead.MuiTableHead-root {
-      display: none;
+})(({
+  theme,
+  verticalKeyWidth
+}) => {
+  const primaryTextColor = theme.palette.text.primary;
+  const defaultBgColor = theme.palette.background.default;
+  const hoverBgColor = theme.palette.action.hover;
+  const oddRowBgColor = theme.palette.grey[50];
+  const verticalKeyWidthStyle = verticalKeyWidth ? `
+      ${theme.breakpoints.down('md')} {
+        [class*='MUIDataTable-responsiveBase'] {
+          tr:not([class*='responsiveSimple']) {
+            td.MuiTableCell-body {
+              > div {
+                &:first-of-type {
+                  width: ${verticalKeyWidth + (!/\D/.test(verticalKeyWidth) ? 'px' : '')};
+                }
+              }
+            }
+          }
+        }
+      }
+    ` : '';
+  return css`
+    &.datatable-hide-header {
+      thead.MuiTableHead-root {
+        display: none;
+      }
     }
-  }
 
-  td {
-    &.vertical-align-top {
-      align-items: flex-start;
-    }
-    &.vertical-align-center {
-      align-items: center;
-    }
-    &.vertical-align-bottom {
-      align-items: flex-end;
+    td {
+      &.vertical-align-top {
+        align-items: flex-start;
+      }
+      &.vertical-align-center {
+        align-items: center;
+      }
+      &.vertical-align-bottom {
+        align-items: flex-end;
+      }
     }
-  }
 
-  height: 100%;
-  > .MuiPaper-root {
-    display: flex;
-    flex-direction: column;
     height: 100%;
-    box-shadow: none;
-  }
-  ${props => props.theme.breakpoints.down('md')} {
-    td.MuiTableCell-body {
-      padding-right: 0;
+    > .MuiPaper-root {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-shadow: none;
+      background: none;
+      background-color: ${defaultBgColor};
     }
-    [class*='MUIDataTable-responsiveBase'] {
-      tr:not([class*='responsiveSimple']) {
-        td.MuiTableCell-body {
-          display: flex;
-          > div {
-            width: auto;
-            flex: 1;
-            &:first-of-type {
-              font-weight: bold;
-              font-size: 14px;
+    ${theme.breakpoints.down('md')} {
+      td.MuiTableCell-body {
+        padding-right: 0;
+      }
+      [class*='MUIDataTable-responsiveBase'] {
+        tr:not([class*='responsiveSimple']) {
+          td.MuiTableCell-body {
+            display: flex;
+            > div {
               width: auto;
-              flex: 0 0 auto;
-              padding-right: 16px;
-              &:empty {
-                padding-right: 0;
+              flex: 1;
+              &:first-of-type {
+                font-weight: bold;
+                font-size: 14px;
+                width: auto;
+                flex: 0 0 auto;
+                padding-right: 16px;
+                &:empty {
+                  padding-right: 0;
+                }
               }
             }
           }
         }
       }
     }
-  }
-  ${props => props.theme.breakpoints.up('md')} {
-    ${alignCss}
-  }
-  ${props => props.theme.breakpoints.up('sm')} {
-    [class*='responsiveSimple'] {
+    ${theme.breakpoints.up('md')} {
       ${alignCss}
     }
-  }
+    ${theme.breakpoints.up('sm')} {
+      [class*='responsiveSimple'] {
+        ${alignCss}
+      }
+    }
 
-  ${inProps => {
-  if (inProps.verticalKeyWidth) {
-    return `
-        ${inProps.theme.breakpoints.down('md')} {
-          [class*='MUIDataTable-responsiveBase'] {
-            tr:not([class*='responsiveSimple']) {
-              td.MuiTableCell-body {
-                > div {
-                  &:first-of-type {
-                    width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
-                  }
-                }
-              }
-            }
-          }
-        }
-      `;
-  }
-  return '';
-}}
+    ${verticalKeyWidthStyle}
 
-  &.datatable-stripped {
-    .MuiTableBody-root {
-      tr:nth-of-type(odd) {
-        background-color: ${props => props.theme.palette.action.hover};
+    .MuiTableCell-head {
+      color: ${primaryTextColor};
+      background-color: ${defaultBgColor};
+    }
+
+    .MuiTableCell-root {
+      color: ${primaryTextColor};
+    }
+
+    .MuiTableRow-root {
+      background-color: ${defaultBgColor};
+      &:nth-of-type(even) {
+        background-color: ${defaultBgColor};
+      }
+      &:hover {
+        background-color: ${hoverBgColor};
+      }
+      &.MuiTableRow-footer {
+        background-color: ${defaultBgColor};
       }
     }
-  }
-`;
+
+    &.datatable-stripped {
+      .MuiTableRow-root:nth-of-type(odd) {
+        background-color: ${oddRowBgColor};
+        &:hover {
+          background-color: ${hoverBgColor};
+        }
+        &.MuiTableRow-footer {
+          background-color: ${defaultBgColor};
+        }
+      }
+    }
+  `;
+});
 const FooterContainer = styled('div')`
   display: flex;
   align-items: center;
+  background-color: ${props => props.theme.palette.background.default};
   .datatable-footer {
     position: relative;
     margin-left: auto;

package/lib/Footer/index.js

@@ -100,7 +100,7 @@ const Container = styled('div', {
   position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;
-  border-top: 1px solid ${props => props.dark ? props.theme.palette.grey[900] : '#dee2e7'};
+  border-top: 1px solid ${props => props.theme.palette.divider};
   box-sizing: border-box;
   width: 100%;
 
@@ -115,10 +115,7 @@ const Container = styled('div', {
     flex-wrap: wrap;
 
     .footer-item {
-      color: ${({
-  theme,
-  dark
-}) => dark ? theme.palette.grey[500] : theme.palette.grey[900]};
+      color: ${props => props.theme.palette.text.hint};
       display: flex;
       align-items: center;
       flex-wrap: wrap;

package/lib/Header/header.js

@@ -156,7 +156,9 @@ const Root = styled(Box)`
     }
     .header-brand-desc {
       margin-top: 4px;
-      color: #9397a1;
+      color: ${({
+  theme
+}) => theme.palette.text.hint};
     }
   }
   .header-brand-addon {

package/lib/Header/responsive-header.js

@@ -99,7 +99,9 @@ function ResponsiveHeader({
         style: {
           top: 64,
           bottom: 0,
-          boxShadow: 'none'
+          boxShadow: 'none',
+          backgroundImage: 'none',
+          backgroundColor: theme.palette.background.paper
         }
       },
       children: /*#__PURE__*/_jsx(MenuPanel, {

package/lib/Layout/dashboard/index.js

@@ -63,6 +63,7 @@ function Dashboard({
   fullWidth = false,
   dense = 'auto',
   footerProps = {},
+  sx,
   children,
   ...rest
 }) {
@@ -100,6 +101,7 @@ function Dashboard({
     }
   }, []);
   return /*#__PURE__*/_jsxs(Wrapper, {
+    sx: sx,
     ...rest,
     className: classes,
     sidebarWidth: sidebarWidth,
@@ -177,6 +179,7 @@ function Dashboard({
           }),
           children: children
         }), footerVisible && /*#__PURE__*/_jsx(Footer, {
+          dark: theme.palette.mode === 'dark',
           ...footerProps
         })]
       })]
@@ -190,6 +193,9 @@ const Wrapper = styled('div', {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    background-color: ${({
+  theme
+}) => theme.palette.background.default};
   }
   .dashboard-body {
     overflow: hidden;
@@ -219,11 +225,17 @@ const Wrapper = styled('div', {
   }
   &.dashboard-dense {
     .dashboard-header {
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid;
+      border-color: ${({
+  theme
+}) => theme.palette.divider};
     }
     .dashboard-sidebar {
       width: 256px;
-      border-right: 1px solid #eee;
+      border-right: 1px solid;
+      border-color: ${({
+  theme
+}) => theme.palette.divider};
     }
   }
   ${props => props.theme.breakpoints.up('md')} {

package/lib/Layout/dashboard/sidebar.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Typography from '@mui/material/Typography';
-import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
@@ -91,7 +90,7 @@ const Root = styled('div')`
     &.layout-sidebar-link--active {
       color: ${props => props.theme.palette.primary.main};
       background: ${gradient};
-      border-left-color: ${teal.A700};
+      border-left-color: ${props => props.theme.palette.primary.main};
     }
   }
   .layout-sidebar-icon {

package/lib/LoadingMask/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { temp as colors } from '../Colors';
 export default function LoadingMask({
   size = 64,
   padding,
@@ -38,7 +37,7 @@ export default function LoadingMask({
         height: finialSize,
         overflow: 'hidden',
         borderRadius: `${finialRadius}px`,
-        backgroundColor: colors.strokeBorderBase,
+        backgroundColor: 'grey.200',
         '&::before,&::after': {
           content: '""',
           position: 'absolute',
@@ -57,7 +56,9 @@ export default function LoadingMask({
           borderRadius: `${finialRadius - finialBorderWidth}px`
         },
         '&::before': {
-          background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
+          background: ({
+            palette
+          }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
           transform: 'scale(100)',
           animation: `rotate ${finialDuration}s linear infinite`,
           '@keyframes rotate': {

package/lib/Locale/selector.js

@@ -98,9 +98,9 @@ export default function LocaleSelector(props) {
       children: /*#__PURE__*/_jsx(Box, {
         className: "locales",
         sx: {
-          backgroundColor: 'background.default',
+          backgroundColor: 'background.paper',
           boxShadow: 2,
-          borderRadius: 2
+          borderRadius: 1
         },
         children: /*#__PURE__*/_jsx(ClickAwayListener, {
           onClickAway: onClose,
@@ -130,7 +130,7 @@ export default function LocaleSelector(props) {
                   icon: CheckIcon,
                   className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
                   sx: {
-                    marginRight: 0.5,
+                    marginRight: 1,
                     visibility: code === locale ? 'visible' : 'hidden'
                   }
                 }), name]

package/lib/NavMenu/nav-menu.js

@@ -8,6 +8,7 @@ import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
 import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
 import { SubContainer } from './sub-container';
+import { useTheme } from '../Theme';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
@@ -34,12 +35,16 @@ function NavMenu({
   mode = 'horizontal',
   children: _childs = null,
   activeId = null,
-  textColor = '#9397a1',
-  activeTextColor = '#25292f',
-  bgColor = '#fff',
+  textColor,
+  activeTextColor,
+  bgColor,
   onSelected,
   ...rest
 }) {
+  const theme = useTheme();
+  const $textColor = useCreation(() => theme.palette.grey[400], [theme]);
+  const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
+  const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
   // eslint-disable-next-line no-param-reassign
   const children = filterItems(_childs);
   if (!items?.length && !children?.length) {
@@ -64,14 +69,14 @@ function NavMenu({
     return {
       ...currentState,
       mode,
-      textColor,
-      activeTextColor,
-      bgColor,
+      textColor: $textColor,
+      activeTextColor: $activeTextColor,
+      bgColor: $bgColor,
       activate,
       open,
       close
     };
-  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, textColor, activeTextColor, bgColor, activate, open, close]);
+  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, $textColor, $activeTextColor, $bgColor, activate, open, close]);
   const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
   const moreIconRef = useRef(null);
@@ -193,8 +198,8 @@ function NavMenu({
     children: /*#__PURE__*/_jsx(NavMenuStyled, {
       ...rest,
       className: classes,
-      $textColor: textColor,
-      $bgColor: bgColor,
+      $textColor: $textColor,
+      $bgColor: $bgColor,
       children: /*#__PURE__*/_jsxs(NavMenuRoot, {
         className: clsx('navmenu-root', `navmenu-root--${mode}`),
         ref: navMenuRef,

package/lib/NavMenu/products.js

@@ -1407,7 +1407,9 @@ const Wrapper = styled(Box)`
   width: 80vw;
   max-width: 900px;
   padding: 8px;
-  background: #f7f9fc;
+  background: ${({
+  theme
+}) => theme.palette.grey[100]};
   border-radius: 8px;
 
   &.is-inline {

package/lib/NavMenu/style.js

@@ -4,7 +4,8 @@ export const NavMenuStyled = styled('nav', {
   shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor'
 })(({
   $bgColor,
-  $textColor
+  $textColor,
+  theme
 }) => ({
   position: 'relative',
   padding: '0 16px',
@@ -13,7 +14,10 @@ export const NavMenuStyled = styled('nav', {
   flexGrow: 100,
   backgroundColor: $bgColor,
   color: $textColor,
-  fontSize: '16px'
+  fontSize: '16px',
+  '&.navmenu--inline': {
+    backgroundColor: theme.palette.background.paper
+  }
 }));
 
 // .navmenu-root
@@ -242,7 +246,7 @@ export const NavMenuSubList = styled('ul')(({
   margin: 0,
   padding: '16px',
   borderRadius: '4px',
-  background: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   '& .navmenu-item + .navmenu-item': {
     marginTop: '8px'
   }

package/lib/NavMenu/sub-item-group.js

@@ -6,7 +6,7 @@ const Group = styled(Box)`
   border-radius: 8px;
   background-color: ${({
   theme
-}) => theme.palette.background.default};
+}) => theme.palette.background.paper};
   cursor: auto;
 
   .group-label {

package/lib/PhoneInput/country-select.js

@@ -3,7 +3,6 @@ import { useMemo, forwardRef, useState } from 'react';
 import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
-import { temp as colors } from '../Colors';
 import { mergeSx } from '../Util/style';
 
 // 定义组件类型
@@ -101,11 +100,11 @@ const CountrySelectInner = /*#__PURE__*/forwardRef(({
       },
       '&:hover': {
         'fieldset.MuiOutlinedInput-notchedOutline': {
-          borderColor: colors.dividerColor
+          borderColor: 'divider'
         }
       },
       'fieldset.MuiOutlinedInput-notchedOutline': {
-        borderColor: colors.dividerColor
+        borderColor: 'divider'
       },
       '.MuiMenuItem-root': {
         justifyContent: 'flex-start'

package/lib/SessionBlocklet/index.js

@@ -90,7 +90,7 @@ export default function SessionBlocklet({
           children: /*#__PURE__*/_jsxs(Paper, {
             variant: "outlined",
             sx: {
-              borderRadius: 3,
+              borderRadius: 1.5,
               width: 350,
               maxWidth: '90vw',
               p: 2,
@@ -119,7 +119,7 @@ export default function SessionBlocklet({
                     gap: 1,
                     width: '100%',
                     height: '100%',
-                    borderRadius: 2,
+                    borderRadius: 1,
                     '&:hover': {
                       backgroundColor: 'action.hover'
                     }
@@ -128,7 +128,7 @@ export default function SessionBlocklet({
                     component: "img",
                     src: `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo-bundle/${item.component.did}`,
                     sx: {
-                      borderRadius: 2,
+                      borderRadius: 1,
                       width: 50,
                       height: 50,
                       objectFit: 'contain'