カラーパレット

概要

Camome デザインシステムのカラーパレットは以下の 3 つに分類されます。

  1. Shade
  2. Semantic
  3. Template

この 3 つの中で Shade が最もプリミティブで、下に向かうにつれより高レベルな意味を持ちます。

使用方法

基本的には Shade をコードの中で使わないでください。Shade を直接使用すると、例えばダークテーマに対応する際に :root[data-theme="dark"] のようなセレクターを大量に書くことになります。

代わりに Semantic と Template を使ってください。そうすればテーマの変更などにも柔軟に対応できます。

Semantic と Template の違い

  • Semantic – 汎用的にどこでも使えるトークン。
  • Template – 特定の UI パターンのためのトークン。 例えば Button は複数の Template を実装しており、variant プロパティによって切り替えられる。Radio は 1 つの Template (soft) のみを実装している例。

多くの UI コンポーネントはこれらの Template (つまり UI パターン)のいずれかに当てはまることが多いため、そのトークンを継承するのが便利な場合があります。あなたのアプリケーションの独自コンポーネントにも取り入れることができるはずです。

Shade

Primary

primary.0
primary.1
primary.2
primary.3
primary.4
primary.5
primary.6
primary.7
primary.8
primary.9

Neutral

neutral.0
neutral.1
neutral.2
neutral.3
neutral.4
neutral.5
neutral.6
neutral.7
neutral.8
neutral.9

Info

info.0
info.1
info.2
info.3
info.4
info.5
info.6
info.7
info.8
info.9

Success

success.0
success.1
success.2
success.3
success.4
success.5
success.6
success.7
success.8
success.9

Warn

warn.0
warn.1
warn.2
warn.3
warn.4
warn.5
warn.6
warn.7
warn.8
warn.9

Danger

danger.0
danger.1
danger.2
danger.3
danger.4
danger.5
danger.6
danger.7
danger.8
danger.9

Semantic

Font

Aa
font.base
Aa
font.muted
Aa
font.subtle
Aa
font.onEmphasis

Surface

surface.0
surface.1
surface.2
surface.3
surface.4

Border

border.base
border.subtle

Primary

Aa
primary.font
primary.muted
primary.subtle
primary.emphasis

Neutral

Aa
neutral.font
neutral.muted
neutral.subtle
neutral.emphasis

Info

Aa
info.font
info.muted
info.subtle
info.emphasis

Success

Aa
success.font
success.muted
success.subtle
success.emphasis

Warn

Aa
warn.font
warn.muted
warn.subtle
warn.emphasis

Danger

Aa
danger.font
danger.muted
danger.subtle
danger.emphasis

Template

Primary

primary.solid.bg
primary.solid.bgHover
Aa
primary.solid.font
primary.soft.bg
primary.soft.bgHover
Aa
primary.soft.font
primary.outline.bg
primary.outline.bgHover
Aa
primary.outline.font
primary.outline.border
primary.ghost.bg
primary.ghost.bgHover
Aa
primary.ghost.font

Neutral

neutral.solid.bg
neutral.solid.bgHover
Aa
neutral.solid.font
neutral.soft.bg
neutral.soft.bgHover
Aa
neutral.soft.font
neutral.outline.bg
neutral.outline.bgHover
Aa
neutral.outline.font
neutral.outline.border
neutral.ghost.bg
neutral.ghost.bgHover
Aa
neutral.ghost.font

Info

info.solid.bg
info.solid.bgHover
Aa
info.solid.font
info.soft.bg
info.soft.bgHover
Aa
info.soft.font
info.outline.bg
info.outline.bgHover
Aa
info.outline.font
info.outline.border
info.ghost.bg
info.ghost.bgHover
Aa
info.ghost.font

Success

success.solid.bg
success.solid.bgHover
Aa
success.solid.font
success.soft.bg
success.soft.bgHover
Aa
success.soft.font
success.outline.bg
success.outline.bgHover
Aa
success.outline.font
success.outline.border
success.ghost.bg
success.ghost.bgHover
Aa
success.ghost.font

Warn

warn.solid.bg
warn.solid.bgHover
Aa
warn.solid.font
warn.soft.bg
warn.soft.bgHover
Aa
warn.soft.font
warn.outline.bg
warn.outline.bgHover
Aa
warn.outline.font
warn.outline.border
warn.ghost.bg
warn.ghost.bgHover
Aa
warn.ghost.font

Danger

danger.solid.bg
danger.solid.bgHover
Aa
danger.solid.font
danger.soft.bg
danger.soft.bgHover
Aa
danger.soft.font
danger.outline.bg
danger.outline.bgHover
Aa
danger.outline.font
danger.outline.border
danger.ghost.bg
danger.ghost.bgHover
Aa
danger.ghost.font