Switch to workspace

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/tailwind/colors.test.ts

@@ -0,0 +1,50 @@
+import {
+  withOpacityValue,
+  parseColorMatrix,
+} from './colors';
+
+describe('withOpacityValue()', () => {
+  it('returns a Tailwind color function with alpha support', () => {
+    const result = withOpacityValue('--color-primary-500');
+
+    // It returns a function
+    expect(typeof result).toBe('function');
+
+    // Test calling the function
+    expect(result).toBe('rgb(var(--color-primary-500) / <alpha-value>)');
+  });
+});
+
+describe('parseColorMatrix()', () => {
+  it('returns a Tailwind color object', () => {
+    const colorMatrix = {
+      gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      accent: [300, 500],
+    };
+
+    const result = parseColorMatrix(colorMatrix);
+
+    // Colors are mapped to functions which return CSS values
+    // @ts-ignore
+    expect(result.accent['300']).toEqual('rgb(var(--color-accent-300) / <alpha-value>)');
+  });
+
+  it('parses single-tint values', () => {
+    const colorMatrix = {
+      gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      accent: [300, 500],
+      'gradient-start': true,
+      'gradient-end': true,
+    };
+
+    const result = parseColorMatrix(colorMatrix);
+
+    expect(result['gradient-start']).toEqual('rgb(var(--color-gradient-start) / <alpha-value>)');
+  });
+});

packages/pl-fe/tailwind/colors.ts

@@ -0,0 +1,40 @@
+import type{ RecursiveKeyValuePair } from 'tailwindcss/types/config';
+
+/** https://tailwindcss.com/docs/customizing-colors#using-css-variables */
+const withOpacityValue = (variable: string): string => `rgb(var(${variable}) / <alpha-value>)`;
+
+/** Parse a single color as a CSS variable. */
+const toColorVariable = (colorName: string, tint: number | null = null): string => {
+  const suffix = tint ? `-${tint}` : '';
+  const variable = `--color-${colorName}${suffix}`;
+
+  return withOpacityValue(variable);
+};
+
+/** Parse list of tints into Tailwind function with CSS variables. */
+const parseTints = (colorName: string, tints: number[]): RecursiveKeyValuePair =>
+  tints.reduce<Record<string, string>>((colorObj, tint) => {
+    colorObj[tint] = toColorVariable(colorName, tint);
+    return colorObj;
+  }, {});
+
+interface ColorMatrix {
+  [colorName: string]: number[] | boolean;
+}
+
+/** Parse color matrix into Tailwind color palette. */
+const parseColorMatrix = (colorMatrix: ColorMatrix): RecursiveKeyValuePair =>
+  Object.entries(colorMatrix).reduce<RecursiveKeyValuePair>((palette, colorData) => {
+    const [colorName, tints] = colorData;
+
+    // Conditionally parse array or single-tint colors
+    if (Array.isArray(tints)) {
+      palette[colorName] = parseTints(colorName, tints);
+    } else if (tints === true) {
+      palette[colorName] = toColorVariable(colorName);
+    }
+
+    return palette;
+  }, {});
+
+export { withOpacityValue, parseColorMatrix };