2021/05/27
Tailwindcssで定義されている色からAndroid版の定義を自動生成する
Webアプリでは、普段Tailwindcssを重宝しています。とても便利なCSSライブラリです。
colors.jsで定義されている便利な色たちをAndroidでも利用したいので、jsonで定義されている色をAndroidの変数に変換するスクリプトを作りました。
できたものはこちらです。
import androidx.compose.ui.graphics.Color
val Black = Color(0xff000000)
val White = Color(0xffffffff)
val Rose50 = Color(0xfffff1f2)
val Rose100 = Color(0xffffe4e6)
val Rose200 = Color(0xfffecdd3)
val Rose300 = Color(0xfffda4af)
val Rose400 = Color(0xfffb7185)
val Rose500 = Color(0xfff43f5e)
val Rose600 = Color(0xffe11d48)
val Rose700 = Color(0xffbe123c)
val Rose800 = Color(0xff9f1239)
val Rose900 = Color(0xff881337)
val Pink50 = Color(0xfffdf2f8)
val Pink100 = Color(0xfffce7f3)
val Pink200 = Color(0xfffbcfe8)
val Pink300 = Color(0xfff9a8d4)
val Pink400 = Color(0xfff472b6)
val Pink500 = Color(0xffec4899)
val Pink600 = Color(0xffdb2777)
val Pink700 = Color(0xffbe185d)
val Pink800 = Color(0xff9d174d)
val Pink900 = Color(0xff831843)
val Fuchsia50 = Color(0xfffdf4ff)
val Fuchsia100 = Color(0xfffae8ff)
val Fuchsia200 = Color(0xfff5d0fe)
val Fuchsia300 = Color(0xfff0abfc)
val Fuchsia400 = Color(0xffe879f9)
val Fuchsia500 = Color(0xffd946ef)
val Fuchsia600 = Color(0xffc026d3)
val Fuchsia700 = Color(0xffa21caf)
val Fuchsia800 = Color(0xff86198f)
val Fuchsia900 = Color(0xff701a75)
val Purple50 = Color(0xfffaf5ff)
val Purple100 = Color(0xfff3e8ff)
val Purple200 = Color(0xffe9d5ff)
val Purple300 = Color(0xffd8b4fe)
val Purple400 = Color(0xffc084fc)
val Purple500 = Color(0xffa855f7)
val Purple600 = Color(0xff9333ea)
val Purple700 = Color(0xff7e22ce)
val Purple800 = Color(0xff6b21a8)
val Purple900 = Color(0xff581c87)
val Violet50 = Color(0xfff5f3ff)
val Violet100 = Color(0xffede9fe)
val Violet200 = Color(0xffddd6fe)
val Violet300 = Color(0xffc4b5fd)
val Violet400 = Color(0xffa78bfa)
val Violet500 = Color(0xff8b5cf6)
val Violet600 = Color(0xff7c3aed)
val Violet700 = Color(0xff6d28d9)
val Violet800 = Color(0xff5b21b6)
val Violet900 = Color(0xff4c1d95)
val Indigo50 = Color(0xffeef2ff)
val Indigo100 = Color(0xffe0e7ff)
val Indigo200 = Color(0xffc7d2fe)
val Indigo300 = Color(0xffa5b4fc)
val Indigo400 = Color(0xff818cf8)
val Indigo500 = Color(0xff6366f1)
val Indigo600 = Color(0xff4f46e5)
val Indigo700 = Color(0xff4338ca)
val Indigo800 = Color(0xff3730a3)
val Indigo900 = Color(0xff312e81)
val Blue50 = Color(0xffeff6ff)
val Blue100 = Color(0xffdbeafe)
val Blue200 = Color(0xffbfdbfe)
val Blue300 = Color(0xff93c5fd)
val Blue400 = Color(0xff60a5fa)
val Blue500 = Color(0xff3b82f6)
val Blue600 = Color(0xff2563eb)
val Blue700 = Color(0xff1d4ed8)
val Blue800 = Color(0xff1e40af)
val Blue900 = Color(0xff1e3a8a)
val LightBlue50 = Color(0xfff0f9ff)
val LightBlue100 = Color(0xffe0f2fe)
val LightBlue200 = Color(0xffbae6fd)
val LightBlue300 = Color(0xff7dd3fc)
val LightBlue400 = Color(0xff38bdf8)
val LightBlue500 = Color(0xff0ea5e9)
val LightBlue600 = Color(0xff0284c7)
val LightBlue700 = Color(0xff0369a1)
val LightBlue800 = Color(0xff075985)
val LightBlue900 = Color(0xff0c4a6e)
val Cyan50 = Color(0xffecfeff)
val Cyan100 = Color(0xffcffafe)
val Cyan200 = Color(0xffa5f3fc)
val Cyan300 = Color(0xff67e8f9)
val Cyan400 = Color(0xff22d3ee)
val Cyan500 = Color(0xff06b6d4)
val Cyan600 = Color(0xff0891b2)
val Cyan700 = Color(0xff0e7490)
val Cyan800 = Color(0xff155e75)
val Cyan900 = Color(0xff164e63)
val Teal50 = Color(0xfff0fdfa)
val Teal100 = Color(0xffccfbf1)
val Teal200 = Color(0xff99f6e4)
val Teal300 = Color(0xff5eead4)
val Teal400 = Color(0xff2dd4bf)
val Teal500 = Color(0xff14b8a6)
val Teal600 = Color(0xff0d9488)
val Teal700 = Color(0xff0f766e)
val Teal800 = Color(0xff115e59)
val Teal900 = Color(0xff134e4a)
val Emerald50 = Color(0xffecfdf5)
val Emerald100 = Color(0xffd1fae5)
val Emerald200 = Color(0xffa7f3d0)
val Emerald300 = Color(0xff6ee7b7)
val Emerald400 = Color(0xff34d399)
val Emerald500 = Color(0xff10b981)
val Emerald600 = Color(0xff059669)
val Emerald700 = Color(0xff047857)
val Emerald800 = Color(0xff065f46)
val Emerald900 = Color(0xff064e3b)
val Green50 = Color(0xfff0fdf4)
val Green100 = Color(0xffdcfce7)
val Green200 = Color(0xffbbf7d0)
val Green300 = Color(0xff86efac)
val Green400 = Color(0xff4ade80)
val Green500 = Color(0xff22c55e)
val Green600 = Color(0xff16a34a)
val Green700 = Color(0xff15803d)
val Green800 = Color(0xff166534)
val Green900 = Color(0xff14532d)
val Lime50 = Color(0xfff7fee7)
val Lime100 = Color(0xffecfccb)
val Lime200 = Color(0xffd9f99d)
val Lime300 = Color(0xffbef264)
val Lime400 = Color(0xffa3e635)
val Lime500 = Color(0xff84cc16)
val Lime600 = Color(0xff65a30d)
val Lime700 = Color(0xff4d7c0f)
val Lime800 = Color(0xff3f6212)
val Lime900 = Color(0xff365314)
val Yellow50 = Color(0xfffefce8)
val Yellow100 = Color(0xfffef9c3)
val Yellow200 = Color(0xfffef08a)
val Yellow300 = Color(0xfffde047)
val Yellow400 = Color(0xfffacc15)
val Yellow500 = Color(0xffeab308)
val Yellow600 = Color(0xffca8a04)
val Yellow700 = Color(0xffa16207)
val Yellow800 = Color(0xff854d0e)
val Yellow900 = Color(0xff713f12)
val Amber50 = Color(0xfffffbeb)
val Amber100 = Color(0xfffef3c7)
val Amber200 = Color(0xfffde68a)
val Amber300 = Color(0xfffcd34d)
val Amber400 = Color(0xfffbbf24)
val Amber500 = Color(0xfff59e0b)
val Amber600 = Color(0xffd97706)
val Amber700 = Color(0xffb45309)
val Amber800 = Color(0xff92400e)
val Amber900 = Color(0xff78350f)
val Orange50 = Color(0xfffff7ed)
val Orange100 = Color(0xffffedd5)
val Orange200 = Color(0xfffed7aa)
val Orange300 = Color(0xfffdba74)
val Orange400 = Color(0xfffb923c)
val Orange500 = Color(0xfff97316)
val Orange600 = Color(0xffea580c)
val Orange700 = Color(0xffc2410c)
val Orange800 = Color(0xff9a3412)
val Orange900 = Color(0xff7c2d12)
val Red50 = Color(0xfffef2f2)
val Red100 = Color(0xfffee2e2)
val Red200 = Color(0xfffecaca)
val Red300 = Color(0xfffca5a5)
val Red400 = Color(0xfff87171)
val Red500 = Color(0xffef4444)
val Red600 = Color(0xffdc2626)
val Red700 = Color(0xffb91c1c)
val Red800 = Color(0xff991b1b)
val Red900 = Color(0xff7f1d1d)
val WarmGray50 = Color(0xfffafaf9)
val WarmGray100 = Color(0xfff5f5f4)
val WarmGray200 = Color(0xffe7e5e4)
val WarmGray300 = Color(0xffd6d3d1)
val WarmGray400 = Color(0xffa8a29e)
val WarmGray500 = Color(0xff78716c)
val WarmGray600 = Color(0xff57534e)
val WarmGray700 = Color(0xff44403c)
val WarmGray800 = Color(0xff292524)
val WarmGray900 = Color(0xff1c1917)
val TrueGray50 = Color(0xfffafafa)
val TrueGray100 = Color(0xfff5f5f5)
val TrueGray200 = Color(0xffe5e5e5)
val TrueGray300 = Color(0xffd4d4d4)
val TrueGray400 = Color(0xffa3a3a3)
val TrueGray500 = Color(0xff737373)
val TrueGray600 = Color(0xff525252)
val TrueGray700 = Color(0xff404040)
val TrueGray800 = Color(0xff262626)
val TrueGray900 = Color(0xff171717)
val Gray50 = Color(0xfffafafa)
val Gray100 = Color(0xfff4f4f5)
val Gray200 = Color(0xffe4e4e7)
val Gray300 = Color(0xffd4d4d8)
val Gray400 = Color(0xffa1a1aa)
val Gray500 = Color(0xff71717a)
val Gray600 = Color(0xff52525b)
val Gray700 = Color(0xff3f3f46)
val Gray800 = Color(0xff27272a)
val Gray900 = Color(0xff18181b)
val CoolGray50 = Color(0xfff9fafb)
val CoolGray100 = Color(0xfff3f4f6)
val CoolGray200 = Color(0xffe5e7eb)
val CoolGray300 = Color(0xffd1d5db)
val CoolGray400 = Color(0xff9ca3af)
val CoolGray500 = Color(0xff6b7280)
val CoolGray600 = Color(0xff4b5563)
val CoolGray700 = Color(0xff374151)
val CoolGray800 = Color(0xff1f2937)
val CoolGray900 = Color(0xff111827)
val BlueGray50 = Color(0xfff8fafc)
val BlueGray100 = Color(0xfff1f5f9)
val BlueGray200 = Color(0xffe2e8f0)
val BlueGray300 = Color(0xffcbd5e1)
val BlueGray400 = Color(0xff94a3b8)
val BlueGray500 = Color(0xff64748b)
val BlueGray600 = Color(0xff475569)
val BlueGray700 = Color(0xff334155)
val BlueGray800 = Color(0xff1e293b)
val BlueGray900 = Color(0xff0f172a)
<color name="black">#ff000000</color>
<color name="white">#ffffffff</color>
<color name="rose_50">#fffff1f2</color>
<color name="rose_100">#ffffe4e6</color>
<color name="rose_200">#fffecdd3</color>
<color name="rose_300">#fffda4af</color>
<color name="rose_400">#fffb7185</color>
<color name="rose_500">#fff43f5e</color>
<color name="rose_600">#ffe11d48</color>
<color name="rose_700">#ffbe123c</color>
<color name="rose_800">#ff9f1239</color>
<color name="rose_900">#ff881337</color>
<color name="pink_50">#fffdf2f8</color>
<color name="pink_100">#fffce7f3</color>
<color name="pink_200">#fffbcfe8</color>
<color name="pink_300">#fff9a8d4</color>
<color name="pink_400">#fff472b6</color>
<color name="pink_500">#ffec4899</color>
<color name="pink_600">#ffdb2777</color>
<color name="pink_700">#ffbe185d</color>
<color name="pink_800">#ff9d174d</color>
<color name="pink_900">#ff831843</color>
<color name="fuchsia_50">#fffdf4ff</color>
<color name="fuchsia_100">#fffae8ff</color>
<color name="fuchsia_200">#fff5d0fe</color>
<color name="fuchsia_300">#fff0abfc</color>
<color name="fuchsia_400">#ffe879f9</color>
<color name="fuchsia_500">#ffd946ef</color>
<color name="fuchsia_600">#ffc026d3</color>
<color name="fuchsia_700">#ffa21caf</color>
<color name="fuchsia_800">#ff86198f</color>
<color name="fuchsia_900">#ff701a75</color>
<color name="purple_50">#fffaf5ff</color>
<color name="purple_100">#fff3e8ff</color>
<color name="purple_200">#ffe9d5ff</color>
<color name="purple_300">#ffd8b4fe</color>
<color name="purple_400">#ffc084fc</color>
<color name="purple_500">#ffa855f7</color>
<color name="purple_600">#ff9333ea</color>
<color name="purple_700">#ff7e22ce</color>
<color name="purple_800">#ff6b21a8</color>
<color name="purple_900">#ff581c87</color>
<color name="violet_50">#fff5f3ff</color>
<color name="violet_100">#ffede9fe</color>
<color name="violet_200">#ffddd6fe</color>
<color name="violet_300">#ffc4b5fd</color>
<color name="violet_400">#ffa78bfa</color>
<color name="violet_500">#ff8b5cf6</color>
<color name="violet_600">#ff7c3aed</color>
<color name="violet_700">#ff6d28d9</color>
<color name="violet_800">#ff5b21b6</color>
<color name="violet_900">#ff4c1d95</color>
<color name="indigo_50">#ffeef2ff</color>
<color name="indigo_100">#ffe0e7ff</color>
<color name="indigo_200">#ffc7d2fe</color>
<color name="indigo_300">#ffa5b4fc</color>
<color name="indigo_400">#ff818cf8</color>
<color name="indigo_500">#ff6366f1</color>
<color name="indigo_600">#ff4f46e5</color>
<color name="indigo_700">#ff4338ca</color>
<color name="indigo_800">#ff3730a3</color>
<color name="indigo_900">#ff312e81</color>
<color name="blue_50">#ffeff6ff</color>
<color name="blue_100">#ffdbeafe</color>
<color name="blue_200">#ffbfdbfe</color>
<color name="blue_300">#ff93c5fd</color>
<color name="blue_400">#ff60a5fa</color>
<color name="blue_500">#ff3b82f6</color>
<color name="blue_600">#ff2563eb</color>
<color name="blue_700">#ff1d4ed8</color>
<color name="blue_800">#ff1e40af</color>
<color name="blue_900">#ff1e3a8a</color>
<color name="lightBlue_50">#fff0f9ff</color>
<color name="lightBlue_100">#ffe0f2fe</color>
<color name="lightBlue_200">#ffbae6fd</color>
<color name="lightBlue_300">#ff7dd3fc</color>
<color name="lightBlue_400">#ff38bdf8</color>
<color name="lightBlue_500">#ff0ea5e9</color>
<color name="lightBlue_600">#ff0284c7</color>
<color name="lightBlue_700">#ff0369a1</color>
<color name="lightBlue_800">#ff075985</color>
<color name="lightBlue_900">#ff0c4a6e</color>
<color name="cyan_50">#ffecfeff</color>
<color name="cyan_100">#ffcffafe</color>
<color name="cyan_200">#ffa5f3fc</color>
<color name="cyan_300">#ff67e8f9</color>
<color name="cyan_400">#ff22d3ee</color>
<color name="cyan_500">#ff06b6d4</color>
<color name="cyan_600">#ff0891b2</color>
<color name="cyan_700">#ff0e7490</color>
<color name="cyan_800">#ff155e75</color>
<color name="cyan_900">#ff164e63</color>
<color name="teal_50">#fff0fdfa</color>
<color name="teal_100">#ffccfbf1</color>
<color name="teal_200">#ff99f6e4</color>
<color name="teal_300">#ff5eead4</color>
<color name="teal_400">#ff2dd4bf</color>
<color name="teal_500">#ff14b8a6</color>
<color name="teal_600">#ff0d9488</color>
<color name="teal_700">#ff0f766e</color>
<color name="teal_800">#ff115e59</color>
<color name="teal_900">#ff134e4a</color>
<color name="emerald_50">#ffecfdf5</color>
<color name="emerald_100">#ffd1fae5</color>
<color name="emerald_200">#ffa7f3d0</color>
<color name="emerald_300">#ff6ee7b7</color>
<color name="emerald_400">#ff34d399</color>
<color name="emerald_500">#ff10b981</color>
<color name="emerald_600">#ff059669</color>
<color name="emerald_700">#ff047857</color>
<color name="emerald_800">#ff065f46</color>
<color name="emerald_900">#ff064e3b</color>
<color name="green_50">#fff0fdf4</color>
<color name="green_100">#ffdcfce7</color>
<color name="green_200">#ffbbf7d0</color>
<color name="green_300">#ff86efac</color>
<color name="green_400">#ff4ade80</color>
<color name="green_500">#ff22c55e</color>
<color name="green_600">#ff16a34a</color>
<color name="green_700">#ff15803d</color>
<color name="green_800">#ff166534</color>
<color name="green_900">#ff14532d</color>
<color name="lime_50">#fff7fee7</color>
<color name="lime_100">#ffecfccb</color>
<color name="lime_200">#ffd9f99d</color>
<color name="lime_300">#ffbef264</color>
<color name="lime_400">#ffa3e635</color>
<color name="lime_500">#ff84cc16</color>
<color name="lime_600">#ff65a30d</color>
<color name="lime_700">#ff4d7c0f</color>
<color name="lime_800">#ff3f6212</color>
<color name="lime_900">#ff365314</color>
<color name="yellow_50">#fffefce8</color>
<color name="yellow_100">#fffef9c3</color>
<color name="yellow_200">#fffef08a</color>
<color name="yellow_300">#fffde047</color>
<color name="yellow_400">#fffacc15</color>
<color name="yellow_500">#ffeab308</color>
<color name="yellow_600">#ffca8a04</color>
<color name="yellow_700">#ffa16207</color>
<color name="yellow_800">#ff854d0e</color>
<color name="yellow_900">#ff713f12</color>
<color name="amber_50">#fffffbeb</color>
<color name="amber_100">#fffef3c7</color>
<color name="amber_200">#fffde68a</color>
<color name="amber_300">#fffcd34d</color>
<color name="amber_400">#fffbbf24</color>
<color name="amber_500">#fff59e0b</color>
<color name="amber_600">#ffd97706</color>
<color name="amber_700">#ffb45309</color>
<color name="amber_800">#ff92400e</color>
<color name="amber_900">#ff78350f</color>
<color name="orange_50">#fffff7ed</color>
<color name="orange_100">#ffffedd5</color>
<color name="orange_200">#fffed7aa</color>
<color name="orange_300">#fffdba74</color>
<color name="orange_400">#fffb923c</color>
<color name="orange_500">#fff97316</color>
<color name="orange_600">#ffea580c</color>
<color name="orange_700">#ffc2410c</color>
<color name="orange_800">#ff9a3412</color>
<color name="orange_900">#ff7c2d12</color>
<color name="red_50">#fffef2f2</color>
<color name="red_100">#fffee2e2</color>
<color name="red_200">#fffecaca</color>
<color name="red_300">#fffca5a5</color>
<color name="red_400">#fff87171</color>
<color name="red_500">#ffef4444</color>
<color name="red_600">#ffdc2626</color>
<color name="red_700">#ffb91c1c</color>
<color name="red_800">#ff991b1b</color>
<color name="red_900">#ff7f1d1d</color>
<color name="warmGray_50">#fffafaf9</color>
<color name="warmGray_100">#fff5f5f4</color>
<color name="warmGray_200">#ffe7e5e4</color>
<color name="warmGray_300">#ffd6d3d1</color>
<color name="warmGray_400">#ffa8a29e</color>
<color name="warmGray_500">#ff78716c</color>
<color name="warmGray_600">#ff57534e</color>
<color name="warmGray_700">#ff44403c</color>
<color name="warmGray_800">#ff292524</color>
<color name="warmGray_900">#ff1c1917</color>
<color name="trueGray_50">#fffafafa</color>
<color name="trueGray_100">#fff5f5f5</color>
<color name="trueGray_200">#ffe5e5e5</color>
<color name="trueGray_300">#ffd4d4d4</color>
<color name="trueGray_400">#ffa3a3a3</color>
<color name="trueGray_500">#ff737373</color>
<color name="trueGray_600">#ff525252</color>
<color name="trueGray_700">#ff404040</color>
<color name="trueGray_800">#ff262626</color>
<color name="trueGray_900">#ff171717</color>
<color name="gray_50">#fffafafa</color>
<color name="gray_100">#fff4f4f5</color>
<color name="gray_200">#ffe4e4e7</color>
<color name="gray_300">#ffd4d4d8</color>
<color name="gray_400">#ffa1a1aa</color>
<color name="gray_500">#ff71717a</color>
<color name="gray_600">#ff52525b</color>
<color name="gray_700">#ff3f3f46</color>
<color name="gray_800">#ff27272a</color>
<color name="gray_900">#ff18181b</color>
<color name="coolGray_50">#fff9fafb</color>
<color name="coolGray_100">#fff3f4f6</color>
<color name="coolGray_200">#ffe5e7eb</color>
<color name="coolGray_300">#ffd1d5db</color>
<color name="coolGray_400">#ff9ca3af</color>
<color name="coolGray_500">#ff6b7280</color>
<color name="coolGray_600">#ff4b5563</color>
<color name="coolGray_700">#ff374151</color>
<color name="coolGray_800">#ff1f2937</color>
<color name="coolGray_900">#ff111827</color>
<color name="blueGray_50">#fff8fafc</color>
<color name="blueGray_100">#fff1f5f9</color>
<color name="blueGray_200">#ffe2e8f0</color>
<color name="blueGray_300">#ffcbd5e1</color>
<color name="blueGray_400">#ff94a3b8</color>
<color name="blueGray_500">#ff64748b</color>
<color name="blueGray_600">#ff475569</color>
<color name="blueGray_700">#ff334155</color>
<color name="blueGray_800">#ff1e293b</color>
<color name="blueGray_900">#ff0f172a</color>
作り方
ここの定義を元に作成します。
javascriptでパースしてandroidの変数定義を出力します。
以下のscriptを動かします。（ブラウザの開発ツールのコンソールで動きます。）
var colors = {
black: '#000',
white: '#fff',
rose: {
50: '#fff1f2',
100: '#ffe4e6',
200: '#fecdd3',
300: '#fda4af',
400: '#fb7185',
500: '#f43f5e',
600: '#e11d48',
700: '#be123c',
800: '#9f1239',
900: '#881337',
},
pink: {
50: '#fdf2f8',
100: '#fce7f3',
200: '#fbcfe8',
300: '#f9a8d4',
400: '#f472b6',
500: '#ec4899',
600: '#db2777',
700: '#be185d',
800: '#9d174d',
900: '#831843',
},
fuchsia: {
50: '#fdf4ff',
100: '#fae8ff',
200: '#f5d0fe',
300: '#f0abfc',
400: '#e879f9',
500: '#d946ef',
600: '#c026d3',
700: '#a21caf',
800: '#86198f',
900: '#701a75',
},
purple: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87',
},
violet: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
},
indigo: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
},
blue: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
lightBlue: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
cyan: {
50: '#ecfeff',
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
teal: {
50: '#f0fdfa',
100: '#ccfbf1',
200: '#99f6e4',
300: '#5eead4',
400: '#2dd4bf',
500: '#14b8a6',
600: '#0d9488',
700: '#0f766e',
800: '#115e59',
900: '#134e4a',
},
emerald: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#10b981',
600: '#059669',
700: '#047857',
800: '#065f46',
900: '#064e3b',
},
green: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
},
lime: {
50: '#f7fee7',
100: '#ecfccb',
200: '#d9f99d',
300: '#bef264',
400: '#a3e635',
500: '#84cc16',
600: '#65a30d',
700: '#4d7c0f',
800: '#3f6212',
900: '#365314',
},
yellow: {
50: '#fefce8',
100: '#fef9c3',
200: '#fef08a',
300: '#fde047',
400: '#facc15',
500: '#eab308',
600: '#ca8a04',
700: '#a16207',
800: '#854d0e',
900: '#713f12',
},
amber: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
},
orange: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#f97316',
600: '#ea580c',
700: '#c2410c',
800: '#9a3412',
900: '#7c2d12',
},
red: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
},
warmGray: {
50: '#fafaf9',
100: '#f5f5f4',
200: '#e7e5e4',
300: '#d6d3d1',
400: '#a8a29e',
500: '#78716c',
600: '#57534e',
700: '#44403c',
800: '#292524',
900: '#1c1917',
},
trueGray: {
50: '#fafafa',
100: '#f5f5f5',
200: '#e5e5e5',
300: '#d4d4d4',
400: '#a3a3a3',
500: '#737373',
600: '#525252',
700: '#404040',
800: '#262626',
900: '#171717',
},
gray: {
50: '#fafafa',
100: '#f4f4f5',
200: '#e4e4e7',
300: '#d4d4d8',
400: '#a1a1aa',
500: '#71717a',
600: '#52525b',
700: '#3f3f46',
800: '#27272a',
900: '#18181b',
},
coolGray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
},
blueGray: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
};
function Color(category, strongValue, hexValue) {
this.category = category;
this.strongValue = strongValue;
this.hexValue = hexValue;
this.getCategoryName = function() {
return this.category.charAt(0).toUpperCase() + this.category.slice(1)
};
this.strength = function() {
return this.strongValue || ''
};
this.hexForAndroid = function() {
var hex = this.hexValue.replace('#', '');
if (hex.length === 3) {
hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
}
return `ff${hex}`
}
this.asAndroidVal = function() {
return `val ${this.getCategoryName()}${this.strength()} = Color(0x${this.hexForAndroid()})`
};
this.asAndroidRes = function() {
return `<color name="${this.category}${this.strongValue ? `_${this.strength()}` : ''}">#${this.hexForAndroid()}</color>`
};
};
// val Black = Color(0xff000000)...
(function(colors) {
Object.keys(colors).forEach(function (category) {
switch (category) {
case 'black':
case 'white':
var color = new Color(category, undefined, colors[category]);
console.log(color.asAndroidVal());
break;
default:
Object.keys(colors[category]).forEach(function(strongValue) {
var color = new Color(category, strongValue, colors[category][strongValue])
console.log(color.asAndroidVal());
});
break;
}
});
})(colors);
// <color name="black">#ff000000</color>...
(function(colors) {
Object.keys(colors).forEach(function (category) {
switch (category) {
case 'black':
case 'white':
var color = new Color(category, undefined, colors[category]);
console.log(color.asAndroidRes());
break;
default:
Object.keys(colors[category]).forEach(function(strongValue) {
var color = new Color(category, strongValue, colors[category][strongValue])
console.log(color.asAndroidRes());
});
break;
}
});
})(colors);
これをコピペで実行すると、Androidの変数定義がコンソールに出力されます。
以上です。
関連する記事
Next.js + TailwindCSSのプロジェクト立ち上げ時のメモ
Next.js + Tailwind CSSのプロジェクト作成時の操作ログです。
UI ComponentにJetpackComposeを採用したアプリを開発してみました
Jetpack Composeメインのアプリ開発を行いました。アプリ内で紹介しているAvatar Componentの開発方法を紹介します。
[Jetpack Compose]プログラミング言語のシンタックスハイライト
github.com/kbiakov/CodeView-Androidを少し改造して、Jetpack Composeでコードビューを実装してみました
[Jetpack Compose]Analytics / Crashlytics / FCMを導入
FirebaseをJetpack Composeアプリに導入して、プッシュ通知を受取り対応する画面を開くようにしました。またAnalyticsやCrashlyticsも同時に導入しました。