Welcome to the home of the Synergy Design System. Synergy is the foundation to efficiently build a consistent digital landscape for SICK.
This project is mainly intended for usage in SICK applications to ensure a unique look and feel across applications, however you may also use it for your own projects for free as well.
The documentation is always up-to-date and can be found on https://synergy-design-system.github.io/ .
The code resides on GitHub: https://github.com/synergy-design-system/synergy-design-system .
This repository is comprised of several sub-packages.
| package | description |
|---|---|
| tokens | design tokens which contain basic design variables for colors, spacings, sizes, fonts etc. They are always in sync with the Figma library, and the base for CSS styles |
| assets | icons and logos |
| components | user interface components based on custom elements and lit |
| docs | storybook documentation showing all components and their properties in an interative environment |
| angular | angular wrappers for better DX in Angular (auto generated) |
| react | react wrappers for better DX in React (auto generated) |
| vue | vue wrappers for better DX in VueJS (auto generated) |
Synergy uses a monorepo setup, using node.js as a runtime and pnpm for dependency management and build scripts. We also use corepack to handle the current required versions of node and pnpm. If not already installed, install and configure these tools.
pnpm install --recursiveinstalls all dependencies.pnpm buildin the root directory forces a build all packages that provide a build job.pnpm lintin the root directory will run all configured lint jobs.