Introduction

Vimeo Brand Colors.

Installation

npm install @brandcolors/vimeo

Usage

Styles

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

.foo {
    color: vimeo.$primary;
    // color: #1ab7ea;
    color: vimeo.$primary-rgb;
    // color: rgb(26, 183, 234);
}

Custom Properties

@use "@brandcolors/vimeo";

:root {
    @include vimeo.custom-properties(primary);
    // --bc-vimeo-primary: #1ab7ea;
    @include vimeo.custom-properties(primary-rgb);
    // --bc-vimeo-primary-rgb: rgb(26, 183, 234);
}

API

Variables

| Variable | Value | | --- | --- | | $blue | Return blue hex value. | | $dark-forest | Return dark forest hex value. | | $primary | Return primary (a.k.a blue) hex value. | | $primary-rgb | Return primary RGB value. |

Mixins

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