Instructions for Developers on Using Colors in Solo Theme

Created on 20 July 2024, 5 months ago
Updated 4 August 2024, 5 months ago

Problem/Motivation

In solo_subtheme/css/solo-subtheme-style.css you start with the 'Variable Definitions', then the 'region names' and finally the examples of colors from the 'Variable Definitions'.
It would be easier to have the definitions and color examples side by side or merged together.
Reason: I knew I had seen the definitions somewhere and searched on the solo website, but could not find them.
By default, my editor shows the color examples and the added css. Until today I did not get back to the beginning of the page....

✨ Feature request
Status

Fixed

Version

1.0

Component

Documentation

Created by

πŸ‡³πŸ‡±Netherlands promes

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

Comments & Activities

  • Issue created by @promes
  • Status changed to Fixed 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    Thank you for the feedback. I have created a page on Drupal.org for colors: Instructions for Developers on Using Colors in Solo Theme β†’ .

    https://www.youtube.com/watch?v=8aP3FEzZZas

    I also updated the examples in the Solo sub-theme as follows:

    #page-wrapper {
      background-color: var(--r-bg);
      color: var(--r-tx);
      border-color: var(--r-br);
    }
    
    h1, h2, h3 {
      color: var(--r-h1);
    }
    
    a:not(li.nav__menu-item a) {
      color: var(--r-lk);
      color: var(--r-lk-h);
    }
    
    input:not(.button) {
      background-color: var(--r-bg-fr);
    }
    
    li.nav__menu-item a {
      color: var(--r-tx-lk);
      background-color: var(--r-bg-lk);
    }
    
    li.nav__menu-item a:hover {
      color: var(--r-tx-lk-h);
      background-color: var(--r-bg-lk-h);
    }
    
    button:not(li.nav__menu-item button) {
      color: var(--r-tx-bt);
      background-color: var(--r-bg-bt);
    }
    
    button:not(li.nav__menu-item button):hover {
      color: var(--r-tx-bt-h);
      background-color: var(--r-bg-bt-h);
    }

    Best wishes,
    Alaa

  • πŸ‡³πŸ‡±Netherlands promes

    Alaa, thanks for the update. Even better than I had expected.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    You are welcome!

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

Production build 0.71.5 2024