@brandcolors/facebook

Introduction

Facebook Brand Colors.

Installation

npm install @brandcolors/facebook

Usage

Styles

@use "@brandcolors/facebook/styles";

The styles will create all custom properties in CSS root. If you want this custom properties anywhere else, use the public mixin custom-properties.

Theming

@use "@brandcolors/facebook";

.foo {
    color: facebook.$primary;
    // color: #1877f2;
    color: facebook.$primary-rgb;
    // color: rgb(24, 119, 242);
}

Custom Properties

@use "@brandcolors/facebook";

:root {
    @include facebook.custom-properties(primary);
    // --bc-facebook-primary: #1877f2;
    @include facebook.custom-properties(primary-rgb);
    // --bc-facebook-primary-rgb: rgb(24, 119, 242);
}

API

Variables

Variable	Value
$primary	Return #... color.
$primary-rgb	Return rgb(...) color.

Mixins

Mixin	Description
custom-properties($values...)	Create dedicated custom property. If the $values is empty, the mixin will create all styles by default.

Changelog

1.4.0 (2022-04-20)

Features

• brandcolors: add colors.json (df0f23b)
• brandcolors: add global variables (1f890aa)
• brandcolors: add vimeo (bb5dbef)
• change @brandcolors/collection for brandcolors (091da69)
• core: add core package (08f6a9e)
• facebook: use global variables (9c2305c)
• google: use global variables (9f846d9)