Add CSS variables with UI Skins

Created on 8 February 2023, about 2 years ago

With DSFR, it is technically possible to override some variables on runtime..

Some variables related to the Color style:

--text-default-grey: var(--grey-200-850);
--text-default-info: var(--info-425-625);
--text-default-success: var(--success-425-625);
--text-default-warning: var(--warning-425-625);
--text-default-error: var(--error-425-625);
--text-title-grey: var(--grey-50-1000);
--text-title-blue-france: var(--blue-france-sun-113-625);
--text-title-red-marianne: var(--red-marianne-425-625);
--text-inverted-grey: var(--grey-1000-50);
--text-inverted-blue-france: var(--blue-france-975-sun-113);
--text-inverted-red-marianne: var(--red-marianne-975-75);
--text-inverted-info: var(--info-975-75);
--text-inverted-success: var(--success-975-75);
--text-inverted-warning: var(--warning-975-75);
--text-inverted-error: var(--error-975-75);
...

Some variables related to the Background style:

--background-contrast-info: var(--info-950-100);
--background-contrast-info-hover: var(--info-950-100-hover);
--background-contrast-info-active: var(--info-950-100-active);
--background-contrast-success: var(--success-950-100);
--background-contrast-success-hover: var(--success-950-100-hover);
--background-contrast-success-active: var(--success-950-100-active);
--background-contrast-warning: var(--warning-950-100);
--background-contrast-warning-hover: var(--warning-950-100-hover);
--background-contrast-warning-active: var(--warning-950-100-active);
--background-contrast-error: var(--error-950-100);
--background-contrast-error-hover: var(--error-950-100-hover);
--background-contrast-error-active: var(--error-950-100-active);
--background-contrast-raised-grey: var(--grey-950-125);
--background-contrast-raised-grey-hover: var(--grey-950-125-hover);
--background-contrast-raised-grey-active: var(--grey-950-125-active);
--background-contrast-overlap-grey: var(--grey-950-150);
--background-contrast-overlap-grey-hover: var(--grey-950-150-hover);
--background-contrast-overlap-grey-active: var(--grey-950-150-active);
...

Some others to investigate:

Let's be careful about the 2 color palettes:

The internal one, with the numbers, (examples: --grey-950-150, --blue-france-975-sun-113...). It is surprising those colors are exposed as CSS variables, because they are used as default, buid time defined, values for the other palette.
The "semantic" one (example: --background-contrast-warning-hove) which is legit.

Let's expose only the semantic one with UI Skins. And decide how do we manage the default value which are other CSS variables.

✨ Feature request

Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @pdureau
Issue was unassigned.
Comment about 2 years ago →
🇫🇷France pdureau Paris
Comment 5 months ago →
🇫🇷France just_like_good_vibes PARIS
@pdureau, what do we do now with this issue?
i am not sure to fully understand yet.

please advice
Assigned to pdureau
Status changed to Postponed: needs info 5 months ago4:45pm 20 November 2024
Comment 5 months ago →
🇫🇷France just_like_good_vibes PARIS
Comment 5 months ago →
🇫🇷France pdureau Paris
We do nothing for now. CSS variables in DSFR doesn't look very nicely implemented today, and DSFR is not a brand-agnostic deisgn system so this feature is low priority.
Comment 4 months ago →
🇫🇷France just_like_good_vibes PARIS
yes, there are CSS variables, but they are not there to be overridden by the drupal theme.
it seems there are for internal use only inside the DSFR library.

let's make a final deep check, to verify none of them are meant to be changed at runtime ?

Production build 0.71.5 2024