Rubin Style Dictionary

Important

Rubin Style Dictionary has moved to Squareone!. You can find the code at https://github.com/lsst-sqre/squareone/tree/main/packages/rubin-style-dictionary and the docs at https://squareone.lsst.io/packages/rubin-style-dictionary/index.html.

The Rubin Style Dictionary provides design tokens that can be used in Rubin Observatory design projects. Built around style-dictionary, these design tokens are available in a variety of formats that are ready to use in projects, such as CSS variables, JSON, and so on.

The design tokens are based on the Visual Identity Manual, with additional derived design tokens for specific components.

Rubin Style Dictionary is developed on GitHub at https://github.com/lsst-sqre/rubin-style-dictionary.

User guide

Learn how to use the Rubin Style Dictionary in projects.

• Using the node package
  • Local authentication and installation
  • Using the token files
  • Installing on GitHub Actions
• Change log
  • 2023-08-07
  • 0.4.0 (2022-12-01)
  • 0.3.0 (2021-05-06)
  • 0.2.1 (2021-02-17)
  • 0.1.0 (2021-01-27)

Token distributions

References for the available token distributions that can be used in CSS and JavaScript projects.

• tokens.css
  • Example
  • Source
• tokens.dark.css
  • Example
  • Source
• tokens.js
  • Example
  • Source

Contributing tokens

Information for contributing tokens and background on this project’s infrastructure.

• Overview of token organization
  • YAML files and token organization
  • Global design tokens
    • Global color tokens
  • Component design tokens
  • Themed component design tokens
• Build system overview
  • Build script

Project information

• Change log
  • 2023-08-07
  • 0.4.0 (2022-12-01)
  • 0.3.0 (2021-05-06)
  • 0.2.1 (2021-02-17)
  • 0.1.0 (2021-01-27)