lism-css 0.22.2 → 0.23.0-beta.0

package/dist/config/default-config.d.ts

@@ -1,30 +1,119 @@
 declare const _default: {
     readonly tokens: {
-        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 flow: {
+            readonly s: "-";
+            readonly l: "-";
         };
-        readonly c: {
-            readonly pre: "--";
-            readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral"];
+        readonly sz: {
+            readonly xs: "400px";
+            readonly s: "640px";
+            readonly m: "880px";
+            readonly l: "1200px";
+            readonly xl: "1600px";
         };
-        readonly palette: {
-            readonly pre: "--";
-            readonly values: readonly ["red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"];
+        readonly ar: {
+            readonly og: "1.91/1";
         };
-        readonly writing: readonly ["vertical"];
-        readonly flow: readonly ["s", "l"];
     };
     readonly props: {
         readonly f: {
@@ -56,25 +145,25 @@ declare const _default: {
             };
         };
         readonly lh: {
-            readonly prop: "lineHeight";
-            readonly presets: readonly ["1"];
+            readonly prop: "--hl";
+            readonly isVar: 1;
             readonly token: "hl";
-            readonly tokenClass: 2;
-            readonly exUtility: {
-                readonly 1: "";
+            readonly tokenClass: 1;
+            readonly utils: {
+                readonly '1': "0px";
             };
         };
         readonly hl: {
+            readonly prop: "--hl";
             readonly isVar: 1;
             readonly token: "hl";
-            readonly tokenClass: 0;
-            readonly bp: 0;
+            readonly tokenClass: 1;
+            readonly bp: 1;
         };
         readonly lts: {
             readonly prop: "letterSpacing";
             readonly token: "lts";
             readonly tokenClass: 1;
-            readonly bp: 0;
         };
         readonly ta: {
             readonly prop: "textAlign";
@@ -96,7 +185,7 @@ declare const _default: {
         readonly d: {
             readonly prop: "display";
             readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly o: {
             readonly prop: "opacity";
@@ -206,7 +295,6 @@ declare const _default: {
         };
         readonly bg: {
             readonly prop: "background";
-            readonly bp: 0;
         };
         readonly bgi: {
             readonly prop: "backgroundImage";
@@ -465,22 +553,18 @@ declare const _default: {
         readonly pl: {
             readonly prop: "paddingLeft";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly pr: {
             readonly prop: "paddingRight";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly pt: {
             readonly prop: "paddingTop";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly pb: {
             readonly prop: "paddingBottom";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly m: {
             readonly prop: "margin";
@@ -532,22 +616,18 @@ declare const _default: {
         readonly ml: {
             readonly prop: "marginLeft";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly mr: {
             readonly prop: "marginRight";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly mt: {
             readonly prop: "marginTop";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly mb: {
             readonly prop: "marginBottom";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly g: {
             readonly prop: "gap";
@@ -559,21 +639,19 @@ declare const _default: {
             };
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly cg: {
             readonly prop: "columnGap";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly rg: {
             readonly prop: "rowGap";
             readonly token: "space";
-            readonly bp: 0;
         };
         readonly cols: {
             readonly isVar: 1;
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly rows: {
             readonly isVar: 1;
@@ -615,17 +693,17 @@ declare const _default: {
         };
         readonly gta: {
             readonly prop: "gridTemplateAreas";
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly gtc: {
             readonly prop: "gridTemplateColumns";
             readonly presets: readonly ["subgrid"];
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly gtr: {
             readonly prop: "gridTemplateRows";
             readonly presets: readonly ["subgrid"];
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly gaf: {
             readonly prop: "gridAutoFlow";
@@ -643,21 +721,21 @@ declare const _default: {
             readonly utils: {
                 readonly '1/1': "1 / 1";
             };
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly gc: {
             readonly prop: "gridColumn";
             readonly utils: {
                 readonly '1/-1': "1 / -1";
             };
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly gr: {
             readonly prop: "gridRow";
             readonly utils: {
                 readonly '1/-1': "1 / -1";
             };
-            readonly bp: "lg";
+            readonly bp: 1;
         };
         readonly gcs: {
             readonly prop: "gridColumnStart";
@@ -803,5 +881,12 @@ declare const _default: {
         readonly hasSnap: "has--snap";
         readonly hasMask: "has--mask";
     };
+    readonly breakpoints: {
+        readonly xs: 0;
+        readonly sm: "480px";
+        readonly md: "800px";
+        readonly lg: "1120px";
+        readonly xl: 0;
+    };
 };
 export default _default;

package/dist/config/default-config.js

@@ -1,11 +1,13 @@
 import o from "./defaults/tokens.js";
-import t from "./defaults/props.js";
-import r from "./defaults/traits.js";
-const i = {
+import r from "./defaults/props.js";
+import t from "./defaults/traits.js";
+import m from "./defaults/breakpoints.js";
+const a = {
   tokens: o,
-  props: t,
-  traits: r
+  props: r,
+  traits: t,
+  breakpoints: m
 };
 export {
-  i as default
+  a as default
 };

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

@@ -0,0 +1,15 @@
+/**
+ * ブレイクポイントのデフォルト定義
+ *
+ * 値 0 は「無効」を表し、`_query.scss` の bp-up / bp-down がクエリ出力をスキップする。
+ * xs / xl をあらかじめキーとして並べておくことで、lism.config.js の `breakpoints` で
+ * サイズを与えるだけ（差分上書き）で有効化でき、かつ正準順序（min-width カスケード順）を保つ。
+ */
+declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: "480px";
+    readonly md: "800px";
+    readonly lg: "1120px";
+    readonly xl: 0;
+};
+export default BREAKPOINTS;

package/dist/config/defaults/breakpoints.js

@@ -0,0 +1,10 @@
+const x = {
+  xs: 0,
+  sm: "480px",
+  md: "800px",
+  lg: "1120px",
+  xl: 0
+};
+export {
+  x as default
+};

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

@@ -1,12 +1,11 @@
 /**
  * isVar: 1 → クラス出力はせずstyle属性での変数出力のみ (--bdw, --keycolor など)
- * bp: 0 → Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
+ * bp: 0（= bp 省略時のデフォルト）→ Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
  * bp: 1 → .-prop と --prop の セットがベースにあり、.-prop_bp と .--prop_bp で ブレイクポイント指定できる。
  *       .-prop{property:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{property:value} となる。
  *
  * ↓コンポーネント処理で使用される
  * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
- *             2 → ユーティリティクラスされ、内容は別途ファイルで記述するもの。
  * shorthands: → コンポーネント側で短く書くための設定
  *
  * ↓SCSS出力で使用される
@@ -46,25 +45,25 @@ declare const _default: {
         };
     };
     readonly lh: {
-        readonly prop: "lineHeight";
-        readonly presets: readonly ["1"];
+        readonly prop: "--hl";
+        readonly isVar: 1;
         readonly token: "hl";
-        readonly tokenClass: 2;
-        readonly exUtility: {
-            readonly 1: "";
+        readonly tokenClass: 1;
+        readonly utils: {
+            readonly '1': "0px";
         };
     };
     readonly hl: {
+        readonly prop: "--hl";
         readonly isVar: 1;
         readonly token: "hl";
-        readonly tokenClass: 0;
-        readonly bp: 0;
+        readonly tokenClass: 1;
+        readonly bp: 1;
     };
     readonly lts: {
         readonly prop: "letterSpacing";
         readonly token: "lts";
         readonly tokenClass: 1;
-        readonly bp: 0;
     };
     readonly ta: {
         readonly prop: "textAlign";
@@ -86,7 +85,7 @@ declare const _default: {
     readonly d: {
         readonly prop: "display";
         readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly o: {
         readonly prop: "opacity";
@@ -196,7 +195,6 @@ declare const _default: {
     };
     readonly bg: {
         readonly prop: "background";
-        readonly bp: 0;
     };
     readonly bgi: {
         readonly prop: "backgroundImage";
@@ -455,22 +453,18 @@ declare const _default: {
     readonly pl: {
         readonly prop: "paddingLeft";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly pr: {
         readonly prop: "paddingRight";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly pt: {
         readonly prop: "paddingTop";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly pb: {
         readonly prop: "paddingBottom";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly m: {
         readonly prop: "margin";
@@ -522,22 +516,18 @@ declare const _default: {
     readonly ml: {
         readonly prop: "marginLeft";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly mr: {
         readonly prop: "marginRight";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly mt: {
         readonly prop: "marginTop";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly mb: {
         readonly prop: "marginBottom";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly g: {
         readonly prop: "gap";
@@ -549,21 +539,19 @@ declare const _default: {
         };
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly cg: {
         readonly prop: "columnGap";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly rg: {
         readonly prop: "rowGap";
         readonly token: "space";
-        readonly bp: 0;
     };
     readonly cols: {
         readonly isVar: 1;
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly rows: {
         readonly isVar: 1;
@@ -605,17 +593,17 @@ declare const _default: {
     };
     readonly gta: {
         readonly prop: "gridTemplateAreas";
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly gtc: {
         readonly prop: "gridTemplateColumns";
         readonly presets: readonly ["subgrid"];
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly gtr: {
         readonly prop: "gridTemplateRows";
         readonly presets: readonly ["subgrid"];
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly gaf: {
         readonly prop: "gridAutoFlow";
@@ -633,21 +621,21 @@ declare const _default: {
         readonly utils: {
             readonly '1/1': "1 / 1";
         };
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly gc: {
         readonly prop: "gridColumn";
         readonly utils: {
             readonly '1/-1': "1 / -1";
         };
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly gr: {
         readonly prop: "gridRow";
         readonly utils: {
             readonly '1/-1': "1 / -1";
         };
-        readonly bp: "lg";
+        readonly bp: 1;
     };
     readonly gcs: {
         readonly prop: "gridColumnStart";