CSS Props

Prop Utility に対応するLism Propsを紹介します。

このページの表の見方

Prop: コンポーネントに指定するプロパティの文字列。
CSS: 対応するCSSプロパティ。
Token: 対応するトークンの種類。
To Classに該当しない値で、かつトークンキーと一致した場合、var(--{prop}--{token})という変数で値が出力されます。
To Class: ユーティリティクラスに変換される値。
-{prop}:{util}というクラスが出力されます。
BP: ブレイクポイントで値を切り替えることができる場合は○。

Colors

Prop	CSS	Token	To Class	BP
c	`color`	`COLOR`	`text`,`text-2`,`base`,`keycolor`,`mix`, `white`,`black`, `inherit`	-
bgc	`background-color`	`COLOR`	`base`,`base-2`,`text`,`keycolor`,`mix`, `white`,`black`, `inherit`	-
bdc	`--bdc`	`COLOR`	`divider`,`keycolor`,`mix`, `inherit`	-
keycolor	`--keycolor`	`COLOR`	-	-

↓

使用例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

<Box c='main' bgc='base-2' bd bdc='divider' p='30'>
  <Dummy />
</Box>
<Box c='white' bgc='black' p='30'>
  <Dummy />
</Box>

`mix` クラスの呼び出し方

.-c|bgc|bdc:mix クラスは、3つの変数を受け取とるようになっています。

c='mix'で.-c:mixクラスを呼び出し、同時にCSS変数をstyleで定義してもよいですが、c='color1:(color2:)NUM%' の書式で指定することで、自動で変数に分割されるようになっています。

↓

使用例

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

リサイズ可能

<Lism bgc='blue:10%' c='blue:currentColor:40%' p='30'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Lism>

<div
  className='-bgc:mix -c:mix -p:30'
  style='--bgc1:var(--blue);--bgc1-per:10%;--c1:var(--blue);--c2:currentColor;--c1-per:40%'
>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Typography

Prop	CSS	Token	To Class	BP
f	`font`	-	`inherit`	-
fz	`font-size`	`TYPO.FZ`	`TYPO.FZ`	○
ff	`font-family`	`TYPO.FF`	`TYPO.FF`	-
fw	`font-weight`	`TYPO.FW`	`TYPO.FW`	-
lh	`line-height`	`TYPO.LH`	`TYPO.LH`	-
lts	`letter-spacing`	`TYPO.LTS`	`TYPO.LTS`	-
ta	`text-align`	-	`center`(`c`) `left`(`l`) `right`(`r`)	-
td	`text-decoration`	-	`none`(`n`) `underline`(`u`)	-
whs	`white-space`	-	`nowrap`(`nw`)	-
ovw	`overflow-wrap`	-	`anywhere`(`any`)	-

Width & Height

Prop	CSS Property	Token	To Class	BP
w	width	`SIZE`	`100%`, `fit-content`(`fit`)	○
h	height	`SIZE`	`100%`, `fit-content`(`fit`), `screen`	○
maxW	max-width	`SIZE`	`100%`	○
maxH	max-height	`SIZE`	`100%`	○
minW	min-width	`SIZE`	`100%`	○
minH	min-height	`SIZE`	`100%`	○

Margin and Padding

Prop	CSS	Token	To Class	BP
p	padding	`SPACE`	`SPACE.0~50`	○
px	padding-inline	`SPACE`	`SPACE.0~50`	○
py	padding-block	`SPACE`	`SPACE.0~50`	○
pis	padding-inline-start	`SPACE`	`SPACE.0~50`	○
pbs	padding-block-start	`SPACE`	-	○
pl	padding-left	`SPACE`	-	○
pr	padding-right	`SPACE`	-	○
pt	padding-top	`SPACE`	-	○
pb	padding-bottom	`SPACE`	-	○
m	margin	`SPACE`	`SPACE.0~50`,`auto`	○
mx	margin-inline	`SPACE`	`auto`	○
my	margin-block	`SPACE`	`auto`	○
mis	margin-inline-start	`SPACE`	`auto`	○
mbs	margin-block-start	`SPACE`	`SPACE.0~50`, `auto`	○
ml	margin-left	`SPACE`	-	○
mr	margin-right	`SPACE`	-	○
mt	margin-top	`SPACE`	-	○
mb	margin-bottom	`SPACE`	-	○

SPACE Tokens

↓

Examples

<Box m='40'>...</Box>
<Box mx='auto'>...</Box>
<Text px={[20, 30]}>...</Text>
<Box p='30' py={[null, 50]}>...</Box>
<Box pbs='1em' my='2em'>...</Box>

Displays

Prop	CSS	Token	To Class	BP
d	display	-	`n`,`b`,`f`,`g`,`i`,`ib`,`if`,`ig`	○
v	visibility	-	`hidden`(`h`), `visible`(`v`)
ov	overflow	-	`hidden`(`h`),`auto`(`a`),`clip`(`c`)
ovx	overflow-x	-	`hidden`(`h`),`auto`(`a`),`clip`(`c`)
ovy	overflow-y	-	`hidden`(`h`),`auto`(`a`),`clip`(`c`)
op	opacity	`OPACITY`	`OPACITY`,`0`,`10`,`20`,…,`100`

Styling

Prop	CSS	Token	To Class	BP
`bxsh`	`box-shadow`	`SHADOW`	`SHADOW`	-
`bdrs`	`border-radius`	`RADIUS`	`RADIUS`	○
`bd`	`border`	-	`n`(`none`), `l`,`r`,`t`,`b`, `is`,`ie`,`bs`,`be`, `x`,`y`	-
`bdc`	`--bdc`	`COLOR.PALETTE`, `COLOR.BD`	`divider`,`i`,`keycolor`	-
`bdw`	`--bdw`	-	-	○
`bds`	`--bds`	-	-	-

borderに関する仕様は少し特殊になっています。詳しくはborderページをご覧ください。

Positions

Prop	CSS	Token	To Class	BP
`pos`	`position`	-	`r`(`relative`), `a`(`absolute`), `s`(`static`), `f`(`fixed`), `sticky`	-
`z`	`z-index`	-	`-1`, `0`, `1`, `2`	-
`inset`	`inset`	`SPACE`	`0`	-
`t`	`top`	`SPACE`	`0`,`50%`,`100%`	-
`l`	`left`	`SPACE`	`0`,`50%`,`100%`	-
`r`	`right`	`SPACE`	`0`,`50%`,`100%`	-
`b`	`bottom`	`SPACE`	`0`,`50%`,`100%`	-
`insets.is`	`inset-inline-start`	`SPACE`	`0`,`100%`	-
`insets.ie`	`inset-inline-end`	`SPACE`	`0`,`100%`	-
`insets.bs`	`inset-block-start`	`SPACE`,`100%`	-	-
`insets.be`	`inset-block-end`	`SPACE`,`100%`	-	-

position:absoluteで要素を配置する例をいくつか紹介します。

↓

pos='a'でabsolute配置する

Absolute Content

<Box pos='r' p='40' bgc='base-2'>
  <Text fz='4xl' fw='bold' op='20' ta='c' lts='l'>BG</Text>
  <Box pos='a' t='0' l='40' px='20' bd>
    <p>Absolute Content</p>
  </Box>
  <Box pos='a' insets={{ie:0, be:0}} px='20' bd>
    <p>Absolute Content</p>
  </Box>
</Box>

<div class="l--box -pos:r -p:40 -bgc:base-2">
  <p class="-fz:4xl -fw:bold -op:20 -ta:c -lts:l">  BG  </p>
  <div class="l--box -pos:a -t:0 -px:20 -bd:" style="left:var(--s40)">
    <p>Absolute Content</p>
  </div>
  <div class="l--box -pos:a -px:20 -bd:" style="inset-inline-end:0;inset-block-end:0">
    <p>Absolute Content</p>
  </div>
</div>

↓

配置の指定例

リサイズ可能

<Box pos='r' ar='3/2' lh='1' ff='mono'>
  <Box pos='a' l='0' t='0' bd p='20'>A</Box>
  <Box pos='a' l='50%' t='0' css={{translate:'-50X'}} bd p='20'>B</Box>
  <Box pos='a' r='0' t='0' bd p='20'>C</Box>
  <Box pos='a' l='0' t='50%' css={{translate:'-50Y'}} bd p='20'>D</Box>
  <Box pos='a' l='50%' t='50%' css={{translate:'-50XY'}} bd p='20'>E</Box>
  <Box pos='a' r='0' t='50%' css={{translate:'-50Y'}} bd p='20'>F</Box>
  <Box pos='a' l='0' b='0' bd p='20'>G</Box>
  <Box pos='a' l='50%' b='0' css={{translate:'-50X'}} bd p='20'>H</Box>
  <Box pos='a' r='0' b='0' bd p='20'>I</Box>
</Box>

<div class="l--box -pos:r -ar:3/2 -lh:1 -ff:mono">
  <div class="l--box -pos:a -l:0 -t:0 -bd: -p:20">A</div>
  <div class="l--box -pos:a -l:50% -t:0 -trslt:-50X -bd: -p:20">B</div>
  <div class="l--box -pos:a -r:0 -t:0 -bd: -p:20">C</div>
  <div class="l--box -pos:a -l:0 -t:50% -trslt:-50Y -bd: -p:20">D</div>
  <div class="l--box -pos:a -l:50% -t:50% -trslt:-50XY -bd: -p:20">E</div>
  <div class="l--box -pos:a -r:0 -t:50% -trslt:-50Y -bd: -p:20">F</div>
  <div class="l--box -pos:a -l:0 -b:0 -bd: -p:20">G</div>
  <div class="l--box -pos:a -l:50% -b:0 -trslt:-50X -bd: -p:20">H</div>
  <div class="l--box -pos:a -r:0 -b:0 -bd: -p:20">I</div>
</div>

Places

Prop	CSS	To Class	BP
`ai`	`align-items`	`c`, `s`, `e`, `fs`, `fe`, `str`	-
`ac`	`align-content`	`c`, `s`, `e`, `fs`, `fe`, `sb`	-
`ji`	`justify-items`	`c`, `s`, `e`, `fs`, `fe`, `str`	-
`jc`	`justify-content`	`c`, `s`, `e`, `fs`, `fe`, `sb`	-
`pi`	`place-items`	-	-
`pc`	`place-content`	-	-

Prop	CSS	To Class	BP
`aslf`	`align-self`	`c`, `s`, `e`, `str`	-
`jslf`	`justify-self`	`c`, `s`, `e`, `str`	-
`pslf`	`place-self`	-	-
`ord`	`order`	`-1`, `0`, `1`	-

Grid & Flex

grid形、flex形のプロパティはそれぞれ grid, flex オブジェクト、もしくは専用のコンポーネントのみで指定できるようになっています。

grid

以下のものは grid オブジェクト内で指定することができます。

Prop	CSS	Token	To Class	BP
`gd`	`grid`	-	-	○
`gta`	`grid-template-areas`	-	-	○
`gtc`	`grid-template-columns`	-	-	○
`gtr`	`grid-template-rows`	-	-	○
`gaf`	`grid-auto-flow`	-	-	-
`gar`	`grid-auto-rows`	-	-	-
`gac`	`grid-auto-columns`	-	-	-
`g`	`gap`	`SPACE`	`SPACE`,`inherit`	○
`rowg`	`row-gap`	`SPACE`	-	○
`colg`	`column-gap`	`SPACE`	-	○

↓

基本的なgrid系プロパティの使用例

<Lism d='grid' ai='center' grid={{gtc:'1fr 1fr', g:40}}>...</Lism>

↓

Gridコンポーネントでは、gridオブジェクトを挟まずにそのまま指定できます。

// Grid系のコンポーネントを使う場合は、gridオブジェクトは不要です。
<Grid ai='center'gtc='1fr 1fr' g={40}>...</Grid>

詳しくは<Grid>をご覧ください。

gridItem

以下のものは gridItem オブジェクト内で指定することができます。

Prop	CSS	To Class	BP
`ga`	`grid-area`	-	○
`gc`	`grid-column`	-	○
`gr`	`grid-row`	-	○
`gcs`	`grid-column-start`	-	-
`grs`	`grid-row-start`	-	-
`gce`	`grid-column-end`	-	-
`gre`	`grid-row-end`	-	-

↓

使用例

// gridItemオブジェクトで各プロパティを指定します。
<Lism gridItem={{gc:'2'}} aslf='end'>...</Lism>

// GridItemのコンポーネントを使う場合は、gridItemオブジェクトは不要です。
<GridItem gc='2' aslf='end'>...</GridItem>

flex

以下のものは flex オブジェクト内で指定することができます。

Prop	CSS	Token	To Class	BP
`fxw`	`flex-wrap`	-	`wrap`(`w`), `nowrap`(`nw`)	○
`fxd`	`flex-direction`	-	`column`(`c`), `column-reverse`(`cr`), `row`(`r`), `row-reverse`(`rr`)	○
`g`	`gap`	`SPACE`	`SPACE`,`inherit`	○
`rowg`	`row-gap`	`SPACE`	-	○
`colg`	`column-gap`	`SPACE`	-	○

flexItem

以下のものは flexItem オブジェクト内で指定することができます。

Prop	CSS	To Class	BP
`fx`	`flex`	`1`	○
`fxsh`	`flex-shrink`	`0`, `1`	-
`fxg`	`flex-grow`	`0`, `1`	-
`fxb`	`flex-basis`	-	○

Background

Lismコンポーネントでは、background用のプロパティとしてbg,backgroundsの2種類があります。

Prop	CSS	Token	To Class	BP
`bg`	`background`	-	-	-

↓

bgに指定

<Box ar='16/9' bg="url(/img.jpg) center / 50%"></Box>

以下のものは backgrounds オブジェクト内で指定することができます。

Prop	CSS	BP
`color`	`background-color`	-
`image`	`background-image`	-
`size`	`background-size`	-
`position`	`background-position`	-

↓

backgroundsで指定する例

<Box ar='16/9' backgrounds={{image: 'url(/img.jpg)', position: 'center', size: '50%'}}></Box>

gradient

gradientに指定した文字列は background-image に出力されます。

↓

値を直書き

リサイズ可能

<Frame ar='16/9' gradient='linear-gradient(to top, #a8edea 0%, #fed6e3 100%)'/>

独自ユーティリティクラスの作成例

Lismのパッケージ内で用意しているクラスはありませんが、いくつか独自のユーティリティクラスを用意してそれを呼び出す例を紹介します。

ユーティリティクラスとして強制出力する方法を活用します。

↓

stripe

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

.-bg\:stripe {
  --stripe-bdc: color-mix(in srgb, currentColor, transparent 94%);
  --stripe-bdw: 1px;
  --stripe-deg: -40deg;
  --stripe-interval: 6px;
  background-image: repeating-linear-gradient(
    var(--stripe-deg),
    var(--stripe-bdc),
    var(--stripe-bdc) var(--stripe-bdw),
    transparent var(--stripe-bdw),
    transparent var(--stripe-interval)
  );

  background-position: center;
}

↓

gradient="u:sunset"

リサイズ可能

.-gradient\:sunset{
  background: linear-gradient(to top, #ddb672 5%, #e67a44 60%, #d16834 95%);
}

Others

Prop	CSS	Token	To Class	BP
`bdrs`	`border-radius`	`RADIUS`		-
`bxsh`	`box-shadow`	`SHADOW`		-

その他、下記のCSSプロパティは css というプロパティにオブジェクトとして指定することで出力できます。
(Note: 以下に挙げているもの以外は、そのまま styleに渡されます。)

Context	Prop	Token
css.listStyle	listStyle	`none`
css.transform	transform	`flipX`,`flipY`,`flipXY`
css.transformOrigin	transformOrigin	`lt`,`lb`,`rt`,`rb`
css.translate	translate	`-50`,`-50X`,`-50Y`,`-100X`,`-100Y`
css.rotate	rotate	`45`,`-45`,`90`,`-90`,`180`
css.scale	scale
css.clipPath	scale
css.filter	filter
css.backdropFilter	backdropFilter

対応トークンとユーティリティクラスでの出力について

各プロパティごとに、指定した値によってはユーティリティクラスとして出力される場合があります。

<Box p={20} bxsh="2" ta="center" fz="xl">...</Box>

出力結果は次のようになります。

<div class="l--box -p:20 -bxsh:2 -ta:l">...</div>

具体的にどの値をユーティリティ化するかどうかの詳細は/src/config/presets,/src/config/utilitiesで定義しています。

utilities側で定義しているものは、キーと省略形のどちらを指定してもユーティリティクラスとして出力されます。

たとえば、text-align:center用の -ta:c クラスは、以下のどちらの書き方でも出力されます。

<Box ta="center">...</Box>
<Box ta="c">...</Box>

ユーティリティクラス化されない時の出力パターンについて

ユーティリティクラスとして出力されない時、3パターンの出力方式に分かれます。

1. `-prop:`クラスと`--prop`変数の組み合わせで出力される

<Box mb={40} fz='2em'>...</Box>

ブレイクポイント対応のプロパティ（ベース値を上書きする必要があるため、インラインで直接プロパティを出力せずクラスと変数で優先度の問題をなくす）
ユーティリティクラスが多く[class*='-prop:']にすると文字数の省略になりそうなもの
-{prop}:クラスによって何か値を指定していることが分かったほうが便利なケースがありそうなプロパティ

-prop:クラスだけを出力する方法

このパターン1での出力がされるLism Propsに対して "-" または true を指定することで、.-{prop}: クラスだけの出力が可能です。

CSSファイル側で具体的な値を指定したい場合などに活用できたり、一部、-{prop}:クラスがスタイルを持っている特殊なケースもあります。

<Box bd w='-' p={['-', '-']}>...</Box>

このように、-{prop}:クラスだけ出力されてCSS変数は何も出力されません。

2. 単純にstyleとして出力されるもの

<Box z="10">...</Box>

3. `--prop`だけ出力されるもの

このケースが一番稀です。

<Box bd bdc="#000" bdw="2px">...</Box>

--bdc,--bdw,--bds のborder系

ユーティリティクラスとして強制的に出力する方法

u:からはじめると、その後ろの文字列がユーティリティクラス名として出力されます。

<Box p='u:hoge'>...</Box>

↓

<div class="l--box -p:hoge">...</div>

CSS Props

Colors

mix クラスの呼び出し方

Typography

Width & Height

Margin and Padding

Displays

Styling

Positions

Places

Grid & Flex

grid

gridItem

flex

flexItem

Background

gradient

独自ユーティリティクラスの作成例

Others

対応トークンとユーティリティクラスでの出力について

ユーティリティクラス化されない時の出力パターンについて

1. -prop:クラスと--prop変数の組み合わせで出力される

2. 単純にstyleとして出力されるもの

3. --propだけ出力されるもの

ユーティリティクラスとして強制的に出力する方法

`mix` クラスの呼び出し方

1. `-prop:`クラスと`--prop`変数の組み合わせで出力される

3. `--prop`だけ出力されるもの