diff --git a/packages/react-common/.storybook/main.js b/packages/react-common/.storybook/main.js index 54b999b..168ba5b 100644 --- a/packages/react-common/.storybook/main.js +++ b/packages/react-common/.storybook/main.js @@ -7,8 +7,6 @@ module.exports = { "../src/**/*.stories.@(js|jsx|ts|tsx)" ], addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", { name: '@storybook/addon-docs', options: { @@ -18,5 +16,15 @@ module.exports = { transcludeMarkdown: true, } }, + "@storybook/addon-links", + { + name: '@storybook/addon-essentials', + options: { + backgrounds: false, + viewport: false, + measure: false, + outline: false, + } + }, ] } diff --git a/packages/react-common/.storybook/manager-head.html b/packages/react-common/.storybook/manager-head.html new file mode 100644 index 0000000..27fe4cf --- /dev/null +++ b/packages/react-common/.storybook/manager-head.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/react-common/.storybook/manager.js b/packages/react-common/.storybook/manager.js new file mode 100644 index 0000000..5a64fdf --- /dev/null +++ b/packages/react-common/.storybook/manager.js @@ -0,0 +1,23 @@ +import { addons } from '@storybook/addons'; +import { create } from '@storybook/theming'; + +addons.setConfig({ + toolbar: { + zoom: { hidden: true }, + }, + enableShortcuts: false, + initialActive: 'canvas', + theme: create({ + base: 'dark', + appBg: 'var(--color-bg, white)', + appBorderColor: 'transparent', + appBorderRadius: 0, + appContentBg: 'transparent', + fontBase: 'var(--font-family-base, sans-serif)', + barSelectedColor: 'var(--color-primary, blue)', + barBg: 'transparent', + colorPrimary: 'var(--color-primary, blue)', + colorSecondary: '#f90', + //textColor: 'var(--color-fg, black)', + }) +}) diff --git a/packages/react-common/.storybook/preview-head.html b/packages/react-common/.storybook/preview-head.html index 5ea027b..27fe4cf 100644 --- a/packages/react-common/.storybook/preview-head.html +++ b/packages/react-common/.storybook/preview-head.html @@ -1,5 +1,6 @@ - + + + + + + diff --git a/packages/react-common/docs/00-introduction.stories.mdx b/packages/react-common/docs/00-introduction.stories.mdx index c4fb9cb..d288d06 100644 --- a/packages/react-common/docs/00-introduction.stories.mdx +++ b/packages/react-common/docs/00-introduction.stories.mdx @@ -3,7 +3,7 @@ import Readme from '../README.md'; diff --git a/packages/react-common/package.json b/packages/react-common/package.json index 6eeafea..9bd5bf2 100644 --- a/packages/react-common/package.json +++ b/packages/react-common/package.json @@ -67,8 +67,8 @@ "test": "pridepack test --passWithNoTests", "clean": "pridepack clean", "watch": "pridepack watch", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" + "storybook": "start-storybook -p 6006 -s public", + "build-storybook": "build-storybook -s public" }, "dependencies": { "@reach/slider": "^0.16.0", diff --git a/packages/react-common/public/favicon.ico b/packages/react-common/public/favicon.ico new file mode 100644 index 0000000..4965832 Binary files /dev/null and b/packages/react-common/public/favicon.ico differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Bold.eot b/packages/react-common/public/fonts/mononoki/mononoki-Bold.eot new file mode 100644 index 0000000..cf2a252 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Bold.eot differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Bold.ttf b/packages/react-common/public/fonts/mononoki/mononoki-Bold.ttf new file mode 100644 index 0000000..407ed3e Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Bold.ttf differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Bold.woff b/packages/react-common/public/fonts/mononoki/mononoki-Bold.woff new file mode 100644 index 0000000..a6f5e8a Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Bold.woff differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Bold.woff2 b/packages/react-common/public/fonts/mononoki/mononoki-Bold.woff2 new file mode 100644 index 0000000..adb5b15 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Bold.woff2 differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.eot b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.eot new file mode 100644 index 0000000..70968d6 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.eot differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.ttf b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.ttf new file mode 100644 index 0000000..784c2d0 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.ttf differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff new file mode 100644 index 0000000..f0d6ed7 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff2 b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff2 new file mode 100644 index 0000000..3cc80cd Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff2 differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Italic.eot b/packages/react-common/public/fonts/mononoki/mononoki-Italic.eot new file mode 100644 index 0000000..53c1e62 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Italic.eot differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Italic.ttf b/packages/react-common/public/fonts/mononoki/mononoki-Italic.ttf new file mode 100644 index 0000000..dad4dcc Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Italic.ttf differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Italic.woff b/packages/react-common/public/fonts/mononoki/mononoki-Italic.woff new file mode 100644 index 0000000..fb690ec Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Italic.woff differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Italic.woff2 b/packages/react-common/public/fonts/mononoki/mononoki-Italic.woff2 new file mode 100644 index 0000000..30cbd0d Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Italic.woff2 differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Regular.eot b/packages/react-common/public/fonts/mononoki/mononoki-Regular.eot new file mode 100644 index 0000000..26e5357 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Regular.eot differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Regular.ttf b/packages/react-common/public/fonts/mononoki/mononoki-Regular.ttf new file mode 100644 index 0000000..9510ac8 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Regular.ttf differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Regular.woff b/packages/react-common/public/fonts/mononoki/mononoki-Regular.woff new file mode 100644 index 0000000..939ec2a Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Regular.woff differ diff --git a/packages/react-common/public/fonts/mononoki/mononoki-Regular.woff2 b/packages/react-common/public/fonts/mononoki/mononoki-Regular.woff2 new file mode 100644 index 0000000..2c23a36 Binary files /dev/null and b/packages/react-common/public/fonts/mononoki/mononoki-Regular.woff2 differ diff --git a/packages/react-common/public/global.css b/packages/react-common/public/global.css new file mode 100644 index 0000000..0903637 --- /dev/null +++ b/packages/react-common/public/global.css @@ -0,0 +1,72 @@ +body { + margin: 0; +} + +h1 { + font-size: 3em; + text-transform: lowercase; +} + +h2 { + font-size: 2em; + text-transform: lowercase; +} + +h3 { + font-size: 1.75em; + text-transform: lowercase; +} + +h4 { + font-size: 1.5em; + text-transform: lowercase; +} + +h5 { + font-size: 1.25em; + text-transform: lowercase; +} + +h6 { + font-size: 1.125em; + text-transform: lowercase; +} + +p { + margin: 2em 0; +} + +small { + font-size: 0.75em; +} + +a:focus { + outline: 0; +} + +pre { + overflow: auto; + margin: 0 -1rem; + padding: 0 1rem; + line-height: 1.2; + box-sizing: border-box; +} + +@media only print { + pre, pre * { + color: inherit !important; + } + + code, code * { + color: inherit !important; + } + + img { + filter: grayscale(100%); + } + + :root { + --color-accent: black !important; + --color-active: black !important; + } +} diff --git a/packages/react-common/public/theme.css b/packages/react-common/public/theme.css new file mode 100644 index 0000000..b336cde --- /dev/null +++ b/packages/react-common/public/theme.css @@ -0,0 +1,166 @@ +@font-face { + font-family: 'mononoki'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: + local('mononoki'), + url(fonts/mononoki/mononoki-Regular.woff2) format('woff2'); +} + +@font-face { + font-family: 'mononoki'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: + local('mononoki Bold'), + local('mononoki'), + url(fonts/mononoki/mononoki-Bold.woff2) format('woff2'); +} + +@font-face { + font-family: 'mononoki'; + font-weight: 400; + font-style: italic; + font-display: swap; + src: + local('mononoki Italic'), + local('mononoki'), + url(fonts/mononoki/mononoki-Italic.woff2) format('woff2'); +} + +@font-face { + font-family: 'mononoki'; + font-weight: 700; + font-style: italic; + font-display: swap; + src: + local('mononoki Bold Italic'), + local('mononoki BoldItalic'), + local('mononoki'), + url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2'); +} + +:root { + --font-family-base: 'Encode Sans', system-ui; + --font-stretch-base: semi-expanded; + --font-weight-base: 400; + --line-height-base: 1.5em; + --font-family-headings: 'Encode Sans', system-ui; + --font-stretch-headings: condensed; + --font-weight-headings: 100; + --line-height-headings: 1.125em; + --font-family-monospace: 'mononoki'; + --font-size-root: 16px; + --opacity-light: 0.25; + --opacity-lighter: 0.5; + --opacity-lightest: 0.75; +} + +:root { + --color-bg: var(--color-negative, white); + --color-fg: var(--color-positive, black); + --color-accent: var(--color-primary, blue); + --color-active: var(--color-secondary, red); +} + +@media (prefers-color-scheme: dark) { + :root { + --color-bg: var(--color-negative, black); + --color-fg: var(--color-positive, white); + } +} + +:root { + font-size: var(--font-size-root); + font-family: var(--font-family-base), sans-serif; + font-stretch: var(--font-stretch-base, normal); + font-weight: var(--font-weight-base, 400); + line-height: var(--line-height-base, 1.5); + transition-property: color, background-color; + transition-timing-function: ease; + 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); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h2 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + 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: calc(var(--font-weight-headings, 400) / 100 * 250); + line-height: var(--line-height-headings, 1.5); +} + +h4 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h5 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h6 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +code { + font-family: var(--font-family-monospace), monospace; +} + +pre { + font-family: var(--font-family-monospace), monospace; +} + +a { + 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/public/theme/dark.css b/packages/react-common/public/theme/dark.css new file mode 100644 index 0000000..8f984bf --- /dev/null +++ b/packages/react-common/public/theme/dark.css @@ -0,0 +1,19 @@ +:root { + --color-shade: #000; + --color-negative: #222; + --color-positive: #eee; + --color-primary: #C78AB3; + --color-secondary: #f90; + --color-code-number: #74f95e; + --color-code-keyword: #ff4389; + --color-code-type: #5097D2; + --color-code-instance-attribute: #76a7d2; + --color-code-function: #67c252; + --color-code-parameter: #915ec2; + --color-code-property: #ffa1c9; + --color-code-string: #eed371; + --color-code-variable: #8bc275; + --color-code-regexp: #74A72B; + --color-code-url: #0099CC; + --color-code-global: #C28050; +} diff --git a/packages/react-common/public/theme/light.css b/packages/react-common/public/theme/light.css new file mode 100644 index 0000000..9482fb9 --- /dev/null +++ b/packages/react-common/public/theme/light.css @@ -0,0 +1,19 @@ +:root { + --color-shade: #fff; + --color-negative: #f8f8f8; + --color-positive: #333; + --color-primary: #ba6a9c; + --color-secondary: #f90; + --color-code-number: #72b507; + --color-code-keyword: #ee5189; + --color-code-type: #427fb1; + --color-code-instance-attribute: #76a7d2; + --color-code-function: #5a984a; + --color-code-parameter: #915ec2; + --color-code-property: #b76e8d; + --color-code-string: #b59e36; + --color-code-variable: #61864e; + --color-code-regexp: #4f7e03; + --color-code-url: #0099CC; + --color-code-global: #C28050; +} diff --git a/packages/react-common/src/components/Button/index.tsx b/packages/react-common/src/components/Button/index.tsx index b122bf7..0f461bb 100644 --- a/packages/react-common/src/components/Button/index.tsx +++ b/packages/react-common/src/components/Button/index.tsx @@ -110,6 +110,9 @@ const Border = styled('span')({ [`${Base}:focus &::before`]: { boxShadow: '0 0 0 0.375rem var(--color-accent, blue)', }, + [`${LinkBase}:focus &::before`]: { + boxShadow: '0 0 0 0.375rem var(--color-accent, blue)', + }, }) Border.displayName = 'span' diff --git a/packages/react-common/src/components/MultilineTextInput/index.tsx b/packages/react-common/src/components/MultilineTextInput/index.tsx index 8cb3601..1a3a68e 100644 --- a/packages/react-common/src/components/MultilineTextInput/index.tsx +++ b/packages/react-common/src/components/MultilineTextInput/index.tsx @@ -60,6 +60,10 @@ const CaptureArea = styled('label')({ borderRadius: 'inherit', overflow: 'hidden', boxSizing: 'border-box', + cursor: 'text', + 'fieldset[disabled] &': { + cursor: 'not-allowed', + }, }) CaptureArea.displayName = 'label' @@ -264,6 +268,7 @@ export const MultilineTextInput = React.forwardRef( height: `calc(${MIN_HEIGHTS[size!]} * ${rows})`, minHeight: MIN_HEIGHTS[size!], resize: block ? 'vertical' : 'both', + cursor: disabled ? 'not-allowed' : undefined, }} > {label && (