@astral/ui 4.0.0-alpha.30 → 4.0.0-alpha.31

package/components/ComplianceStatus/styles.js

@@ -1,7 +1,17 @@
 import { CircleErrorFillSm, DotOutlineSm, SuccessFillSm } from '../../icons';
 import { Loader } from '../Loader';
-import { styled } from '../styles';
+import { keyframes, styled } from '../styles';
 import { listContainer } from '../styles/mixins';
+const iconAppearAnimation = keyframes `
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
 export const Wrapper = styled('article') `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
@@ -9,11 +19,11 @@ export const Wrapper = styled('article') `
   padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
 
   background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
-  border-radius: ${({ theme }) => theme.shape.small};
+  border-radius: ${({ theme }) => theme.shape.medium};
 `;
 export const Inner = styled('ul') `
   display: grid;
-  grid-gap: ${({ theme }) => theme.spacing(3)};
+  grid-gap: ${({ theme }) => theme.spacing(2)};
 
   ${listContainer};
 `;
@@ -33,14 +43,20 @@ export const EmptyIcon = styled(DefaultIcon) `
   color: ${({ theme }) => theme.palette.grey[800]};
 `.withComponent(DotOutlineSm);
 export const RejectIcon = styled(DefaultIcon) `
-  color: ${({ theme }) => theme.palette.error[900]};
+  color: ${({ theme }) => theme.palette.error[800]};
+
+  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
 `.withComponent(CircleErrorFillSm);
 export const SuccessIcon = styled(DefaultIcon) `
-  color: ${({ theme }) => theme.palette.success[900]};
+  color: ${({ theme }) => theme.palette.success[800]};
+
+  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
 `.withComponent(SuccessFillSm);
 export const StyledLoader = styled(Loader) `
   align-self: center;
 
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
+  margin-right: ${({ theme }) => theme.microSpacing(1)};
+  margin-left: ${({ theme }) => theme.microSpacing(1)};
 `;

package/components/DataGrid/Loader/styles.js

@@ -1,4 +1,4 @@
-import { LinearProgress } from '@mui/material';
+import { LinearProgress, linearProgressClasses } from '@mui/material';
 import { Divider } from '../../Divider';
 import { styled } from '../../styles';
 export const Backdrop = styled.div `
@@ -19,4 +19,8 @@ export const LoaderWrapper = styled.div `
 `;
 export const StyledLinearProgress = styled(LinearProgress) `
   height: 2px;
+  
+  .${linearProgressClasses.barColorPrimary} {
+    background-color: ${({ theme }) => theme.palette.primary[800]};
+  }
 `;

package/components/Fieldset/styles.js

@@ -6,7 +6,7 @@ const calcMarginStyles = (theme, gutterBottom) => {
         // для этого повышаем приоритет свойства
         if (gutterBottom) {
             return css `
-        margin-bottom: ${theme.spacing(6)} !important;
+        margin-bottom: ${theme.spacing(8)} !important;
 
         ${theme.breakpoints.down('sm')} {
           margin-bottom: ${theme.spacing(4)} !important;
@@ -18,7 +18,7 @@ const calcMarginStyles = (theme, gutterBottom) => {
     `;
     }
     return css `
-    margin-bottom: ${theme.spacing(6)};
+    margin-bottom: ${theme.spacing(8)};
 
     ${theme.breakpoints.down('sm')} {
       margin-bottom: ${theme.spacing(4)};

package/components/FlowButton/styles.js

@@ -1,5 +1,6 @@
 import { Button } from '../Button';
 import { Grid } from '../Grid';
+import { loaderClassnames } from '../Loader';
 import { styled } from '../styles';
 import { Typography } from '../Typography';
 export const StyledButton = styled(Button) `
@@ -16,6 +17,10 @@ export const StyledButton = styled(Button) `
   ${({ theme: { breakpoints } }) => breakpoints.down('sm')} {
     padding: ${({ theme: { spacing } }) => spacing(4, 5)};
   }
+
+  &:has(.${loaderClassnames.root}) {
+    justify-content: center;
+  }
 `;
 export const TargetTextWrapper = styled(Typography) `
   margin-bottom: ${({ theme: { spacing } }) => spacing(1)};

package/components/NotFoundPage/styles.js

@@ -19,6 +19,7 @@ export const Header = styled(Typography) `
   }
 `;
 export const Subheader = styled(Typography) `
+  margin-top: ${({ theme }) => theme.spacing(-2)};
   margin-bottom: ${({ theme }) => theme.spacing(2)};
   ${({ theme }) => theme.breakpoints.down('sm')} {
     font-size: ${({ theme }) => theme.typography.subtitle1.fontSize};

package/components/theme/components/MuiLinearProgress.js

@@ -9,7 +9,7 @@ export const MuiLinearProgress = {
         },
         barColorPrimary({ theme }) {
             return {
-                backgroundColor: theme.palette.primary['800'],
+                backgroundColor: theme.palette.success['600'],
             };
         },
     },

package/node/components/ComplianceStatus/styles.js

@@ -5,6 +5,16 @@ const icons_1 = require("../../icons");
 const Loader_1 = require("../Loader");
 const styles_1 = require("../styles");
 const mixins_1 = require("../styles/mixins");
+const iconAppearAnimation = (0, styles_1.keyframes) `
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
 exports.Wrapper = (0, styles_1.styled)('article') `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
@@ -12,11 +22,11 @@ exports.Wrapper = (0, styles_1.styled)('article') `
   padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
 
   background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
-  border-radius: ${({ theme }) => theme.shape.small};
+  border-radius: ${({ theme }) => theme.shape.medium};
 `;
 exports.Inner = (0, styles_1.styled)('ul') `
   display: grid;
-  grid-gap: ${({ theme }) => theme.spacing(3)};
+  grid-gap: ${({ theme }) => theme.spacing(2)};
 
   ${mixins_1.listContainer};
 `;
@@ -36,14 +46,20 @@ exports.EmptyIcon = (0, styles_1.styled)(DefaultIcon) `
   color: ${({ theme }) => theme.palette.grey[800]};
 `.withComponent(icons_1.DotOutlineSm);
 exports.RejectIcon = (0, styles_1.styled)(DefaultIcon) `
-  color: ${({ theme }) => theme.palette.error[900]};
+  color: ${({ theme }) => theme.palette.error[800]};
+
+  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
 `.withComponent(icons_1.CircleErrorFillSm);
 exports.SuccessIcon = (0, styles_1.styled)(DefaultIcon) `
-  color: ${({ theme }) => theme.palette.success[900]};
+  color: ${({ theme }) => theme.palette.success[800]};
+
+  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
 `.withComponent(icons_1.SuccessFillSm);
 exports.StyledLoader = (0, styles_1.styled)(Loader_1.Loader) `
   align-self: center;
 
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
+  margin-right: ${({ theme }) => theme.microSpacing(1)};
+  margin-left: ${({ theme }) => theme.microSpacing(1)};
 `;

package/node/components/DataGrid/Loader/styles.js

@@ -22,4 +22,8 @@ exports.LoaderWrapper = styles_1.styled.div `
 `;
 exports.StyledLinearProgress = (0, styles_1.styled)(material_1.LinearProgress) `
   height: 2px;
+  
+  .${material_1.linearProgressClasses.barColorPrimary} {
+    background-color: ${({ theme }) => theme.palette.primary[800]};
+  }
 `;

package/node/components/Fieldset/styles.js

@@ -9,7 +9,7 @@ const calcMarginStyles = (theme, gutterBottom) => {
         // для этого повышаем приоритет свойства
         if (gutterBottom) {
             return (0, styles_1.css) `
-        margin-bottom: ${theme.spacing(6)} !important;
+        margin-bottom: ${theme.spacing(8)} !important;
 
         ${theme.breakpoints.down('sm')} {
           margin-bottom: ${theme.spacing(4)} !important;
@@ -21,7 +21,7 @@ const calcMarginStyles = (theme, gutterBottom) => {
     `;
     }
     return (0, styles_1.css) `
-    margin-bottom: ${theme.spacing(6)};
+    margin-bottom: ${theme.spacing(8)};
 
     ${theme.breakpoints.down('sm')} {
       margin-bottom: ${theme.spacing(4)};

package/node/components/FlowButton/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledGrid = exports.TargetTextWrapper = exports.StyledButton = void 0;
 const Button_1 = require("../Button");
 const Grid_1 = require("../Grid");
+const Loader_1 = require("../Loader");
 const styles_1 = require("../styles");
 const Typography_1 = require("../Typography");
 exports.StyledButton = (0, styles_1.styled)(Button_1.Button) `
@@ -19,6 +20,10 @@ exports.StyledButton = (0, styles_1.styled)(Button_1.Button) `
   ${({ theme: { breakpoints } }) => breakpoints.down('sm')} {
     padding: ${({ theme: { spacing } }) => spacing(4, 5)};
   }
+
+  &:has(.${Loader_1.loaderClassnames.root}) {
+    justify-content: center;
+  }
 `;
 exports.TargetTextWrapper = (0, styles_1.styled)(Typography_1.Typography) `
   margin-bottom: ${({ theme: { spacing } }) => spacing(1)};

package/node/components/NotFoundPage/styles.js

@@ -22,6 +22,7 @@ exports.Header = (0, styles_1.styled)(Typography_1.Typography) `
   }
 `;
 exports.Subheader = (0, styles_1.styled)(Typography_1.Typography) `
+  margin-top: ${({ theme }) => theme.spacing(-2)};
   margin-bottom: ${({ theme }) => theme.spacing(2)};
   ${({ theme }) => theme.breakpoints.down('sm')} {
     font-size: ${({ theme }) => theme.typography.subtitle1.fontSize};

package/node/components/theme/components/MuiLinearProgress.js

@@ -12,7 +12,7 @@ exports.MuiLinearProgress = {
         },
         barColorPrimary({ theme }) {
             return {
-                backgroundColor: theme.palette.primary['800'],
+                backgroundColor: theme.palette.success['600'],
             };
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.0.0-alpha.30",
+  "version": "4.0.0-alpha.31",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {