custom value for custom property #192

Activity

1. thollander commented on Dec 29, 2019

   

   thollander

   on Dec 29, 2019

   More actions

   Hi,

   Facing the same problem here ...
   However, I saw that it seems to be wanted in transform-properties.js#L43.
   Not sure why
2. NXTaar commented on Oct 28, 2020

   

   NXTaar

   on Oct 28, 2020

   Last edited by NXTaar

   More actions

   Hi! I have the same problem. Need such functionality for proper theming.
   my code
   colors.css

   :root {
       --c-primary-bg: hsl(251, 80%, 88%);
       --c-primary: hsl(251, 78%, 40%);
       --c-primary-hover: hsl(251, 70%, 29%);
       --c-primary-pressed: hsl(238, 70%, 24%);
   
       --c-primary-alt-bg: hsl(0, 0%, 100%);
       --c-primary-alt-bg-hover: hsl(251, 30%, 96%);
       --c-primary-alt-bg-pressed: hsl(251, 27%, 92%);
   }

   button.css

   @import "../colors.css";
   @import "../fonts.css";
   
   .control {
       font: var(--font-primary);
       --btn-background:          var(--c-primary);
       --btn-background-hover:    var(--c-primary-hover);
       --btn-background-active:   var(--c-primary-pressed);
   }

   Import is resolved properly, but the result has same values, not replaced.

   .control {
       font: 400 16px/24px 'Helvetica Neue';
       --btn-background:          var(--c-primary);
       --btn-background-hover:    var(--c-primary-hover);
       --btn-background-active:   var(--c-primary-pressed);
   }

   🎉React with 🎉1Reacted by m2-oss