From 6f9de037edcd4015e48ce4e86b272a7e5ed7da3a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 10 Sep 2022 15:55:54 -0500 Subject: [PATCH] Switch to hsluv --- .../normalizers/soapbox/soapbox_config.ts | 96 ++++++++++--------- app/soapbox/utils/tailwind.ts | 9 ++ 2 files changed, 58 insertions(+), 47 deletions(-) diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index 3794aedd9..f62c3521e 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -20,70 +20,70 @@ import type { } from 'soapbox/types/soapbox'; const SEED_COLOR_DELTAS: Record = { - 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 = { 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); diff --git a/app/soapbox/utils/tailwind.ts b/app/soapbox/utils/tailwind.ts index 3315a7209..67911d3ae 100644 --- a/app/soapbox/utils/tailwind.ts +++ b/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); +}; \ No newline at end of file