🐥

Amplifyで色を追加する方法

に公開
Amplify
idea

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という紺色にしたいですが
どうしたらいいですか

色リストの作成

まずは色作りのツールサイトに行きます
https://hihayk.github.io/scale/

Colorの部分に「#344465」に変更します

Amplifyカラーの基本数は7個（中央１個+浅い系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に行き、カラーのネーミングアイデアを探します
https://www.w3schools.com/tags/ref_colornames.asp

「midnight」という名前がいいので、それを決めます

Desktopなどの場所で
studioTheme.jsonというファイルを作成します

開発中のAmplifyプロジェクト（React）をVSCodeから開き、
studioTheme.jsというファイルをオープンします

export default createTheme()中のobjectを全部コピーして、Desktop/studioTheme.jsonにコピーします

studioTheme.jsonで、tokens.colorsの下に、もう一つのカラー「midnight」を追加します
valueには一旦、カラーコードを貼ります

studioTheme.json
"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カラーを検索できれるツールに行き
https://convertingcolors.com/

それぞれのHSLカラーを探します

studioTheme.json
"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