Merge pull request #70 from tone-row/add-box-hover

fix(box): hover
tone-row · Mar 29, 2021 · 9ba750d · 9ba750d · vercel · Mar 29, 2021
2 parents 9efa050 + 2d0046b
commit 9ba750d
Show file tree

Hide file tree

Showing 17 changed files with 494 additions and 132 deletions.
diff --git a/docs/components/DocsLayout.module.scss b/docs/components/DocsLayout.module.scss
@@ -6,6 +6,7 @@
 
 .NavLink {
   background-color: var(--palette-white-3);
+  transition: background-color 300ms cubic-bezier(0.23, 1, 0.32, 1);
   &[aria-current="page"] {
     background-color: var(--palette-white-2);
   }

diff --git a/docs/components/DocsLayout.tsx b/docs/components/DocsLayout.tsx
@@ -5,7 +5,7 @@ import styles from "./DocsLayout.module.scss";
 import { useRouter } from "next/router";
 
 const links = [
-  { href: "/", text: "Home" },
+  { href: "/test-index", text: "Home" },
   { href: "/getting-started", text: "Getting Started" },
   { href: "/box", text: "Box" },
   { href: "/type", text: "Type" },
@@ -17,7 +17,8 @@ export default function DocsLayout({ children }: { children: ReactNode }) {
     <Box
       className={styles.DocsLayout}
       at={{ tablet: { template: "none / auto minmax(0, 1fr)" } }}
-      h
+      root
+      background="palette-white-0"
     >
       <Box
         as="aside"
@@ -42,7 +43,7 @@ export default function DocsLayout({ children }: { children: ReactNode }) {
           ))}
         </Box>
       </Box>
-      <Box px={6} py={6} contain={256} at={{ tablet: { py: 10 } }}>
+      <Box px={6} py={6} contain={230} at={{ tablet: { py: 10 } }}>
         {children}
       </Box>
     </Box>
@@ -67,6 +68,7 @@ function SidebarLink({
         pl={4}
         pr={8}
         {...(active ? { "aria-current": "page" } : {})}
+        hover={{ background: "palette-white-2" }}
       >
         <Type as="span">{text}</Type>
       </Box>

diff --git a/docs/components/slang/config.ts b/docs/components/slang/config.ts
@@ -4,16 +4,17 @@ const config: Partial<SlangConfig> = {
   baseFontFamily: "Neue Montreal",
   baseFontSizePx: 20,
   baseFontSizeMobilePx: 16,
-  baseFontLineHeight: 1.5,
+  baseFontLineHeight: 1.4,
   baseFontLineHeightMobile: 1.5,
   baseContainerSizePx: 700,
-  baseSpacingPx: 22.4,
+  baseSpacingPx: 30,
+  spacerPx: 4,
   baseSpacingScale: 1.1,
   errorCorrectionTopPx: -1.32,
   errorCorrectionTopScale: 1.5,
   errorCorrectionBottomPx: 1.67,
   errorCorrectionBottomScale: 1.486,
-  typeScaleBase: 1.25,
+  typeScaleBase: 1.4,
   typeScaleBaseMobile: 1.16,
   inverseTypeScaleLineHeight: 0.96,
   inverseTypeScaleLineHeightMobile: 0.969,
@@ -23,7 +24,7 @@ const config: Partial<SlangConfig> = {
   fluidMaxScreenSizePx: 1200,
   palette: {
     white: ["#ffffff", "#f3f2f2", "#dadada", "#e7ebec"],
-    black: ["#000000"],
+    black: ["#000000", "#121212", "#333333"],
   },
   colors: {
     background: "var(--palette-white-1)",

diff --git a/docs/components/slang/index.tsx b/docs/components/slang/index.tsx
@@ -16,7 +16,9 @@ type Colors =
   | "palette-white-1"
   | "palette-white-2"
   | "palette-white-3"
-  | "palette-black-0";
+  | "palette-black-0"
+  | "palette-black-1"
+  | "palette-black-2";
 export type BoxProps = PropsWithAs<BaseBoxProps<Breakpoints, Colors>>;
 export type TypeProps = PropsWithAs<BaseTypeProps<Breakpoints, Colors>>;
 const Box = forwardRefWithAs<BoxProps, "div">(BoxComponent);