✨ v2 - Themes

[itsezc]

Description

This issue takes into account issues raised on:

• ✨ Conditionals #52
• ✨ Support for color tokens in Style/Styles.extend #54
• 🐞 font-color:$(variable) not working with scoped variables #55
• ✨ Global tokens  #56
• ✨ Add css variables through Master CSS to get better DX #60

Introduction

Theming is a crucial part of web applications, it has been around for decades now and only expected to grow as apps become more complex, increase in scopes and the types of devices increase.

It is important that we address themes and provide flexibility for users so that they can build powerful, accessible and immersive UI and UX for it's users.

There are multiple types of themes:

• Standard - A configuration of key / values that could be replaced (as seen on Tailwind)
• Runtime - JIT focused, changed on demand on the runtime

A (fairly) new standard has emerged from the Design Tokens Community Group (DTCG) that introduces a new specification for design tokens to unify and standardize how they are consumed. This isolates design tokens from a "theme", where these work separately from each other and a theme becomes a semantic feature.

Design tokens in Master

Currently Master does provide a lot of configuration for styling, while this is starting point, it can be expanded upon greatly. I propose that we incorporate design tokens directly into Master (please refer to design token specification for further documentation / information about it).

Demonstration

design.tokens

{
  "majestic magenta": {
    "$type": "color",
    "$value": "#ff00ff",
    "$description": "The background color for buttons in their normal state."
  },
  "brand": {
    "color": {
      "$type": "color",
      "acid green": {
        "$value": "#00ff66"
      },
      "hot pink": {
        "$value": "#dd22cc"
      }
    },
    "typeface": {
      "$type": "fontFamily",
      "primary": {
        "$value": "Comic Sans MS"
      },
      "secondary": {
        "$value": "Times New Roman"
      }
    }
  },
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": "#00000088",
      "offsetX": "0.5rem",
      "offsetY": "0.5rem",
      "blur": "1.5rem",
      "spread": "0rem"
    }
  }
}

master.css.js or master.css.ts

import { transformDesignTokens } from '@master/css';
import tokens from './design.tokens';

const config = {
  tokens: transformDesignTokens(tokens),
  // Other config
};

export default config;

The transformed JSON would look similar to:

const tokens = {
  "majestic-magenta": "#ff00ff",
  brand: {
    color: {
      "acid-green": "#00ff66",
      "hot-pink": "#dd22cc",
    },
    typeface: {
      primary: "Comic Sans MS",
      secondary: "Times New Roman",
    },
  },
  // Semantic Class in Master
  "shadow-token": "0.5rem|0.5rem|1.5rem|0|#00000088",
};

Usage without Themes

<div class='bg:majestic-magenta'>Block 1</div>
<div class='bg:brand-color-acid-green'>Block 2</div>

This issue is open for comments should anyone have any concerns or ideas on how this maybe improved.

Currently, I'm working with @1aron to create a suitable API to bring “theming” into scope with the design tokens, as more thought needs to go into that.

[ansarizafar]

Check these articles from Microsoft Fast team
https://medium.com/fast-design/evolution-of-design-tokens-and-component-styling-part-1-f1491ad1120e

https://medium.com/fast-design/evolution-of-design-tokens-and-component-styling-part-2-1018e8bae62

[ansarizafar]

I think we should use Javascript Object for defining tokens. JSON looks bad. It would be great If we can also use Master CSS color palette in design tokens.

[itsezc]

An amazing v2 (beta) so far, would love it if css.theme is typed based on themes configured, or alternatively a updateTheme method can be exported.

[1aron]

@itsezc I guess you've already seen it. Master CSS v2.0 Beta Release #79 - Built-in theme switching and synchronization

[1aron]

I think it should be an external package and there may be more than one specification for design tokens.

Something like this:

/* master.css.js */
import { extend } from '@master/css'
import xDesignTokens from 'x-design-tokens'
import xDesignTokensToMasterCSSConfig from 'x-design-tokens-to-master-css-config'

module.export = extend(
    {
        classes: { },
        ...
    },
    xDesignTokensToMasterCSSConfig(xDesignTokens)
)