UNPKG

@codegouvfr/react-dsfr

Version:

French State Design System React integration library

1,414 lines 642 kB
export declare const colorDecisionAndCorrespondingOptions: readonly [{ readonly colorDecisionName: "--background-default-grey"; readonly themePath: readonly ["background", "default", "grey", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "grey"; readonly usage: "default"; }; readonly colorOption: { readonly colorOptionName: "--grey-1000-50"; readonly themePath: readonly ["grey", "_1000_50", "default"]; readonly color: { readonly light: "#ffffff"; readonly dark: "#161616"; }; readonly parsedColorOptionName: { readonly colorName: "grey"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 1000; }; readonly dark: { readonly value: 50; }; }; }; }; }, { readonly colorDecisionName: "--background-default-grey-hover"; readonly themePath: readonly ["background", "default", "grey", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "grey"; readonly usage: "default"; }; readonly colorOption: { readonly colorOptionName: "--grey-1000-50-hover"; readonly themePath: readonly ["grey", "_1000_50", "hover"]; readonly color: { readonly light: "#f6f6f6"; readonly dark: "#343434"; }; readonly parsedColorOptionName: { readonly colorName: "grey"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 1000; }; readonly dark: { readonly value: 50; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-default-grey-active"; readonly themePath: readonly ["background", "default", "grey", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "grey"; readonly usage: "default"; }; readonly colorOption: { readonly colorOptionName: "--grey-1000-50-active"; readonly themePath: readonly ["grey", "_1000_50", "active"]; readonly color: { readonly light: "#ededed"; readonly dark: "#474747"; }; readonly parsedColorOptionName: { readonly colorName: "grey"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 1000; }; readonly dark: { readonly value: 50; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-grey"; readonly themePath: readonly ["background", "alt", "grey", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "grey"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--grey-975-75"; readonly themePath: readonly ["grey", "_975_75", "default"]; readonly color: { readonly light: "#f6f6f6"; readonly dark: "#1e1e1e"; }; readonly parsedColorOptionName: { readonly colorName: "grey"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-grey-hover"; readonly themePath: readonly ["background", "alt", "grey", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "grey"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--grey-975-75-hover"; readonly themePath: readonly ["grey", "_975_75", "hover"]; readonly color: { readonly light: "#dfdfdf"; readonly dark: "#3f3f3f"; }; readonly parsedColorOptionName: { readonly colorName: "grey"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-grey-active"; readonly themePath: readonly ["background", "alt", "grey", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "grey"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--grey-975-75-active"; readonly themePath: readonly ["grey", "_975_75", "active"]; readonly color: { readonly light: "#cfcfcf"; readonly dark: "#525252"; }; readonly parsedColorOptionName: { readonly colorName: "grey"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-blue-france"; readonly themePath: readonly ["background", "alt", "blueFrance", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "blueFrance"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-france-975-75"; readonly themePath: readonly ["blueFrance", "_975_75", "default"]; readonly color: { readonly light: "#f5f5fe"; readonly dark: "#1b1b35"; }; readonly parsedColorOptionName: { readonly colorName: "blueFrance"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-blue-france-hover"; readonly themePath: readonly ["background", "alt", "blueFrance", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "blueFrance"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-france-975-75-hover"; readonly themePath: readonly ["blueFrance", "_975_75", "hover"]; readonly color: { readonly light: "#dcdcfc"; readonly dark: "#3a3a68"; }; readonly parsedColorOptionName: { readonly colorName: "blueFrance"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-blue-france-active"; readonly themePath: readonly ["background", "alt", "blueFrance", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "blueFrance"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-france-975-75-active"; readonly themePath: readonly ["blueFrance", "_975_75", "active"]; readonly color: { readonly light: "#cbcbfa"; readonly dark: "#4d4d83"; }; readonly parsedColorOptionName: { readonly colorName: "blueFrance"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-red-marianne"; readonly themePath: readonly ["background", "alt", "redMarianne", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "redMarianne"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--red-marianne-975-75"; readonly themePath: readonly ["redMarianne", "_975_75", "default"]; readonly color: { readonly light: "#fef4f4"; readonly dark: "#2b1919"; }; readonly parsedColorOptionName: { readonly colorName: "redMarianne"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-red-marianne-hover"; readonly themePath: readonly ["background", "alt", "redMarianne", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "redMarianne"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--red-marianne-975-75-hover"; readonly themePath: readonly ["redMarianne", "_975_75", "hover"]; readonly color: { readonly light: "#fcd7d7"; readonly dark: "#573737"; }; readonly parsedColorOptionName: { readonly colorName: "redMarianne"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-red-marianne-active"; readonly themePath: readonly ["background", "alt", "redMarianne", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "redMarianne"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--red-marianne-975-75-active"; readonly themePath: readonly ["redMarianne", "_975_75", "active"]; readonly color: { readonly light: "#fac4c4"; readonly dark: "#704848"; }; readonly parsedColorOptionName: { readonly colorName: "redMarianne"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-green-tilleul-verveine"; readonly themePath: readonly ["background", "alt", "greenTilleulVerveine", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "greenTilleulVerveine"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-tilleul-verveine-975-75"; readonly themePath: readonly ["greenTilleulVerveine", "_975_75", "default"]; readonly color: { readonly light: "#fef7da"; readonly dark: "#201e14"; }; readonly parsedColorOptionName: { readonly colorName: "greenTilleulVerveine"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-green-tilleul-verveine-hover"; readonly themePath: readonly ["background", "alt", "greenTilleulVerveine", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "greenTilleulVerveine"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-tilleul-verveine-975-75-hover"; readonly themePath: readonly ["greenTilleulVerveine", "_975_75", "hover"]; readonly color: { readonly light: "#fce552"; readonly dark: "#433f2e"; }; readonly parsedColorOptionName: { readonly colorName: "greenTilleulVerveine"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-green-tilleul-verveine-active"; readonly themePath: readonly ["background", "alt", "greenTilleulVerveine", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "greenTilleulVerveine"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-tilleul-verveine-975-75-active"; readonly themePath: readonly ["greenTilleulVerveine", "_975_75", "active"]; readonly color: { readonly light: "#ebd54c"; readonly dark: "#57533d"; }; readonly parsedColorOptionName: { readonly colorName: "greenTilleulVerveine"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-green-bourgeon"; readonly themePath: readonly ["background", "alt", "greenBourgeon", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "greenBourgeon"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-bourgeon-975-75"; readonly themePath: readonly ["greenBourgeon", "_975_75", "default"]; readonly color: { readonly light: "#e6feda"; readonly dark: "#182014"; }; readonly parsedColorOptionName: { readonly colorName: "greenBourgeon"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-green-bourgeon-hover"; readonly themePath: readonly ["background", "alt", "greenBourgeon", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "greenBourgeon"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-bourgeon-975-75-hover"; readonly themePath: readonly ["greenBourgeon", "_975_75", "hover"]; readonly color: { readonly light: "#a7fc62"; readonly dark: "#35432e"; }; readonly parsedColorOptionName: { readonly colorName: "greenBourgeon"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-green-bourgeon-active"; readonly themePath: readonly ["background", "alt", "greenBourgeon", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "greenBourgeon"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-bourgeon-975-75-active"; readonly themePath: readonly ["greenBourgeon", "_975_75", "active"]; readonly color: { readonly light: "#98ed4d"; readonly dark: "#46573d"; }; readonly parsedColorOptionName: { readonly colorName: "greenBourgeon"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-green-emeraude"; readonly themePath: readonly ["background", "alt", "greenEmeraude", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "greenEmeraude"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-emeraude-975-75"; readonly themePath: readonly ["greenEmeraude", "_975_75", "default"]; readonly color: { readonly light: "#e3fdeb"; readonly dark: "#142018"; }; readonly parsedColorOptionName: { readonly colorName: "greenEmeraude"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-green-emeraude-hover"; readonly themePath: readonly ["background", "alt", "greenEmeraude", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "greenEmeraude"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-emeraude-975-75-hover"; readonly themePath: readonly ["greenEmeraude", "_975_75", "hover"]; readonly color: { readonly light: "#94f9b9"; readonly dark: "#2e4335"; }; readonly parsedColorOptionName: { readonly colorName: "greenEmeraude"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-green-emeraude-active"; readonly themePath: readonly ["background", "alt", "greenEmeraude", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "greenEmeraude"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-emeraude-975-75-active"; readonly themePath: readonly ["greenEmeraude", "_975_75", "active"]; readonly color: { readonly light: "#6df1a3"; readonly dark: "#3d5846"; }; readonly parsedColorOptionName: { readonly colorName: "greenEmeraude"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-green-menthe"; readonly themePath: readonly ["background", "alt", "greenMenthe", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "greenMenthe"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-menthe-975-75"; readonly themePath: readonly ["greenMenthe", "_975_75", "default"]; readonly color: { readonly light: "#dffdf7"; readonly dark: "#15201e"; }; readonly parsedColorOptionName: { readonly colorName: "greenMenthe"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-green-menthe-hover"; readonly themePath: readonly ["background", "alt", "greenMenthe", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "greenMenthe"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-menthe-975-75-hover"; readonly themePath: readonly ["greenMenthe", "_975_75", "hover"]; readonly color: { readonly light: "#84f9e7"; readonly dark: "#30433f"; }; readonly parsedColorOptionName: { readonly colorName: "greenMenthe"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-green-menthe-active"; readonly themePath: readonly ["background", "alt", "greenMenthe", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "greenMenthe"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-menthe-975-75-active"; readonly themePath: readonly ["greenMenthe", "_975_75", "active"]; readonly color: { readonly light: "#70ebd8"; readonly dark: "#3f5753"; }; readonly parsedColorOptionName: { readonly colorName: "greenMenthe"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-green-archipel"; readonly themePath: readonly ["background", "alt", "greenArchipel", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "greenArchipel"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-archipel-975-75"; readonly themePath: readonly ["greenArchipel", "_975_75", "default"]; readonly color: { readonly light: "#e5fbfd"; readonly dark: "#152021"; }; readonly parsedColorOptionName: { readonly colorName: "greenArchipel"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-green-archipel-hover"; readonly themePath: readonly ["background", "alt", "greenArchipel", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "greenArchipel"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-archipel-975-75-hover"; readonly themePath: readonly ["greenArchipel", "_975_75", "hover"]; readonly color: { readonly light: "#99f2f8"; readonly dark: "#2f4345"; }; readonly parsedColorOptionName: { readonly colorName: "greenArchipel"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-green-archipel-active"; readonly themePath: readonly ["background", "alt", "greenArchipel", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "greenArchipel"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--green-archipel-975-75-active"; readonly themePath: readonly ["greenArchipel", "_975_75", "active"]; readonly color: { readonly light: "#73e9f0"; readonly dark: "#3f5759"; }; readonly parsedColorOptionName: { readonly colorName: "greenArchipel"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-blue-ecume"; readonly themePath: readonly ["background", "alt", "blueEcume", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "blueEcume"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-ecume-975-75"; readonly themePath: readonly ["blueEcume", "_975_75", "default"]; readonly color: { readonly light: "#f4f6fe"; readonly dark: "#171d2f"; }; readonly parsedColorOptionName: { readonly colorName: "blueEcume"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-blue-ecume-hover"; readonly themePath: readonly ["background", "alt", "blueEcume", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "blueEcume"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-ecume-975-75-hover"; readonly themePath: readonly ["blueEcume", "_975_75", "hover"]; readonly color: { readonly light: "#d7dffb"; readonly dark: "#333e5e"; }; readonly parsedColorOptionName: { readonly colorName: "blueEcume"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-blue-ecume-active"; readonly themePath: readonly ["background", "alt", "blueEcume", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "blueEcume"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-ecume-975-75-active"; readonly themePath: readonly ["blueEcume", "_975_75", "active"]; readonly color: { readonly light: "#c3cffa"; readonly dark: "#445179"; }; readonly parsedColorOptionName: { readonly colorName: "blueEcume"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-blue-cumulus"; readonly themePath: readonly ["background", "alt", "blueCumulus", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "blueCumulus"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-cumulus-975-75"; readonly themePath: readonly ["blueCumulus", "_975_75", "default"]; readonly color: { readonly light: "#f3f6fe"; readonly dark: "#171e2b"; }; readonly parsedColorOptionName: { readonly colorName: "blueCumulus"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-blue-cumulus-hover"; readonly themePath: readonly ["background", "alt", "blueCumulus", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "blueCumulus"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-cumulus-975-75-hover"; readonly themePath: readonly ["blueCumulus", "_975_75", "hover"]; readonly color: { readonly light: "#d3dffc"; readonly dark: "#333f56"; }; readonly parsedColorOptionName: { readonly colorName: "blueCumulus"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-blue-cumulus-active"; readonly themePath: readonly ["background", "alt", "blueCumulus", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "blueCumulus"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--blue-cumulus-975-75-active"; readonly themePath: readonly ["blueCumulus", "_975_75", "active"]; readonly color: { readonly light: "#bed0fa"; readonly dark: "#43536f"; }; readonly parsedColorOptionName: { readonly colorName: "blueCumulus"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-purple-glycine"; readonly themePath: readonly ["background", "alt", "purpleGlycine", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "purpleGlycine"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--purple-glycine-975-75"; readonly themePath: readonly ["purpleGlycine", "_975_75", "default"]; readonly color: { readonly light: "#fef3fd"; readonly dark: "#251a24"; }; readonly parsedColorOptionName: { readonly colorName: "purpleGlycine"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-purple-glycine-hover"; readonly themePath: readonly ["background", "alt", "purpleGlycine", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "purpleGlycine"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--purple-glycine-975-75-hover"; readonly themePath: readonly ["purpleGlycine", "_975_75", "hover"]; readonly color: { readonly light: "#fcd4f8"; readonly dark: "#4c394a"; }; readonly parsedColorOptionName: { readonly colorName: "purpleGlycine"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-purple-glycine-active"; readonly themePath: readonly ["background", "alt", "purpleGlycine", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "purpleGlycine"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--purple-glycine-975-75-active"; readonly themePath: readonly ["purpleGlycine", "_975_75", "active"]; readonly color: { readonly light: "#fabff5"; readonly dark: "#634a60"; }; readonly parsedColorOptionName: { readonly colorName: "purpleGlycine"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-pink-macaron"; readonly themePath: readonly ["background", "alt", "pinkMacaron", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "pinkMacaron"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--pink-macaron-975-75"; readonly themePath: readonly ["pinkMacaron", "_975_75", "default"]; readonly color: { readonly light: "#fef4f2"; readonly dark: "#261b19"; }; readonly parsedColorOptionName: { readonly colorName: "pinkMacaron"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-pink-macaron-hover"; readonly themePath: readonly ["background", "alt", "pinkMacaron", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "pinkMacaron"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--pink-macaron-975-75-hover"; readonly themePath: readonly ["pinkMacaron", "_975_75", "hover"]; readonly color: { readonly light: "#fcd8d0"; readonly dark: "#4e3a37"; }; readonly parsedColorOptionName: { readonly colorName: "pinkMacaron"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-pink-macaron-active"; readonly themePath: readonly ["background", "alt", "pinkMacaron", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "pinkMacaron"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--pink-macaron-975-75-active"; readonly themePath: readonly ["pinkMacaron", "_975_75", "active"]; readonly color: { readonly light: "#fac5b8"; readonly dark: "#654c48"; }; readonly parsedColorOptionName: { readonly colorName: "pinkMacaron"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-pink-tuile"; readonly themePath: readonly ["background", "alt", "pinkTuile", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "pinkTuile"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--pink-tuile-975-75"; readonly themePath: readonly ["pinkTuile", "_975_75", "default"]; readonly color: { readonly light: "#fef4f3"; readonly dark: "#281b19"; }; readonly parsedColorOptionName: { readonly colorName: "pinkTuile"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-pink-tuile-hover"; readonly themePath: readonly ["background", "alt", "pinkTuile", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "pinkTuile"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--pink-tuile-975-75-hover"; readonly themePath: readonly ["pinkTuile", "_975_75", "hover"]; readonly color: { readonly light: "#fcd7d3"; readonly dark: "#513a37"; }; readonly parsedColorOptionName: { readonly colorName: "pinkTuile"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-pink-tuile-active"; readonly themePath: readonly ["background", "alt", "pinkTuile", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "pinkTuile"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--pink-tuile-975-75-active"; readonly themePath: readonly ["pinkTuile", "_975_75", "active"]; readonly color: { readonly light: "#fac4be"; readonly dark: "#694c48"; }; readonly parsedColorOptionName: { readonly colorName: "pinkTuile"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-yellow-tournesol"; readonly themePath: readonly ["background", "alt", "yellowTournesol", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "yellowTournesol"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--yellow-tournesol-975-75"; readonly themePath: readonly ["yellowTournesol", "_975_75", "default"]; readonly color: { readonly light: "#fef6e3"; readonly dark: "#221d11"; }; readonly parsedColorOptionName: { readonly colorName: "yellowTournesol"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-yellow-tournesol-hover"; readonly themePath: readonly ["background", "alt", "yellowTournesol", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "yellowTournesol"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--yellow-tournesol-975-75-hover"; readonly themePath: readonly ["yellowTournesol", "_975_75", "hover"]; readonly color: { readonly light: "#fce086"; readonly dark: "#473e29"; }; readonly parsedColorOptionName: { readonly colorName: "yellowTournesol"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-yellow-tournesol-active"; readonly themePath: readonly ["background", "alt", "yellowTournesol", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "yellowTournesol"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--yellow-tournesol-975-75-active"; readonly themePath: readonly ["yellowTournesol", "_975_75", "active"]; readonly color: { readonly light: "#f5d24b"; readonly dark: "#5c5136"; }; readonly parsedColorOptionName: { readonly colorName: "yellowTournesol"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-yellow-moutarde"; readonly themePath: readonly ["background", "alt", "yellowMoutarde", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorName: "yellowMoutarde"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--yellow-moutarde-975-75"; readonly themePath: readonly ["yellowMoutarde", "_975_75", "default"]; readonly color: { readonly light: "#fef5e8"; readonly dark: "#231d14"; }; readonly parsedColorOptionName: { readonly colorName: "yellowMoutarde"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; }; }; }, { readonly colorDecisionName: "--background-alt-yellow-moutarde-hover"; readonly themePath: readonly ["background", "alt", "yellowMoutarde", "hover"]; readonly parsedColorDecisionName: { readonly state: "hover"; readonly context: "background"; readonly colorName: "yellowMoutarde"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--yellow-moutarde-975-75-hover"; readonly themePath: readonly ["yellowMoutarde", "_975_75", "hover"]; readonly color: { readonly light: "#fcdca3"; readonly dark: "#483e2e"; }; readonly parsedColorOptionName: { readonly colorName: "yellowMoutarde"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "hover"; }; }; }, { readonly colorDecisionName: "--background-alt-yellow-moutarde-active"; readonly themePath: readonly ["background", "alt", "yellowMoutarde", "active"]; readonly parsedColorDecisionName: { readonly state: "active"; readonly context: "background"; readonly colorName: "yellowMoutarde"; readonly usage: "alt"; }; readonly colorOption: { readonly colorOptionName: "--yellow-moutarde-975-75-active"; readonly themePath: readonly ["yellowMoutarde", "_975_75", "active"]; readonly color: { readonly light: "#fbcd64"; readonly dark: "#5e513d"; }; readonly parsedColorOptionName: { readonly colorName: "yellowMoutarde"; readonly brightness: { readonly isInvariant: false; readonly light: { readonly value: 975; }; readonly dark: { readonly value: 75; }; }; readonly state: "active"; }; }; }, { readonly colorDecisionName: "--background-alt-orange-terre-battue"; readonly themePath: readonly ["background", "alt", "orangeTerreBattue", "default"]; readonly parsedColorDecisionName: { readonly context: "background"; readonly colorNa