Attempt to style storybook instance

Apply theming to storybook.

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,
+      }
+    },
   ]
 }

packages/react-common/.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<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="global.css" />
+<link rel="stylesheet" href="theme.css" />
+<link rel="stylesheet" href="theme/dark.css" />
+<link rel="alternate stylesheet" title="Light" href="theme/light.css" />

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)',
+  })
+})

packages/react-common/.storybook/preview-head.html

@@ -1,5 +1,6 @@
-<style>
-  :root {
-    font-family: var(--font-family-base, sans-serif);
-  }
-</style>
+<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="global.css" />
+<link rel="stylesheet" href="theme.css" />
+<link rel="stylesheet" href="theme/dark.css" />
+<link rel="alternate stylesheet" title="Light" href="theme/light.css" />

packages/react-common/docs/00-introduction.stories.mdx

@@ -3,7 +3,7 @@ import Readme from '../README.md';
 
 <Meta
   title="Introduction"
-  parameters={{ previewTabs: { canvas: { hidden: true } } }}
+  parameters={{ previewTabs: { canvas: { hidden: true }, docs: { hidden: true } } }}
 />
 
 <Readme />

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",

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;
+  }
+}

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

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;
+}

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;
+}

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'

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<HTMLTextAreaElement, Props>(
           height: `calc(${MIN_HEIGHTS[size!]} * ${rows})`,
           minHeight: MIN_HEIGHTS[size!],
           resize: block ? 'vertical' : 'both',
+          cursor: disabled ? 'not-allowed' : undefined,
         }}
       >
         {label && (