From e5b42e2321e246159d7de4f84629d84d6895504b Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 18 Dec 2019 22:32:26 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Supprime=20le=20HOC=20withColour?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Renomme colour en color, pour-être cohérent avec le CSS --- package.json | 1 + source/Provider.tsx | 8 +- source/components/Banner.css | 2 +- source/components/Distribution.css | 2 +- source/components/Distribution.tsx | 12 +- source/components/Feedback/Feedback.css | 2 +- source/components/FindCompany.tsx | 6 +- source/components/PaySlip.tsx | 10 +- source/components/PercentageField.css | 6 +- source/components/RuleLink.tsx | 6 +- source/components/SalaryExplanation.tsx | 4 +- source/components/SchemeComparaison.css | 12 +- source/components/SearchBar.tsx | 6 +- source/components/TargetSelection.tsx | 16 +-- source/components/Targets.css | 2 +- source/components/Targets.tsx | 8 +- source/components/conversation/AnswerList.tsx | 4 +- source/components/conversation/GroupTitle.js | 10 +- source/components/conversation/Input.js | 13 +- source/components/conversation/Question.js | 29 ++-- .../components/conversation/conversation.css | 18 +-- .../conversation/select/SelectGéo.js | 6 +- .../conversation/select/SelectTauxRisque.js | 6 +- source/components/rule/Examples.js | 14 +- source/components/rule/Header.js | 85 ++++++----- source/components/rule/Namespace.tsx | 4 +- source/components/rule/Rule.js | 40 +++--- source/components/ui/AnimatedTargetValue.css | 2 +- source/components/ui/Button/button.css | 18 +-- source/components/ui/Card.css | 21 ++- source/components/ui/Checkbox/index.css | 6 +- source/components/ui/Checklist/index.css | 4 +- source/components/ui/InfoBulle.css | 8 +- source/components/ui/Progress.css | 4 +- source/components/ui/SocialIcon.tsx | 6 +- source/components/ui/Toggle.css | 18 +-- source/components/ui/Typography.css | 14 +- source/components/ui/index.css | 16 +-- source/components/utils/SetCssColor.js | 21 +++ source/components/utils/SetCssColour.js | 21 --- source/components/utils/colors.tsx | 110 ++++++++++++++ source/components/utils/withColours.tsx | 136 ------------------ source/engine/mecanismViews/Composantes.js | 18 ++- .../mecanismViews/{colours.ts => colors.ts} | 4 +- source/engine/mecanismViews/common.tsx | 8 +- .../layout/Footer/Footer.css | 6 +- .../pages/Dev/ColorPicker.tsx | 4 +- .../mon-entreprise.fr/pages/Dev/Couleur.tsx | 18 +-- .../pages/Dev/IntegrationTest.tsx | 12 +- .../pages/Documentation/ExampleSituations.tsx | 18 +-- .../pages/Simulateurs/AutoEntrepreneur.tsx | 4 +- .../pages/Simulateurs/Indépendant.tsx | 4 +- source/sites/publi.codes/App.js | 4 +- yarn.lock | 12 ++ 54 files changed, 405 insertions(+), 444 deletions(-) create mode 100644 source/components/utils/SetCssColor.js delete mode 100644 source/components/utils/SetCssColour.js create mode 100644 source/components/utils/colors.tsx delete mode 100644 source/components/utils/withColours.tsx rename source/engine/mecanismViews/{colours.ts => colors.ts} (80%) diff --git a/package.json b/package.json index 1cedd3253..8c229b9d4 100644 --- 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", diff --git a/source/Provider.tsx b/source/Provider.tsx index 919167db2..eb7c47479 100644 --- 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 { return ( // If IE < 11 display nothing - @@ -114,7 +114,7 @@ export default class Provider extends PureComponent { - + ) } diff --git a/source/components/Banner.css b/source/components/Banner.css index b28543a63..acff8a89b 100644 --- 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; } diff --git a/source/components/Distribution.css b/source/components/Distribution.css index 550033c84..ef0a61930 100644 --- 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); } } diff --git a/source/components/Distribution.tsx b/source/components/Distribution.tsx index 0c61521fa..f6d1a0b5d 100644 --- 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({ ( +let ChartItemBar = ({ styles, color, montant }) => (
( css={` font-weight: bold; margin-left: 1rem; - color: var(--textColourOnWhite); + color: var(--textColorOnWhite); `} > diff --git a/source/components/Feedback/Feedback.css b/source/components/Feedback/Feedback.css index 80f5e14d6..bd4747a68 100644 --- 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; diff --git a/source/components/FindCompany.tsx b/source/components/FindCompany.tsx index 71c007abe..cd72c1828 100644 --- 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); } `} > diff --git a/source/components/PaySlip.tsx b/source/components/PaySlip.tsx index ca91041cc..d9fa79bce 100644 --- 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 => ( {cotisation.montant.partPatronale} {cotisation.montant.partSalariale} diff --git a/source/components/PercentageField.css b/source/components/PercentageField.css index b19eaf060..e51a19e08 100644 --- 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; diff --git a/source/components/RuleLink.tsx b/source/components/RuleLink.tsx index 427deba1e..b7913dcd9 100644 --- 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)} diff --git a/source/components/SalaryExplanation.tsx b/source/components/SalaryExplanation.tsx index add7f7459..3776c20c2 100644 --- 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 (
diff --git a/source/components/SchemeComparaison.css b/source/components/SchemeComparaison.css index 58f58159d..369a6bbaa 100644 --- 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; diff --git a/source/components/SearchBar.tsx b/source/components/SearchBar.tsx index bc71d08c2..f4d4a5a0d 100644 --- 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)} diff --git a/source/components/TargetSelection.tsx b/source/components/TargetSelection.tsx index 55e26b7c9..ed7931aee 100644 --- 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 && } .icon { margin: 0 0.6em; font-size: 200%; - color: var(--colour); + color: var(--color); } #targets .value { font-size: 180%; diff --git a/source/components/Targets.tsx b/source/components/Targets.tsx index f397e4a5e..eae43c2d0 100644 --- 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 (
→ - + {nodeValue?.toFixed(1)}{' '} {unit} diff --git a/source/components/conversation/AnswerList.tsx b/source/components/conversation/AnswerList.tsx index fc10b007b..9394f8f38 100644 --- a/source/components/conversation/AnswerList.tsx +++ b/source/components/conversation/AnswerList.tsx @@ -56,7 +56,7 @@ function StepsTable({ rules, onClose }) { @@ -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; } diff --git a/source/components/conversation/GroupTitle.js b/source/components/conversation/GroupTitle.js index e0a6a5d1d..32fdd41f7 100644 --- 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 } }) => (
{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} diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js index 0afccc189..526996630 100644 --- 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) }} diff --git a/source/components/conversation/Question.js b/source/components/conversation/Question.js index 2490871ef..126fdd20d 100644 --- 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 }) => ( ))}
@@ -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( ( ) -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({ /> ) -}) +} diff --git a/source/components/conversation/conversation.css b/source/components/conversation/conversation.css index a14ee090e..b6221240e 100644 --- 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); } } diff --git a/source/components/conversation/select/SelectGéo.js b/source/components/conversation/select/SelectGéo.js index 45182d754..561a6a725 100644 --- 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; diff --git a/source/components/conversation/select/SelectTauxRisque.js b/source/components/conversation/select/SelectTauxRisque.js index 90683c4dd..424ba7457 100644 --- 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; diff --git a/source/components/rule/Examples.js b/source/components/rule/Examples.js index fe595dc90..805e8344d 100644 --- 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 => ( ))} @@ -73,7 +70,8 @@ let Example = ({ } className={classNames('ui__ button small', { selected - })}> + })} + > {nom} diff --git a/source/components/rule/Header.js b/source/components/rule/Header.js index b90e88adb..08bca871a 100644 --- 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 ( -
-
-
- -

- {title || capitalise0(name)} - {acronyme && <> ({acronyme})} -

-
- {icon && {emoji(icon)}} -
-
-
- -
- {destinataire && ( -
- -
- )} +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 ( +
+
+
+ +

+ {title || capitalise0(name)} + {acronyme && <> ({acronyme})} +

-
- ) - } -) -export default RuleHeader + {icon && {emoji(icon)}} + +
+
+ +
+ {destinataire && ( +
+ +
+ )} +
+
+ ) +} diff --git a/source/components/rule/Namespace.tsx b/source/components/rule/Namespace.tsx index 56f59cec3..ea82be006 100644 --- 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 (
    @@ -29,7 +29,7 @@ export default function Namespace({ dottedName, flatRules, colour }) { ) } let ruleText = rule.title || capitalise0(rule.name), - style = { color: colour } + style = { color } return (
  • diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js index bc7a1db4e..5a2233c25 100644 --- 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 (
    @@ -231,7 +225,7 @@ let NamespaceRulesList = compose(withColours)(({ namespaceRules, colours }) => {
  • {
) -}) +} diff --git a/source/components/ui/AnimatedTargetValue.css b/source/components/ui/AnimatedTargetValue.css index f2127a0c3..034e4cf58 100644 --- 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; diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css index 80f24c14b..59e640d81 100644 --- 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; } diff --git a/source/components/ui/Card.css b/source/components/ui/Card.css index ed73c1c1d..a63068dc4 100644 --- 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 { diff --git a/source/components/ui/Checkbox/index.css b/source/components/ui/Checkbox/index.css index f23d8b305..e4d8d4457 100644 --- 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; diff --git a/source/components/ui/Checklist/index.css b/source/components/ui/Checklist/index.css index 5d6007da2..5f5d81857 100644 --- 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; } diff --git a/source/components/ui/InfoBulle.css b/source/components/ui/InfoBulle.css index 244df704c..e0c752145 100644 --- 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; diff --git a/source/components/ui/Progress.css b/source/components/ui/Progress.css index 5ab4e179f..6746f68ef 100644 --- 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); } diff --git a/source/components/ui/SocialIcon.tsx b/source/components/ui/SocialIcon.tsx index e7b7dc6b5..af0386a1f 100644 --- 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 ( - + diff --git a/source/components/ui/Toggle.css b/source/components/ui/Toggle.css index 4657aac6b..8a3687eb0 100644 --- 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); } diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index 7ed4b8c82..e66956de9 100644 --- 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; } diff --git a/source/components/ui/index.css b/source/components/ui/index.css index 6e27433e0..e11b6e203 100644 --- 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; } diff --git a/source/components/utils/SetCssColor.js b/source/components/utils/SetCssColor.js new file mode 100644 index 000000000..7c5405e64 --- /dev/null +++ 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 diff --git a/source/components/utils/SetCssColour.js b/source/components/utils/SetCssColour.js deleted file mode 100644 index 1d248bb1f..000000000 --- a/source/components/utils/SetCssColour.js +++ /dev/null @@ -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 diff --git a/source/components/utils/colors.tsx b/source/components/utils/colors.tsx new file mode 100644 index 000000000..7124b0682 --- /dev/null +++ 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 + +export const ThemeColorsContext = createContext(generateTheme()) + +type ProviderProps = { + color?: string + children: React.ReactNode +} + +export function ThemeColorsProvider({ color, children }: ProviderProps) { + const colors = generateTheme(color) + return ( + + + {children} + + ) +} diff --git a/source/components/utils/withColours.tsx b/source/components/utils/withColours.tsx deleted file mode 100644 index 3621f15ed..000000000 --- a/source/components/utils/withColours.tsx +++ /dev/null @@ -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 - -export const ThemeColoursContext = createContext(generateTheme()) - -type ProviderProps = { - colour?: string - children: React.ReactNode -} - -export function ThemeColoursProvider({ colour, children }: ProviderProps) { - const colours = generateTheme(colour) - return ( - - - {children} - - ) -} - -type WithColoursProps = { - colours: ThemeColours -} - -export default function withThemeColours

( - WrappedComponent: React.ComponentType

-) { - class WithThemeColours extends React.Component< - Omit - > { - displayName = `withThemeColours(${WrappedComponent.displayName || ''})` - render() { - return ( - - {colours => ( - - )} - - ) - } - } - return WithThemeColours -} diff --git a/source/engine/mecanismViews/Composantes.js b/source/engine/mecanismViews/Composantes.js index 7d3925b67..616478fe0 100644 --- 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 }) {

  • + key={JSON.stringify(c.composante)} + >
      + border-left: 4px solid ${colors('composantes')}; + `} + > {toPairs(c.composante).map(([k, v]) => (
    • + color: ${colors('composantes')}; + `} + > {k}:{' '} @@ -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 : '+'}
    • diff --git a/source/engine/mecanismViews/colours.ts b/source/engine/mecanismViews/colors.ts similarity index 80% rename from source/engine/mecanismViews/colours.ts rename to source/engine/mecanismViews/colors.ts index d48324d75..d514c5965 100644 --- a/source/engine/mecanismViews/colours.ts +++ b/source/engine/mecanismViews/colors.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' diff --git a/source/engine/mecanismViews/common.tsx b/source/engine/mecanismViews/common.tsx index 0d77c939d..aa693bb28 100644 --- 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 (
    {name && !inline && (
    {name} @@ -100,7 +100,7 @@ export function InlineMecanism({ name }: { name: string }) { {name} diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Footer.css b/source/sites/mon-entreprise.fr/layout/Footer/Footer.css index 082972177..ad7ed3f2b 100644 --- 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'] { diff --git a/source/sites/mon-entreprise.fr/pages/Dev/ColorPicker.tsx b/source/sites/mon-entreprise.fr/pages/Dev/ColorPicker.tsx index 122908b22..76ca10ebf 100644 --- 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 (
    onChange(color.hex)} />
    diff --git a/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx b/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx index 6b21e58da..0b4166d18 100644 --- 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 ( <>

    Changez la couleur de l'integration

    @@ -17,16 +17,16 @@ export default function Couleur() { couleurs principales.

    Chargement...
    }> - +

    La couleur sélectionnée, à déclarer comme attribut - "data-couleur" du script sur votre page est : {colour} + "data-couleur" du script sur votre page est : {color}

    - + - +
    ) diff --git a/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx b/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx index 4c1216665..31961bcfc 100644 --- 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(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() {

    Quelle couleur ?

    Chargement...
    }> - +