From 91ce368c44bccfb25964d02304c35a69d5471aca Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sun, 8 Dec 2019 23:57:14 -0800 Subject: [PATCH] feat(v2): add color generator for primary colors --- website/docs/migrating-from-v1-to-v2.md | 12 +- website/docs/styling-layout.md | 8 +- website/package.json | 1 + .../src/components/ColorGenerator/index.js | 167 ++++++++++++++++++ .../ColorGenerator/styles.module.css | 23 +++ yarn.lock | 2 +- 6 files changed, 209 insertions(+), 4 deletions(-) create mode 100644 website/src/components/ColorGenerator/index.js create mode 100644 website/src/components/ColorGenerator/styles.module.css diff --git a/website/docs/migrating-from-v1-to-v2.md b/website/docs/migrating-from-v1-to-v2.md index 6aa4657d8fb3..510cb543b91e 100644 --- a/website/docs/migrating-from-v1-to-v2.md +++ b/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:** @@ -163,7 +165,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 @@ -182,7 +184,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 /** @@ -201,6 +203,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`. + + + #### `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`: diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md index a987b79ce5d4..3e33fab5d908 100644 --- a/website/docs/styling-layout.md +++ b/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`. + + diff --git a/website/package.json b/website/package.json index c0be6c85f08b..21fd97f981b1 100644 --- a/website/package.json +++ b/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" }, diff --git a/website/src/components/ColorGenerator/index.js b/website/src/components/ColorGenerator/index.js new file mode 100644 index 000000000000..f3e491103e9a --- /dev/null +++ b/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 ( +
+

+ Primary Color:{' '} + { + const colorValue = event.target.value; + try { + Color('#' + colorValue); + setBaseColor(colorValue); + } catch { + // Don't update for invalid colors. + } + }} + /> +

+
+ + + + + + + + + + {adjustedColors + .sort((a, b) => a.displayOrder - b.displayOrder) + .map(value => { + const {variableName, adjustment, adjustmentInput, hex} = value; + return ( + + + + + + ); + })} + +
CSS Variable NameHexAdjustment
+ {variableName} + + + + {hex.toLowerCase()} + + + {variableName === '-ifm-color-primary' ? ( + 0 + ) : ( + { + const newValue = parseFloat(event.target.value); + setShades({ + ...shades, + [variableName]: { + ...shades[variableName], + adjustmentInput: event.target.value, + adjustment: isNaN(newValue) + ? adjustment + : newValue / 100.0, + }, + }); + }} + /> + )} +
+
+

+ Replace the variables in src/css/custom.css with these new + variables. +

+ 
+        {adjustedColors
+          .sort((a, b) => a.codeOrder - b.codeOrder)
+          .map(value => `${value.variableName}: ${value.hex.toLowerCase()};`)
+          .join('\n')}
+
+
+ ); +} + +export default ColorGenerator; diff --git a/website/src/components/ColorGenerator/styles.module.css b/website/src/components/ColorGenerator/styles.module.css new file mode 100644 index 000000000000..c66770c2b694 --- /dev/null +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 1d7910d42db8..af61e867d749 100644 --- a/yarn.lock +++ b/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==