lism-css 0.22.1 → 0.23.0-beta.0

package/dist/config/defaults/props.js

@@ -1,4 +1,4 @@
-const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "start", e: "end", c: "center", fs: "flex-start", fe: "flex-end" }, t = {
+const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "start", e: "end", c: "center", fs: "flex-start", fe: "flex-end" }, o = {
   f: { prop: "font", presets: ["inherit"] },
   fz: { prop: "fontSize", token: "fz", tokenClass: 1, bp: 1 },
   fw: {
@@ -10,19 +10,20 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   ff: { prop: "fontFamily", token: "ff", tokenClass: 1 },
   fs: { prop: "fontStyle", presets: ["italic"], shorthands: { i: "italic" } },
   lh: {
-    prop: "lineHeight",
-    presets: ["1"],
+    prop: "--hl",
+    isVar: 1,
     token: "hl",
-    tokenClass: 2,
-    exUtility: { 1: "" }
+    tokenClass: 1,
+    utils: { 1: "0px" }
   },
   hl: {
+    prop: "--hl",
     isVar: 1,
     token: "hl",
-    tokenClass: 0,
-    bp: 0
+    tokenClass: 1,
+    bp: 1
   },
-  lts: { prop: "letterSpacing", token: "lts", tokenClass: 1, bp: 0 },
+  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" } },
@@ -31,7 +32,7 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   d: {
     prop: "display",
     presets: ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"],
-    bp: "lg"
+    bp: 1
   },
   o: { prop: "opacity", presets: ["0"], token: "o", tokenClass: 1 },
   v: { prop: "visibility", presets: ["hidden"] },
@@ -71,7 +72,7 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   "min-bsz": { prop: "minBlockSize", token: "sz" },
   "max-bsz": { prop: "maxBlockSize", token: "sz" },
   // bg
-  bg: { prop: "background", bp: 0 },
+  bg: { prop: "background" },
   bgi: { prop: "backgroundImage" },
   bgr: { prop: "backgroundRepeat", presets: ["no-repeat"] },
   bgp: { prop: "backgroundPosition", presets: ["center"] },
@@ -173,10 +174,10 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   pe: { prop: "paddingInlineEnd", token: "space", bp: 1 },
   pbs: { prop: "paddingBlockStart", token: "space", bp: 1 },
   pbe: { prop: "paddingBlockEnd", token: "space", bp: 1 },
-  pl: { prop: "paddingLeft", token: "space", bp: 0 },
-  pr: { prop: "paddingRight", token: "space", bp: 0 },
-  pt: { prop: "paddingTop", token: "space", bp: 0 },
-  pb: { prop: "paddingBottom", token: "space", bp: 0 },
+  pl: { prop: "paddingLeft", token: "space" },
+  pr: { prop: "paddingRight", token: "space" },
+  pt: { prop: "paddingTop", token: "space" },
+  pb: { prop: "paddingBottom", token: "space" },
   m: {
     prop: "margin",
     presets: ["auto", "0"],
@@ -191,21 +192,21 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   me: { prop: "marginInlineEnd", presets: ["auto"], token: "space", bp: 1 },
   mbs: { prop: "marginBlockStart", token: "space", bp: 1, presets: ["auto", "0"], tokenClass: 1 },
   mbe: { prop: "marginBlockEnd", presets: ["auto"], token: "space", bp: 1 },
-  ml: { prop: "marginLeft", token: "space", bp: 0 },
-  mr: { prop: "marginRight", token: "space", bp: 0 },
-  mt: { prop: "marginTop", token: "space", bp: 0 },
-  mb: { prop: "marginBottom", token: "space", bp: 0 },
+  ml: { prop: "marginLeft", token: "space" },
+  mr: { prop: "marginRight", token: "space" },
+  mt: { prop: "marginTop", token: "space" },
+  mb: { prop: "marginBottom", token: "space" },
   g: {
     prop: "gap",
     presets: ["0", "inherit"],
     exUtility: { inherit: { gap: "inherit" } },
     token: "space",
     tokenClass: 1,
-    bp: "lg"
+    bp: 1
   },
-  cg: { prop: "columnGap", token: "space", bp: 0 },
-  rg: { prop: "rowGap", token: "space", bp: 0 },
-  cols: { isVar: 1, bp: "lg" },
+  cg: { prop: "columnGap", token: "space" },
+  rg: { prop: "rowGap", token: "space" },
+  cols: { isVar: 1, bp: 1 },
   rows: { isVar: 1, bp: 1 },
   // flex
   fxf: { prop: "flexFlow" },
@@ -221,25 +222,25 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
     prop: "gridTemplate",
     bp: 1
   },
-  gta: { prop: "gridTemplateAreas", bp: "lg" },
+  gta: { prop: "gridTemplateAreas", bp: 1 },
   gtc: {
     prop: "gridTemplateColumns",
     presets: ["subgrid"],
-    bp: "lg"
+    bp: 1
   },
   gtr: {
     prop: "gridTemplateRows",
     presets: ["subgrid"],
-    bp: "lg"
+    bp: 1
   },
   gaf: { prop: "gridAutoFlow", presets: ["row", "column"], bp: 1 },
   //dense
   gac: { prop: "gridAutoColumns" },
   gar: { prop: "gridAutoRows" },
   // grid item
-  ga: { prop: "gridArea", utils: { "1/1": "1 / 1" }, bp: "lg" },
-  gc: { prop: "gridColumn", utils: { "1/-1": "1 / -1" }, bp: "lg" },
-  gr: { prop: "gridRow", utils: { "1/-1": "1 / -1" }, bp: "lg" },
+  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" },
@@ -323,5 +324,5 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   wm: { prop: "writingMode", presets: ["vertical-rl"], bp: 1 }
 };
 export {
-  t as default
+  o as default
 };

package/dist/config/defaults/token-scope.d.ts

@@ -0,0 +1,9 @@
+/**
+ * スコープ上書きを伴うトークンの「再宣言セレクタ」
+ *
+ * 構造変数を上書きできるクラスを持つトークン（.set--s で単位を em 化 / .set--bxsh で影色を差し替え等）
+ */
+export declare const TOKEN_SCOPE: {
+    readonly space: "set--s";
+    readonly bxsh: "set--bxsh";
+};

package/dist/config/defaults/token-scope.js

@@ -0,0 +1,7 @@
+const s = {
+  space: "set--s",
+  bxsh: "set--bxsh"
+};
+export {
+  s as TOKEN_SCOPE
+};

package/dist/config/defaults/token-var-prefix.d.ts

@@ -0,0 +1,11 @@
+/**
+ * トークンの CSS 変数名ルール（プレフィックス）
+ *
+ * 既定の変数名は `--{token}--{key}`（例: --fz--xs）。
+ * このマップに列挙したトークンだけフラット命名 `{prefix}{key}` に切り替える。
+ */
+export declare const TOKEN_VAR_PREFIX: {
+    readonly space: "--s";
+    readonly color: "--";
+    readonly palette: "--";
+};

package/dist/config/defaults/token-var-prefix.js

@@ -0,0 +1,11 @@
+const e = {
+  space: "--s",
+  // --s30
+  color: "--",
+  // --brand
+  palette: "--"
+  // --red
+};
+export {
+  e as TOKEN_VAR_PREFIX
+};

package/dist/config/defaults/tokens.d.ts

@@ -1,28 +1,125 @@
+/**
+ * デザイントークン（キー: 値）。
+ *
+ * - キーの順序がそのままカタログ順になる（Object.keys）。
+ * ユーティリティ生成・prop 受理・型導出はすべてこのキー集合から導出される。
+ * - 値はビルド時に生成 SCSS（`base/tokens/_tokens.gen.scss`）へ出力される。
+ * - 値 `'-'` は「カタログに登録するがcssの出力はしない」もの。実値はscssで手書き。
+ */
 declare const _default: {
-    readonly fz: readonly ["root", "base", "5xl", "4xl", "3xl", "2xl", "xl", "l", "m", "s", "xs", "2xs"];
-    readonly lh: readonly ["base", "xs", "s", "l"];
-    readonly hl: readonly ["base", "xs", "s", "l"];
-    readonly lts: readonly ["base", "s", "l", "xl"];
-    readonly ff: readonly ["base", "accent", "mono"];
-    readonly fw: readonly ["light", "normal", "bold"];
-    readonly o: readonly ["mp", "p", "pp", "ppp"];
-    readonly bdrs: readonly ["10", "20", "30", "40", "99", "inner"];
-    readonly bxsh: readonly ["10", "20", "30", "40", "50"];
-    readonly sz: readonly ["xs", "s", "m", "l", "xl"];
-    readonly ar: readonly ["og"];
+    readonly color: {
+        readonly base: "-";
+        readonly 'base-2': "-";
+        readonly text: "-";
+        readonly 'text-2': "-";
+        readonly divider: "-";
+        readonly link: "-";
+        readonly brand: "-";
+        readonly accent: "-";
+        readonly neutral: "-";
+    };
+    readonly palette: {
+        readonly red: "-";
+        readonly blue: "-";
+        readonly green: "-";
+        readonly yellow: "-";
+        readonly purple: "-";
+        readonly orange: "-";
+        readonly pink: "-";
+        readonly gray: "-";
+        readonly white: "#fff";
+        readonly black: "#000";
+        readonly keycolor: "-";
+    };
+    readonly fz: {
+        readonly base: "1rem";
+        readonly '5xl': "calc(1em * var(--fz-mol) / (var(--fz-mol) - 6))";
+        readonly '4xl': "calc(1em * var(--fz-mol) / (var(--fz-mol) - 5))";
+        readonly '3xl': "calc(1em * var(--fz-mol) / (var(--fz-mol) - 4))";
+        readonly '2xl': "calc(1em * var(--fz-mol) / (var(--fz-mol) - 3))";
+        readonly xl: "calc(1em * var(--fz-mol) / (var(--fz-mol) - 2))";
+        readonly l: "calc(1em * var(--fz-mol) / (var(--fz-mol) - 1))";
+        readonly m: "1em";
+        readonly s: "calc(1em * var(--fz-mol) / (var(--fz-mol) + 1))";
+        readonly xs: "calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))";
+        readonly '2xs': "calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))";
+    };
+    readonly lh: {
+        readonly base: "-";
+        readonly xs: "-";
+        readonly s: "-";
+        readonly l: "-";
+    };
+    readonly hl: {
+        readonly base: "calc(var(--hl-unit) * 3)";
+        readonly xs: "var(--hl-unit)";
+        readonly s: "calc(var(--hl-unit) * 2)";
+        readonly l: "calc(var(--hl-unit) * 4)";
+    };
+    readonly lts: {
+        readonly base: "normal";
+        readonly s: "-0.025em";
+        readonly l: "0.05em";
+        readonly xl: "0.1em";
+    };
+    readonly ff: {
+        readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'";
+        readonly accent: "'Garamond', 'Baskerville', 'Times New Roman', serif";
+        readonly mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace";
+    };
+    readonly fw: {
+        readonly light: "300";
+        readonly normal: "400";
+        readonly bold: "600";
+    };
+    readonly o: {
+        readonly mp: "0.9";
+        readonly p: "0.75";
+        readonly pp: "0.5";
+        readonly ppp: "0.25";
+    };
+    readonly bdrs: {
+        readonly '10': "0.25rem";
+        readonly '20': "0.5rem";
+        readonly '30': "1rem";
+        readonly '40': "1.5rem";
+        readonly '99': "99rem";
+        readonly inner: "-";
+    };
+    readonly bxsh: {
+        readonly '10': "var(--shsz--10) var(--shc)";
+        readonly '20': "var(--shsz--20) var(--shc)";
+        readonly '30': "var(--shsz--30) var(--shc)";
+        readonly '40': "var(--shsz--40) var(--shc)";
+        readonly '50': "var(--shsz--50) var(--shc)";
+    };
     readonly space: {
-        readonly pre: "--s";
-        readonly values: readonly ["5", "10", "15", "20", "25", "30", "35", "40", "50", "60", "70", "80"];
+        readonly '5': "calc(var(--s-unit) * 0.5)";
+        readonly '10': "var(--s-unit)";
+        readonly '15': "calc(var(--s-unit) * 1.5)";
+        readonly '20': "calc(var(--s-unit) * 2)";
+        readonly '25': "calc(var(--s-unit) * 2.5)";
+        readonly '30': "calc(var(--s-unit) * 3)";
+        readonly '35': "calc(var(--s-unit) * 4)";
+        readonly '40': "calc(var(--s-unit) * 5)";
+        readonly '50': "calc(var(--s-unit) * 8)";
+        readonly '60': "calc(var(--s-unit) * 13)";
+        readonly '70': "calc(var(--s-unit) * 21)";
+        readonly '80': "calc(var(--s-unit) * 34)";
     };
-    readonly c: {
-        readonly pre: "--";
-        readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral"];
+    readonly flow: {
+        readonly s: "-";
+        readonly l: "-";
     };
-    readonly palette: {
-        readonly pre: "--";
-        readonly values: readonly ["red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"];
+    readonly sz: {
+        readonly xs: "400px";
+        readonly s: "640px";
+        readonly m: "880px";
+        readonly l: "1200px";
+        readonly xl: "1600px";
+    };
+    readonly ar: {
+        readonly og: "1.91/1";
     };
-    readonly writing: readonly ["vertical"];
-    readonly flow: readonly ["s", "l"];
 };
 export default _default;

package/dist/config/defaults/tokens.js

@@ -1,30 +1,109 @@
-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", "xl"],
-  ff: ["base", "accent", "mono"],
-  fw: ["light", "normal", "bold"],
-  o: ["mp", "p", "pp", "ppp"],
-  bdrs: ["10", "20", "30", "40", "99", "inner"],
-  bxsh: ["10", "20", "30", "40", "50"],
-  sz: ["xs", "s", "m", "l", "xl"],
-  ar: ["og"],
-  space: {
-    pre: "--s",
-    values: ["5", "10", "15", "20", "25", "30", "35", "40", "50", "60", "70", "80"]
-  },
-  c: {
-    pre: "--",
-    values: ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral"]
+const a = {
+  // セマンティックカラー: 実値は手書き SCSS（カタログ専用）。
+  color: {
+    base: "-",
+    "base-2": "-",
+    text: "-",
+    "text-2": "-",
+    divider: "-",
+    link: "-",
+    brand: "-",
+    accent: "-",
+    neutral: "-"
   },
+  // パレットカラー: 多くは --L/--C からの計算色のため手書き SCSS。white/black のみリテラル値。
   palette: {
-    pre: "--",
-    values: ["red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"]
+    red: "-",
+    blue: "-",
+    green: "-",
+    yellow: "-",
+    purple: "-",
+    orange: "-",
+    pink: "-",
+    gray: "-",
+    white: "#fff",
+    black: "#000",
+    keycolor: "-"
+  },
+  // font-size: 倍音列でのスケーリング（--fz-mol は手書き SCSS の構造変数）。基準は --fz--base。
+  fz: {
+    base: "1rem",
+    "5xl": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 6))",
+    "4xl": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 5))",
+    "3xl": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 4))",
+    "2xl": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 3))",
+    xl: "calc(1em * var(--fz-mol) / (var(--fz-mol) - 2))",
+    l: "calc(1em * var(--fz-mol) / (var(--fz-mol) - 1))",
+    m: "1em",
+    s: "calc(1em * var(--fz-mol) / (var(--fz-mol) + 1))",
+    xs: "calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))",
+    "2xs": "calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))"
+  },
+  // line-height: CSS 変数を持たないカタログ専用（prop 側で解釈）。
+  lh: { base: "-", xs: "-", s: "-", l: "-" },
+  // half-leading: --hl-unit は手書き SCSS の構造変数。
+  hl: {
+    base: "calc(var(--hl-unit) * 3)",
+    xs: "var(--hl-unit)",
+    s: "calc(var(--hl-unit) * 2)",
+    l: "calc(var(--hl-unit) * 4)"
+  },
+  // letter-spacing
+  lts: { base: "normal", s: "-0.025em", l: "0.05em", xl: "0.1em" },
+  // font-family
+  ff: {
+    base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'",
+    accent: "'Garamond', 'Baskerville', 'Times New Roman', serif",
+    mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace"
+  },
+  // font-weight
+  fw: { light: "300", normal: "400", bold: "600" },
+  // opacity（音楽の強弱記号 piano 系列に由来）
+  o: { mp: "0.9", p: "0.75", pp: "0.5", ppp: "0.25" },
+  // border-radius: inner は .set 系の計算値（手書き SCSS）でカタログ専用。
+  bdrs: { 10: "0.25rem", 20: "0.5rem", 30: "1rem", 40: "1.5rem", 99: "99rem", inner: "-" },
+  // box-shadow: 構造変数 --shsz--* / --shc（手書き SCSS）を合成。.set--bxsh で再宣言され影色 --shc を上書きできる。
+  bxsh: {
+    10: "var(--shsz--10) var(--shc)",
+    20: "var(--shsz--20) var(--shc)",
+    30: "var(--shsz--30) var(--shc)",
+    40: "var(--shsz--40) var(--shc)",
+    50: "var(--shsz--50) var(--shc)"
+  },
+  // space: 構造変数 --s-unit（手書き SCSS）の倍数。フィボナッチ数列ベース。.set--s で --s-unit を em 化すると再ベースされる。
+  space: {
+    5: "calc(var(--s-unit) * 0.5)",
+    // ≒ 4px
+    10: "var(--s-unit)",
+    // ≒ 8px
+    15: "calc(var(--s-unit) * 1.5)",
+    // ≒ 12px
+    20: "calc(var(--s-unit) * 2)",
+    // ≒ 16px
+    25: "calc(var(--s-unit) * 2.5)",
+    // ≒ 20px
+    30: "calc(var(--s-unit) * 3)",
+    // ≒ 24px
+    35: "calc(var(--s-unit) * 4)",
+    // ≒ 32px
+    40: "calc(var(--s-unit) * 5)",
+    // ≒ 40px
+    50: "calc(var(--s-unit) * 8)",
+    // ≒ 64px
+    60: "calc(var(--s-unit) * 13)",
+    // ≒ 104px
+    70: "calc(var(--s-unit) * 21)",
+    // ≒ 168px
+    80: "calc(var(--s-unit) * 34)"
+    // ≒ 272px
   },
-  writing: ["vertical"],
-  flow: ["s", "l"]
+  // flow: lang スコープ上書きありのため手書き SCSS。
+  flow: { s: "-", l: "-" },
+  // content-size
+  sz: { xs: "400px", s: "640px", m: "880px", l: "1200px", xl: "1600px" },
+  // aspect-ratio
+  ar: { og: "1.91/1" }
 };
 export {
-  e as default
+  a as default
 };