From b2851e48a0248a8ecc27aba2f807f592ac6fe7ca Mon Sep 17 00:00:00 2001 From: Tai Sakuma Date: Mon, 4 Sep 2023 21:01:50 -0400 Subject: [PATCH] clean code --- .../__snapshots__/material-color.spec.ts.snap | 329 ++++++++++++++++++ .../__tests__/material-color.spec.ts | 23 +- src/utils/dynamic-color/index.ts | 2 +- src/utils/dynamic-color/material-color.ts | 8 +- 4 files changed, 354 insertions(+), 8 deletions(-) diff --git a/src/utils/dynamic-color/__tests__/__snapshots__/material-color.spec.ts.snap b/src/utils/dynamic-color/__tests__/__snapshots__/material-color.spec.ts.snap index 2bc6e2e..79b654d 100644 --- a/src/utils/dynamic-color/__tests__/__snapshots__/material-color.spec.ts.snap +++ b/src/utils/dynamic-color/__tests__/__snapshots__/material-color.spec.ts.snap @@ -58,3 +58,332 @@ exports[`useDynamicColors > returns the correct colors 1`] = ` "tertiary-palette-key-color": "#db7900", } `; + +exports[`useDynamicColorsHct > returns the correct colors 1`] = ` +{ + "background": Hct { + "argb": 4294507007, + "internalChroma": 5.782887097365252, + "internalHue": 254.23007904112848, + "internalTone": 98.00463144093008, + }, + "error": Hct { + "argb": 4290386458, + "internalChroma": 84.27740557298178, + "internalHue": 25.055818214141475, + "internalTone": 40.00248812068815, + }, + "error-container": Hct { + "argb": 4294957782, + "internalChroma": 13.234454405401584, + "internalHue": 23.79916793659701, + "internalTone": 89.9789231267891, + }, + "inverse-on-surface": Hct { + "argb": 4293849593, + "internalChroma": 7.414194867101687, + "internalHue": 253.03947065267846, + "internalTone": 95.13031661715617, + }, + "inverse-primary": Hct { + "argb": 4288596735, + "internalChroma": 37.18607759380727, + "internalHue": 253.4392269209713, + "internalTone": 80.02758180930664, + }, + "inverse-surface": Hct { + "argb": 4281151799, + "internalChroma": 7.348039755052786, + "internalHue": 253.88826043880863, + "internalTone": 20.1650352581582, + }, + "neutral-palette-key-color": Hct { + "argb": 4285757310, + "internalChroma": 7.474730049756462, + "internalHue": 252.7160033370452, + "internalTone": 49.91172715139082, + }, + "neutral-variant-palette-key-color": Hct { + "argb": 4285560964, + "internalChroma": 11.66441056936568, + "internalHue": 253.518331452986, + "internalTone": 50.148941881131066, + }, + "on-background": Hct { + "argb": 4279770146, + "internalChroma": 7.6382649690441555, + "internalHue": 255.94572303470926, + "internalTone": 10.108617253891556, + }, + "on-error": Hct { + "argb": 4294967295, + "internalChroma": 2.8690352036774005, + "internalHue": 209.49195947383808, + "internalTone": 100, + }, + "on-error-container": Hct { + "argb": 4282449922, + "internalChroma": 47.75361075053237, + "internalHue": 24.658029749720782, + "internalTone": 10.016770800355904, + }, + "on-primary": Hct { + "argb": 4294967295, + "internalChroma": 2.8690352036774005, + "internalHue": 209.49195947383808, + "internalTone": 100, + }, + "on-primary-container": Hct { + "argb": 4278194726, + "internalChroma": 20.82219487663626, + "internalHue": 255.14257075476212, + "internalTone": 5.1718517045296615, + }, + "on-primary-fixed": Hct { + "argb": 4278197558, + "internalChroma": 24.834944519214517, + "internalHue": 253.09732762984137, + "internalTone": 10.1458152722198, + }, + "on-primary-fixed-variant": Hct { + "argb": 4278208893, + "internalChroma": 40.87176608366732, + "internalHue": 253.80737609559577, + "internalTone": 30.02420740099906, + }, + "on-secondary": Hct { + "argb": 4294967295, + "internalChroma": 2.8690352036774005, + "internalHue": 209.49195947383808, + "internalTone": 100, + }, + "on-secondary-container": Hct { + "argb": 4280435557, + "internalChroma": 29.848376911392457, + "internalHue": 253.7358877235231, + "internalTone": 27.556400568746653, + }, + "on-secondary-fixed": Hct { + "argb": 4278197558, + "internalChroma": 24.834944519214517, + "internalHue": 253.09732762984137, + "internalTone": 10.1458152722198, + }, + "on-secondary-fixed-variant": Hct { + "argb": 4280830315, + "internalChroma": 29.812053627520267, + "internalHue": 253.11497802013886, + "internalTone": 30.1026370776791, + }, + "on-surface": Hct { + "argb": 4279770146, + "internalChroma": 7.6382649690441555, + "internalHue": 255.94572303470926, + "internalTone": 10.108617253891556, + }, + "on-surface-variant": Hct { + "argb": 4282402642, + "internalChroma": 11.402286190742394, + "internalHue": 256.44172854550817, + "internalTone": 29.92551279599261, + }, + "on-tertiary": Hct { + "argb": 4294967295, + "internalChroma": 2.8690352036774005, + "internalHue": 209.49195947383808, + "internalTone": 100, + }, + "on-tertiary-container": Hct { + "argb": 4280290304, + "internalChroma": 19.20624922631366, + "internalHue": 56.8706838741712, + "internalTone": 5.148968813486434, + }, + "on-tertiary-fixed": Hct { + "argb": 4281210112, + "internalChroma": 22.913913670877392, + "internalHue": 59.29033445341395, + "internalTone": 9.931727958841936, + }, + "on-tertiary-fixed-variant": Hct { + "argb": 4285348096, + "internalChroma": 38.270376061040864, + "internalHue": 58.55002070739536, + "internalTone": 29.855850283067326, + }, + "outline": Hct { + "argb": 4285560963, + "internalChroma": 11.122398236746955, + "internalHue": 251.18180560991004, + "internalTone": 50.11652442038704, + }, + "outline-variant": Hct { + "argb": 4290758612, + "internalChroma": 11.53769765472759, + "internalHue": 252.5502919534681, + "internalTone": 79.99739681273131, + }, + "primary": Hct { + "argb": 4278215076, + "internalChroma": 48.33836572079727, + "internalHue": 254.0404285721225, + "internalTone": 39.9647226078411, + }, + "primary-container": Hct { + "argb": 4282164223, + "internalChroma": 59.0053708678909, + "internalHue": 253.640844810992, + "internalTone": 65.25917552941185, + }, + "primary-fixed": Hct { + "argb": 4291945727, + "internalChroma": 20.64342844985456, + "internalHue": 253.51997372711435, + "internalTone": 89.98090008988925, + }, + "primary-fixed-dim": Hct { + "argb": 4288596735, + "internalChroma": 37.18607759380727, + "internalHue": 253.4392269209713, + "internalTone": 80.02758180930664, + }, + "primary-palette-key-color": Hct { + "argb": 4278423017, + "internalChroma": 59.72710724383374, + "internalHue": 253.5914684769191, + "internalTone": 57.028919294944956, + }, + "scrim": Hct { + "argb": 4278190080, + "internalChroma": 0, + "internalHue": 0, + "internalTone": 0, + }, + "secondary": Hct { + "argb": 4282474628, + "internalChroma": 29.955287027219693, + "internalHue": 254.27814993873622, + "internalTone": 39.84115218870693, + }, + "secondary-container": Hct { + "argb": 4290697983, + "internalChroma": 27.156821089278843, + "internalHue": 253.58013246510592, + "internalTone": 86.1612017361638, + }, + "secondary-fixed": Hct { + "argb": 4291945727, + "internalChroma": 20.64342844985456, + "internalHue": 253.51997372711435, + "internalTone": 89.98090008988925, + }, + "secondary-fixed-dim": Hct { + "argb": 4289317362, + "internalChroma": 30.01247837613234, + "internalHue": 253.67859136989472, + "internalTone": 79.96488213548392, + }, + "secondary-palette-key-color": Hct { + "argb": 4284119454, + "internalChroma": 29.854410229557516, + "internalHue": 253.8544030342028, + "internalTone": 49.87838963119367, + }, + "shadow": Hct { + "argb": 4278190080, + "internalChroma": 0, + "internalHue": 0, + "internalTone": 0, + }, + "surface": Hct { + "argb": 4294507007, + "internalChroma": 5.782887097365252, + "internalHue": 254.23007904112848, + "internalTone": 98.00463144093008, + }, + "surface-bright": Hct { + "argb": 4294507007, + "internalChroma": 5.782887097365252, + "internalHue": 254.23007904112848, + "internalTone": 98.00463144093008, + }, + "surface-container": Hct { + "argb": 4293652214, + "internalChroma": 7.416366897806944, + "internalHue": 253.2014771988429, + "internalTone": 94.08315204788983, + }, + "surface-container-high": Hct { + "argb": 4293257456, + "internalChroma": 7.421300508313794, + "internalHue": 253.52843281648867, + "internalTone": 91.98130347791135, + }, + "surface-container-highest": Hct { + "argb": 4292862698, + "internalChroma": 7.427056461079774, + "internalHue": 253.8593574894516, + "internalTone": 89.86918375703816, + }, + "surface-container-low": Hct { + "argb": 4294046716, + "internalChroma": 7.632286462326692, + "internalHue": 259.60728576445547, + "internalTone": 95.92630375247313, + }, + "surface-container-lowest": Hct { + "argb": 4294967295, + "internalChroma": 2.8690352036774005, + "internalHue": 209.49195947383808, + "internalTone": 100, + }, + "surface-dim": Hct { + "argb": 4292336354, + "internalChroma": 7.436090849950321, + "internalHue": 254.30686071593595, + "internalTone": 87.03651113758505, + }, + "surface-tint": Hct { + "argb": 4278215076, + "internalChroma": 48.33836572079727, + "internalHue": 254.0404285721225, + "internalTone": 39.9647226078411, + }, + "surface-variant": Hct { + "argb": 4292600816, + "internalChroma": 11.38361380140088, + "internalHue": 251.5739049725983, + "internalTone": 89.99358884418842, + }, + "tertiary": Hct { + "argb": 4287646976, + "internalChroma": 45.462470386169805, + "internalHue": 58.42623266506773, + "internalTone": 39.976883378533856, + }, + "tertiary-container": Hct { + "argb": 4293559573, + "internalChroma": 58.67054388358007, + "internalHue": 59.21208571633588, + "internalTone": 65.2170616608435, + }, + "tertiary-fixed": Hct { + "argb": 4294958274, + "internalChroma": 15.151818811795314, + "internalHue": 59.348592385913975, + "internalTone": 90.01763382779387, + }, + "tertiary-fixed-dim": Hct { + "argb": 4294948731, + "internalChroma": 35.30552710391083, + "internalHue": 58.879567452569596, + "internalTone": 79.92979775126585, + }, + "tertiary-palette-key-color": Hct { + "argb": 4292573440, + "internalChroma": 58.73805179607165, + "internalHue": 58.9929361549152, + "internalTone": 60.546872235591536, + }, +} +`; diff --git a/src/utils/dynamic-color/__tests__/material-color.spec.ts b/src/utils/dynamic-color/__tests__/material-color.spec.ts index 2bf9db2..0937b74 100644 --- a/src/utils/dynamic-color/__tests__/material-color.spec.ts +++ b/src/utils/dynamic-color/__tests__/material-color.spec.ts @@ -1,12 +1,29 @@ import { describe, it, expect } from "vitest"; -import { ref } from "vue"; -import { useDynamicColors } from ".."; +import { ref, shallowRef } from "vue"; +import { useDynamicColors, useDynamicColorsHct, hctFromHex } from ".."; describe("useDynamicColors", () => { it("returns the correct colors", () => { - const options = ref({ sourceColor: "#2196F3", dark: false, contrastLevel: 0.0 }); + const options = ref({ + sourceColor: "#2196F3", + dark: false, + contrastLevel: 0.0, + }); const { colors } = useDynamicColors(options); expect(colors.value).toHaveProperty("primary"); expect(colors.value).toMatchSnapshot(); }); }); + +describe("useDynamicColorsHct", () => { + it("returns the correct colors", () => { + const options = shallowRef({ + sourceColorHct: hctFromHex("#2196F3"), + dark: false, + contrastLevel: 0.0, + }); + const { colorsHct } = useDynamicColorsHct(options); + expect(colorsHct.value).toHaveProperty("primary"); + expect(colorsHct.value).toMatchSnapshot(); + }); +}); diff --git a/src/utils/dynamic-color/index.ts b/src/utils/dynamic-color/index.ts index 8fcc094..1498f69 100644 --- a/src/utils/dynamic-color/index.ts +++ b/src/utils/dynamic-color/index.ts @@ -1 +1 @@ -export { useDynamicColors } from "./material-color"; +export * from "./material-color"; diff --git a/src/utils/dynamic-color/material-color.ts b/src/utils/dynamic-color/material-color.ts index 630ceb0..ef535fb 100644 --- a/src/utils/dynamic-color/material-color.ts +++ b/src/utils/dynamic-color/material-color.ts @@ -38,11 +38,11 @@ interface Options { schemeName?: SchemeName; } -interface OptionsHex extends Options { +export interface OptionsHex extends Options { sourceColor?: string; // e.g., "#6750A4" } -interface OptionsHct extends Options { +export interface OptionsHct extends Options { sourceColorHct?: Hct; } @@ -92,11 +92,11 @@ export function useDynamicColorsHct(options?: MaybeRef) { return { colorsHct, scheme }; } -function hctFromHex(hex: string) { +export function hctFromHex(hex: string) { return Hct.fromInt(argbFromHex(hex)); } -function hexFromHct(hct: Hct) { +export function hexFromHct(hct: Hct) { return hexFromArgb(hct.toInt()); }