Skip to content

Commit

Permalink
clean code
Browse files Browse the repository at this point in the history
  • Loading branch information
@TaiSakuma
TaiSakuma committed Sep 5, 2023
1 parent 4cf0da9 commit b2851e4
Show file tree
Hide file tree
Showing 4 changed files with 354 additions and 8 deletions.
329 changes: 329 additions & 0 deletions src/utils/dynamic-color/__tests__/__snapshots__/material-color.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}
`;
23 changes: 20 additions & 3 deletions src/utils/dynamic-color/__tests__/material-color.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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();
});
});
2 changes: 1 addition & 1 deletion src/utils/dynamic-color/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { useDynamicColors } from "./material-color";
export * from "./material-color";
8 changes: 4 additions & 4 deletions src/utils/dynamic-color/material-color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -92,11 +92,11 @@ export function useDynamicColorsHct(options?: MaybeRef<OptionsHct>) {
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());
}

Expand Down

0 comments on commit b2851e4

Please sign in to comment.