Skip to content

Commit

Permalink
feat(v2): add color generator for primary colors
Browse files Browse the repository at this point in the history
  • Loading branch information
yangshun committed Dec 9, 2019
1 parent 55e676c commit 91ce368
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 4 deletions.
12 changes: 10 additions & 2 deletions website/docs/migrating-from-v1-to-v2.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:**
Expand Down Expand Up @@ -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
Expand All @@ -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
/**
Expand All @@ -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`.

<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`:
Expand Down
8 changes: 7 additions & 1 deletion website/docs/styling-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 -->

Expand Down
1 change: 1 addition & 0 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
167 changes: 167 additions & 0 deletions website/src/components/ColorGenerator/index.js
Original file line number Diff line number Diff line change
@@ -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;
23 changes: 23 additions & 0 deletions website/src/components/ColorGenerator/styles.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down

0 comments on commit 91ce368

Please sign in to comment.