`Palette`型のプロパティを再定義する

[youchann]

背景

現在のPalette型の定義はこのようになっている。

export type Palette = {
  white: string;
  black: string;
  primary: PaletteColor;
  success: PaletteColor;
  warning: PaletteColor;
  danger: PaletteColor;
  gray: PaletteColor;
  text: PaletteText;
  background: PaletteBackground;
  divider: string;
  icon: PaletteIcon;
};

このような定義型は下記のような問題点を孕んでいる。

• 保持しているプロパティが多い
  • ingred-uiの利用者は新規追加するコンポーネントに対してどの色を割り当てるかの判断コストがかかる
• プロパティ名が用途ではなく色となっているものがある(e.g. Palette["gray"])
  • Themingが難しくなる
    • 例えば任意の箇所の背景を変えたい場合に意図しない箇所のテキスト色が変わる可能性がある

他の社内OSSやコンポーネントライブラリを参考にし、適切なPalette型を作成する。

TODO

• [ ] Palette型を再考する
• [ ] 新たな型をingred-uiに適用する

[keisukeonishi]

コードをもとに現在paletteで定義されている色をXDで洗い出してみました。 各色の数字のズレもありつつ、同じグレーが使われていたり白が直接#ffffffと打たれちゃってたりしてますね わりとメチャのクチャな感じがします

[youchann]

@takurinton

https://github.com/voyagegroup/ingred-ui/pull/940 ↑あたりが関係あるやつかな？

どういう対応をとって、いまどうなっているのかを書いてほしいです:pray:

[takurinton]

プロパティ名が用途ではなく色となっているものがある(e.g. Palette["gray"])

この箇所について、gray を全て綺麗に定義することは現状の構成だと難しそうだったので、gray が使われてる中でも box-shadow で使われてる gray にフォーカスを当てて対応をした。

関連PR

• #940
• #978

[takurinton]

gray の部分に関しては、今の所 getShadow 関数を使ってトークン番号を渡すとその shadow を返してくれるようになっている。 トークン番号は https://github.com/voyagegroup/ingred-ui/pull/940#issuecomment-1221712966 で定義されている通り。

補足 本来、shadow は palette の中で定義したかったが、palette の中で定義しなかった理由として一部動的に値を指定したいトークンが存在したというものがある。