Themes

Easy to custom the theme color or other styles, uses Sass variables

1

Install Buval via npm

npm install @apolokak/buval

2

Set your variables with Sass

You might also have to install node-sass and sass-loader depending on your environment.

It can be done in your App.vue within the <style lang="scss"> tag, or in a separate .scss or .sass file. 

// Import Buval variables
@import "~@apolokak/buval/src/styles/utilities/_all";

// Set your colors
$primary: hsl(200, 67%, 49%);
$primary-invert: findColorInvert($primary);
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);

// Setup $colors to use as buval classes (e.g. 'is-mix')
$colors: (
    "white": ($white, $black),
    "black": ($black, $white),
    "light": ($light, $light-invert),
    "dark": ($dark, $dark-invert),
    "primary": ($primary, $primary-invert, $primary-light, $primary-dark),
    "mix": ($mix, $mix-invert, $mix-light, $mix-dark),
    "info": ($info, $info-invert, $info-light, $info-dark),
    "success": ($success, $success-invert, $success-light, $success-dark),
    "warning": ($warning, $warning-invert, $warning-light, $warning-dark),
    "danger": ($danger, $danger-invert, $danger-light, $danger-dark)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-visited: $grey;
$link-focus-border: $primary;

// With Icon
$buval-icon: true;

// Import styles
@import "~@apolokak/buval/src/buval";

3

Import and use Buval

Please note that import '@apolokak/buval/dist/buval.css' from the start section has been omitted. 
import Vue from 'vue'
import Buval from '@apolokak/buval'

Vue.use(Buval)

Variables #


Name Type Default
$black color hsl(0, 0%, 4%)
$black-bis color hsl(0, 0%, 7%)
$black-ter color hsl(0, 0%, 14%)
$grey-darker color hsl(0, 0%, 21%)
$grey-dark color hsl(0, 0%, 29%)
$grey color hsl(0, 0%, 48%)
$grey-light color hsl(0, 0%, 71%)
$grey-lighter color hsl(0, 0%, 86%)
$grey-lighting color hsl(0, 0%, 90%)
$grey-lightest color hsl(0, 0%, 93%)
$white-ter color hsl(0, 0%, 96%)
$white-bis color hsl(0, 0%, 98%)
$white color hsl(0, 0%, 100%)
$buval color hsl(200, 67%, 49%)
$orange color hsl(28, 100%, 50%)
$yellow color hsl(48, 100%, 67%)
$green color hsl(141, 53%, 53%)
$turquoise color hsl(171, 100%, 41%)
$cyan color hsl(204, 71%, 53%)
$blue color hsl(217, 71%, 53%)
$purple color hsl(271, 100%, 71%)
$red color hsl(348, 86%, 61%)
$family-sans-serif font-family BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace font-family monospace
$render-mode keyword optimizeLegibility
$size-1 size 3rem
$size-2 size 2.5rem
$size-3 size 2rem
$size-4 size 1.5rem
$size-5 size 1.25rem
$size-6 size 1rem
$size-7 size 0.875rem
$size-8 size 0.75rem
$weight-light font-weight 300
$weight-normal font-weight 400
$weight-medium font-weight 500
$weight-semibold font-weight 600
$weight-bold font-weight 700
$weight-fullbold font-weight 00
$block-spacing size 1.5rem
$gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $gap)
$widescreen computed 1152px + (2 * $gap)
$widescreen-enabled boolean true
$fullhd computed 1344px + (2 * $gap)
$fullhd-enabled boolean true
$easing keyword ease-out
$radius-small size 2px
$radius size 4px
$radius-large size 6px
$radius-rounded size 290486px
$radius-circle size 50%
$speed duration 86ms
$speed-slow duration 150ms
$speed-slower duration 250ms
$variable-columns boolean true