Generate Tailwind colors from brandColor/accentColor

2022-03-22 12:37:57 -05:00
parent 18bad4a5ab
commit a42ea0961a
6 changed files with 203 additions and 72 deletions
--- a/app/soapbox/utils/tests/colors-test.js
+++ b/app/soapbox/utils/tests/colors-test.js
@@ -0,0 +1,22 @@
+import tintify from '../colors';
+
+const AZURE = '#0482d8';
+
+describe('tintify()', () => {
+  it('generates tints from a base color', () => {
+    const result = tintify(AZURE);
+
+    expect(result).toEqual({
+      '100': '#e6f3fb',
+      '200': '#c0e0f5',
+      '300': '#9bcdef',
+      '400': '#4fa8e4',
+      '50': '#f2f9fd',
+      '500': '#0482d8',
+      '600': '#0475c2',
+      '700': '#0362a2',
+      '800': '#024e82',
+      '900': '#02406a',
+    });
+  });
+});