From 73c8f7d028603aebeafffcdd33e1c93e7ccec1e9 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Mon, 28 Dec 2020 11:38:40 +0800 Subject: [PATCH] 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 | 3 +- packages/react-common-docs/brand.tsx | 6 +- packages/react-common-docs/public/global.css | 24 +-- packages/react-common-docs/public/theme.css | 101 ++++-------- .../src/components/CodeBlock/CodeBlock.tsx | 8 +- .../src/components/Playground/Playground.tsx | 32 ++-- .../src/components/Props/Props.tsx | 148 +++++++++++------- .../src/components/Sidebar/Sidebar.tsx | 79 +++++----- packages/react-common-docs/src/pages/_app.tsx | 14 +- .../react-common-docs/src/pages/_document.tsx | 2 + packages/react-common-docs/src/pages/index.md | 15 +- 11 files changed, 234 insertions(+), 198 deletions(-) diff --git a/package.json b/package.json index dd247b4..2da232f 100644 --- a/package.json +++ b/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", - "dependencies": {} + "homepage": "https://make.modal.sh/tesseract/web/react/common" } diff --git a/packages/react-common-docs/brand.tsx b/packages/react-common-docs/brand.tsx index b45a0a1..886cef4 100644 --- a/packages/react-common-docs/brand.tsx +++ b/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 = () => { diff --git a/packages/react-common-docs/public/global.css b/packages/react-common-docs/public/global.css index 7dbe935..6c5acb8 100644 --- a/packages/react-common-docs/public/global.css +++ b/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%); + } +} diff --git a/packages/react-common-docs/public/theme.css b/packages/react-common-docs/public/theme.css index f745c23..5f1e25b 100644 --- a/packages/react-common-docs/public/theme.css +++ b/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); } diff --git a/packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx b/packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx index 745849f..cb8268a 100644 --- a/packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx +++ b/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 ( { @@ -47,7 +53,7 @@ const CodeBlock = ({ children }) => { ) } = ({ of: ofAttr }) => { return ( - + - + diff --git a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx index 3042d71..401269f 100644 --- a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx +++ b/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', - top: 0, - width: '100%', - height: '100%', - backgroundColor: 'var(--color-bg)', - zIndex: 4, - transitionProperty: 'color, background-color, left', - transitionTimingFunction: 'ease', - transitionDuration: '350ms', - overflow: 'auto', - '@media (min-width: 720px)': { - left: '0 !important', - width: `${100 / 4}%`, - maxWidth: 'none', + display: 'none', + '@media only screen': { + display: 'block', + position: 'fixed', + top: 0, + width: '100%', height: '100%', - '+ *': { - paddingLeft: `${100 / 4}%`, - boxSizing: 'border-box', + backgroundColor: 'var(--color-bg)', + zIndex: 4, + 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', - height: '4rem', - position: 'fixed', - top: 0, - left: 0, - display: 'grid', - placeContent: 'center', - zIndex: 5, - '@media (min-width: 720px)': { - display: 'none', - }, - '::before': { - backgroundColor: 'var(--color-bg)', - content: "''", - position: 'absolute', + display: 'none', + '@media only screen': { + width: '4rem', + height: '4rem', + position: 'fixed', top: 0, left: 0, - width: '100%', - height: '100%', - opacity: 0.75, - zIndex: -1, + 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%', + height: '100%', + opacity: 0.75, + zIndex: -1, + }, }, }) diff --git a/packages/react-common-docs/src/pages/_app.tsx b/packages/react-common-docs/src/pages/_app.tsx index afac3b9..69bd268 100644 --- a/packages/react-common-docs/src/pages/_app.tsx +++ b/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, - margin: '0 auto', - padding: '0 1rem', - boxSizing: 'border-box', + '@media only screen': { + maxWidth: 720, + margin: '0 auto', + padding: '0 1rem', + boxSizing: 'border-box', + }, }) const Main = styled('main')({ - margin: '4rem 0', + '@media only screen': { + margin: '4rem 0', + }, }) type AppProps = { diff --git a/packages/react-common-docs/src/pages/_document.tsx b/packages/react-common-docs/src/pages/_document.tsx index 801ac72..fb0bf44 100644 --- a/packages/react-common-docs/src/pages/_document.tsx +++ b/packages/react-common-docs/src/pages/_document.tsx @@ -23,6 +23,8 @@ export default class MyDocument extends Document { styles: ( <> {initialProps.styles} + + diff --git a/packages/react-common-docs/src/pages/index.md b/packages/react-common-docs/src/pages/index.md index 0809cb2..2836bb7 100644 --- a/packages/react-common-docs/src/pages/index.md +++ b/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 => (
@@ -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.