@brandcolors/google

Introduction

Google Brand Colors.

Installation

npm install @brandcolors/google

Usage

Styles

@use "@brandcolors/google/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/google";

.foo {
    color: google.$primary;
    // color: #4285f4;
    color: google.$primary-rgb;
    // color: rgb(66, 133, 244);
}

Custom Properties

@use "@brandcolors/google";

:root {
    @include google.custom-properties(primary);
    // --bc-google-primary: #4285f4;
    @include google.custom-properties(primary-rgb);
    // --bc-google-primary-rgb: rgb(66, 133, 244);
}

API

Variables

Variable	Value
$primary	Return hex value color.
$primary-rgb	Return rgb color.
$blue	Return hex value color.
$green	Return hex value color.
$yellow	Return hex value color.
$red	Return hex value 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.7.0 (2022-04-25)

Features

• core: add amex, boeing, dailymotion, dailymotion, deezer, deliveroo, dell and (ca8a8ec)
• core: add discord (d446959), closes #5
• core: rename @brandcolors/core for @brandcolors/brandcolors (4a8573b)