unocss-preset-notoriun/dist/index.cjs

Preset Uno Notoriun

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const test = [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d}` })],
  [/^bc-(.+)$/, ([, color]) => ({ "border-color": `#${color}` })],
  [/^bg-img-(.*)$/, async ([, img]) => {
    return {
      "background-image": `url(../${img})`,
      "background-repeat": "no-repeat",
      "background-size": "cover",
      "background-position-x": "center",
      "background-position-y": "center"
    };
  }]
];

const rules = [...test];
const generateRule = (ruleMeta) => {
  return rules.map((r) => {
    r[2] = ruleMeta;
    return r;
  });
};

const shortcuts$1 = [
  ["btn", "m-2.5 bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded border-none cursor-pointer"],
  ["btn-green", "m-2.5 bg-green hover:bg-green text-black font-bold py-2 px-4 rounded border-none cursor-pointer"]
];

const shortcuts = [...shortcuts$1];
const generateShortcuts = (ruleMeta) => {
  return shortcuts.map((s) => {
    s[2] = ruleMeta;
    return s;
  });
};

const PRESET_NAME = "notoriun";

const ruleMeta = {
  layer: PRESET_NAME
};

const minMedia = "sm";
const maxMedia = "lg";
const mediaBreakpoints = {
  sm: 399,
  xs: 599,
  md: 1023,
  lg: 1439,
  xl: 1919,
  xxl: 2559,
  xxxl: 3200
};
const defaultMinBp = mediaBreakpoints[minMedia];
const defaultMaxBp = mediaBreakpoints[maxMedia];
const toRems = (px) => {
  const x = 16;
  return 1 / x * px;
};
const toPxs = (rem) => {
  const x = 16;
  return rem / (1 / x);
};
const clampedPx = (minPx, maxPx, minBp = defaultMinBp, maxBp = defaultMaxBp) => {
  const slope = (maxPx - minPx) / (maxBp - minBp);
  const slopeVw = parseFloat((slope * 100).toFixed(3));
  const interceptRems = parseFloat(toRems(minPx - slope * minBp).toFixed(4));
  const minRems = parseFloat(toRems(minPx).toFixed(4));
  const maxRems = parseFloat(toRems(maxPx).toFixed(4));
  return `clamp(${minRems}rem, ${slopeVw}vw + ${interceptRems}rem, ${maxRems}rem)`;
};
const clampedRem = (preferredRem, variation = 0.5, minBp = defaultMinBp, maxBp = defaultMaxBp) => {
  const minRem = preferredRem - variation;
  const maxRem = preferredRem + variation;
  return clampedPx(toPxs(minRem), toPxs(maxRem), minBp, maxBp);
};
const fluid = {
  clampedRem,
  clampedPx
};

const getFluid = () => {
  return fluid;
};
function presetNotoriun(options) {
  options.projectPath;
  const preset = {
    name: `unocss-preset-${PRESET_NAME}`,
    enforce: "post",
    layers: {
      [PRESET_NAME]: 2
    },
    rules: [
      ...generateRule(ruleMeta),
      [/^text-(.*)$/, ([, c], { theme }) => {
        if (theme.colors[c]) {
          return {
            color: theme.colors[c]
          };
        }
      }]
    ],
    shortcuts: generateShortcuts(ruleMeta),
    theme: {
      colors: {
        bg: {
          default: "#fefefe",
          dark: "#1c1f24"
        },
        text: {
          default: "#3D4248",
          dark: "#C8CCD0"
        },
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        tertiary: "var(--tertiary)",
        accent: "var(--accent)"
      }
    },
    variants: [
      (matcher) => {
        if (!matcher.startsWith("fluid:"))
          return matcher;
        return {
          matcher: matcher.slice(6),
          selector: (s) => s
        };
      }
    ],
    postprocess: (util) => {
      if (util.selector.startsWith(".fluid")) {
        util.entries.forEach((i) => {
          const value = i[1];
          i[1] = clampedRem(parseFloat(value.replace("rem", "")));
        });
      }
    }
  };
  return preset;
}

exports.getFluid = getFluid;
exports.presetNotoriun = presetNotoriun;