Contrib.social

Add CSS styles for colored text to Clario admin theme: primary, secondary, success, warning, error

Open on Drupal.org →
Created on 28 December 2024, 4 months ago

Problem/Motivation

Pretty often modules need to display some information with indicating the status of the text by color:
- positive (usually green)
- negative or danger (usually red)
- warning (usually orange)
- highlight or primary (usually blue)
- secondary (usually gray)

But now the Clario admin theme doesn't provide any classes out of the box for this!

So, each module has to invent and manage these classes on its own, that is not good.

Even in Drupal Core I see that each module implements own helper styles for this, instead of reusing a global one, examples:

.project-update__status--security-error {
  color: #970f00;
}
.views-ui-display-tab-bucket .views-display-setting {
  color: #666;
}
.region-message {
  color: var(--color-gray-600);
}

etc.

Steps to reproduce

Proposed resolution

Would be great to add and document the global styles for coloring texts in the admin panel, to make them reusable and decrease hardcoding of the colors in modules.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

✨ Feature request
Status

Active

Version

11.0 🔥

Component

Claro theme

Created by

🇦🇲Armenia murz Yerevan, Armenia

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

Comments & Activities

  • Issue created by @murz
  • Comment 4 months ago →
    🇦🇲Armenia murz Yerevan, Armenia

    I have found the core/themes/claro/css/theme/colors.pcss.css with some colors for text:

    /**
 * Reusable colors.
 */
.color-success {
  color: #325e1c;
  background-color: #f3faef;
}
.color-warning {
  color: #734c00;
  background-color: #fdf8ed;
}
.color-error {
  color: #a51b00;
  background-color: #fcf4f2;
}

    But they go with backgrounds, that is usually not suitable for texts!

    So, maybe just extend this CSS and separate colors and backgrounds to different styles?

  • Comment 4 months ago →
    🇦🇲Armenia murz Yerevan, Armenia
  • Comment 3 months ago →
    saurav-drupal-dev

    Thank you for raising this issue and for the detailed explanation! I agree that introducing reusable CSS classes for text colors in the Claro admin theme would greatly benefit module maintainers and improve consistency across the admin interface.

    Here are a few suggestions to enhance the proposed solution:

    Extend the existing core/themes/claro/css/theme/colors.css to separate colors meant specifically for text (e.g., .text-success, .text-warning, etc.). This would make it more intuitive for module developers to apply styles.
    Consider providing utility classes for both text color and background color (e.g., .bg-success) so developers have flexibility depending on the use case.
    Document the new classes in the Claro theme documentation. Including usage examples would encourage adoption.

    I can help test or contribute to this implementation. Let me know how I can assist further!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024