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.1.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 provides light and dark themes bundled as raw CSS files. Here's an example of how to use them:
.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
tokens/ serves as the single source of truth (SSOT), residing within the GitHub repository and synchronized with Figma's color styles or variables. (To maintain a tech-agnostic approach, Sargam Colors employs the JSON format for the SSOT.) For generating various web or app-specific requirements, Style Dictionary will be utilized.
To modify colors values or to add new sequential scales, go to tokens/global/. If you want to modify the current theme or create a new one, head to the tokens/themes/. For modifying generated CSS variables, leverage SASS functions and mixins.
Building Themes
To build themes from tokens:
npm i
npm run build
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 275+ open-source icons.
Your Vedas — Sacred books of the east.
Andlo — The payroll platform for modern businesses.