Contrib.social

Refactor Claro's elements stylesheet

Open on Drupal.org →
Created on 20 April 2023, about 1 year ago
Updated 11 July 2023, 12 months ago

This is a child of 🌱 [META] Update Claro CSS with new coding standards Active and part of 🌱 [PLAN] Drupal CSS Modernization Initiative Active .

Steps to reproduce
The stylesheet at https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/claro/css/base/elements.pcss.css needs to be refactored to make use of modern CSS and Drupal core's PostCSS tooling.

@todo: Add clear testing instructions to test this manually on the UI.

Proposed resolution
Use CSS Logical Properties where appropriate.
Use CSS nesting where appropriate.
Use existing variables (variables.pcss.css) where appropriate. Follow the proposed Drupal CSS coding standards to name the variables.
Add a comment when there's a value where there is not a variable like font-size: 1.23rem; /* @todo One off value. */
When possible, set variables at the root of the component and then map them to global theme variables:

.entity-meta {
          --entity-meta-title-font-size: var(--font-size-h5);

          ... more style
        }

        .entity-meta__title {
          font-size: var(--entity-meta-title-font-size);
        }

Out of scope

User interface changes

None. There should be no visual differences.
Please post before/after screenshots and make sure they look the same.

📌 Task
Status

Fixed

Version

11.0 🔥

Component
Claro  →

Last updated about 17 hours ago

Created by

🇮🇳India Gauravvv Delhi, India

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024