Undefined color variable in css bug

Created on 20 October 2024, about 1 month ago

var(--gin-color-primary) in CSS is undefined causing the checkbox and radio box not to change color when selected, at /gin/dist/css/base/gin.css.

This happened at least in Webfrom forms.

🐛 Bug report
Status

Active

Component

Code

Created by

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

Comments & Activities

  • Issue created by @aaldayel
  • 🇨🇭Switzerland saschaeggi Zurich

    We need steps how to reproduce this, as I just checked it and it works as expected, apl
    Variables are set correctly.

  • Thank you Saschaeggi,

    The radio buttons and checkboxes aren't visually updating properly when selected (example from my testing website: https://kindite.org/kindite/web/form/example-style-guide). When I manually replaced var(--gin-color-primary) with any #rrggbb color in /gin/dist/css/base/gin.css, it worked.

    input[type="radio"]:checked::before {
      background-color: #007cba;  /* Replaced var(--gin-color-primary) */
    }
    
    input[type="checkbox"]:checked::before {
      background-color: #007cba;  /* Replaceed var(--gin-color-primary) */
    }
    
  • 🇨🇭Switzerland saschaeggi Zurich

    I'm closing this as I can't reproduce this in the backend. Note that Gin is not designed to be used as a frontend theme. While you can, it's not something we support. You'll need to load the variables.css (via gin/gin_base) to make the accent color work.

Production build 0.71.5 2024