pezkuwichain/pezkuwi-ui
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-ui.git synced 2026-06-12 20:01:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Swap from color to colord for color manipulation (#733)

Browse Source
This commit is contained in:
Jaco
2023-03-13 12:55:30 +02:00
committed by GitHub
parent e1f96f1fcf
commit c1b3cc87ee
6 changed files with 34 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-shared/src/icons/beachball/colors.spec.ts
+15 -8
View File
@@ -19,8 +19,9 @@ describe('colors', (): void => {
expect(
colors()
).toEqual(
// 'hsla(166.70000000000005, 98.6%, 27.6%, 0.9)'
'hsl(37.19999999999999, 100%, 54.9%)'
// with original color ...
// 'hsl(37.19999999999999, 100%, 54.9%)'
'hsl(37, 100%, 55%)'
);
});
@@ -28,17 +29,22 @@ describe('colors', (): void => {
expect(
colors(0.5)
).toEqual(
// 'hsla(166.70000000000005, 98.6%, 27.6%, 0.5)'
'hsla(37.19999999999999, 100%, 54.9%, 0.5)'
// with original color ...
// 'hsla(37.19999999999999, 100%, 54.9%, 0.5)'
'hsla(37, 100%, 55%, 0.5)'
);
});
it('rolates colors', (): void => {
colors();
const orig = colors();
expect(
orig
).toEqual('hsl(37, 100%, 55%)');
expect(
colors()
).not.toEqual('hsla(166.70000000000005, 98.6%, 27.6%, 0.9)');
).not.toEqual(orig);
});
it('works in edge conditions (0xff)', (): void => {
@@ -53,8 +59,9 @@ describe('colors', (): void => {
expect(
colors()
).toEqual(
// 'hsla(234.39999999999998, 75.9%, 51.2%, 0.9)'
'hsl(15, 0%, 100%)'
// with original color ...
// 'hsl(15, 0%, 100%)'
'hsl(0, 0%, 100%)'
);
});
});
packages/ui-shared/src/icons/beachball/colors.ts
+5 -4
View File
@@ -3,9 +3,10 @@
// Copyright 2016 Dan Finlay
import type { Colord } from 'colord';
import type { ColorGen, Seeder } from './types.js';
import Color from 'color';
import { colord } from 'colord';
import { COLORS } from './defaults.js';
@@ -13,8 +14,8 @@ const WOBBLE = 30;
export function colors (seeder: Seeder): ColorGen {
const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
const all = COLORS.map((hex): Color =>
Color(hex).rotate(amount)
const all = COLORS.map((hex): Colord =>
colord(hex).rotate(amount)
);
return (alpha = 1): string => {
@@ -22,6 +23,6 @@ export function colors (seeder: Seeder): ColorGen {
return all.splice(index, 1)[0]
.alpha(alpha)
.string();
.toHslString();
};
}
packages/ui-shared/src/icons/beachball/index.spec.ts
+6 -2
View File
@@ -15,7 +15,9 @@ describe('identicon', (): void => {
beachballIcon(new Uint8Array(32), { isAlternative: false, size: 256 }) as any
)
).toEqual(
'<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
// with original color ...
// '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
'<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(26, 26, 26); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212, 66%, 55%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(10, 91%, 58%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 86%, 86%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(262, 100%, 87%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
);
});
@@ -26,7 +28,9 @@ describe('identicon', (): void => {
beachballIcon(new Uint8Array(32), { isAlternative: false, size: 100 }, 'testClass', { display: 'block' }) as any
)
).toEqual(
'<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="50" cy="60" r="40" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="50" cy="70" r="20" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
// with original color ...
// '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="50" cy="60" r="40" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="50" cy="70" r="20" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
'<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(26, 26, 26); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212, 66%, 55%)"/><circle cx="50" cy="60" r="40" fill="hsl(10, 91%, 58%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 86%, 86%)"/><circle cx="50" cy="70" r="20" fill="hsl(262, 100%, 87%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
);
});
});