Add theme support #39
Conversation
|
Oooooooh I like this idea very much! We've since changed the build process to minify these with cssnano, so variables will be wiped out. One potential path forward could be the following:
Then folks could import |
|
I wouldn't be opposed to having two builds: one with variables intact and one without, although I wouldn't call the latter As for what to put for the By the way, I will be doing a rebase when I update this branch if that's alright with you. It'll be a lot cleaner to update that way. |
tpenguinltg
force-pushed
the
theme-support
branch
from
6569761
to
b8acae6
Compare
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/jdan/98css/qulxywfus |
tpenguinltg
force-pushed
the
theme-support
branch
from
b8acae6
to
0108fb3
Compare
|
@jdan I finally got around to updating this. There was a lot to update with all the new features, but I think this is all up to date now. For the build process, I implemented my |
Support the full range of configurable colors in a Windows Classic theme. The colors are configured using CSS variables named after the corresponding Windows theme file property converted from PascalCase to kebab-case. Colors are given in rgb format to make it easier to convert and recognize values from a Windows theme file. The old variables are kept for backwards compatibility and are mapped accordingly. However, the old `--button-face`, which maps to `--button-light`, has not been mapped because of a name conflict with the new `--button-face`; this is a breaking change.
Remove the radio width from the calculation for the radio dot top value. I'm not sure why this works, but it does. Also remove redundant precalc variables. Nested calc calls are reduced to a single one automatically.
The computed asset, 98.css, precomputes the values that uses CSS variables. The non-computed asset, 98-full.css, preserves the variables and uses the computed values as fallbacks for browsers without support for custom properties.
tpenguinltg
force-pushed
the
theme-support
branch
from
0108fb3
to
3c4b77d
Compare
|
Looks like this closed because I deleted the master branch in favor of |
Allow configuring the entire set of Windows Classic colours through CSS variables. The variables are named after the corresponding keys in the Windows theme file converted to kebab case. Many of them are not currently used but may prove to be useful later on. The colours are presented in
rgb()format for easy conversion and verification with theme files. I don't have a copy of windows handy to check so I had to guess the mapping for some of the elements, most notably the dotted outlines.The old variables are still in place for backwards compatibility and have been mapped to the new variables accordingly. Note, however, that there is a breaking change because of there is a naming conflict with
--button-face, which maps to--button-light. I see three solutions: 1) leave it as-is and accept the breaking change, 2) go all the way and remove the old variables, or 3) use the original PascalCase names to avoid the conflict. I don't have a preference either way.For this change to be meaningful, the build process has been modified to preserve CSS variables while providing the computed value as a fallback. This allows a downstream user to easily add a new stylesheet that overrides the custom properties in the root without modifying the original CSS.
Known bug: SVG assets still have hard-coded colours and are not affected by the variables.
Closes #33
To test this patch, you can load one of these stylesheets (attached as
.txtbecause of GitHub limitations) or one of your own and into the demo. The DeviantArt links to the original themes are also included for reference.