Problem/Motivation

In #3130247: [META] Plan for version 2.x we are planning:

Check CSS variables and consider using/changing where it make sense and will not make too much problems with upgrading custom theme code.

However I am seeing more and more problems when styling (coloring) complex header and footer implementations and components. The problem is coming from too strong rules like for example in themes/bs_bootstrap/sass/layout/partials/_header.scss we have:

.page__header__top {
  @if $header-top-link-color != $header-link-color or $header-top-link-hover-color != $header-link-hover-color {
    a:not([class]), a.ext {
      @include style-link($header-top-link-color, $header-top-link-hover-color);
    }

    a.nav-link {
      @include style-nav-link($header-top-link-color, $header-top-link-hover-color);
    }
  }
}

This works fine for default cases, but as soon as you want to have variations like, light header for some site sections and dark header for some other, you will have a lot of problems overriding this rules.

Proposed resolution

We should switch to CSS variables aproach for this and more globally for all sections of a page. This could work something like this:

We have global link and text rule like

body {
  color: var(--body-color, #{$body-color});
}

a {
  color: var(--link-color, #{$link-color});

  // And other hover/focus/active color rules.
}

And then for a top region we would have

.page__header__top {
  --body-color: #{$header-top-color};
  --link-color: #{$header-top-link-color};
  ...
}

This is much easier to overide either with CSS rules that are defining color or that are overriding CSS variables.

Remaining tasks

  • Investigate how to name CSS variables. Check what Bootstrap 5 is doing and take their naming approach.
  • Not sure should this go to 1.x or 2.x version. We are lowering rules specificity so that can only help and custom rules should still work as expected. Test 1.x version first and if it will not break a lot of stuff or then it is better to push this to 1.x.
  • Implement.

Issue fork bs_base-3436198

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pivica created an issue. See original summary.

ravi kant made their first commit to this issue’s fork.

pivica’s picture

pivica commented
Issue summary: View changes

pivica changed the visibility of the branch 3436198-switch-to-css to hidden.

pivica opened merge request !7

pivica’s picture

pivica commented

Decided to try to push this to 8.x-1.x version.

Introduced CSS vars are part taken from Bootstrap 5.3.x and the rest is added. I didn't want to push too much changes here, just to try to simplify overrides for current custom implementation, so this should not cause any problems when updating current child themes.

New CSS vars that are introduced are for heading and links colors

:root {
  --bs-heading-color: inherit;
  --bs-link-color: #026bc5;
  --bs-link-hover-color: #026bc5;
  --bsb-link-active-color: #026bc5;
}

And for nav link element:

.nav {
  --bs-nav-link-color: #026bc5;
  --bs-nav-link-hover-color: #026bc5;
  --bs-nav-link-disabled-color: #757575;
  --bsb-nav-link-hover-border-color: #026bc5;
  --bsb-nav-link-active-color: #026bc5;
  --bsb-nav-link-active-border-color: #026bc5;
}

New SASS variables:

$headings-color:                inherit !default;

// BS5 CSS vars prefix.
$prefix: bs- !default;

I'll test this against at least 3-4 custom projects before merging it.

pivica’s picture

pivica commented
Status: Active » Needs review

  • pivica committed 5f3fa3e2 on 8.x-1.x 
    Issue #3436198 by pivica: Switch to CSS variables for header and footer
pivica’s picture

pivica commented
Status: Needs review » Fixed

Merged.

  • pivica committed 5f3fa3e2 on 2.x 
    Issue #3436198 by pivica: Switch to CSS variables for header and footer

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.