@astral/ui 4.55.4 → 4.56.0

package/components/Tree/TreeItem/styles.js

@@ -32,7 +32,7 @@ export const Item = styled('li', {
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 export const ItemContent = styled('div', {
@@ -130,8 +130,8 @@ export const LabelWrapper = styled('div', {
     /* Добавляем к высоте половину нижнего отступа, который не входит в высоту текущего элемента */
     height: ${({ theme }) => `calc(50% + ${theme.spacing(1)}/2)`};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 `;

package/components/fileUploading/FileUploaderDropzone/DropzoneWrapper/styles.js

@@ -6,7 +6,7 @@ const getBorderColor = (theme, isActive, isError) => {
     if (isError) {
         return theme.palette.error[900];
     }
-    return theme.palette.grey[400];
+    return theme.palette.components.border.default;
 };
 export const Wrapper = styled.div `
   display: flex;

package/components/fileUploading/FileUploaderFile/styles.js

@@ -6,7 +6,7 @@ const getBorderColor = (theme, isLoading, isError) => {
     if (isError) {
         return theme.palette.error[400];
     }
-    return theme.palette.grey[200];
+    return theme.palette.components.border.default;
 };
 export const Wrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isLoading', '$isError'].includes(prop),

package/components/theme/components/MuiButton.js

@@ -77,7 +77,7 @@ const getBorder = ({ theme, variant, color, buttonState, selected, disabled, })
         return `1px solid ${theme.palette[color]['900']};`;
     }
     if (buttonState === 'default') {
-        return `1px solid ${theme.palette[color]['300']};`;
+        return `1px solid ${color === 'grey' ? theme.palette.components.border.default : theme.palette[color]['300']};`;
     }
     if (buttonState === 'hover') {
         return `1px solid ${theme.palette[color]['700']};`;

package/components/theme/components/MuiDivider.d.ts

@@ -0,0 +1,3 @@
+import { type Components } from '@mui/material/styles/components';
+import { type Theme } from '../types';
+export declare const MuiDivider: Components<Theme>['MuiDivider'];

package/components/theme/components/MuiDivider.js

@@ -0,0 +1,9 @@
+export const MuiDivider = {
+    styleOverrides: {
+        root({ theme }) {
+            return {
+                borderColor: theme.palette.components.border.default,
+            };
+        },
+    },
+};

package/components/theme/components/MuiListItem.d.ts

@@ -0,0 +1,3 @@
+import { type Components } from '@mui/material/styles/components';
+import { type Theme } from '../types';
+export declare const MuiListItem: Components<Theme>['MuiListItem'];

package/components/theme/components/MuiListItem.js

@@ -0,0 +1,9 @@
+export const MuiListItem = {
+    styleOverrides: {
+        divider({ theme }) {
+            return {
+                borderColor: theme.palette.components.border.default,
+            };
+        },
+    },
+};

package/components/theme/components/MuiOutlinedInput.js

@@ -51,7 +51,7 @@ export const MuiOutlinedInput = {
                 },
                 '&::placeholder': {
                     opacity: 1,
-                    color: theme.palette.grey[400],
+                    color: theme.palette.grey[500],
                 },
             };
         },
@@ -64,7 +64,7 @@ export const MuiOutlinedInput = {
         notchedOutline({ theme }) {
             return {
                 borderWidth: 1,
-                borderColor: theme.palette.grey[300],
+                borderColor: theme.palette.components.border.default,
                 top: 0,
                 transition: theme.transitions.create(['border-color'], {
                     easing: theme.transitions.easing.easeInOut,

package/components/theme/components/MuiPaper.js

@@ -24,7 +24,7 @@ export const MuiPaper = {
         },
         outlined({ theme }) {
             return {
-                border: `1px solid ${theme.palette.grey[300]}`,
+                border: `1px solid ${theme.palette.components.border.default}`,
             };
         },
     },

package/components/theme/components/MuiStepConnector.js

@@ -4,7 +4,10 @@ export const MuiStepConnector = {
             return { top: theme.microSpacing(5) };
         },
         lineHorizontal({ theme }) {
-            return { borderTopWidth: 2, borderColor: theme.palette.grey[300] };
+            return {
+                borderTopWidth: 2,
+                borderColor: theme.palette.components.border.default,
+            };
         },
     },
 };

package/components/theme/components/components.js

@@ -7,12 +7,14 @@ import { MuiDialog } from './MuiDialog';
 import { MuiDialogActions } from './MuiDialogActions';
 import { MuiDialogContent } from './MuiDialogContent';
 import { MuiDialogTitle } from './MuiDialogTitle';
+import { MuiDivider } from './MuiDivider';
 import { MuiDrawer } from './MuiDrawer';
 import { MuiFormControlLabel } from './MuiFormControlLabel';
 import { MuiFormHelperText } from './MuiFormHelperText';
 import { MuiFormLabel } from './MuiFormLabel';
 import { MuiInputLabel } from './MuiInputLabel';
 import { MuiLinearProgress } from './MuiLinearProgress';
+import { MuiListItem } from './MuiListItem';
 import { MuiListItemButton } from './MuiListItemButton';
 import { MuiListItemText } from './MuiListItemText';
 import { MuiListSubheader } from './MuiListSubheader';
@@ -49,6 +51,7 @@ export const getComponents = () => {
         MuiAlert,
         MuiButton,
         MuiButtonBase,
+        MuiDivider,
         MuiTypography,
         MuiInputLabel,
         MuiOutlinedInput,
@@ -72,6 +75,7 @@ export const getComponents = () => {
         MuiPaginationItem,
         MuiPaper,
         MuiCircularProgress,
+        MuiListItem,
         MuiListItemButton,
         MuiListItemText,
         MuiLinearProgress,

package/components/theme/palette/componentsColors/componentsColors.d.ts

@@ -3,5 +3,8 @@ export type ComponentsColors = {
     link: LinkColors;
     focused: string;
     disabled: string;
+    border: {
+        default: string;
+    };
 };
 export declare const componentsColors: ComponentsColors;

package/components/theme/palette/componentsColors/componentsColors.js

@@ -3,4 +3,7 @@ export const componentsColors = {
     link: linkColors,
     focused: '#70AEFF',
     disabled: '#F1F1F1',
+    border: {
+        default: '#C7C7C7',
+    },
 };

package/node/components/BottomDrawer/styles.js

@@ -33,7 +33,7 @@ exports.Header = styled_1.styled.header `
   height: ${({ drawerHeaderHeight }) => `${drawerHeaderHeight}px`};
   padding: ${({ theme }) => theme.spacing(1, 2, 1, 4)};
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 exports.HeaderTitle = (0, styled_1.styled)(Typography_1.default) `
   margin-right: ${({ theme }) => theme.spacing(2)};

package/node/components/CardGridInfinite/Footer/styles.js

@@ -12,7 +12,7 @@ exports.Wrapper = styled_1.styled.footer `
   max-height: 76px;
   margin-top: ${({ theme }) => theme.spacing(4)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 exports.FooterDummy = styled_1.styled.div `
   min-height: 20px;

package/node/components/CheckableTag/styles.js

@@ -89,7 +89,7 @@ const getBorder = ({ isChecked, variant, color, theme, disabled, tagState = 'def
     if (tagState === 'default') {
         `1px solid ${theme.palette.grey[600]}`;
     }
-    return `1px solid ${theme.palette.grey[400]}`;
+    return `1px solid ${theme.palette.components.border.default}`;
 };
 exports.Wrapper = styled_1.styled.label `
   width: fit-content;

package/node/components/Checkbox/styles.js

@@ -6,7 +6,7 @@ const mixins_1 = require("../styled/mixins");
 const constants_1 = require("./constants");
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isIndeterminate, }) => {
     if (isDisabled) {
-        return theme.palette.grey[300];
+        return theme.palette.components.border.default;
     }
     if (isError) {
         return isHover ? theme.palette.error[700] : theme.palette.error[800];
@@ -14,7 +14,9 @@ const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isInd
     if (isChecked || isIndeterminate) {
         return isHover ? theme.palette.primary[700] : theme.palette.primary[800];
     }
-    return isHover ? theme.palette.grey[900] : theme.palette.grey[300];
+    return isHover
+        ? theme.palette.grey[900]
+        : theme.palette.components.border.default;
 };
 exports.Wrapper = (0, styled_1.styled)('span', {
     shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked', '$isIndeterminate'].includes(prop),

package/node/components/Chip/styles.js

@@ -17,7 +17,7 @@ exports.Wrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(0, 2)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {

package/node/components/CodeField/styles.js

@@ -10,7 +10,7 @@ const getBorder = (theme, isDisabled, isError) => {
     }
     return isError
         ? `1px solid ${theme.palette.error[800]}`
-        : `1px solid ${theme.palette.grey[300]};`;
+        : `1px solid ${theme.palette.components.border.default};`;
 };
 exports.Wrapper = styled_1.styled.div `
   display: flex;

package/node/components/ComplianceStatus/styles.js

@@ -40,7 +40,7 @@ exports.Wrapper = styled_1.styled.article `
   &.${constants_1.complianceStatusClassnames.outlined} {
     padding: ${({ theme }) => theme.spacing(3)};
 
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.Inner = (0, styled_1.styled)('ul') `

package/node/components/DashboardLayout/DashboardWrapper/styles.js

@@ -22,7 +22,7 @@ exports.DecorativeHeaderBackground = styled_1.styled.div `
   height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_1.HEADER_HEIGHT_DESKTOP)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   transition: ${({ theme }) => {
     return theme.transitions.create(['height'], {

package/node/components/DashboardLayout/Header/styles.js

@@ -45,7 +45,7 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     transition: unset;
   }
@@ -160,14 +160,14 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
         height: ${constants_3.MOBILE_BUTTON_HEIGHT};
         padding: ${({ theme }) => theme.spacing(3, 4)};
 
-        border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
         &:hover {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
         }
 
         &:active {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
         }
       }
 

package/node/components/DashboardLayoutSkeleton/styles.js

@@ -9,7 +9,7 @@ exports.Content = styled_1.styled.div `
   min-height: 0;
 
   background-color: ${({ theme }) => theme.palette.common.white};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/DashboardSidebar/styles.js

@@ -88,7 +88,7 @@ exports.SidebarHeader = styled_1.styled.header `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     /* Причина игнора: Не критично для отображения */
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -151,7 +151,7 @@ exports.Footer = styled_1.styled.footer `
   margin-top: auto;
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
   border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
   

package/node/components/DashboardSidebarSkeleton/styles.js

@@ -15,7 +15,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
   padding: ${({ theme, $isPinned }) => $isPinned ? theme.spacing(4, 3) : theme.spacing(4, 2)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

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

@@ -12,7 +12,7 @@ exports.Wrapper = (0, styled_1.styled)('header', {
   width: fit-content;
   min-width: 100%;
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 exports.CheckboxCell = styled_1.styled.div `
   display: flex;

package/node/components/DataGrid/PinnedSections/Section/styles.js

@@ -43,7 +43,7 @@ exports.DataGridSection = styled_1.styled.div `
 
       height: 100%;
 
-      border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-right: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${constants_1.dataGridClassnames.header} {
@@ -82,7 +82,7 @@ exports.DataGridSection = styled_1.styled.div `
 
       height: 100%;
 
-      border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${constants_1.dataGridClassnames.header} {

package/node/components/DataGrid/Row/NestedChildren/styles.js

@@ -27,7 +27,7 @@ exports.NestedRows = (0, styled_1.styled)('ul', {
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.MoreButtonRow = (0, styled_1.styled)('li', {
@@ -53,8 +53,8 @@ exports.MoreButtonRow = (0, styled_1.styled)('li', {
     width: ${constants_1.TREE_LINE_WIDTH}px;
     height: 50%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 `;

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

@@ -24,7 +24,7 @@ exports.Wrapper = styled_1.styled.li `
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.ContentWrapper = styled_1.styled.div `
@@ -47,8 +47,8 @@ exports.ContentWrapper = styled_1.styled.div `
     width: ${constants_1.TREE_LINE_WIDTH}px;
     height: 50%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 

package/node/components/DateRangePicker/styles.js

@@ -32,5 +32,5 @@ exports.PickerSplitter = styled_1.styled.div `
   margin: ${({ theme }) => theme.spacing(-3, 4)};
 
   border-left: 1px solid
-    ${({ theme }) => theme.palette.grey[300]};
+    ${({ theme }) => theme.palette.components.border.default};
 `;

package/node/components/Description/Name/styles.js

@@ -18,7 +18,7 @@ exports.DashedSeparator = styled_1.styled.div `
   height: 4px;
   margin-right: ${({ theme }) => theme.spacing(2)};
 
-  border-bottom: 1px dashed ${({ theme }) => theme.palette.grey[400]};
+  border-bottom: 1px dashed ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;

package/node/components/DescriptionList/styles.js

@@ -24,7 +24,7 @@ exports.Wrapper = styled_1.styled.article `
     padding: ${({ theme }) => theme.spacing(4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.ListWrapper = (0, styled_1.styled)('dl', {
@@ -36,7 +36,9 @@ exports.ListWrapper = (0, styled_1.styled)('dl', {
   margin: 0;
   padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(4, 0) : theme.spacing(3, 0)};
 
-  border-top: ${({ $hasDivider, theme }) => $hasDivider ? `1px solid ${theme.palette.grey[300]}` : 'none'};
+  border-top: ${({ $hasDivider, theme }) => $hasDivider
+    ? `1px solid ${theme.palette.components.border.default}`
+    : 'none'};
 
   &:first-of-type {
     padding-top: 0;

package/node/components/ExpansionPanel/styles.js

@@ -9,7 +9,7 @@ exports.Wrapper = (0, styled_1.styled)('details') `
 
   width: 100%;
   
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
   
   /* Причина игнора: Не критично для отображения */

package/node/components/InfiniteDataList/styles.js

@@ -25,7 +25,7 @@ exports.Item = styled_1.styled.li `
     ${({ theme }) => theme.breakpoints.down('sm')} {
       padding: ${({ theme }) => theme.spacing(5, 4)};
 
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
   }
 `;

package/node/components/InfiniteTreeList/TreeItem/styles.js

@@ -44,7 +44,7 @@ exports.Wrapper = styled_1.styled.div `
   margin-top: ${({ theme }) => theme.spacing(1)};
   margin-left: ${({ $level }) => `calc(${$level} * 20px)`};
 
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
   
   &.${constants_1.infiniteTreeListClassnames.addAnimation} {

package/node/components/MenuOrganization/styles.js

@@ -13,7 +13,7 @@ const constants_2 = require("./constants");
 exports.ActionWrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(2)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
@@ -23,7 +23,7 @@ exports.SearchWrapper = styled_1.styled.div `
   max-width: 300px;
   padding: ${({ theme }) => theme.spacing(2, 3)};
 
-  border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey['300']}`};
+  border-bottom: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     max-width: unset;

package/node/components/NewStepper/Step/Description/styles.js

@@ -11,7 +11,7 @@ exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
 
   text-align: start;
 
-  border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin-bottom: 0;

package/node/components/NewStepper/Step/styles.js

@@ -192,7 +192,7 @@ exports.LineConnector = styled_1.styled.div `
 
   height: 2px;
 
-  border-top: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
   &.${constants_4.stepClassnames.alternativeLabel} {
     position: absolute;
@@ -208,7 +208,7 @@ exports.LineConnector = styled_1.styled.div `
     margin-left: 9px;
 
     border-top: unset;
-    border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+    border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
       margin-left: 11px;

package/node/components/PageAside/styles.js

@@ -11,8 +11,8 @@ exports.Wrapper = styled_1.styled.aside `
   width: ${constants_1.PAGE_ASIDE_WIDTH};
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding: ${({ theme }) => theme.spacing(4)};
@@ -26,7 +26,7 @@ exports.Wrapper = styled_1.styled.aside `
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};  
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;

package/node/components/PageContent/PageContentHeader/styles.js

@@ -10,13 +10,13 @@ exports.Wrapper = styled_1.styled.header `
 
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
       margin: ${({ theme }) => theme.spacing(0, 4)};
 
       background-color: ${({ theme }) => theme.palette.background.default};
-      border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border: 1px solid ${({ theme }) => theme.palette.components.border.default};
       border-bottom: none;
       border-top-left-radius: ${({ theme }) => theme.shape.medium};
       border-top-right-radius: ${({ theme }) => theme.shape.medium};

package/node/components/PageContent/styles.js

@@ -20,7 +20,9 @@ exports.Wrapper = (0, styled_1.styled)('article', {
   grid-row: 2;
   flex-direction: column;
 
-  border-top: ${({ $isSeparatorShown, theme }) => $isSeparatorShown ? `1px solid ${theme.palette.grey[300]}` : 'none'};
+  border-top: ${({ $isSeparatorShown, theme }) => $isSeparatorShown
+    ? `1px solid ${theme.palette.components.border.default}`
+    : 'none'};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: unset;
@@ -78,7 +80,7 @@ exports.Content = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
 
     /* Причина игнора: Не критично для отображения */

package/node/components/PageHeader/HeaderContent/styles.js

@@ -21,7 +21,7 @@ exports.PageSubheader = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.DesktopTitleWrapper = styled_1.styled.div `

package/node/components/PageHeader/styles.js

@@ -44,7 +44,7 @@ exports.Wrapper = styled_1.styled.header `
     }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
   }
 
@@ -82,7 +82,7 @@ exports.MobileTitleWrapper = styled_1.styled.div `
       .${constants_1.pageHeaderClassnames.filters},
       .${constants_1.pageHeaderClassnames.subheader}
     ))) {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 

package/node/components/PageLayoutLoader/styles.js

@@ -6,7 +6,7 @@ exports.Wrapper = styled_1.styled.div `
   height: 100%;
 
   background-color: ${({ theme }) => theme.palette.common.white};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -17,7 +17,7 @@ exports.SectionContainer = styled_1.styled.div `
   &.${constants_1.pageLayoutSectionContainerClassnames.withAside} {
     padding-top: ${({ theme }) => theme.spacing(4)};
 
-    border-top: ${({ theme }) => `1px solid ${theme.palette.grey[300]}`};
+    border-top: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
   }
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {