@mstyle/theme

v0.0.22

Published

3 months ago

theme

0High
0Medium
0Low

fedorovskyi

Theme System

Overview

A global theme generator that lets you define tokens in an object format. It outputs a global CSS file with variables and a JavaScript mapping file for seamless use in zero-runtime styling libraries.

Features

Supports any number of themes.
Creates CSS selectors with both shared and theme-specific variables.
Generates JS objects for easy use of variables in JavaScript or TypeScript.
Allows you to configure CSS prefixes and hash variable names for flexibility and conflict prevention.

Installation

npm install @organization/global-theme

Usage

import '@organization/global-theme/theme.css';

<!-- Light theme -->
<body data-theme="light">
  ...Here, the common tokens plus the light theme tokens will be applied.
</body>

<!-- Dark theme -->
<body data-theme="dark">
  ...Here, the common tokens plus the dark theme tokens will be applied.
</body>

Usage: CSS or CSS modules.

.card {
    background-color: var(--colors-neutral100);
}

Usage: JavaScript / TypeScript with zero-runtime styled libraries.

import { styled } from '@linaria/react';
import { tokens } from '@organization/global-theme';

export const Card = styled.div`
  border: 1px solid ${tokens.colors.primary100}; // A readable link to var(--colors-neutral100)
  border-radius: ${tokens.borderRadius.L};
`;

Developing

Project Structure

src
├── dark-theme
│   ├── box-shadow.ts          # Box shadow tokens specific to the dark theme
│   ├── dark-theme.ts          # Main configuration for the dark theme
│   └── index.ts               # Barrel file exporting all dark theme tokens
├── light-theme
│   ├── box-shadow.ts          # Box shadow tokens specific to the light theme
│   ├── light-theme.ts         # Main configuration for the light theme
│   └── index.ts               # Barrel file exporting all light theme tokens
├── shared
│   ├── border-radius.ts       # Shared border radius tokens for all themes
│   ├── shared-theme.ts        # Shared tokens (e.g., spacing, typography) used across all themes
│   └── index.ts               # Barrel file exporting shared theme tokens
├── utils
│   ├── hex-to-rgba.ts         # Utility to convert HEX color to RGBA
│   └── linear-gradient.ts     # Utility to generate linear gradient strings
└── palette.ts                 # Global color palette used across themes

Adding a New Theme

Create a new theme in the src/ folder:


export const customTheme = {
  name: 'custom', // Unique name for the theme
  colors: {
    ...
  },
};

Add the theme to the themes array in generate-css.ts:

import { customTheme } from './src/custom-theme';

const themes = [
  lightTheme,
  darkTheme,
  customTheme, // Add here
];

Build

# Build package
npm run build