Lism Props

<Lism>系コンポーネントで受け取れる、Lism CSS 専用プロパティをLism Propsと呼んでいます。

`as`

出力するHTMLタグや外部コンポーネントを指定できます。デフォルトはdivです。

↓

HTMLタグの指定例

<Lism as="p">Lorem ipsum texts...</Lism>

↓

<p>Lorem ipsum texts...</p>

外部コンポーネントを指定すると、<Lism>を最終的に別の外部コンポーネントとして展開することができます。

↓

例、Lismの<Media>コンポーネントをNext.jsの<Image>で展開する

import Image from 'next/image';

<Media as={Image} src="..." p="20" bd />

先に Lism Props（上記の例だとp,bd）を解析して className, style を生成してから、asで指定したコンポーネントに渡します。 Lismコンポーネント以外に対しても Lism Props を使いたい時に活用してください。

`lismClass`

コンポーネントの基底となるc--クラス（Component Class）を指定するための専用スロットです。ここに指定したクラスは variant prop によるBEM展開の対象にもなります。

BEM展開はc--基底クラス専用の仕組みです。a--*（atomic）やl--*（layout）は後述のatomic / layout prop から指定してください。

↓

例

<Lism p="10" lismClass="c--myComponent">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent -p:10">Lorem ipsum texts...</div>

`variant`

lismClassに対するバリエーションクラスを出力できます。 lismClass に複数クラスが指定されている場合、先頭のクラスに対してバリエーションクラスを出力します。

↓

例

<Lism lismClass="c--myComponent" variant="secondary">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent c--myComponent--secondary">Lorem ipsum texts...</div>

`layout` / `atomic`

layout と atomic はそれぞれ Layout Primitive クラス（l--*）と Atomic Primitive クラス（a--*）を指定するための prop です。

レイアウトプリミティブを指定できます。例えばlayout='flow'とすると、.l--flowクラスが出力されます。

↓

例

<Lism layout="flow">Lorem ipsum texts...</Lism>
<Lism atomic="divider" />

↓

<div class="l--flow">Lorem ipsum texts...</div>
<div class="a--divider"></div>

指定された layout, atomic に応じた専用処理が追加されることもあります。

例1: layout="sideMain"の場合はsideW / mainW を受け取れる
例2: atomic="spacer" 時は w / h でスペーストークンを受け付ける

`set` / `util`

set は Set Class（set--{value}）、
util は Utility Class（u--{value}）を指定するための prop です。

↓

例

<Lism set="shadow" util="cbox">...</Lism>

↓

<div class="set--shadow u--cbox">...</div>

複数指定

どちらもスペース区切りで複数指定できます。

<Lism set="hov transition" util="cbox trim">...</Lism>

`-` prefix で除外

値の先頭に - を付けると、その識別子を除外できます。コンポーネント内部で適用済みのクラスを除外したい場合などに利用できます。

{/* Buttonに初期セットされている set="plain"(set--plain) を除外 */}
<MyButton set="-plain">...</MyButton>

{/* u--trim を除外して u--cbox を追加 */}
<MyCallout util="-trim cbox">...</MyCallout>

Trait Props

Trait Primitives クラスに対応するプロパティ群です。

Prop	出力クラス	用途
`isWrapper(='{s\|l}')`	`is--wrapper` + `-contentSize:{s\|l}`	コンテンツ幅制限
`isLayer`	`is--layer`	絶対配置レイヤー（inset:0）
`isBoxLink`	`is--boxLink`	ボックス全体リンク化
`isCoverLink`	`is--coverLink`	親要素全体に広がるクリック範囲を持つリンク
`isContainer`	`is--container`	コンテナクエリ対象
`isSide`	`is--side`	サイド要素
`isSkipFlow`	`is--skipFlow`	Flow 余白をスキップ
`isVertical`	`is--vertical`	縦書き方向

Trait Primitives クラスについての解説と使用例はこちら

CSS Props

主要な CSS プロパティに対して、省略記法（Shorthand）で指定できます。
例えば、font-size は fz、padding は p で指定できます。

指定可能な Props 一覧はこちら

prop={value} で指定した値（value）に応じて、出力形式が以下のように決まります。

値	出力形式	例
トークン値・プリセット値	`-{prop}:{value}` クラス	`fz='l'` → `-fz:l`
`true` / `"-"`	`-{prop}` クラスのみ（変数なし）	`bd` → `-bd`
`:` で始まる値	強制的にユーティリティクラス化	`p=':hoge'` → `-p:hoge`
その他の値（BP対応）	`-{prop}` クラス + `--{prop}` 変数	`fz='20px'` → `-fz` + `--fz:20px`
その他の値（BP非対応）	`style` 属性に直接出力	`o='0.7'` → `opacity:0.7`
その他の値（変数専用）	`--{prop}` 変数のみ	`bdw='2px'` → `--bdw:2px`

補足

BP対応プロパティ: ブレイクポイントで値を切り替えられるプロパティです。Property Class の BP 欄を参照してください。
変数専用プロパティ: bds, bdc, bdw, keycolor など、常に CSS 変数（--{prop}）のみで出力されるプロパティです。
対応トークンがあるがクラスとして登録されていない場合は、CSS 変数で出力されます。（例: c='red' → class="-c" + style="--c:var(--red)"）

コード例

↓

トークン値 → クラスのみ

<Lism fz="l" p="20">...</Lism>
// → <div class="-fz:l -p:20">...</div>

↓

カラートークン（クラス未登録）→ クラス + CSS変数

<Lism c="red">...</Lism>
// → <div class="-c" style="--c:var(--red)">...</div>

↓

true / "-" → クラスのみ（変数なし）

<Lism p="-" bdrs>contents</Lism>
// → <div class="-p -bdrs">contents</div>

CSS側で変数の中身を記述したい場合や、親と同じ変数を継承したい場合などに活用できます。

↓

変数専用プロパティ → CSS変数のみ

<Lism bd bdc="#000" bdw="2px">...</Lism>
// → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>

↓

BP対応プロパティにカスタム値 → クラス + CSS変数

<Lism fz="20px">contents</Lism>
// → <div class="-fz" style="--fz:20px">contents</div>

↓

BP非対応プロパティにカスタム値 → style属性に直接出力

<Lism o="0.75">contents</Lism>
// → <div style="opacity:0.75">contents</div>

`:` でクラスとして強制的に出力

対応する Property Class がない場合でも、: から始めることでその後ろの文字列がクラス名として出力されます。

<Lism p=":hoge">...</Lism>
// → <div class="-p:hoge">...</div>

任意のクラスをCSSへ追加し、ご利用ください。

.-p\:hoge {
  /* ... your styles ... */
}

className='-p:hoge' としてももちろん大丈夫ですが、:を使ってCSS Propとして渡すことで出力順序が統一されます。

レスポンシブ指定

BP対応プロパティは、配列またはオブジェクトでブレイクポイント（sm, md）ごとの値を指定できます。

レスポンシブ対応の詳細はこちら

↓

例1: 配列で指定（base → sm → md の順）

<Lism p={['20', '30', '5rem']}>...</Lism>

↓

例2: 途中のBPをスキップ（@md のみ指定）

<Lism p={[null, null, '40']}>...</Lism>

実際に値が切り替わるかどうかは、そのプロパティがレスポンシブ対応している必要があります。どのプロパティが対応しているかはProperty Class の BP（ブレイクポイントの略）の欄をチェックしてください。

デフォルトでレスポンシブ対応されていない（CSSが用意されていない）プロパティに関しては、SCSSによるカスタマイズを行うことで対応できます。

`exProps`

Lism Props としての処理をスキップしたいプロパティをオブジェクトで指定できます。

asで指定した外部コンポーネントが受け取れるプロパティと Lism Props の名前が被っている場合など、外部コンポーネント用のプロパティであることを明示的にしたい時に便利です。

↓

例

<Icon as={Hoge} exProps={{ size: '1em' }} p="10" fz="l">
  ...
</Icon>

上記のようにすることで、LismのIconコンポーネントでp, fz を受け取って処理し、Hogeという外部コンポーネント側で確実にsizeを受け取ることができます。
（現状、Lism 側では size は処理されないためこの例ではexPropsは不要ですが、外部コンポーネント用のプロパティを明示的に指定しておくと、将来的にも影響がでる心配がなくなります。）

クラスの出力順

<Lism> が生成する class 属性は、以下のような順序で出力されます

[className] [c--] [a--] [l--] [is--] [set--] [u--] [-]

#	Prop	例
1	独自クラス（`className`）	`z--header`, `hoge`
2	`lismClass` (+ `variant`)	`c--box`, `c--box--primary`
3	`atomic`	`a--icon`, `a--divider`
4	`layout`	`l--flex`, `l--columns`
5	`isXxxx`	`is--wrapper`, `is--layer`
6	`set`	`set--hov`, `set--transition`
7	`util`	`u--cbox`, `u--trim`
8	`prop={value}`	`-p:20`, `-bgc:base-2`

layout="flow" の -flow:{size} はレイアウトプリミティブ固有の設定クラスとして扱われるため、l--flow 直後のプリミティブ群に並びます。

class 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。

Lism Props

as

lismClass

variant

layout / atomic

set / util