@lism-css/ui 0.9.2 → 0.10.0

package/dist/lism-css/dist/config/defaults/props.js

@@ -0,0 +1,340 @@
+const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "flex-end" }, p = { s: "start", e: "end", c: "center", fs: "flex-s", fe: "flex-e" }, t = {
+  f: { prop: "font", presets: ["inherit"] },
+  fz: { prop: "fontSize", token: "fz", tokenClass: 1, bp: 1, alwaysVar: 1 },
+  fw: {
+    prop: "fontWeight",
+    token: "fw",
+    tokenClass: 1,
+    presets: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
+  },
+  ff: { prop: "fontFamily", token: "ff", tokenClass: 1 },
+  fs: { prop: "fontStyle", presets: ["italic"], shorthands: { i: "italic" } },
+  lh: {
+    prop: "lineHeight",
+    presets: ["1"],
+    token: "hl",
+    tokenClass: 2,
+    exUtility: { 1: "" }
+  },
+  hl: {
+    isVar: 1,
+    token: "hl",
+    tokenClass: 0,
+    bp: 1
+  },
+  lts: { prop: "letterSpacing", token: "lts", tokenClass: 1 },
+  ta: { prop: "textAlign", presets: ["center", "left", "right"] },
+  td: { prop: "textDecoration", utils: { none: "none" } },
+  tt: { prop: "textTransform", utils: { upper: "uppercase", lower: "lowercase" } },
+  // te: { prop: 'textEmphasis', presets: ['filled'] },
+  // tsh: { prop: 'textShadow' },
+  d: {
+    prop: "display",
+    presets: ["none", "block"],
+    utils: { "in-flex": "inline-flex" },
+    bp: 1
+  },
+  o: { prop: "opacity", presets: ["0"], token: "o", tokenClass: 1 },
+  v: { prop: "visibility", presets: ["hidden"] },
+  ov: { prop: "overflow", presets: ["hidden", "auto", "clip"] },
+  "ov-x": { prop: "overflowX", presets: ["clip", "auto", "scroll"] },
+  "ov-y": { prop: "overflowY", presets: ["clip", "auto", "scroll"] },
+  // overflow-clip-margin → safariで使えない
+  ar: {
+    prop: "aspectRatio",
+    presets: ["21/9", "16/9", "3/2", "1/1"],
+    // 4/3, 2/1
+    token: "ar",
+    tokenClass: 1,
+    bp: 1
+  },
+  // size
+  w: { prop: "width", utils: { fit: "fit-content" }, presets: ["100%"], token: "sz", bp: 1 },
+  h: { prop: "height", utils: { fit: "fit-content" }, presets: ["100%"], token: "sz", bp: 1 },
+  "min-w": { prop: "minWidth", presets: ["100%"], token: "sz", bp: 1 },
+  "max-w": { prop: "maxWidth", presets: ["100%"], token: "sz", bp: 1 },
+  "min-h": { prop: "minHeight", presets: ["100%"], token: "sz", bp: 1 },
+  "max-h": { prop: "maxHeight", presets: ["100%"], token: "sz", bp: 1 },
+  sz: { prop: "inlineSize", token: "sz" },
+  "min-sz": { prop: "minInlineSize", token: "sz" },
+  "max-sz": {
+    prop: "maxInlineSize",
+    token: "sz",
+    tokenClass: 1,
+    exUtility: {
+      min: "",
+      full: "",
+      container: ""
+    }
+  },
+  ysz: { prop: "blockSize", token: "sz" },
+  "min-ysz": { prop: "minBlockSize", token: "sz" },
+  "max-ysz": { prop: "maxBlockSize", token: "sz" },
+  // bg
+  bg: { prop: "background", bp: 1 },
+  bgi: { prop: "backgroundImage" },
+  bgr: { prop: "backgroundRepeat", presets: ["no-repeat"] },
+  bgp: { prop: "backgroundPosition", presets: ["center"] },
+  bgsz: { prop: "backgroundSize", presets: ["cover", "contain"] },
+  // bga: { prop: 'backgroundAttachment' }, // fixed
+  // bgo: { prop: 'backgroundOrigin' }, // border, padding, content
+  // bgblend: { prop: 'backgroundBlendMode' },
+  // bgclip: {
+  // 	prop: 'backgroundClip',
+  // 	presets: ['text'],
+  // },
+  bgc: {
+    prop: "backgroundColor",
+    presets: ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"],
+    token: "color",
+    exUtility: { inherit: { "background-color": "inherit" } },
+    alwaysVar: 1
+  },
+  c: {
+    // Note: bg系（bgclip）より後にくるように。
+    prop: "color",
+    presets: ["base", "text", "text-2", "brand", "accent", "inherit"],
+    token: "color",
+    exUtility: {
+      inherit: { color: "inherit" }
+      // --c ではなく color で出力したい
+      // mix: {'--_c1:currentColor;--_c2:transparent;--c:color-mix(in srgb, var(--_c1) var(--_mix-c, 50%), var(--_c2))'},
+    },
+    alwaysVar: 1
+  },
+  keycolor: { isVar: 1, token: "color" },
+  bd: { prop: "border", presets: ["none"] },
+  bds: { isVar: 1, presets: ["dashed", "dotted", "double"] },
+  bdc: {
+    isVar: 1,
+    presets: ["brand", "accent", "divider", "inherit", "transparent"],
+    utils: { cc: "currentColor" },
+    token: "color"
+  },
+  bdw: { isVar: 1, bp: 1 },
+  // --bdw のみ
+  "bd-x": { prop: "borderInline" },
+  "bd-y": { prop: "borderBlock" },
+  "bd-x-s": { prop: "borderInlineStart" },
+  "bd-x-e": { prop: "borderInlineEnd" },
+  "bd-y-s": { prop: "borderBlockStart" },
+  "bd-y-e": { prop: "borderBlockEnd" },
+  "bd-t": { prop: "borderTop" },
+  "bd-b": { prop: "borderBottom" },
+  "bd-l": { prop: "borderLeft" },
+  "bd-r": { prop: "borderRight" },
+  bdrs: {
+    prop: "borderRadius",
+    presets: ["0"],
+    token: "bdrs",
+    tokenClass: 1,
+    bp: 1,
+    alwaysVar: 1,
+    overwriteBaseVar: 1
+  },
+  "bdrs-tl": { prop: "borderTopLeftRadius", token: "bdrs" },
+  "bdrs-tr": { prop: "borderTopRightRadius", token: "bdrs" },
+  "bdrs-br": { prop: "borderBottomRightRadius", token: "bdrs" },
+  "bdrs-bl": { prop: "borderBottomLeftRadius", token: "bdrs" },
+  "bdrs-ss": { prop: "borderStartStartRadius", token: "bdrs" },
+  "bdrs-se": { prop: "borderStartEndRadius", token: "bdrs" },
+  "bdrs-es": { prop: "borderEndStartRadius", token: "bdrs" },
+  "bdrs-ee": { prop: "borderEndEndRadius", token: "bdrs" },
+  bxsh: { prop: "boxShadow", utils: { 0: "none" }, token: "bxsh", tokenClass: 1, bp: 1, alwaysVar: 1 },
+  // position
+  pos: {
+    prop: "position",
+    presets: ["static", "fixed", "sticky"],
+    utils: { rel: "relative", abs: "absolute" }
+  },
+  z: { prop: "zIndex", presets: ["-1", "0", "1", "99"] },
+  t: { prop: "top", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
+  l: { prop: "left", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
+  r: { prop: "right", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
+  b: { prop: "bottom", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
+  i: { prop: "inset", utils: { 0: "0%" }, token: "space" },
+  "i-x": { prop: "insetInline", token: "space" },
+  "i-y": { prop: "insetBlock", token: "space" },
+  "i-x-s": { prop: "insetInlineStart", token: "space" },
+  "i-x-e": { prop: "insetInlineEnd", token: "space" },
+  "i-y-s": { prop: "insetBlockStart", token: "space" },
+  "i-y-e": { prop: "insetBlockEnd", token: "space" },
+  // space
+  p: {
+    prop: "padding",
+    presets: ["0"],
+    token: "space",
+    tokenClass: 1,
+    alwaysVar: 1,
+    overwriteBaseVar: 1,
+    bp: 1
+  },
+  px: { prop: "paddingInline", presets: ["0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
+  py: { prop: "paddingBlock", presets: ["0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
+  "px-s": { prop: "paddingInlineStart", token: "space", bp: 1 },
+  "px-e": { prop: "paddingInlineEnd", token: "space", bp: 1 },
+  "py-s": { prop: "paddingBlockStart", token: "space", bp: 1 },
+  "py-e": { prop: "paddingBlockEnd", token: "space", bp: 1 },
+  pl: { prop: "paddingLeft", token: "space", bp: 1 },
+  pr: { prop: "paddingRight", token: "space", bp: 1 },
+  pt: { prop: "paddingTop", token: "space", bp: 1 },
+  pb: { prop: "paddingBottom", token: "space", bp: 1 },
+  m: {
+    prop: "margin",
+    presets: ["auto", "0"],
+    token: "space",
+    tokenClass: 1,
+    alwaysVar: 1,
+    overwriteBaseVar: 1,
+    bp: 1
+  },
+  mx: { prop: "marginInline", presets: ["auto", "0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
+  my: { prop: "marginBlock", presets: ["auto", "0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
+  "mx-s": { prop: "marginInlineStart", presets: ["auto"], token: "space", bp: 1 },
+  "mx-e": { prop: "marginInlineEnd", presets: ["auto"], token: "space", bp: 1 },
+  "my-s": { prop: "marginBlockStart", token: "space", bp: 1, presets: ["auto", "0"], tokenClass: 1 },
+  "my-e": { prop: "marginBlockEnd", presets: ["auto"], token: "space", bp: 1 },
+  ml: { prop: "marginLeft", token: "space", bp: 1 },
+  mr: { prop: "marginRight", token: "space", bp: 1 },
+  mt: { prop: "marginTop", token: "space", bp: 1 },
+  mb: { prop: "marginBottom", token: "space", bp: 1 },
+  g: {
+    prop: "gap",
+    presets: ["0", "inherit"],
+    exUtility: { inherit: { gap: "inherit" } },
+    token: "space",
+    tokenClass: 1,
+    alwaysVar: 1,
+    overwriteBaseVar: 1,
+    bp: 1
+  },
+  "g-x": { prop: "columnGap", token: "space", bp: 1 },
+  "g-y": { prop: "rowGap", token: "space", bp: 1 },
+  cols: { isVar: 1, bp: 1 },
+  rows: { isVar: 1, bp: 1 },
+  // flex
+  fxf: { prop: "flexFlow" },
+  fxw: { prop: "flexWrap", presets: ["wrap"], bp: 1 },
+  fxd: { prop: "flexDirection", utils: { col: "column", "col-r": "column-reverse", "row-r": "row-reverse" }, bp: 1 },
+  fx: { prop: "flex", presets: ["1"], bp: 1 },
+  fxg: { prop: "flexGrow", presets: ["1"] },
+  fxsh: { prop: "flexShrink", presets: ["0"] },
+  fxb: { prop: "flexBasis", bp: 1 },
+  // grid
+  // gd: { prop: 'grid' },
+  gt: {
+    prop: "gridTemplate",
+    presets: ["repeat"],
+    exUtility: {
+      repeat: {
+        "grid-template": "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)"
+      }
+    },
+    bp: 1
+  },
+  gta: { prop: "gridTemplateAreas", bp: 1 },
+  gtc: {
+    prop: "gridTemplateColumns",
+    presets: ["subgrid"],
+    bp: 1
+  },
+  gtr: {
+    prop: "gridTemplateRows",
+    presets: ["subgrid"],
+    // exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
+    bp: 1
+  },
+  gaf: { prop: "gridAutoFlow", utils: { row: "row", col: "column" }, bp: 1 },
+  //dense
+  gac: { prop: "gridAutoColumns" },
+  gar: { prop: "gridAutoRows" },
+  // grid item
+  ga: { prop: "gridArea", utils: { "1/1": "1 / 1" }, bp: 1 },
+  gc: { prop: "gridColumn", utils: { "1/-1": "1 / -1" }, bp: 1 },
+  gr: { prop: "gridRow", utils: { "1/-1": "1 / -1" }, bp: 1 },
+  gcs: { prop: "gridColumnStart" },
+  gce: { prop: "gridColumnEnd" },
+  grs: { prop: "gridRowStart" },
+  gre: { prop: "gridRowEnd" },
+  // places
+  // -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
+  ai: {
+    prop: "alignItems",
+    presets: [...e, "stretch"],
+    utils: r,
+    shorthands: p,
+    bp: 1
+  },
+  ac: {
+    prop: "alignContent",
+    presets: e,
+    utils: { ...r, between: "space-between" },
+    shorthands: p,
+    bp: 1
+  },
+  ji: {
+    prop: "justifyItems",
+    presets: [...e, "stretch"],
+    utils: r,
+    shorthands: p,
+    bp: 1
+  },
+  jc: {
+    prop: "justifyContent",
+    presets: e,
+    utils: { ...r, between: "space-between" },
+    shorthands: p,
+    bp: 1
+  },
+  pi: { prop: "placeItems", presets: e },
+  pc: { prop: "placeContent", presets: e },
+  aslf: {
+    prop: "alignSelf",
+    presets: [...e, "stretch"],
+    shorthands: p
+  },
+  jslf: {
+    prop: "justifySelf",
+    presets: [...e, "stretch"],
+    shorthands: p
+  },
+  pslf: { prop: "placeSelf", presets: e },
+  order: { prop: "order", presets: ["0", "-1", "1"] },
+  // transform
+  // translate: {
+  // 	prop: 'translate',
+  // 	utils: {
+  // 		'-50X': '-50% 0',
+  // 		'-50Y': '0 -50%',
+  // 		'-50XY': '-50% -50%',
+  // 	},
+  // },
+  // rotate: {
+  // 	prop: 'rotate',
+  // 	utils: {
+  // 		[`45`]: '45deg',
+  // 		'-45': '-45deg',
+  // 		[`90`]: '90deg',
+  // 		'-90': '-90deg',
+  // 		// '180': '180deg',
+  // 	},
+  // },
+  // scale: {
+  // 	prop: 'scale',
+  // 	utils: {
+  // 		'-X': '-1 1',
+  // 		'-Y': '1 -1',
+  // 		'-XY': '-1 -1',
+  // 	},
+  // },
+  // others
+  ovwrap: { prop: "overflowWrap", utils: { any: "anywhere" } },
+  whspace: { prop: "whiteSpace", presets: ["nowrap"] },
+  // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
+  float: { prop: "float", presets: ["left", "right"] },
+  clear: { prop: "clear", presets: ["both"] },
+  isolation: { prop: "isolation", presets: ["isolate"] }
+};
+export {
+  t as default
+};

package/dist/lism-css/dist/config/defaults/states.js

@@ -0,0 +1,39 @@
+import t from "../helper/getSvgUrl.js";
+const a = {
+  isContainer: "is--container",
+  isWrapper: {
+    className: "is--wrapper",
+    preset: ["s", "l"],
+    presetClass: "-contentSize",
+    customVar: "--contentSize",
+    tokenKey: "sz"
+  },
+  isLayer: "is--layer",
+  isLinkBox: "is--linkBox",
+  isSide: "is--side",
+  isSkipFlow: "is--skipFlow",
+  isVertical: "is--vertical",
+  setGutter: "set--gutter",
+  // set class
+  setShadow: "set--shadow",
+  setHov: "set--hov",
+  setTransition: "set--transition",
+  setMask: {
+    // 'set--mask',
+    className: "set--mask",
+    setStyles: (e) => {
+      let s = e;
+      return s.startsWith("<svg") && (s = t(e, "base64")), {
+        "--maskImg": s
+      };
+    }
+  },
+  setPlain: "set--plain",
+  // setRevert: 'set--revert',
+  setInnerRs: "set--innerRs",
+  setBp: "set--bp",
+  setCqUnit: "set--cqUnit"
+};
+export {
+  a as default
+};

package/dist/lism-css/dist/config/defaults/tokens.js

@@ -0,0 +1,30 @@
+const e = {
+  fz: ["root", "base", "5xl", "4xl", "3xl", "2xl", "xl", "l", "m", "s", "xs", "2xs"],
+  lh: ["base", "xs", "s", "l"],
+  hl: ["base", "xs", "s", "l"],
+  lts: ["base", "s", "l"],
+  ff: ["base", "accent", "mono"],
+  fw: ["light", "normal", "bold"],
+  o: ["-10", "-20", "-30"],
+  bdrs: ["5", "10", "20", "30", "40", "50", "99", "inner"],
+  bxsh: ["5", "10", "20", "30", "40", "50"],
+  sz: ["xs", "s", "m", "l", "xl", "min", "full", "container"],
+  ar: ["og"],
+  space: {
+    pre: "--s",
+    values: ["5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
+  },
+  c: {
+    pre: "--",
+    values: ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent"]
+  },
+  palette: {
+    pre: "--",
+    values: ["red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"]
+  },
+  writing: ["vertical"],
+  flow: ["s", "l"]
+};
+export {
+  e as default
+};

package/dist/lism-css/dist/config/helper/getSvgUrl.js

@@ -0,0 +1,4 @@
+const g = (a, r = "") => a ? r === "base64" ? (a = Buffer.from(a).toString("base64"), `url(data:image/svg+xml;base64,${a})`) : (a = a.replace(/'/g, '"'), a = a.replace(/="#/g, '="%23'), `url('data:image/svg+xml,${a}')`) : "";
+export {
+  g as default
+};

package/dist/lism-css/dist/config/helper.js

@@ -0,0 +1,27 @@
+function s(n) {
+  return n !== null && typeof n == "object" && !Array.isArray(n);
+}
+function i(n, e) {
+  const t = { ...n };
+  for (const o in e)
+    if (Object.hasOwn(e, o)) {
+      const r = t[o], c = e[o];
+      r && s(c) && s(r) ? t[o] = i(r, c) : t[o] = c;
+    }
+  return t;
+}
+function a(n) {
+  if (Array.isArray(n))
+    return new Set(n);
+  if (s(n)) {
+    const e = {};
+    for (const t in n)
+      Object.hasOwn(n, t) && (e[t] = a(n[t]));
+    return e;
+  }
+  return n;
+}
+export {
+  a as arrayConvertToSet,
+  i as objDeepMerge
+};

package/dist/lism-css/dist/config/index.js

@@ -0,0 +1,17 @@
+import r from "./default-config.js";
+import a from "lism-css/config.js";
+import { objDeepMerge as e, arrayConvertToSet as t } from "./helper.js";
+let s = e(r, a);
+typeof window < "u" && window._LISM_CSS_CONFIG_ && (s = e(s, window._LISM_CSS_CONFIG_));
+const S = s, { tokens: o, props: _, states: l } = S, p = {
+  color: [...o.c.values, ...o.palette.values],
+  ...o
+}, c = t(structuredClone(p)), i = t(structuredClone(_)), I = l, m = ["sm", "md", "lg", "xl"], O = ["base", ...m];
+export {
+  m as BREAK_POINTS,
+  O as BREAK_POINTS_ALL,
+  S as CONFIG,
+  i as PROPS,
+  I as STATES,
+  c as TOKENS
+};

package/dist/lism-css/dist/lib/getBpData.js

@@ -0,0 +1,19 @@
+import e from "./helper/filterEmptyObj.js";
+import n from "./helper/hasSomeKeys.js";
+import { BREAK_POINTS_ALL as o } from "../config/index.js";
+function t(r) {
+  if (r === !0) return { base: !0 };
+  if (r !== 0 && !r) return {};
+  if (typeof r == "string" || typeof r == "number")
+    return { base: r };
+  if (Array.isArray(r)) {
+    const f = {};
+    return r.forEach((a, i) => {
+      f[`${o[i]}`] = a;
+    }), e(f);
+  }
+  return n(r, o) ? e(r) : e({ base: r });
+}
+export {
+  t as default
+};

package/dist/lism-css/dist/lib/getLayoutProps.js

@@ -0,0 +1,30 @@
+import i from "./helper/atts.js";
+import a from "./isTokenValue.js";
+import o from "./getMaybeCssVar.js";
+function w(l, t) {
+  if (!l) return t;
+  const s = {
+    ...t,
+    lismClass: i(t.lismClass, `l--${l}`)
+  };
+  return l === "flow" ? e(s) : l === "grid" ? f(s) : l === "sideMain" ? u(s) : l === "fluidCols" ? m(s) : l === "switchCols" ? c(s) : s;
+}
+function f({ _propConfig: l = {}, ...t }) {
+  return l.gta = { isVar: 1 }, l.gtc = { isVar: 1 }, l.gtr = { isVar: 1 }, { ...t, _propConfig: l };
+}
+function u({ sideW: l, mainW: t, style: s, ...n }) {
+  const r = { ...s };
+  return l != null && (r["--sideW"] = o(l, "sz")), t != null && (r["--mainW"] = o(t, "sz")), { ...n, style: r };
+}
+function m({ autoFill: l, style: t, ...s }) {
+  return l ? { ...s, style: { ...t, "--autoMode": "auto-fill" } } : { ...s, style: t };
+}
+function e({ flow: l, style: t, ...s }) {
+  return a("flow", l) ? s.lismClass = i(s.lismClass, `-flow:${l}`) : l && (s.lismClass = i(s.lismClass, "-flow:"), t = { ...t, "--flow": o(l, "space") }), { ...s, style: t };
+}
+function c({ breakSize: l, style: t, ...s }) {
+  return l ? { ...s, style: { ...t, "--breakSize": o(l, "sz") } } : { ...s, style: t };
+}
+export {
+  w as default
+};