@sargamdesign/colors

2.1.1 • Public • Published

Sargam Colors

A simple scalable color system for designing warm welcoming, caring websites and apps.

[sargamcolors.com]

Installation

Install Sargam Colors from your terminal via npm. Current version is 2.1.1

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 use the CDN files.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/colors@2.1.1/dist/themes/light.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/colors@2.1.1/dist/themes/dark.css" />

[Figma variables & styles]

Usage Example

.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

Here's the file structure of a Sargam colors:

.
├── tokens/
│   ├── global/
│   │   └── global.json
│   └── themes/
│       ├── dark/
│       │   └── dark.json
│       └── light/
│           └── light.json
└── dist/
    └── themes/
        ├── light.css
        └── dark.css

tokens/ folder 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

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

Color Tokens

Text

Variable Value(Light) Value(Dark) Role
--text-primary --silver8 --silver1 Body copy
--text-primary-alt --silver7 --silver3 Body copy alt
--text-secondary --silver6 --silver5 Secondary text color
--text-placeholder --silver5 --silver6 Placeholder text
--text-on-color --silver1 --silver1 Text on interactive colors
--text-error --red6 --red4 Error message text
--text-success --green6 --green4 Success message text

Support

Variable Value(Light) Value(Dark) Role
--support-error --red5 --red4 Error
--support-warning --yellow5 --yellow4 Warning
--support-success --green5 --green4 Success
--support-info --teal5 --teal4 Information

Link

Variable Value(Light) Value(Dark) Role
--link --teal6 --teal4 Primary links
--link-hover --teal7 --teal6 Hover state for primary links
--link-subtle --teal5 --teal5 Secondary links
--link-visited --lavender6 --lavender4 Link visited
--link-muted --silver8 --silver1 Link muted

Icon

Variable Value(Light) Value(Dark) Role
--icon-primary --silver7 --silver3 Primary icons
--icon-secondary --silver6 --silver5 Secondary icons
--icon-disabled --silver5 --silver6 Disabled state for icons
--icon-on-color --silver1 --silver8 Icons on interactive colors

Button

Variable Value(Light) Value(Dark) Role
--button-primary --teal5 --teal4 Primary button background
--button-primary-hover --teal6 --teal3 Primary button hover
--button-primary-active --teal7 --teal2 Primary button active
--button-secondary --silver8 --silver6 Secondary button background
--button-secondary-hover --silver7 --silver7 Secondary button hover
--button-secondary-active --silver6 --silver8 Secondary button active
--button-danger --red5 --red4 Danger button background
--button-danger-hover --red6 --red3 Danger button hover
--button-danger-active --red7 --red2 Danger button active
--button-disabled --silver5 --silver6 Disabled button
--button-disabled-alt --silver4 --silver7 Disabled button alt

Border

Variable Value(Light) Value(Dark) Role
--border-muted --silver3 --silver7 Muted borders and separators
--border-default --silver5 --silver6 Default borders and separators
--border-strong --silver6 --silver5 Strong borders and separators

Background

Variable Value(Light) Value(Dark) Role
--background --silver1 --silver8 Default app background
--background-subtle --silver2 --silver7 Subtle background
--background-selected --silver3 --silver6 Hovered UI element background
--background-red --red1 --red8 Subtle red background
--background-yellow --yellow1 --yellow8 Subtle yellow background
--background-green --green1 --green8 Subtle green background
--background-teal --teal1 --teal8 Subtle teal background
--background-lavender --lavender1 --lavender8 Subtle lavender background
--background-pink --pink1 --pink8 Subtle pink background

Primitives

Red

Variable Value Color
$red1 hsl(0, 100%, 98%) #FFF7F7
$red2 hsl(1, 90%, 88%) #FCC6C5
$red3 hsl(1, 89%, 71%) #F77472
$red4 hsl(1, 89%, 64%) #F55451
$red5 hsl(1, 89%, 57%) #F33330
$red6 hsl(1, 67%, 48%) #CC2B28
$red7 hsl(1, 67%, 34%) #921F1D
$red8 hsl(1, 67%, 20%) #571211

Yellow

Variable Value Color
$yellow1 hsl(48, 100%, 98%) #FFFDF5
$yellow2 hsl(51, 91%, 86%) #FCF2BC
$yellow3 hsl(50, 92%, 67%) #F8DE5D
$yellow4 hsl(50, 92%, 59%) #F7D737
$yellow5 hsl(50, 92%, 51%) #F5CF11
$yellow6 hsl(50, 87%, 43%) #CEAE0E
$yellow7 hsl(50, 87%, 31%) #937C0A
$yellow8 hsl(50, 87%, 18%) #584B06

Green

Variable Value Color
$green1 hsl(132, 38%, 97%) #F6FBF7
$green2 hsl(139, 45%, 82%) #BDE6CA
$green3 hsl(139, 45%, 57%) #5FC37E
$green4 hsl(138, 51%, 47%) #3AB55F
$green5 hsl(138, 79%, 37%) #14A741
$green6 hsl(139, 78%, 31%) #118C37
$green7 hsl(138, 79%, 22%) #0C6427
$green8 hsl(138, 79%, 13%) #073C17

Teal

Variable Value Color
$teal1 hsl(132, 38%, 97%) #F6FBF7
$teal2 hsl(177, 43%, 81%) #BBE4E2
$teal3 hsl(178, 42%, 54%) #59BCB8
$teal4 hsl(177, 55%, 44%) #32ADA7
$teal5 hsl(177, 87%, 33%) #0B9D96
$teal6 hsl(177, 87%, 28%) #09847E
$teal7 hsl(177, 86%, 20%) #075E5A
$teal8 hsl(177, 87%, 12%) #043936

Lavender

Variable Value Color
$lavender1 hsl(270, 40%, 98%) #FAF8FC
$lavender2 hsl(280, 33%, 86%) #DFCFE7
$lavender3 hsl(281, 34%, 65%) #B289C5
$lavender4 hsl(281, 34%, 57%) #A06EB7
$lavender5 hsl(281, 35%, 49%) #8E52A9
$lavender6 hsl(281, 35%, 41%) #77458E
$lavender7 hsl(282, 35%, 29%) #553165
$lavender8 hsl(281, 34%, 18%) #331E3D

Pink

Variable Value Color
$pink1 hsl(334, 100%, 99%) #FFF8FB
$pink2 hsl(331, 96%, 90%) #FECBE4
$pink3 hsl(331, 95%, 75%) #FC82BC
$pink4 hsl(331, 96%, 69%) #FC64AD
$pink5 hsl(331, 96%, 63%) #FB479D
$pink6 hsl(331, 63%, 53%) #D33C84
$pink7 hsl(332, 56%, 38%) #972B5E
$pink8 hsl(331, 55%, 23%) #5A1A39

Silver

Variable Value Color
$silver1 hsl(0, 0%, 100%) #FFFFFF
$silver2 hsl(30, 12%, 97%) #F8F7F6
$silver3 hsl(43, 13%, 89%) #E7E5E0
$silver4 hsl(47, 11%, 84%) #DBD9D2
$silver5 hsl(45, 6%, 74%) #C1BFB9
$silver6 hsl(48, 2%, 44%) #72716D
$silver7 hsl(30, 2%, 17%) #2C2B2A
$silver8 hsl(0, 3%, 6%) #100F0F

Websites and apps crafted with Sargam Colors:

License

MIT License, Copyright (c) 2023 Abhimanyu Rana. Brought to you by @planetabhi 🙌

npm version

Package Sidebar

Install

npm i @sargamdesign/colors

Weekly Downloads

2

Version

2.1.1

License

MIT

Unpacked Size

41.4 kB

Total Files

10

Last publish

Collaborators

  • planetabhi