@morteza-jamali/brand-colors v1.0.3

Collection of brand colors available in SASS, LESS, CSS, Javascript + Typescript

Installation

npm install @morteza-jamali/brand-colors



yarn add @morteza-jamali/brand-colors

Usage

SASS, SCSS

In SASS each brand variable is a list of colors .

@user "sass:list";

@import "~@morteza-jamali/dist/scss/brandColors.scss";



.a-div {

color: list.nth($bcAdidas, 0);

}

LESS

In LESS each brand is a map of colors .

@import "~@morteza-jamali/brand-colors/dist/less/brandColors.less";

.a-div {
  color: #bcAdidas[0];
}

CSS

<link rel="stylesheet" href="node_modules/@morteza-jamali/brand-colors/dist/css/brandColors.css">

<style>
  .bc-adidas {
    color: var(--bcAdidas-0);
    background-color: var(--bcAdidas-1);
  }
</style>

<span class="bc-adidas">This is a test text</span>

Javascript , Typescript (ES6 Syntax)

In Javascript each brand is an array of colors .

import { bcAdidas } from "@morteza-jamali/brand-colors";

console.log(bcAdidas);

/* Will print ["#000000","#be0027","#cf8d2e","#e4e932",
"#2c9f45","#371777","#52325d","#511378"] */

Minified files for CSS and Javascript are available .