🔥 Supprime le HOC withColours

Renomme colour en color, pour-être cohérent avec le CSS
2019-12-18 22:32:26 +01:00 · 2019-12-18 22:32:26 +01:00 · e5b42e2321
parent ca5b7cc2df
commit e5b42e2321
54 changed files with 405 additions and 444 deletions
--- a/package.json
+++ b/package.json
@ -104,6 +104,7 @@
 		"@babel/preset-react": "^7.0.0",
 		"@babel/preset-typescript": "^7.6.0",
 		"@types/classnames": "^2.2.9",
+		"@types/color-convert": "^1.9.0",
 		"@types/iframe-resizer": "^3.5.7",
 		"@types/ramda": "^0.26.33",
 		"@types/raven-for-redux": "^1.1.1",
--- a/source/Provider.tsx
+++ b/source/Provider.tsx
@ -1,4 +1,4 @@
-import { ThemeColoursProvider } from 'Components/utils/withColours'
+import { ThemeColorsProvider } from 'Components/utils/colors'
 import { SitePathProvider, SitePaths } from 'Components/utils/withSitePaths'
 import { TrackerProvider } from 'Components/utils/withTracker'
 import { createBrowserHistory, History } from 'history'
@ -102,8 +102,8 @@ export default class Provider extends PureComponent<ProviderProps> {
 		return (
 			// If IE < 11 display nothing
 			<ReduxProvider store={this.store}>
-				<ThemeColoursProvider
-					colour={iframeCouleur && decodeURIComponent(iframeCouleur)}
+				<ThemeColorsProvider
+					color={iframeCouleur && decodeURIComponent(iframeCouleur)}
 				>
 					<TrackerProvider value={this.props.tracker}>
 						<SitePathProvider value={this.props.sitePaths}>
@ -114,7 +114,7 @@ export default class Provider extends PureComponent<ProviderProps> {
 							</I18nextProvider>
 						</SitePathProvider>
 					</TrackerProvider>
-				</ThemeColoursProvider>
+				</ThemeColorsProvider>
 			</ReduxProvider>
 		)
 	}
--- a/source/components/Banner.css
+++ b/source/components/Banner.css
@ -3,7 +3,7 @@
 	align-items: center;
 	margin: 1rem 0;
 	max-width: 100%;
-	color: var(--lighterInverseTextColour);
+	color: var(--lighterInverseTextColor);
 	width: 45rem;
 }

--- a/source/components/Distribution.css
+++ b/source/components/Distribution.css
@ -63,7 +63,7 @@
 }
@media print {
 	.distribution-chart__bar {
-		box-shadow: inset 0 0 0 1000px var(--colour);
+		box-shadow: inset 0 0 0 1000px var(--color);
 	}
 }

--- a/source/components/Distribution.tsx
+++ b/source/components/Distribution.tsx
@ -1,5 +1,5 @@
+import { ThemeColorsContext } from 'Components/utils/colors'
 import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
-import { ThemeColoursContext } from 'Components/utils/withColours'
 import Value from 'Components/Value'
 import { findRuleByDottedName } from 'Engine/rules'
 import React, { useContext } from 'react'
@ -57,7 +57,7 @@ export function DistributionBranch({
 	const [intersectionRef, brancheInViewport] = useDisplayOnIntersecting({
 		threshold: 0.5
 	})
-	const colours = useContext(ThemeColoursContext)
+	const { color } = useContext(ThemeColorsContext)
 	const branche = findRuleByDottedName(rules, dottedName)
 	const montant = brancheInViewport ? value : 0
 	const styles = useSpring({
@ -86,7 +86,7 @@ export function DistributionBranch({
 				<ChartItemBar
 					{...{
 						styles,
-						colour: colours.colour,
+						color,
 						montant,
 						total: distribution.total
 					}}
@ -96,12 +96,12 @@ export function DistributionBranch({
 	)
 }

-let ChartItemBar = ({ styles, colour, montant }) => (
+let ChartItemBar = ({ styles, color, montant }) => (
 	<div className="distribution-chart__bar-container">
 		<animated.div
 			className="distribution-chart__bar"
 			style={{
-				backgroundColor: colour,
+				backgroundColor: color,
 				...(!isIE()
 					? { flex: styles.flex }
 					: { minWidth: styles.flex * 500 + 'px' })
@ -111,7 +111,7 @@ let ChartItemBar = ({ styles, colour, montant }) => (
 			css={`
 				font-weight: bold;
 				margin-left: 1rem;
-				color: var(--textColourOnWhite);
+				color: var(--textColorOnWhite);
 			`}
 		>
 			<Value maximumFractionDigits={0} unit="€">
--- a/source/components/Feedback/Feedback.css
+++ b/source/components/Feedback/Feedback.css
@ -4,7 +4,7 @@
 	flex-wrap: wrap;
 	padding-top: 0.6rem;
 	padding-bottom: 0.6rem;
-	background: var(--lightestColour);
+	background: var(--lightestColor);
 	border-radius: 0.9rem;
 	padding: 0.6rem 1rem;
 	margin: 1rem 0;
--- a/source/components/FindCompany.tsx
+++ b/source/components/FindCompany.tsx
@ -47,7 +47,7 @@ export default function Search() {
 					padding: 0.4rem;
 					margin: 0.2rem 0;
 					width: 100%;
-					border: 1px solid var(--lighterTextColour);
+					border: 1px solid var(--lighterTextColor);
 					border-radius: 0.3rem;
 					color: inherit;
 					font-size: inherit;
@ -55,7 +55,7 @@ export default function Search() {
 					position: relative;

 					:focus {
-						border-color: var(--colour);
+						border-color: var(--color);
 					}
 				`}
 				onChange={e => {
@ -85,7 +85,7 @@ export default function Search() {
 							border-radius: 0.3rem;
 							:hover,
 							:focus {
-								background-color: var(--lighterColour);
+								background-color: var(--lighterColor);
 							}
 						`}
 					>
--- a/source/components/PaySlip.tsx
+++ b/source/components/PaySlip.tsx
@ -1,4 +1,4 @@
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import Value from 'Components/Value'
 import { findRuleByDottedName, getRuleFromAnalysis } from 'Engine/rules'
 import React, { Fragment, useContext } from 'react'
@ -14,7 +14,7 @@ import { Line, SalaireBrutSection, SalaireNetSection } from './PaySlipSections'
 import RuleLink from './RuleLink'

 export default function PaySlip() {
-	const { lightestColour } = useContext(ThemeColoursContext)
+	const { lightestColor } = useContext(ThemeColorsContext)
 	const cotisations = useSelector(analysisToCotisationsSelector)
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const parsedRules = useSelector(parsedRulesSelector)
@ -72,20 +72,20 @@ export default function PaySlip() {
 							{cotisationList.map(cotisation => (
 								<Fragment key={cotisation.dottedName}>
 									<RuleLink
-										style={{ backgroundColor: lightestColour }}
+										style={{ backgroundColor: lightestColor }}
 										{...cotisation}
 									/>
 									<Value
 										nilValueSymbol="—"
 										unit="€"
-										customCSS="background-color: var(--lightestColour)"
+										customCSS="background-color: var(--lightestColor)"
 									>
 										{cotisation.montant.partPatronale}
 									</Value>
 									<Value
 										nilValueSymbol="—"
 										unit="€"
-										customCSS="background-color: var(--lightestColour)"
+										customCSS="background-color: var(--lightestColor)"
 									>
 										{cotisation.montant.partSalariale}
 									</Value>
--- a/source/components/PercentageField.css
+++ b/source/components/PercentageField.css
@ -55,7 +55,7 @@
 	width: 18px;
 	border: 2px solid white;
 	background: none;
-	background-color: var(--colour);
+	background-color: var(--color);
 	cursor: pointer;
 }

@ -67,7 +67,7 @@
 	-webkit-appearance: none !important;
 	border-radius: 100%;
 	border: 2px solid white;
-	background-color: var(--colour);
+	background-color: var(--color);
 	cursor: pointer;
 	height: 18px;
 	width: 18px;
@ -86,7 +86,7 @@
 .range::-ms-thumb {
 	border-radius: 100%;
 	border: 2px solid white;
-	background-color: var(--colour);
+	background-color: var(--color);
 	cursor: pointer;
 	height: 18px;
 	width: 18px;
--- a/source/components/RuleLink.tsx
+++ b/source/components/RuleLink.tsx
@ -1,4 +1,4 @@
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { encodeRuleName, nameLeaf } from 'Engine/rules'
 import React, { useContext } from 'react'
@ -20,7 +20,7 @@ export default function RuleLink({
 	children
 }: RuleLinkProps) {
 	const sitePaths = useContext(SitePathsContext)
-	const { colour } = useContext(ThemeColoursContext)
+	const { color } = useContext(ThemeColorsContext)
 	const newPath =
 		sitePaths.documentation.index + '/' + encodeRuleName(dottedName)

@ -29,7 +29,7 @@ export default function RuleLink({
 			to={newPath}
 			className="rule-link"
 			title={title}
-			style={{ color: colour, ...style }}
+			style={{ color, ...style }}
 		>
 			{children || title || nameLeaf(dottedName)}
 		</Link>
--- a/source/components/SalaryExplanation.tsx
+++ b/source/components/SalaryExplanation.tsx
@ -2,7 +2,7 @@ import { T } from 'Components'
 import Distribution from 'Components/Distribution'
 import PaySlip from 'Components/PaySlip'
 import StackedBarChart from 'Components/StackedBarChart'
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { getRuleFromAnalysis } from 'Engine/rules'
 import React, { useContext, useRef } from 'react'
 import emoji from 'react-easy-emoji'
@ -99,7 +99,7 @@ function RevenueRepatitionSection() {
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const getRule = getRuleFromAnalysis(analysis)
 	const { t } = useTranslation()
-	const { palettes } = useContext(ThemeColoursContext)
+	const { palettes } = useContext(ThemeColorsContext)

 	return (
 		<section>
--- a/source/components/SchemeComparaison.css
+++ b/source/components/SchemeComparaison.css
@ -18,9 +18,9 @@
 		[indépendant] minmax(20%, 20rem) [auto-entrepreneur] minmax(20%, 20rem) [end];
 }
 .comparaison-grid > * {
-	border-bottom: 1px solid var(--lighterColour);
+	border-bottom: 1px solid var(--lighterColor);
 	padding: 0.6rem 1.2rem;
-	border-right: 1px solid var(--lighterColour);
+	border-right: 1px solid var(--lighterColor);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@ -66,7 +66,7 @@
 	grid-column: row-legend / end;
 }
 .comparaison-grid > .all.colored {
-	background-color: var(--lightestColour);
+	background-color: var(--lightestColor);
 }

 .comparaison-grid > .indep-et-auto {
@ -82,7 +82,7 @@
 	display: none;
 }
 .comparaison-grid.hideAutoEntrepreneur > .indep-et-auto {
-	border-right: 1px solid var(--lighterColour);
+	border-right: 1px solid var(--lighterColor);
 }

 .comparaison-grid.hideAssimiléSalarié > .AS {
@ -133,7 +133,7 @@
 		font-weight: normal;
 	}
 	.comparaison-grid > :not(.button)::before {
-		color: var(--darkestColour) !important;
+		color: var(--darkestColor) !important;
 		opacity: 0.6;
 	}
 	.comparaison-grid > .AS::before {
@ -167,7 +167,7 @@
 		font-size: 1rem;
 		margin-top: 1rem;
 		content: 'vs';
-		color: var(--lightColour);
+		color: var(--lightColor);
 	}
 	.comparaison-grid > .legend {
 		justify-content: flex-start;
--- a/source/components/SearchBar.tsx
+++ b/source/components/SearchBar.tsx
@ -55,11 +55,11 @@ export default function SearchBar({
 					padding: 0.4rem;
 					border-radius: 0.3rem;
 					:hover {
-						background: var(--colour);
-						color: var(--textColour);
+						background: var(--color);
+						color: var(--textColor);
 					}
 					:hover a {
-						color: var(--textColour);
+						color: var(--textColor);
 					}
 				`}
 				onClick={() => setSelectedOption(option)}
--- a/source/components/TargetSelection.tsx
+++ b/source/components/TargetSelection.tsx
@ -3,7 +3,7 @@ import { T } from 'Components'
 import InputSuggestions from 'Components/conversation/InputSuggestions'
 import PeriodSwitch from 'Components/PeriodSwitch'
 import RuleLink from 'Components/RuleLink'
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { formatCurrency } from 'Engine/format'
 import { encodeRuleName } from 'Engine/rules'
@ -37,7 +37,7 @@ export default function TargetSelection() {
 	)
 	const situation = useSelector(situationSelector)
 	const dispatch = useDispatch()
-	const colours = useContext(ThemeColoursContext)
+	const colors = useContext(ThemeColorsContext)

 	const targets =
 		analysis?.targets.filter(
@ -94,11 +94,11 @@ export default function TargetSelection() {
 							className="ui__ plain card"
 							style={{
 								marginTop: '.6em',
-								color: colours.textColour,
+								color: colors.textColor,
 								background: `linear-gradient(
 								60deg,
-								${colours.darkColour} 0%,
-								${colours.colour} 100%
+								${colors.darkColor} 0%,
+								${colors.color} 100%
 								)`
 							}}
 						>
@ -224,7 +224,7 @@ let TargetInputOrValue = ({
 	isSmallTarget
 }: TargetInputOrValueProps) => {
 	const { language } = useTranslation().i18n
-	const colors = useContext(ThemeColoursContext)
+	const colors = useContext(ThemeColorsContext)
 	const dispatch = useDispatch()
 	const situationValue = Math.round(
 		useSelector(situationSelector)[target.dottedName]
@ -248,8 +248,8 @@ let TargetInputOrValue = ({
 					{!isActiveInput && <AnimatedTargetValue value={value} />}
 					<CurrencyInput
 						style={{
-							color: colors.textColour,
-							borderColor: colors.textColour
+							color: colors.textColor,
+							borderColor: colors.textColor
 						}}
 						debounce={600}
 						name={target.dottedName}
--- a/source/components/Targets.css
+++ b/source/components/Targets.css
@ -8,7 +8,7 @@
 #targets > .icon {
 	margin: 0 0.6em;
 	font-size: 200%;
-	color: var(--colour);
+	color: var(--color);
 }
 #targets .value {
 	font-size: 180%;
--- a/source/components/Targets.tsx
+++ b/source/components/Targets.tsx
@ -1,4 +1,4 @@
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
@ -8,21 +8,21 @@ import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 import './Targets.css'

 export default function Targets() {
-	const colours = useContext(ThemeColoursContext)
+	const colors = useContext(ThemeColorsContext)
 	const sitePaths = useContext(SitePathsContext)
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	let { nodeValue, unité: unit, dottedName } = analysis.targets[0]
 	return (
 		<div id="targets">
 			<span className="icon">→</span>
-			<span className="content" style={{ color: colours.textColour }}>
+			<span className="content" style={{ color: colors.textColor }}>
 				<span className="figure">
 					<span className="value">{nodeValue?.toFixed(1)}</span>{' '}
 					<span className="unit">{unit}</span>
 				</span>
 				<Link
 					title="Quel est calcul ?"
-					style={{ color: colours.colour }}
+					style={{ color: colors.color }}
 					to={sitePaths.documentation.index + '/' + dottedName}
 					className="explanation"
 				>
--- a/source/components/conversation/AnswerList.tsx
+++ b/source/components/conversation/AnswerList.tsx
@ -56,7 +56,7 @@ function StepsTable({ rules, onClose }) {
 					<tr
 						key={rule.dottedName}
 						css={`
-							background: var(--lightestColour);
+							background: var(--lightestColor);
 						`}
 					>
 						<td>
@ -75,7 +75,7 @@ function StepsTable({ rules, onClose }) {
 									font-weight: 500;
 									> span {
 										border-bottom: 1px dashed blue;
-										border-bottom-color: var(--textColourOnWhite);
+										border-bottom-color: var(--textColorOnWhite);
 										padding: 0.05em 0em;
 										display: inline-block;
 									}
--- a/source/components/conversation/GroupTitle.js
+++ b/source/components/conversation/GroupTitle.js
@ -6,7 +6,7 @@ export default ({
 	text,
 	onClick,
 	folded,
-	themeColours: { colour, textColourOnWhite }
+	themeColors: { color, textColorOnWhite }
 }) => (
 	<div className="group-title" onClick={onClick}>
 		{folded && (
@ -30,11 +30,11 @@ export default ({
 					? {
 							cursor: 'pointer',
 							border: '1px solid #aaa'
-						}
+					  }
 					: {
-							border: '1px solid ' + colour,
-							color: textColourOnWhite
-						}
+							border: '1px solid ' + color,
+							color: textColorOnWhite
+					  }
 			}
 		>
 			{text}
--- a/source/components/conversation/Input.js
+++ b/source/components/conversation/Input.js
@ -1,7 +1,7 @@
-import withColours from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { currencyFormat } from 'Engine/format'
 import { compose } from 'ramda'
-import React, { useCallback } from 'react'
+import React, { useCallback, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import NumberFormat from 'react-number-format'
 import { debounce } from '../../utils'
@ -10,18 +10,15 @@ import InputSuggestions from './InputSuggestions'
 import SendButton from './SendButton'

 // TODO: fusionner Input.js et CurrencyInput.js
-export default compose(
-	FormDecorator('input'),
-	withColours
-)(function Input({
+export default compose(FormDecorator('input'))(function Input({
 	suggestions,
 	setFormValue,
 	submit,
 	dottedName,
 	value,
-	colours,
 	unit
 }) {
+	const colors = useContext(ThemeColorsContext)
 	const debouncedSetFormValue = useCallback(debounce(750, setFormValue), [])
 	const { language } = useTranslation().i18n

@ -47,7 +44,7 @@ export default compose(
 					thousandSeparator={thousandSeparator}
 					decimalSeparator={decimalSeparator}
 					allowEmptyFormatting={true}
-					style={{ border: `1px solid ${colours.textColourOnWhite}` }}
+					style={{ border: `1px solid ${colors.textColorOnWhite}` }}
 					onValueChange={({ floatValue }) => {
 						debouncedSetFormValue(floatValue)
 					}}
--- a/source/components/conversation/Question.js
+++ b/source/components/conversation/Question.js
@ -1,8 +1,8 @@
 import classnames from 'classnames'
 import { T } from 'Components'
-import withColours from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { compose, is } from 'ramda'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 import Explicable from './Explicable'
 import { FormDecorator } from './FormDecorator'
 import './Question.css'
@ -26,17 +26,14 @@ import SendButton from './SendButton'

 // FormDecorator permet de factoriser du code partagé par les différents types de saisie,
 // dont Question est un example
-export default compose(
-	FormDecorator('question'),
-	withColours
-)(function Question({
+export default compose(FormDecorator('question'))(function Question({
 	choices,
 	submit,
-	colours,
 	name,
 	setFormValue,
 	value: currentValue
 }) {
+	const colors = useContext(ThemeColorsContext)
 	const [touched, setTouched] = useState(false)
 	const onChange = useCallback(
 		value => {
@ -52,7 +49,7 @@ export default compose(
 				{choices.map(({ value, label }) => (
 					<RadioLabel
 						key={value}
-						{...{ value, label, currentValue, submit, colours, onChange }}
+						{...{ value, label, currentValue, submit, colors, onChange }}
 					/>
 				))}
 			</div>
@ -74,7 +71,7 @@ export default compose(
 								label: 'Aucun',
 								currentValue,
 								submit,
-								colours,
+								colors,
 								dottedName: null,
 								onChange
 							}}
@ -97,7 +94,7 @@ export default compose(
 										dottedName,
 										currentValue,
 										submit,
-										colours,
+										colors,
 										onChange
 									}}
 								/>
@ -118,7 +115,7 @@ export default compose(
 			<SendButton
 				{...{
 					disabled: !touched,
-					colours,
+					colors,
 					error: false,
 					submit
 				}}
@ -134,13 +131,7 @@ let RadioLabel = props => (
 	</>
 )

-const RadioLabelContent = compose(withColours)(function RadioLabelContent({
-	value,
-	label,
-	currentValue,
-	onChange,
-	submit
-}) {
+function RadioLabelContent({ value, label, currentValue, onChange, submit }) {
 	let labelStyle = value === '_' ? { fontWeight: 'bold' } : null,
 		selected = value === currentValue

@ -164,4 +155,4 @@ const RadioLabelContent = compose(withColours)(function RadioLabelContent({
 			/>
 		</label>
 	)
-})
+}
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@ -162,7 +162,7 @@
 .step input[type='text'] {
 	border-bottom: 1px solid;
 	border-radius: 0.3em;
-	color: var(--colour);
+	color: var(--color);
 	display: inline-block;
 	line-height: 1.6em;
 	height: 1.6em; /* IE 11 needs this */
@ -363,19 +363,19 @@ for the appearing element to appear without stacking up below the first one */
 }

 .step label.userAnswerButton {
-	border: 1px solid var(--colour);
+	border: 1px solid var(--color);
 	background-color: white;
-	color: var(--textColourOnWhite);
+	color: var(--textColorOnWhite);
 }
 .step label.userAnswerButton.selected {
-	background: var(--colour);
-	border: 1px solid var(--colour);
-	color: var(--textColour);
+	background: var(--color);
+	border: 1px solid var(--color);
+	color: var(--textColor);
 }
@media (hover) {
 	.step label.userAnswerButton:hover {
-		background: var(--colour);
-		border: 1px solid var(--colour);
-		color: var(--textColour);
+		background: var(--color);
+		border: 1px solid var(--color);
+		color: var(--textColor);
 	}
 }
--- a/source/components/conversation/select/SelectGéo.js
+++ b/source/components/conversation/select/SelectGéo.js
@ -80,7 +80,7 @@ export default FormDecorator('select')(function Select({
 					padding: 0.4rem;
 					margin: 0.2rem 0;
 					width: 100%;
-					border: 1px solid var(--lighterTextColour);
+					border: 1px solid var(--lighterTextColor);
 					border-radius: 0.3rem;
 					color: inherit;
 					font-size: inherit;
@ -88,7 +88,7 @@ export default FormDecorator('select')(function Select({
 					position: relative;

 					:focus {
-						border-color: var(--colour);
+						border-color: var(--color);
 					}
 				`}
 				placeholder="Saisissez le nom d'une commune"
@ -121,7 +121,7 @@ export default FormDecorator('select')(function Select({
 								border-radius: 0.3rem;
 								:hover,
 								:focus {
-									background-color: var(--lighterColour);
+									background-color: var(--lighterColor);
 								}
 								background: white;
 								border-radius: 0.6remv;
--- a/source/components/conversation/select/SelectTauxRisque.js
+++ b/source/components/conversation/select/SelectTauxRisque.js
@ -27,7 +27,7 @@ function SelectComponent({ setFormValue, submit, options }) {
 					padding: 0.4rem;
 					margin: 0.2rem 0;
 					width: 100%;
-					border: 1px solid var(--lighterTextColour);
+					border: 1px solid var(--lighterTextColor);
 					border-radius: 0.3rem;
 					color: inherit;
 					font-size: inherit;
@ -35,7 +35,7 @@ function SelectComponent({ setFormValue, submit, options }) {
 					position: relative;

 					:focus {
-						border-color: var(--colour);
+						border-color: var(--color);
 					}
 				`}
 				placeholder="Saisissez votre domaine d'activité"
@ -68,7 +68,7 @@ function SelectComponent({ setFormValue, submit, options }) {
 							cursor: pointer;
 							:hover,
 							:focus {
-								background-color: var(--lighterColour);
+								background-color: var(--lighterColor);
 							}
 							background: white;
 							border-radius: 0.6rem;
--- a/source/components/rule/Examples.js
+++ b/source/components/rule/Examples.js
@ -9,19 +9,16 @@ export default compose(
 	connect(
 		state => ({
 			parsedRules: state.parsedRules,
-			themeColours: state.themeColours
+			themeColors: state.themeColors
 		}),
 		dispatch => ({
-			setExample: compose(
-				dispatch,
-				setExample
-			)
+			setExample: compose(dispatch, setExample)
 		})
 	)
 )(function Examples({
 	situationExists,
 	rule,
-	themeColours,
+	themeColors,
 	setExample,
 	currentExample
 }) {
@ -42,7 +39,7 @@ export default compose(
 				{examples.map(ex => (
 					<Example
 						key={ex.nom}
-						{...{ ex, rule, currentExample, setExample, themeColours }}
+						{...{ ex, rule, currentExample, setExample, themeColors }}
 					/>
 				))}
 			</ul>
@ -73,7 +70,8 @@ let Example = ({
 				}
 				className={classNames('ui__ button small', {
 					selected
-				})}>
+				})}
+			>
 				{nom}
 			</button>
 		</li>
--- a/source/components/rule/Header.js
+++ b/source/components/rule/Header.js
@ -1,6 +1,6 @@
-import withColours from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { path } from 'ramda'
-import React from 'react'
+import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { capitalise0 } from '../../utils'
 import { Markdown } from '../utils/markdown'
@ -8,47 +8,42 @@ import Destinataire from './Destinataire'
 import './Header.css'
 import Namespace from './Namespace'

-let RuleHeader = withColours(
-	({
-		dottedName,
-		type,
-		description,
-		question,
-		flatRule,
-		flatRules,
-		acronyme,
-		name,
-		title,
-		icon,
-		colours
-	}) => {
-		let destinataire = path([type, 'destinataire'])(flatRule)
-		return (
-			<section id="ruleHeader">
-				<header className="ui__ plain card">
-					<div>
-						<Namespace
-							{...{ dottedName, flatRules, colour: colours.textColour }}
-						/>
-						<h1 style={{ color: colours.textColour }}>
-							{title || capitalise0(name)}
-							{acronyme && <> ({acronyme})</>}
-						</h1>
-					</div>
-					{icon && <span id="ruleHeader__icon"> {emoji(icon)}</span>}
-				</header>
-				<div id="ruleHeader__content">
-					<div id="ruleHeader__description">
-						<Markdown source={description || question} />
-					</div>
-					{destinataire && (
-						<div id="ruleHeader__infobox">
-							<Destinataire destinataire={destinataire} />
-						</div>
-					)}
+export default function RuleHeader({
+	dottedName,
+	type,
+	description,
+	question,
+	flatRule,
+	flatRules,
+	acronyme,
+	name,
+	title,
+	icon
+}) {
+	const colors = useContext(ThemeColorsContext)
+	let destinataire = path([type, 'destinataire'])(flatRule)
+	return (
+		<section id="ruleHeader">
+			<header className="ui__ plain card">
+				<div>
+					<Namespace {...{ dottedName, flatRules, color: colors.textColor }} />
+					<h1 style={{ color: colors.textColor }}>
+						{title || capitalise0(name)}
+						{acronyme && <> ({acronyme})</>}
+					</h1>
 				</div>
-			</section>
-		)
-	}
-)
-export default RuleHeader
+				{icon && <span id="ruleHeader__icon"> {emoji(icon)}</span>}
+			</header>
+			<div id="ruleHeader__content">
+				<div id="ruleHeader__description">
+					<Markdown source={description || question} />
+				</div>
+				{destinataire && (
+					<div id="ruleHeader__infobox">
+						<Destinataire destinataire={destinataire} />
+					</div>
+				)}
+			</div>
+		</section>
+	)
+}
--- a/source/components/rule/Namespace.tsx
+++ b/source/components/rule/Namespace.tsx
@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import { capitalise0 } from '../../utils'
 import './Namespace.css'

-export default function Namespace({ dottedName, flatRules, colour }) {
+export default function Namespace({ dottedName, flatRules, color }) {
 	const sitePaths = useContext(SitePathsContext)
 	return (
 		<ul id="namespace">
@ -29,7 +29,7 @@ export default function Namespace({ dottedName, flatRules, colour }) {
 						)
 					}
 					let ruleText = rule.title || capitalise0(rule.name),
-						style = { color: colour }
+						style = { color }

 					return (
 						<li style={style} key={fragments.join()}>
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@ -1,5 +1,5 @@
 import { T } from 'Components'
-import withColours from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import Value from 'Components/Value'
 import knownMecanisms from 'Engine/known-mecanisms.yaml'
@ -8,12 +8,12 @@ import {
 	findRuleByDottedName,
 	findRuleByNamespace
 } from 'Engine/rules'
-import { compose, isEmpty } from 'ramda'
+import { isEmpty } from 'ramda'
 import React, { Suspense, useContext, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import {
 	exampleAnalysisSelector,
@ -33,23 +33,16 @@ import './Rule.css'

 let LazySource = React.lazy(() => import('./RuleSource'))

-export default compose(
-	connect((state, props) => ({
-		currentExample: state.currentExample,
-		flatRules: flatRulesSelector(state),
-		valuesToShow: !noUserInputSelector(state),
-		analysedRule: ruleAnalysisSelector(state, props),
-		analysedExample: exampleAnalysisSelector(state, props)
-	})),
-	AttachDictionary(knownMecanisms)
-)(function Rule({
-	dottedName,
-	currentExample,
-	flatRules,
-	valuesToShow,
-	analysedExample,
-	analysedRule
-}) {
+export default AttachDictionary(knownMecanisms)(function Rule({ dottedName }) {
+	const currentExample = useSelector(state => state.currentExample)
+	const flatRules = useSelector(flatRulesSelector)
+	const valuesToShow = !useSelector(noUserInputSelector)
+	const analysedRule = useSelector(state =>
+		ruleAnalysisSelector(state, { dottedName })
+	)
+	const analysedExample = useSelector(state =>
+		exampleAnalysisSelector(state, { dottedName })
+	)
 	const sitePaths = useContext(SitePathsContext)
 	const [viewSource, setViewSource] = useState(false)
 	const { t } = useTranslation()
@ -219,7 +212,8 @@ export default compose(
 	)
 })

-let NamespaceRulesList = compose(withColours)(({ namespaceRules, colours }) => {
+function NamespaceRulesList({ namespaceRules }) {
+	const colors = useContext(ThemeColorsContext)
 	const sitePaths = useContext(SitePathsContext)
 	return (
 		<section>
@ -231,7 +225,7 @@ let NamespaceRulesList = compose(withColours)(({ namespaceRules, colours }) => {
 					<li key={r.name}>
 						<Link
 							style={{
-								color: colours.textColourOnWhite,
+								color: colors.textColorOnWhite,
 								textDecoration: 'underline'
 							}}
 							to={
@ -247,4 +241,4 @@ let NamespaceRulesList = compose(withColours)(({ namespaceRules, colours }) => {
 			</ul>
 		</section>
 	)
-})
+}
--- a/source/components/ui/AnimatedTargetValue.css
+++ b/source/components/ui/AnimatedTargetValue.css
@ -5,7 +5,7 @@
 .evaporate {
 	display: none;
 	font-size: 80%;
-	/* text-shadow: 0 0 2px var(--colour); */
+	/* text-shadow: 0 0 2px var(--color); */
 }
 .evaporate-enter {
 	display: block;
--- a/source/components/ui/Button/button.css
+++ b/source/components/ui/Button/button.css
@ -30,10 +30,10 @@

 	/* ie11 */
 	border-color: rgb(41, 117, 209);
-	border-color: var(--colour);
+	border-color: var(--color);
 	/* ie11 */
 	color: rgb(41, 117, 209);
-	color: var(--colour);
+	color: var(--color);
 	background-image: linear-gradient(
 		50deg,
 		rgba(39, 69, 195, 0.87) 5%,
@ -42,8 +42,8 @@
 	);
 	background-image: linear-gradient(
 		50deg,
-		var(--colour) 5%,
-		var(--lightColour) 50%,
+		var(--color) 5%,
+		var(--lightColor) 50%,
 		rgba(255, 255, 255, 0.52) 55%
 	);
 	background-size: 280%;
@ -58,9 +58,9 @@
 	);
 	background-image: linear-gradient(
 		50deg,
-		var(--darkColour) -50%,
-		var(--colour) 50%,
-		var(--lightColour) 55%
+		var(--darkColor) -50%,
+		var(--color) 50%,
+		var(--lightColor) 55%
 	);

 	color: white;
@ -121,7 +121,7 @@
 	text-decoration: underline;
 	text-underline-offset: 4px;
 	color: rgb(41, 117, 209);
-	color: var(--colour);
+	color: var(--color);
 }
 .ui__.link-button.active {
 	font-weight: bold;
@ -134,7 +134,7 @@
 .ui__.dashed-button {
 	border-bottom: 1px dashed;
 	border-color: rgb(41, 117, 209);
-	border-color: var(--colour);
+	border-color: var(--color);
 	padding: 0.15em 0em;
 }

--- a/source/components/ui/Card.css
+++ b/source/components/ui/Card.css
@ -13,18 +13,14 @@
 .ui__.card.disabled .ui__.button.simple,
 .ui__.card.disabled a {
 	/* opacity: 0.7; */
-	color: var(--grayColour);
+	color: var(--grayColor);
 }

 .ui__.card.plain {
 	color: white;
-	color: var(--textColour);
+	color: var(--textColor);
 	background: linear-gradient(60deg, #215da6 0%, #297da1 100%);
-	background: linear-gradient(
-		60deg,
-		var(--darkColour) -100%,
-		var(--colour) 100%
-	);
+	background: linear-gradient(60deg, var(--darkColor) -100%, var(--color) 100%);
 }
 .ui__.card.plain h1,
 .ui__.card.plain h2,
@ -33,20 +29,19 @@
 .ui__.card.plain h5,
 .ui__.card.plain h6 {
 	color: white;
-	color: var(--textColour);
+	color: var(--textColor);
 }

 .ui__.card.disabled img {
 	filter: saturate(0);
 }

-
 .ui__.card.disabled .ui__.card.plain,
 .ui__.card.disabled.plain {
 	background: linear-gradient(
 		60deg,
-		var(--grayColour) -40%,
-		var(--grayColour) 70%
+		var(--grayColor) -40%,
+		var(--grayColor) 70%
 	);
 	opacity: 0.7;
 }
@ -58,8 +53,8 @@
 .ui__.card.plain a:hover {
 	text-decoration: underline;
 }
-.ui__.card.coloured {
-	box-shadow: 0 1px 3px 0 var(--colour), 0 0 0 1px var(--colour);
+.ui__.card.colored {
+	box-shadow: 0 1px 3px 0 var(--color), 0 0 0 1px var(--color);
 }
 .ui__.card.plain small,
 .ui__.card.plain .notice {
--- a/source/components/ui/Checkbox/index.css
+++ b/source/components/ui/Checkbox/index.css
@ -29,7 +29,7 @@
 	stroke-linecap: round;
 	stroke-linejoin: round;
 	stroke: #c8ccd4;
-	stroke: var(--colour);
+	stroke: var(--color);
 	stroke-width: 1.5px;
 	transform: translate3d(0, 0, 0);
 	transition: all 0.2s ease;
@ -47,10 +47,10 @@
 	opacity: 1;
 }
 .ui__.checkbox:hover svg {
-	stroke: var(--colour);
+	stroke: var(--color);
 }
 .ui__.checkbox-input:checked + .ui__.checkbox svg {
-	stroke: var(--colour);
+	stroke: var(--color);
 }
 .ui__.checkbox-input:checked + .ui__.checkbox svg path {
 	stroke-dashoffset: 60;
--- a/source/components/ui/Checklist/index.css
+++ b/source/components/ui/Checklist/index.css
@ -9,7 +9,7 @@ ul.ui__.checklist {
 	padding: 0.6rem;
 	text-align: left;
 	flex: 1;
-	color: var(--colour);
+	color: var(--color);
 	font-family: inherit;
 	transition: all 0.1s;
 	font-size: inherit;
@ -33,6 +33,6 @@ ul.ui__.checklist {

 .ui__.checklist-explanation {
 	padding-left: calc(0.6rem + 10px);
-	border-left: 1px solid var(--lighterColour);
+	border-left: 1px solid var(--lighterColor);
 	margin: 0 0 -1rem 8px;
 }
--- a/source/components/ui/InfoBulle.css
+++ b/source/components/ui/InfoBulle.css
@ -1,6 +1,6 @@
 .info-bulle__interrogation-mark {
-	color: var(--colour);
-	border: 1px solid var(--colour);
+	color: var(--color);
+	border: 1px solid var(--color);
 	display: inline-block;
 	font-weight: bold;
 	user-select: none;
@ -15,13 +15,13 @@
 	text-decoration: none;
 }
 .info-bulle__interrogation-mark:focus {
-	outline: 1px dotted var(--darkColour);
+	outline: 1px dotted var(--darkColor);
 }
 .info-bulle__text {
 	text-align: left;
 	position: absolute;
 	z-index: -1;
-	border: 1px solid var(--colour);
+	border: 1px solid var(--color);
 	padding: 0.3rem;
 	min-width: 10rem;
 	font-weight: normal;
--- a/source/components/ui/Progress.css
+++ b/source/components/ui/Progress.css
@ -1,11 +1,11 @@
 .progress__container {
 	height: 0.2rem;
-	background-color: var(--lighterColour);
+	background-color: var(--lighterColor);
 	overflow: hidden;
 }
 .progress__bar {
 	height: 100%;
 	transition: width 0.2s;
 	min-width: 6px;
-	background-color: var(--colour);
+	background-color: var(--color);
 }
--- a/source/components/ui/SocialIcon.tsx
+++ b/source/components/ui/SocialIcon.tsx
@ -1,4 +1,4 @@
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import React, { useContext } from 'react'

 const icons = {
@ -39,7 +39,7 @@ export default function withSocialMedia({
 }: {
 	media: keyof typeof icons
 }) {
-	const { colour } = useContext(ThemeColoursContext)
+	const { color } = useContext(ThemeColorsContext)
 	return (
 		<svg
 			viewBox="0 0 64 64"
@ -66,7 +66,7 @@ export default function withSocialMedia({
 			<g>
 				<path d={icons[media].icon} style={{ fill: 'transparent' }} />
 			</g>
-			<g style={{ fill: colour }}>
+			<g style={{ fill: color }}>
 				<path d={icons[media].mask} />
 			</g>
 		</svg>
--- a/source/components/ui/Toggle.css
+++ b/source/components/ui/Toggle.css
@ -1,12 +1,12 @@
 .ui__.toggle {
-	border: 1px solid var(--colour);
+	border: 1px solid var(--color);
 	border-radius: 0.3rem;
 	overflow: hidden;
 	display: flex;
 }
 .ui__.toggle label {
 	padding: 0.6rem 1.2rem;
-	color: var(--colour);
+	color: var(--color);
 	text-transform: uppercase;
 	cursor: pointer;
 }
@ -16,7 +16,7 @@
 	padding: 0.4rem 0.8rem;
 }
 .ui__.toggle label:not(:last-child) {
-	border-right: 1px solid var(--colour);
+	border-right: 1px solid var(--color);
 }

 .ui__.toggle input[type='radio'] {
@ -34,7 +34,7 @@
 	border-radius: 20px;
 	cursor: pointer;
 	box-shadow: 0 0 0px 1.5px rgb(41, 117, 209);
-	box-shadow: 0 0 0px 1.5px var(--colour);
+	box-shadow: 0 0 0px 1.5px var(--color);
 	transition: all 0.1s;
 	border: 0.5em solid white;
 }
@ -46,7 +46,7 @@
 }
 .ui__.toggle input[type='radio']:checked ~ *::before {
 	border: 2px solid white;
-	background: var(--colour);
+	background: var(--color);
 }
 .ui__.toggle input[type='radio']:focus ~ .radioText {
 	border: 1px dotted gray;
@ -56,12 +56,12 @@
 }

 .ui__.toggle input[type='radio']:checked ~ * {
-	background: var(--lightColour);
-	box-shadow: 0 0 0 3rem var(--lightColour);
+	background: var(--lightColor);
+	box-shadow: 0 0 0 3rem var(--lightColor);
 	color: white;
 }

 .ui__.toggle label:hover input[type='radio']:not(:checked) ~ * {
-	background: var(--lighterColour);
-	box-shadow: 0 0 0 1rem var(--lighterColour);
+	background: var(--lighterColor);
+	box-shadow: 0 0 0 1rem var(--lighterColor);
 }
--- a/source/components/ui/Typography.css
+++ b/source/components/ui/Typography.css
@ -25,7 +25,7 @@ html {
 body {
 	font-weight: 400;
 	color: #040e19;
-	color: var(--darkColour);
+	color: var(--darkColor);
 	font-family: 'Roboto', sans-serif;
 }

@ -65,7 +65,7 @@ h3,
 h4,
 h5,
 h6 {
-	color: var(--darkColour);
+	color: var(--darkColor);
 	font-family: 'Montserrat', sans-serif;
 	font-weight: 600;
 }
@ -78,17 +78,17 @@ p,
 a,
 ul {
 	line-height: 1.7rem;
-	
 }

-p, ul {
+p,
+ul {
 	margin: 0 0 0.6rem;
 }

 p.ui__.lead {
 	font-size: 120%;
 	line-height: 2rem;
-	color: var(--darkColour);
+	color: var(--darkColor);
 }
 ul {
 	list-style: '› ';
@ -108,7 +108,7 @@ a {
 	padding: none;
 	text-decoration: underline;
 	color: rgb(41, 117, 209);
-	color: var(--colour);
+	color: var(--color);
 }

 p img {
@ -131,7 +131,7 @@ textarea {
 small,
 .ui__.notice {
 	color: rgba(0, 0, 0, 0.6);
-	color: var(--lighterTextColour);
+	color: var(--lighterTextColor);
 	font-size: 85%;
 	line-height: 1.2rem;
 }
--- a/source/components/ui/index.css
+++ b/source/components/ui/index.css
@ -5,9 +5,9 @@
@import './reset.css';

 :root {
-	--colour: rgb(41, 117, 209);
-	--darkColour: rgb(24, 69, 123);
-	--textColour: rgb(24, 69, 123);
+	--color: rgb(41, 117, 209);
+	--darkColor: rgb(24, 69, 123);
+	--textColor: rgb(24, 69, 123);
 }
 html:fullscreen {
 	background-color: white;
@ -23,7 +23,7 @@ button {
 }

 blockquote {
-	background: var(--lighterColour);
+	background: var(--lighterColor);
 	border-radius: 0.6em;
 	padding: 1.2em 1em 0.4em;
 	margin: 0.6em;
@ -55,10 +55,10 @@ blockquote {
 }

 .ui__.light-bg {
-	background-color: var(--lighterColour) !important;
+	background-color: var(--lighterColor) !important;
 }
 .ui__.lighter-bg {
-	background-color: var(--lightestColour) !important;
+	background-color: var(--lightestColor) !important;
 }

 .ui__.center-flex {
@ -72,7 +72,7 @@ blockquote {
 }
@media (max-width: 850px) {
 	.ui__.hide-mobile {
-		display: none;	
+		display: none;
 	}
 }

@ -112,7 +112,7 @@ span.ui__.enumeration:not(:last-of-type)::after {
 	font-size: 85%;
 	padding: 0.4rem 0.8rem;
 	color: white;
-	background: var(--lighterTextColour);
+	background: var(--lighterTextColor);
 	border-radius: 0.3rem;
 	text-align: center;
 }
--- a/source/components/utils/SetCssColor.js
+++ b/source/components/utils/SetCssColor.js
@ -0,0 +1,21 @@
+import { Component } from 'react'
+
+class SetCSSColor extends Component {
+	updateCSSColor = () => {
+		Object.entries(this.props.colors).forEach(([key, value]) => {
+			document.body.style.setProperty(`--${key}`, value)
+		}, this.props.colors)
+	}
+	constructor(props) {
+		super(props)
+		this.updateCSSColor()
+	}
+	componentDidUpdate() {
+		this.updateCSSColor()
+	}
+	render() {
+		return null
+	}
+}
+
+export default SetCSSColor
--- a/source/components/utils/SetCssColour.js
+++ b/source/components/utils/SetCssColour.js
@ -1,21 +0,0 @@
-import { Component } from 'react'
-
-class SetCSSColour extends Component {
-	updateCSSColour = () => {
-		Object.entries(this.props.colours).forEach(([key, value]) => {
-			document.body.style.setProperty(`--${key}`, value)
-		}, this.props.colours)
-	}
-	constructor(props) {
-		super(props)
-		this.updateCSSColour()
-	}
-	componentDidUpdate() {
-		this.updateCSSColour()
-	}
-	render() {
-		return null
-	}
-}
-
-export default SetCSSColour
--- a/source/components/utils/colors.tsx
+++ b/source/components/utils/colors.tsx
@ -0,0 +1,110 @@
+import convert from 'color-convert'
+import SetCssColor from 'Components/utils/SetCssColor'
+import React, { createContext } from 'react'
+
+/*
+	Hex to RGB conversion:
+ 	http://www.javascripter.net/faq/hextorgb.htm
+*/
+let cutHex = (h: string) => (h.charAt(0) == '#' ? h.substring(1, 7) : h),
+	hexToR = (h: string) => parseInt(cutHex(h).substring(0, 2), 16),
+	hexToG = (h: string) => parseInt(cutHex(h).substring(2, 4), 16),
+	hexToB = (h: string) => parseInt(cutHex(h).substring(4, 6), 16)
+
+/*
+	Given a background color, should you write on it in black or white ?
+   	Taken from http://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color#comment61936401_3943023
+*/
+function findContrastedTextColor(color: string, simple: boolean) {
+	let r = hexToR(color),
+		g = hexToG(color),
+		b = hexToB(color)
+
+	if (simple) {
+		// The YIQ formula
+		return r * 0.299 + g * 0.587 + b * 0.114 > 128 ? '#000000' : '#ffffff'
+	} // else complex formula
+	let uicolors = [r / 255, g / 255, b / 255],
+		c = uicolors.map(c =>
+			c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+		),
+		L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+
+	return L > 0.179 ? '#000000' : '#ffffff'
+}
+
+const lightenColor = (hex: string, x: number) => {
+	const [h, s, l] = convert.hex.hsl(hex.split('#')[1])
+	return '#' + convert.hsl.hex([h, s, Math.max(2, Math.min(l + x, 98))])
+}
+
+const generateDarkenVariations = (
+	numberOfVariation: number,
+	[h, s, l]: [number, number, number]
+) => {
+	return [...Array(numberOfVariation).keys()].map(
+		i => '#' + convert.hsl.hex([h, s, l * 0.8 ** i])
+	)
+}
+
+const deriveAnalogousPalettes = (hex: string) => {
+	const [h, s, l] = convert.hex.hsl(hex.split('#')[1])
+	return [
+		generateDarkenVariations(4, [(h - 45) % 360, 0.75 * s, l]),
+		generateDarkenVariations(4, [(h + 45) % 360, 0.75 * s, l])
+	]
+}
+
+const generateTheme = (themeColor?: string) => {
+	let // Use the default theme color if the host page hasn't made a choice
+		color = themeColor || '#2975D1',
+		lightColor = lightenColor(color, 10),
+		darkColor = lightenColor(color, -20),
+		lighterColor = lightenColor(color, 45),
+		lightestColor = lightenColor(color, 100),
+		darkestColor = lightenColor(color, -100),
+		grayColor = '#00000099',
+		textColor = findContrastedTextColor(color, true), // the 'simple' version feels better...
+		inverseTextColor = textColor === '#ffffff' ? '#000' : '#fff',
+		lightenTextColor = textColor =>
+			textColor === '#ffffff' ? 'rgba(255, 255, 255, .7)' : 'rgba(0, 0, 0, .7)',
+		lighterTextColor = darkColor + 'cc',
+		lighterInverseTextColor = lightenTextColor(inverseTextColor),
+		textColorOnWhite = textColor === '#ffffff' ? color : '#333',
+		palettes = deriveAnalogousPalettes(color)
+
+	return {
+		color,
+		textColor,
+		inverseTextColor,
+		lighterTextColor,
+		lighterInverseTextColor,
+		textColorOnWhite,
+		grayColor,
+		darkColor,
+		lightColor,
+		lighterColor,
+		lightestColor,
+		darkestColor,
+		palettes
+	}
+}
+
+export type ThemeColors = ReturnType<typeof generateTheme>
+
+export const ThemeColorsContext = createContext<ThemeColors>(generateTheme())
+
+type ProviderProps = {
+	color?: string
+	children: React.ReactNode
+}
+
+export function ThemeColorsProvider({ color, children }: ProviderProps) {
+	const colors = generateTheme(color)
+	return (
+		<ThemeColorsContext.Provider value={colors}>
+			<SetCssColor colors={colors} />
+			{children}
+		</ThemeColorsContext.Provider>
+	)
+}
--- a/source/components/utils/withColours.tsx
+++ b/source/components/utils/withColours.tsx
@ -1,136 +0,0 @@
-import convert from 'color-convert'
-import SetCssColour from 'Components/utils/SetCssColour'
-import React, { createContext } from 'react'
-
-/*
-	Hex to RGB conversion:
- 	http://www.javascripter.net/faq/hextorgb.htm
-*/
-let cutHex = h => (h.charAt(0) == '#' ? h.substring(1, 7) : h),
-	hexToR = h => parseInt(cutHex(h).substring(0, 2), 16),
-	hexToG = h => parseInt(cutHex(h).substring(2, 4), 16),
-	hexToB = h => parseInt(cutHex(h).substring(4, 6), 16)
-
-/*
-	Given a background color, should you write on it in black or white ?
-   	Taken from http://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color#comment61936401_3943023
-*/
-function findContrastedTextColour(color: string, simple: boolean) {
-	let r = hexToR(color),
-		g = hexToG(color),
-		b = hexToB(color)
-
-	if (simple) {
-		// The YIQ formula
-		return r * 0.299 + g * 0.587 + b * 0.114 > 128 ? '#000000' : '#ffffff'
-	} // else complex formula
-	let uicolors = [r / 255, g / 255, b / 255],
-		c = uicolors.map(c =>
-			c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
-		),
-		L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
-
-	return L > 0.179 ? '#000000' : '#ffffff'
-}
-
-const lightenColour = (hex: string, x: number) => {
-	const [h, s, l] = convert.hex.hsl(hex.split('#')[1])
-	return '#' + convert.hsl.hex([h, s, Math.max(2, Math.min(l + x, 98))])
-}
-
-const generateDarkenVariations = (
-	numberOfVariation: number,
-	[h, s, l]: [number, number, number]
-) => {
-	return [...Array(numberOfVariation).keys()].map(
-		i => '#' + convert.hsl.hex([h, s, l * 0.8 ** i])
-	)
-}
-
-const deriveAnalogousPalettes = (hex: string) => {
-	const [h, s, l] = convert.hex.hsl(hex.split('#')[1])
-	return [
-		generateDarkenVariations(4, [(h - 45) % 360, 0.75 * s, l]),
-		generateDarkenVariations(4, [(h + 45) % 360, 0.75 * s, l])
-	]
-}
-
-const generateTheme = (themeColour?: string) => {
-	let // Use the default theme colour if the host page hasn't made a choice
-		colour = themeColour || '#2975D1',
-		lightColour = lightenColour(colour, 10),
-		darkColour = lightenColour(colour, -20),
-		lighterColour = lightenColour(colour, 45),
-		lightestColour = lightenColour(colour, 100),
-		darkestColour = lightenColour(colour, -100),
-		grayColour = '#00000099',
-		textColour = findContrastedTextColour(colour, true), // the 'simple' version feels better...
-		inverseTextColour = textColour === '#ffffff' ? '#000' : '#fff',
-		lightenTextColour = textColour =>
-			textColour === '#ffffff'
-				? 'rgba(255, 255, 255, .7)'
-				: 'rgba(0, 0, 0, .7)',
-		lighterTextColour = darkColour + 'cc',
-		lighterInverseTextColour = lightenTextColour(inverseTextColour),
-		textColourOnWhite = textColour === '#ffffff' ? colour : '#333',
-		palettes = deriveAnalogousPalettes(colour)
-
-	return {
-		colour,
-		textColour,
-		inverseTextColour,
-		lighterTextColour,
-		lighterInverseTextColour,
-		textColourOnWhite,
-		grayColour,
-		darkColour,
-		lightColour,
-		lighterColour,
-		lightestColour,
-		darkestColour,
-		palettes
-	}
-}
-
-export type ThemeColours = ReturnType<typeof generateTheme>
-
-export const ThemeColoursContext = createContext<ThemeColours>(generateTheme())
-
-type ProviderProps = {
-	colour?: string
-	children: React.ReactNode
-}
-
-export function ThemeColoursProvider({ colour, children }: ProviderProps) {
-	const colours = generateTheme(colour)
-	return (
-		<ThemeColoursContext.Provider value={colours}>
-			<SetCssColour colours={colours} />
-			{children}
-		</ThemeColoursContext.Provider>
-	)
-}
-
-type WithColoursProps = {
-	colours: ThemeColours
-}
-
-export default function withThemeColours<P extends object>(
-	WrappedComponent: React.ComponentType<P>
-) {
-	class WithThemeColours extends React.Component<
-		Omit<P, keyof WithColoursProps>
-	> {
-		displayName = `withThemeColours(${WrappedComponent.displayName || ''})`
-		render() {
-			return (
-				<ThemeColoursContext.Consumer>
-					{colours => (
-						<WrappedComponent {...(this.props as P)} colours={colours} />
-					)}
-				</ThemeColoursContext.Consumer>
-			)
-		}
-	}
-	return WithThemeColours
-}
--- a/source/engine/mecanismViews/Composantes.js
+++ b/source/engine/mecanismViews/Composantes.js
@ -1,4 +1,4 @@
-import colours from 'Engine/mecanismViews/colours'
+import colors from 'Engine/mecanismViews/colors'
 import { toPairs } from 'ramda'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@ -29,18 +29,21 @@ let Comp = function Composantes({ nodeValue, explanation, unit }) {
 							<li
 								className="composante"
 								css={``}
-								key={JSON.stringify(c.composante)}>
+								key={JSON.stringify(c.composante)}
+							>
 								<ul
 									className="composanteAttributes"
 									css={`
-										border-left: 4px solid ${colours('composantes')};
-									`}>
+										border-left: 4px solid ${colors('composantes')};
+									`}
+								>
 									{toPairs(c.composante).map(([k, v]) => (
 										<li key={k} className="composanteName">
 											<span
 												css={`
-													color: ${colours('composantes')};
-												`}>
+													color: ${colors('composantes')};
+												`}
+											>
 												<Trans>{k}</Trans>:{' '}
 											</span>
 											<span>
@ -56,7 +59,8 @@ let Comp = function Composantes({ nodeValue, explanation, unit }) {
 										width: 100%;
 										font-size: 2.6rem;
 										margin: 0.4em 0 0.2em;
-									`}>
+									`}
+								>
 									{i === explanation.length - 1 ? null : '+'}
 								</div>
 							</li>
--- a/source/engine/mecanismViews/colours.ts
+++ b/source/engine/mecanismViews/colours.ts
@ -1,4 +1,4 @@
-const colours = {
+const colors = {
 	ruleProp: '#9b59b6',
 	'applicable si': '#9b59b6',
 	'non applicable si': '#9b59b6',
@ -12,4 +12,4 @@ const colours = {
 	barèmeLinéaire: '#AD1457'
 }

-export default (name: string) => colours[name] || '#34495e'
+export default (name: string) => colors[name] || '#34495e'
--- a/source/engine/mecanismViews/common.tsx
+++ b/source/engine/mecanismViews/common.tsx
@ -11,7 +11,7 @@ import { DottedName, Rule } from 'Types/rule'
 import { LinkButton } from 'Ui/Button'
 import { capitalise0 } from '../../utils'
 import { encodeRuleName, findRuleByDottedName } from '../rules'
-import mecanismColours from './colours'
+import mecanismColors from './colors'

 type NodeValuePointerProps = {
 	data: ValueProps['nodeValue']
@ -54,13 +54,13 @@ export function Node({ classes, name, value, child, inline, unit }: NodeProps) {
 	return (
 		<div
 			className={classNames(classes, 'node', { inline })}
-			style={termDefinition ? { borderColor: mecanismColours(name) } : {}}
+			style={termDefinition ? { borderColor: mecanismColors(name) } : {}}
 		>
 			{name && !inline && (
 				<div className="nodeHead" css="margin-bottom: 1em">
 					<LinkButton
 						className="name"
-						style={termDefinition ? { background: mecanismColours(name) } : {}}
+						style={termDefinition ? { background: mecanismColors(name) } : {}}
 						data-term-definition={termDefinition}
 					>
 						<Trans>{name}</Trans>
@ -100,7 +100,7 @@ export function InlineMecanism({ name }: { name: string }) {
 			<LinkButton
 				className="name"
 				data-term-definition={name}
-				style={{ background: mecanismColours(name) }}
+				style={{ background: mecanismColors(name) }}
 			>
 				<Trans>{name}</Trans>
 			</LinkButton>
--- a/source/sites/mon-entreprise.fr/layout/Footer/Footer.css
+++ b/source/sites/mon-entreprise.fr/layout/Footer/Footer.css
@ -35,21 +35,21 @@
 .footer__registerContainer label {
 	text-transform: uppercase;
 	font-size: 85%;
-	color: var(--darkColour);
+	color: var(--darkColor);
 	font-weight: 500;
 }
 .footer__registerField {
 	display: flex;
 	margin: 0.3rem 0;
 	background: white;
-	border: 1px solid var(--lightColour);
+	border: 1px solid var(--lightColor);
 	overflow: hidden;
 	border-radius: 0.3rem;
 	align-self: center;
 }
 .footer__separator {
 	margin: 2rem 0;
-	border-top: 1px solid var(--lighterColour);
+	border-top: 1px solid var(--lighterColor);
 	border-bottom: none;
 }
 .footer__registerField > input[type='submit'] {
--- a/source/sites/mon-entreprise.fr/pages/Dev/ColorPicker.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Dev/ColorPicker.tsx
@ -1,11 +1,11 @@
 import React from 'react'
 import { ChromePicker } from 'react-color'

-export default function ColorPicker({ colour, onChange }) {
+export default function ColorPicker({ color, onChange }) {
 	return (
 		<div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
 			<ChromePicker
-				color={colour}
+				color={color}
 				onChangeComplete={color => onChange(color.hex)}
 			/>
 		</div>
--- a/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx
@ -1,14 +1,14 @@
 import {
-	ThemeColoursContext,
-	ThemeColoursProvider
-} from 'Components/utils/withColours'
+	ThemeColorsContext,
+	ThemeColorsProvider
+} from 'Components/utils/colors'
 import React, { Suspense, useContext, useState } from 'react'
 import Home from '../Iframes/SimulateurEmbauche'
 let LazyColorPicker = React.lazy(() => import('./ColorPicker'))

 export default function Couleur() {
-	const { colour: defaultColour } = useContext(ThemeColoursContext)
-	const [colour, setColour] = useState(defaultColour)
+	const { color: defaultColor } = useContext(ThemeColorsContext)
+	const [color, setColor] = useState(defaultColor)
 	return (
 		<>
 			<h1>Changez la couleur de l'integration </h1>
@ -17,16 +17,16 @@ export default function Couleur() {
 				couleurs principales.
 			</p>
 			<Suspense fallback={<div>Chargement...</div>}>
-				<LazyColorPicker colour={colour} onChange={setColour} />
+				<LazyColorPicker color={color} onChange={setColor} />
 			</Suspense>
 			<p className="indication">
 				La couleur sélectionnée, à déclarer comme attribut
-				&quot;data-couleur&quot; du script sur votre page est : <b>{colour}</b>
+				&quot;data-couleur&quot; du script sur votre page est : <b>{color}</b>
 			</p>
 			<div className="ui__ card">
-				<ThemeColoursProvider colour={colour}>
+				<ThemeColorsProvider color={color}>
 					<Home />
-				</ThemeColoursProvider>
+				</ThemeColorsProvider>
 			</div>
 		</>
 	)
--- a/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx
@ -12,7 +12,7 @@ export default function IntegrationTest() {
 	const [currentModule, setCurrentModule] = React.useState(
 		integrableModuleNames[0]
 	)
-	const [colour, setColour] = React.useState('#005aa1')
+	const [color, setColor] = React.useState('#005aa1')
 	const [version, setVersion] = React.useState(0)
 	const domNode = React.useRef<HTMLDivElement>(null)
 	React.useEffect(() => {
@ -20,7 +20,7 @@ export default function IntegrationTest() {
 		script.id = 'script-monentreprise'
 		script.src = window.location.origin + '/simulateur-iframe-integration.js'
 		script.dataset.module = currentModule
-		script.dataset.couleur = colour
+		script.dataset.couleur = color
 		if (domNode.current) {
 			domNode.current.innerHTML = ''
 			domNode.current.appendChild(script)
@ -44,7 +44,7 @@ export default function IntegrationTest() {

 			<h2>Quelle couleur ?</h2>
 			<Suspense fallback={<div>Chargement...</div>}>
-				<LazyColorPicker colour={colour} onChange={setColour} />
+				<LazyColorPicker color={color} onChange={setColor} />
 			</Suspense>

 			<button
@ -60,7 +60,7 @@ export default function IntegrationTest() {
 				`}
 			>
 				<p>Code d'intégration </p>
-				<IntegrationCode colour={colour} module={currentModule} />
+				<IntegrationCode color={color} module={currentModule} />
 				<div style={{ border: '2px dashed blue' }}>
 					<div ref={domNode} />
 				</div>
@ -71,7 +71,7 @@ export default function IntegrationTest() {

 export let IntegrationCode = ({
 	module = 'simulateur-embauche',
-	colour = '#2975D1'
+	color = '#2975D1'
 }) => (
 	<code
 		css={`
@ -114,7 +114,7 @@ export let IntegrationCode = ({
 		="script-simulateur-embauche"
 		<em>data-module</em>="
 		<span>{module}</span>"<em>data-couleur</em>="
-		<span id="scriptColor">{colour}</span>" <em>src</em>
+		<span id="scriptColor">{color}</span>" <em>src</em>
 		="https://mon-entreprise.fr/simulateur-iframe-integration.js">
 		<span>{'<'}</span>
 		<span>/</span>
--- a/source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx
@ -1,13 +1,16 @@
 // Page listing the engine's currently implemented mecanisms and their tests
 import { T } from 'Components'
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { analyseMany } from 'Engine/traverse'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useSelector } from 'react-redux'
 import examples from 'Règles/cas-types.yaml'
-import { parsedRulesSelector, ruleDefaultsSelector } from 'Selectors/analyseSelectors'
-import { DottedName } from "Types/rule"
+import {
+	parsedRulesSelector,
+	ruleDefaultsSelector
+} from 'Selectors/analyseSelectors'
+import { DottedName } from 'Types/rule'
 import './ExampleSituations.css'

 export default function ExampleSituations() {
@ -29,7 +32,7 @@ export default function ExampleSituations() {
 const Example = function Example({ ex: { nom, situation } }) {
 	const defaults = useSelector(ruleDefaultsSelector)
 	const parsedRules = useSelector(parsedRulesSelector)
-	const colours = useContext(ThemeColoursContext)
+	const colors = useContext(ThemeColorsContext)
 	let [total, net, netAprèsImpôts] = analyseMany(parsedRules, [
 			'total',
 			'net',
@ -58,17 +61,14 @@ const Example = function Example({ ex: { nom, situation } }) {
 				{figures.map(t => (
 					<li key={t.dottedName}>
 						<h3>{t.title}</h3>
-						<span
-							style={{ color: colours.textColourOnWhite }}
-							className="figure"
-						>
+						<span style={{ color: colors.textColorOnWhite }} className="figure">
 							{Math.round(t.nodeValue)} €
 						</span>
 					</li>
 				))}{' '}
 				<li key="%">
 					<h3>Prélèvements</h3>
-					<span style={{ color: colours.textColourOnWhite }} className="figure">
+					<span style={{ color: colors.textColorOnWhite }} className="figure">
 						{percentage} %
 					</span>
 				</li>
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx
@ -4,7 +4,7 @@ import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import autoEntrepreneurConfig from 'Components/simulationConfigs/auto-entrepreneur.yaml'
 import StackedBarChart from 'Components/StackedBarChart'
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { getRuleFromAnalysis } from 'Engine/rules'
 import { default as React, useContext } from 'react'
 import { Helmet } from 'react-helmet'
@ -50,7 +50,7 @@ function ExplanationSection() {
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const getRule = getRuleFromAnalysis(analysis)
 	const { t } = useTranslation()
-	const { palettes } = useContext(ThemeColoursContext)
+	const { palettes } = useContext(ThemeColorsContext)

 	return (
 		<section>
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx
@ -4,7 +4,7 @@ import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import indépendantConfig from 'Components/simulationConfigs/indépendant.yaml'
 import StackedBarChart from 'Components/StackedBarChart'
-import { ThemeColoursContext } from 'Components/utils/withColours'
+import { ThemeColorsContext } from 'Components/utils/colors'
 import { getRuleFromAnalysis } from 'Engine/rules'
 import { default as React, useContext } from 'react'
 import { Helmet } from 'react-helmet'
@ -48,7 +48,7 @@ function ExplanationSection() {
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const getRule = getRuleFromAnalysis(analysis)
 	const { t } = useTranslation()
-	const { palettes } = useContext(ThemeColoursContext)
+	const { palettes } = useContext(ThemeColorsContext)

 	return (
 		<section>
--- a/source/sites/publi.codes/App.js
+++ b/source/sites/publi.codes/App.js
@ -25,10 +25,10 @@ let Landing = () => {
 			<div className="app-content ui__ container">
 				<div css="text-align: center">
 					<h1 css="">
-						<span css="border: 3px solid var(--colour); color: var(--colour); padding: 0.1rem 0.4rem 0.1rem 0.6rem ; width: 5rem">
+						<span css="border: 3px solid var(--color); color: var(--color); padding: 0.1rem 0.4rem 0.1rem 0.6rem ; width: 5rem">
 							publi
 						</span>
-						<span css="background: var(--colour); color: white; padding: 0.1rem 0.6rem 0.1rem 0.3rem; width: 5rem; border: 3px solid var(--colour)">
+						<span css="background: var(--color); color: white; padding: 0.1rem 0.6rem 0.1rem 0.3rem; width: 5rem; border: 3px solid var(--color)">
 							codes
 						</span>
 					</h1>
--- a/yarn.lock
+++ b/yarn.lock
@ -1261,6 +1261,18 @@
  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
  integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==

+"@types/color-convert@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d"
+  integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/history@*":
  version "4.7.3"
  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"