LevelEleven CSS Theme

Installation

npm i -D leveleleven-theme

then, in your main.css:

@import "leveleleven-theme";

Usage

colors

  --color-white       : #ffffff;
  --color-black       : #222222;

  --color-red         : #EF413A;
  --color-red-dark    : #921A1D;

  --color-green       : #CADB37;
  --color-yellow      : #F4F40E;

  --color-blue        : #43C3D1;
  --color-blue-dark   : #436068;

  --color-gray        : #D8D8D8;
  --color-gray-dark   : #979797;
  --color-gray-light  : #F4F4F4;

  --color-green-dark  : #666F17;
  --color-yellow-dark : #BAA600;

  --color-positive       : var(--color-green);
  --color-positive-dark  : color(var(--color-positive) shade(20%));
  --color-positive-light : color(var(--color-positive) tint(20%));

  --color-negative       : var(--color-red);
  --color-negative-dark  : color(var(--color-negative) shade(20%));
  --color-negative-light : color(var(--color-negative) tint(20%));


  --color-neutral       : var(--color-blue);
  --color-neutral-dark  : color(var(--color-neutral) shade(20%));
  --color-neutral-light : color(var(--color-neutral) tint(20%));

  /* New Branding Colors */
  --color-flame  : #E84D38;
  --color-lagoon : #087284;
  --color-slate  : #2A3449;

  --color-gray        : #656975;
  --color-gray-medium : #D8DDE7;
  --color-gray-light  : #F4F6F9;

  --color-pacingRed: #C43537;
  --color-pacingBlue: #35A1BA;
  --color-pacingGreen: #77AF41;

fonts

.u-textBold

.u-textUppercase

.u-textItalic