1.7.0 • Published 2 years ago
@brandcolors/vimeo v1.7.0
Introduction
Vimeo Brand Colors.
Installation
npm install @brandcolors/vimeoUsage
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. |