Detect design system from CSS/SCSS files

[cruxcode]

It's an annoying user experience where I have to provide the entire set of font related CSS properties (set of font-family, font-size, font-weight) to different components on the page. A better approach would have been if we can import the design system from the CSS/SCSS files sitting in our project.

Derive design tokens from CSS/SCSS files

Detect basic tokens

Suppose the pages/index.tsx imports a SCSS file like import "./index.scss";. All the CSS variables in :root as shown below will be processed as either color and dimension etc.

:root {
  --gray-500: #c4c4c4;
  --p-4: 4px;
}

Detect composite tokens

Extract all mixins for composite tokens.

// extract as composite token
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

// extract as composite token
@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

Detect font-import

import ("https://fonts.google.com....");

Detect url

#id {
  background-image: url(a.png);
};

Special composite tokens

Typography tokens - A mixin that contains only typography related CSS properties.
Layout tokens - A mixin that contains flex related CSS properties.
Spacing tokens - A mixin that contains padding/margin related CSS properties.

@mixin small-text {
  font-size: 10px;
  font-weight: light;
}

Walk the CSS dependency tree

A CSS/SCSS file can import other CSS file. We need to collect all the token from these files. Ignore node_modules unless included specifically in the atriConfig.

Tokens first styles panel

Currently the styles panel allows user to assign CSS values manually. The styles panel need to be re-designed in such a way that the most accessible values are tokens. For example, the Typography section should have a dropdown on top that allows user to select from one of the Special composite tokens for Typography. Rest of the options can be hidden in more.

For CSS properties that take color as value should get color tokens in dropdown when the user clicks on the color input box. Similarly, for any CSS properties that size (px, em, rem) as value should get all space tokens.