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 |