Sargam colors are the language of the beauty, the warmth, and the caress, that comes from the heart of the world. The most direct expression of beauty. A color system of emancipation which makes it easy to recognize the beauty in small things.
Installation
Install Sargam Colors from your terminal via npm. Current version is 2.0.0
npm i @sargamdesign/colors
Import vanilla CSS.
import "@sargamdesign/colors/dist/themes/light.css";
import "@sargamdesign/colors/dist/themes/dark.css";
To get started quickly, you can also use the CDN files.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/[email protected]/dist/themes/light.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/[email protected]/dist/themes/dark.min.css" />
Usage Example
Sargam colors provide the light and dark themes bundled as raw CSS files. Below you can find usage example:
.button { background-color: var(--button-primary);
color: var(--text-on-color); }
.button:hover { background-color: var(--button-primary-hover); }
.button:active { background-color: var(--button-primary-active); }
Understanding Project Structure
Below is the file structure of a Sargam colors project:
.
├── tokens/
│ ├── global/
│ │ └── global.json
│ └── themes/
│ ├── dark/
│ │ └── dark.json
│ └── light/
│ └── light.json
└── dist/
└── themes/
├── light.css
└── dark.css
Folder tokens/ is a single source of truth (SSOT), stored in the GitHub repo, and synced with Figma colors styles. Sargam colors use the tech-agnostic JSON format for the SSOT. To generate various web or app-specific requirements Style Dictionary(Dev dependency) will be used.
To modify colors values or to add new sequential scales go to tokens/global/. To modify current theme or to add a new theme go to tokens/themes/. To modify generated CSS variables use SASS functions and mixins.
Building Themes
To build themes from tokens:
npm run build:tokens -- --theme=light
npm run build:tokens -- --theme=dark
Decision Variables
Sargam decision tokens represent a specific context or abstraction in which a referenced value is used.
| Variable | Role |
|---|---|
| --text-primary | Body copy |
| --text-primary-alt | Body copy alt |
| --text-secondary | Secondary text color |
| --text-placeholder | Placeholder text |
| --text-on-color | Text on interactive colors |
| --text-error | Error message text |
| --text-success | Success message text |
| Variable | Role |
|---|---|
| --support-error | Error |
| --support-warning | Warning |
| --support-success | Success |
| --support-info | Information |
| Variable | Role |
|---|---|
| --link | Primary links |
| --link-hover | Hover state for primary links |
| --link-subtle | Secondary links |
| --link-visited | Link visited |
| --link-muted | Link muted |
| Variable | Role |
|---|---|
| --icon-primary | Primary icons |
| --icon-secondary | Secondary icons |
| --icon-disabled | Disabled state for icons |
| --icon-on-color | Icons on interactive colors |
| Variable | Role |
|---|---|
| --button-primary | Primary button background |
| --button-primary-hover | Primary button hover |
| --button-primary-active | Primary button active |
| --button-secondary | Secondary button background |
| --button-secondary-hover | Secondary button hover |
| --button-secondary-active | Secondary button active |
| --button-danger | Danger button background |
| --button-danger-hover | Danger button hover |
| --button-danger-active | Danger button active |
| --button-disabled | Disabled button |
| --button-disabled-alt | Disabled button alt |
| Variable | Role |
|---|---|
| --border-muted | Muted borders and separators |
| --border-default | Default borders and separators |
| --border-strong | Strong borders and separators |
| Variable | Role |
|---|---|
| --background | Default app background |
| --background-subtle | Subtle background |
| --background-selected | Hovered UI element background |
| --background-red | Subtle red background |
| --background-yellow | Subtle yellow background |
| --background-green | Subtle green background |
| --background-teal | Subtle teal background |
| --background-lavender | Subtle lavender background |
| --background-pink | Subtle pink background |
Built Using Sargam Colors
Sargam Icons — A Collection of 262+ Open-source Icons
Your Vedas — Sacred Books of the East