@codegouvfr/react-dsfr
Version:
French State Design System React integration library
1,414 lines • 642 kB
TypeScript
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