is there a way to assign a different cssVariable to a cssVariable based on the class it is nested in? [duplicate]

Question

we are using a design system that has 'tokens' and 'primitives'.

the idea is that we can connect different baseColors to a different UI-elements depending on the brand.

    <h1>Hi this is header</h1>
    
    <div class="branded">
      <h1>Hi this is header</h1>
    </div>

:root{
  --primary:          red;
  --headercolor: var(--primary);
}

.branded{
  --primary: blue;
}

h1{
  color: var(--headercolor);
}

I tried creating a demo project and adding and replacing variables.

I expected the nested variable to change the token variable, but this is not the case, and it uses the one set in :root

edit we cant do the following as we can only set 1 class on the body, and there are too many elements to handpick like this.

:root {
  --primary: red;
}

h1 {
  color: var(--primary);
}

.branded h1{
  --primary: blue;
}

Does this help? stackoverflow.com/questions/52015737/…

ralph.m
– ralph.m

2024-06-06 02:25:39 +00:00
Commented Jun 6, 2024 at 2:25 — ralph.m
– ralph.m, Commented Jun 6, 2024 at 2:25

Iaroslav Sobolev · Accepted Answer · 2024-06-06 02:37:55Z

1

You almost got it right. To make it work you just need to redefine the variables within the .branded class and their dependant variables. All elements within that class will automatically inherit the correct colors based on the scoped variables.

<html>
<head>
  <style>
    :root {
      --primary: red;
      --headercolor: var(--primary);
    }
    .branded {
      --primary: blue;
      --headercolor: var(--primary);
    }
    h1 {
      color: var(--headercolor);
    }
  </style>
</head>
<body>
  <h1>header</h1>    
  <div class="branded">
    <h1>branded header</h1>
  </div>
</body>
</html>

edited Jun 6, 2024 at 2:37

answered Jun 6, 2024 at 2:30

Iaroslav Sobolev

1,5872 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Teunissen Over a year ago

thanks for the quick reply, ill have a think about this. as I don't really want to have to declare every token again, as that will be huge, but if that is the only way :D will probably have to make some smart SCSS loop

Iaroslav Sobolev Over a year ago

well, you don;t have to redefine EVERY token, only the ones that being affected by the changes made in base-tokens. but i guess redefining all is just safier

Jason Teunissen Over a year ago

Amixin tokens{ --cl-backgroundcolor-topnav : var(--cl-secondary-500); ... } .branded{ Ainclude tokens; } works like charm srry @ is not allowing to make a comment

Iaroslav Sobolev Over a year ago

cool! this will do

Hao Wu · Accepted Answer · 2024-06-06 02:41:04Z

1

One approach is to define the tokens that uses primitives in * selector but not :root, so it can get the latest override for every tag.

:root {
  --primary: red;
}

* {
  --headercolor: var(--primary);
}

.branded {
  --primary: blue;
}

h1 {
  color: var(--headercolor);
}

<h1>header</h1>
<div class="branded">
  <h1>branded header</h1>
</div>

answered Jun 6, 2024 at 2:41

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

2 Comments

Jason Teunissen Over a year ago

that is a very interesting workaround!!!! looks very viable aswell

Hao Wu Over a year ago

I wouldn't recommend to do so since it redefines all tokens for all tags, it could have negative impact on performance if there are a lot of tokens.

Collectives™ on Stack Overflow

is there a way to assign a different cssVariable to a cssVariable based on the class it is nested in? [duplicate]

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related