Lism

LismのCSS設計に対応した様々なプロパティを受け取ることができるようになっている汎用的なコンポーネントです。
何も指定がなければ、ただの<div>を返します。

Lismで配布しているほぼ全てのコンポーネントは、この<Lism>がベースなっています。

↓

<Lism>の出力例

Lism content

<Lism p="20" fw="bold" c="blue" bgc="base-2" bdrs="20">
  Lism content
</Lism>

Import

import { Lism } from 'lism-css/react';

Lism Props

<Lism>で受け取れる、Lism CSS 専用プロパティをLism Propsと呼んでいます。

`lismClass`

現在のコンポーネントの主要なクラス名を指定できます。 <Lism>のクラス処理の中で優先度が高めの出力順となります。

↓

例

<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

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

↓

例

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

↓

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

`set`

Set Class を指定できます。指定した値は set--{value} クラスとして出力されます。

↓

例

<Lism set="hov">...</Lism>

↓

<div class="set--hov">...</div>

複数指定

スペース区切りで複数指定できます。

<Lism set="hov transition">...</Lism>

`-` prefix で除外

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

{/* set--plain を除外 */}
<AccordionButton set="-plain">...</AccordionButton>

{/* hov, transition を有効化しつつ shadow を除外 */}
<Lism set="hov transition shadow -shadow">...</Lism>

`util`

u-- ユーティリティクラスを指定できます。指定した値は u--{value} クラスとして出力されます。

↓

例

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

↓

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

set prop と同様に、スペース区切りで複数指定したり、値の先頭に - を付けて除外したりできます。

<Lism util="cbox trim">...</Lism>
<Lism util="cbox -trim">...</Lism>

`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 を使いたい時に活用してください。

`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は不要ですが、外部コンポーネント用のプロパティを明示的に指定しておくと、将来的にも影響がでる心配がなくなります。）

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によるカスタマイズを行うことで対応できます。

クラスの出力順

<Lism> が生成する class 属性は、大きく 「ユーザー指定」「コンポーネント・プリミティブ群」「ユーティリティ群」 の3ブロックに分かれます。ユーティリティ群は粒度の低い（＝塊としての）順 set-- → u-- → Property Class で並びます。

[className] [lismClass] [l--{layout}] [is--*(Trait)] [set--*] [u--*] [Property Class...]

#	区分	由来	例
1	`className`	ユーザーが直接渡すクラス	`my-card`
2	`lismClass`（+ `variant`）	コンポーネント本体のクラス。`c--`（複合）や `a--`（atomic）等	`c--box`, `a--icon`, `c--box c--box--primary`
3	レイアウトプリミティブ	`layout` prop	`l--box`, `l--flow`
4	トレイトプリミティブ	Trait Props（`isWrapper` 等）	`is--wrapper`, `is--layer`
5	Set Class	`set` prop	`set--hov`, `set--card`
6	`u--` ユーティリティ	`util` prop	`u--cbox`, `u--trim`
7	Property Class	CSS Props（`hov` 含む）	`-p:20`, `-bgc:base-2`

2〜4 はいずれも Component Class / Primitive Class（CSS レイヤー lism-component / lism-primitive）に属し、5〜7 はユーティリティ系のクラスです。

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

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