@times-design-system/theme-css

@times-design-system/theme-css

Times Design System CSS theme package with 2,748+ pre-compiled CSS custom properties (variables) for building themed applications.

Installation

yarn add @times-design-system/theme-css

Usage

Link CSS File

<!-- Via CDN or npm node_modules -->
<link
  rel="stylesheet"
  href="node_modules/@times-design-system/theme-css/variables.css"
/>

<!-- Via CDN with cachable version reference -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@times-design-system/theme-css@[VERSION_NUMBER]/dist/variables.css"
/>

Use CSS Variables in Your Stylesheet

/* Color tokens - prescoped within media queries for both mode (light/dark) and theme (e.g. [data-theme="sport"])*/
body {
  background-color: var(surface-canvas);
  color: var(text-primary);
}

/* Spacing tokens */
.component {
  padding: var(spacing-100);
  margin: var(spacing-050);
  gap: var(spacing-200);
}

/* Shadows/Elevation */
.elevated {
  box-shadow: var(elevation-100);
}

Use Typographic classes in markup

/* Typography */
/* Typographic styling should be adopted through typographic classes */
<h1 className="brand-heading-fluid-bold-xlarge">Styled Heading</h1>

<Text typographyStyle="brand-heading-fluid-bold-xlarge">Styled Text Component</Text>

Alternative Import in JavaScript

// If bundling CSS
import '@times-design-system/theme-css/variables.css';

// Then use in JS
const element = document.querySelector('.component');
const spacing = getComputedStyle(element).getPropertyValue('spacing-100');

Package Contents

dist/
└── variables.css         # 2,748+ CSS custom properties

Available Token Categories

Color Tokens

All semantic and brand colors:

/* Semantic colors */
text-primary
text-secondary
text-tertiary
surface-canvas
surface-level-1
surface-level-2
border-primary
border-secondary

/* Brand/Channel colors (e.g.) */
brand-home-500
brand-business-500
channel-sport-500
channel-money-500

Spacing Tokens

spacing-025    /* 0.25rem */
spacing-050    /* 0.5rem */
spacing-100    /* 1rem */
spacing-200    /* 1.5rem */
spacing-300    /* 2rem */
spacing-400    /* 2.5rem */

Typography Tokens

font-size-025  /* 0.75rem */
font-size-050  /* 1rem */
font-size-100  /* 2.25rem */
font-family-sans
font-family-serif
font-weight-regular  /* 400 */
font-weight-bold     /* 700 */
line-height-tight
line-height-normal
letter-spacing-tight

Other Tokens

radius-100      /* Border radius */
radius-200
elevation-100   /* Box shadows */
elevation-200
transition-normal
transition-smooth

Browser Support

• Modern browsers: Full support with scoped CSS
• All other modern browsers (Chrome, Firefox, Safari, Edge): CSS custom properties supported
• Fallback: Provide fallback values for older browsers

.component {
  /* Fallback for older browsers */
  padding: 1rem;
  /* Override if CSS variables supported */
  padding: var(spacing-100, 1rem);
}

File Size

• variables.css: ~314KB (uncompressed)
• variables.css (gzipped): ~20KB
• CSS custom properties: 2,748+

Compatibility

• Node: ≥ 14.0.0
• Browsers: All modern browsers (IE not supported, use fallbacks)
• CSS: CSS Custom Properties Level 1

Building

To rebuild the package after modifying tokens:

yarn build

License

ISC