chore(docs): calms the primary color down

Author: itsdouges

doczrc.js

@@ -1,12 +1,11 @@
 const { css } = require('styled-components'); // eslint-disable-line
 
-const primary = 'rgb(133, 47, 255)';
-const altPrimary = 'rgba(200, 57, 236, 1)';
-const primaryText = 'rgba(255, 255, 255, 0.95)';
-const background = `linear-gradient(135deg, ${altPrimary} 25%, ${primary} 100%)`;
+const primary = 'rgba(157, 0, 255, 0.8)';
+const darkText = 'rgba(41, 52, 98, 0.85)';
+const lightText = 'rgba(255, 255, 255, 0.9)';
 
 module.exports = {
-  title: 'element motion for React.js 💨✨',
+  title: 'element motion',
   description: 'element motion for React.js 💨✨',
   typescript: true,
   dest: '/docs',
@@ -16,9 +15,9 @@ module.exports = {
   themeConfig: {
     colors: {
       primary,
-      sidebarBg: background,
-      sidebarText: primaryText,
-      sidebarPrimary: primaryText,
+      sidebarBg: '#fff',
+      sidebarText: darkText,
+      sidebarPrimary: primary,
       sidebarBorder: 'transparent',
       link: primary,
     },
@@ -28,9 +27,10 @@ module.exports = {
           'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
         font-size: 16px;
         line-height: 1.6;
+        color: ${darkText} !important;
 
-        input::placeholder {
-          color: rgba(255, 255, 255, 0.7);
+        input[class^='Search__Input-']::placeholder {
+          color: rgba(41, 52, 98, 0.64);
         }
 
         div[class^='Logo__Wrapper-'] {
@@ -46,6 +46,7 @@ module.exports = {
         a[class^='MenuLink__LinkAnchor-'],
         a[class^='MenuLink__createLink-'] {
           font-weight: 400;
+          color: ${darkText} !important;
 
           :hover,
           :focus {
@@ -61,14 +62,22 @@ module.exports = {
             opacity: 0.9;
           }
         }
+
+        [class^='Logo__LogoText-'] {
+          font-size: 2em;
+        }
+
+        p {
+          color: ${darkText};
+        }
       `,
       h1: css`
         display: inline-block;
         margin: 60px 0 20px;
         font-size: 48px;
         font-weight: 600;
         letter-spacing: -0.06em;
-        color: ${primaryText};
+        color: ${lightText};
         position: relative;
         z-index: 1;
 
@@ -79,7 +88,7 @@ module.exports = {
           right: 1px;
           left: 6px;
           bottom: 0;
-          background: ${background};
+          background: ${primary};
           transform: skew(-1deg, 1deg);
           z-index: -1;
         }
@@ -90,6 +99,7 @@ module.exports = {
         font-weight: 500;
         font-size: 28px;
         letter-spacing: -0.02em;
+        color: ${darkText};
       `,
     },
   },

packages/core/src/__docs__/2-getting-started/docs.mdx

@@ -45,52 +45,58 @@ For a simple move we can use the [Motion](/motion) and [Move](/move) components.
 For this example we are moving from one element to another over a state change.
 
 <Playground>
-  <Styled.SelectContainer>
-    <Toggler interval onIntervalSet={curVal => (curVal ? undefined : 1)}>
-      {({ shown, toggle }) =>
-        shown ? (
-          <Motion name={`item-${shown}`}>
-            <Move>
-              {motion => (
-                <div {...motion}>
-                  <Select
-                    isSearchable={false}
-                    value={{}}
-                    styles={{
-                      singleValue: () => ({}),
-                    }}
-                    isClearable
-                    onChange={() => toggle()}
-                    formatOptionLabel={() => (
-                      <Styled.Value>
-                        {Styled.data[shown].title}
-                        <Styled.Description>{Styled.data[shown].description}</Styled.Description>
-                      </Styled.Value>
-                    )}
-                  />
-                </div>
-              )}
-            </Move>
-          </Motion>
-        ) : (
-          <Styled.List>
-            {Styled.data.map((item, index) => (
-              <Motion key={index} name={`item-${index}`}>
-                <Move>
+  <Styled.Center>
+    <Common.SmallViewport>
+      <Styled.SelectContainer>
+        <Toggler interval onIntervalSet={curVal => (curVal ? undefined : 1)}>
+          {({ shown, toggle }) =>
+            shown ? (
+              <Motion name={`item-${shown}`}>
+                <Move scaleY={false}>
                   {motion => (
-                    <Styled.Value onClick={() => toggle(`${index}`)} {...motion}>
-                      {item.title}
-                      <Styled.Description>{item.description}</Styled.Description>
-                    </Styled.Value>
+                    <div {...motion}>
+                      <Select
+                        isSearchable={false}
+                        value={{}}
+                        styles={{
+                          singleValue: () => ({}),
+                        }}
+                        isClearable
+                        onChange={() => toggle()}
+                        formatOptionLabel={() => (
+                          <Styled.Value>
+                            {Styled.data[shown].title}
+                            <Styled.Description>
+                              {Styled.data[shown].description}
+                            </Styled.Description>
+                          </Styled.Value>
+                        )}
+                      />
+                    </div>
                   )}
                 </Move>
               </Motion>
-            ))}
-          </Styled.List>
-        )
-      }
-    </Toggler>
-  </Styled.SelectContainer>
+            ) : (
+              <Styled.List>
+                {Styled.data.map((item, index) => (
+                  <Motion key={index} name={`item-${index}`}>
+                    <Move scaleY={false}>
+                      {motion => (
+                        <Styled.Value onClick={() => toggle(`${index}`)} {...motion}>
+                          {item.title}
+                          <Styled.Description>{item.description}</Styled.Description>
+                        </Styled.Value>
+                      )}
+                    </Move>
+                  </Motion>
+                ))}
+              </Styled.List>
+            )
+          }
+        </Toggler>
+      </Styled.SelectContainer>
+    </Common.SmallViewport>
+  </Styled.Center>
 </Playground>
 
 > **Tip -** Motions are triggered by state changes.

packages/core/src/__docs__/2-getting-started/styled.tsx

@@ -285,7 +285,10 @@ export const List = styled.div`
 `;
 
 export const SelectContainer = styled.div`
-  height: 398px;
+  padding: 16px;
+  padding-top: 100px;
+  height: 100%;
+  min-height: 600px;
 `;
 
 export const data = [

packages/dev/src/SmallViewport.tsx

@@ -6,7 +6,7 @@ const PixelContainer = styled.div<{ display: string }>`
   height: 100vh;
   max-width: 411px;
   max-height: 731px;
-  border-radius: 3px;
+  border-radius: 8px;
   box-shadow: 0 1px 50px rgba(32, 33, 36, 0.1);
   border: 1px solid rgba(32, 33, 36, 0.1);
   box-sizing: border-box;