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 AssetImageFaviconSvg = "assets/favicon/rubin-favicon.svg";
export const AssetImageFaviconPng32px = "assets/favicon/rubin-favicon-transparent-32px.png";
export const AssetImageFaviconPng49px = "assets/favicon/rubin-favicon-transparent-49px.png";
export const AssetImageConstructionAgenciesPng = "assets/partner-logos/construction-agencies.png"; // Construction funding agency logo lineup (black on transparent).
export const AssetImageOperationsAgenciesPng = "assets/partner-logos/operations-lineup-black.png"; // Operations funding agency logo lineup (black on transparent).
export const AssetImageRubinImagotypeColorOnBlackPng = "assets/rubin-imagotype/rubin-imagotype-color-on-black.png";
export const AssetImageRubinImagotypeColorOnBlackSvg = "assets/rubin-imagotype/rubin-imagotype-color-on-black.svg";
export const AssetImageRubinImagotypeColorOnWhitePng = "assets/rubin-imagotype/rubin-imagotype-color-on-white.png";
export const AssetImageRubinImagotypeColorOnWhiteSvg = "assets/rubin-imagotype/rubin-imagotype-color-on-white.svg";
export const AssetImageRubinImagotypeGrayOnBlackPng = "assets/rubin-imagotype/rubin-imagotype-gray-on-black.png";
export const AssetImageRubinImagotypeGrayOnBlackSvg = "assets/rubin-imagotype/rubin-imagotype-gray-on-black.svg";
export const AssetImageRubinImagotypeGrayOnWhitePng = "assets/rubin-imagotype/rubin-imagotype-gray-on-white.png";
export const AssetImageRubinImagotypeGrayOnWhiteSvg = "assets/rubin-imagotype/rubin-imagotype-gray-on-white.svg";
export const AssetImageRubinImagotypeColorOnBlackCropPng = "assets/rubin-imagotype/rubin-imagotype-color-on-black-crop.png";
export const AssetImageRubinImagotypeColorOnBlackCropSvg = "assets/rubin-imagotype/rubin-imagotype-color-on-black-crop.svg";
export const AssetImageRubinImagotypeColorOnWhiteCropPng = "assets/rubin-imagotype/rubin-imagotype-color-on-white-crop.png";
export const AssetImageRubinImagotypeColorOnWhiteCropSvg = "assets/rubin-imagotype/rubin-imagotype-color-on-white-crop.svg";
export const AssetImageRubinImagotypeGrayOnBlackCropPng = "assets/rubin-imagotype/rubin-imagotype-gray-on-black-crop.png";
export const AssetImageRubinImagotypeGrayOnBlackCropSvg = "assets/rubin-imagotype/rubin-imagotype-gray-on-black-crop.svg";
export const AssetImageRubinImagotypeGrayOnWhiteCropPng = "assets/rubin-imagotype/rubin-imagotype-gray-on-white-crop.png";
export const AssetImageRubinImagotypeGrayOnWhiteCropSvg = "assets/rubin-imagotype/rubin-imagotype-gray-on-white-crop.svg";
export const AssetImageRubinImagotypeEmailPng = "assets/rubin-imagotype/rubin-imagotype-email.png";
export const AssetImageRubinWatermarkWatermarkPng = "assets/rubin-watermarks/rubin-watermark.png";
export const AssetImageRubinWatermarkLetterheadWatermarkPng = "assets/rubin-watermarks/rubin-letterhead-watermark.png";
export const AssetImageRubinWatermarkLetterheadWatermark2Png = "assets/rubin-watermarks/rubin-letterhead-watermark-2.png";
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 = "#3cae3f";
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 ComponentFooterBackgroundColorThemedLight = "#f5f5f5";
export const ComponentFooterBackgroundColorThemedDark = "#0c4a47";
export const ComponentHeaderBackgroundColor = "#1f2121"; // Header background color.
export const ComponentHeaderNavTextColor = "#ffffff";
export const ComponentHeaderNavTextHoverColor = "#00babc";
export const ComponentHeaderNavMenulistTextColorThemedLight = "#1f2121";
export const ComponentHeaderNavMenulistTextColorThemedDark = "#ffffff";
export const ComponentHeaderNavMenulistBackgroundColorThemedLight = "#ffffff";
export const ComponentHeaderNavMenulistBackgroundColorThemedDark = "#058b8c";
export const ComponentHeaderNavMenulistSelectedBackgroundColorThemedLight = "#058b8c";
export const ComponentHeaderNavMenulistSelectedBackgroundColorThemedDark = "#0c4a47";
export const ComponentPageBackgroundColorThemedLight = "#ffffff"; // Page background color
export const ComponentPageBackgroundColorThemedDark = "#1f2121"; // Page background color in dark theme
export const ComponentServiceCardBackgroundColorThemedLight = "#ffffff";
export const ComponentServiceCardBackgroundColorThemedDark = "#1f2121";
export const ComponentServiceCardTextColorThemedLight = "#1f2121";
export const ComponentServiceCardTextColorThemedDark = "#dce0e3";
export const ComponentTextColorThemedLight = "#1f2121"; // Body text color
export const ComponentTextColorThemedDark = "#dce0e3"; // Body text color in dark theme
export const ComponentTextReverseColor = "#dce0e3"; // Body text color in reversed (light on dark) contexts.
export const ComponentTextLinkColorThemedLight = "#146685";
export const ComponentTextLinkColorThemedDark = "#1c81a4";
export const ComponentTextLinkHoverColorThemedLight = "#1c81a4";
export const ComponentTextLinkHoverColorThemedDark = "#146685";
export const ComponentTextLinkReverseColor = "#1c81a4"; // Link color in reversed (light on dark) contexts.
export const ComponentTextHeadlineColorThemedLight = "#058b8c";
export const ComponentTextHeadlineColorThemedDark = "#058b8c";