tokens.js

tokens.js is an ES6 module where tokens are published as importable variables (with camel-cased names).

Note

Themed tokens are included in the module with a ThemedLight or ThemedDark suffix, unlike tokens.css and tokens.dark.css.

Example

import { ComponentTextColorThemedDark } from '@lsst-sqre/rubin-style-dictionary';

Source

export const ColorBlue500 = "#1c81a4";
export const ColorGray100 = "#dce0e3";
export const ColorGray500 = "#6a6e6e";
export const ColorGray800 = "#1f2121";
export const ColorGray900 = "#000000"; // Pure black.
export const ColorGray000 = "#ffffff"; // Pure white.
export const ColorGreen500 = "#583671";
export const ColorImagotypeLight = "#00babc"; // Light teal in imagotype (graphic element).
export const ColorImagotypeDark = "#058b8c"; // Dark teal in imagotype (for Observatory wordmark).
export const ColorImagotypeBlack = "#313333"; // Dark gray in imagotype.
export const ColorImagotypeWhite = "#f5f5f5"; // Imagotype white for dark backgrounds.
export const ColorOrange500 = "#ed4c4c";
export const ColorPrimary100 = "#f5f5f5";
export const ColorPrimary200 = "#d9f7f6";
export const ColorPrimary300 = "#b1f2ef";
export const ColorPrimary400 = "#00babc";
export const ColorPrimary500 = "#009fa1";
export const ColorPrimary600 = "#058b8c";
export const ColorPrimary700 = "#0c4a47";
export const ColorPrimary800 = "#313333";
export const ColorPurple500 = "#583671";
export const ColorRed500 = "#ed4c4c";
export const ColorYellow500 = "#ffe266";
export const ComponentTextColorThemedLight = "#1f2121"; // Body text color
export const ComponentTextColorThemedDark = "#dce0e3"; // Body text color in dark theme