uxscl-tkns-beta

v0.0.1

Published

3 months ago

This package keeps synced design tokens from our Design System Figma with our code. It provide exports in CSS, SASS and JS of all of the basic tokens such typography, colors, etc.

Downloads

0High
0Medium
0Low

fhalvarezr

@uxscale/tokens

This package keeps synced design tokens from our Design System Figma with our code. It provide exports in CSS, SASS and JS of all of the basic tokens such typography, colors, etc.

Getting started

Add the package by running the following command in your terminal

npm install @uxscale/tokens

Usage

Depending on the type of project, we provide three versions: CSS, SASS and Javascript.

Using theme in CSS

<!DOCTYPE html>
  <head>
    <!-- Basic example: HTML document -->
    <!-- Add the stylesheet before using UX components -->
    <link rel="stylesheet" href="/node_modules/@uxscale/tokens/themes/light.css" />
  </head>
  <body>
    <h2 style="background: var(--uxs-color-primary-950)">
      Content
    </h2>
  </body>
</html>

Using theme in SASS

// ! All paths are relative, assuming you are working with src/style.scss

// Import the design tokens first.
@import "../node_modules/@uxscale/tokens/themes/light";

// Import the scss variables
@import "../node_modules/@uxscale/tokens/scss/tokens";

// Now you can use the tokens
.full-rounded {
  border-radius: $UxsBorderRadiusFull;
}

// When the code is compiled you'll have something like this
:root,
.uxs-theme-light {
  --uxs-border-radius-full: 9999px;
}

.full-rounded {
  border-radius: var(--uxs-border-radius-full);
}

Usage in Javascript

// Import the css variables first, since they are the source of true.
import "@synergy-design-system/tokens/themes/light.css";

// Imports JS tokens
import * as tokens from "@synergy-design-system/tokens";

// Set the border radius from javascript
const rounded = document.querySelector(".rounded");
rounded.style.borderRadius = tokens.UxsBorderRadius_3;

// Debug the value
console.log(rounded.style.borderRadius); // 'var(--uxs-border-radius-3)'

VsCode integration

You may also want to install CSS Variable Autocomplete to include css variable auto completion in your project. Make sure to add a valid path to the light theme in the .vscode/settings.json:

{
  "cssVariables.lookupFiles": [
     "node_modules/@uxscale/tokens/themes/light.css"
  ],
}

Documentation

This package deliver styles using Style Dictionary along with design tokens provided by Tokens Studio

Generating tokens

Run generate:tokens command to read the tokens primitives from figma-tokens/ and generate the output file.

$/uxscale/ cd libs/tokens
$/uxscale/ npm run generate:tokens

Build library

Since this is part of a nx monorepo, you can generate a build of the library by running

npx nx run tokens:build

License

To be defined - TBD