@times-design-system/theme-scss

@times-design-system/theme-scss

Times Design System SCSS theme package with pre-compiled palette files and utility functions for designing themed SCSS applications. Pending review

Installation

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

Usage

Import SCSS Files

// Import typography utilities
@import '@times-design-system/theme-scss/tds-typography.scss';

// Import layout utilities
@import '@times-design-system/theme-scss/tds-layout.scss';

// Import a specific theme palette
@import '@times-design-system/theme-scss/palettes/core-light.scss';
@import '@times-design-system/theme-scss/palettes/core-dark.scss';

Using Design Tokens in SCSS

// Access color variables
body {
  background-color: $dark-core-surface-canvas;
  color: $dark-core-text-primary;
}

// Use typography mixins located in tds-typography.scss
h1 {
  @include brand-heading-fluid-light-xlarge;
  margin-bottom: $spacing-200;
}

// Use spacing tokens
.component {
  padding: $spacing-100;
  margin: $spacing-050;
  border-radius: $radius-100;
}

Palette Files

All channel and brand palettes are included:

dist/palettes/
├── core-light.scss             # Core theme (light mode)
├── core-dark.scss              # Core theme (dark mode)
├── business-light.scss         # Business theme (light mode)
├── business-dark.scss          # Business theme (dark mode)
├── culture-light.scss          # Culture theme (light mode)
├── culture-dark.scss           # Culture theme (dark mode)
├── home-light.scss             # Home theme (light mode)
├── home-dark.scss              # Home theme (dark mode)
├── sport-light.scss            # Sport theme (light mode)
├── sport-dark.scss             # Sport theme (dark mode)
└── ... (14 additional theme variants)

Package Contents

dist/
├── tds-layout.scss         # Layout and grid utilities
├── tds-typography.scss     # Typography mixins and utilities
└── palettes/               # Theme-specific SCSS palette files
    ├── business-light.scss
    ├── business-dark.scss
    ├── core-light.scss
    ├── core-dark.scss
    └── ... (24 total theme variants)

Available Tokens

Color Tokens

All tokens follow a consistent naming pattern of $[MODE]-[THEME]-[TOKEN]. Colour tokens have been published in both light and dark mode files for each theme, where the client will be responsible for resolving dynamic references to tokens for the associated theme/channel.

// Semantic colors
$[MODE-THEME]-text-primary
$[MODE-THEME]-text-secondary
$[MODE-THEME]-text-tertiary
$[MODE-THEME]-surface-canvas
$[MODE-THEME]-surface-level-1
$[MODE-THEME]-border-primary

// Dark mode variants
// Use the palette files or CSS custom properties with light-dark()

Spacing Tokens

$spacing-025    // 0.25rem
$spacing-050    // 0.5rem
$spacing-100    // 1rem
$spacing-200    // 1.5rem
// ... scales up to $spacing-400

Typography

// Use typography mixins
@include brand-heading-fluid-light-large;
@include utility-body-regular-medium;
@include utility-label-small;

Dark Mode Support

The package includes dedicated dark mode palettes that can be referenced where applicable.

Compatibility

• Sass/SCSS: ≥ 1.3.0
• Node: ≥ 14.0.0
• Browsers: All modern browsers supporting CSS custom properties

Building

To rebuild the package after modifying tokens:

yarn build

This will compile SCSS files with asset distribution.

License

ISC