Changelog

v.1.0リリースまでしばらく激しい変更が続く可能性があるため、変更点をここに記載して行く予定です…。

2025.11.03、Lism CSS v.0.6 がリリースされました。

l--flow の仕様を調整しました。

• -flow:base クラスを廃止しました。
• -flow: クラスと--flow変数の組み合わせによってl--flowの余白量を指定できるようになりました。

2025.10.31、Lism CSS v.0.5 がリリースされました。

全体を通して、クラス名・CSS変数名に関する命名規則について大幅に再整理しました。

一部のコンポーネントでlayoutを指定できましたが、全てのコンポーネントで、layoutプロパティが使えるようになり、文字列で指定できるようになりました。

変更例:<LinkBox layout={Grid}> → <LinkBox layout='grid'>

現状のルール詳細は 命名規則に関する説明 をご覧ください.

	変更前	変更後
トークン	--{token}-	--{token}--
ローカルな子要素プロパティ	--{item}-{prop}	--_{item}-{prop}
root上書きできるベース値	--{target}--{prop}	--{target}-{prop}
特殊変数	--_{varName}	--{varName}_

例：

• --fz-l → --fz--l
• --c-main → --c--main
• --link--td → --link-td

変更前	変更後
--size-	--sz--
--op-	--o--

トークン	変更前	変更
c	divider (--c-divider, -bdc:divider)	line (--c--line, -bdc:line)
fw	light normal bold (-fw:light|normal|bold)	thin light normal medium bold black (-fw:thin|light|normal|medium|bold|black)
op→o	low mid high (--op-low|mid|high, -o:low|mid|high)	-10 -20 -30 (--o--n10|n20|n30, -o:-10|-20|-30)
size→sz	--size-{token}	--sz--{token}
ar	ogp (-ar:ogp, --ar-ogp)	og (-ar:og, --ar--og)

これまではできる限り省略した短いクラス名を採用していましたが、極端な省略は避けるように変更しました。

-{prop}:{value}において、

• {prop}部分については、主要なプロパティのみ 1~3文字への極端な省略名を用います。
• {value}部分については、基本的には省略はせず、長いキーワード値は意味がわかる程度に省略します。

{value}部分の省略を避けることで、{prop}側が省略されていてもその組み合わせを見てどのプロパティを示すか予測しやすいようになりました。

対象	変更前	変更後
fs	-fs:i	-fs:italic
td	-td:u, -td:n	-td:under, -td:none
v	-v:h, -v:v	-v:hidden, -v:visible
pos	r, a, s, f, sti	rel, abs, static, fixed, sticky
d	n, b, if	none, block, in-flex
ov系	h, a, c, s	hidden, auto, clip, scroll
m系	a	auto
fxw	w, n	wrap, no
fxd	c, r, cr, rr	col, row, col-r, row-r
-bds:	ds, dt, db	dashed, dotted, double
ga	-ga:1	-ga:1/1
a[i|c], j[i|c]	c,s,e,fs,fe,str, sb	center,start, end, flex-s, flex-e, stretch, between

プロパティ	変更前	変更後
opacity	op	o
translate	trnslt	translate
whitespace	whs	whitespace
float	fl	float
clear	cl	clear
order	ord	order
isolation	iso	isolation
max-width	maxW	max-w
min-width	minW	min-w
max-height	maxH	max-h
min-height	minH	min-h

opacityがop → o となったため、 hov='op'(.-hov:op) も hov='o' (-hov:o) に変更しました。

• 方向指定プロパティは原則として-で繋げる{prop}-{side}ような命名規則になりました。
• ただし、p,m は (pt,px)などの書き方が一般的なため、最初のハイフンを省略します。

対象プロパティ	変更前	変更後
column-gap	gx	g-x
row-gap	gy	g-y
overflow-x	ovx	ov-x
overflow-y	ovy	ov-y
padding-inline-start	pis	px-s
padding-inline-end	pie	px-e
padding-block-start	pbs	py-s
padding-block-end	pbe	py-e
margin-inline-start	mis	mx-s
margin-inline-end	mie	mx-e
margin-block-start	mbs	my-s
margin-block-end	mbe	my-e

さらに、borderの方向指定クラスが -bd:{side} → -bd-{side} に変更されました。
コンポーネントでの指定方法も、bd='{side}' → bd-{side} に変更されました。

変更前	変更後
bd="t"	bd-t
bd="b"	bd-b
bd="l"	bd-l
bd="r"	bd-r
bd="x"	bd-x
bd="y"	bd-y
bd="is"	bd-x-s
bd="ie"	bd-x-e
bd="bs"	bd-y-s
bd="be"	bd-y-e

変更前	変更後
.-hov:set	.set-hover
.-hov:get:xxx	.-hov:to:xxx
.-trs	.set-transiton
--trsdu	--duration
--trstf	--ease
--trsp	--property

LinkBox のデフォルトで設定されていた　hov='op' を削除しました。

変更前	変更後
.is--fullwide	.-max-sz:full
.is--overwide	.-max-sz:outer
.is--wide	廃止
--overwideSize	--sz--outer
--fullwideSize	--sz--full

変更前	変更後
<Column variant='liquid'> (.l--column--liquid)	<Grid gtc='liquid'> (-gtc:liquid)
<Column variant='repeat'> (.l--grid--repeat)	<Grid gt='repeat'> (-gt:repeat)
<Flex variant='cluster'> (.l--flex--cluster)	<Cluster> (.l--cluster)

<Lism tag='xxx'>のエイリアスであるコンポーネントは、<HTML.xxx>として配布するように変更しました。

変更前	変更後
<Text>	<HTML.p>
<Link>	<HTML.a>

この他、<HTML.span>など新規追加しています。

変更前	変更後
--contentSize	--contentSz
--flowM	--flow
re--list	set-revert
re--style	set-plain
re--sh	set-shadow
u--	u-
u--trimHL	u-trim
u--trimBox	u-trimItems
u--clipText	-bgclip:text, -c:trsp
u--innerR, u--innerL	set-innerR, -bdrs:inner

• Prop Classの強制ユーティリティ出力に必要な冒頭キーワードを u: から : に変更。
• gridプロパティ指定用のgdを廃止しました。gt, gar, gac を使用してください。
• -d:f, -d:g を廃止しました（l--flex, l--gridがあるため）。また、使用頻度が少ないと判断し、-d:i, -d:ib を廃止しました。
• -fw:100~-fw:900 を廃止しました。（代わりにトークンクラスが増えています）。
• -c:mix 系クラスを廃止しました。black:50%のような指定方法は引き続き利用できますが、単純にcolor-mix()でstyle属性に出力されます。
• obf (object-fit)をLism Propから除外しました。（l--frameがあるので不要と判断しました。）
• その他、bxsz, trf, trfo, fltr, bdfltr をLism Propから除外しました。

• 2025.09.22 v.0.3.5
  • grid子要素のプロパティ指定をどのコンポーネントでもできるようにし、GridItemを廃止（gridItemプロパティを廃止）しました。
• 2025.09.20 v.0.3.4
  • -bd クラスの仕様を変更しました。
  • -bds:ds, -bds:dt, -bds:db を追加しました。
• 2025.09.16 v.0.3.3
  • 0.3.2 による不具合を修正。
• 2025.09.15 v.0.3.2
  • reset.scss の内容を微調整しました。
• 2025.09.04 v.0.3.1
  • is--overwide の仕様を微調整し、コンテナの親のhas--gutterを考慮するようになりました。
• 2025.08.28 v.0.3
  • -hov クラスの仕様を変更しました。
  • c,bgc,op,bdc,bxsh の初期値を設定しました。
  • -hov:fade を廃止。(代わりに -hov:op を使用してください。)
• 2025.08.08 v.0.2.0
  • ブレイクポイントの数値を変更しました。
  • scssカスタマイズを考慮して変数などを一部調整、修正しました。
  • @layerをオフにして利用できるようにmain_no_layer.scss を追加しました。
  • --root--fz→--fz-baseへ変更し、--fz-baseを追加しました。
  • ar クラスから gold を削除。
• 2025.06.26 v.0.1.3
  • scssソースファイルの配置を一部変更
• 2025.06.20 v.0.1.2
  • --size-xsの数値を変更、--size-minの追加
  • shadowトークンの仕様を変更。
• 2025.06.12 v.0.1.1
  • -fz:5xl, var(--fz-5xl) を追加
• 2025.06.11 v.0.1.0 リリース