npm - docgen-tool - Versions diffs - 5.3.0 → 6.0.2 - Mend

docgen-tool 5.3.0 → 6.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/dist/app/app.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider } from '@tanstack/react-router';
+import { router } from './views/router.tsx';
+import './views/assets/styles/framework.css';
+const app = () => {
+  const rootElement = document.getElementById('root');
+  if (!rootElement) {
+    throw new Error('Root element not found');
+  }
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+};
+app();

package/dist/app/common/markdown/markdown.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/*
+  Quick-fix way to get the old markdown-it-admon implementation working still
+  in the new React SPA implementation (since we now use react-markdown on
+  the frontend and marked for the PDF pipeline, we need to preprocess
+  something that works with both. This could use a review and better
+  implementation later).
+ */
+export const preprocessAdmonitions = (markdown: string) => {
+  return markdown.replace(
+    /^!!!\s*(\w+)\s*(.*)\n((?: {4}.*\n?)+)/gm,
+    (_, type, title, content) => {
+      // remove 4-space indentation only from content lines
+      const cleanedContent = content
+        .split('\n')
+        .map((line) => line.replace(/^ {4}/, ''))
+        .join('\n');
+      // ensure blank line before/after content to preserve hr rendering
+      return `<div class="admonition ${type.toLowerCase()}">
+<p class="admonition-title">${title}</p>
+<p>${cleanedContent}</p>
+</div>
+`;
+    },
+  );
+};

package/dist/app/favicon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M149.086 35.874V99.7005L193.607 121.141L126.625 153.843V220.856L246.976 160.681C252.391 157.989 255.794 152.451 255.794 146.418V99.1436C255.794 93.1106 252.391 87.5725 246.976 84.8809L149.086 35.9359V35.874Z" fill="#010203"/>
+    <path d="M129.966 35.8715L9.6144 96.0472C4.20013 98.7388 0.796875 104.277 0.796875 110.31V157.584C0.796875 163.617 4.20013 169.155 9.6144 171.847L107.504 220.792V153.779L62.9836 132.338L129.966 99.6361V35.8096V35.8715Z" fill="#010203"/>
+</svg>

package/dist/app/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>%APP_TITLE%</title>
+  <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="app.tsx"></script>
+</body>
+</html>

package/dist/app/pdf/react-pdf/pdf-page/pdf-footer/pdf-footer.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, Text, StyleSheet } from '@react-pdf/renderer';
+const styles = StyleSheet.create({
+  footer: {
+    position: 'absolute',
+    bottom: 5,
+    left: 30,
+    right: 30,
+    height: 50,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderTopWidth: 1,
+    borderTopColor: 'black',
+    paddingTop: 10,
+  },
+  column: {
+    width: '33%',
+    textAlign: 'center',
+    fontSize: 10,
+  }
+});
+export const PdfFooter = ({parameters}) => (
+  <View style={styles.footer} fixed>
+    <Text style={styles.column}>{parameters.title}</Text>
+    <Text style={styles.column}>{`© ${parameters.year} ${parameters.name}`}</Text>
+    <Text
+      style={styles.column}
+      render={({ pageNumber, totalPages }) => (
+        `${pageNumber} / ${totalPages}`
+      )}
+    />
+  </View>
+);

package/dist/app/pdf/react-pdf/pdf-page/pdf-html-block/custom-renderers/custom-renderers.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React from 'react';
+//import path from 'path';
+import {
+  View,
+  Text,
+  Image,
+} from '@react-pdf/renderer';
+import * as cheerio from 'cheerio';
+/*
+  For "default" renderers in react-pdf-html, see
+  renderBlock: <View style={style}>{children}</View>
+  renderInline: <Text style={style}>{children}</Text>
+  (and renderers.tsx for more details)
+*/
+export const customRenderers = ({options}) => ({
+  div: (payload) => {
+    const {children, style, element} = payload;
+    const classNames = element.classList.toString();
+    if (classNames.includes("dgPDFPageBreak")) {
+      return <View break style={style}>{children}</View>;
+    }
+    return <View style={style}>{children}</View>;
+  },
+  pre: (payload) => {
+    const {children, element, style} = payload;
+    //strip and handle code blocks
+    const $ = cheerio.load(element.content.join());
+    const code = $('code');
+    if (code.length) {
+      return <Text style={style}>{code.text().trim()}</Text>;
+    }
+    return <Text style={style}>{children}</Text>;
+  },
+  // TODO: reinstate images without path
+  // img: (payload) => {
+  //   const {element, style} = payload;
+  //   const relativeSource = element.attributes.src;
+  //   //const source = path.join(options.input, relativeSource);
+  //   return <Image style={style} source={source} />;
+  // },
+});

package/dist/app/pdf/react-pdf/pdf-page/pdf-html-block/pdf-html-block.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import Html from 'react-pdf-html';
+import { fontSize, htmlStyleSheet } from '../../pdf-styles/pdf-styles.ts';
+import { customRenderers } from "./custom-renderers/custom-renderers.tsx";
+export const PdfHtmlBlock = ({
+  page,
+  options
+}) => {
+  return (
+    <Html
+      style={{ fontSize }}
+      stylesheet={htmlStyleSheet}
+      renderers={customRenderers({options})}
+    >
+      {page}
+    </Html>
+  );
+}

package/dist/app/pdf/react-pdf/pdf-page/pdf-page.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Page, View, StyleSheet } from '@react-pdf/renderer';
+import { PdfHtmlBlock } from "./pdf-html-block/pdf-html-block.tsx";
+import { PdfFooter } from './pdf-footer/pdf-footer.tsx';
+import { pdfStyleSheet } from '../pdf-styles/pdf-styles.ts';
+export const reactPdfStyles = StyleSheet.create(pdfStyleSheet);
+export const PdfPage = ({
+  page,
+  parameters,
+  options
+}) => {
+  return (
+    <Page size="A4" style={reactPdfStyles.page}>
+      <View>
+        <PdfHtmlBlock page={page} options={options} />
+      </View>
+      <PdfFooter parameters={parameters}/>
+    </Page>
+  )
+};

package/dist/app/pdf/react-pdf/pdf-styles/pdf-admonitions-styles.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import * as styles from '../../../style-variables/js/style-variables';
+const admonitionBaseStyle = {
+  padding: styles.SizeContentBlockPaddingPdf,
+  margin: styles.SizeContentBlockMarginPdf,
+};
+export const pdfAdmonitionsStyles = {
+  blockquote: {
+    ...admonitionBaseStyle,
+    backgroundColor: styles.ColorBackgroundNeutral,
+    borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderNeutral}`,
+    color: styles.ColorBorderNeutral,
+    fontStyle: 'italic',
+  },
+  ['.admonition']: admonitionBaseStyle,
+  ['.admonition-title']: {
+    margin: styles.SizeAdmonitionTitleMarginPdf,
+    fontWeight: 'bold',
+  },
+  ['.admonition.information']: {
+    backgroundColor: styles.ColorBackgroundInfo,
+    borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderInfo}`,
+  },
+  ['.admonition.success']: {
+    backgroundColor: styles.ColorBackgroundSuccess,
+    borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderSuccess}`,
+  },
+  ['.admonition.warning']: {
+    backgroundColor: styles.ColorBackgroundWarning,
+    borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderWarning}`,
+  },
+  ['.admonition.error']: {
+    backgroundColor: styles.ColorBackgroundError,
+    borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderError}`,
+  },
+};

package/dist/app/pdf/react-pdf/pdf-styles/pdf-docs-styles.ts ADDED Viewed

@@ -0,0 +1,94 @@
+// Todo: lift props to style dictionary
+export const docsStyleSheet = {
+  // Features cards
+  ['.banner h1']: {
+    fontFamily: 'space-grotesk',
+  },
+  ['.features']: {
+    padding: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    gap: 20,
+    margin: '0 0 0.5cm',
+  },
+  ['.features li']: {
+    listStyleType: 'none',
+    verticalAlign: 'top',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '5cm',
+    margin: '0.5cm 0.5cm 0 0',
+  },
+  ['.features li p']: {
+    margin: 0,
+    padding: '0 0 0.4cm 0',
+    textAlign: 'left',
+  },
+  ['.features li img']: {
+    alignSelf: 'flex-start',
+    height: '1cm',
+    objectFit: 'contain', // preserve aspect ratio
+    marginBottom: '0.4cm',
+  },
+  // Feature details container
+  ['.featureDetailsContainer']: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    gap: '0.5cm',
+    padding: '0.5cm 0',
+  },
+  ['.featureDetails']: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '7cm',
+  },
+  // How it works cards
+  ['.dgCardContainer']: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    gap: '0.5cm',
+  },
+  ['.dgCard']: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'left',
+    maxWidth: '5.5cm',
+  },
+  ['.dgCard img']: {
+    width: '5.5cm',
+    height: 'auto',
+    borderRadius: '0.1cm',
+  },
+  ['.dgCard p']: {
+    marginTop: '0.5cm',
+    wordWrap: 'break-word',
+  },
+  // Sponsor cards
+  ['.inkitSponsor']: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: '10 0',
+  },
+  ['.inkitText']: {
+    flex: 1,
+    justifyContent: 'left',
+  },
+  ['.inkitImage']: {
+    flex: 1,
+    alignItems: 'left',
+  },
+  ['.inkitImage img']: {
+    width: 200,
+    borderRadius: 8,
+  },
+};

package/dist/app/pdf/react-pdf/pdf-styles/pdf-styles.ts ADDED Viewed

@@ -0,0 +1,154 @@
+import * as styles from '../../../style-variables/js/style-variables';
+import { docsStyleSheet } from './pdf-docs-styles.ts';
+import { pdfAdmonitionsStyles } from './pdf-admonitions-styles.ts';
+import { pdfTableStyles } from './pdf-table-styles.js';
+export const fontSize = 10;
+export const pdfStyleSheet = {
+  page: {
+    paddingTop: 35,
+    paddingBottom: 65,
+    paddingHorizontal: 35,
+    fontSize,
+    fontFamily: 'archivo',
+  },
+};
+export const em = (em: number, relativeSize: number = fontSize) =>
+  em * relativeSize;
+const styleInfo = {
+  color: styles.ColorTextInfo,
+  backgroundColor: styles.ColorBackgroundInfo,
+  borderLeft: `5px solid ${styles.ColorBorderInfo}`,
+  padding: styles.SizeMessagePadding,
+  marginLeft: 0,
+  marginRight: 0,
+};
+/*
+  See also the base styles set by react-pdf-html, which are being overridden here
+  https://github.com/danomatic/react-pdf-html/blob/main/src/styles.ts
+ */
+export const htmlStyleSheet = {
+  'h1, h2, h3, h4, h5, h6': {
+    fontWeight: 'bold',
+  },
+  h1: {
+    fontSize: styles.SizeFontH1Pdf,
+    marginVertical: em(0.67, em(2)),
+  },
+  h2: {
+    fontSize: styles.SizeFontH2Pdf,
+    marginVertical: em(0.83, em(1.5)),
+  },
+  h3: {
+    fontSize: styles.SizeFontH3Pdf,
+    marginVertical: em(1, em(1.17)),
+  },
+  h4: {
+    fontSize: styles.SizeFontH4Pdf,
+    marginVertical: em(1.33, em(1)),
+  },
+  h5: {
+    fontSize: styles.SizeFontH5Pdf,
+    marginVertical: em(1.67, em(0.83)),
+  },
+  h6: {
+    fontSize: styles.SizeFontH6Pdf,
+    marginVertical: em(2.33, em(0.67)),
+  },
+  p: {
+    color: styles.ColorText,
+    fontSize: em(1),
+    marginVertical: em(1),
+  },
+  hr: {
+    marginVertical: em(0.5),
+    borderBottomWidth: 1,
+    borderBottomColor: '#000',
+  },
+  address: {
+    fontStyle: 'italic',
+  },
+  pre: {
+    fontSize: '10pt',
+    fontFamily: 'space-mono',
+    backgroundColor: '#f5f5f5',
+    color: '#333333',
+    borderRadius: '4pt',
+    padding: '8pt',
+    borderLeft: '4pt solid #cccccc',
+    marginVertical: em(1),
+    whiteSpace: 'pre-wrap',
+  },
+  b: {
+    fontWeight: 'bold',
+  },
+  strong: {
+    fontWeight: 'bold',
+  },
+  i: {
+    fontStyle: 'italic',
+  },
+  em: {
+    fontStyle: 'italic',
+  },
+  s: {
+    textDecoration: 'line-through',
+  },
+  u: {
+    textDecoration: 'underline',
+  },
+  cite: {
+    fontStyle: 'italic',
+  },
+  code: {
+    fontFamily: 'space-mono',
+  },
+  a: {
+    textDecoration: 'underline',
+  },
+  ul: {
+    marginVertical: em(1),
+  },
+  ol: {
+    marginVertical: em(1),
+  },
+  li: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  li_bullet: {
+    width: 30,
+    textAlign: 'right',
+    flexShrink: 0,
+    flexGrow: 0,
+    paddingRight: 5,
+  },
+  li_content: {
+    textAlign: 'left',
+    flexGrow: 1,
+    flexBasis: 1,
+  },
+  thead: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  tbody: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  tr: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexShrink: 1,
+  },
+  ['.button']: {
+    textAlign: 'center',
+  },
+  ...pdfAdmonitionsStyles,
+  ...pdfTableStyles,
+  ...docsStyleSheet,
+};

package/dist/app/pdf/react-pdf/pdf-styles/pdf-table-styles.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import * as styles from '../../../style-variables/js/style-variables';
+const tableCellStyle = {
+  padding: styles.SizeTableCellPaddingPdf,
+  border: `${styles.SizeBorderWidthPdf} solid ${styles.ColorBorder}`,
+};
+const tableHeaderFooterStyle = {
+  ...tableCellStyle,
+  backgroundColor: styles.ColorTableBackgroundHeaderFooterPdf,
+  fontWeight: 'bold',
+};
+export const pdfTableStyles = {
+  table: {
+    border: '1px solid #ccc',
+  },
+  td: tableCellStyle,
+  th: tableHeaderFooterStyle,
+  ['tfoot td']: tableHeaderFooterStyle,
+};

package/dist/app/pdf/react-pdf/react-pdf.tsx ADDED Viewed

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { Document, Font } from '@react-pdf/renderer';
+import { PdfPage } from './pdf-page/pdf-page.tsx';
+import { marked } from 'marked';
+import archivoRegular from '../../views/assets/styles/fonts/archivo-regular.ttf';
+import archivoItalic from '../../views/assets/styles/fonts/archivo-italic.ttf';
+import archivo600 from '../../views/assets/styles/fonts/archivo-600.ttf';
+import archivo600Italic from '../../views/assets/styles/fonts/archivo-600-italic.ttf';
+import spaceGroteskRegular from '../../views/assets/styles/fonts/space-grotesk-regular.ttf';
+import spaceGrotesk600 from '../../views/assets/styles/fonts/space-grotesk-600.ttf';
+import spaceMonoRegular from '../../views/assets/styles/fonts/space-mono-regular.ttf';
+import spaceMonoItalic from '../../views/assets/styles/fonts/space-mono-italic.ttf';
+import spaceMono700 from '../../views/assets/styles/fonts/space-mono-700.ttf';
+import spaceMono700Italic from '../../views/assets/styles/fonts/space-mono-700-italic.ttf';
+import type { TParameters, TSortedPages, TSection } from '../../../docgen/types.ts';
+import { preprocessAdmonitions } from '../../common/markdown/markdown.ts';
+declare const __BASE_PATH__: string;
+Font.register({
+  family: 'archivo',
+  fonts: [
+    { src: archivoRegular, fontStyle: 'normal', fontWeight: 400 },
+    { src: archivoItalic, fontStyle: 'italic', fontWeight: 400 },
+    { src: archivo600, fontStyle: 'normal', fontWeight: 600 },
+    { src: archivo600Italic, fontStyle: 'italic', fontWeight: 600 },
+  ],
+});
+Font.register({
+  family: 'space-grotesk',
+  fonts: [
+    { src: spaceGroteskRegular, fontStyle: 'normal', fontWeight: 400 },
+    { src: spaceGrotesk600, fontStyle: 'normal', fontWeight: 600 },
+  ],
+});
+Font.register({
+  family: 'space-mono',
+  fonts: [
+    { src: spaceMonoRegular, fontStyle: 'normal', fontWeight: 400 },
+    { src: spaceMonoItalic, fontStyle: 'italic', fontWeight: 400 },
+    { src: spaceMono700, fontStyle: 'normal', fontWeight: 700 },
+    { src: spaceMono700Italic, fontStyle: 'italic', fontWeight: 700 },
+  ],
+});
+type PdfProps = {
+  parameters: TParameters;
+  options: any;
+  sortedPages: TSortedPages;
+};
+// Async loader for PDF pages
+const loadPdfPages = async (sortedPages: any): Promise<Record<string, string>> => {
+  const pages: Record<string, string> = {};
+  const sources = Object.values(sortedPages)
+    .flatMap((columns: TSection) =>
+      columns.flatMap((section) => section.pages.map((p: any) => p.source)),
+    );
+  await Promise.all(
+    sources.map(async (filename) => {
+      const url = `${__BASE_PATH__}${filename}`;
+      try {
+        const res = await fetch(url);
+        pages[filename] = res.ok ? await res.text() : `Error loading ${filename}: ${res.status}`;
+      } catch (err) {
+        pages[filename] = `Error loading ${filename}: ${err}`;
+      }
+    }),
+  );
+  return pages;
+};
+export const Pdf = ({ parameters, options, sortedPages }: PdfProps) => {
+  const [pages, setPages] = useState<Record<string, string>>({});
+  useEffect(() => {
+    const fetchPages = async () => {
+      const loaded = await loadPdfPages(sortedPages);
+      setPages(loaded);
+    };
+    fetchPages();
+  }, [sortedPages]);
+  const allSources = Object.values(sortedPages)
+    .flatMap((columns) =>
+      columns.flatMap((section) => section.pages.map((p: any) => p.source)),
+    );
+  return (
+    <Document>
+      {allSources.map((source, i) => {
+        const html = marked(preprocessAdmonitions(pages[source] || ''));
+        return (
+          <PdfPage key={i} page={html} parameters={parameters} options={options} />
+        );
+      })}
+    </Document>
+  );
+};

package/dist/app/style-variables/css/style-variables.css ADDED Viewed

@@ -0,0 +1,80 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --color-primary: rgb(46, 113, 225);
+  --color-primary-light: rgb(222, 232, 252);
+  --color-primary-dark: rgb(22, 71, 193);
+  --color-background-light: #fff;
+  --color-background-success: #e8f5e9;
+  --color-background-error: #ffebee;
+  --color-background-warning: #fff8e1;
+  --color-background-info: rgb(222, 232, 252);
+  --color-background-neutral: #f5f5f5;
+  --color-border: #999;
+  --color-border-success: #4caf50;
+  --color-border-error: #f44336;
+  --color-border-warning: #ff9800;
+  --color-border-info: #81a7f4;
+  --color-border-neutral: #9e9e9e;
+  --color-text: rgb(1, 3, 4);
+  --color-text-light: #bbb;
+  --color-text-neutral: #333;
+  --color-text-success: #2ab100;
+  --color-text-error: #c20000;
+  --color-text-warning: #b28900;
+  --color-text-info: #0a2a6b;
+  --color-text-link: rgb(1, 3, 4);
+  --color-text-link-hover: #4a72c1;
+  --color-text-link-active: #4b91ff;
+  --color-text-link-visited: #808080;
+  --color-button-border: 2px solid rgb(46, 113, 225);
+  --color-button-border-inverted: 2px solid rgb(46, 113, 225);
+  --color-button-background: rgb(46, 113, 225);
+  --color-button-background-hover: #0042b4;
+  --color-button-background-inverted: #fff;
+  --color-button-text: #fff;
+  --color-button-text-inverted: rgb(46, 113, 225);
+  --color-button-shadow: none;
+  --color-table-background: #eee;
+  --color-table-background-header-footer: #ddd;
+  --color-table-background-header-footer-pdf: #eee;
+  --size-border-width: 1px;
+  --size-border-width-pdf: 0.8pt;
+  --size-button-base: 42px;
+  --size-font-base: 16px;
+  --size-font-small: 12px;
+  --size-font-medium: 16px;
+  --size-font-large: 24px;
+  --size-font-h1: 2rem;
+  --size-font-h1-pdf: 24pt;
+  --size-font-h2: 1.5rem;
+  --size-font-h2-pdf: 20pt;
+  --size-font-h3: 1.25rem;
+  --size-font-h3-pdf: 18pt;
+  --size-font-h4: 1rem;
+  --size-font-h4-pdf: 16pt;
+  --size-font-h5: 0.875rem;
+  --size-font-h5-pdf: 14pt;
+  --size-font-h6: 0.75rem;
+  --size-font-h6-pdf: 12pt;
+  --size-line-height: 26px;
+  --size-table-cell-padding: 2px 15px;
+  --size-table-cell-padding-pdf: 2mm 2mm;
+  --size-content-block-margin: 1.5em 0;
+  --size-content-block-margin-pdf: 2mm 0;
+  --size-content-block-padding: 0.8rem 1rem;
+  --size-content-block-padding-pdf: 1mm 4mm;
+  --size-admonition-border-left: 4px;
+  --size-admonition-border-left-pdf: 1mm;
+  --size-admonition-border-radius: 4px;
+  --size-admonition-title-margin: 0.1em 0 0;
+  --size-admonition-title-margin-pdf: 3mm 0 0;
+  --size-message-padding: 20px 30px;
+  --size-message-border-radius: 2px;
+  --size-header-height: 80px;
+  --size-side-bar-width: 330px;
+  --size-side-bar-min-width: 40px;
+  --size-side-bar-padding: 5px;
+}