bela-design-system

A repository for the files that describe the Bela design system for all front end technologies

How to use this design system

This will be exported as an npm package, so these files should only be edited by someone resolving the Figma and Style Dictionary versions.

Why everything is prepended by --ds

ds is short for "design system". All the variables are prepended with this, in order to disambiguate between variables created by this system, and other downstream variables that may apply.

This system is designed to be in sync with the documentation in Figma

One of the big problems right now, though Figma is great for prototyping, it isn't at all good at exporting actual code.

Click here for the Figma documentation of this system. Everything there is reflected in this system, so these components are straightforward to implement.

Omg why are there so many variables??

Don't worry, you don't have to use them all. In fact, a front-end developer will mostly be using the top-level component variables (those in /tier-3-components/).

The reason all the others exist is levels of abstraction - defining the variables, assigning them roles, and then collecting them into components. This is not redundancy - this is how this system remains ready to be applied to other systems and contexts that may not yet exist, and changes or updates can propagate through this system seamlessly and with little friction.

If you find errors/things look wrong or weird

Please open an issue in this repo, with the name of the component that needs to be fixed/defined/investigated.

WARNING!!!! Mever ever add or remove anything from these files without also resolving the same in Figma. This design system only works if it's perfectly in sync with Figma, and there is currently no automated way to do that. Bringing these files out of sync with Figma renders this system useless.

If this ever needs to be installed locally

In order to start Style Dictionary locally, do the following:

1. In the root directory, start npm: $ npm init
2. Install Style Dictionary as a dev dependency, meaning it won't ship with the final product: $ npm install -D style-dictionary
3. Install Sass as a regular dependency: $ npm install sass
4. Install Storybook as a dev dependency: $ npm install -D storybook
5. Install Style Dictionary globally so we can use it in the command line: $ npm install -g style-dictionary
6. Delete the build file (we're going to build it again)
7. Run $ style-dictionary build to build the system. Now build contains _variables.css with all the values defined in the json files.