@muraldevkit/ds-theme-classic v1.2.5

Mural's Classic Theme Package Overview

This package contains Mural's Classic Theme tokens scoped to a CSS class for flexible control within an application. The Classic theme aligns to the current look of the product, prior to the migration to the Mural redesign. Note, there may be some slight differences between Classic and the product as we work towards improving accessibility and consistency within the product.

Table of Contents

1. Installation
2. Package architecture
3. Common commands
4. Usage

Installation

Review the design system's global usage guidelines to learn how to install components. This package's name is @muraldevkit/ds-theme-classic.

Package architecture

The Classic theme follows the same architecture as our foundation package's tokens and variables (see @muraldevkit/ds-foundation package).

Each component has a separate .scss file under the ./src/styles/components directory.

Common commands

• npm run build:tokens - compile tokens
• npm run build:styles - transpiles Sass files to CSS

Usage

You can import the CSS files into your project from the package directory:

import '@muraldevkit/ds-theme-classic/dist/theme-classic.css';

Or alternatively via SCSS:

@use '~@muraldevkit/ds-theme-classic/dist/theme-classic';

Once you import the file, you'll need to add the .mrl-theme-classic class to the HTML element you want to style with the theme. If you want to apply the theme to your entire application we recommend adding the class to the html tag.