Changelog

Breaking changes may continue frequently until the v1.0 release, so all notable changes will be documented here…

v.0.9.0 (2026.03.17)

• Changes in lism-css
  • React components have been migrated to TypeScript, enabling property suggestions in editors.
  • set-xxx → set--xxx
  • u-xxx → u--xxx
  • u-trimItems → u--trimChildren
  • set-snap → u--snap
  • -content: → -contentSize:
• Major overhaul of @lism-css/ui.
• Published @lism-css/mcp updated to v.0.9.0.

v.0.8.3

• Minor CSS adjustments for linkbox.
• Minor adjustments to the default --divider color.

v.0.8.2

• Added .-hov:to:zoom to the core.
• Minor adjustments to l--flow.

v.0.8 (Major changes)

[Important] line-height specification has been changed.

The system has been updated to manage line-height using half-leading.

See Typography & Scaling for details.

Layout module changes

Before	After	Notes
WithSide(l--withSide)	SideMain(l--sideMain)	Layout module renamed
<Grid gtc='liquid'> (.-gtc:liquid)	<FluidCols>(l--fluidCols)	Extracted as a standalone layout module
	SwitchCols(l--switchCols)	New layout module added

Removal of Dynamic Modules

d--accordion, d--modal, and d--tabs have been removed.

<Accordion>, <Modal>, and <Tabs> are no longer available in lism-css.

They are now provided by the @lism-css/ui package instead.

Token / CSS variable changes

Before	After	Notes
--c--main	--brand	Color token renamed
--c--line	--divider	Color token renamed
--duration, --ease, --delay	--hov-duration, --hov-ease, --hov-delay	Hover-related variable names clarified
--isHov_	--_isHov	Naming convention changed
--gutter	--gutter-size	Variable name clarified

• Spacing scale has been overhauled.
• Color tokens have been globally adjusted.

Prop Class changes

Before	After	Notes
ovw	ovwrap	overflow-wrap
whitespae	whspace
-td:under	Removed
-	-tt:upper, -tt:lower	Newly added

• translate, scale, and rotate have been removed from Prop Classes.

Utility class changes

Before	After	Notes
-writing:vertical	is--vertical	Moved to State Class
u-bgclipText	Removed (opt-out)
u-itemDivider	u--collapseGrid	Class renamed
-gtc:liquid	l--fluidCols	Extracted as a layout class
-bd	Default value of --bdc changed	-bdc:cc added

• Added set--bp.

Content size management class changes

is--container now only handles setting container-type. Content size management functionality has been separated into is--wrapper.

Before	After
.-max-sz:outer	.-max-sz:container
--sz--outer	--sz--container

v.0.7

• Adjusted styles and scripts for <Modal> (d--modal).
• Adjusted --ff--base.
• Minor adjustments to l--flow styles.
• Added --focus-offset.

v.0.7.1

• Fixed my-e incorrectly applying in the inline direction. (Now correctly applies margin-block-end.)

v.0.7.2

• Adjusted CSS for is--linkBox and u--expandedLink.
• Applied setPlain to <HTML.button> by default.
• Changed the initial color for a from var(--link) to var(--link-c, --link).

v.0.7.3

• Fixed an issue where the changes from 0.7.2 were not reflected in the CSS.

v.0.6

Lism CSS v.0.6 was released on 2025.11.03.

Updated the specification for l--flow.

• Removed the -flow:base class.
• The amount of spacing in l--flow can now be specified by combining the -flow: class with the --flow variable.

v.0.6.1

• Minor internal adjustments.

v.0.5 (Major changes)

Lism CSS v.0.5 was released on 2025.10.31.

The naming conventions for class names and CSS variable names have been significantly reorganized throughout the entire library.

Changes to the layout prop

Previously, only some components accepted a layout prop. Now, all components support it, and values can be specified as strings.

Example: <LinkBox layout={Grid}> → <LinkBox layout='grid'>

CSS variable naming convention changes

For current details, see the Naming conventions section.

	Before	After
Token	--{token}-	--{token}--
Local child element properties	--{item}-{prop}	--_{item}-{prop}
Base values overridable from :root	--{target}--{prop}	--{target}-{prop}
Special variables	--_{varName}	--{varName}_

Examples:

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

Token changes

Before	After
--size-	--sz--
--op-	--o--

Token	Before	After
c	divider (--c-divider, -bdc:divider)	line (--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)

Changes to Prop Class abbreviations

Previously, class names were abbreviated as short as possible, but the convention has changed to avoid extreme abbreviations.

For -{prop}:{value}:

• The {prop} part uses extreme 1–3 character abbreviations only for major properties.
• The {value} part is generally not abbreviated; long keyword values are shortened only to the extent that their meaning remains clear.

By avoiding excessive abbreviation of {value}, the combination of an abbreviated {prop} and its {value} makes it easier to infer which CSS property is being referenced.

Changes to the {value} part

Target	Before	After
fs	-fs:i	-fs:italic
td	-td:n	-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 variants	h, a, c, s	hidden, auto, clip, scroll
m variants	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

Changes to the {prop} part

Property	Before	After
opacity	op	o
translate	trnslt	translate
whitespace	whs	whspace
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

Since opacity changed from op to o, hov='op' (.-hov:op) has also been updated to hov='o' (-hov:o).

Directional properties

• Directional properties now follow the {prop}-{side} naming convention, connected with a hyphen -.
• However, p and m omit the first hyphen (e.g., pt, px), as these forms are already widely used.

Target property	Before	After
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 changes

Border directional classes have changed from -bd:{side} to -bd-{side}. Component prop syntax has also changed from bd='{side}' to bd-{side}.

Before	After
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

hover and transition changes

Before	After
.-hov:set	.set--hover
.-hov:get:xxx	.-hov:to:xxx
.-trs	.set-transiton
--trsdu	--duration
--trstf	--ease
--transparent	--property

The default hov='op' that was set on LinkBox has been removed.

Content size management class changes

Before	After
.is--fullwide	.-max-sz:full
.is--overwide	.-max-sz:outer
.is--wide	Removed
--overwideSize	--sz--outer
--fullwideSize	--sz--full

Grid and Flex changes

Before	After
<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)

Text, Link → HTML.p, HTML.a

Components that were aliases for <Lism as='xxx'> are now distributed as <HTML.xxx>.

Before	After
<Text>	<HTML.p>
<Link>	<HTML.a>

Additionally, new components such as <HTML.span> have been added.

Other changes

Before	After
--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--trimChildren
u--clipText	-bgclip:text, -c:transparent
u--innerR, u--innerL	set-innerR, -bdrs:inner

• The prefix keyword required to force utility output for Prop Classes has changed from u: to :.
• The gd prop (for the grid shorthand) has been removed. Use gt, gar, or gac instead.
• -d:f and -d:g have been removed (use l--flex and l--grid). -d:i and -d:ib have also been removed due to low usage.
• -fw:100 through -fw:900 have been removed. (Token-based classes have been added instead.)
• -c:mix variant classes have been removed. The black:50% syntax continues to work, but simply outputs color-mix() in the style attribute.
• obf (object-fit) has been removed from Lism Props. (Considered unnecessary since l--frame covers this use case.)
• Additionally, bxsz, trf, trfo, fltr, and bdfltr have been removed from Lism Props.

~ v.0.3

• 2025.09.22 v.0.3.5
  • Grid child element props can now be specified on any component, and GridItem (along with the gridItem prop) has been removed.
• 2025.09.20 v.0.3.4
  • Updated the specification for the -bd class.
  • Added -bds:ds, -bds:dt, -bds:db.
• 2025.09.16 v.0.3.3
  • Fixed a bug introduced in 0.3.2.
• 2025.09.15 v.0.3.2
  • Minor adjustments to reset.scss.
• 2025.09.04 v.0.3.1
  • Minor adjustments to is--overwide specification to account for the parent container’s set--gutter.
• 2025.08.28 v.0.3
  • Updated the specification for -hov classes.
  • Set default values for c, bgc, op, bdc, and bxsh.
  • Removed -hov:fade. (Use -hov:op instead.)
• 2025.08.08 v.0.2.0
  • Updated breakpoint values.
  • Partially adjusted and fixed variables to better support SCSS customization.
  • Added main_no_layer.scss to allow use without @layer.
  • Renamed --root--fz to --fz-base and added --fz-base.
  • Removed gold from the ar class.
• 2025.06.26 v.0.1.3
  • Reorganized some SCSS source file locations.
• 2025.06.20 v.0.1.2
  • Updated the value of --size-xs and added --size-min.
  • Updated the shadow token specification.
• 2025.06.12 v.0.1.1
  • Added -fz:5xl and var(--fz-5xl).
• 2025.06.11 v.0.1.0 Released