add color utility functions and Tailwind CSS configuration

lib/global.css

@@ -1,5 +1,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --mts-primary-50: 233 251 240;
+    --mts-primary-100: 207 247 222;
+    --mts-primary-200: 159 239 188;
+    --mts-primary-300: 111 230 155;
+    --mts-primary-400: 64 222 122;
+    --mts-primary-500: 34 197 94;
+    --mts-primary-600: 27 157 75;
+    --mts-primary-700: 20 117 56;
+    --mts-primary-800: 13 78 37;
+    --mts-primary-900: 7 39 19;
+    --mts-primary-950: 4 22 10;
+}
+
 .mts-default {
     --border-color: #f4f4f5;
     --primary-color: #22c55e;

lib/store/options.store.ts

@@ -5,6 +5,7 @@ import { useSwapStore } from './swap.store';
 import { MyTonSwapClient } from '@mytonswap/sdk';
 import { WIDGET_VERSION } from '../constants';
 import { useWalletStore } from './wallet.store';
+import { setupColors } from '../utils/color/setupColors';
 
 export type SwapOptions = {
     default_pay_token?: string;
@@ -24,6 +25,7 @@ export type SwapOptions = {
         | 'omniston';
     layout_direction?: 'ltr' | 'rtl';
     ui_preferences?: {
+        primary_color?: string;
         disable_provided_text?: boolean;
         show_swap_details?: boolean;
         show_settings_wallet?: boolean;
@@ -52,6 +54,7 @@ export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
         options: {
             liquidity_provider: 'mytonswap',
             ui_preferences: {
+                primary_color: '#22C55E',
                 disable_provided_text: false,
                 disable_token_select_pay: false,
                 disable_token_select_receive: false,
@@ -68,6 +71,9 @@ export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
         setOptions: (option) => {
             const { options, userOptions } = get();
             if (JSON.stringify(option) === JSON.stringify(userOptions)) return;
+            if (option.ui_preferences?.primary_color) {
+                setupColors(option.ui_preferences.primary_color);
+            }
             const newSchema = defaultsDeep(
                 option,
                 options

lib/utils/color/constants.ts

@@ -0,0 +1,46 @@
+import type { Mode, PaletteConfig } from './types';
+
+export const DEFAULT_STOP = 500;
+export const DEFAULT_STOPS = [
+    0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000,
+];
+
+export const MODES: Mode[] = [`hex`, `p-3`, 'oklch'];
+export const DEFAULT_MODE = MODES[0];
+
+export const DEFAULT_PALETTE_CONFIG: PaletteConfig = {
+    id: ``,
+    name: ``,
+    value: ``,
+    valueStop: DEFAULT_STOP,
+    swatches: [],
+    h: 0,
+    s: 0,
+    lMin: 0,
+    lMax: 100,
+    useLightness: true,
+    mode: MODES[0],
+};
+
+export const RANDOM_PALETTES = [
+    {
+        name: `blue`,
+        value: `3B82F6`,
+    },
+    {
+        name: `red`,
+        value: `EF4444`,
+    },
+    {
+        name: `green`,
+        value: `22C55E`,
+    },
+    {
+        name: `purple`,
+        value: `A855F7`,
+    },
+    {
+        name: `brand`,
+        value: `2522FC`,
+    },
+];

lib/utils/color/createSwatches.ts

@@ -0,0 +1,79 @@
+import { DEFAULT_PALETTE_CONFIG } from './constants';
+import {
+    clamp,
+    hexToHSL,
+    HSLToHex,
+    lightnessFromHSLum,
+    luminanceFromHex,
+    unsignedModulo,
+} from './helpers';
+import {
+    createDistributionValues,
+    createHueScale,
+    createSaturationScale,
+} from './scales';
+import type { PaletteConfig } from './types';
+
+export function createSwatches(palette: PaletteConfig) {
+    const { value, valueStop } = palette;
+
+    // Tweaks may be passed in, otherwise use defaults
+    const useLightness =
+        palette.useLightness ?? DEFAULT_PALETTE_CONFIG.useLightness;
+    const h = palette.h ?? DEFAULT_PALETTE_CONFIG.h;
+    const s = palette.s ?? DEFAULT_PALETTE_CONFIG.s;
+    const lMin = palette.lMin ?? DEFAULT_PALETTE_CONFIG.lMin;
+    const lMax = palette.lMax ?? DEFAULT_PALETTE_CONFIG.lMax;
+
+    // Create hue and saturation scales based on tweaks
+    const hueScale = createHueScale(h, valueStop);
+    const saturationScale = createSaturationScale(s, valueStop);
+
+    // Get the base hex's H/S/L values
+    const { h: valueH, s: valueS, l: valueL } = hexToHSL(value);
+
+    // Create lightness scales based on tweak + lightness/luminance of current value
+    const lightnessValue = useLightness ? valueL : luminanceFromHex(value);
+    const distributionScale = createDistributionValues(
+        lMin,
+        lMax,
+        lightnessValue,
+        valueStop
+    );
+
+    const swatches = hueScale.map(({ stop }, stopIndex) => {
+        const newH = unsignedModulo(valueH + hueScale[stopIndex].tweak, 360);
+        const newS = clamp(valueS + saturationScale[stopIndex].tweak, 0, 100);
+        let newL = useLightness
+            ? distributionScale[stopIndex].tweak
+            : lightnessFromHSLum(
+                  newH,
+                  newS,
+                  distributionScale[stopIndex].tweak
+              );
+        newL = clamp(newL, 0, 100);
+
+        const newHex = HSLToHex(newH, newS, newL);
+
+        return {
+            stop,
+            // Sometimes the initial value is changed slightly during conversion,
+            // overriding that with the original value
+            hex:
+                stop === valueStop
+                    ? `#${value.toUpperCase()}`
+                    : newHex.toUpperCase(),
+            // Used in graphs
+            h: newH,
+            hScale:
+                ((unsignedModulo(hueScale[stopIndex].tweak + 180, 360) - 180) /
+                    180) *
+                50,
+            s: newS,
+            sScale: newS - 50,
+            l: newL,
+        };
+    });
+
+    return swatches;
+}