Browse Source

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.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
commit
73c8f7d028
11 changed files with 234 additions and 198 deletions
  1. +1
    -2
      package.json
  2. +3
    -3
      packages/react-common-docs/brand.tsx
  3. +14
    -10
      packages/react-common-docs/public/global.css
  4. +33
    -68
      packages/react-common-docs/public/theme.css
  5. +7
    -1
      packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx
  6. +18
    -14
      packages/react-common-docs/src/components/Playground/Playground.tsx
  7. +95
    -53
      packages/react-common-docs/src/components/Props/Props.tsx
  8. +43
    -36
      packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
  9. +9
    -5
      packages/react-common-docs/src/pages/_app.tsx
  10. +2
    -0
      packages/react-common-docs/src/pages/_document.tsx
  11. +9
    -6
      packages/react-common-docs/src/pages/index.md

+ 1
- 2
package.json View File

@@ -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"
}

+ 3
- 3
packages/react-common-docs/brand.tsx View File

@@ -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 = () => {


+ 14
- 10
packages/react-common-docs/public/global.css View File

@@ -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%);
}
}

+ 33
- 68
packages/react-common-docs/public/theme.css View File

@@ -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);
}

+ 7
- 1
packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx View File

@@ -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}


+ 18
- 14
packages/react-common-docs/src/components/Playground/Playground.tsx View File

@@ -9,20 +9,24 @@ import {
import styled from 'styled-components'

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



+ 95
- 53
packages/react-common-docs/src/components/Props/Props.tsx View File

@@ -8,28 +8,50 @@ import parse from 'remark-parse'
import remark2react from 'remark-react'

const Base = styled('table')({
borderCollapse: 'collapse',
border: 0,
display: 'block',
'@media (min-width: 720px)': {
display: 'table',
margin: '0 -0.5rem',
display: 'table',
margin: '0 -0.5rem',
'@media only screen': {
borderCollapse: 'collapse',
border: 0,
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',
'@media (min-width: 720px)': {
display: 'table-header-group',
display: 'table-header-group',
'@media only screen': {
display: 'none',
'@media (min-width: 720px)': {
display: 'table-header-group',
},
},
})

const HeaderRow = styled('tr')({
display: 'block',
margin: '2rem 0',
'@media (min-width: 720px)': {
display: 'table-row',
margin: 0,
display: 'table-row',
margin: 0,
'@media only screen': {
display: 'block',
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',
padding: 0,
'@media (min-width: 720px)': {
display: 'table-cell',
padding: '0 0.5rem',
display: 'table-cell',
padding: '0 0.5rem',
'@media only screen': {
display: 'block',
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,
lineHeight: 1,
display: 'block',
padding: 0,
'@media (min-width: 720px)': {
display: 'table-cell',
padding: '0.5rem',
'@media only screen': {
verticalAlign: 'top',
border: 0,
lineHeight: 1,
display: 'block',
padding: 0,
'@media (min-width: 720px)': {
display: 'table-cell',
padding: '0.5rem',
},
},
})

const BodyCellGroup = styled('tbody')({
display: 'block',
'@media (min-width: 720px)': {
display: 'table-row-group',
display: 'table-row-group',
'@media only screen': {
display: 'block',
'@media (min-width: 720px)': {
display: 'table-row-group',
},
},
})

const BodyCell = styled('td')({
verticalAlign: 'top',
padding: 0,
border: 0,
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',
},
},
padding: '0.5rem 0.5rem',
display: 'table-cell',
lineHeight: 1.25,
'& :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>


+ 43
- 36
packages/react-common-docs/src/components/Sidebar/Sidebar.tsx View File

@@ -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,
},
},
})



+ 9
- 5
packages/react-common-docs/src/pages/_app.tsx View File

@@ -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 = {


+ 2
- 0
packages/react-common-docs/src/pages/_document.tsx View File

@@ -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`} />


+ 9
- 6
packages/react-common-docs/src/pages/index.md View File

@@ -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.

Loading…
Cancel
Save