Merge branch 'feature/css-vars-colors' into main (#108)

ekaterinburgdev · Dec 12, 2023 · fdb9cb0 · fdb9cb0
2 parents 3fcd296 + c6e32a3
commit fdb9cb0
Show file tree

Hide file tree

Showing 31 changed files with 345 additions and 485 deletions.
diff --git a/components/ArrowNavLink/ArrowNavLink.jsx b/components/ArrowNavLink/ArrowNavLink.jsx
@@ -5,14 +5,7 @@ import tp from '../../utils/typograf/typograf.config'
 
 import styles from './arrow.module.css'
 
-export function ArrowNavLink({
-    nextPageIndex,
-    tableOfContentArr,
-    pageUrl,
-    catalogIndex,
-    color,
-    textDecoration,
-}) {
+export function ArrowNavLink({ nextPageIndex, tableOfContentArr, pageUrl, catalogIndex }) {
     let href = {
         pathname: '/[[...pageUrl]]',
         query: { pageUrl: [] },
@@ -30,17 +23,12 @@ export function ArrowNavLink({
     }
 
     return (
-        <Link style={{ color }} className={cn(styles.arrowNavLink)} href={href}>
+        <Link className={cn(styles.arrowNavLink)} href={href}>
             <span className={cn(styles.arrowNavLinkNext)}>Далее</span>
 
             <br />
 
-            <span
-                className={cn(styles.arrowNavLinkNextText)}
-                style={{ textDecorationColor: textDecoration }}
-            >
-                {tp.execute(title)}
-            </span>
+            <span className={cn(styles.arrowNavLinkNextText)}>{tp.execute(title)}</span>
         </Link>
     )
 }
diff --git a/components/ArrowNavLink/arrow.module.css b/components/ArrowNavLink/arrow.module.css
@@ -6,6 +6,7 @@
     font-weight: 400;
     font-size: clamp(14px,1.8vw,18px);
     transition: .3s;
+    color: var(--color);
     z-index: 11;
 }
 

diff --git a/components/CSSVarsColors/CSSVarsColors.jsx b/components/CSSVarsColors/CSSVarsColors.jsx
@@ -0,0 +1,11 @@
+import { getCSSVarsColors } from '../../utils/getCSSVarsColors'
+
+export function CSSVarsColors({ color }) {
+    const inlineStyle = Object.entries(getCSSVarsColors(color))
+        .map(([prop, value]) => {
+            return `${prop}: ${value}`
+        })
+        .join(';')
+
+    return <style dangerouslySetInnerHTML={{ __html: `:root { ${inlineStyle} }` }} />
+}
diff --git a/components/CommonLinks/CommonLinks.jsx b/components/CommonLinks/CommonLinks.jsx
diff --git a/components/Ecosystem/Ecosystem.jsx b/components/Ecosystem/Ecosystem.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { ProjectsPanel, PROJECT_GUIDES, PRODUCTION_PROJECTS, Theme } from 'ekb'
+
+import styles from './Ecosystem.module.css'
+
+export function Ecosystem() {
+    return (
+        <div className={styles.Ecosystem}>
+            <ProjectsPanel
+                projects={[PROJECT_GUIDES, ...PRODUCTION_PROJECTS]}
+                activeProjectId={PROJECT_GUIDES.id}
+                theme={Theme.LIGHT}
+                toggleStyle={{
+                    backgroundColor: `var(--ecosystem-color)`,
+                    width: 'var(--ecosystem-width)',
+                }}
+                style={{
+                    left: '8px',
+                    bottom: '8px',
+                    fontFamily: 'inherit',
+                    fontWeight: '400',
+                }}
+            />
+        </div>
+    )
+}
diff --git a/components/Ecosystem/Ecosystem.module.css b/components/Ecosystem/Ecosystem.module.css
@@ -0,0 +1,4 @@
+.Ecosystem {
+    --ecosystem-width: calc(var(--sidebar-width) - 88px);
+    --ecosystem-color: var(--color-bg-light);
+}
diff --git a/components/HamburgerMenu/HamburgerMenu.jsx b/components/HamburgerMenu/HamburgerMenu.jsx
@@ -1,37 +1,25 @@
 import React from 'react'
 import cn from 'classnames'
-import { useRouter } from 'next/router'
 
 import styles from './menu.module.css'
-import getManualColorScheme from '../../utils/getManualColorScheme'
 
-function HamburgerMenu({ state, changeState, colorMap }) {
-    const { asPath } = useRouter()
+function HamburgerMenu({ state, changeState }) {
     const burgerMenuClassNames = cn(styles['hamburger-menu'], { [styles.opened]: state })
-    const color = colorMap.filter((item) => asPath.includes(item.url))[0]?.color
-    const colorScheme = getManualColorScheme(color)
 
     return (
         <button
-            style={{ backgroundColor: colorScheme.bgLight }}
             type="button"
             className={burgerMenuClassNames}
             onClick={() => changeState(!state)}
             aria-label="Оглавление"
         >
             <svg width="100" height="100" viewBox="0 0 100 100">
                 <path
-                    style={{ stroke: colorScheme.title }}
                     className={cn(styles.line, styles.line1)}
                     d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
                 />
+                <path className={cn(styles.line, styles.line2)} d="M 20,50 H 80" />
                 <path
-                    style={{ stroke: colorScheme.title }}
-                    className={cn(styles.line, styles.line2)}
-                    d="M 20,50 H 80"
-                />
-                <path
-                    style={{ stroke: colorScheme.title }}
                     className={cn(styles.line, styles.line3)}
                     d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
                 />

diff --git a/components/MainPage/MainPage.jsx b/components/MainPage/MainPage.jsx
@@ -4,10 +4,11 @@ import Image from 'next/image'
 import ManualPreview from '../ManualPreview/ManualPreview'
 
 import mainPageLogo from './MainPageLogo.svg'
-import styles from './MainPage.module.css'
-import { CommonLinks } from '../CommonLinks/CommonLinks'
+import { Ecosystem } from '../Ecosystem/Ecosystem'
 import { MainPageToolbar } from '../Toolbar/MainPageToolbar'
 
+import styles from './MainPage.module.css'
+
 export default function MainPage({ pageTitle, manualsPreview }) {
     return (
         <>
@@ -26,7 +27,7 @@ export default function MainPage({ pageTitle, manualsPreview }) {
                         />
                     ))}
                 </section>
-                <CommonLinks mainPage={true} />
+                <Ecosystem mainPage />
                 <MainPageToolbar />
             </main>
         </>

diff --git a/components/ManualPage/ManualPage.jsx b/components/ManualPage/ManualPage.jsx
@@ -1,7 +1,5 @@
-import React, { Fragment, useContext } from 'react'
+import React, { Fragment } from 'react'
 import Image from 'next/image'
-import { useRouter } from 'next/router'
-import rgbaToRgb from 'rgba-to-rgb'
 
 import styles from './ManualPage.module.css'
 import tp from '../../utils/typograf/typograf.config'
@@ -18,13 +16,10 @@ import VideoPlayer from '../NotionTypes/VideoPlayer/VideoPlayer'
 import Code from '../NotionTypes/Text/Code/Code'
 import { API_HOST } from '../../consts/endpoints'
 import GuideImage from '../NotionTypes/GuideImage/GuideImage'
-import { PageContext } from '../../pages/manuals/[[...pageUrl]]'
-import getManualColorScheme from '../../utils/getManualColorScheme'
 import { Callout } from '../NotionTypes/Callout/Callout'
 import { Iframe } from '../NotionTypes/Iframe/Iframe'
 
 function ManualPage({
-    pageIndex,
     pageName,
     pageList,
     tableOfContentArr,
@@ -33,18 +28,6 @@ function ManualPage({
     catalogIndex,
     pageImage,
 }) {
-    const { asPath } = useRouter()
-    const colorContext = useContext(PageContext)
-    const { colorMap } = colorContext
-    const color = colorMap.filter((item) => asPath.includes(item.url))[0]?.color
-    const colorScheme = getManualColorScheme(color)
-    const arrowColor = rgbaToRgb(
-        'rgb(255, 255, 255)',
-        `rgba(${Math.trunc(colorScheme.bgLight.color[0])}, ${Math.trunc(
-            colorScheme.bgLight.color[1]
-        )}, ${Math.trunc(colorScheme.bgLight.color[2])}, ${colorScheme.bgLight.valpha})`
-    )
-
     const getLine = (columnList) => {
         if (!columnList.children.length) {
             return
@@ -123,12 +106,6 @@ function ManualPage({
 
     return (
         <div className={styles.templateColumn}>
-            <style
-                dangerouslySetInnerHTML={{
-                    __html: `body { counter-reset: page-chapter ${pageIndex} }`,
-                }}
-            />
-
             <div className={styles.column}>
                 {pageImage && (
                     <div className={styles.previewImageContainer}>
@@ -149,13 +126,10 @@ function ManualPage({
                     <nav className={styles.footNav}>
                         {Number.isInteger(nextPageIndex) && (
                             <ArrowNavLink
-                                backgroundColor={arrowColor}
                                 nextPageIndex={nextPageIndex}
                                 tableOfContentArr={tableOfContentArr}
                                 catalogIndex={catalogIndex}
                                 pageUrl={pageUrl}
-                                color={color}
-                                textDecoration={colorScheme.textDecoration}
                             />
                         )}
                     </nav>

diff --git a/components/ManualPreview/ManualPreview.jsx b/components/ManualPreview/ManualPreview.jsx
@@ -1,38 +1,25 @@
 import React from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
-import rgbaToRgb from 'rgba-to-rgb'
 
-import getManualColorScheme from '../../utils/getManualColorScheme'
+import { getCSSVarsColors } from '../../utils/getCSSVarsColors'
 
 import styles from './ManualPreview.module.css'
 
 function ManualPreview({ title, subtitle, pageUrl, color, status, publishedDate, pattern }) {
-    const colorScheme = getManualColorScheme(color)
-
-    const timeBgColor = rgbaToRgb(
-        'rgb(255, 255, 255)',
-        `rgba(${Math.trunc(colorScheme.manual[0])}, ${Math.trunc(
-            colorScheme.manual[1]
-        )}, ${Math.trunc(colorScheme.manual[2])}, ${colorScheme.manual})`
-    )
-
     return (
         <Link
             href={{
                 pathname: '/[[...pageUrl]]',
                 query: { pageUrl: [pageUrl] },
             }}
             className={styles.manual}
-            style={{ background: colorScheme.bgDark }}
+            style={{ ...getCSSVarsColors(color) }}
         >
-            <div className={styles.manualInner} style={{ color: colorScheme.title }}>
+            <div className={styles.manualInner}>
                 <div
                     className={styles.manualBackground}
-                    style={{
-                        backgroundColor: colorScheme.manual,
-                        backgroundImage: pattern && `url(${pattern})`,
-                    }}
+                    style={{ backgroundImage: pattern && `url(${pattern})` }}
                 />
                 {title && <div className={styles.manualTitle}>{title}</div>}
                 {subtitle && <div className={styles.manualSubtitle}>{subtitle}</div>}
@@ -49,10 +36,7 @@ function ManualPreview({ title, subtitle, pageUrl, color, status, publishedDate,
                 )}
 
                 {publishedDate && (
-                    <time
-                        style={{ backgroundColor: timeBgColor, opacity: 1 }}
-                        className={styles.manualDate}
-                    >
+                    <time className={styles.manualDate}>
                         {new Date(publishedDate).toLocaleDateString('ru')}
                     </time>
                 )}

diff --git a/components/ManualPreview/ManualPreview.module.css b/components/ManualPreview/ManualPreview.module.css
@@ -1,7 +1,10 @@
 .manual {
+    --manual-text: var(--color);
+    --manual-bg-cover: hsl(var(--color-h) var(--color-s) min(calc(var(--color-l) + 62%), 97%));
+    --manual-bg-back: hsl(var(--color-hsl) / 30%);
+
+
     position: relative;
-    background: white;
-    overflow: visible;
     width: 90vw;
     display: block;
     cursor: pointer;
@@ -11,6 +14,7 @@
     text-decoration: none;
     font-weight: 500;
     font-size: clamp(18px, 5vw, 21px);
+    background: var(--manual-bg-back);
 }
 
 .manual:focus-visible {
@@ -32,8 +36,9 @@
     height: 100%;
     transform-origin: left bottom;
     transition: transform .15s ease-in;
-    padding: .8em 1em;
+    padding: .8em 1em .8em;
     border-radius: .4em;
+    color: var(--manual-text);
     background: white;
 }
 
@@ -46,6 +51,7 @@
     pointer-events: none;
     border-radius: inherit;
     background-size: contain;
+    background-color: var(--manual-bg-cover);
 }
 
 .manualIcon {
@@ -77,6 +83,7 @@
 }
 
 .manualSubtitle {
+    position: relative;
     font-size: 3vw;
     line-height: 1.25;
     font-weight: 300;
@@ -108,9 +115,9 @@
     font-weight: 300;
     bottom: 10px;
     right: 12px;
-    opacity: .6;
     padding: 2px 4px 2px 4px;
     border-radius: 100px;
+    background-color: var(--manual-bg-cover);
 }
 
 @media screen and (min-width: 768px) {
@@ -121,7 +128,7 @@
     .manualTitle {
         font-size: 2.5vw;
     }
-    
+
     .manualSubtitle {
         font-size: 1.4vw;
     }
@@ -135,7 +142,7 @@
     .manualTitle {
         font-size: 1.4vw;
     }
-    
+
     .manualSubtitle {
         font-size: 0.8vw;
     }
@@ -156,4 +163,4 @@
     .manualInner {
         padding: 1em;
     }
-}
+}