lism-css 0.17.0 → 0.20.0

package/README.ja.md

@@ -20,7 +20,7 @@ React / Astro 向けのコンポーネントも提供しており、propsを通
 - **ゼロビルドフレームワーク** — CSS ファイルを読み込むだけで、プレーン HTML でも動作します。ビルドツール、プリプロセッサ、設定は不要。CDN または npm で利用可能。
 - **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--withSide` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
 - **CSS レイヤー構造** — `@layer`（lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-trait` は `is--` / `has--` の Trait クラス用レイヤー、`lism-primitive` の内部は `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` は BEM 構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
-- **デザイントークン** — カラー、スペーシング、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
+- **デザイントークン** — カラー、余白、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
 - **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
 - **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
 - **React & Astro コンポーネント** — React と Astro の両方に対応した専用コンポーネントが、props を Lism CSS のクラスと変数に自動変換します。`class="l--stack -g:20"` の代わりに `<Stack g="20">` と書けます。
@@ -180,11 +180,11 @@ Lism CSS は構造化された命名規則を CSS クラスに使用していま
 Lism CSS は一貫したデザインのための CSS カスタムプロパティを提供します:
 
 - **カラー:** `--base`、`--base-2`、`--text`、`--text-2`、`--link`、`--divider`、`--brand`、`--accent`、パレットカラー（`--red`、`--blue`、`--green` など）
-- **スペーシング:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80`（rem 値にマッピング）
+- **余白:** `--s5`, `--s10`, `--s15`, `--s20`, `--s25`, `--s30`, `--s35`, `--s40` … `--s80`（rem 値にマッピング）
 - **フォントサイズ:** `--fz--2xs` 〜 `--fz--5xl`
 - **ボーダー半径:** `--bdrs--10`（0.25rem）〜 `--bdrs--99`（99rem）
 - **シャドウ:** `--bxsh--10` 〜 `--bxsh--50`（シャドウカラー設定可能）
-- **コンテナサイズ:** `--sz--xs`（32rem）〜 `--sz--xl`（1600px）
+- **コンテナサイズ:** `--sz--xs`（400px）、`--sz--s`（640px）、`--sz--m`（880px）、`--sz--l`（1200px）、`--sz--xl`（1600px）
 
 ## UI コンポーネント
 

package/README.md

@@ -180,11 +180,11 @@ Default breakpoints: `sm` = 480px, `md` = 800px, `lg` = 1120px (container querie
 Lism CSS provides CSS custom properties for consistent design:
 
 - **Colors:** `--base`, `--base-2`, `--text`, `--text-2`, `--link`, `--divider`, `--brand`, `--accent`, plus palette colors (`--red`, `--blue`, `--green`, etc.)
-- **Spacing:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80` (mapped to rem values)
+- **Spacing:** `--s5`, `--s10`, `--s15`, `--s20`, `--s25`, `--s30`, `--s35`, `--s40` … `--s80` (mapped to rem values)
 - **Font Sizes:** `--fz--2xs` through `--fz--5xl`
 - **Border Radius:** `--bdrs--10` (0.25rem) through `--bdrs--99` (99rem)
 - **Shadows:** `--bxsh--10` through `--bxsh--50` with configurable shadow colors
-- **Container Sizes:** `--sz--xs` (32rem) through `--sz--xl` (1600px)
+- **Container Sizes:** `--sz--xs` (400px), `--sz--s` (640px), `--sz--m` (880px), `--sz--l` (1200px), `--sz--xl` (1600px)
 
 ## UI Components
 

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'] },
@@ -85,7 +85,7 @@ export default {
     prop: 'maxInlineSize',
     token: 'sz',
     tokenClass: 1,
-    presets: ['full'],
+    presets: ['full', 'bleed'],
     exUtility: {
       full: '',
       bleed: '',
@@ -96,7 +96,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 +139,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' },
@@ -180,10 +180,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 +196,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 +214,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 +229,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 +251,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' },

package/config/defaults/tokens.ts

@@ -8,15 +8,15 @@ export default {
   o: ['mp', 'p', 'pp', 'ppp'],
   bdrs: ['10', '20', '30', '40', '99', 'inner'],
   bxsh: ['10', '20', '30', '40', '50'],
-  sz: ['xs', 's', 'm', 'l', 'xl', 'bleed'],
+  sz: ['xs', 's', 'm', 'l', 'xl'],
   ar: ['og'],
   space: {
     pre: '--s',
-    values: ['5', '10', '15', '20', '30', '40', '50', '60', '70', '80'],
+    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'],
+    values: ['base', 'base-2', 'text', 'text-2', 'divider', 'link', 'brand', 'accent', 'neutral'],
   },
   palette: {
     pre: '--',

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

@@ -9,15 +9,15 @@ declare const _default: {
         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", "bleed"];
+        readonly sz: readonly ["xs", "s", "m", "l", "xl"];
         readonly ar: readonly ["og"];
         readonly space: {
             readonly pre: "--s";
-            readonly values: readonly ["5", "10", "15", "20", "30", "40", "50", "60", "70", "80"];
+            readonly values: readonly ["5", "10", "15", "20", "25", "30", "35", "40", "50", "60", "70", "80"];
         };
         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";
@@ -180,7 +181,7 @@ declare const _default: {
             readonly prop: "maxInlineSize";
             readonly token: "sz";
             readonly tokenClass: 1;
-            readonly presets: readonly ["full"];
+            readonly presets: readonly ["full", "bleed"];
             readonly exUtility: {
                 readonly full: "";
                 readonly bleed: "";
@@ -200,7 +201,7 @@ declare const _default: {
         };
         readonly bg: {
             readonly prop: "background";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly bgi: {
             readonly prop: "backgroundImage";
@@ -269,16 +270,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': {
@@ -397,19 +398,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 +436,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 +459,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 +498,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 +526,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 +553,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 +609,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 +637,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";