Switch to hsluv

app/soapbox/normalizers/soapbox/soapbox_config.ts

@@ -20,70 +20,70 @@ import type {
 } from 'soapbox/types/soapbox';
 
 const SEED_COLOR_DELTAS: Record<string, HSLDelta> = {
-  gray: [ 5.662650602409599, -75.85714285714285, 22.74509803921567 ],
+  gray: [ 5.640168899709693, -71.25227844367963, 42.13578614093887 ],
   primary: [ 0, 0, 0 ],
-  secondary: [ 100.66265060240963, 17, 3.137254901960773 ],
-  success: [ -102.25145982703822, -12.437229437229433, -15.490196078431374 ],
-  danger: [ -244.33734939759037, 1.2364532019704342, -0.5882352941176521 ],
+  secondary: [ -264.41907148380454, 3.47034415017923, 16.72498531826924 ],
+  success: [ -132.16963284744344, 22.729414313887375, 27.93609003256976 ],
+  danger: [ -254.94219506629216, -0.22042936848366423, 12.675221477923778 ],
 };
 
 const PALETTE_DELTAS: Record<string, HSLPaletteDelta> = {
   gray: {
-    '50': [ -249.99999999999997, -7.142857142857152, 16.47058823529413 ],
-    '100': [ 50.00000000000003, 3.968253968253923, 14.705882352941188 ],
-    '200': [ -9.999999999999972, -1.2605042016806918, 13.137254901960802 ],
-    '300': [ -9.999999999999972, -1.2605042016807007, 9.803921568627459 ],
-    '400': [ 10.000000000000028, -1.2605042016807042, 6.47058823529413 ],
+    '50': [ 0.22937683270356501, -1.5864743831017971, 15.567851989991112 ],
+    '100': [ 34.311838173845615, -1.2141376862436761, 13.938662622153828 ],
+    '200': [ -6.726925619450583, -1.3474032449266322, 12.477917572764795 ],
+    '300': [ -6.803051539716591, -1.1039007790831639, 9.366828937389187 ],
+    '400': [ 7.251025534431051, -0.7564434934117528, 6.308652406934627 ],
     '500': [ 0, 0, 0 ],
-    '600': [ 1.2500000000000853, -0.2463054187192224, -29.019607843137244 ],
-    '700': [ 2.0000000000000284, 2.2029372496662143, -41.56862745098039 ],
-    '800': [ -2.4999999999999716, 29.220779220779214, -66.27450980392156 ],
-    '900': [ -2.2580645161289965, 42.063492063492056, -71.17647058823528 ],
+    '600': [ 0.528273854081192, 5.024155622767128, -28.942510078414657 ],
+    '700': [ 0.753585022750201, 9.244324145778112, -42.27720854061048 ],
+    '800': [ -3.38885080806142, 38.377108591613, -72.05591766747844 ],
+    '900': [ -3.6531980550540197, 49.0899586185372, -77.8873736703074 ],
   },
   primary: {
-    '50': [ -18.454996456413852, 17, 35.88235294117647 ],
-    '100': [ -17.88573649436458, 17, 33.13725490196078 ],
-    '200': [ -16.337349397590344, 13.491228070175453, 28.039215686274495 ],
-    '300': [ -9.883567884985325, 6.473684210526329, 13.13725490196078 ],
-    '400': [ -5.604955031393189, 0.5294117647058698, 5.882352941176457 ],
+    '50': [ -12.328127784192901, -67.24292824683431, 53.24283923089697 ],
+    '100': [ -11.411261541571491, -62.439158441446395, 49.48672631248416 ],
+    '200': [ -9.416727076537427, -53.876459261840154, 42.38848417160097 ],
+    '300': [ -3.767637832203661, -27.858121091970574, 19.530562906640746 ],
+    '400': [ -1.6746167286863738, -15.676431605871016, 7.808121295055564 ],
     '500': [ 0, 0, 0 ],
-    '600': [ 0.1831985476150919, -25.063492063492077, -10.196078431372555 ],
-    '700': [ 0, -29.451612903225815, -30.3921568627451 ],
-    '800': [ -0.1994183631076396, -29.29629629629629, -39.6078431372549 ],
-    '900': [ 3.4045860862806023, -33.79365079365079, -48.43137254901961 ],
+    '600': [ -0.003909458369605545, 2.5576939049011287, -7.724998167194286 ],
+    '700': [ 0.11738125411591227, -5.255248276711185, -21.911667783093854 ],
+    '800': [ 0.1328770612169592, -9.311121602273253, -29.182323283856825 ],
+    '900': [ 1.9869708446556729, -22.162319825142433, -35.75158752936853 ],
   },
   // @ts-ignore
   secondary: {
-    '100': [ -2.419354838709694, 0, 30.000000000000007 ],
-    '200': [ -2.692307692307679, 0, 20.7843137254902 ],
-    '300': [ -2.6978417266187193, 0, 8.823529411764703 ],
-    '400': [ 0, 0, 4.705882352941181 ],
+    '100': [ 347.880182793043, -68.47214895215055, 32.867057572173536 ],
+    '200': [ 350.05034589809117, -52.65112125949534, 21.087557709426832 ],
+    '300': [ 354.031215223099, -23.94959581070235, 7.6397685025461755 ],
+    '400': [ -1.739008662838304, -13.175216574546795, 3.6494520365984613 ],
     '500': [ 0, 0, 0 ],
-    '600': [ 0.326086956521749, 0, 0 ],
+    '600': [ 0.27516723567895696, -0.06197773826696107, -0.02163844988602648 ],
   },
   success: {
-    '50': [ -3.624351109013645, 5.907817672523635, 51.372549019607845 ],
-    '100': [ -1.4608895705521832, 13.647755753018956, 47.25490196078431 ],
-    '200': [ -1.0858895705521547, 8.384597858282106, 39.803921568627445 ],
-    '300': [ -0.37160385626643233, 6.079565203652791, 27.84313725490196 ],
-    '400': [ -0.19399767866025286, -1.403892058097668, 12.74509803921569 ],
+    '50': [ 6.272318640784931, -87.82006472610146, 27.923961374235645 ],
+    '100': [ 7.515812986311346, -76.24726912121697, 26.015113902196305 ],
+    '200': [ 6.682412508442582, -58.98301894933322, 22.183456696291486 ],
+    '300': [ 5.042191328515884, -32.36248565174746, 16.65634548562005 ],
+    '400': [ 2.176996549793728, -9.407758928036145, 8.956568283122635 ],
     '500': [ 0, 0, 0 ],
-    '600': [ 0.041770003915928555, 5.653445653445644, -9.019607843137258 ],
-    '700': [ 0.34401697150391897, 1.2493099741421787, -16.07843137254902 ],
-    '800': [ 0.6989205560301173, -6.335128286347796, -21.1764705882353 ],
-    '900': [ 1.7236342389716413, -9.397722019081243, -25.098039215686278 ],
+    '600': [ -0.372610730302938, 1.0253878418950535, -11.388518702503106 ],
+    '700': [ 0.5145707207430519, -0.9085081381356162, -23.343759036504466 ],
+    '800': [ 1.8284285283559427, -4.840289897227791, -32.88658597113674 ],
+    '900': [ 3.143760008542955, -7.518152045294627, -39.533036861110965 ],
   },
   danger: {
-    '50': [ 0, 1.477832512315345, 37.05882352941176 ],
-    '100': [ 0, 9.096880131362923, 33.921568627450974 ],
-    '200': [ 0, 12.059843094325885, 29.2156862745098 ],
-    '300': [ 0, 9.311933894803772, 21.568627450980394 ],
-    '400': [ 0, 6.367573643667157, 10.588235294117645 ],
+    '50': [ -0.12913498368561527, -70.44886946123935, 41.43265384536481 ],
+    '100': [ -0.0488135435926349, -67.15618734554207, 37.13987057891991 ],
+    '200': [ -0.02122364058786097, -61.17995574356704, 30.822488851023962 ],
+    '300': [ -0.008445121602528971, -49.40898982365067, 21.29509643080908 ],
+    '400': [ -0.0021433776363899426, -25.474902071013723, 9.156088139819957 ],
     '500': [ 0, 0, 0 ],
-    '600': [ 0, -12.014230979748206, -9.607843137254903 ],
-    '700': [ 0, -10.527533014176996, -18.431372549019613 ],
-    '800': [ 0, -14.236453201970434, -24.90196078431373 ],
-    '900': [ 0, -21.415940381457617, -29.6078431372549 ],
+    '600': [ 0.0006646718484049075, 14.619377779600981, -7.0385269603369665 ],
+    '700': [ 0.0007147927161721412, 15.964147857357688, -15.008669041883302 ],
+    '800': [ 0.0005467342060985203, 11.610574809571574, -21.760068390290982 ],
+    '900': [ 0.00015621259826481548, 2.9773216728644343, -26.91230815141926 ],
   },
 };
 
@@ -188,13 +188,15 @@ const normalizeAccentColor = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap
 };
 
 const normalizeColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
-  const brandColor = convert(soapboxConfig.get('brandColor') || '#0482d8').hsl;
+  const hsluv = convert(soapboxConfig.get('brandColor') || '#0482d8').hsluv;
+  const brandColor = { h: hsluv.hu, s: hsluv.s, l: hsluv.l };
 
   const colors = Object.keys(SEED_COLOR_DELTAS).reduce((acc, curr) => {
     const seed = hslShift(brandColor, SEED_COLOR_DELTAS[curr]);
     const hslPalette = generatePalette(seed, PALETTE_DELTAS[curr]);
     const hexColors = Object.keys(hslPalette).reduce((acc, curr) => {
-      const hex = convert((hslPalette as any)[curr as any]).hex;
+      const hsl = (hslPalette as any)[curr as any];
+      const hex = convert({ hu: hsl.h, s: hsl.s, l: hsl.l }).hex;
       acc[curr] = hex;
       return acc;
     }, {} as any);

app/soapbox/utils/tailwind.ts

@@ -1,3 +1,4 @@
+import { convert } from 'chromatism';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
 import tintify from 'soapbox/utils/colors';
@@ -54,3 +55,11 @@ export const toTailwind = (soapboxConfig: SoapboxConfig): SoapboxConfig => {
 
   return soapboxConfig.set('colors', legacyColors.mergeDeep(colors));
 };
+
+export const convertPalette = (palette: TailwindColorPalette, type: string) => {
+  return Object.keys(palette).reduce((acc, curr) => {
+    // @ts-ignore
+    acc[curr] = convert(palette[curr])[type];
+    return acc;
+  }, {} as any);
+};