Sargam colors are the language of beauty, warmth, and caress that emanates from the heart of the world. They form a palette of emancipation, making it easy to recognize beauty in small things.
Installation
01 Install from your terminal via npm.
npm i -D @sargamdesign/colors
02 Place this at the top of your SCSS/CSS file.
@import "@sargamdesign/colors";
03 Add this attribute to the HTML wrapper.
<html color-scheme="light">
CDN
To get started quickly, you can also use the CDN file. (Note: For prototyping. Not recommended for production.)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/[email protected]/dist/index.css" />
Usage
Sargam Colors provides light and dark themes bundled as raw CSS files. Here's an example of how to use:
.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); }
Tokens
Tokens represent an 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 |