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.

Text
VariableRole
--text-primaryBody copy
--text-primary-altBody copy alt
--text-secondarySecondary text color
--text-placeholderPlaceholder text
--text-on-colorText on interactive colors   
--text-errorError message text
--text-successSuccess message text
Support
VariableRole
--support-errorError
--support-warningWarning
--support-successSuccess
--support-infoInformation                           
Link
VariableRole
--linkPrimary links
--link-hoverHover state for primary links
--link-subtleSecondary links
--link-visited              Link visited
--link-mutedLink muted
Icon
VariableRole
--icon-primaryPrimary icons
--icon-secondary    Secondary icons
--icon-disabledDisabled state for icons
--icon-on-colorIcons on interactive colors
Button
VariableRole
--button-primaryPrimary button background
--button-primary-hoverPrimary button hover
--button-primary-activePrimary button active
--button-secondarySecondary button background             
--button-secondary-hoverSecondary button hover
--button-secondary-activeSecondary button active
--button-dangerDanger button background
--button-danger-hoverDanger button hover
--button-danger-activeDanger button active
--button-disabledDisabled button
--button-disabled-altDisabled button alt
Border
VariableRole
--border-mutedMuted borders and separators
--border-default              Default borders and separators
--border-strongStrong borders and separators
Background
VariableRole
--backgroundDefault app background
--background-subtleSubtle background
--background-selectedHovered UI element background
--background-redSubtle red background
--background-yellowSubtle yellow background
--background-greenSubtle green background
--background-tealSubtle teal background
--background-lavender   Subtle lavender background
--background-pinkSubtle pink background

Misc

Sargam Icons
Sargam VS Code theme