lism-css 0.3.4 → 0.5.0

package/dist/config/defaults/props.js

@@ -0,0 +1,342 @@
+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 },
+  ff: { prop: "fontFamily", token: "ff", tokenClass: 1 },
+  fs: { prop: "fontStyle", presets: ["italic"], shorthands: { i: "italic" } },
+  lh: { prop: "lineHeight", presets: ["1"], token: "lh", tokenClass: 1, bp: 1, alwaysVar: 1 },
+  lts: { prop: "letterSpacing", token: "lts", tokenClass: 1 },
+  ta: { prop: "textAlign", presets: ["center", "left", "right"] },
+  td: { prop: "textDecoration", utils: { under: "underline", 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", 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: "",
+      outer: ""
+    }
+  },
+  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", utils: { no: "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", "inherit", "main", "accent"],
+    utils: { trsp: "transparent" },
+    token: "color",
+    exUtility: { inherit: { "background-color": "inherit" } },
+    alwaysVar: 1
+  },
+  c: {
+    // Note: bg系（bgclip）より後にくるように。
+    prop: "color",
+    presets: ["base", "text", "text-2", "main", "accent", "inherit"],
+    utils: { trsp: "transparent" },
+    // tt
+    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: ["main", "accent", "line", "inherit"],
+    utils: { trsp: "transparent" },
+    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: "marginInlineEnd", 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: {
+        "--cols": "1",
+        "--rows": "1",
+        "grid-template": "repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr)"
+      }
+    },
+    bp: 1
+  },
+  gta: { prop: "gridTemplateAreas", bp: 1 },
+  gtc: {
+    prop: "gridTemplateColumns",
+    presets: ["subgrid", "liquid"],
+    exUtility: {
+      // repeat: { '--cols': '1', '--gtc': 'repeat(var(--cols), 1fr)' },
+      liquid: { "--cols": "var(--sz--min)", "--gtc": "repeat(auto-fill, minmax(min(var(--cols), 100%), 1fr))" }
+    },
+    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
+  },
+  aslf: {
+    prop: "alignSelf",
+    presets: [...e, "stretch"],
+    shorthands: p
+  },
+  jslf: {
+    prop: "justifySelf",
+    presets: [...e, "stretch"],
+    shorthands: p
+  },
+  pi: { prop: "placeItems" },
+  pc: { prop: "placeContent" },
+  pslf: { prop: "placeSelf" },
+  order: { prop: "order", presets: ["0", "-1", "1"] },
+  // transform
+  translate: {
+    prop: "translate",
+    utils: {
+      "-50X": "-50% 0",
+      "-50Y": "0 -50%",
+      "-50XY": "-50% -50%"
+    }
+  },
+  //rtt
+  rotate: {
+    prop: "rotate",
+    utils: {
+      45: "45deg",
+      "-45": "-45deg",
+      90: "90deg",
+      "-90": "-90deg"
+      // '180': '180deg',
+    }
+  },
+  //scl
+  scale: {
+    prop: "scale",
+    utils: {
+      "-X": "-1 1",
+      "-Y": "1 -1",
+      "-XY": "-1 -1"
+    }
+  },
+  // others
+  // msk: { prop: 'mask', bp: 1 },
+  ovw: { prop: "overflowWrap", utils: { any: "anywhere" } },
+  whitespace: { prop: "whiteSpace", presets: ["nowrap"] },
+  // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
+  writing: { prop: "writingMode", token: "writing", tokenClass: 1, bp: 1 },
+  float: { prop: "float", presets: ["left", "right"] },
+  clear: { prop: "clear", presets: ["both"] },
+  isolation: { prop: "isolation", presets: ["isolate"] },
+  // transition
+  duration: { isVar: 1 },
+  delay: { isVar: 1 },
+  ease: { isVar: 1 }
+};
+export {
+  t as default
+};

package/dist/config/defaults/states.js

@@ -0,0 +1,36 @@
+import t from "../helper/getSvgUrl.js";
+const a = {
+  isContainer: {
+    className: "is--container",
+    preset: ["s", "m", "l"],
+    presetClass: "-container",
+    customVar: "--contentSz",
+    tokenKey: "sz"
+  },
+  isLayer: "is--layer",
+  isLinkBox: "is--linkBox",
+  isSide: "is--side",
+  isSkipFlow: "is--skipFlow",
+  hasGutter: "has--gutter",
+  // set class
+  setShadow: "set-shadow",
+  setHov: "set-hov",
+  setTransition: "set-transition",
+  setSnap: "set-snap",
+  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"
+};
+export {
+  a as default
+};

package/dist/config/defaults/tokens.js

@@ -0,0 +1,29 @@
+const e = {
+  fz: ["root", "base", "5xl", "4xl", "3xl", "2xl", "xl", "l", "m", "s", "xs", "2xs"],
+  lh: ["base", "xs", "s", "l", "xl"],
+  lts: ["base", "s", "l"],
+  ff: ["base", "accent", "mono"],
+  fw: ["thin", "light", "normal", "medium", "bold", "black"],
+  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", "outer"],
+  ar: ["og"],
+  space: {
+    pre: "--s",
+    values: ["5", "10", "20", "30", "40", "50", "60", "70", "80"]
+  },
+  c: {
+    pre: "--c--",
+    values: ["base", "base-2", "text", "text-2", "line", "link", "main", "accent"]
+  },
+  palette: {
+    pre: "--",
+    values: ["red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"]
+  },
+  writing: ["vertical"],
+  flow: ["s", "base", "l"]
+};
+export {
+  e as default
+};

package/dist/config/helper/getSvgUrl.js

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

package/dist/config/helper.js

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

package/dist/config/index.js

@@ -0,0 +1,11 @@
+import t from "./default-config.js";
+import r from "lism-css/config.js";
+import { arrayConvertToSet as o, objDeepMerge as e } from "./helper.js";
+const s = e(t, r), { tokens: n, props: c, states: m } = s, C = o(structuredClone(n)), S = o(structuredClone(c)), i = m, l = ["sm", "md", "lg", "xl"];
+export {
+  l as BREAK_POINTS,
+  s as CONFIG,
+  S as PROPS,
+  i as STATES,
+  C as TOKENS
+};

package/dist/index.js

@@ -1,54 +1,54 @@
-import { default as o } from "./components/Accordion/index.js";
-import { default as t } from "./components/Tabs/index.js";
-import { default as d } from "./components/Modal/index.js";
-import { default as l } from "./components/Lism/index.js";
-import { default as s } from "./components/Lism/Text.js";
-import { default as p } from "./components/Lism/Media.js";
+import { default as r } from "./components/HTML/index.js";
+import { default as t } from "./components/Accordion/index.js";
+import { default as d } from "./components/Tabs/index.js";
+import { default as m } from "./components/Modal/index.js";
+import { default as x } from "./components/Lism/index.js";
+import { default as p } from "./components/Lism/Text.js";
 import { default as n } from "./components/Lism/Link.js";
-import { default as C } from "./components/Dummy/index.js";
-import { default as k } from "./components/Box/index.js";
-import { default as F } from "./components/Flex/index.js";
-import { default as S } from "./components/Flex/FlexItem.js";
-import { default as B } from "./components/Flex/Cluster.js";
-import { default as M } from "./components/Stack/index.js";
-import { default as b } from "./components/Grid/index.js";
-import { default as v } from "./components/Grid/GridItem.js";
-import { default as W } from "./components/WithSide/index.js";
-import { default as j } from "./components/Center/index.js";
-import { default as w } from "./components/Columns/index.js";
-import { default as E } from "./components/Frame/index.js";
-import { default as J } from "./components/Container/index.js";
-import { default as N } from "./components/Layer/index.js";
-import { default as P } from "./components/LinkBox/index.js";
-import { default as R } from "./components/Icon/index.js";
-import { default as V } from "./components/Spacer/index.js";
-import { default as Y } from "./components/Decorator/index.js";
-import { default as _ } from "./components/Divider/index.js";
+import { default as L } from "./components/Dummy/index.js";
+import { default as k } from "./components/Container/index.js";
+import { default as F } from "./components/Layer/index.js";
+import { default as S } from "./components/LinkBox/index.js";
+import { default as y } from "./components/Box/index.js";
+import { default as b } from "./components/Flow/index.js";
+import { default as v } from "./components/Flex/index.js";
+import { default as A } from "./components/Cluster/index.js";
+import { default as H } from "./components/Stack/index.js";
+import { default as W } from "./components/Grid/index.js";
+import { default as j } from "./components/WithSide/index.js";
+import { default as z } from "./components/Center/index.js";
+import { default as J } from "./components/Columns/index.js";
+import { default as N } from "./components/Frame/index.js";
+import { default as P } from "./components/atomic/Decorator/index.js";
+import { default as R } from "./components/atomic/Divider/index.js";
+import { default as V } from "./components/atomic/Icon/index.js";
+import { default as Y } from "./components/atomic/Media/index.js";
+import { default as _ } from "./components/atomic/Spacer/index.js";
 export {
-  o as Accordion,
-  k as Box,
-  j as Center,
-  B as Cluster,
-  w as Columns,
-  J as Container,
-  Y as Decorator,
-  _ as Divider,
-  C as Dummy,
-  F as Flex,
-  S as FlexItem,
-  E as Frame,
-  b as Grid,
-  v as GridItem,
-  R as Icon,
-  N as Layer,
+  t as Accordion,
+  y as Box,
+  z as Center,
+  A as Cluster,
+  J as Columns,
+  k as Container,
+  P as Decorator,
+  R as Divider,
+  L as Dummy,
+  v as Flex,
+  b as Flow,
+  N as Frame,
+  W as Grid,
+  r as HTML,
+  V as Icon,
+  F as Layer,
   n as Link,
-  P as LinkBox,
-  l as Lism,
-  p as Media,
-  d as Modal,
-  V as Spacer,
-  M as Stack,
-  t as Tabs,
-  s as Text,
-  W as WithSide
+  S as LinkBox,
+  x as Lism,
+  Y as Media,
+  m as Modal,
+  _ as Spacer,
+  H as Stack,
+  d as Tabs,
+  p as Text,
+  j as WithSide
 };

package/dist/lib/getBpData.js

@@ -1,6 +1,6 @@
 import r from "./helper/filterEmptyObj.js";
 import m from "./helper/hasKeys.js";
-import { BREAK_POINTS as u } from "../config.js";
+import { BREAK_POINTS as u } from "../config/index.js";
 const f = ["base", ...u];
 function o(e) {
   let t = {};