Problem/Motivation
Background & "Text color" styles are empty in the YML declaration:
background:
label: Background
text_color:
label: Text color
Because the options are dynamically populated by _ui_suite_dsfr_get_colors_settings.
However, this specific (and complex) mechanism doesn't work anymore because the UI styles form structure (which is not a public API and is not supposed to be hacked) has changed.
A quick fix would be to update the form alteration using _ui_suite_dsfr_get_colors_settings but we can do better.
Steps to reproduce
- Go to a layout builder page
- Edit a block
- Select content styles
- Background & "Text color" select lists are empty
Proposed resolution
Add default values to the initial list (from ui_suite_dsfr.ui_styles.yml).
According to the documentation, there are 4 kinds of colors:
- Couleurs primaires (blue-france, red-marianne)
- Couleurs neutres (grey)
- Couleurs système (info, success, warning, error)
- Couleurs illustratives (green-tilleul, green-bourgeon, green-emeraude, green-menthe... and all the others)
The 3 first types of color can be put as default.
So, here is a proposal for those default values:
background:
label: Background
category: Color
previewed_with:
- fr-p-1v
options:
fr-background-default--grey: Default grey
fr-background-alt--blue-france: Alt blue France
fr-background-alt--red-marianne: Alt red Marianne
fr-background-alt--grey: Alt grey
fr-background-flat--grey:
label: Flat grey
previewed_with:
- fr-text-inverted--grey
fr-background-flat--info: Flat info
fr-background-flat--success: Flat success
fr-background-flat--warning: Flat warning
fr-background-flat--error: Flat error
fr-background-contrast--blue-france: Contrast blue France
fr-background-contrast--red-marianne: Contrast red Marianne
fr-background-contrast--grey: Contrast grey
fr-background-contrast--info: Contrast info
fr-background-contrast--success: Contrast success
fr-background-contrast--warning: Contrast warning
fr-background-contrast--error: Contrast error
text_color:
label: Text color
category: Color
previewed_with:
- fr-p-1v
options:
fr-text-title--blue-france: Title blue France
fr-text-title--red-marianne: Title red Marianne
fr-text-title--grey: Title grey
fr-text-default--grey: Grey
fr-text-default--info: Info
fr-text-default--success: Success
fr-text-default--warning: Warning
fr-text-default--error: Error
fr-text-inverted--blue-france:
label: Inverted blue France
previewed_with:
- fr-background-flat--grey
- fr-text-default--grey
fr-text-inverted--red-marianne:
label: Inverted red Marianne
previewed_with:
- fr-background-flat--grey
- fr-text-default--grey
fr-text-inverted--grey:
label: Inverted grey
previewed_with:
- fr-background-flat--grey
- fr-text-default--grey
fr-text-inverted--info:
label: Inverted info
previewed_with:
- fr-background-flat--grey
- fr-text-default--grey
fr-text-inverted--success:
label: Inverted success
previewed_with:
- fr-background-flat--grey
fr-text-inverted--warning:
label: Inverted warning
previewed_with:
- fr-background-flat--grey
- fr-text-default--grey
fr-text-inverted--error:
label: Inverted error
previewed_with:
- fr-background-flat--grey
- fr-text-default--grey
A few options may be missing from this proposal: text-mention-grey, text-action-high-grey, text-label-blue-france...
Those values must also be removed from ui_suite_dsfr.info.yml.
Keep this system of injecting dynamically new options according to a theme settings value, but working on the definition discovery level instead of the form altering.
$this->alterInfo('ui_styles_styles');
can be found on StylePluginManager::__constructor() so we may be able to use such an hook:
function ui_suite_dsfr_ui_styles_styles_alter(array &$info) {
}