Question 391322 in CSS Question posted in
Some basic documentation can be found here.

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

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;
}

the solution is to add all the tokens into a mixin, and each time you declare the brand, just include the mixin.

@mixin tokens{
    //Token topnav
    --cl-backgroundcolor-topnav                  : var(--cl-secondary-500);
    ...

.branded{
    @include tokens;
}
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search