ソング: ソング側CSSカラー定義が使いづらいのを調整する

[romot-co]

内容

現状、ソング側のCSSカラー定義とその利用が扱いづらくなっている
開発時に扱いやすいように修正する

動的変更やシステムカラーの利用についても考慮する

Pros 良くなる点

• 開発時に取り扱いやすくなる

Cons 悪くなる点

• なし

実現方法

特にカラーに対する相対的な状態変更(ex: アクティブであったりホバーであったり)で
Lr値での変更がややこしいため
light/darkそれぞれでlr値の変更を容易にするSASS関数/TS関数を追加する

VOICEVOXのバージョン

0.2.2?

OSの種類/ディストリ/バージョン

その他

[romot-co]

設計を考える

なるべく使いやすくて変更が容易なものにしたい

責務分割とカプセル化

おおまかに：

• プリミティブカラー primary/secondaryなど
• ロールカラー surfaceなど
• 各コンポーネントカラー sing-ruler-surface / sing-ruler-measure-lineなど

に分割して相互に疎にする
定義と使用を分離する
各コンポーネントカラーは、そのコンポーネント内で定義・管理する

変更の容易性

• 明度変化の関数の定義(--lrのややこしさを減らす…)

@function lr($base-lr, $adjustment) {
  $new-lr: $base-lr + $adjustment;
  $new-lr: max(0, min($new-lr, 100));
  @return '--lr-#{$new-lr}';
}
  
.class {
  --hover-bg: #{lr($base-lr, 5)};
}

状態の共通化

• hoverやactiveなどは明度変化の変数定義＋ミックスインなどにして各所で利用

// ホバーでの明度変化量
--hover-state-change: 5;

// ホバー変化
@mixin hover-state($base-color, $base-lr) {
  &:hover {
    // ライト/ダークモード対応
    --hover-l: #{lr($base-lr, if(dark-mode(), $base-lr + var(--hover-state-change), $base-lr - var(--hover-state-change)))};

    background-color: oklch(
      var(--hover-l, l(from var(#{$base-color}))), // 明度
      c(from var(#{$base-color})), // 彩度
      h(from var(#{$base-color}))  // 色相
    );
  }
}

.button {
  @include hover-state(var(--color), 50);
}

アクセシビリティなどは意識しないですむように

方法が思いつかない…がコントラスト比などの自動テスト？
TypeScriptベースの時はできたもののどうしよう

動的カラー対応

現状でもCSS変数で外部から注入してプリミティブカラーを変えれば一括で変わる形にはなっている

[romot-co]

移行について

各コンポーネントカラーをコンポーネント側で定義して使う
便利関数などは必須ではなく特に問題は起こらないはず…？

[Hiroshiba]

各コンポーネントカラーをコンポーネント側で定義して使う

そのコンポーネントの中で1回しか出ない色とかは、マストで定義はしなくても良いかも？
逆に何度も使うものは確かに1回定義して使い回した方が絶対良さそう！