[beta1] Restore broken color management

Created on 8 February 2023, over 1 year ago
Updated 14 March 2023, over 1 year ago

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

  1. Go to a layout builder page
  2. Edit a block
  3. Select content styles
  4. 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) {
}
πŸ› Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡«πŸ‡·France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024