lism-css 0.11.0 → 0.13.0

package/dist/config/defaults/props.js

@@ -1,4 +1,4 @@
-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 = {
+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, alwaysVar: 1 },
   fw: {
@@ -30,8 +30,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // tsh: { prop: 'textShadow' },
   d: {
     prop: "display",
-    presets: ["none", "block"],
-    utils: { "in-flex": "inline-flex" },
+    presets: ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"],
     bp: 1
   },
   o: { prop: "opacity", presets: ["0"], token: "o", tokenClass: 1 },
@@ -108,7 +107,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   bdc: {
     isVar: 1,
     presets: ["brand", "accent", "divider", "inherit", "transparent"],
-    utils: { cc: "currentColor" },
+    utils: { current: "currentColor" },
     token: "color"
   },
   bdw: { isVar: 1, bp: 1 },
@@ -144,8 +143,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // position
   pos: {
     prop: "position",
-    presets: ["static", "fixed", "sticky"],
-    utils: { rel: "relative", abs: "absolute" }
+    presets: ["static", "fixed", "sticky", "relative", "absolute"]
   },
   z: { prop: "zIndex", presets: ["-1", "0", "1", "99"] },
   t: { prop: "top", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
@@ -208,14 +206,14 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
     overwriteBaseVar: 1,
     bp: 1
   },
-  "g-x": { prop: "columnGap", token: "space", bp: 1 },
-  "g-y": { prop: "rowGap", token: "space", bp: 1 },
+  cg: { prop: "columnGap", token: "space", bp: 1 },
+  rg: { 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 },
+  fxd: { prop: "flexDirection", presets: ["column", "column-reverse", "row-reverse"], bp: 1 },
   fx: { prop: "flex", presets: ["1"], bp: 1 },
   fxg: { prop: "flexGrow", presets: ["1"] },
   fxsh: { prop: "flexShrink", presets: ["0"] },
@@ -224,12 +222,6 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // 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 },
@@ -244,7 +236,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
     // exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
     bp: 1
   },
-  gaf: { prop: "gridAutoFlow", utils: { row: "row", col: "column" }, bp: 1 },
+  gaf: { prop: "gridAutoFlow", presets: ["row", "column"], bp: 1 },
   //dense
   gac: { prop: "gridAutoColumns" },
   gar: { prop: "gridAutoRows" },
@@ -260,29 +252,27 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
   ai: {
     prop: "alignItems",
-    presets: [...e, "stretch"],
-    utils: r,
+    presets: [...e, "stretch", ...r],
     shorthands: p,
     bp: 1
   },
   ac: {
     prop: "alignContent",
-    presets: e,
-    utils: { ...r, between: "space-between" },
+    presets: [...e, ...r],
+    utils: { between: "space-between" },
     shorthands: p,
     bp: 1
   },
   ji: {
     prop: "justifyItems",
-    presets: [...e, "stretch"],
-    utils: r,
+    presets: [...e, "stretch", ...r],
     shorthands: p,
     bp: 1
   },
   jc: {
     prop: "justifyContent",
-    presets: e,
-    utils: { ...r, between: "space-between" },
+    presets: [...e, ...r],
+    utils: { between: "space-between" },
     shorthands: p,
     bp: 1
   },
@@ -328,7 +318,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // 	},
   // },
   // others
-  ovwrap: { prop: "overflowWrap", utils: { any: "anywhere" } },
+  ovwrap: { prop: "overflowWrap", presets: ["anywhere"] },
   whspace: { prop: "whiteSpace", presets: ["nowrap"] },
   // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
   float: { prop: "float", presets: ["left", "right"] },
@@ -336,5 +326,5 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   isolation: { prop: "isolation", presets: ["isolate"] }
 };
 export {
-  t as default
+  o as default
 };

package/dist/config/defaults/{states.d.ts → traits.d.ts}

@@ -8,22 +8,10 @@ declare const _default: {
         readonly tokenKey: "sz";
     };
     readonly isLayer: "is--layer";
-    readonly isLinkBox: "is--linkBox";
+    readonly isBoxLink: "is--boxLink";
+    readonly isCoverLink: "is--coverLink";
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";
-    readonly setGutter: "set--gutter";
-    readonly setShadow: "set--shadow";
-    readonly setHov: "set--hov";
-    readonly setTransition: "set--transition";
-    readonly setMask: {
-        readonly className: "set--mask";
-        readonly setStyles: (propVal: string) => {
-            '--maskImg': string;
-        };
-    };
-    readonly setPlain: "set--plain";
-    readonly setInnerRs: "set--innerRs";
-    readonly setBp: "set--bp";
 };
 export default _default;

package/dist/config/defaults/traits.js

@@ -0,0 +1,19 @@
+const i = {
+  isContainer: "is--container",
+  isWrapper: {
+    className: "is--wrapper",
+    preset: ["s", "l"],
+    presetClass: "-contentSize",
+    customVar: "--contentSize",
+    tokenKey: "sz"
+  },
+  isLayer: "is--layer",
+  isBoxLink: "is--boxLink",
+  isCoverLink: "is--coverLink",
+  isSide: "is--side",
+  isSkipFlow: "is--skipFlow",
+  isVertical: "is--vertical"
+};
+export {
+  i as default
+};

package/dist/config/index.d.ts

@@ -95,10 +95,7 @@ export declare const CONFIG: {
         };
         readonly d: {
             readonly prop: "display";
-            readonly presets: readonly ["none", "block"];
-            readonly utils: {
-                readonly 'in-flex': "inline-flex";
-            };
+            readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
             readonly bp: 1;
         };
         readonly o: {
@@ -259,7 +256,7 @@ export declare const CONFIG: {
             readonly isVar: 1;
             readonly presets: readonly ["brand", "accent", "divider", "inherit", "transparent"];
             readonly utils: {
-                readonly cc: "currentColor";
+                readonly current: "currentColor";
             };
             readonly token: "color";
         };
@@ -350,11 +347,7 @@ export declare const CONFIG: {
         };
         readonly pos: {
             readonly prop: "position";
-            readonly presets: readonly ["static", "fixed", "sticky"];
-            readonly utils: {
-                readonly rel: "relative";
-                readonly abs: "absolute";
-            };
+            readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
         };
         readonly z: {
             readonly prop: "zIndex";
@@ -572,12 +565,12 @@ export declare const CONFIG: {
             readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
-        readonly 'g-x': {
+        readonly cg: {
             readonly prop: "columnGap";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'g-y': {
+        readonly rg: {
             readonly prop: "rowGap";
             readonly token: "space";
             readonly bp: 1;
@@ -600,11 +593,7 @@ export declare const CONFIG: {
         };
         readonly fxd: {
             readonly prop: "flexDirection";
-            readonly utils: {
-                readonly col: "column";
-                readonly 'col-r': "column-reverse";
-                readonly 'row-r': "row-reverse";
-            };
+            readonly presets: readonly ["column", "column-reverse", "row-reverse"];
             readonly bp: 1;
         };
         readonly fx: {
@@ -626,12 +615,6 @@ export declare const CONFIG: {
         };
         readonly gt: {
             readonly prop: "gridTemplate";
-            readonly presets: readonly ["repeat"];
-            readonly exUtility: {
-                readonly repeat: {
-                    readonly 'grid-template': "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)";
-                };
-            };
             readonly bp: 1;
         };
         readonly gta: {
@@ -650,10 +633,7 @@ export declare const CONFIG: {
         };
         readonly gaf: {
             readonly prop: "gridAutoFlow";
-            readonly utils: {
-                readonly row: "row";
-                readonly col: "column";
-            };
+            readonly presets: readonly ["row", "column"];
             readonly bp: 1;
         };
         readonly gac: {
@@ -697,67 +677,55 @@ export declare const CONFIG: {
         };
         readonly ai: {
             readonly prop: "alignItems";
-            readonly presets: readonly ["start", "center", "end", "stretch"];
-            readonly utils: {
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
-            };
+            readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
         readonly ac: {
             readonly prop: "alignContent";
-            readonly presets: readonly ["start", "center", "end"];
+            readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
             readonly utils: {
                 readonly between: "space-between";
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
             };
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
         readonly ji: {
             readonly prop: "justifyItems";
-            readonly presets: readonly ["start", "center", "end", "stretch"];
-            readonly utils: {
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
-            };
+            readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
         readonly jc: {
             readonly prop: "justifyContent";
-            readonly presets: readonly ["start", "center", "end"];
+            readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
             readonly utils: {
                 readonly between: "space-between";
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
             };
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
@@ -776,8 +744,8 @@ export declare const CONFIG: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
         };
         readonly jslf: {
@@ -787,8 +755,8 @@ export declare const CONFIG: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
         };
         readonly pslf: {
@@ -801,9 +769,7 @@ export declare const CONFIG: {
         };
         readonly ovwrap: {
             readonly prop: "overflowWrap";
-            readonly utils: {
-                readonly any: "anywhere";
-            };
+            readonly presets: readonly ["anywhere"];
         };
         readonly whspace: {
             readonly prop: "whiteSpace";
@@ -822,7 +788,7 @@ export declare const CONFIG: {
             readonly presets: readonly ["isolate"];
         };
     };
-    states: {
+    traits: {
         readonly isContainer: "is--container";
         readonly isWrapper: {
             readonly className: "is--wrapper";
@@ -832,23 +798,11 @@ export declare const CONFIG: {
             readonly tokenKey: "sz";
         };
         readonly isLayer: "is--layer";
-        readonly isLinkBox: "is--linkBox";
+        readonly isBoxLink: "is--boxLink";
+        readonly isCoverLink: "is--coverLink";
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";
-        readonly setGutter: "set--gutter";
-        readonly setShadow: "set--shadow";
-        readonly setHov: "set--hov";
-        readonly setTransition: "set--transition";
-        readonly setMask: {
-            readonly className: "set--mask";
-            readonly setStyles: (propVal: string) => {
-                '--maskImg': string;
-            };
-        };
-        readonly setPlain: "set--plain";
-        readonly setInnerRs: "set--innerRs";
-        readonly setBp: "set--bp";
     };
 };
 export declare const TOKENS: {
@@ -948,10 +902,7 @@ export declare const PROPS: {
     };
     readonly d: {
         readonly prop: "display";
-        readonly presets: readonly ["none", "block"];
-        readonly utils: {
-            readonly 'in-flex': "inline-flex";
-        };
+        readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
         readonly bp: 1;
     };
     readonly o: {
@@ -1112,7 +1063,7 @@ export declare const PROPS: {
         readonly isVar: 1;
         readonly presets: readonly ["brand", "accent", "divider", "inherit", "transparent"];
         readonly utils: {
-            readonly cc: "currentColor";
+            readonly current: "currentColor";
         };
         readonly token: "color";
     };
@@ -1203,11 +1154,7 @@ export declare const PROPS: {
     };
     readonly pos: {
         readonly prop: "position";
-        readonly presets: readonly ["static", "fixed", "sticky"];
-        readonly utils: {
-            readonly rel: "relative";
-            readonly abs: "absolute";
-        };
+        readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
     };
     readonly z: {
         readonly prop: "zIndex";
@@ -1425,12 +1372,12 @@ export declare const PROPS: {
         readonly overwriteBaseVar: 1;
         readonly bp: 1;
     };
-    readonly 'g-x': {
+    readonly cg: {
         readonly prop: "columnGap";
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'g-y': {
+    readonly rg: {
         readonly prop: "rowGap";
         readonly token: "space";
         readonly bp: 1;
@@ -1453,11 +1400,7 @@ export declare const PROPS: {
     };
     readonly fxd: {
         readonly prop: "flexDirection";
-        readonly utils: {
-            readonly col: "column";
-            readonly 'col-r': "column-reverse";
-            readonly 'row-r': "row-reverse";
-        };
+        readonly presets: readonly ["column", "column-reverse", "row-reverse"];
         readonly bp: 1;
     };
     readonly fx: {
@@ -1479,12 +1422,6 @@ export declare const PROPS: {
     };
     readonly gt: {
         readonly prop: "gridTemplate";
-        readonly presets: readonly ["repeat"];
-        readonly exUtility: {
-            readonly repeat: {
-                readonly 'grid-template': "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)";
-            };
-        };
         readonly bp: 1;
     };
     readonly gta: {
@@ -1503,10 +1440,7 @@ export declare const PROPS: {
     };
     readonly gaf: {
         readonly prop: "gridAutoFlow";
-        readonly utils: {
-            readonly row: "row";
-            readonly col: "column";
-        };
+        readonly presets: readonly ["row", "column"];
         readonly bp: 1;
     };
     readonly gac: {
@@ -1550,67 +1484,55 @@ export declare const PROPS: {
     };
     readonly ai: {
         readonly prop: "alignItems";
-        readonly presets: readonly ["start", "center", "end", "stretch"];
-        readonly utils: {
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
-        };
+        readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
     readonly ac: {
         readonly prop: "alignContent";
-        readonly presets: readonly ["start", "center", "end"];
+        readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
         readonly utils: {
             readonly between: "space-between";
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
         };
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
     readonly ji: {
         readonly prop: "justifyItems";
-        readonly presets: readonly ["start", "center", "end", "stretch"];
-        readonly utils: {
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
-        };
+        readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
     readonly jc: {
         readonly prop: "justifyContent";
-        readonly presets: readonly ["start", "center", "end"];
+        readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
         readonly utils: {
             readonly between: "space-between";
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
         };
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
@@ -1629,8 +1551,8 @@ export declare const PROPS: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
     };
     readonly jslf: {
@@ -1640,8 +1562,8 @@ export declare const PROPS: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
     };
     readonly pslf: {
@@ -1654,9 +1576,7 @@ export declare const PROPS: {
     };
     readonly ovwrap: {
         readonly prop: "overflowWrap";
-        readonly utils: {
-            readonly any: "anywhere";
-        };
+        readonly presets: readonly ["anywhere"];
     };
     readonly whspace: {
         readonly prop: "whiteSpace";
@@ -1675,7 +1595,7 @@ export declare const PROPS: {
         readonly presets: readonly ["isolate"];
     };
 };
-export declare const STATES: {
+export declare const TRAITS: {
     readonly isContainer: "is--container";
     readonly isWrapper: {
         readonly className: "is--wrapper";
@@ -1685,23 +1605,11 @@ export declare const STATES: {
         readonly tokenKey: "sz";
     };
     readonly isLayer: "is--layer";
-    readonly isLinkBox: "is--linkBox";
+    readonly isBoxLink: "is--boxLink";
+    readonly isCoverLink: "is--coverLink";
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";
-    readonly setGutter: "set--gutter";
-    readonly setShadow: "set--shadow";
-    readonly setHov: "set--hov";
-    readonly setTransition: "set--transition";
-    readonly setMask: {
-        readonly className: "set--mask";
-        readonly setStyles: (propVal: string) => {
-            '--maskImg': string;
-        };
-    };
-    readonly setPlain: "set--plain";
-    readonly setInnerRs: "set--innerRs";
-    readonly setBp: "set--bp";
 };
 export declare const BREAK_POINTS: readonly ["sm", "md", "lg", "xl"];
 export declare const BREAK_POINTS_ALL: readonly ["base", "sm", "md", "lg", "xl"];

package/dist/config/index.js

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