Merge pull request #139 from VLK-STUDIO/feature/138

feat: #138

docs/docs/Introduction/advantages.mdx

@@ -17,15 +17,19 @@ To understand the second goal, let me show you an example:
 ```typescript
 const successButtonStyle = morfeo.resolve({
   bg: 'success',
-  corner: 'm', // <----
-  borderWidth: 'xs', // <----
+  // highlight-start
+  corner: 'm',
+  borderWidth: 'xs',
+  // highlight-end
   borderColor: 'success.darkest',
 });
 
 const dangerButtonStyle = morfeo.resolve({
   bg: 'error',
-  corner: 'l', // <----
-  borderWidth: '2xs', // <----
+  // highlight-start
+  corner: 'l',
+  borderWidth: '2xs',
+  // highlight-end
   borderColor: 'errror.darkest',
 });
 ```
@@ -67,13 +71,17 @@ const theme = {
 };
 
 const successButtonStyle = morfeo.resolve({
+  // highlight-start
   componentName: 'Button',
   variant: 'success',
+  // highlight-end
 });
 
 const dangerButtonStyle = morfeo.resolve({
+  // highlight-start
   componentName: 'Button',
   variant: 'error',
+  // highlight-end
 });
 ```
 

docs/docusaurus.config.js

@@ -8,7 +8,7 @@ module.exports = {
   onBrokenMarkdownLinks: 'warn',
   customFields: {
     description:
-      'Morfeo is a tool to build design systems based on a single source of truth.',
+      'Morfeo or MorfeoJS, is a tool to build design systems based on a single source of truth.',
   },
   favicon: 'img/favicon.ico',
   organizationName: 'VLK-STUDIO',

docs/src/components/AddToChrome/AddToChrome.js

@@ -7,10 +7,10 @@ export function AddToChrome() {
   return (
     <Link
       to="https://chrome.google.com/webstore/detail/morfeo/phhhjdmeicikchjnpepljcdgbmipipcl"
-      className={clsx('button button--lg', styles.link)}
+      className={clsx('morfeo-button-inverted', styles.link)}
     >
       <img src="/img/chromeLogo.svg" className={styles.image} />
-      <span>Add Morfeo to Chrome</span>
+      <span className="morfeo-typography-link">Add Morfeo to Chrome</span>
     </Link>
   );
 }

docs/src/components/AddToChrome/AddToChrome.module.css

@@ -2,10 +2,12 @@
   display: flex;
   align-items: center;
   width: fit-content;
-  margin-bottom: var(--ifm-paragraph-margin-bottom);
-  background-color: #A3A3A3;
+  margin-bottom: var(--spacings-s);
+  border: var(--borders-medium);
+  border-color: var(--colors-primary);
+  font-weight: var(--font-weights-bold);
 }
 
 .image {
-  margin-right: var(--space-2xs);
+  margin-right: var(--spacings-2xs);
 }

docs/src/components/ClickableCard/ClickableCard.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import styles from './ClickableCard.module.css';
 import ArrowRight from './ArrowRight';
+import clsx from 'clsx';
 
 export function ClickableCard({ children, badge, icon, onClick }) {
   return (
     <div
-      className={styles.container}
+      className={clsx('morfeo-card-outlined', styles.container)}
       onClick={onClick}
       style={onClick ? { cursor: 'pointer' } : {}}
     >

docs/src/components/ClickableCard/ClickableCard.module.css

@@ -1,70 +1,75 @@
 
 .container {
-  z-index: 1;
+  z-index: var(--z-indices-low);
+  display: flex;
+  height: var(--sizes-3xl);
+  align-items: center;
   position: relative;
-  padding: var(--space-s) var(--space-2xs);
-  border-radius: var(--radius-m);
+  justify-content: center;
+  padding: var(--spacings-m);
   border: 4px solid var(--ifm-footer-background-color);
-  transition: 0.3s ease;
-  background-color: white;
+  transition: var(--transitions-fast);
 }
 
 .text {
-  font-weight: 700;
-  font-size: 1.5rem;
+  font-size: var(--font-sizes-xl);
+  font-weight: var(--font-weights-bold);
 }
 
 .cta {
-  transition: 0.3s ease;
+  transition: var(--transitions-fast);
 }
 
 .badge {
   position: absolute;
-  right: var(--space-2xs);
-  top: var(--space-2xs);
-  padding: 0 var(--space-3xs);
-  border-radius: var(--radius-m);
-  background-color: var(--ifm-color-primary);
-  color: white;
-  font-weight: 700;
+  right: var(--spacings-2xs);
+  top: var(--spacings-2xs);
+  padding: 0 var(--spacings-3xs);
+  border-radius: var(--radii-m);
+  background-color: var(--colors-primary);
+  color: var(--colors-inverted-text);
+  font-weight: var(--font-weights-bold);
 }
 
 .icon {
   position: absolute;
-  left: var(--space-2xs);
-  top: var(--space-2xs);
+  left: var(--spacings-2xs);
+  top: var(--spacings-2xs);
 }
 
 .arrowRight {
   position: absolute;
-  right: var(--space-2xs);
-  bottom: var(--space-2xs);
-  stroke: black;
+  right: var(--spacings-2xs);
+  bottom: var(--spacings-2xs);
+  stroke: var(--colors-text);
 }
 
 .container:hover {
   transform: scale(1.1) rotate3d(80, 10, -10, 10deg);
-  transform-style: preserve-3d;
-  border-color: var(--ifm-color-secondary);
-  box-shadow: 0px 10px 20px #E6E6E6;
-  z-index: 10;
+  border-color: var(--colors-secondary);
+  box-shadow: var(--shadows-medium);
+  z-index: var(--z-indices-high);
 }
 
 .container:hover .arrowRight {
-  stroke: var(--ifm-color-secondary);
-  right: calc(var(--space-2xs) / 2);
+  stroke: var(--colors-secondary);
+  right: var(--spacings-3xs);
 }
 
 .container:hover .badge {
-  background-color: var(--ifm-color-secondary);
+  background-color: var(--colors-secondary);
 }
 
 @media screen and (max-width: 576px) {
   .container {
     margin-top: 0;
   }
 
+  .container:hover {
+    transform: scale(1.02);
+  }
+
   .text {
-    font-size: 1.2rem;
+    font-size: var(--font-sizes-l);
   }
 }

docs/src/components/CodeExample/CodeExample.js

@@ -25,7 +25,7 @@ export function CodeExample() {
   return (
     <section className={styles.container}>
       <div className="container">
-        <h2 className={styles.title}>How it works!</h2>
+        <h2 className={styles.title}>How it works?</h2>
         <div className={styles.row}>
           <div className={styles.preview}>
             <CodeSnippet style={exampleTheme} label="set your theme" />

docs/src/components/CodeExample/CodeExample.module.css

@@ -1,17 +1,17 @@
 .container {
-  margin: var(--space-l) 0;
+  margin: var(--spacings-l) 0;
 }
 
 .title {
   text-align: center;
-  font-weight: 700;
-  font-size: 2rem;
+  font-weight: var(--font-weights-bold);
+  font-size: var(--font-sizes-2xl);
 }
 
 .preview {
   display: flex;
-  padding-top: var(--space-s);
-  padding-bottom: var(--space-s);
+  padding-top: var(--spacings-s);
+  padding-bottom: var(--spacings-s);
   align-items: center;
   justify-content: center;
 }

docs/src/components/CodeSnippet/CodeSnippet.module.css

@@ -4,7 +4,7 @@
   height: 20rem;
   flex-direction: column;
   justify-content: space-between;
-  transition: 0.3s ease;
+  transition: var(--transitions-fast);
 }
 
 .container:hover {
@@ -13,32 +13,32 @@
 
 .code {
   flex: 1;
-  border: 2px solid var(--ifm-color-primary-lightest);
-  margin: 0 var(--space-2xs);
+  border: 2px solid var(--colors-primary-lightest);
+  margin: 0 var(--spacings-2xs);
   padding: 0;
   overflow: hidden;
   position: relative;
   text-align: left;
-  border-radius: var(--radius-m);
+  border-radius: var(--radii-m);
   background-color: rgb(41, 45, 62);
 }
 
 .container:hover .code {
-  border: 4px solid var(--ifm-color-secondary);
+  border: 4px solid var(--colors-secondary);
 }
 
 .label {
-  margin-top: var(--space-2xs);
-  margin-left: var(--space-2xs);
-  font-weight: 700;
+  margin-top: var(--spacings-2xs);
+  margin-left: var(--spacings-2xs);
+  font-weight: var(--font-weights-bold);
   font-size: 1.1rem;
   text-align: center;
 }
 
 @media (max-width: 966px) {
   .container {
     width: 100%;
-    margin-top: var(--space-xs);
+    margin-top: var(--spacings-xs);
     font-size: 0.99em;
   }
 }

docs/src/components/HeroCard/HeroCard.js

@@ -3,27 +3,23 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './HeroCard.module.css';
 
-export function HeroCard({ children, badge, icon, ctas = [], onClick }) {
+export function HeroCard({ children, ctas = [] }) {
   const renderedCta = useMemo(() => {
     return ctas.map(cta => (
       <Link
         key={cta.label}
         className={clsx('button button--primary button--lg', styles.cta)}
         to={cta.link}
-        style={{ color: 'white' }}
+        style={{ color: 'var(--colors-inverted-text)' }}
       >
         {cta.label}
       </Link>
     ));
   }, [ctas]);
 
   return (
-    <div
-      className={clsx(styles.container, onClick && styles.clickable)}
-      onClick={onClick}
-      style={onClick ? { cursor: 'pointer' } : {}}
-    >
-      <p className={styles.text}>{children}</p>
+    <div className={clsx('morfeo-card', styles.container)}>
+      <p className={clsx('morfeo-typography-p1', styles.text)}>{children}</p>
       <div className={styles.buttons}>{renderedCta}</div>
     </div>
   );

docs/src/components/HeroCard/HeroCard.module.css

@@ -2,11 +2,11 @@
 .container {
   z-index: 1;
   position: relative;
-  padding: var(--space-s) var(--space-2xs);
-  border-radius: var(--radius-m);
-  box-shadow: 0px 10px 20px #E6E6E6;
-  transition: 0.3s ease;
-  background-color: white;
+  padding: var(--spacings-m);
+  border-radius: var(--radii-m);
+  box-shadow: var(--shadows-light);
+  transition: var(--transitions-fast);
+  background-color: var(--colors-background);
 }
 
 .buttons {
@@ -16,36 +16,38 @@
 }
 
 .text {
-  font-weight: 700;
-  font-size: 1.5rem;
+  font-weight: var(--font-weights-bold);
+  font-size: var(--font-sizes-xl);
 }
 
 .text i {
-  color: white;
-  background-color: var(--ifm-color-primary);
-  padding-left: var(--space-3xs);
-  padding-right: var(--space-3xs);
+  color: var(--colors-inverted-text);
+  background-color: var(--colors-primary);
+  padding-left: var(--spacings-3xs);
+  padding-right: var(--spacings-3xs);
 }
 
 .cta {
-  transition: 0.3s ease;
+  transition: var(--transitions-fast);
 }
 
 .icon {
   position: absolute;
-  left: var(--space-2xs);
-  top: var(--space-2xs);
+  left: var(--spacings-2xs);
+  top: var(--spacings-2xs);
+}
+
+@media (max-width: 966px) {
+  .text {
+    font-size: var(--font-sizes-l);
+  }
 }
 
 @media screen and (max-width: 576px) {
   .container {
     margin-top: 0;
   }
 
-  .text {
-    font-size: 1.2rem;
-  }
-
   .text i {
     display: inline-block;
   }