Make schemes easy to create with qss stylesheets

[Owen Williams]

Current mixxx schemes are a little primitive and more targeted at older-style skins. It would be nice to update it for the new skin paradigm.

* colors as variable names: It would be nice to define colors in the qss as @mycolor and then have mixxx do a search and replace on the color names with a scheme-defined set of colors.
* objectname-specific scheme filters -- have a filter only apply to object names that match a regex pattern

[RJ Skerry-Ryan (rryan)]

see also bug #1328008 and bug #1396705

Color schemes will make a comeback! Probably in 2.1.

[jus (jus)]

Regardless of the return of the color scheme, i think a mini-sass is essential to make skin stylesheets easier to organize and maintain. They are grow to massive code sizes.

For a start, just as suggested in OP, it would be helpful to define some variables like

@myColor = #FFFFFF
@myColor2 = #112233
@h1 = 20px

and use them similar to

#ObjectName {
  font: @h1;
  text-align: left;
  color: @myColor2;
  background-color: @myColor;
  margin: 0.2em;
  border-top: none;
  border-bottom: 1px solid @myColor2;
}

Support for multiline expressions would be a nice-to-have.

[jus (jus)]

While the feature is not implemented as requested yet, there is some progress.
Since 2.1, you can make a color schema work only on specific regions, like

<Scheme>
  <Name>foo</Name>
  <Filters>
    <HSVTweak>
      <HConst>90</HConst>
      <SConst>-30</SConst>
      <VConst>-30</VConst>
    </HSVTweak>
    <Add>
      <Amount>-40</Amount>
    </Add>
  </Filters>
    <Style src="skin:foo.qss"/>
</Scheme>

or load specific stylesheets

<Schemes>
   <Scheme>
     <Name>Style1</Name>
     <Filters/>
     <Style src="skin:style1.qss"/>
   </Scheme>
   <Scheme>
     <Name>Style2</Name>
     <Filters/>
     <Style src="skin:style2.qss"/>
   </Scheme>
</Schemes>

https://github.com/mixxxdj/mixxx/pull/1501

[ronso0 (ronso0)]

I'd like to adopt part 1 of this bug: colors as variable names

where would I start?
I searched the mixxx code base as well as Qt5 sources for 'css' but I don't find the actual css parser.

[ronso0 (ronso0)]

the idea:

* declare @mycolor at the top of the style.css or in any <Scheme> node:
 @variables {
  bgcolor1: #ff8800;
  buttonfont: Arial; }
* use variables for css properties:
  border: 2px solid @bgcolor1;
* on skin load, replace var names with values
* variables in <Scheme> overwrite variable declarations in css

[Daniel Schürmann (daschuer)]

https://mixxx.zulipchat.com/#narrow/stream/109171-development/topic/color.20variables.20for.20css

[ronso0 (ronso0)]

related:
set variables with color scheme https://github.com/mixxxdj/mixxx/pull/1988

[Swiftb0y (swiftb0y)]

Mixxx now uses GitHub for bug tracking. This bug has been migrated to:
https://github.com/mixxxdj/mixxx/issues/7728