Implement variable fonts, print styles

Use Encode Sans variable axes from Google Fonts. Also specified code blocks and images to be grayscale in print mode.

package.json

@@ -64,6 +64,5 @@
     "react-feather": "2.0.3",
     "styled-components": "5.1.0"
   },
-  "homepage": "https://make.modal.sh/tesseract/web/react/common",
+  "homepage": "https://make.modal.sh/tesseract/web/react/common"
-  "dependencies": {}
 }

packages/react-common-docs/brand.tsx

@@ -10,7 +10,7 @@ const Base = styled('div')({
 const Title = styled('strong')({
   fontSize: '2rem',
   fontFamily: 'var(--font-family-headings), sans-serif',
-  fontWeight: 'var(--font-weight-headings, 400)',
+  fontWeight: 500,
   lineHeight: 'var(--line-height-headings, 1.5)',
   fontStretch: 'var(--font-stretch-headings, normal)',
   textTransform: 'lowercase',
@@ -21,14 +21,14 @@ const Org = styled('small')({
   position: 'absolute',
   top: '-0.25em',
   right: 0,
-  fontWeight: 'bolder',
+  fontWeight: 600,
 })
 
 const Subtitle = styled('small')({
   position: 'absolute',
   bottom: '-1em',
   right: 0,
-  fontWeight: 'bolder',
+  fontWeight: 900,
 })
 
 const Brand = () => {

packages/react-common-docs/public/global.css

@@ -38,22 +38,26 @@ small {
 }
 
 a:focus {
-  color: var(--color-active);
   outline: 0;
 }
 
-::selection {
-  background-color: var(--color-active);
-  color: var(--color-fg);
-}
-
-:root {
-  caret-color: var(--color-active);
-}
-
 pre {
   overflow: auto;
   margin: 0 -1rem;
   padding: 0 1rem;
   line-height: 1.2;
 }
+
+@media only print {
+  pre, pre * {
+    color: inherit !important;
+  }
+
+  code, code * {
+    color: inherit !important;
+  }
+
+  img {
+    filter: grayscale(100%);
+  }
+}

packages/react-common-docs/public/theme.css

@@ -1,63 +1,3 @@
-@font-face {
-  font-family: 'Encode Sans';
-  font-stretch: semi-expanded;
-  font-weight: 400;
-  font-display: swap;
-  src:
-    local('Encode Sans Semi Expanded'),
-    local('Encode Sans'),
-    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke83OhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TO401LgrjKXY.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'Encode Sans';
-  font-stretch: semi-expanded;
-  font-weight: 700;
-  font-display: swap;
-  src:
-    local('Encode Sans Semi Expanded Bold'),
-    local('Encode Sans Semi Expanded'),
-    local('Encode Sans'),
-    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke8yOhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TMzYQOyfBJFyUGWQ.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'Encode Sans';
-  font-stretch: condensed;
-  font-weight: 100;
-  font-display: swap;
-  src:
-    local('Encode Sans Condensed Thin'),
-    local('Encode Sans Condensed'),
-    local('Encode Sans'),
-    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_76_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-5Z-OJwsnIHKQ.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'Encode Sans';
-  font-stretch: condensed;
-  font-weight: 200;
-  font-display: swap;
-  src:
-    local('Encode Sans Condensed ExtraLight'),
-    local('Encode Sans Condensed Extra Light'),
-    local('Encode Sans Condensed'),
-    local('Encode Sans'),
-    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-SY6ZAC4ICHiYFQ.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'Encode Sans';
-  font-stretch: condensed;
-  font-weight: 300;
-  font-display: swap;
-  src:
-    local('Encode Sans Condensed Light'),
-    local('Encode Sans Condensed'),
-    local('Encode Sans'),
-    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-LY2ZAC4ICHiYFQ.woff2) format('woff2');
-}
-
 @font-face {
   font-family: 'mononoki';
   font-weight: 400;
@@ -101,11 +41,11 @@
 }
 
 :root {
-  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
+  --font-family-base: 'Encode Sans', system-ui;
   --font-stretch-base: semi-expanded;
   --font-weight-base: 400;
   --line-height-base: 2;
-  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
+  --font-family-headings: 'Encode Sans', system-ui;
   --font-stretch-headings: condensed;
   --font-weight-headings: 100;
   --line-height-headings: 1.5;
@@ -129,9 +69,6 @@
 }
 
 :root {
-
-  background-color: var(--color-bg);
-  color: var(--color-fg);
   font-size: var(--font-size-root);
   font-family: var(--font-family-base), sans-serif;
   font-stretch: var(--font-stretch-base, normal);
@@ -142,6 +79,13 @@
   transition-duration: 350ms;
 }
 
+@media only screen {
+  :root {
+    background-color: var(--color-bg);
+    color: var(--color-fg);
+  }
+}
+
 h1 {
   font-family: var(--font-family-headings), sans-serif;
   font-stretch: var(--font-stretch-headings, normal);
@@ -152,14 +96,14 @@ h1 {
 h2 {
   font-family: var(--font-family-headings), sans-serif;
   font-stretch: var(--font-stretch-headings, normal);
-  font-weight: var(--font-weight-headings, 400);
+  font-weight: calc(var(--font-weight-headings, 400) / 100 * 150);
   line-height: var(--line-height-headings, 1.5);
 }
 
 h3 {
   font-family: var(--font-family-headings), sans-serif;
   font-stretch: var(--font-stretch-headings, normal);
-  font-weight: var(--font-weight-headings, 400);
+  font-weight: calc(var(--font-weight-headings, 400) / 100 * 250);
   line-height: var(--line-height-headings, 1.5);
 }
 
@@ -193,5 +137,26 @@ pre {
 }
 
 a {
-  color: var(--color-accent);
+  color: inherit;
+  text-decoration: none;
+}
+
+@media only screen {
+  a {
+    color: var(--color-accent);
+    text-decoration: underline;
+  }
+
+  a:focus {
+    color: var(--color-active);
+  }
+}
+
+::selection {
+  background-color: var(--color-active);
+  color: var(--color-fg);
+}
+
+:root {
+  caret-color: var(--color-active);
 }

packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx

@@ -37,6 +37,12 @@ const CodeBlock = ({ children }) => {
         {}
       )
     : {}
+  const prismInstance = defaultProps.Prism
+  prismInstance.languages['yarnrc'] = {
+    'attr-name': {
+      pattern: /^[^\s#]+\s/,
+    }
+  }
   return (
     <Base>
       {
@@ -47,7 +53,7 @@ const CodeBlock = ({ children }) => {
         )
       }
       <Highlight
-        {...defaultProps}
+        Prism={prismInstance}
         language={language}
         code={(code as string).trim()}
         theme={PrismTheme}

packages/react-common-docs/src/components/Playground/Playground.tsx

@@ -9,20 +9,24 @@ import {
 import styled from 'styled-components'
 
 const Figure = styled('figure')({
-  margin: '0 -1rem',
+  display: 'none',
-  padding: '1rem',
+  '@media only screen': {
-  boxSizing: 'border-box',
+    display: 'block',
-  position: 'relative',
+    margin: '0 -1rem',
-  '::before': {
+    padding: '1rem',
-    position: 'absolute',
+    boxSizing: 'border-box',
-    content: "''",
+    position: 'relative',
-    zIndex: -1,
+    '::before': {
-    backgroundColor: 'var(--color-shade)',
+      position: 'absolute',
-    opacity: 0.125,
+      content: "''",
-    top: 0,
+      zIndex: -1,
-    left: 0,
+      backgroundColor: 'var(--color-shade)',
-    width: '100%',
+      opacity: 0.125,
-    height: '100%',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
   },
 })
 

packages/react-common-docs/src/components/Props/Props.tsx

@@ -8,28 +8,50 @@ import parse from 'remark-parse'
 import remark2react from 'remark-react'
 
 const Base = styled('table')({
-  borderCollapse: 'collapse',
+  display: 'table',
-  border: 0,
+  margin: '0 -0.5rem',
-  display: 'block',
+  '@media only screen': {
-  '@media (min-width: 720px)': {
+    borderCollapse: 'collapse',
-    display: 'table',
+    border: 0,
-    margin: '0 -0.5rem',
+    display: 'block',
+    margin: 0,
+    '@media (min-width: 720px)': {
+      display: 'table',
+      margin: '0 -0.5rem',
+    },
+  },
+})
+
+const Colgroup = styled('colgroup')({
+  display: 'table-column-group',
+  '@media only screen': {
+    display: 'none',
+    '@media (min-width: 720px)': {
+      display: 'table-column-group',
+    },
   },
 })
 
 const HeaderCellGroup = styled('thead')({
-  display: 'none',
+  display: 'table-header-group',
-  '@media (min-width: 720px)': {
+  '@media only screen': {
-    display: 'table-header-group',
+    display: 'none',
+    '@media (min-width: 720px)': {
+      display: 'table-header-group',
+    },
   },
 })
 
 const HeaderRow = styled('tr')({
-  display: 'block',
+  display: 'table-row',
-  margin: '2rem 0',
+  margin: 0,
-  '@media (min-width: 720px)': {
+  '@media only screen': {
-    display: 'table-row',
+    display: 'block',
-    margin: 0,
+    margin: '2rem 0',
+    '@media (min-width: 720px)': {
+      display: 'table-row',
+      margin: 0,
+    },
   },
 })
 
@@ -40,61 +62,81 @@ const HeaderCell = styled('th')({
   fontWeight: 'bolder',
   textTransform: 'uppercase',
   border: 0,
-  display: 'block',
+  display: 'table-cell',
-  padding: 0,
+  padding: '0 0.5rem',
-  '@media (min-width: 720px)': {
+  '@media only screen': {
-    display: 'table-cell',
+    display: 'block',
-    padding: '0 0.5rem',
+    padding: 0,
+    '@media (min-width: 720px)': {
+      display: 'table-cell',
+      padding: '0 0.5rem',
+    },
   },
 })
 
 const MainBodyCell = styled('th')({
-  verticalAlign: 'top',
+  display: 'table-cell',
+  padding: '0.5rem',
   textAlign: 'left',
-  border: 0,
+  '@media only screen': {
-  lineHeight: 1,
+    verticalAlign: 'top',
-  display: 'block',
+    border: 0,
-  padding: 0,
+    lineHeight: 1,
-  '@media (min-width: 720px)': {
+    display: 'block',
-    display: 'table-cell',
+    padding: 0,
-    padding: '0.5rem',
+    '@media (min-width: 720px)': {
+      display: 'table-cell',
+      padding: '0.5rem',
+    },
   },
 })
 
 const BodyCellGroup = styled('tbody')({
-  display: 'block',
+  display: 'table-row-group',
-  '@media (min-width: 720px)': {
+  '@media only screen': {
-    display: 'table-row-group',
+    display: 'block',
+    '@media (min-width: 720px)': {
+      display: 'table-row-group',
+    },
   },
 })
 
 const BodyCell = styled('td')({
-  verticalAlign: 'top',
+  padding: '0.5rem 0.5rem',
-  padding: 0,
+  display: 'table-cell',
-  border: 0,
+  lineHeight: 1.25,
-  display: 'block',
-  '&[data-column-name]::before': {
-    display: 'inline',
-    fontSize: '0.75rem',
-    fontWeight: 'bolder',
-    textTransform: 'uppercase',
-    content: "attr(data-column-name) ':'",
-    marginRight: '1rem',
-  },
-  '@media (min-width: 720px)': {
-    padding: '0.5rem 0.5rem',
-    display: 'table-cell',
-    lineHeight: 1.25,
-    '&[data-column-name]::before': {
-      display: 'none',
-    },
-  },
   '& :first-child': {
     marginTop: 0,
   },
   '& :last-child': {
     marginBottom: 0,
-  }
+  },
+  '&[data-column-name]::before': {
+    display: 'none',
+  },
+  '@media only screen': {
+    verticalAlign: 'top',
+    padding: 0,
+    border: 0,
+    lineHeight: 'inherit',
+    display: 'block',
+    '&[data-column-name]::before': {
+      display: 'inline',
+      fontSize: '0.75rem',
+      fontWeight: 'bolder',
+      textTransform: 'uppercase',
+      content: "attr(data-column-name) ':'",
+      marginRight: '1rem',
+    },
+    '@media (min-width: 720px)': {
+      padding: '0.5rem 0.5rem',
+      display: 'table-cell',
+      lineHeight: 1.25,
+      '&[data-column-name]::before': {
+        display: 'none',
+      },
+    },
+  },
 })
 
 const Code = styled('code')({
@@ -285,12 +327,12 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
 
   return (
     <Base>
-      <colgroup>
+      <Colgroup>
         <col width="20%" />
         <col width="25%" />
         <col width="25%" />
         <col width="*" />
-      </colgroup>
+      </Colgroup>
       <HeaderCellGroup>
         <HeaderRow>
           <HeaderCell>

packages/react-common-docs/src/components/Sidebar/Sidebar.tsx

@@ -29,50 +29,57 @@ const Container = styled('span')({
 
 const Base = styled('aside')({
   '--max-width': 240,
-  position: 'fixed',
+  display: 'none',
-  top: 0,
+  '@media only screen': {
-  width: '100%',
+    display: 'block',
-  height: '100%',
+    position: 'fixed',
-  backgroundColor: 'var(--color-bg)',
+    top: 0,
-  zIndex: 4,
+    width: '100%',
-  transitionProperty: 'color, background-color, left',
-  transitionTimingFunction: 'ease',
-  transitionDuration: '350ms',
-  overflow: 'auto',
-  '@media (min-width: 720px)': {
-    left: '0 !important',
-    width: `${100 / 4}%`,
-    maxWidth: 'none',
     height: '100%',
-    '+ *': {
+    backgroundColor: 'var(--color-bg)',
-      paddingLeft: `${100 / 4}%`,
+    zIndex: 4,
-      boxSizing: 'border-box',
+    transitionProperty: 'color, background-color, left',
+    transitionTimingFunction: 'ease',
+    transitionDuration: '350ms',
+    overflow: 'auto',
+    '@media (min-width: 720px)': {
+      left: '0 !important',
+      width: `${100 / 4}%`,
+      maxWidth: 'none',
+      height: '100%',
+      '+ *': {
+        paddingLeft: `${100 / 4}%`,
+        boxSizing: 'border-box',
+      },
     },
   },
 })
 
 const SidebarToggle = styled('a')({
-  width: '4rem',
+  display: 'none',
-  height: '4rem',
+  '@media only screen': {
-  position: 'fixed',
+    width: '4rem',
-  top: 0,
+    height: '4rem',
-  left: 0,
+    position: 'fixed',
-  display: 'grid',
-  placeContent: 'center',
-  zIndex: 5,
-  '@media (min-width: 720px)': {
-    display: 'none',
-  },
-  '::before': {
-    backgroundColor: 'var(--color-bg)',
-    content: "''",
-    position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
+    display: 'grid',
-    height: '100%',
+    placeContent: 'center',
-    opacity: 0.75,
+    zIndex: 5,
-    zIndex: -1,
+    '@media (min-width: 720px)': {
+      display: 'none',
+    },
+    '::before': {
+      backgroundColor: 'var(--color-bg)',
+      content: "''",
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      opacity: 0.75,
+      zIndex: -1,
+    },
   },
 })
 

packages/react-common-docs/src/pages/_app.tsx

@@ -10,14 +10,18 @@ import pkg from '../../../../package.json'
 import CodeBlock from '../components/CodeBlock/CodeBlock'
 
 const Container = styled('div')({
-  maxWidth: 720,
+  '@media only screen': {
-  margin: '0 auto',
+    maxWidth: 720,
-  padding: '0 1rem',
+    margin: '0 auto',
-  boxSizing: 'border-box',
+    padding: '0 1rem',
+    boxSizing: 'border-box',
+  },
 })
 
 const Main = styled('main')({
-  margin: '4rem 0',
+  '@media only screen': {
+    margin: '4rem 0',
+  },
 })
 
 type AppProps = {

packages/react-common-docs/src/pages/_document.tsx

@@ -23,6 +23,8 @@ export default class MyDocument extends Document {
         styles: (
           <>
             {initialProps.styles}
+            <link rel="preconnect" href="https://fonts.gstatic.com" />
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..112.5,100..900&display=swap" />
             <link rel="stylesheet" href={`${publicUrl}/global.css`} />
             <link rel="stylesheet" href={`${publicUrl}/theme.css`} />
             <link rel="alternate stylesheet" title="Dark" href={`${publicUrl}/theme/dark.css`} />

packages/react-common-docs/src/pages/index.md

@@ -15,14 +15,16 @@ Dependencies:
 [![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
 [![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)
 
+Check the [documentation](https://make.modal.sh/tesseract/web/react/common) for more details.
+
 ## Installation
 
-Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to
+This package resides primarily in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/). You will need to
 adjust configuration in your chosen package manager.
 
-With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:
+With [Yarn v.1.x](https://classic.arnpkg.com), add this to your `.yarnrc` file:
 
-```
+```yarnrc
 "@tesseract-design:registry" "https://js.pack.modal.sh/"
 ```
 
@@ -52,13 +54,11 @@ const LoginForm = etcProps => (
       </legend>
       <div>
         <T.TextInput
-          block
           label="Username"
         />
       </div>
       <div>
         <T.TextInput
-          block
           type="password"
           label="Password"
         />
@@ -82,10 +82,13 @@ ReactDOM.render(
 window.document.body.appendChild(mountNode)
 ```
 
-Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).
+Detailed usage guides can be found in the documentation linked above.
 
 ## TypeScript
 
 The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
 compiled source.
 
+## License
+
+MIT. See the LICENSE file on the package repository for the full text.