tokens.css

This CSS file contains tokens, as CSS custom properties, corresponding to both “unthemed” tokens and tokens corresponding to the light theme. See tokens.dark.css for the tokens corresponding to the dark theme.

Example

In a Next.js application, you can directly import this CSS file into your app wrapper (pages/_app.js):

import '@lsst-sqre/rubin-style-dictionary/dist/tokens.css';
import '@lsst-sqre/rubin-style-dictionary/dist/tokens.dark.css';

Source

:root {
  --rsd-asset-image-favicon-svg: "assets/favicon/rubin-favicon.svg";
  --rsd-asset-image-favicon-png-32-px: "assets/favicon/rubin-favicon-transparent-32px.png";
  --rsd-asset-image-favicon-png-49-px: "assets/favicon/rubin-favicon-transparent-49px.png";
  --rsd-asset-image-construction-agencies-png: "assets/partner-logos/construction-agencies.png"; /* Construction funding agency logo lineup (black on transparent). */
  --rsd-asset-image-operations-agencies-png: "assets/partner-logos/operations-lineup-black.png"; /* Operations funding agency logo lineup (black on transparent). */
  --rsd-asset-image-rubin-imagotype-color-on-black-png: "assets/rubin-imagotype/rubin-imagotype-color-on-black.png";
  --rsd-asset-image-rubin-imagotype-color-on-black-svg: "assets/rubin-imagotype/rubin-imagotype-color-on-black.svg";
  --rsd-asset-image-rubin-imagotype-color-on-white-png: "assets/rubin-imagotype/rubin-imagotype-color-on-white.png";
  --rsd-asset-image-rubin-imagotype-color-on-white-svg: "assets/rubin-imagotype/rubin-imagotype-color-on-white.svg";
  --rsd-asset-image-rubin-imagotype-gray-on-black-png: "assets/rubin-imagotype/rubin-imagotype-gray-on-black.png";
  --rsd-asset-image-rubin-imagotype-gray-on-black-svg: "assets/rubin-imagotype/rubin-imagotype-gray-on-black.svg";
  --rsd-asset-image-rubin-imagotype-gray-on-white-png: "assets/rubin-imagotype/rubin-imagotype-gray-on-white.png";
  --rsd-asset-image-rubin-imagotype-gray-on-white-svg: "assets/rubin-imagotype/rubin-imagotype-gray-on-white.svg";
  --rsd-asset-image-rubin-imagotype-color-on-black-crop-png: "assets/rubin-imagotype/rubin-imagotype-color-on-black-crop.png";
  --rsd-asset-image-rubin-imagotype-color-on-black-crop-svg: "assets/rubin-imagotype/rubin-imagotype-color-on-black-crop.svg";
  --rsd-asset-image-rubin-imagotype-color-on-white-crop-png: "assets/rubin-imagotype/rubin-imagotype-color-on-white-crop.png";
  --rsd-asset-image-rubin-imagotype-color-on-white-crop-svg: "assets/rubin-imagotype/rubin-imagotype-color-on-white-crop.svg";
  --rsd-asset-image-rubin-imagotype-gray-on-black-crop-png: "assets/rubin-imagotype/rubin-imagotype-gray-on-black-crop.png";
  --rsd-asset-image-rubin-imagotype-gray-on-black-crop-svg: "assets/rubin-imagotype/rubin-imagotype-gray-on-black-crop.svg";
  --rsd-asset-image-rubin-imagotype-gray-on-white-crop-png: "assets/rubin-imagotype/rubin-imagotype-gray-on-white-crop.png";
  --rsd-asset-image-rubin-imagotype-gray-on-white-crop-svg: "assets/rubin-imagotype/rubin-imagotype-gray-on-white-crop.svg";
  --rsd-asset-image-rubin-imagotype-email-png: "assets/rubin-imagotype/rubin-imagotype-email.png";
  --rsd-asset-image-rubin-watermark-watermark-png: "assets/rubin-watermarks/rubin-watermark.png";
  --rsd-asset-image-rubin-watermark-letterhead-watermark-png: "assets/rubin-watermarks/rubin-letterhead-watermark.png";
  --rsd-asset-image-rubin-watermark-letterhead-watermark-2-png: "assets/rubin-watermarks/rubin-letterhead-watermark-2.png";
  --rsd-color-blue-500: #1c81a4;
  --rsd-color-gray-100: #dce0e3;
  --rsd-color-gray-500: #6a6e6e;
  --rsd-color-gray-800: #1f2121;
  --rsd-color-gray-900: #000000; /* Pure black. */
  --rsd-color-gray-000: #ffffff; /* Pure white. */
  --rsd-color-green-500: #3cae3f;
  --rsd-color-imagotype-light: #00babc; /* Light teal in imagotype (graphic element). */
  --rsd-color-imagotype-dark: #058b8c; /* Dark teal in imagotype (for Observatory wordmark). */
  --rsd-color-imagotype-black: #313333; /* Dark gray in imagotype. */
  --rsd-color-imagotype-white: #f5f5f5; /* Imagotype white for dark backgrounds. */
  --rsd-color-orange-500: #ed4c4c;
  --rsd-color-primary-100: #f5f5f5;
  --rsd-color-primary-200: #d9f7f6;
  --rsd-color-primary-300: #b1f2ef;
  --rsd-color-primary-400: #00babc;
  --rsd-color-primary-500: #009fa1;
  --rsd-color-primary-600: #058b8c;
  --rsd-color-primary-700: #0c4a47;
  --rsd-color-primary-800: #313333;
  --rsd-color-purple-500: #583671;
  --rsd-color-red-500: #ed4c4c;
  --rsd-color-yellow-500: #ffe266;
  --rsd-component-footer-background-color: #f5f5f5;
  --rsd-component-header-background-color: #1f2121; /* Header background color. */
  --rsd-component-header-nav-text-color: #ffffff;
  --rsd-component-header-nav-text-hover-color: #00babc;
  --rsd-component-header-nav-menulist-text-color: #1f2121;
  --rsd-component-header-nav-menulist-background-color: #ffffff;
  --rsd-component-header-nav-menulist-selected-background-color: #058b8c;
  --rsd-component-page-background-color: #ffffff; /* Page background color */
  --rsd-component-service-card-background-color: #ffffff;
  --rsd-component-service-card-text-color: #1f2121;
  --rsd-component-text-color: #1f2121; /* Body text color */
  --rsd-component-text-reverse-color: #dce0e3; /* Body text color in reversed (light on dark) contexts. */
  --rsd-component-text-link-color: #146685;
  --rsd-component-text-link-hover-color: #1c81a4;
  --rsd-component-text-link-reverse-color: #1c81a4; /* Link color in reversed (light on dark) contexts. */
  --rsd-component-text-headline-color: #058b8c;
}