Buefy で用意されている Component を利用するとき、
Buefy で準備されている色バリエーションではなく、
独自に定義した色バリエーションを使う際にはまったので、定義方法の整理

Buefy について

Buefy は Vue.js と Bulma 上で作成された UI コンポーネントのライブラリ
Bulma 単独で使うより、完成された Component があって、
とくに Design にこだわりがなければ、使いやすいライブラリだと思う

公式

公式は正義
https://buefy.org/documentation

詰まったこと

Buefy が準備している Component の中に、
Progress Bar が用意されているが、

Bar の色についてこちらで定義した色を使用したかった

<!-- typeに渡した値によってBuefyで準備された色を充てる -->
<b-progress type="is-danger" :value="40" show-value></b-progress>

↑ の例だと赤い Progress Bar が作られる is-danger

基本的には、Buefy で用意された色を使用していくことになるが、
アプリ全体との兼ね合いで
用意された独自の色バリエーション以外を使用したくなることもある

今回の場合だとピンク(#EFB3B3)が使用したかった

デフォルトの値の変更

基本的にはここに記載の通りに設定していく
今回はis-primaryのデフォルトカラーを変更

1.Buefy のインストール (今回に関してはですでに import されているので行わなかった)

npm install buefy

2.scss ファイルに以下記載

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
  (
    "primary": (
      $primary,
      $primary-invert,
      $primary-light,
      $primary-dark,
    ),
  ),
  $custom-colors
);

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

3.primary で定義されている各種変数についてカスタムしたい色を当てていく

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// 変数にカラーコードを設定
$primary: #EFB3B3

// 次いでにダークモードのカラーも追加
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);


// Set your colors
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
  (
    "primary": (
      $primary,
      $primary-invert,
      $primary-light,
      $primary-dark,
    ),
  ),
  $custom-colors
);

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

4.使用したい Component で type にis-primaryを指定

<template>
  <section>
    // is- {colors} で指定する
    <b-progress type="is-primary" :value="60" show-value></b-progress>
  </section>
</template>

scss が適用されると、
Buefy のベースカラーが変更がされたのが確認できる

カラーの追加

デフォルトで準備されている is-primaryの変更はできた
とはいえ、用意されているものだけだと数がたりなくなったり、
他のBuefy を使用している箇所に影響する

そのため、独自に定義した色バリエーションを使いたいので
追加する方法も整理
とはいえ、やり方は簡単で$colors に足してやれば良かった
今回は、少し暗めのピンク(#b87d7d)を追加する

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$pink: #b87d7d;
$pink-light: findLightColor($pink);
$pink-dark: findDarkColor($pink);
$pink-invert: findColorInvert($pink);
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
  (
    "primary": (
      $primary,
      $primary-invert,
      $primary-light,
      $primary-dark,
    ),
    // 独自のColorセットを追加
    "pink":
      (
        $pink,
        $pink-light,
        $pink-dark,
        $pink-invert,
      ),
  ),
  $custom-colors
);

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

使用するときも、デフォルトト同じで、 id-{$colors}で指定してあげてばよい

<template>
  <section>
    <b-progress type="is-pink" :value="60" show-value></b-progress>
  </section>
</template>

おわりに

どの css ライブラリにも言えることだが、
使用すると余計なものを作らなくてよくなるので実装は楽になるが、

デザイナーがいるような環境だと、
デザイナーが作成したデザインと拮抗してかなり使いにくくなる Buefy は Bulma をオーバラップしているため、
一つ一つの仕上がりは高いのだが、自由度は下がった感じがする

今回に関しても、Bulma の progress を直接いじったほうが楽だったかもしれない

なんかいろいろと書いてくブログ

関東のどこかで働く、一般人

【Vue.js】Buefyで標準の$colorsの変更と、独自の色バリエーションを追加

Buefy について

公式

詰まったこと

デフォルトの値の変更

カラーの追加

おわりに