themer/dist/template/css.js

Customizable theme creator for editors, terminals, wallpaper, and more.

import Color from 'color';
import { source } from 'common-tags';
import { colorSetToVariants } from '../color-set/index.js';
const renderHex = (variant, key, color) => `--${variant}-${key}: ${color};`;
const renderRgb = (variant, key, color) => {
    const rgb = Color(color).rgb();
    return source `
    --${variant}-${key}: ${rgb.string(0)};
    --${variant}-${key}-r: ${rgb.red()};
    --${variant}-${key}-g: ${rgb.green()};
    --${variant}-${key}-b: ${rgb.blue()};
  `;
};
const renderHsl = (variant, key, color) => {
    const hsl = Color(color).hsl();
    return source `
    --${variant}-${key}: ${hsl.string(0)};
    --${variant}-${key}-h: ${Math.round(hsl.hue())};
    --${variant}-${key}-s: ${Math.round(hsl.saturationl())}%;
    --${variant}-${key}-l: ${Math.round(hsl.lightness())}%;
  `;
};
const formats = ['hex', 'rgb', 'hsl'];
const template = {
    name: 'CSS',
    render: async function* (colorSet) {
        const variants = colorSetToVariants(colorSet);
        for (const format of formats) {
            yield {
                path: `${colorSet.title.human} - ${format}.css`,
                content: source `
          :root {
            ${variants
                    .map((variant) => Object.entries(variant.colors)
                    .map(([key, color]) => {
                    switch (format) {
                        case 'hex':
                            return renderHex(variant.name, key, color);
                        case 'rgb':
                            return renderRgb(variant.name, key, color);
                        case 'hsl':
                            return renderHsl(variant.name, key, color);
                    }
                })
                    .join('\n\n'))
                    .join('\n\n')}
          }
        `,
            };
        }
    },
    renderInstructions: (paths) => source `
    Import the generated theme file into your stylesheet via \`@import()\`, or into your HTML markup via \`<link>\`.

    \`hex.css\` provides the theme colors in hex format; \`rgb.css\` and \`hsl.css\` in RGB and HSL formats respectively along with individual channel values for further manipulation if desired.

    Generated files:

    ${paths.map((path) => `* \`${path}\``)}
  `,
};
export default template;
//# sourceMappingURL=css.js.map