PricingBlog

use color-mix with variables

  • baba_bambule-1450462934621880382

    BabaBambule

    27 days ago

    So basically a follow up to this post

    https://discord.com/channels/972416966683926538/1266378893292732436/1266381383425720351

    I want to add color-mix to my theme and using it like this
    color-mix(in, oklab, #E85002, 80%, #FFFFFF, 20%)

    already works, but I'd like to replace the fixed color values for var(--brand) and var(--white)

    but writing
    color-mix(in, oklab, var(--brand), 80%, var(--white), 20%)
    always converts to
    color-mix(in, oklab, --brand, 80%, --white, 20%)

    and doesn't work anymore. Is that just not possible yet or am I missing something?
  • erikbeus-1450464389718085703

    Erik Beuschau

    27 days ago

    That sounds like a bug on our end in our CSS parsing 🤔 I'll check if we can fix this 🤞
    🚀1
  • erikbeus-1450473539844177980

    Erik Beuschau

    27 days ago

    Just to clarify. This is after entering the value in the color picker when setting up a color in your theme right?
  • baba_bambule-1450473984964427828

    BabaBambule

    27 days ago

    yep so entering the values manually works just fine
    1450473984746459207-image.png
  • but whenver I enter color-mix(in oklab, #hex 80%, #hex 20%) it converts the output to this color-mix(in, oklab, #6d7a79, 80%, #FFFFFF, 20%)
  • baba_bambule-1450474488218124298

    BabaBambule

    27 days ago

    color-mix(in oklab, var(--brand) 20%, #FFFFFF 80%) this gets converted to this color-mix(in, oklab, --brand, 20%, #FFFFFF, 80%) but doesn't work
    1450474488012734579-image.png
  • erikbeus-1450474590047310024

    Erik Beuschau

    27 days ago

    Got it 👍 I'll check if I can fix this in the color picker 🤞
  • erikbeus-1450480963162472549

    Erik Beuschau

    27 days ago

    I know that we're planning to deprecate the current theme system very soon, and it seems that inputting your color-mix function in the new theme setup does seem to work.
    You can try it out by enabling the Style-Variables-V2 on this page https://editor.nordcraft.com/flags
    We hope to release the new theming system before Christmas, but it might be delayed until early January.

    I hope that's okay for now, since we would prefer not to touch/break anything in the existing theming system 😅
    1450480963254489128-CleanShot_2025-12-16_at_14.30.372x.png
  • baba_bambule-1450481451752624252

    BabaBambule

    27 days ago

    before I enable the flag. Does it potentially break my current projects? otherwise I'd clone my current project first and try it there
  • Tod-1450481454214811699

    Tod

    27 days ago

    Great job @BabaBambule! Your contribution to the Nordcraft Community just made you advance to Community Level 4! 🌲
  • erikbeus-1450482114481881181

    Erik Beuschau

    27 days ago

    It should not. But it does mean that you need to "migrate" your current theme. You can just do it on a fresh branch on your project, and check if things work as expected. If not, just delete the branch again
  • baba_bambule-1450482490983841963

    BabaBambule

    27 days ago

    cool created a clone anyway.... can you select multiple variants and delete them?
  • erikbeus-1450483522513928314

    Erik Beuschau

    27 days ago

    I don't believe we support deleting multiple variables in 1 go atm no. @Jacob Kofoed might want to see if this is feasible to include eventually 🤞
    👍1
  • baba_bambule-1450483668333236306

    BabaBambule

    27 days ago

    alright thx for the quick help. I'll give it a try and see if it breaks too much stuff for now 😅
    👍1
  • baba_bambule-1450485837920866384

    BabaBambule

    27 days ago

    so neither is working @Erik Beuschau
    1450485837694505132-image.png
    1450485837421609133-image.png
  • erikbeus-1450486079625887919

    Erik Beuschau

    27 days ago

    Oh, I tested it and thought it looked alright 🙈 Sorry about that. We'll check what causes this 👍
    👍1
  • baba_bambule-1450486486326575126

    BabaBambule

    27 days ago

    tried using all syntax modes but doesn't help either
    1450486486179905607-image.png
  • erikbeus-1450486622704505024

    Erik Beuschau

    27 days ago

    Thanks for trying it out 👍
  • baba_bambule-1450497655183507496

    BabaBambule

    27 days ago

    FYI @Erik Beuschau this does work
    1450497654994894908-image.png
    1
  • jacobkofoed-1451533373289005158

    Jacob Kofoed

    24 days ago

    I will take a look at this 👍 Looks like something funky in our custom CSS parser.
  • paspom-1451557044212727901

    Pascal

    24 days ago

    @Jacob Kofoed What am I missing, how do I actually deploy the different themes to a rendered page?