lism-css 0.18.0 → 0.21.0

package/config/defaults/props.ts

@@ -43,9 +43,9 @@ export default {
     isVar: 1,
     token: 'hl',
     tokenClass: 0,
-    bp: 1,
+    bp: 0,
   },
-  lts: { prop: 'letterSpacing', token: 'lts', tokenClass: 1 },
+  lts: { prop: 'letterSpacing', token: 'lts', tokenClass: 1, bp: 0 },
   ta: { prop: 'textAlign', presets: ['center', 'left', 'right'] },
   td: { prop: 'textDecoration', utils: { none: 'none' } },
   tt: { prop: 'textTransform', utils: { upper: 'uppercase', lower: 'lowercase' } },
@@ -55,7 +55,7 @@ export default {
   d: {
     prop: 'display',
     presets: ['none', 'block', 'flex', 'inline-flex', 'grid', 'inline-grid', 'inline', 'inline-block'],
-    bp: 1,
+    bp: 'lg',
   },
   o: { prop: 'opacity', presets: ['0'], token: 'o', tokenClass: 1 },
   v: { prop: 'visibility', presets: ['hidden'] },
@@ -79,6 +79,7 @@ export default {
   'min-h': { prop: 'minHeight', presets: ['100%'], token: 'sz', bp: 1 },
   'max-h': { prop: 'maxHeight', presets: ['100%'], token: 'sz', bp: 1 },
 
+  contentSize: { isVar: 1, presets: ['s', 'm', 'l', 'xl'], token: 'sz' },
   sz: { prop: 'inlineSize', token: 'sz' },
   'min-sz': { prop: 'minInlineSize', token: 'sz' },
   'max-sz': {
@@ -96,7 +97,7 @@ export default {
   'max-bsz': { prop: 'maxBlockSize', token: 'sz' },
 
   // bg
-  bg: { prop: 'background', bp: 1 },
+  bg: { prop: 'background', bp: 0 },
   bgi: { prop: 'backgroundImage' },
   bgr: { prop: 'backgroundRepeat', presets: ['no-repeat'] },
   bgp: { prop: 'backgroundPosition', presets: ['center'] },
@@ -139,10 +140,10 @@ export default {
   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-s': { prop: 'borderInlineStart' },
+  'bd-e': { prop: 'borderInlineEnd' },
+  'bd-bs': { prop: 'borderBlockStart' },
+  'bd-be': { prop: 'borderBlockEnd' },
   'bd-t': { prop: 'borderTop' },
   'bd-b': { prop: 'borderBottom' },
   'bd-l': { prop: 'borderLeft' },
@@ -171,6 +172,7 @@ export default {
   pos: {
     prop: 'position',
     presets: ['static', 'fixed', 'sticky', 'relative', 'absolute'],
+    bp: 1,
   },
   z: { prop: 'zIndex', presets: ['-1', '0', '1', '99'] },
   t: { prop: 'top', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
@@ -180,10 +182,10 @@ export default {
   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' },
+  'i-s': { prop: 'insetInlineStart', token: 'space' },
+  'i-e': { prop: 'insetInlineEnd', token: 'space' },
+  'i-bs': { prop: 'insetBlockStart', token: 'space' },
+  'i-be': { prop: 'insetBlockEnd', token: 'space' },
 
   // space
   p: {
@@ -196,14 +198,14 @@ export default {
   },
   px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
   py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 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 },
+  ps: { prop: 'paddingInlineStart', token: 'space', bp: 1 },
+  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 },
   m: {
     prop: 'margin',
     presets: ['auto', '0'],
@@ -214,14 +216,14 @@ export default {
   },
   mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
   my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 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 },
+  ms: { prop: 'marginInlineStart', presets: ['auto'], token: 'space', bp: 1 },
+  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 },
 
   g: {
     prop: 'gap',
@@ -229,11 +231,11 @@ export default {
     exUtility: { inherit: { gap: 'inherit' } },
     token: 'space',
     tokenClass: 1,
-    bp: 1,
+    bp: 'lg',
   },
-  cg: { prop: 'columnGap', token: 'space', bp: 1 },
-  rg: { prop: 'rowGap', token: 'space', bp: 1 },
-  cols: { isVar: 1, bp: 1 },
+  cg: { prop: 'columnGap', token: 'space', bp: 0 },
+  rg: { prop: 'rowGap', token: 'space', bp: 0 },
+  cols: { isVar: 1, bp: 'lg' },
   rows: { isVar: 1, bp: 1 },
 
   // flex
@@ -251,26 +253,25 @@ export default {
     prop: 'gridTemplate',
     bp: 1,
   },
-  gta: { prop: 'gridTemplateAreas', bp: 1 },
+  gta: { prop: 'gridTemplateAreas', bp: 'lg' },
   gtc: {
     prop: 'gridTemplateColumns',
     presets: ['subgrid'],
-    bp: 1,
+    bp: 'lg',
   },
   gtr: {
     prop: 'gridTemplateRows',
     presets: ['subgrid'],
-    // exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
-    bp: 1,
+    bp: 'lg',
   },
   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: 1 },
-  gc: { prop: 'gridColumn', utils: { '1/-1': '1 / -1' }, bp: 1 },
-  gr: { prop: 'gridRow', utils: { '1/-1': '1 / -1' }, bp: 1 },
+  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' },
   gcs: { prop: 'gridColumnStart' },
   gce: { prop: 'gridColumnEnd' },
   grs: { prop: 'gridRowStart' },
@@ -317,7 +318,7 @@ export default {
     shorthands: PLACE_SHORTHANDS,
   },
   pslf: { prop: 'placeSelf', presets: PLACE_PRESETS },
-  order: { prop: 'order', presets: ['0', '-1', '1'] },
+  order: { prop: 'order', presets: ['0', '-1', '1'], bp: 1 },
 
   // transform
   // translate: {

package/config/defaults/tokens.ts

@@ -16,7 +16,7 @@ export default {
   },
   c: {
     pre: '--',
-    values: ['base', 'base-2', 'text', 'text-2', 'divider', 'link', 'brand', 'accent'],
+    values: ['base', 'base-2', 'text', 'text-2', 'divider', 'link', 'brand', 'accent', 'neutral'],
   },
   palette: {
     pre: '--',

package/config/defaults/traits.ts

@@ -1,12 +1,6 @@
 export default {
   isContainer: 'is--container',
-  isWrapper: {
-    className: 'is--wrapper',
-    preset: ['s', 'l'],
-    presetClass: '-contentSize',
-    customVar: '--contentSize',
-    tokenKey: 'sz',
-  },
+  isWrapper: 'is--wrapper',
   isLayer: 'is--layer',
   isBoxLink: 'is--boxLink',
   isCoverLink: 'is--coverLink',

package/dist/components/state/Wrapper/Wrapper.d.ts

@@ -1,6 +1,4 @@
 import { LismComponentProps } from '../../Lism';
-type WrapperProps = LismComponentProps & {
-    contentSize?: LismComponentProps['isWrapper'];
-};
-export default function Wrapper({ contentSize, ...props }: WrapperProps): import("react").JSX.Element;
+type WrapperProps = LismComponentProps;
+export default function Wrapper(props: WrapperProps): import("react").JSX.Element;
 export {};

package/dist/components/state/Wrapper/index.js

@@ -1,8 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "../../Lism/index.js";
-function m({ contentSize: r, ...p }) {
-  return /* @__PURE__ */ t(e, { isWrapper: r || !0, ...p });
+import { jsx as p } from "react/jsx-runtime";
+import t from "../../Lism/index.js";
+function i(r) {
+  return /* @__PURE__ */ p(t, { isWrapper: !0, ...r });
 }
 export {
-  m as default
+  i as default
 };

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

@@ -17,7 +17,7 @@ declare const _default: {
         };
         readonly c: {
             readonly pre: "--";
-            readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent"];
+            readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral"];
         };
         readonly palette: {
             readonly pre: "--";
@@ -68,12 +68,13 @@ declare const _default: {
             readonly isVar: 1;
             readonly token: "hl";
             readonly tokenClass: 0;
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly lts: {
             readonly prop: "letterSpacing";
             readonly token: "lts";
             readonly tokenClass: 1;
+            readonly bp: 0;
         };
         readonly ta: {
             readonly prop: "textAlign";
@@ -95,7 +96,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: 1;
+            readonly bp: "lg";
         };
         readonly o: {
             readonly prop: "opacity";
@@ -168,6 +169,11 @@ declare const _default: {
             readonly token: "sz";
             readonly bp: 1;
         };
+        readonly contentSize: {
+            readonly isVar: 1;
+            readonly presets: readonly ["s", "m", "l", "xl"];
+            readonly token: "sz";
+        };
         readonly sz: {
             readonly prop: "inlineSize";
             readonly token: "sz";
@@ -200,7 +206,7 @@ declare const _default: {
         };
         readonly bg: {
             readonly prop: "background";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly bgi: {
             readonly prop: "backgroundImage";
@@ -269,16 +275,16 @@ declare const _default: {
         readonly 'bd-y': {
             readonly prop: "borderBlock";
         };
-        readonly 'bd-x-s': {
+        readonly 'bd-s': {
             readonly prop: "borderInlineStart";
         };
-        readonly 'bd-x-e': {
+        readonly 'bd-e': {
             readonly prop: "borderInlineEnd";
         };
-        readonly 'bd-y-s': {
+        readonly 'bd-bs': {
             readonly prop: "borderBlockStart";
         };
-        readonly 'bd-y-e': {
+        readonly 'bd-be': {
             readonly prop: "borderBlockEnd";
         };
         readonly 'bd-t': {
@@ -345,6 +351,7 @@ declare const _default: {
         readonly pos: {
             readonly prop: "position";
             readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
+            readonly bp: 1;
         };
         readonly z: {
             readonly prop: "zIndex";
@@ -397,19 +404,19 @@ declare const _default: {
             readonly prop: "insetBlock";
             readonly token: "space";
         };
-        readonly 'i-x-s': {
+        readonly 'i-s': {
             readonly prop: "insetInlineStart";
             readonly token: "space";
         };
-        readonly 'i-x-e': {
+        readonly 'i-e': {
             readonly prop: "insetInlineEnd";
             readonly token: "space";
         };
-        readonly 'i-y-s': {
+        readonly 'i-bs': {
             readonly prop: "insetBlockStart";
             readonly token: "space";
         };
-        readonly 'i-y-e': {
+        readonly 'i-be': {
             readonly prop: "insetBlockEnd";
             readonly token: "space";
         };
@@ -435,22 +442,22 @@ declare const _default: {
             readonly tokenClass: 1;
             readonly bp: 1;
         };
-        readonly 'px-s': {
+        readonly ps: {
             readonly prop: "paddingInlineStart";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'px-e': {
+        readonly pe: {
             readonly prop: "paddingInlineEnd";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'py-s': {
+        readonly pbs: {
             readonly prop: "paddingBlockStart";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'py-e': {
+        readonly pbe: {
             readonly prop: "paddingBlockEnd";
             readonly token: "space";
             readonly bp: 1;
@@ -458,22 +465,22 @@ declare const _default: {
         readonly pl: {
             readonly prop: "paddingLeft";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly pr: {
             readonly prop: "paddingRight";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly pt: {
             readonly prop: "paddingTop";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly pb: {
             readonly prop: "paddingBottom";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly m: {
             readonly prop: "margin";
@@ -497,26 +504,26 @@ declare const _default: {
             readonly tokenClass: 1;
             readonly bp: 1;
         };
-        readonly 'mx-s': {
+        readonly ms: {
             readonly prop: "marginInlineStart";
             readonly presets: readonly ["auto"];
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'mx-e': {
+        readonly me: {
             readonly prop: "marginInlineEnd";
             readonly presets: readonly ["auto"];
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'my-s': {
+        readonly mbs: {
             readonly prop: "marginBlockStart";
             readonly token: "space";
             readonly bp: 1;
             readonly presets: readonly ["auto", "0"];
             readonly tokenClass: 1;
         };
-        readonly 'my-e': {
+        readonly mbe: {
             readonly prop: "marginBlockEnd";
             readonly presets: readonly ["auto"];
             readonly token: "space";
@@ -525,22 +532,22 @@ declare const _default: {
         readonly ml: {
             readonly prop: "marginLeft";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly mr: {
             readonly prop: "marginRight";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly mt: {
             readonly prop: "marginTop";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly mb: {
             readonly prop: "marginBottom";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly g: {
             readonly prop: "gap";
@@ -552,21 +559,21 @@ declare const _default: {
             };
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly cg: {
             readonly prop: "columnGap";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly rg: {
             readonly prop: "rowGap";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly cols: {
             readonly isVar: 1;
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly rows: {
             readonly isVar: 1;
@@ -608,17 +615,17 @@ declare const _default: {
         };
         readonly gta: {
             readonly prop: "gridTemplateAreas";
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gtc: {
             readonly prop: "gridTemplateColumns";
             readonly presets: readonly ["subgrid"];
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gtr: {
             readonly prop: "gridTemplateRows";
             readonly presets: readonly ["subgrid"];
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gaf: {
             readonly prop: "gridAutoFlow";
@@ -636,21 +643,21 @@ declare const _default: {
             readonly utils: {
                 readonly '1/1': "1 / 1";
             };
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gc: {
             readonly prop: "gridColumn";
             readonly utils: {
                 readonly '1/-1': "1 / -1";
             };
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gr: {
             readonly prop: "gridRow";
             readonly utils: {
                 readonly '1/-1': "1 / -1";
             };
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gcs: {
             readonly prop: "gridColumnStart";
@@ -755,6 +762,7 @@ declare const _default: {
         readonly order: {
             readonly prop: "order";
             readonly presets: readonly ["0", "-1", "1"];
+            readonly bp: 1;
         };
         readonly ovw: {
             readonly prop: "overflowWrap";
@@ -784,13 +792,7 @@ declare const _default: {
     };
     readonly traits: {
         readonly isContainer: "is--container";
-        readonly isWrapper: {
-            readonly className: "is--wrapper";
-            readonly preset: readonly ["s", "l"];
-            readonly presetClass: "-contentSize";
-            readonly customVar: "--contentSize";
-            readonly tokenKey: "sz";
-        };
+        readonly isWrapper: "is--wrapper";
         readonly isLayer: "is--layer";
         readonly isBoxLink: "is--boxLink";
         readonly isCoverLink: "is--coverLink";