diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-06 00:09:25 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-06 00:09:25 -0300 |
commit | fb6aff76d2152d95caa2ba6cb0d91cb01e0687fe (patch) | |
tree | 2dc9b0a4935f60ba7229fd81332ec4a41ad4698c /packages/taler-wallet-webextension/src/mui | |
parent | 912813fd09ee2f757e4d6d509a911159b46153a7 (diff) | |
download | wallet-core-fb6aff76d2152d95caa2ba6cb0d91cb01e0687fe.tar.xz |
prettier
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
4 files changed, 508 insertions, 477 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/colors/constants.ts b/packages/taler-wallet-webextension/src/mui/colors/constants.ts index a6e58caa9..c9e74b6d3 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/constants.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/constants.ts @@ -1,348 +1,327 @@ export const amber = { - 50: '#fff8e1', - 100: '#ffecb3', - 200: '#ffe082', - 300: '#ffd54f', - 400: '#ffca28', - 500: '#ffc107', - 600: '#ffb300', - 700: '#ffa000', - 800: '#ff8f00', - 900: '#ff6f00', - A100: '#ffe57f', - A200: '#ffd740', - A400: '#ffc400', - A700: '#ffab00', + 50: "#fff8e1", + 100: "#ffecb3", + 200: "#ffe082", + 300: "#ffd54f", + 400: "#ffca28", + 500: "#ffc107", + 600: "#ffb300", + 700: "#ffa000", + 800: "#ff8f00", + 900: "#ff6f00", + A100: "#ffe57f", + A200: "#ffd740", + A400: "#ffc400", + A700: "#ffab00", }; - export const blueGrey = { - 50: '#eceff1', - 100: '#cfd8dc', - 200: '#b0bec5', - 300: '#90a4ae', - 400: '#78909c', - 500: '#607d8b', - 600: '#546e7a', - 700: '#455a64', - 800: '#37474f', - 900: '#263238', - A100: '#cfd8dc', - A200: '#b0bec5', - A400: '#78909c', - A700: '#455a64', + 50: "#eceff1", + 100: "#cfd8dc", + 200: "#b0bec5", + 300: "#90a4ae", + 400: "#78909c", + 500: "#607d8b", + 600: "#546e7a", + 700: "#455a64", + 800: "#37474f", + 900: "#263238", + A100: "#cfd8dc", + A200: "#b0bec5", + A400: "#78909c", + A700: "#455a64", }; - export const blue = { - 50: '#e3f2fd', - 100: '#bbdefb', - 200: '#90caf9', - 300: '#64b5f6', - 400: '#42a5f5', - 500: '#2196f3', - 600: '#1e88e5', - 700: '#1976d2', - 800: '#1565c0', - 900: '#0d47a1', - A100: '#82b1ff', - A200: '#448aff', - A400: '#2979ff', - A700: '#2962ff', + 50: "#e3f2fd", + 100: "#bbdefb", + 200: "#90caf9", + 300: "#64b5f6", + 400: "#42a5f5", + 500: "#2196f3", + 600: "#1e88e5", + 700: "#1976d2", + 800: "#1565c0", + 900: "#0d47a1", + A100: "#82b1ff", + A200: "#448aff", + A400: "#2979ff", + A700: "#2962ff", }; - export const brown = { - 50: '#efebe9', - 100: '#d7ccc8', - 200: '#bcaaa4', - 300: '#a1887f', - 400: '#8d6e63', - 500: '#795548', - 600: '#6d4c41', - 700: '#5d4037', - 800: '#4e342e', - 900: '#3e2723', - A100: '#d7ccc8', - A200: '#bcaaa4', - A400: '#8d6e63', - A700: '#5d4037', + 50: "#efebe9", + 100: "#d7ccc8", + 200: "#bcaaa4", + 300: "#a1887f", + 400: "#8d6e63", + 500: "#795548", + 600: "#6d4c41", + 700: "#5d4037", + 800: "#4e342e", + 900: "#3e2723", + A100: "#d7ccc8", + A200: "#bcaaa4", + A400: "#8d6e63", + A700: "#5d4037", }; - export const common = { - black: '#000', - white: '#fff', + black: "#000", + white: "#fff", }; - export const cyan = { - 50: '#e0f7fa', - 100: '#b2ebf2', - 200: '#80deea', - 300: '#4dd0e1', - 400: '#26c6da', - 500: '#00bcd4', - 600: '#00acc1', - 700: '#0097a7', - 800: '#00838f', - 900: '#006064', - A100: '#84ffff', - A200: '#18ffff', - A400: '#00e5ff', - A700: '#00b8d4', + 50: "#e0f7fa", + 100: "#b2ebf2", + 200: "#80deea", + 300: "#4dd0e1", + 400: "#26c6da", + 500: "#00bcd4", + 600: "#00acc1", + 700: "#0097a7", + 800: "#00838f", + 900: "#006064", + A100: "#84ffff", + A200: "#18ffff", + A400: "#00e5ff", + A700: "#00b8d4", }; - export const deepOrange = { - 50: '#fbe9e7', - 100: '#ffccbc', - 200: '#ffab91', - 300: '#ff8a65', - 400: '#ff7043', - 500: '#ff5722', - 600: '#f4511e', - 700: '#e64a19', - 800: '#d84315', - 900: '#bf360c', - A100: '#ff9e80', - A200: '#ff6e40', - A400: '#ff3d00', - A700: '#dd2c00', + 50: "#fbe9e7", + 100: "#ffccbc", + 200: "#ffab91", + 300: "#ff8a65", + 400: "#ff7043", + 500: "#ff5722", + 600: "#f4511e", + 700: "#e64a19", + 800: "#d84315", + 900: "#bf360c", + A100: "#ff9e80", + A200: "#ff6e40", + A400: "#ff3d00", + A700: "#dd2c00", }; - export const deepPurple = { - 50: '#ede7f6', - 100: '#d1c4e9', - 200: '#b39ddb', - 300: '#9575cd', - 400: '#7e57c2', - 500: '#673ab7', - 600: '#5e35b1', - 700: '#512da8', - 800: '#4527a0', - 900: '#311b92', - A100: '#b388ff', - A200: '#7c4dff', - A400: '#651fff', - A700: '#6200ea', + 50: "#ede7f6", + 100: "#d1c4e9", + 200: "#b39ddb", + 300: "#9575cd", + 400: "#7e57c2", + 500: "#673ab7", + 600: "#5e35b1", + 700: "#512da8", + 800: "#4527a0", + 900: "#311b92", + A100: "#b388ff", + A200: "#7c4dff", + A400: "#651fff", + A700: "#6200ea", }; - export const green = { - 50: '#e8f5e9', - 100: '#c8e6c9', - 200: '#a5d6a7', - 300: '#81c784', - 400: '#66bb6a', - 500: '#4caf50', - 600: '#43a047', - 700: '#388e3c', - 800: '#2e7d32', - 900: '#1b5e20', - A100: '#b9f6ca', - A200: '#69f0ae', - A400: '#00e676', - A700: '#00c853', + 50: "#e8f5e9", + 100: "#c8e6c9", + 200: "#a5d6a7", + 300: "#81c784", + 400: "#66bb6a", + 500: "#4caf50", + 600: "#43a047", + 700: "#388e3c", + 800: "#2e7d32", + 900: "#1b5e20", + A100: "#b9f6ca", + A200: "#69f0ae", + A400: "#00e676", + A700: "#00c853", }; - export const grey = { - 50: '#fafafa', - 100: '#f5f5f5', - 200: '#eeeeee', - 300: '#e0e0e0', - 400: '#bdbdbd', - 500: '#9e9e9e', - 600: '#757575', - 700: '#616161', - 800: '#424242', - 900: '#212121', - A100: '#f5f5f5', - A200: '#eeeeee', - A400: '#bdbdbd', - A700: '#616161', + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#eeeeee", + 300: "#e0e0e0", + 400: "#bdbdbd", + 500: "#9e9e9e", + 600: "#757575", + 700: "#616161", + 800: "#424242", + 900: "#212121", + A100: "#f5f5f5", + A200: "#eeeeee", + A400: "#bdbdbd", + A700: "#616161", }; - export const indigo = { - 50: '#e8eaf6', - 100: '#c5cae9', - 200: '#9fa8da', - 300: '#7986cb', - 400: '#5c6bc0', - 500: '#3f51b5', - 600: '#3949ab', - 700: '#303f9f', - 800: '#283593', - 900: '#1a237e', - A100: '#8c9eff', - A200: '#536dfe', - A400: '#3d5afe', - A700: '#304ffe', + 50: "#e8eaf6", + 100: "#c5cae9", + 200: "#9fa8da", + 300: "#7986cb", + 400: "#5c6bc0", + 500: "#3f51b5", + 600: "#3949ab", + 700: "#303f9f", + 800: "#283593", + 900: "#1a237e", + A100: "#8c9eff", + A200: "#536dfe", + A400: "#3d5afe", + A700: "#304ffe", }; - export const lightBlue = { - 50: '#e1f5fe', - 100: '#b3e5fc', - 200: '#81d4fa', - 300: '#4fc3f7', - 400: '#29b6f6', - 500: '#03a9f4', - 600: '#039be5', - 700: '#0288d1', - 800: '#0277bd', - 900: '#01579b', - A100: '#80d8ff', - A200: '#40c4ff', - A400: '#00b0ff', - A700: '#0091ea', + 50: "#e1f5fe", + 100: "#b3e5fc", + 200: "#81d4fa", + 300: "#4fc3f7", + 400: "#29b6f6", + 500: "#03a9f4", + 600: "#039be5", + 700: "#0288d1", + 800: "#0277bd", + 900: "#01579b", + A100: "#80d8ff", + A200: "#40c4ff", + A400: "#00b0ff", + A700: "#0091ea", }; - export const lightGreen = { - 50: '#f1f8e9', - 100: '#dcedc8', - 200: '#c5e1a5', - 300: '#aed581', - 400: '#9ccc65', - 500: '#8bc34a', - 600: '#7cb342', - 700: '#689f38', - 800: '#558b2f', - 900: '#33691e', - A100: '#ccff90', - A200: '#b2ff59', - A400: '#76ff03', - A700: '#64dd17', + 50: "#f1f8e9", + 100: "#dcedc8", + 200: "#c5e1a5", + 300: "#aed581", + 400: "#9ccc65", + 500: "#8bc34a", + 600: "#7cb342", + 700: "#689f38", + 800: "#558b2f", + 900: "#33691e", + A100: "#ccff90", + A200: "#b2ff59", + A400: "#76ff03", + A700: "#64dd17", }; - export const lime = { - 50: '#f9fbe7', - 100: '#f0f4c3', - 200: '#e6ee9c', - 300: '#dce775', - 400: '#d4e157', - 500: '#cddc39', - 600: '#c0ca33', - 700: '#afb42b', - 800: '#9e9d24', - 900: '#827717', - A100: '#f4ff81', - A200: '#eeff41', - A400: '#c6ff00', - A700: '#aeea00', + 50: "#f9fbe7", + 100: "#f0f4c3", + 200: "#e6ee9c", + 300: "#dce775", + 400: "#d4e157", + 500: "#cddc39", + 600: "#c0ca33", + 700: "#afb42b", + 800: "#9e9d24", + 900: "#827717", + A100: "#f4ff81", + A200: "#eeff41", + A400: "#c6ff00", + A700: "#aeea00", }; - export const orange = { - 50: '#fff3e0', - 100: '#ffe0b2', - 200: '#ffcc80', - 300: '#ffb74d', - 400: '#ffa726', - 500: '#ff9800', - 600: '#fb8c00', - 700: '#f57c00', - 800: '#ef6c00', - 900: '#e65100', - A100: '#ffd180', - A200: '#ffab40', - A400: '#ff9100', - A700: '#ff6d00', + 50: "#fff3e0", + 100: "#ffe0b2", + 200: "#ffcc80", + 300: "#ffb74d", + 400: "#ffa726", + 500: "#ff9800", + 600: "#fb8c00", + 700: "#f57c00", + 800: "#ef6c00", + 900: "#e65100", + A100: "#ffd180", + A200: "#ffab40", + A400: "#ff9100", + A700: "#ff6d00", }; - export const pink = { - 50: '#fce4ec', - 100: '#f8bbd0', - 200: '#f48fb1', - 300: '#f06292', - 400: '#ec407a', - 500: '#e91e63', - 600: '#d81b60', - 700: '#c2185b', - 800: '#ad1457', - 900: '#880e4f', - A100: '#ff80ab', - A200: '#ff4081', - A400: '#f50057', - A700: '#c51162', + 50: "#fce4ec", + 100: "#f8bbd0", + 200: "#f48fb1", + 300: "#f06292", + 400: "#ec407a", + 500: "#e91e63", + 600: "#d81b60", + 700: "#c2185b", + 800: "#ad1457", + 900: "#880e4f", + A100: "#ff80ab", + A200: "#ff4081", + A400: "#f50057", + A700: "#c51162", }; - export const purple = { - 50: '#f3e5f5', - 100: '#e1bee7', - 200: '#ce93d8', - 300: '#ba68c8', - 400: '#ab47bc', - 500: '#9c27b0', - 600: '#8e24aa', - 700: '#7b1fa2', - 800: '#6a1b9a', - 900: '#4a148c', - A100: '#ea80fc', - A200: '#e040fb', - A400: '#d500f9', - A700: '#aa00ff', + 50: "#f3e5f5", + 100: "#e1bee7", + 200: "#ce93d8", + 300: "#ba68c8", + 400: "#ab47bc", + 500: "#9c27b0", + 600: "#8e24aa", + 700: "#7b1fa2", + 800: "#6a1b9a", + 900: "#4a148c", + A100: "#ea80fc", + A200: "#e040fb", + A400: "#d500f9", + A700: "#aa00ff", }; - export const red = { - 50: '#ffebee', - 100: '#ffcdd2', - 200: '#ef9a9a', - 300: '#e57373', - 400: '#ef5350', - 500: '#f44336', - 600: '#e53935', - 700: '#d32f2f', - 800: '#c62828', - 900: '#b71c1c', - A100: '#ff8a80', - A200: '#ff5252', - A400: '#ff1744', - A700: '#d50000', + 50: "#ffebee", + 100: "#ffcdd2", + 200: "#ef9a9a", + 300: "#e57373", + 400: "#ef5350", + 500: "#f44336", + 600: "#e53935", + 700: "#d32f2f", + 800: "#c62828", + 900: "#b71c1c", + A100: "#ff8a80", + A200: "#ff5252", + A400: "#ff1744", + A700: "#d50000", }; - export const teal = { - 50: '#e0f2f1', - 100: '#b2dfdb', - 200: '#80cbc4', - 300: '#4db6ac', - 400: '#26a69a', - 500: '#009688', - 600: '#00897b', - 700: '#00796b', - 800: '#00695c', - 900: '#004d40', - A100: '#a7ffeb', - A200: '#64ffda', - A400: '#1de9b6', - A700: '#00bfa5', + 50: "#e0f2f1", + 100: "#b2dfdb", + 200: "#80cbc4", + 300: "#4db6ac", + 400: "#26a69a", + 500: "#009688", + 600: "#00897b", + 700: "#00796b", + 800: "#00695c", + 900: "#004d40", + A100: "#a7ffeb", + A200: "#64ffda", + A400: "#1de9b6", + A700: "#00bfa5", }; - export const yellow = { - 50: '#fffde7', - 100: '#fff9c4', - 200: '#fff59d', - 300: '#fff176', - 400: '#ffee58', - 500: '#ffeb3b', - 600: '#fdd835', - 700: '#fbc02d', - 800: '#f9a825', - 900: '#f57f17', - A100: '#ffff8d', - A200: '#ffff00', - A400: '#ffea00', - A700: '#ffd600', + 50: "#fffde7", + 100: "#fff9c4", + 200: "#fff59d", + 300: "#fff176", + 400: "#ffee58", + 500: "#ffeb3b", + 600: "#fdd835", + 700: "#fbc02d", + 800: "#f9a825", + 900: "#f57f17", + A100: "#ffff8d", + A200: "#ffff00", + A400: "#ffea00", + A700: "#ffd600", }; - - diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts index 192e9f402..5f551eedd 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts @@ -1,4 +1,4 @@ -import { expect } from 'chai'; +import { expect } from "chai"; import { recomposeColor, hexToRgb, @@ -11,295 +11,308 @@ import { getContrastRatio, getLuminance, lighten, -} from './manipulation.js'; +} from "./manipulation.js"; -describe('utils/colorManipulator', () => { - describe('recomposeColor', () => { - it('converts a decomposed rgb color object to a string` ', () => { +describe("utils/colorManipulator", () => { + describe("recomposeColor", () => { + it("converts a decomposed rgb color object to a string` ", () => { expect( recomposeColor({ - type: 'rgb', + type: "rgb", values: [255, 255, 255], }), - ).to.equal('rgb(255, 255, 255)'); + ).to.equal("rgb(255, 255, 255)"); }); - it('converts a decomposed rgba color object to a string` ', () => { + it("converts a decomposed rgba color object to a string` ", () => { expect( recomposeColor({ - type: 'rgba', + type: "rgba", values: [255, 255, 255, 0.5], }), - ).to.equal('rgba(255, 255, 255, 0.5)'); + ).to.equal("rgba(255, 255, 255, 0.5)"); }); - it('converts a decomposed hsl color object to a string` ', () => { + it("converts a decomposed hsl color object to a string` ", () => { expect( recomposeColor({ - type: 'hsl', + type: "hsl", values: [100, 50, 25], }), - ).to.equal('hsl(100, 50%, 25%)'); + ).to.equal("hsl(100, 50%, 25%)"); }); - it('converts a decomposed hsla color object to a string` ', () => { + it("converts a decomposed hsla color object to a string` ", () => { expect( recomposeColor({ - type: 'hsla', + type: "hsla", values: [100, 50, 25, 0.5], }), - ).to.equal('hsla(100, 50%, 25%, 0.5)'); + ).to.equal("hsla(100, 50%, 25%, 0.5)"); }); }); - describe('hexToRgb', () => { - it('converts a short hex color to an rgb color` ', () => { - expect(hexToRgb('#9f3')).to.equal('rgb(153, 255, 51)'); + describe("hexToRgb", () => { + it("converts a short hex color to an rgb color` ", () => { + expect(hexToRgb("#9f3")).to.equal("rgb(153, 255, 51)"); }); - it('converts a long hex color to an rgb color` ', () => { - expect(hexToRgb('#a94fd3')).to.equal('rgb(169, 79, 211)'); + it("converts a long hex color to an rgb color` ", () => { + expect(hexToRgb("#a94fd3")).to.equal("rgb(169, 79, 211)"); }); - it('converts a long alpha hex color to an argb color` ', () => { - expect(hexToRgb('#111111f8')).to.equal('rgba(17, 17, 17, 0.973)'); + it("converts a long alpha hex color to an argb color` ", () => { + expect(hexToRgb("#111111f8")).to.equal("rgba(17, 17, 17, 0.973)"); }); }); - describe('rgbToHex', () => { - it('converts an rgb color to a hex color` ', () => { - expect(rgbToHex('rgb(169, 79, 211)')).to.equal('#a94fd3'); + describe("rgbToHex", () => { + it("converts an rgb color to a hex color` ", () => { + expect(rgbToHex("rgb(169, 79, 211)")).to.equal("#a94fd3"); }); - it('converts an rgba color to a hex color` ', () => { - expect(rgbToHex('rgba(169, 79, 211, 1)')).to.equal('#a94fd3ff'); + it("converts an rgba color to a hex color` ", () => { + expect(rgbToHex("rgba(169, 79, 211, 1)")).to.equal("#a94fd3ff"); }); - it('idempotent', () => { - expect(rgbToHex('#A94FD3')).to.equal('#A94FD3'); + it("idempotent", () => { + expect(rgbToHex("#A94FD3")).to.equal("#A94FD3"); }); }); - describe('hslToRgb', () => { - it('converts an hsl color to an rgb color` ', () => { - expect(hslToRgb('hsl(281, 60%, 57%)')).to.equal('rgb(169, 80, 211)'); + describe("hslToRgb", () => { + it("converts an hsl color to an rgb color` ", () => { + expect(hslToRgb("hsl(281, 60%, 57%)")).to.equal("rgb(169, 80, 211)"); }); - it('converts an hsla color to an rgba color` ', () => { - expect(hslToRgb('hsla(281, 60%, 57%, 0.5)')).to.equal('rgba(169, 80, 211, 0.5)'); + it("converts an hsla color to an rgba color` ", () => { + expect(hslToRgb("hsla(281, 60%, 57%, 0.5)")).to.equal( + "rgba(169, 80, 211, 0.5)", + ); }); - it('allow to convert values only', () => { - expect(hslToRgb('hsl(281, 60%, 57%)')).to.equal('rgb(169, 80, 211)'); + it("allow to convert values only", () => { + expect(hslToRgb("hsl(281, 60%, 57%)")).to.equal("rgb(169, 80, 211)"); }); }); - describe('decomposeColor', () => { - it('converts an rgb color string to an object with `type` and `value` keys', () => { - const { type, values } = decomposeColor('rgb(255, 255, 255)'); - expect(type).to.equal('rgb'); + describe("decomposeColor", () => { + it("converts an rgb color string to an object with `type` and `value` keys", () => { + const { type, values } = decomposeColor("rgb(255, 255, 255)"); + expect(type).to.equal("rgb"); expect(values).to.deep.equal([255, 255, 255]); }); - it('converts an rgba color string to an object with `type` and `value` keys', () => { - const { type, values } = decomposeColor('rgba(255, 255, 255, 0.5)'); - expect(type).to.equal('rgba'); + it("converts an rgba color string to an object with `type` and `value` keys", () => { + const { type, values } = decomposeColor("rgba(255, 255, 255, 0.5)"); + expect(type).to.equal("rgba"); expect(values).to.deep.equal([255, 255, 255, 0.5]); }); - it('converts an hsl color string to an object with `type` and `value` keys', () => { - const { type, values } = decomposeColor('hsl(100, 50%, 25%)'); - expect(type).to.equal('hsl'); + it("converts an hsl color string to an object with `type` and `value` keys", () => { + const { type, values } = decomposeColor("hsl(100, 50%, 25%)"); + expect(type).to.equal("hsl"); expect(values).to.deep.equal([100, 50, 25]); }); - it('converts an hsla color string to an object with `type` and `value` keys', () => { - const { type, values } = decomposeColor('hsla(100, 50%, 25%, 0.5)'); - expect(type).to.equal('hsla'); + it("converts an hsla color string to an object with `type` and `value` keys", () => { + const { type, values } = decomposeColor("hsla(100, 50%, 25%, 0.5)"); + expect(type).to.equal("hsla"); expect(values).to.deep.equal([100, 50, 25, 0.5]); }); - it('converts rgba hex', () => { - const decomposed = decomposeColor('#111111f8'); + it("converts rgba hex", () => { + const decomposed = decomposeColor("#111111f8"); expect(decomposed).to.deep.equal({ - type: 'rgba', + type: "rgba", colorSpace: undefined, values: [17, 17, 17, 0.973], }); }); }); - describe('getContrastRatio', () => { - it('returns a ratio for black : white', () => { - expect(getContrastRatio('#000', '#FFF')).to.equal(21); + describe("getContrastRatio", () => { + it("returns a ratio for black : white", () => { + expect(getContrastRatio("#000", "#FFF")).to.equal(21); }); - it('returns a ratio for black : black', () => { - expect(getContrastRatio('#000', '#000')).to.equal(1); + it("returns a ratio for black : black", () => { + expect(getContrastRatio("#000", "#000")).to.equal(1); }); - it('returns a ratio for white : white', () => { - expect(getContrastRatio('#FFF', '#FFF')).to.equal(1); + it("returns a ratio for white : white", () => { + expect(getContrastRatio("#FFF", "#FFF")).to.equal(1); }); - it('returns a ratio for dark-grey : light-grey', () => { - expect(getContrastRatio('#707070', '#E5E5E5')).to.be.approximately(3.93, 0.01); + it("returns a ratio for dark-grey : light-grey", () => { + expect(getContrastRatio("#707070", "#E5E5E5")).to.be.approximately( + 3.93, + 0.01, + ); }); - it('returns a ratio for black : light-grey', () => { - expect(getContrastRatio('#000', '#888')).to.be.approximately(5.92, 0.01); + it("returns a ratio for black : light-grey", () => { + expect(getContrastRatio("#000", "#888")).to.be.approximately(5.92, 0.01); }); }); - describe('getLuminance', () => { - - it('returns a valid luminance for rgb white ', () => { - expect(getLuminance('rgba(255, 255, 255)')).to.equal(1); - expect(getLuminance('rgb(255, 255, 255)')).to.equal(1); + describe("getLuminance", () => { + it("returns a valid luminance for rgb white ", () => { + expect(getLuminance("rgba(255, 255, 255)")).to.equal(1); + expect(getLuminance("rgb(255, 255, 255)")).to.equal(1); }); - it('returns a valid luminance for rgb mid-grey', () => { - expect(getLuminance('rgba(127, 127, 127)')).to.equal(0.212); - expect(getLuminance('rgb(127, 127, 127)')).to.equal(0.212); + it("returns a valid luminance for rgb mid-grey", () => { + expect(getLuminance("rgba(127, 127, 127)")).to.equal(0.212); + expect(getLuminance("rgb(127, 127, 127)")).to.equal(0.212); }); - it('returns a valid luminance for an rgb color', () => { - expect(getLuminance('rgb(255, 127, 0)')).to.equal(0.364); + it("returns a valid luminance for an rgb color", () => { + expect(getLuminance("rgb(255, 127, 0)")).to.equal(0.364); }); - it('returns a valid luminance from an hsl color', () => { - expect(getLuminance('hsl(100, 100%, 50%)')).to.equal(0.735); + it("returns a valid luminance from an hsl color", () => { + expect(getLuminance("hsl(100, 100%, 50%)")).to.equal(0.735); }); - it('returns an equal luminance for the same color in different formats', () => { - const hsl = 'hsl(100, 100%, 50%)'; - const rgb = 'rgb(85, 255, 0)'; + it("returns an equal luminance for the same color in different formats", () => { + const hsl = "hsl(100, 100%, 50%)"; + const rgb = "rgb(85, 255, 0)"; expect(getLuminance(hsl)).to.equal(getLuminance(rgb)); }); - }); - describe('emphasize', () => { - it('lightens a dark rgb color with the coefficient provided', () => { - expect(emphasize('rgb(1, 2, 3)', 0.4)).to.equal(lighten('rgb(1, 2, 3)', 0.4)); + describe("emphasize", () => { + it("lightens a dark rgb color with the coefficient provided", () => { + expect(emphasize("rgb(1, 2, 3)", 0.4)).to.equal( + lighten("rgb(1, 2, 3)", 0.4), + ); }); - it('darkens a light rgb color with the coefficient provided', () => { - expect(emphasize('rgb(250, 240, 230)', 0.3)).to.equal(darken('rgb(250, 240, 230)', 0.3)); + it("darkens a light rgb color with the coefficient provided", () => { + expect(emphasize("rgb(250, 240, 230)", 0.3)).to.equal( + darken("rgb(250, 240, 230)", 0.3), + ); }); - it('lightens a dark rgb color with the coefficient 0.15 by default', () => { - expect(emphasize('rgb(1, 2, 3)')).to.equal(lighten('rgb(1, 2, 3)', 0.15)); + it("lightens a dark rgb color with the coefficient 0.15 by default", () => { + expect(emphasize("rgb(1, 2, 3)")).to.equal(lighten("rgb(1, 2, 3)", 0.15)); }); - it('darkens a light rgb color with the coefficient 0.15 by default', () => { - expect(emphasize('rgb(250, 240, 230)')).to.equal(darken('rgb(250, 240, 230)', 0.15)); + it("darkens a light rgb color with the coefficient 0.15 by default", () => { + expect(emphasize("rgb(250, 240, 230)")).to.equal( + darken("rgb(250, 240, 230)", 0.15), + ); }); - }); - describe('alpha', () => { - it('converts an rgb color to an rgba color with the value provided', () => { - expect(alpha('rgb(1, 2, 3)', 0.4)).to.equal('rgba(1, 2, 3, 0.4)'); + describe("alpha", () => { + it("converts an rgb color to an rgba color with the value provided", () => { + expect(alpha("rgb(1, 2, 3)", 0.4)).to.equal("rgba(1, 2, 3, 0.4)"); }); - it('updates an rgba color with the alpha value provided', () => { - expect(alpha('rgba(255, 0, 0, 0.2)', 0.5)).to.equal('rgba(255, 0, 0, 0.5)'); + it("updates an rgba color with the alpha value provided", () => { + expect(alpha("rgba(255, 0, 0, 0.2)", 0.5)).to.equal( + "rgba(255, 0, 0, 0.5)", + ); }); - it('converts an hsl color to an hsla color with the value provided', () => { - expect(alpha('hsl(0, 100%, 50%)', 0.1)).to.equal('hsla(0, 100%, 50%, 0.1)'); + it("converts an hsl color to an hsla color with the value provided", () => { + expect(alpha("hsl(0, 100%, 50%)", 0.1)).to.equal( + "hsla(0, 100%, 50%, 0.1)", + ); }); - it('updates an hsla color with the alpha value provided', () => { - expect(alpha('hsla(0, 100%, 50%, 0.2)', 0.5)).to.equal('hsla(0, 100%, 50%, 0.5)'); + it("updates an hsla color with the alpha value provided", () => { + expect(alpha("hsla(0, 100%, 50%, 0.2)", 0.5)).to.equal( + "hsla(0, 100%, 50%, 0.5)", + ); }); - }); - describe('darken', () => { + describe("darken", () => { it("doesn't modify rgb black", () => { - expect(darken('rgb(0, 0, 0)', 0.1)).to.equal('rgb(0, 0, 0)'); + expect(darken("rgb(0, 0, 0)", 0.1)).to.equal("rgb(0, 0, 0)"); }); - it('darkens rgb white to black when coefficient is 1', () => { - expect(darken('rgb(255, 255, 255)', 1)).to.equal('rgb(0, 0, 0)'); + it("darkens rgb white to black when coefficient is 1", () => { + expect(darken("rgb(255, 255, 255)", 1)).to.equal("rgb(0, 0, 0)"); }); - it('retains the alpha value in an rgba color', () => { - expect(darken('rgba(0, 0, 0, 0.5)', 0.1)).to.equal('rgba(0, 0, 0, 0.5)'); + it("retains the alpha value in an rgba color", () => { + expect(darken("rgba(0, 0, 0, 0.5)", 0.1)).to.equal("rgba(0, 0, 0, 0.5)"); }); - it('darkens rgb white by 10% when coefficient is 0.1', () => { - expect(darken('rgb(255, 255, 255)', 0.1)).to.equal('rgb(229, 229, 229)'); + it("darkens rgb white by 10% when coefficient is 0.1", () => { + expect(darken("rgb(255, 255, 255)", 0.1)).to.equal("rgb(229, 229, 229)"); }); - it('darkens rgb red by 50% when coefficient is 0.5', () => { - expect(darken('rgb(255, 0, 0)', 0.5)).to.equal('rgb(127, 0, 0)'); + it("darkens rgb red by 50% when coefficient is 0.5", () => { + expect(darken("rgb(255, 0, 0)", 0.5)).to.equal("rgb(127, 0, 0)"); }); - it('darkens rgb grey by 50% when coefficient is 0.5', () => { - expect(darken('rgb(127, 127, 127)', 0.5)).to.equal('rgb(63, 63, 63)'); + it("darkens rgb grey by 50% when coefficient is 0.5", () => { + expect(darken("rgb(127, 127, 127)", 0.5)).to.equal("rgb(63, 63, 63)"); }); it("doesn't modify rgb colors when coefficient is 0", () => { - expect(darken('rgb(255, 255, 255)', 0)).to.equal('rgb(255, 255, 255)'); + expect(darken("rgb(255, 255, 255)", 0)).to.equal("rgb(255, 255, 255)"); }); - it('darkens hsl red by 50% when coefficient is 0.5', () => { - expect(darken('hsl(0, 100%, 50%)', 0.5)).to.equal('hsl(0, 100%, 25%)'); + it("darkens hsl red by 50% when coefficient is 0.5", () => { + expect(darken("hsl(0, 100%, 50%)", 0.5)).to.equal("hsl(0, 100%, 25%)"); }); it("doesn't modify hsl colors when coefficient is 0", () => { - expect(darken('hsl(0, 100%, 50%)', 0)).to.equal('hsl(0, 100%, 50%)'); + expect(darken("hsl(0, 100%, 50%)", 0)).to.equal("hsl(0, 100%, 50%)"); }); it("doesn't modify hsl colors when l is 0%", () => { - expect(darken('hsl(0, 50%, 0%)', 0.5)).to.equal('hsl(0, 50%, 0%)'); + expect(darken("hsl(0, 50%, 0%)", 0.5)).to.equal("hsl(0, 50%, 0%)"); }); - }); - describe('lighten', () => { + describe("lighten", () => { it("doesn't modify rgb white", () => { - expect(lighten('rgb(255, 255, 255)', 0.1)).to.equal('rgb(255, 255, 255)'); + expect(lighten("rgb(255, 255, 255)", 0.1)).to.equal("rgb(255, 255, 255)"); }); - it('lightens rgb black to white when coefficient is 1', () => { - expect(lighten('rgb(0, 0, 0)', 1)).to.equal('rgb(255, 255, 255)'); + it("lightens rgb black to white when coefficient is 1", () => { + expect(lighten("rgb(0, 0, 0)", 1)).to.equal("rgb(255, 255, 255)"); }); - it('retains the alpha value in an rgba color', () => { - expect(lighten('rgba(255, 255, 255, 0.5)', 0.1)).to.equal('rgba(255, 255, 255, 0.5)'); + it("retains the alpha value in an rgba color", () => { + expect(lighten("rgba(255, 255, 255, 0.5)", 0.1)).to.equal( + "rgba(255, 255, 255, 0.5)", + ); }); - it('lightens rgb black by 10% when coefficient is 0.1', () => { - expect(lighten('rgb(0, 0, 0)', 0.1)).to.equal('rgb(25, 25, 25)'); + it("lightens rgb black by 10% when coefficient is 0.1", () => { + expect(lighten("rgb(0, 0, 0)", 0.1)).to.equal("rgb(25, 25, 25)"); }); - it('lightens rgb red by 50% when coefficient is 0.5', () => { - expect(lighten('rgb(255, 0, 0)', 0.5)).to.equal('rgb(255, 127, 127)'); + it("lightens rgb red by 50% when coefficient is 0.5", () => { + expect(lighten("rgb(255, 0, 0)", 0.5)).to.equal("rgb(255, 127, 127)"); }); - it('lightens rgb grey by 50% when coefficient is 0.5', () => { - expect(lighten('rgb(127, 127, 127)', 0.5)).to.equal('rgb(191, 191, 191)'); + it("lightens rgb grey by 50% when coefficient is 0.5", () => { + expect(lighten("rgb(127, 127, 127)", 0.5)).to.equal("rgb(191, 191, 191)"); }); it("doesn't modify rgb colors when coefficient is 0", () => { - expect(lighten('rgb(127, 127, 127)', 0)).to.equal('rgb(127, 127, 127)'); + expect(lighten("rgb(127, 127, 127)", 0)).to.equal("rgb(127, 127, 127)"); }); - it('lightens hsl red by 50% when coefficient is 0.5', () => { - expect(lighten('hsl(0, 100%, 50%)', 0.5)).to.equal('hsl(0, 100%, 75%)'); + it("lightens hsl red by 50% when coefficient is 0.5", () => { + expect(lighten("hsl(0, 100%, 50%)", 0.5)).to.equal("hsl(0, 100%, 75%)"); }); it("doesn't modify hsl colors when coefficient is 0", () => { - expect(lighten('hsl(0, 100%, 50%)', 0)).to.equal('hsl(0, 100%, 50%)'); + expect(lighten("hsl(0, 100%, 50%)", 0)).to.equal("hsl(0, 100%, 50%)"); }); it("doesn't modify hsl colors when `l` is 100%", () => { - expect(lighten('hsl(0, 50%, 100%)', 0.5)).to.equal('hsl(0, 50%, 100%)'); + expect(lighten("hsl(0, 50%, 100%)", 0.5)).to.equal("hsl(0, 50%, 100%)"); }); - }); }); diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts index d1181b6d6..c7ec6e684 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts @@ -1,20 +1,18 @@ - -export type ColorFormat = ColorFormatWithAlpha | ColorFormatWithoutAlpha -export type ColorFormatWithAlpha = 'rgb' | 'hsl'; -export type ColorFormatWithoutAlpha = 'rgba' | 'hsla'; -export type ColorObject = ColorObjectWithAlpha | ColorObjectWithoutAlpha +export type ColorFormat = ColorFormatWithAlpha | ColorFormatWithoutAlpha; +export type ColorFormatWithAlpha = "rgb" | "hsl"; +export type ColorFormatWithoutAlpha = "rgba" | "hsla"; +export type ColorObject = ColorObjectWithAlpha | ColorObjectWithoutAlpha; export interface ColorObjectWithAlpha { type: ColorFormatWithAlpha; values: [number, number, number]; - colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020'; + colorSpace?: "srgb" | "display-p3" | "a98-rgb" | "prophoto-rgb" | "rec-2020"; } export interface ColorObjectWithoutAlpha { type: ColorFormatWithoutAlpha; values: [number, number, number, number]; - colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020'; + colorSpace?: "srgb" | "display-p3" | "a98-rgb" | "prophoto-rgb" | "rec-2020"; } - /** * Returns a number whose value is limited to the given range. * @param {number} value The value to be clamped @@ -40,7 +38,7 @@ function clamp(value: number, min = 0, max = 1): number { export function hexToRgb(color: string): string { color = color.substr(1); - const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g'); + const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, "g"); let colors = color.match(re); if (colors && colors[0].length === 1) { @@ -48,12 +46,14 @@ export function hexToRgb(color: string): string { } return colors - ? `rgb${colors.length === 4 ? 'a' : ''}(${colors - .map((n, index) => { - return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000; - }) - .join(', ')})` - : ''; + ? `rgb${colors.length === 4 ? "a" : ""}(${colors + .map((n, index) => { + return index < 3 + ? parseInt(n, 16) + : Math.round((parseInt(n, 16) / 255) * 1000) / 1000; + }) + .join(", ")})` + : ""; } function intToHex(int: number): string { @@ -70,23 +70,42 @@ function intToHex(int: number): string { */ export function decomposeColor(color: string): ColorObject { const colorSpace = undefined; - if (color.charAt(0) === '#') { + if (color.charAt(0) === "#") { return decomposeColor(hexToRgb(color)); } - const marker = color.indexOf('('); + const marker = color.indexOf("("); const type = color.substring(0, marker); // if (type != 'rgba' && type != 'hsla' && type != 'rgb' && type != 'hsl') { // } - const values = color.substring(marker + 1, color.length - 1).split(',') - if (type == 'rgb' || type == 'hsl') { - return { type, colorSpace, values: [parseFloat(values[0]), parseFloat(values[1]), parseFloat(values[2])] } + const values = color.substring(marker + 1, color.length - 1).split(","); + if (type == "rgb" || type == "hsl") { + return { + type, + colorSpace, + values: [ + parseFloat(values[0]), + parseFloat(values[1]), + parseFloat(values[2]), + ], + }; } - if (type == 'rgba' || type == 'hsla') { - return { type, colorSpace, values: [parseFloat(values[0]), parseFloat(values[1]), parseFloat(values[2]), parseFloat(values[3])] } + if (type == "rgba" || type == "hsla") { + return { + type, + colorSpace, + values: [ + parseFloat(values[0]), + parseFloat(values[1]), + parseFloat(values[2]), + parseFloat(values[3]), + ], + }; } - throw new Error(`Unsupported '${color}' color. The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()`) + throw new Error( + `Unsupported '${color}' color. The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()`, + ); } /** @@ -100,19 +119,21 @@ export function recomposeColor(color: ColorObject): string { const { type, values: valuesNum } = color; const valuesStr: string[] = []; - if (type.indexOf('rgb') !== -1) { + if (type.indexOf("rgb") !== -1) { // Only convert the first 3 values to int (i.e. not alpha) - valuesNum.map((n, i) => (i < 3 ? parseInt(String(n), 10) : n)).forEach((n, i) => valuesStr[i] = String(n)); - } else if (type.indexOf('hsl') !== -1) { - valuesStr[0] = String(valuesNum[0]) + valuesNum + .map((n, i) => (i < 3 ? parseInt(String(n), 10) : n)) + .forEach((n, i) => (valuesStr[i] = String(n))); + } else if (type.indexOf("hsl") !== -1) { + valuesStr[0] = String(valuesNum[0]); valuesStr[1] = `${valuesNum[1]}%`; valuesStr[2] = `${valuesNum[2]}%`; - if (type === 'hsla') { - valuesStr[3] = String(valuesNum[3]) + if (type === "hsla") { + valuesStr[3] = String(valuesNum[3]); } } - return `${type}(${valuesStr.join(', ')})`; + return `${type}(${valuesStr.join(", ")})`; } /** @@ -122,12 +143,14 @@ export function recomposeColor(color: ColorObject): string { */ export function rgbToHex(color: string): string { // Idempotent - if (color.indexOf('#') === 0) { + if (color.indexOf("#") === 0) { return color; } const { values } = decomposeColor(color); - return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`; + return `#${values + .map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)) + .join("")}`; } /** @@ -142,24 +165,28 @@ export function hslToRgb(color: string): string { const s = values[1] / 100; const l = values[2] / 100; const a = s * Math.min(l, 1 - l); - const f = (n: number, k = (n + h / 30) % 12): number => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + const f = (n: number, k = (n + h / 30) % 12): number => + l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); - if (colorObj.type === 'hsla') { + if (colorObj.type === "hsla") { return recomposeColor({ - type: 'rgba', values: [ + type: "rgba", + values: [ Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255), - colorObj.values[3] - ] - }) + colorObj.values[3], + ], + }); } return recomposeColor({ - type: 'rgb', values: [ + type: "rgb", + values: [ Math.round(f(0) * 255), Math.round(f(8) * 255), - Math.round(f(4) * 255)] + Math.round(f(4) * 255), + ], }); } /** @@ -173,14 +200,19 @@ export function hslToRgb(color: string): string { export function getLuminance(color: string): number { const colorObj = decomposeColor(color); - const rgb2 = colorObj.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : colorObj.values; + const rgb2 = + colorObj.type === "hsl" + ? decomposeColor(hslToRgb(color)).values + : colorObj.values; const rgb = rgb2.map((val) => { val /= 255; // normalized return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4; }) as typeof rgb2; // Truncate at 3 digits - return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3)); + return Number( + (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3), + ); } /** @@ -191,7 +223,10 @@ export function getLuminance(color: string): number { * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @returns {number} A contrast ratio value in the range 0 - 21. */ -export function getContrastRatio(foreground: string, background: string): number { +export function getContrastRatio( + foreground: string, + background: string, +): number { const lumA = getLuminance(foreground); const lumB = getLuminance(background); return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05); @@ -208,8 +243,8 @@ export function alpha(color: string, value: number): string { const colorObj = decomposeColor(color); value = clamp(value); - if (colorObj.type === 'rgb' || colorObj.type === 'hsl') { - colorObj.type += 'a'; + if (colorObj.type === "rgb" || colorObj.type === "hsl") { + colorObj.type += "a"; } colorObj.values[3] = value; @@ -226,9 +261,12 @@ export function darken(color: string, coefficient: number): string { const colorObj = decomposeColor(color); coefficient = clamp(coefficient); - if (colorObj.type.indexOf('hsl') !== -1) { + if (colorObj.type.indexOf("hsl") !== -1) { colorObj.values[2] *= 1 - coefficient; - } else if (colorObj.type.indexOf('rgb') !== -1 || colorObj.type.indexOf('color') !== -1) { + } else if ( + colorObj.type.indexOf("rgb") !== -1 || + colorObj.type.indexOf("color") !== -1 + ) { for (let i = 0; i < 3; i += 1) { colorObj.values[i] *= 1 - coefficient; } @@ -246,13 +284,13 @@ export function lighten(color: string, coefficient: number): string { const colorObj = decomposeColor(color); coefficient = clamp(coefficient); - if (colorObj.type.indexOf('hsl') !== -1) { + if (colorObj.type.indexOf("hsl") !== -1) { colorObj.values[2] += (100 - colorObj.values[2]) * coefficient; - } else if (colorObj.type.indexOf('rgb') !== -1) { + } else if (colorObj.type.indexOf("rgb") !== -1) { for (let i = 0; i < 3; i += 1) { colorObj.values[i] += (255 - colorObj.values[i]) * coefficient; } - } else if (colorObj.type.indexOf('color') !== -1) { + } else if (colorObj.type.indexOf("color") !== -1) { for (let i = 0; i < 3; i += 1) { colorObj.values[i] += (1 - colorObj.values[i]) * coefficient; } @@ -269,5 +307,7 @@ export function lighten(color: string, coefficient: number): string { * @returns {string} A CSS color string. Hex input values are returned as rgb */ export function emphasize(color: string, coefficient = 0.15): string { - return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); + return getLuminance(color) > 0.5 + ? darken(color, coefficient) + : lighten(color, coefficient); } diff --git a/packages/taler-wallet-webextension/src/mui/handlers.ts b/packages/taler-wallet-webextension/src/mui/handlers.ts index 646bdcf17..0f8d873e3 100644 --- a/packages/taler-wallet-webextension/src/mui/handlers.ts +++ b/packages/taler-wallet-webextension/src/mui/handlers.ts @@ -23,4 +23,3 @@ export interface SelectFieldHandler { isDirty?: boolean; list: Record<string, string>; } - |