Change CSS3 variables from camelCase to kebab-case

Created on 11 September 2022, over 2 years ago

Updated 29 March 2023, over 1 year ago

Problem/Motivation

Core will use kebab-case in the future for it's CSS3 classes. It's also better readable.
We can also clean up CSS3 variable namings and prefix them all with --gin

Steps to reproduce

Proposed resolution

Provide a legacy.css which converts all camelCase to kebab-case until version 4.0.0 arrives to avoid a breaking change.

Remaining tasks

Testing.

User interface changes

–

API changes

If you use gin-custom.css (or a subtheme) you'll need to change to the new naming scheme (4.0.0+)

Data model changes

📌 Task

Status

Fixed

Version

3.0

Component

Code

Created by

🇨🇭Switzerland saschaeggi Zurich

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

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

Comment over 1 year ago →
🇩🇪Germany hexabinaer Berlin, Germany
Preparing some overrides that we provide via css injector. I noticed that best-guess:

--colorGinPrimaryLightHover becomes --gin-color-primary-light-hover

works in many cases but not always:

--colorGinInfoBackground becomes --gin-bg-info

Where do we find a link to the naming scheme reference sheet/mapping table or such?
Comment over 1 year ago →
🇨🇭Switzerland saschaeggi Zurich
@hexabinaer the best reference might be the legacy mapping file: https://git.drupalcode.org/project/gin/-/blob/8.x-3.x/styles/theme/legac...

Cheers!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024