Add TailwindCSS colors (and script to update them)

Project.toml

@@ -1,6 +1,6 @@
 name = "NamedColors"
 uuid = "51fcb6bd-ecd8-522c-95bc-4099d1d03463"
-version = "0.2.1"
+version = "0.2.2"
 
 [deps]
 ColorTypes = "3da002f7-5984-5a60-b8a6-cbb66c0b333f"

README.md

@@ -80,6 +80,8 @@ Dict{String,ColorTypes.RGB24} with 949 entries:
  - [NBS](http://people.csail.mit.edu/jaffer/Color/Dictionaries#nbs-anthus) National Bureau of Statistics. 275 colors
  - [Crayola Crayons](https://en.wikipedia.org/wiki/List_of_Crayola_crayon_colors)  not the full set, but 197 colors
  - [Winsor Newton Water Colors](http://people.csail.mit.edu/jaffer/Color/Dictionaries#winsor-newton) 300 colors, based on the paints of [Winsor Newton](www.winsornewton.com/)
+ - [Paul Tol](https://personal.sron.nl/~pault/) 72 colors from Paul Tol
+ - [Tailwind](https://tailwindcss.com/docs/customizing-colors) 242 colors from a highly popular CSS-framework.
 
 # Futher Reading
 Naming colors is actually something experts exist in.

data/tailwind.txt

@@ -0,0 +1,247 @@
+; "tailwind.txt" color dictionary
+; The colors from Tailwind CSS, https://tailwindcss.com/docs/customizing-colors.
+;
+; Transcribed to NamedColors.jl by John Muchovej (jmuchovej).
+;
+amber.100      #fef3c7
+amber.200      #fde68a
+amber.300      #fcd34d
+amber.400      #fbbf24
+amber.50       #fffbeb
+amber.500      #f59e0b
+amber.600      #d97706
+amber.700      #b45309
+amber.800      #92400e
+amber.900      #78350f
+amber.950      #451a03
+blue.100       #dbeafe
+blue.200       #bfdbfe
+blue.300       #93c5fd
+blue.400       #60a5fa
+blue.50        #eff6ff
+blue.500       #3b82f6
+blue.600       #2563eb
+blue.700       #1d4ed8
+blue.800       #1e40af
+blue.900       #1e3a8a
+blue.950       #172554
+cyan.100       #cffafe
+cyan.200       #a5f3fc
+cyan.300       #67e8f9
+cyan.400       #22d3ee
+cyan.50        #ecfeff
+cyan.500       #06b6d4
+cyan.600       #0891b2
+cyan.700       #0e7490
+cyan.800       #155e75
+cyan.900       #164e63
+cyan.950       #083344
+emerald.100    #d1fae5
+emerald.200    #a7f3d0
+emerald.300    #6ee7b7
+emerald.400    #34d399
+emerald.50     #ecfdf5
+emerald.500    #10b981
+emerald.600    #059669
+emerald.700    #047857
+emerald.800    #065f46
+emerald.900    #064e3b
+emerald.950    #022c22
+fuchsia.100    #fae8ff
+fuchsia.200    #f5d0fe
+fuchsia.300    #f0abfc
+fuchsia.400    #e879f9
+fuchsia.50     #fdf4ff
+fuchsia.500    #d946ef
+fuchsia.600    #c026d3
+fuchsia.700    #a21caf
+fuchsia.800    #86198f
+fuchsia.900    #701a75
+fuchsia.950    #4a044e
+gray.100       #f3f4f6
+gray.200       #e5e7eb
+gray.300       #d1d5db
+gray.400       #9ca3af
+gray.50        #f9fafb
+gray.500       #6b7280
+gray.600       #4b5563
+gray.700       #374151
+gray.800       #1f2937
+gray.900       #111827
+gray.950       #030712
+green.100      #dcfce7
+green.200      #bbf7d0
+green.300      #86efac
+green.400      #4ade80
+green.50       #f0fdf4
+green.500      #22c55e
+green.600      #16a34a
+green.700      #15803d
+green.800      #166534
+green.900      #14532d
+green.950      #052e16
+indigo.100     #e0e7ff
+indigo.200     #c7d2fe
+indigo.300     #a5b4fc
+indigo.400     #818cf8
+indigo.50      #eef2ff
+indigo.500     #6366f1
+indigo.600     #4f46e5
+indigo.700     #4338ca
+indigo.800     #3730a3
+indigo.900     #312e81
+indigo.950     #1e1b4b
+lime.100       #ecfccb
+lime.200       #d9f99d
+lime.300       #bef264
+lime.400       #a3e635
+lime.50        #f7fee7
+lime.500       #84cc16
+lime.600       #65a30d
+lime.700       #4d7c0f
+lime.800       #3f6212
+lime.900       #365314
+lime.950       #1a2e05
+neutral.100    #f5f5f5
+neutral.200    #e5e5e5
+neutral.300    #d4d4d4
+neutral.400    #a3a3a3
+neutral.50     #fafafa
+neutral.500    #737373
+neutral.600    #525252
+neutral.700    #404040
+neutral.800    #262626
+neutral.900    #171717
+neutral.950    #0a0a0a
+orange.100     #ffedd5
+orange.200     #fed7aa
+orange.300     #fdba74
+orange.400     #fb923c
+orange.50      #fff7ed
+orange.500     #f97316
+orange.600     #ea580c
+orange.700     #c2410c
+orange.800     #9a3412
+orange.900     #7c2d12
+orange.950     #431407
+pink.100       #fce7f3
+pink.200       #fbcfe8
+pink.300       #f9a8d4
+pink.400       #f472b6
+pink.50        #fdf2f8
+pink.500       #ec4899
+pink.600       #db2777
+pink.700       #be185d
+pink.800       #9d174d
+pink.900       #831843
+pink.950       #500724
+purple.100     #f3e8ff
+purple.200     #e9d5ff
+purple.300     #d8b4fe
+purple.400     #c084fc
+purple.50      #faf5ff
+purple.500     #a855f7
+purple.600     #9333ea
+purple.700     #7e22ce
+purple.800     #6b21a8
+purple.900     #581c87
+purple.950     #3b0764
+red.100        #fee2e2
+red.200        #fecaca
+red.300        #fca5a5
+red.400        #f87171
+red.50         #fef2f2
+red.500        #ef4444
+red.600        #dc2626
+red.700        #b91c1c
+red.800        #991b1b
+red.900        #7f1d1d
+red.950        #450a0a
+rose.100       #ffe4e6
+rose.200       #fecdd3
+rose.300       #fda4af
+rose.400       #fb7185
+rose.50        #fff1f2
+rose.500       #f43f5e
+rose.600       #e11d48
+rose.700       #be123c
+rose.800       #9f1239
+rose.900       #881337
+rose.950       #4c0519
+sky.100        #e0f2fe
+sky.200        #bae6fd
+sky.300        #7dd3fc
+sky.400        #38bdf8
+sky.50         #f0f9ff
+sky.500        #0ea5e9
+sky.600        #0284c7
+sky.700        #0369a1
+sky.800        #075985
+sky.900        #0c4a6e
+sky.950        #082f49
+slate.100      #f1f5f9
+slate.200      #e2e8f0
+slate.300      #cbd5e1
+slate.400      #94a3b8
+slate.50       #f8fafc
+slate.500      #64748b
+slate.600      #475569
+slate.700      #334155
+slate.800      #1e293b
+slate.900      #0f172a
+slate.950      #020617
+stone.100      #f5f5f4
+stone.200      #e7e5e4
+stone.300      #d6d3d1
+stone.400      #a8a29e
+stone.50       #fafaf9
+stone.500      #78716c
+stone.600      #57534e
+stone.700      #44403c
+stone.800      #292524
+stone.900      #1c1917
+stone.950      #0c0a09
+teal.100       #ccfbf1
+teal.200       #99f6e4
+teal.300       #5eead4
+teal.400       #2dd4bf
+teal.50        #f0fdfa
+teal.500       #14b8a6
+teal.600       #0d9488
+teal.700       #0f766e
+teal.800       #115e59
+teal.900       #134e4a
+teal.950       #042f2e
+violet.100     #ede9fe
+violet.200     #ddd6fe
+violet.300     #c4b5fd
+violet.400     #a78bfa
+violet.50      #f5f3ff
+violet.500     #8b5cf6
+violet.600     #7c3aed
+violet.700     #6d28d9
+violet.800     #5b21b6
+violet.900     #4c1d95
+violet.950     #2e1065
+yellow.100     #fef9c3
+yellow.200     #fef08a
+yellow.300     #fde047
+yellow.400     #facc15
+yellow.50      #fefce8
+yellow.500     #eab308
+yellow.600     #ca8a04
+yellow.700     #a16207
+yellow.800     #854d0e
+yellow.900     #713f12
+yellow.950     #422006
+zinc.100       #f4f4f5
+zinc.200       #e4e4e7
+zinc.300       #d4d4d8
+zinc.400       #a1a1aa
+zinc.50        #fafafa
+zinc.500       #71717a
+zinc.600       #52525b
+zinc.700       #3f3f46
+zinc.800       #27272a
+zinc.900       #18181b
+zinc.950       #09090b

scripts/Project.toml

@@ -0,0 +1,7 @@
+[deps]
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+NodeJS = "2bd173c7-0d6d-553b-b6af-13a54713934c"
+
+[compat]
+NodeJS = "2"
+JSON = "0.21"

scripts/update-tailwind.jl

@@ -0,0 +1,61 @@
+#!/usr/bin/env julia
+"""A script to extract and dump the colors from TailwindCSS.
+
+The source data for the color paletee is on GitHub: https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js
+
+The color palette can be viewed here: https://tailwindcss.com/docs/customizing-colors
+
+For the original JavaScript implementation that retrieves the TailwindCSS colors from
+  their JavaScript library, check the following GitHub Gist.
+  https://gist.github.com/jmuchovej/e8470f3b01420cac006c428861ddbd9b
+
+Last updated on 06 Jun 2023.
+"""
+using NodeJS
+using JSON
+
+scriptsdir = dirname(@__FILE__)
+cd(scriptsdir)
+
+run(`npm install -g tailwindcss`)
+run(`npm install -g lodash`)
+
+datafile = joinpath(dirname(@__FILE__), "..", "data", "tailwind.txt")
+
+const deprecatedcolors = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"]
+
+colors = read(`node -e "console.log(JSON.stringify(require('tailwindcss/colors')))"`, String)
+colors = JSON.parse(colors)
+
+colors = filter(color -> !in(first(color), deprecatedcolors), colors)
+colors = filter(color -> !isa(last(color), String), colors)
+
+colorlevels = Dict{String, String}()
+for (color, levels) in colors
+    for (level, hex) in levels
+        colorlevels["$(color).$(level)"] = hex
+    end
+end
+# Sorting doesn't technically order correctly because `amber.50` < `amber.100`, but it
+#   shouldn't _really_ matter unless the `data/tailwind.txt` file __needs__ to match the
+#   sorting of TailwindCSS's color page (unlikely).
+colorlevels = sort(colorlevels)
+
+max_charlen = maximum(length, keys(colorlevels))
+
+#! The output colors are not sorted as they are on TailwindCSS's website. The incoming
+#!   JSON is sorted accordingly, but it's unclear why `JSON.parse` reorders the keys.
+tailwind = open(datafile, "w")
+
+write(tailwind, """
+; "tailwind.txt" color dictionary
+; The colors from Tailwind CSS, https://tailwindcss.com/docs/customizing-colors.
+;
+; Transcribed to NamedColors.jl by John Muchovej (jmuchovej).
+;
+""")
+
+for (colorlevel, hex) in colorlevels
+    write(tailwind, "$(rpad(colorlevel, max_charlen, " "))    $(hex)\n")
+end
+close(tailwind)

src/NamedColors.jl

@@ -3,7 +3,7 @@ using ColorTypes
 using REPL: levsort
 import Colors: @colorant_str
 
-export load_xkcd, load_resene, load_nbs, load_x11_style, load_winsor_newton, load_x11, load_css3, load_crayola, load_paul_tol, ALL_COLORS, @colorant_str, UnknownColorError, named_color
+export load_tailwind, load_xkcd, load_resene, load_nbs, load_x11_style, load_winsor_newton, load_x11, load_css3, load_crayola, load_paul_tol, ALL_COLORS, @colorant_str, UnknownColorError, named_color
 
 include("loading.jl")
 
@@ -15,9 +15,10 @@ This is the initialised for the globel const ALL_COLORS, used by "@colorant"
 """
 function load_all_colors(load_functions = (
     load_resene,
+    load_tailwind,
     load_xkcd,
     load_nbs,
-	load_winsor_newton,
+    load_winsor_newton,
     load_x11,
     load_crayola,
     load_css3,

src/loading.jl

@@ -83,6 +83,19 @@ end
 
 ########## Specific formats for specific instances
 
+"""
+Load the color list from [TailwindCSS](https://tailwindcss.org/docs/customizing-colors).
+These colors are suitable for use with (modern) monitors.
+"""
+function load_tailwind()
+    linefields = []
+    for line in eachline(datafile("tailwind.txt"))
+        startswith(line, ";") && continue
+        push!(linefields, split(line, " "; keepempty=false))
+    end
+	Dict((name => parse_hexcode(code)) for (name,code) in linefields)
+end
+
 """
 Load the color list from the [XKCD color survey](https://blog.xkcd.com/2010/05/03/color-survey-results/).
 These colors are suitable for use with (modern) monitors

test/loading.jl

@@ -1,4 +1,10 @@
 
+@testset "tailwind" begin
+  tailwind = load_tailwind()
+	@test length(tailwind) == 242
+	@test tailwind["sky.400"] == reinterpret(RGB24, 0x38bdf8)
+end
+
 @testset "xkcd" begin
 	xkcd = load_xkcd()
 	@test length(xkcd) == 949