WIP: Palette 再考 #912
WIP: Palette 再考 #912
Conversation
✅ Deploy Preview for ingred-ui ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
src/themes/palette.ts
Outdated
| export type PaletteAction = { | ||
| active: string; | ||
| hover: string; | ||
| selected: string; | ||
| selectedOpacity: number; | ||
| disabled: string; | ||
| disabledBackground: string; | ||
| focus: string; | ||
| focusOpacity: number; | ||
| activeBackground: string; | ||
| hoverBackground: string; | ||
| }; |
There was a problem hiding this comment.
palette に関しては一旦、こんな形で定義をしてみる。
There was a problem hiding this comment.
これらの値は全部1パターンではないので、opacity をうまく使いながら既存実装を再現していきたい
|
しばらく時間が空いてしまった、続き |
| disabled: theme.palette.gray.light, | ||
| disabled: theme.palette.background.disabled, |
There was a problem hiding this comment.
background に disabled ってプロパティを足してみた
disabled な background に gray を使っていそうなところはこんな感じで対応すれば良さそう。
There was a problem hiding this comment.
これはたまたま見つけたそれっぽいところにこれを指定しただけで、大した意味はないです。
他にもたくさんこういうところあるはず。
There was a problem hiding this comment.
text.disabled と色が近いから contrast 文脈で a11y 的にはよくないが（やってないからわからないけどおそらく lighthouse には怒られる）既存の色を合わせただけなのでそこまで気にする必要なし。
There was a problem hiding this comment.
focus, hover もここにないと不自然か？
|
MEMO |
|
脱線するけど、state の変数名も統一したいなー |
|
gray が使われてる箇所
|
| active: colors.blue[50] as string, | ||
| hover: "", | ||
| selected: "", | ||
| disabled: colors.basic[200], |
There was a problem hiding this comment.
wip だけどこんな感じ
opacity とかは primary.main からいい感じに色を導くためのもので、今のうちの形だと不要なので消した。
とはいえ、これだけだと不十分でもう少し根本的な見直しが必要になりそう。ちょっと厳しさが見えてきた。
There was a problem hiding this comment.
hover, selected は後で定義
|
一旦 close |
ref #872
コメント書きながら壁打ちしていきます。