Browse Source

Attempt to style storybook instance

Apply theming to storybook.
refactor/pridepack-storybook
TheoryOfNekomata 3 years ago
parent
commit
1838385fe8
29 changed files with 332 additions and 10 deletions
  1. +10
    -2
      packages/react-common/.storybook/main.js
  2. +6
    -0
      packages/react-common/.storybook/manager-head.html
  3. +23
    -0
      packages/react-common/.storybook/manager.js
  4. +6
    -5
      packages/react-common/.storybook/preview-head.html
  5. +1
    -1
      packages/react-common/docs/00-introduction.stories.mdx
  6. +2
    -2
      packages/react-common/package.json
  7. BIN
      packages/react-common/public/favicon.ico
  8. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Bold.eot
  9. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Bold.ttf
  10. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Bold.woff
  11. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Bold.woff2
  12. BIN
      packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.eot
  13. BIN
      packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.ttf
  14. BIN
      packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff
  15. BIN
      packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff2
  16. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Italic.eot
  17. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Italic.ttf
  18. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Italic.woff
  19. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Italic.woff2
  20. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Regular.eot
  21. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Regular.ttf
  22. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Regular.woff
  23. BIN
      packages/react-common/public/fonts/mononoki/mononoki-Regular.woff2
  24. +72
    -0
      packages/react-common/public/global.css
  25. +166
    -0
      packages/react-common/public/theme.css
  26. +19
    -0
      packages/react-common/public/theme/dark.css
  27. +19
    -0
      packages/react-common/public/theme/light.css
  28. +3
    -0
      packages/react-common/src/components/Button/index.tsx
  29. +5
    -0
      packages/react-common/src/components/MultilineTextInput/index.tsx

+ 10
- 2
packages/react-common/.storybook/main.js View File

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

+ 6
- 0
packages/react-common/.storybook/manager-head.html View File

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

+ 23
- 0
packages/react-common/.storybook/manager.js View File

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

+ 6
- 5
packages/react-common/.storybook/preview-head.html View File

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

+ 1
- 1
packages/react-common/docs/00-introduction.stories.mdx View File

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

+ 2
- 2
packages/react-common/package.json View File

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


BIN
packages/react-common/public/favicon.ico View File

Before After

BIN
packages/react-common/public/fonts/mononoki/mononoki-Bold.eot View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Bold.ttf View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Bold.woff View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Bold.woff2 View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.eot View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.ttf View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-BoldItalic.woff2 View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Italic.eot View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Italic.ttf View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Italic.woff View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Italic.woff2 View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Regular.eot View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Regular.ttf View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Regular.woff View File


BIN
packages/react-common/public/fonts/mononoki/mononoki-Regular.woff2 View File


+ 72
- 0
packages/react-common/public/global.css View File

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

+ 166
- 0
packages/react-common/public/theme.css View File

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

+ 19
- 0
packages/react-common/public/theme/dark.css View File

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

+ 19
- 0
packages/react-common/public/theme/light.css View File

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

+ 3
- 0
packages/react-common/src/components/Button/index.tsx View File

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


+ 5
- 0
packages/react-common/src/components/MultilineTextInput/index.tsx View File

@@ -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 && (


Loading…
Cancel
Save