@sil/sass-utils
Version:
Sass Utilities
239 lines • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const color_1 = require("@sil/color");
const createColorSet_1 = require("./createColorSet");
describe("Create Color Set", () => {
const baseColors = {
dark: "#111111",
light: "#fafafa",
primary: "#ff0000",
secondary: "#00ff00",
tertiary: "#3a5a6a",
};
const shades = [50];
const expectedDefault = {
dark: (0, color_1.toHSLA)(baseColors.dark),
"dark-text": (0, color_1.toHSLA)(baseColors.light),
"dark-50": {
h: 0,
s: 0,
l: 53,
a: 1,
},
"dark-50-text": (0, color_1.toHSLA)(baseColors.dark),
"dark-h": (0, color_1.toHSLA)(baseColors.dark).h,
"dark-s": (0, color_1.toHSLA)(baseColors.dark).s,
"dark-l": (0, color_1.toHSLA)(baseColors.dark).l,
"dark-a": (0, color_1.toHSLA)(baseColors.dark).a,
background: (0, color_1.toHSLA)(baseColors.dark),
"background-text": (0, color_1.toHSLA)(baseColors.light),
"background-50": {
h: 0,
s: 0,
l: 53,
a: 1,
},
"background-50-text": (0, color_1.toHSLA)(baseColors.dark),
"background-h": (0, color_1.toHSLA)(baseColors.dark).h,
"background-s": (0, color_1.toHSLA)(baseColors.dark).s,
"background-l": (0, color_1.toHSLA)(baseColors.dark).l,
"background-a": (0, color_1.toHSLA)(baseColors.dark).a,
light: (0, color_1.toHSLA)(baseColors.light),
"light-text": (0, color_1.toHSLA)(baseColors.dark),
"light-50": {
h: 0,
s: 0,
l: 53,
a: 1,
},
"light-50-text": (0, color_1.toHSLA)(baseColors.dark),
"light-h": (0, color_1.toHSLA)(baseColors.light).h,
"light-s": (0, color_1.toHSLA)(baseColors.light).s,
"light-l": (0, color_1.toHSLA)(baseColors.light).l,
"light-a": (0, color_1.toHSLA)(baseColors.light).a,
foreground: (0, color_1.toHSLA)(baseColors.light),
"foreground-text": (0, color_1.toHSLA)(baseColors.dark),
"foreground-50": {
h: 0,
s: 0,
l: 53,
a: 1,
},
"foreground-50-text": (0, color_1.toHSLA)(baseColors.dark),
"foreground-h": (0, color_1.toHSLA)(baseColors.light).h,
"foreground-s": (0, color_1.toHSLA)(baseColors.light).s,
"foreground-l": (0, color_1.toHSLA)(baseColors.light).l,
"foreground-a": (0, color_1.toHSLA)(baseColors.light).a,
primary: (0, color_1.toHSLA)(baseColors.primary),
"primary-text": (0, color_1.toHSLA)(baseColors.dark),
"primary-50": {
h: 0,
s: 35,
l: 29,
a: 1,
},
"primary-50-text": (0, color_1.toHSLA)(baseColors.light),
"primary-h": (0, color_1.toHSLA)(baseColors.primary).h,
"primary-s": (0, color_1.toHSLA)(baseColors.primary).s,
"primary-l": (0, color_1.toHSLA)(baseColors.primary).l,
"primary-a": (0, color_1.toHSLA)(baseColors.primary).a,
secondary: (0, color_1.toHSLA)(baseColors.secondary),
"secondary-text": (0, color_1.toHSLA)(baseColors.dark),
"secondary-h": (0, color_1.toHSLA)(baseColors.secondary).h,
"secondary-s": (0, color_1.toHSLA)(baseColors.secondary).s,
"secondary-l": (0, color_1.toHSLA)(baseColors.secondary).l,
"secondary-a": (0, color_1.toHSLA)(baseColors.secondary).a,
"secondary-50": {
h: 120,
s: 35,
l: 29,
a: 1,
},
"secondary-50-text": (0, color_1.toHSLA)(baseColors.light),
tertiary: (0, color_1.toHSLA)(baseColors.tertiary),
"tertiary-text": (0, color_1.toHSLA)(baseColors.light),
"tertiary-50": {
h: 195,
s: 3,
l: 20,
a: 1,
},
"tertiary-50-text": (0, color_1.toHSLA)(baseColors.light),
"tertiary-h": (0, color_1.toHSLA)(baseColors.tertiary).h,
"tertiary-s": (0, color_1.toHSLA)(baseColors.tertiary).s,
"tertiary-l": (0, color_1.toHSLA)(baseColors.tertiary).l,
"tertiary-a": (0, color_1.toHSLA)(baseColors.tertiary).a,
};
const expectedFull = {
...expectedDefault,
"dark-50-h": 0,
"dark-50-s": 0,
"dark-50-l": 53,
"dark-50-a": 1,
"dark-text-h": (0, color_1.toHSLA)(baseColors.light).h,
"dark-text-s": (0, color_1.toHSLA)(baseColors.light).s,
"dark-text-l": (0, color_1.toHSLA)(baseColors.light).l,
"dark-text-a": (0, color_1.toHSLA)(baseColors.light).a,
"dark-50-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"dark-50-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"dark-50-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"dark-50-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"background-50-h": 0,
"background-50-s": 0,
"background-50-l": 53,
"background-50-a": 1,
"background-text-h": (0, color_1.toHSLA)(baseColors.light).h,
"background-text-s": (0, color_1.toHSLA)(baseColors.light).s,
"background-text-l": (0, color_1.toHSLA)(baseColors.light).l,
"background-text-a": (0, color_1.toHSLA)(baseColors.light).a,
"background-50-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"background-50-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"background-50-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"background-50-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"light-50-h": 0,
"light-50-s": 0,
"light-50-l": 53,
"light-50-a": 1,
"light-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"light-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"light-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"light-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"light-50-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"light-50-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"light-50-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"light-50-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"foreground-50-h": 0,
"foreground-50-s": 0,
"foreground-50-l": 53,
"foreground-50-a": 1,
"foreground-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"foreground-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"foreground-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"foreground-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"foreground-50-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"foreground-50-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"foreground-50-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"foreground-50-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"primary-50-h": 0,
"primary-50-s": 35,
"primary-50-l": 29,
"primary-50-a": 1,
"primary-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"primary-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"primary-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"primary-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"primary-50-text-h": (0, color_1.toHSLA)(baseColors.light).h,
"primary-50-text-s": (0, color_1.toHSLA)(baseColors.light).s,
"primary-50-text-l": (0, color_1.toHSLA)(baseColors.light).l,
"primary-50-text-a": (0, color_1.toHSLA)(baseColors.light).a,
"secondary-50-h": 120,
"secondary-50-s": 35,
"secondary-50-l": 29,
"secondary-50-a": 1,
"secondary-text-h": (0, color_1.toHSLA)(baseColors.dark).h,
"secondary-text-s": (0, color_1.toHSLA)(baseColors.dark).s,
"secondary-text-l": (0, color_1.toHSLA)(baseColors.dark).l,
"secondary-text-a": (0, color_1.toHSLA)(baseColors.dark).a,
"secondary-50-text-h": (0, color_1.toHSLA)(baseColors.light).h,
"secondary-50-text-s": (0, color_1.toHSLA)(baseColors.light).s,
"secondary-50-text-l": (0, color_1.toHSLA)(baseColors.light).l,
"secondary-50-text-a": (0, color_1.toHSLA)(baseColors.light).a,
"tertiary-50-h": 195,
"tertiary-50-s": 3,
"tertiary-50-l": 20,
"tertiary-50-a": 1,
"tertiary-text-h": (0, color_1.toHSLA)(baseColors.light).h,
"tertiary-text-s": (0, color_1.toHSLA)(baseColors.light).s,
"tertiary-text-l": (0, color_1.toHSLA)(baseColors.light).l,
"tertiary-text-a": (0, color_1.toHSLA)(baseColors.light).a,
"tertiary-50-text-h": (0, color_1.toHSLA)(baseColors.light).h,
"tertiary-50-text-s": (0, color_1.toHSLA)(baseColors.light).s,
"tertiary-50-text-l": (0, color_1.toHSLA)(baseColors.light).l,
"tertiary-50-text-a": (0, color_1.toHSLA)(baseColors.light).a,
};
it("Should convert have the same amount of colors", async () => {
const input = await (0, createColorSet_1.createColorSet)({
data: baseColors,
shades,
type: color_1.ColorType.HSLA,
mix: ["#111111", "#ffffff"], // Darkmode, because dark is first
});
expect(Object.keys(input).length).toBe(Object.keys(expectedDefault).length);
});
it("Should convert a basic set to a full scale colorset", async () => {
const input = await (0, createColorSet_1.createColorSet)({
data: baseColors,
shades,
type: color_1.ColorType.HSLA,
mix: ["#111111", "#ffffff"], // Darkmode, because dark is first
});
expect(input).toEqual(expectedDefault);
});
it("Should convert have the same amount of limited colors", async () => {
const input = await (0, createColorSet_1.createColorSet)({
data: baseColors,
shades,
type: color_1.ColorType.HSLA,
mix: ["#111111", "#ffffff"],
split: {
shades: true,
text: true,
},
});
expect(Object.keys(input).length).toBe(Object.keys(expectedFull).length);
});
it("Should convert a basic set to a limited scale colorset", async () => {
const input = await (0, createColorSet_1.createColorSet)({
data: baseColors,
shades,
type: color_1.ColorType.HSLA,
mix: ["#111111", "#ffffff"],
split: {
shades: true,
text: true,
},
});
expect(input).toEqual(expectedFull);
});
});
//# sourceMappingURL=createColorSet.test.js.map