Custom color

[njfamirm]

سلام من کاستوم کالر رو پیاده سازی کردم یکم اوردن تو tailwindش نکته داره البته و الان یکم ماسمالی کردم

import {argbFromHex, hexFromArgb, rgbaFromArgb, themeFromSourceColor} from '@material/material-color-utilities';
import {writeFileSync} from '@alwatr/node-fs';

const themeScheme = {
  primary: [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100],
  secondary: [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100],
  tertiary: [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100],
  neutral: [0, 4, 6, 10, 12, 17, 20, 22, 25, 30, 35, 40, 50, 60, 70, 80, 87, 90, 92, 94, 95, 96, 98, 99, 100],
  'neutral-variant': [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100],
  error: [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100],
};

function generateCssTheme(theme) {
  const cssTheme = {};
  for (const [key, palette] of Object.entries(theme.palettes)) {
    const paletteKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

    if (themeScheme[paletteKey]) {
      for (const tone of themeScheme[paletteKey]) {
        const token = `--ref-palette-${paletteKey}${tone}`;
        const color = rgbaFromArgb(palette.tone(tone));
        cssTheme[token] = `${color.r}, ${color.g}, ${color.b}`;
      }
    }
  }

  for (const color of theme.customColors) {
    const paletteKey = color.color.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

    cssTheme[`--ref-palette-${paletteKey}`] = hexFromArgb(color.light.color);
    cssTheme[`--ref-palette-${paletteKey}-container`] = hexFromArgb(color.light.colorContainer);
    cssTheme[`--ref-palette-on-${paletteKey}`] = hexFromArgb(color.light.onColor);
    cssTheme[`--ref-palette-on-${paletteKey}-container`] = hexFromArgb(color.light.onColorContainer);
  }

  return cssTheme;
}

function generateCssVariables(cssTheme) {
  return Object.entries(cssTheme)
    .map(([key, value]) => `${key}: ${value};`)
    .join('\n    ');
}

function generateTailwindClasses(theme) {
  return theme.customColors
    .map((color) => {
      const paletteKey = color.color.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
      return `
    .bg-custom-${paletteKey} {
      background-color: var(--ref-palette-${paletteKey});
    }
    .text-custom-${paletteKey} {
      color: var(--ref-palette-${paletteKey});
    }
    .border-custom-${paletteKey} {
      border-color: var(--ref-palette-${paletteKey});
    }
    .bg-custom-${paletteKey}-container {
      background-color: var(--ref-palette-${paletteKey}-container);
    }
    .text-custom-${paletteKey}-container {
      color: var(--ref-palette-${paletteKey}-container);
    }
    .border-custom-${paletteKey}-container {
      border-color: var(--ref-palette-${paletteKey}-container);
    }
    .bg-custom-on-${paletteKey} {
      background-color: var(--ref-palette-on-${paletteKey});
    }
    .text-custom-on-${paletteKey} {
      color: var(--ref-palette-on-${paletteKey});
    }
    .border-custom-on-${paletteKey} {
      border-color: var(--ref-palette-on-${paletteKey});
    }
    .bg-custom-on-${paletteKey}-container {
      background-color: var(--ref-palette-on-${paletteKey}-container);
    }
    .text-custom-on-${paletteKey}-container {
      color: var(--ref-palette-on-${paletteKey}-container);
    }
    .border-custom-on-${paletteKey}-container {
      border-color: var(--ref-palette-on-${paletteKey}-container);
    }
    `;
    })
    .join('\n    ');
}

function generateCssFileText(cssTheme, theme) {
  const cssVariables = generateCssVariables(cssTheme);
  const tailwindClasses = generateTailwindClasses(theme);

  return (
    `
/* Auto Generated by theme-builder.mjs */

@layer base {
  :root {
    ${cssVariables.trim()}
  }

  :root {
    ${tailwindClasses.trim()}
  }
}
  `.trim() + '\n'
  );
}

function cssFromSourceColor(sourceColor, customColors) {
  const theme = themeFromSourceColor(argbFromHex(sourceColor), customColors);

  const cssTheme = generateCssTheme(theme);
  const cssFileText = generateCssFileText(cssTheme, theme);

  writeFileSync('../style/color-palette.css', cssFileText);
  console.log('Done!');
}

cssFromSourceColor('#08296c', [
  {
    name: 'success',
    value: argbFromHex('#00FF00'),
    blend: true,
  },
]);

[njfamirm]

بیس کد هم از شما کپی کردم

[MM25Zamanian]

خیلی مخلصم!

اگر وقتش رو داری چرا خودت pr نمیزنی؟

ضمن اینکه بگو بهم این ابزار واقعا کمکت کرده ؟