Amplifyで色を追加する方法
Amplifyの色の設定は二重あります
まずはPaletteで色の基本を定義します
"colors": {
"red": {
"10": { "value": "hsl(0, 75%, 95%)" },
"20": { "value": "hsl(0, 75%, 85%)" },
"40": { "value": "hsl(0, 75%, 75%)" },
"60": { "value": "hsl(0, 50%, 50%)" },
"80": { "value": "hsl(0, 95%, 30%)" },
"90": { "value": "hsl(0, 100%, 20%)" },
"100": { "value": "hsl(0, 100%, 15%)" }
},
"orange": {
"10": { "value": "hsl(30, 75%, 95%)" },
"20": { "value": "hsl(30, 75%, 85%)" },
"40": { "value": "hsl(30, 75%, 75%)" },
"60": { "value": "hsl(30, 50%, 50%)" },
"80": { "value": "hsl(30, 95%, 30%)" },
"90": { "value": "hsl(30, 100%, 20%)" },
"100": { "value": "hsl(30, 100%, 15%)" }
},
...
}
そして、BrandやSematicで応用します
(※Semeticはfont
、background
などの部分です)
"brand": {
"primary": {
"10": { "value": "{colors.teal.10.value}" },
"20": { "value": "{colors.teal.20.value}" },
"40": { "value": "{colors.teal.40.value}" },
"60": { "value": "{colors.teal.60.value}" },
"80": { "value": "{colors.teal.80.value}" },
"90": { "value": "{colors.teal.90.value}" },
"100": { "value": "{colors.teal.100.value}" }
},
...
}
ご覧の通り、BrandとSematicは、色のHSLコードはほとんど指定せず
Paletteだけを指して定義します
デフォルトだと、AmplifyのPrimaryカラーteal
という青色です
Primaryはこのteal
ではなく、#344465
という紺色にしたいですが
どうしたらいいですか
色リストの作成
まずは色作りのツールサイトに行きます
Colorの部分に「#344465」に変更します
Amplifyカラーの基本数は7個(中央1個+浅い系3個+深い系3個)
"teal": {
"10": { "value": "hsl(190, 75%, 95%)" },
"20": { "value": "hsl(190, 75%, 85%)" },
"40": { "value": "hsl(190, 70%, 70%)" },
"60": { "value": "hsl(190, 50%, 50%)" },
"80": { "value": "hsl(190, 95%, 30%)" },
"90": { "value": "hsl(190, 100%, 20%)" },
"100": { "value": "hsl(190, 100%, 15%)" }
},
なので、それぞれのAmountを「3」に変更します
それぞれのHue anglesを「0」に変更します
デフォルトのカラーと照合して、LightnessとSaturationを調整してればOKです
色を出力
ツールサイトで「Copy colors」をクリックします
このようなテキストがコピーされました
#182134
#212D45
#2A3855
#344465 // 中央カラー
#69768F
#9FA7B9
#D5D9E1
これから使用するカラーの順序とはまっ逆なので、逆さまにします
#D5D9E1
#9FA7B9
#69768F
#344465 // 中央カラー
#2A3855
#212D45
#182134
w3schoolsに行き、カラーのネーミングアイデアを探します
「midnight」という名前がいいので、それを決めます
Desktopなどの場所で
studioTheme.json
というファイルを作成します
開発中のAmplifyプロジェクト(React)をVSCodeから開き、
studioTheme.js
というファイルをオープンします
export default createTheme()
中のobjectを全部コピーして、Desktop/studioTheme.json
にコピーします
studioTheme.json
で、tokens.colors
の下に、もう一つのカラー「midnight」を追加します
value
には一旦、カラーコードを貼ります
"colors": {
"neutral": {
...
},
"midnight": {
"10": { "value": "#D5D9E1" },
"20": { "value": "#9FA7B9" },
"40": { "value": "#69768F" },
"60": { "value": "#344465" },
"80": { "value": "#2A3855" },
"90": { "value": "#212D45" },
"100": { "value": "#182134" }
},
}
HSLカラーを検索できれるツールに行き
それぞれのHSLカラーを探します
"colors": {
"midnight": {
- "10": { "value": "#D5D9E1" },
+ "10": { "value": "hsl(220, 17%, 86%)" },
...
}
}
全部HSL埋めればOKです
Figmaアップデート
FigmaでAmplifyのプロジェクトを開きます
「AWS Amplify Theme Editor」というプラグインを起動します
Theme Presets / Importsというタブを開き、「Choose File」をクリックします
先ほど編集したDesktop/studioTheme.json
を選択、アップロードします
次はFigmaのカスタムコンポーネントを選択します
色付けたい要素にフォーカス、Fillの右のアイコンをクリックします
先ほどアップロードした色を選択します
これで完了しました
続いてAmplifyにシンクロして、ローカルのReactにpullしたり
そのままに使えるようになりますた
Discussion