How to use style variables in CSS/SCSS files

[HartiganHM]

Hello, Paste friends!

I've looked through the docs and tried poking around, but haven't been able to figure out a way to use Paste style variables (aka tokens) in our CSS/SCSS files. Would someone be able to share some insight with me or point me in the right direction? I've posted an example below for clarity, but let me know if you need more details.

Thank you!

@import '~@twilio-paste/core/styles';

body {
  background-colors: $color-background;
}

[TheSisb]

Hi @HartiganHM,

There are several ways to consume tokens from Paste, ordered from our most preferred to least:

---

Using the Box primitive

<Box backgroundColor="colorBackground"> ...

docs for Box primitive

Using our CSS-in-JS

import {styled, css} from '@twilio-paste/core/styling-library';

const custom = styled.div(
  css({
    backgroundColor: 'colorBackgroundPrimary',
    padding: 'spacing20',
  })
);

docs for css-in-js

Grabbing tokens from theme context

import {Theme} from '@twilio-paste/core/theme';

<Theme.Consumer>
  {({theme}) => {
    return <p>What is the default text color {theme.textColors.colorText}</p>;
  }}
</Theme.Consumer>

or

import {useTheme} from '@twilio-paste/core/theme';

const HookExampleComponent = (): React.ReactElement => {
  const theme = useTheme();
  return <p>What is the default text color {theme.textColors.colorText}</p>;
};

docs for theme context

Importing tokens into your CSS

/* SCSS */
@import '@twilio-paste/design-tokens/dist/tokens.default.scss';

or

/* Custom properties css file */
@twilio-paste/design-tokens/dist/tokens.custom-properties.css

[TheSisb]

And here's a codesandbox showing tokens used in SCSS https://codesandbox.io/s/paste-design-tokens-in-scss-us6v3?file=/index.html

[HartiganHM]

Awesome, thanks @TheSisb! The bottom most one was what I was looking to achieve 💅