Sargam colors are the language of the beauty, the warmth, and the caress, that comes from the heart of the world. 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.2

      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, residing within the repository and synchronized with Figma's variables. For generating various web or app-specific requirements, Style Dictionary is 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:

      git clone https://github.com/SargamDesign/sargam-colors.git
      cd sargam-colors
      npm i
      npm run build
            

Color 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

Built Using Sargam Colors

Sargam Icons — A collection of 280+ open-source icons.
Your Vedas — Sacred books of the east.
Andlo — Payroll platform for modern businesses.
VS Code theme — Cracklin' fire. Comfy AF.