Merge pull request #2 from PDFTron/lr-dark-theme

Dark theme

Author: liamross

.storybook/manager-head.html

@@ -2,7 +2,9 @@
 <link rel="icon" type="image/png" href="./favicon.png" sizes="291x291" />
 <script>
   const STORYBOOK_IFRAME_SELECTOR = '#storybook-preview-iframe';
-  const CODE_PREVIEW_SELECTOR = '#root > div:not(#story-root):not([class])';
+  const CODE_PREVIEW_SELECTOR =
+    '#root > div:not(#story-root):not(#playground-theme-button):not([class])';
+  const THEME_BUTTON_SELECTOR = '#playground-theme-button';
   const DOCS_ROOT_SELECTOR = '#docs-root';
 
   function withIframe(iframe) {
@@ -13,8 +15,10 @@
       const zoom = Number(iframeBody.style.zoom || 1);
       const adjustedZoom = 1 / zoom;
       const codePreviewWindow = iframeBody.querySelector(CODE_PREVIEW_SELECTOR);
+      const themeButton = iframeBody.querySelector(THEME_BUTTON_SELECTOR);
       const docsRoot = iframeBody.querySelector(DOCS_ROOT_SELECTOR);
       if (codePreviewWindow) codePreviewWindow.style.zoom = adjustedZoom;
+      if (themeButton) themeButton.style.zoom = adjustedZoom;
       if (docsRoot) docsRoot.style.zoom = adjustedZoom;
     });
 

.storybook/preview.tsx

@@ -3,9 +3,9 @@ import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
 import { addDecorator, addParameters } from '@storybook/react';
 import React from 'react';
-import '../src/index.scss';
 import './style.scss';
 import theme from './theme';
+import { withTheme } from './withTheme';
 
 /* --- Add global decorators. --- */
 
@@ -29,6 +29,7 @@ addDecorator(
   }),
 );
 addDecorator(withKnobs);
+addDecorator(withTheme);
 
 /* --- Add global parameters. --- */
 

.storybook/style.scss

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap');
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i,700,700i&display=swap');
+@import '../src/index.scss';
 
 html,
 body {
@@ -8,7 +9,27 @@ body {
   margin: 0 !important;
 }
 
-$color-background-canvas: #eff5f5;
+#playground-theme-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $z-index-dragging;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgb(51, 51, 51);
+  border-bottom-left-radius: 4px;
+  width: 90px;
+  @include flex-center;
+  cursor: pointer;
+  user-select: none;
+
+  &.playground-theme-button__docs {
+    top: 4px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top-left-radius: 4px;
+    position: fixed;
+  }
+}
 
 .sb-show-main > #root {
   background-color: $color-background-canvas;
@@ -56,18 +77,18 @@ $color-background-canvas: #eff5f5;
   display: flex;
   flex-direction: column;
 
-  // Story root or div with class should be auto flexed.
-  > #story-root,
-  > div[class] {
+  // Story root should be auto flexed.
+  > #story-root {
     flex: 1 1 auto;
     overflow: auto;
   }
 
   // Non story root without class is the code preview.
-  > div:not(#story-root):not([class]) {
+  > div:not(#story-root):not(#playground-theme-button):not([class]) {
     flex-shrink: 0;
     max-height: 40%;
     overflow: auto;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 
     > div > *:not(div) {
       display: none;

.storybook/withTheme.tsx

@@ -0,0 +1,25 @@
+import { StoryContext, StoryFn } from '@storybook/addons';
+import React, { useRef, useState } from 'react';
+
+export function withTheme<StoryFnReturnType>(storyFn: StoryFn<StoryFnReturnType>, context: StoryContext) {
+  const html = useRef(document.documentElement);
+
+  const [theme, setTheme] = useState<'' | 'dark'>(() =>
+    html.current.getAttribute('data-theme') === 'dark' ? 'dark' : '',
+  );
+  const toggleTheme = () => {
+    const dark = html.current.getAttribute('data-theme') === 'dark';
+    const newTheme = dark ? '' : 'dark';
+    html.current.setAttribute('data-theme', newTheme);
+    setTheme(newTheme);
+  };
+
+  return (
+    <>
+      <div id="playground-theme-button" onClick={toggleTheme}>
+        {theme === 'dark' ? '☀️' : '🌙'}
+      </div>
+      {storyFn(context)}
+    </>
+  );
+}

commitlint.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
+  rules: {
+    'scope-case': [0, 'always', 'lower-case'],
+  },
 };

scripts/parse_scss.js

@@ -3,21 +3,48 @@ const scss = require('postcss-scss');
 
 /* --- Helpers. --- */
 
+/**
+ * Get the Sass AST from a given file.
+ * @param {string} path Path to a Sass file.
+ */
 function getAST(path) {
   const contents = fs.readFileSync(path);
   return scss.parse(contents.toString());
 }
 
-function propMap(cssVariables) {
+/**
+ * Returns a function which can be used to map any prop/value nodes from a Sass
+ * AST.
+ */
+function propMap() {
+  const themeAst = getAST('src/styles/_theme.scss');
+  const themeNodes = themeAst.nodes;
+
+  const cssVariables = themeNodes
+    .find(n => n.selector === ':root')
+    .nodes.filter(n => n.prop && n.value)
+    .map(d => ({ prop: `var(${d.prop})`, value: d.value }));
+
+  const darkCssVariables = themeNodes
+    .find(n => n.selector === "html[data-theme='dark']")
+    .nodes.filter(n => n.prop && n.value)
+    .map(d => ({ prop: `var(${d.prop})`, value: d.value }));
+
   return declaration => {
     const { p, v } = { p: declaration.prop, v: declaration.value };
     const scss = p;
     const css = v;
     const value = cssVariables.find(c => c.prop === v).value;
-    return { scss, css, value };
+    const dark = (darkCssVariables.find(c => c.prop === v) || {}).value;
+    return { scss, css, value, dark };
   };
 }
 
+/**
+ * Creates a JS or TS file which default exports the AST.
+ * @param {string} path Path to the file.
+ * @param {Object} ast The AST object to convert to JS or TS.
+ */
 function printFile(path, ast) {
   fs.writeFileSync(path, `export default ${JSON.stringify(ast, null, 2)}`);
 }
@@ -102,16 +129,11 @@ function main() {
   mixins();
 
   const ast = getAST('src/styles/_variables.scss');
-  const themeAst = getAST('src/styles/_theme.scss');
-
   const nodes = ast.nodes;
-  const themeNodes = themeAst.nodes;
 
-  const cssVariables = themeNodes
-    .find(n => n.selector === ':root')
-    .nodes.map(d => ({ prop: `var(${d.prop})`, value: d.value }));
+  const mapper = propMap();
 
-  const mapper = propMap(cssVariables);
+  /* --- Generate variables and colors. --- */
 
   const declarations = (() => {
     const color = [];
@@ -147,7 +169,7 @@ function main() {
     };
   })();
 
-  /* --- Generate theme variables and colors. --- */
+  /* --- Map colors and sort by type. --- */
 
   const allColors = declarations.color.map(mapper);
 
@@ -156,22 +178,22 @@ function main() {
     const font = [];
     const gray = [];
     const blueGray = [];
-    const white = [];
+    const contrast = [];
     const other = [];
 
     allColors.forEach(c => {
       if (c.scss.startsWith('$color-theme')) return theme.push(c);
       if (c.scss.startsWith('$color-font')) return font.push(c);
       if (c.scss.startsWith('$color-gray')) return gray.push(c);
       if (c.scss.startsWith('$color-blue-gray')) return blueGray.push(c);
-      if (c.scss.startsWith('$color-white')) return white.push(c);
+      if (c.scss.startsWith('$color-contrast')) return contrast.push(c);
       other.push(c);
     });
 
-    return { theme, font, gray, blueGray, white, other };
+    return { theme, font, gray, blueGray, contrast, other };
   })();
 
-  /* --- Generate others. --- */
+  /* --- Map variables. --- */
 
   const fontSize = declarations.fontSize.map(mapper);
   const fontWeight = declarations.fontWeight.map(mapper);

src/__stories__/2_style/1_colors.stories.mdx

@@ -27,6 +27,30 @@ div {
   font-color: $color-font-primary;
 }
 ```
+
+## Themes
+
+You may have noticed the theme button on the top right, which can also be found
+on any of the Components. The toolkit ships with a default light and dark theme,
+and you can switch between them using this button! To see what the colors would
+be for each theme, scroll down to the
+[CSS and Sass Variables](#css-and-sass-variables) section and click the theme
+button.
+
+To set the theme, you need to set the `data-theme` attribute of your `html` to
+`'dark'`. This can be done right in the HTML if you want to permanently enable
+dark theme:
+
+```html
+<html data-theme="dark">
+```
+
+Or programmatically in JavaScript (this will allow switching themes dynamically):
+
+```js
+document.documentElement.setAttribute('data-theme', 'dark');
+```
+
 ## Overriding
 
 These can be overridden by setting the variables yourself in the root. Since the
@@ -35,10 +59,18 @@ colors used across the toolkit. Here's an example of overriding the theme colors
 
 ```css
 /* your_custom_theme.css */
+
+/* Overriding light theme. */
 :root {
   --color-font-primary: red;
   --color-font-secondary: orange;
 }
+
+/* Overriding dark theme. */
+html[data-theme='dark'] {
+  --color-font-primary: green;
+  --color-font-secondary: blue;
+}
 ```
 
 ## CSS and Sass Variables

src/__stories__/2_style/3_mixins.stories.mdx

@@ -9,6 +9,9 @@ The WebViewer React Toolkit ships with some Sass mixins that wrap common
 patterns. These can only be used in Sass files, but the code is provided below
 so that you can implement them in CSS if you wish.
 
+> Note: These mixins rely on Sass variables. If you wish to use these, you must
+> also include the variables file.
+>
 > For more on Sass mixins, check out the
 > [Sass documentation](https://sass-lang.com/documentation/at-rules/mixin).
 
@@ -28,8 +31,9 @@ div {
 
 ## Mixins
 
-The following mixins show the  sdinfpwionfipwenpfinYou can click any of these to copy the
-value to your clipboard.
+The following mixins show the value you can include in your code, as well as the
+raw values in case you wish to modify them in your own code. You can click any
+of these to copy the value to your clipboard.
 
 <!-- Below here is auto-generated. DO NOT EDIT. -->
 <!-- GENERATE_ENTRY -->
@@ -129,12 +133,7 @@ value to your clipboard.
 // This provides the animation for skeleton loading.
 @mixin skeleton {
   animation: timeline 2s linear infinite;
-  background: linear-gradient(
-    to right,
-    $color-gray-1 0%,
-    $color-gray-2 10%,
-    $color-gray-1 20%
-  );
+  background: linear-gradient(to right, #eee 0%, #ddd 10%, #eee 20%);
   background-size: 600px auto;
 }