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-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: #583671;
  --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-text-color: #1f2121; /* Body text color */
}