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.

Text Tokens
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 Tokens
VariableRole
--support-errorError
--support-warningWarning
--support-successSuccess
--support-infoInformation
Link Tokens
VariableRole
--linkPrimary links
--link-hoverHover state for primary links
--link-subtleSecondary links
--link-visitedLink visited
--link-mutedLink muted
Icon Tokens
VariableRole
--icon-primaryPrimary icons
--icon-secondarySecondary icons
--icon-disabledDisabled state for icons
--icon-on-colorIcons on interactive colors
Button Tokens
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 Tokens
VariableRole
--border-mutedMuted borders and separators
--border-defaultDefault borders and separators
--border-strongStrong borders and separators
Background Tokens
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-lavenderSubtle lavender background
--background-pinkSubtle 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.