feat(v2): add color generator for primary colors (#2104)

website/docs/migrating-from-v1-to-v2.md

@@ -3,6 +3,8 @@ id: migrating-from-v1-to-v2
 title: Migrating from v1 to v2
 ---
 
+import ColorGenerator from '@site/src/components/ColorGenerator';
+
 This doc guides you through migrating an existing Docusaurus 1 site to Docusaurus 2.
 
 **Note: This migration guide is targeted at Docusaurus users without translation and/or versioning features and assumes the following structure:**
@@ -165,7 +167,7 @@ No actions needed.
 
 #### `colors`
 
-Deprecated. We wrote a custom CSS framework for Docusaurus 2 called Infima which uses CSS variables for theming. The docs are not quite ready yet and we will update here when it is. To overwrite Infima' CSS variables, create your own CSS file (e.g. `./src/css/custom.css`) and import it globally by passing it as an option to `@docusaurus/preset-classic`:
+Deprecated. We wrote a custom CSS framework for Docusaurus 2 called Infima which uses CSS variables for theming. The docs are not quite ready yet and we will update here when it is. To overwrite Infima's CSS variables, create your own CSS file (e.g. `./src/css/custom.css`) and import it globally by passing it as an option to `@docusaurus/preset-classic`:
 
 ```js {8-10}
 // docusaurus.config.js
@@ -184,7 +186,7 @@ module.exports = {
 };
 ```
 
-Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.colorbox.io/) to find the different shades of colors for your chosen primary color.
+Infima uses 7 shades of each color.
 
 ```css
 /**
@@ -203,6 +205,12 @@ Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.co
 }
 ```
 
+We recommend using [ColorBox](https://www.colorbox.io/) to find the different shades of colors for your chosen primary color.
+
+Alteratively, use the following tool to generate the different shades for your website and copy the variables into `src/css/custom.css`.
+
+<ColorGenerator/>
+
 #### `footerIcon`, `copyright`, `ogImage`, `twitterImage`, `docsSideNavCollapsible`
 
 Site meta info such as assets, SEO, copyright info are now handled by themes. To customize them, use the `themeConfig` field in your `docusaurus.config.js`:

website/docs/styling-layout.md

@@ -4,6 +4,8 @@ title: Styling and Layout
 description: A Docusaurus site is a pre-rendered single-page React application. You can style it the way you style React apps.
 ---
 
+import ColorGenerator from '@site/src/components/ColorGenerator';
+
 ## Traditional CSS
 
 If you're using `@docusaurus/preset-classic`, you can create your own CSS files (e.g. `/src/css/custom.css`) and import them globally by passing it as an option into the preset.
@@ -51,7 +53,11 @@ When you `init` your Docusaurus 2 project, the website will be generated with ba
 }
 ```
 
-Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.colorbox.io/) to find the different shades of colors for your chosen primary color. In future, we will provide an easier way to generate the different shades of colors.
+Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.colorbox.io/) to find the different shades of colors for your chosen primary color.
+
+Alternatively, use the following tool to generate the different shades for your website and copy the variables into `src/css/custom.css`.
+
+<ColorGenerator/>
 
 <!-- TODO need more refinement here -->
 

website/package.json

@@ -13,6 +13,7 @@
     "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.39",
     "@docusaurus/preset-classic": "^2.0.0-alpha.39",
     "classnames": "^2.2.6",
+    "color": "^3.1.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },

website/src/components/ColorGenerator/index.js

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState} from 'react';
+
+import Color from 'color';
+
+import styles from './styles.module.css';
+
+const COLOR_SHADES = {
+  '-ifm-color-primary': {
+    adjustment: 0,
+    adjustmentInput: 0,
+    displayOrder: 3,
+    codeOrder: 0,
+  },
+  '-ifm-color-primary-dark': {
+    adjustment: 0.1,
+    adjustmentInput: '10',
+    displayOrder: 4,
+    codeOrder: 1,
+  },
+  '-ifm-color-primary-darker': {
+    adjustment: 0.15,
+    adjustmentInput: '15',
+    displayOrder: 5,
+    codeOrder: 2,
+  },
+  '-ifm-color-primary-darkest': {
+    adjustment: 0.3,
+    adjustmentInput: '30',
+    displayOrder: 6,
+    codeOrder: 3,
+  },
+  '-ifm-color-primary-light': {
+    adjustment: -0.1,
+    adjustmentInput: '-10',
+    displayOrder: 2,
+    codeOrder: 4,
+  },
+  '-ifm-color-primary-lighter': {
+    adjustment: -0.15,
+    adjustmentInput: '-15',
+    displayOrder: 1,
+    codeOrder: 5,
+  },
+  '-ifm-color-primary-lightest': {
+    adjustment: -0.3,
+    adjustmentInput: '-30',
+    displayOrder: 0,
+    codeOrder: 6,
+  },
+};
+
+const DEFAULT_PRIMARY_COLOR = '3578e5';
+
+function ColorGenerator({children, minHeight, url}) {
+  const [baseColor, setBaseColor] = useState(DEFAULT_PRIMARY_COLOR);
+  const [shades, setShades] = useState(COLOR_SHADES);
+  const color = Color('#' + baseColor);
+  const adjustedColors = Object.keys(shades)
+    .map(shade => ({
+      ...shades[shade],
+      variableName: shade,
+    }))
+    .map(value => ({
+      ...value,
+      hex: color.darken(value.adjustment).hex(),
+    }));
+
+  return (
+    <div>
+      <p>
+        <strong className="margin-right--sm">Primary Color:</strong>{' '}
+        <input
+          className={styles.input}
+          defaultValue={baseColor}
+          onChange={event => {
+            const colorValue = event.target.value;
+            try {
+              Color('#' + colorValue);
+              setBaseColor(colorValue);
+            } catch {
+              // Don't update for invalid colors.
+            }
+          }}
+        />
+      </p>
+      <div>
+        <table>
+          <thead>
+            <tr>
+              <th>CSS Variable Name</th>
+              <th>Hex</th>
+              <th>Adjustment</th>
+            </tr>
+          </thead>
+          <tbody>
+            {adjustedColors
+              .sort((a, b) => a.displayOrder - b.displayOrder)
+              .map(value => {
+                const {variableName, adjustment, adjustmentInput, hex} = value;
+                return (
+                  <tr key={variableName}>
+                    <td>
+                      <code>{variableName}</code>
+                    </td>
+                    <td>
+                      <span
+                        className={styles.color}
+                        style={{
+                          backgroundColor: hex,
+                        }}
+                      />
+                      <code className="margin-left--sm">
+                        {hex.toLowerCase()}
+                      </code>
+                    </td>
+                    <td>
+                      {variableName === '-ifm-color-primary' ? (
+                        0
+                      ) : (
+                        <input
+                          className={styles.input}
+                          type="number"
+                          value={adjustmentInput}
+                          onChange={event => {
+                            const newValue = parseFloat(event.target.value);
+                            setShades({
+                              ...shades,
+                              [variableName]: {
+                                ...shades[variableName],
+                                adjustmentInput: event.target.value,
+                                adjustment: isNaN(newValue)
+                                  ? adjustment
+                                  : newValue / 100.0,
+                              },
+                            });
+                          }}
+                        />
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
+          </tbody>
+        </table>
+      </div>
+      <p>
+        Replace the variables in <code>src/css/custom.css</code> with these new
+        variables.
+      </p>
+      <pre>
+        {adjustedColors
+          .sort((a, b) => a.codeOrder - b.codeOrder)
+          .map(value => `${value.variableName}: ${value.hex.toLowerCase()};`)
+          .join('\n')}
+      </pre>
+    </div>
+  );
+}
+
+export default ColorGenerator;

website/src/components/ColorGenerator/styles.module.css

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.color {
+  border-radius: 0.5rem;
+  display: inline-block;
+  vertical-align: middle;
+  width: 2rem;
+  height: 2rem;
+}
+
+.input {
+  border-color: var(--ifm-color-content-secondary);
+  border-radius: var(--ifm-global-radius);
+  border-style: solid;
+  border-width: var(--ifm-global-border-width);
+  font-size: var(--ifm-font-size-base);
+  padding: 0.5rem;
+}

yarn.lock

@@ -4291,7 +4291,7 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0, color@^3.1.1:
+color@^3.0.0, color@^3.1.1, color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==