@symbo.ls/scratch 3.8.9 → 3.14.1

package/dist/esm/system/theme.js

@@ -1,480 +0,0 @@
-import { getColor } from "./color";
-import { getActiveConfig } from "../factory.js";
-import { isCSSVar } from "../utils/color.js";
-import {
-  isObject,
-  isString,
-  isObjectLike,
-  isArray
-} from "@domql/utils";
-const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
-  "black",
-  "white",
-  "red",
-  "green",
-  "blue",
-  "yellow",
-  "orange",
-  "purple",
-  "pink",
-  "brown",
-  "gray",
-  "grey",
-  "cyan",
-  "magenta",
-  "lime",
-  "olive",
-  "navy",
-  "teal",
-  "aqua",
-  "maroon",
-  "silver",
-  "fuchsia",
-  "transparent",
-  "currentColor",
-  "currentcolor",
-  "inherit",
-  "initial",
-  "unset",
-  "none",
-  "aliceblue",
-  "antiquewhite",
-  "aquamarine",
-  "azure",
-  "beige",
-  "bisque",
-  "blanchedalmond",
-  "blueviolet",
-  "burlywood",
-  "cadetblue",
-  "chartreuse",
-  "chocolate",
-  "coral",
-  "cornflowerblue",
-  "cornsilk",
-  "crimson",
-  "darkblue",
-  "darkcyan",
-  "darkgoldenrod",
-  "darkgray",
-  "darkgreen",
-  "darkgrey",
-  "darkkhaki",
-  "darkmagenta",
-  "darkolivegreen",
-  "darkorange",
-  "darkorchid",
-  "darkred",
-  "darksalmon",
-  "darkseagreen",
-  "darkslateblue",
-  "darkslategray",
-  "darkslategrey",
-  "darkturquoise",
-  "darkviolet",
-  "deeppink",
-  "deepskyblue",
-  "dimgray",
-  "dimgrey",
-  "dodgerblue",
-  "firebrick",
-  "floralwhite",
-  "forestgreen",
-  "gainsboro",
-  "ghostwhite",
-  "gold",
-  "goldenrod",
-  "greenyellow",
-  "honeydew",
-  "hotpink",
-  "indianred",
-  "indigo",
-  "ivory",
-  "khaki",
-  "lavender",
-  "lavenderblush",
-  "lawngreen",
-  "lemonchiffon",
-  "lightblue",
-  "lightcoral",
-  "lightcyan",
-  "lightgoldenrodyellow",
-  "lightgray",
-  "lightgreen",
-  "lightgrey",
-  "lightpink",
-  "lightsalmon",
-  "lightseagreen",
-  "lightskyblue",
-  "lightslategray",
-  "lightslategrey",
-  "lightsteelblue",
-  "lightyellow",
-  "limegreen",
-  "linen",
-  "mediumaquamarine",
-  "mediumblue",
-  "mediumorchid",
-  "mediumpurple",
-  "mediumseagreen",
-  "mediumslateblue",
-  "mediumspringgreen",
-  "mediumturquoise",
-  "mediumvioletred",
-  "midnightblue",
-  "mintcream",
-  "mistyrose",
-  "moccasin",
-  "navajowhite",
-  "oldlace",
-  "olivedrab",
-  "orangered",
-  "orchid",
-  "palegoldenrod",
-  "palegreen",
-  "paleturquoise",
-  "palevioletred",
-  "papayawhip",
-  "peachpuff",
-  "peru",
-  "plum",
-  "powderblue",
-  "rosybrown",
-  "royalblue",
-  "saddlebrown",
-  "salmon",
-  "sandybrown",
-  "seagreen",
-  "seashell",
-  "sienna",
-  "skyblue",
-  "slateblue",
-  "slategray",
-  "slategrey",
-  "snow",
-  "springgreen",
-  "steelblue",
-  "tan",
-  "thistle",
-  "tomato",
-  "turquoise",
-  "violet",
-  "wheat",
-  "whitesmoke",
-  "yellowgreen",
-  "rebeccapurple"
-]);
-const setThemeValue = (theme) => {
-  const value = {};
-  const { state, media, helpers, ...rest } = theme;
-  const keys = Object.keys(rest);
-  keys.map((key) => {
-    const conditions = ["color", "Color", "background", "border"];
-    const isColor = conditions.some((k) => key.includes(k));
-    return value[key] = isColor ? getColor(theme[key]) : theme[key];
-  });
-  return value;
-};
-const getThemeValue = (theme) => {
-  if (theme.value) return theme.value;
-  theme.value = setThemeValue(theme);
-  return theme.value;
-};
-const getTheme = (value, modifier) => {
-  const CONFIG = getActiveConfig();
-  if (CONFIG.useVariable) return getMediaTheme(value, modifier);
-  const THEME = CONFIG.theme;
-  if (isString(value)) {
-    const [theme, subtheme] = value.split(" ");
-    const isOurTheme = THEME[theme];
-    if (isOurTheme) {
-      if (!subtheme && !modifier) return getThemeValue(isOurTheme);
-      value = [theme, subtheme || modifier];
-    }
-  }
-  if (isObjectLike(value) && value[1]) {
-    const themeName = value[0];
-    const subThemeName = value[1];
-    const { helpers, media, state } = THEME[themeName];
-    if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
-    if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
-    if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
-  } else if (isObject(value)) return setThemeValue(value);
-};
-const setInverseTheme = (theme, variant, value) => {
-  if (isObject(variant)) {
-    theme.variants.inverse.value = setThemeValue(variant);
-  } else if (variant === true) {
-    const { color, background } = value;
-    theme.variants.inverse = {
-      value: {
-        color: background,
-        background: color
-      }
-    };
-  }
-};
-const setPseudo = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant);
-  themeValue[`&:${key}`] = result;
-  if (isObject(variant) && !variant.value) variant.value = result;
-};
-const setSelectors = (theme, value) => {
-  const { state } = theme;
-  if (!state) return;
-  const keys = Object.keys(state);
-  keys.map((key) => {
-    const variant = state[key];
-    setPseudo(theme, key, variant, value);
-    return theme;
-  });
-  return theme;
-};
-const setPrefersScheme = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant);
-  themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-  if (isObject(variant) && !variant.value) variant.value = result;
-};
-const setMedia = (theme, value) => {
-  const { media } = theme;
-  if (!media) return;
-  const keys = Object.keys(media);
-  keys.map((key) => {
-    const variant = media[key];
-    if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
-    if (key === "inverse") setInverseTheme(theme, variant, value);
-    return theme;
-  });
-  return theme;
-};
-const setHelpers = (theme, value) => {
-  const CONFIG = getActiveConfig();
-  const { helpers } = theme;
-  if (!helpers) return;
-  const keys = Object.keys(helpers);
-  keys.map((key) => {
-    const helper = helpers[key];
-    if (isString(helper)) helpers[key] = CONFIG.theme[helper];
-    else getThemeValue(helpers[key]);
-    return theme;
-  });
-  return theme;
-};
-const setTheme = (val, key) => {
-  const CONFIG = getActiveConfig();
-  if (CONFIG.useVariable) return setMediaTheme(val, key);
-  const { state, media, helpers } = val;
-  const value = setThemeValue(val, key);
-  const CSSvar = `--theme-${key}`;
-  setSelectors(val, value);
-  setMedia(val, value);
-  setHelpers(val, value);
-  return { var: CSSvar, value, state, media, helpers };
-};
-const keySetters = {
-  // eslint-disable-line
-  "@": (theme, value) => setMedia(theme, value),
-  ":": (theme, value) => setSelectors(theme, value),
-  ".": (theme, value) => setHelpers(theme, value)
-};
-const generateAutoVars = (schemes, varPrefix, CONFIG) => {
-  const { CSS_VARS } = CONFIG;
-  if (!CONFIG.CSS_MEDIA_VARS) CONFIG.CSS_MEDIA_VARS = {};
-  const MEDIA_VARS = CONFIG.CSS_MEDIA_VARS;
-  const globalTheme = CONFIG.globalTheme !== void 0 ? CONFIG.globalTheme : "auto";
-  const result = {};
-  const allKeys = /* @__PURE__ */ new Set();
-  for (const scheme in schemes) {
-    if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
-  }
-  const brokenSchemes = /* @__PURE__ */ new Set();
-  if (globalTheme === "auto") {
-    for (const param of allKeys) {
-      const symb = param.slice(0, 1);
-      if (symb === "@" || symb === "." || symb === ":") continue;
-      for (const scheme in schemes) {
-        if (brokenSchemes.has(scheme)) continue;
-        const val = schemes[scheme]?.[param];
-        if (val === void 0) continue;
-        const color = getColor(val, `@${scheme}`);
-        if (color === void 0) continue;
-        if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
-          brokenSchemes.add(scheme);
-        }
-      }
-    }
-  }
-  for (const param of allKeys) {
-    const symb = param.slice(0, 1);
-    const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
-    if (symb === "." && hasObject) {
-      const helperName = param.slice(1);
-      const subSchemes = {};
-      for (const scheme in schemes) {
-        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
-      }
-      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG);
-    } else if (symb === ":" && hasObject) {
-      const pseudoName = param.replace(/^:+/, "");
-      const subSchemes = {};
-      for (const scheme in schemes) {
-        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
-      }
-      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG);
-    } else if (symb !== "@" && symb !== "." && symb !== ":") {
-      const autoVar = `--theme-${varPrefix}-${param}`;
-      if (globalTheme === "auto") {
-        let fallbackColor;
-        for (const scheme in schemes) {
-          if (brokenSchemes.has(scheme)) continue;
-          const val = schemes[scheme]?.[param];
-          if (val === void 0) continue;
-          const color = getColor(val, `@${scheme}`);
-          if (color === void 0) continue;
-          if (scheme === "light" || fallbackColor === void 0) {
-            fallbackColor = color;
-          }
-          const selector = `[data-theme="${scheme}"]`;
-          if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
-          MEDIA_VARS[selector][autoVar] = color;
-          if (scheme === "dark" || scheme === "light") {
-            const mq = `@media (prefers-color-scheme: ${scheme})`;
-            if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
-            MEDIA_VARS[mq][autoVar] = color;
-          }
-        }
-        if (fallbackColor !== void 0) {
-          CSS_VARS[autoVar] = fallbackColor;
-        }
-      } else {
-        const forced = String(globalTheme).replace(/^'|'$/g, "");
-        const source = schemes[forced]?.[param];
-        if (source !== void 0) {
-          const color = getColor(source, `@${forced}`);
-          if (color !== void 0) CSS_VARS[autoVar] = color;
-        }
-      }
-      result[param] = `var(${autoVar})`;
-      result[`.${param}`] = { [param]: result[param] };
-    }
-  }
-  if (result.background || result.color || result.backgroundColor) {
-    result[".inversed"] = {
-      color: result.background || result.backgroundColor,
-      background: result.color
-    };
-  }
-  return result;
-};
-const setMediaTheme = (val, key, suffix, prefers) => {
-  const CONFIG = getActiveConfig();
-  const { CSS_VARS } = CONFIG;
-  const theme = { value: val };
-  const isTopLevel = !suffix && !prefers;
-  if (isObjectLike(val)) {
-    if (isTopLevel && CONFIG.useVariable) {
-      const schemes = {};
-      for (const param in val) {
-        if (param.startsWith("@") && isObjectLike(val[param])) {
-          schemes[param.slice(1)] = val[param];
-        }
-      }
-      if (Object.keys(schemes).length) {
-        const autoResult = generateAutoVars(schemes, key, CONFIG);
-        Object.assign(theme, autoResult);
-      }
-    }
-    for (const param in val) {
-      const symb = param.slice(0, 1);
-      const value = val[param];
-      if (symb === "@" || symb === ":" || symb === ".") {
-        const hasPrefers = symb === "@" && param;
-        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
-      } else if (!isTopLevel) {
-        const color = getColor(value, prefers);
-        const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
-        const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
-        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
-        if (CONFIG.useVariable) {
-          if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color;
-          theme[param] = `var(${CSSVar})`;
-        } else {
-          theme[param] = color;
-        }
-        theme[`.${param}`] = { [param]: theme[param] };
-      }
-    }
-    if (!theme[".inversed"] && (theme.background || theme.color || theme.backgroundColor)) {
-      theme[".inversed"] = {
-        color: theme.background || theme.backgroundColor,
-        background: theme.color
-      };
-    }
-  }
-  if (isString(val) && isCSSVar(val)) {
-    const THEME = CONFIG.theme;
-    const value = THEME[val.slice(2)];
-    const getReferenced = getMediaTheme(value, prefers);
-    return getReferenced;
-  }
-  return theme;
-};
-const recursiveTheme = (val) => {
-  const CONFIG = getActiveConfig();
-  const obj = {};
-  for (const param in val) {
-    const symb = param.slice(0, 1);
-    if (isObjectLike(val[param])) {
-      if (symb === "@") {
-        continue;
-      } else if (symb === ":") {
-        obj[`&${param}`] = recursiveTheme(val[param]);
-      } else if (symb === ".") {
-        obj[`&${param}`] = recursiveTheme(val[param]);
-      }
-    } else obj[param] = val[param];
-  }
-  return obj;
-};
-const findModifierFromArray = (val, modifierArray) => {
-  const currentMod = modifierArray.shift();
-  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
-  return val;
-};
-const findModifier = (val, modifier) => {
-  if (isArray(modifier)) return findModifierFromArray(val, modifier);
-  else if (isString(modifier) && val[modifier]) return val[modifier];
-  else return val;
-};
-const checkForReference = (val, callback) => {
-  if (isString(val) && isCSSVar(val)) return getMediaTheme(val.slice(2));
-  return val;
-};
-const checkThemeReference = (val) => checkForReference(val, checkThemeReference);
-const getMediaTheme = (value, modifier) => {
-  const activeConfig = getActiveConfig();
-  if (isString(value) && isCSSVar(value)) {
-    value = getMediaTheme(value.slice(2));
-  }
-  if (!value || !isString(value)) {
-    if (activeConfig.verbose) {
-      console.warn(`${value} - Theme is not a string`);
-    }
-    return;
-  }
-  const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
-  let themeValue = activeConfig.theme[themeName];
-  if (themeValue && themeModifiers.length) {
-    themeValue = findModifier(themeValue, themeModifiers);
-  } else if (themeValue && modifier) {
-    themeValue = findModifier(themeValue, modifier);
-  }
-  const resolvedTheme = recursiveTheme(themeValue);
-  return resolvedTheme;
-};
-export {
-  getMediaTheme,
-  getTheme,
-  setMediaTheme,
-  setTheme
-};

package/dist/esm/system/timing.js

@@ -1,32 +0,0 @@
-import { toCamelCase } from "@symbo.ls/smbls-utils";
-import { getActiveConfig } from "../factory.js";
-import {
-  applySequenceVars,
-  generateSequence,
-  getSequenceValuePropertyPair
-} from "../utils";
-const applyTimingSequence = () => {
-  const CONFIG = getActiveConfig();
-  const { timing: TIMING } = CONFIG;
-  generateSequence(TIMING);
-  applySequenceVars(TIMING);
-};
-const getTimingFunction = (value) => {
-  const CONFIG = getActiveConfig();
-  const { timing: TIMING } = CONFIG;
-  return TIMING[value] || TIMING[toCamelCase(value)] || value;
-};
-const getTimingByKey = (value, property = "timing") => {
-  const CONFIG = getActiveConfig();
-  const { timing: TIMING } = CONFIG;
-  return getSequenceValuePropertyPair(
-    value,
-    property,
-    TIMING
-  );
-};
-export {
-  applyTimingSequence,
-  getTimingByKey,
-  getTimingFunction
-};

package/dist/esm/system/typography.js

@@ -1,85 +0,0 @@
-import { merge } from "@domql/utils";
-import { getActiveConfig } from "../factory.js";
-import {
-  applyMediaSequenceVars,
-  applySequenceVars,
-  findHeadings,
-  generateSequence,
-  getSequenceValuePropertyPair
-} from "../utils";
-const runThroughMedia = (FACTORY) => {
-  const CONFIG = getActiveConfig();
-  const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG;
-  for (const prop in FACTORY) {
-    const isPropMedia = prop.slice(0, 1) === "@";
-    const mediaValue = FACTORY[prop];
-    if (!isPropMedia) continue;
-    const { mediaRegenerate } = FACTORY;
-    const mediaName = prop.slice(1);
-    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY;
-    merge(mediaValue, {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    });
-    const query = MEDIA[mediaName];
-    const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-    TYPOGRAPHY.templates[media] = {
-      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
-    };
-    if (!mediaRegenerate) {
-      applyMediaSequenceVars(FACTORY, prop);
-      continue;
-    }
-    merge(mediaValue, {
-      sequence: {},
-      scales: {},
-      templates: {},
-      vars: {}
-    });
-    generateSequence(mediaValue);
-    applyMediaSequenceVars(FACTORY, prop);
-  }
-};
-const applyHeadings = (props) => {
-  const CONFIG = getActiveConfig();
-  if (props.h1Matches) {
-    const unit = props.unit;
-    const HEADINGS = findHeadings(props);
-    const { templates } = props;
-    for (const k in HEADINGS) {
-      const headerName = `h${parseInt(k) + 1}`;
-      const headerStyle = templates[headerName];
-      templates[headerName] = {
-        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k]?.variable})` : `${HEADINGS[k]?.scaling}${unit}`,
-        margin: headerStyle ? headerStyle.margin : 0,
-        lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
-        letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
-        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
-      };
-    }
-  }
-};
-const applyTypographySequence = () => {
-  const CONFIG = getActiveConfig();
-  const { typography: TYPOGRAPHY } = CONFIG;
-  generateSequence(TYPOGRAPHY);
-  applyHeadings(TYPOGRAPHY);
-  applySequenceVars(TYPOGRAPHY);
-  runThroughMedia(TYPOGRAPHY);
-};
-const getFontSizeByKey = (value) => {
-  const CONFIG = getActiveConfig();
-  const { typography: TYPOGRAPHY } = CONFIG;
-  return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY);
-};
-export {
-  applyHeadings,
-  applyTypographySequence,
-  getFontSizeByKey,
-  runThroughMedia
-};

package/dist/esm/tests/index.js

@@ -1,8 +0,0 @@
-const testWCAGAA = (colorA, colorB) => {
-};
-const testWCAGAAA = (colorA, colorB) => {
-};
-export {
-  testWCAGAA,
-  testWCAGAAA
-};