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, 24 days 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 24 days 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 24 days ago →
    🇦🇲Armenia murz Yerevan, Armenia
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024