Skip to content

Referencing prefixed custom variables #18309

Answered by wongjn
auirarrazaval asked this question in Help

You must be logged in to vote

You can use theme() instead of var(). The theme() function will account for the prefix():

@theme inline {
    /* All defaults */

    --color-primary: theme(--color-primary-800); 
}

You'll get output like:

.tds\:text-primary {
  color: #0C1461;
}

Or you can use --theme():

@theme inline {
    /* All defaults */

    --color-primary: --theme(--color-primary-800); 
}

You'll get output like:

.tds\:text-primary {
  color: var(--tds-color-primary-800);
}

Replies: 1 comment 1 reply

You must be logged in to vote
1 reply
@auirarrazaval

Answer selected by auirarrazaval
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
2 participants