Set Class( set--* )

lism-base 層の中で定義される、HTML 要素の基礎スタイリングや変数セットを行うためのクラスを set--{name} の形式で定義しています。

set-- クラスは目的別に 2 カテゴリに分かれます。

カテゴリ	用途	クラス
基礎スタイリング	HTML 要素のリセット／リバート	`set--plain` / `set--revert`
変数のセット	CSS変数のセットアップのみを行う	`set--bxsh` / `set--hov` / `set--bdrsInner` / `set--bleed` / `set--s`

set--{name} の {name} は、そのクラスがセットアップするCSS変数の名称に対応します（例: --bxsh--* → bxsh、--_isHov / --_notHov → hov、--bdrs--inner → bdrsInner、--s* → s）。

`set--plain`

主要スタイルをリセットするためのクラスです。

// ボタンやリンク、モーダルスタイルをリセットするためのユーティリティクラス
// Memo: font:inherit は書いていない。→  .-font:inherit がある + フォーム系には reset.css で記述済み + line-height に影響が出るため。

.set--plain {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  color: inherit;
  font: inherit;
  line-height: var(--lh, calc(1em + var(--hl) * 2)); /* 全称セレクタ と同じ値 */
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  text-decoration: none;
  text-align: inherit; /* buttonのUAスタイルを打ち消す */
  border-radius: 0;
}

↓

set--plainをbuttonに適用する例

<div class="l--flex -g:20 -ff:mono">
  <button class="set--plain">button</button>
</div>

`set--revert`

ブラウザ標準スタイルを明示的に復活させるためのクラスです。このクラス単体で、全プロパティをrevertするわけではありません。

特定の HTML 要素と組み合わせてスタイルを定義して使うものであり、現状は ul / ol のみ対象です。

Lism CSS では、クラスを持つリスト（ul / ol）ではスタイルがリセットされます。クラスを持ちつつ、箇条書き表示を維持したい場合（Property Class しか持たないリストなど）に set--revert を付与します。

// HTML 要素の基礎スタイリング ― ブラウザ標準の見た目を復活させる汎用クラス
// set--revert 単体では何も適用されず、HTML要素と組み合わせて使う想定。現状は ul / ol のみ対象だが、ユーザーが a / button など他要素に対しても自由に使える。
:is(ul, ol).set--revert {
  list-style: revert;
  padding-inline-start: var(--list-ps, 1.75em);
}

↓

Property Class 付き ul に set--revert を適用する例

item 1
item 2
item 3

<ul class="-fz:l set--revert">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

classless な ul / ol（class 属性を一切持たないリスト）はブラウザ標準スタイルが自動復活するため、set--revert は不要です。

`set--bxsh`

set--bxsh クラスを指定した要素では、シャドウを構成する --bxsh-- 変数と、近い側の影色 --shc--near が再定義されます。

:root,
.set--bxsh {
  --shc--near: color-mix(in srgb, var(--shc), transparent 50%);
  --bxsh--10: var(--shsz--5) var(--shc--near), var(--shsz--10) var(--shc);
  --bxsh--20: var(--shsz--10) var(--shc--near), var(--shsz--20) var(--shc);
  --bxsh--30: var(--shsz--20) var(--shc--near), var(--shsz--30) var(--shc);
  --bxsh--40: var(--shsz--30) var(--shc--near), var(--shsz--40) var(--shc);
  --bxsh--50: var(--shsz--40) var(--shc--near), var(--shsz--50) var(--shc);
}

ここで--shc変数を上書きすることで、シャドウの色味を調整したりすることが可能です。--shc--nearも--shcから再計算されるため、2層の影の色がまとめて変わります。

↓

シャドウの上書き例

Default:

Box

set--bxsh で変数を上書きした例:

Box

<div class="l--flex set--bxsh -g:30" style="--shc: hsl(200 50% 50% / 20%)">
  <div class="l--box -bxsh:20 -p:30 -bdrs:20">Box</div>
  <div class="l--box -bxsh:40 -p:30 -bdrs:20">Box</div>
</div>

<Flex className="set--bxsh" g="30" style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>
  <Box bxsh="20" p="30" bdrs="20">
    Box
  </Box>
  <Box bxsh="40" p="30" bdrs="20">
    Box
  </Box>
</Flex>

`set--s`

余白トークン（--s5〜--s70）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。

:root,
.set--s {
  /* 余白単位 ≒ 8px */
  --s-unit: 0.5rem;

  --s5: calc(var(--s-unit) * 0.5);
  --s10: var(--s-unit);
  --s15: calc(var(--s-unit) * 1.5);
  --s20: calc(var(--s-unit) * 2);
  --s25: calc(var(--s-unit) * 2.5);
  --s30: calc(var(--s-unit) * 3);
  --s35: calc(var(--s-unit) * 4);
  --s40: calc(var(--s-unit) * 5);
  --s45: calc(var(--s-unit) * 6.5);
  --s50: calc(var(--s-unit) * 8);
  --s60: calc(var(--s-unit) * 13);
  --s70: calc(var(--s-unit) * 21);
}

.set--s {
  --s-unit: 0.5em;
}

set--sを指定したスコープでは--s-unitが0.5emに切り替わり、--s10〜--s70がフォントサイズ基準で再計算されます。

<!-- ボタンの padding が button 自身の font-size に追従する -->
<button class="set--s -fz:s -py:10 -px:20">...</button>

<!-- --s-unit を任意の値で上書きすることも可能 -->
<button class="set--s -p:10" style="--s-unit: .4375em">...</button>

余白トークンのスケーリング規則はデザイントークン（SPACE）を参照してください。

デザイントークン

Lism CSS で定義されているカラー、余白、シャドウなどのデザイントークン一覧を紹介します。

`set--hov`

ホバー状態の判定変数（--_notHov, --_isHov）を次のようにセットします。主に子要素のホバースタイルを制御する時に活用します。

--_isHovは非hover時（かつ非focus-within時）にのみ、--_isHov: ; のように値が空の状態で定義されます。
--_notHovは逆に、hover時またはfocus-within時に同じく空の値で定義されます。

@media (any-hover: hover) {
  .set--hov:hover {
    --_notHov: ;
  }
  .set--hov:not(:is(:hover, :focus-within)) {
    --_isHov: ;
  }
}
@media (any-hover: none) {
  .set--hov {
    --_isHov: ;
  }
}
.set--hov:is(:focus-visible, :focus-within) {
  --_notHov: ;
}

この空の値を使った仕組みにより、次のような書き方ができます。

var(--_isHov, {ホバー時に適用させたい値})
var(--_notHov, {非ホバー時に適用させたい値})

例えば color: var(--_isHov, red) とした要素の場合、hover時に--_isHovが未定義となるため、color:redが適用されるようになります。

var(--_isHov, ...) var(--_notHov, ...)とするとホバー前後のスタイルを1行で書くこともできますが、box-shadowなどの半角スペースで区切って値を調整するプロパティではこの書き方は無効になります。

↓

例: -hov:test

.-hov\:test {
  color: var(--_isHov, green) var(--_notHov, red); /* hover時はgreen, 非hover時はred*/
  box-shadow: var(--_isHov, var(--bxsh--30)); /* hover時はshadowをつける（非hover時は無効な値） */
  opacity: var(--_notHov, var(--o--pp)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
}

↓

-hov:testのプレビュー

BOX

<div class="set--hov -hov:test -p:30 -bd -bdc:current ">BOX</div>

さらに、親要素にset--hovを付与してその子要素で--_isHov変数と--_notHov変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。

例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、-hov:in:zoomクラスが標準で用意されています。

.-hov\:in\:zoom {
  --transitionProps: scale;
  scale: var(--_isHov, 1.1);
}

↓

-hov:in:zoomの使用例

バナーリンク

<a href="###" class="l--frame set--hov is--boxLink -ar:21/9 -ov:hidden">
  <img class="has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/2SvHdIk1KOOR.webp" width="960" height="640" loading="lazy" />
  <div class="is--layer -bgc" style="--c: #fff; --bgc: rgb(0 0 0 / 50%)"></div>
  <div class="l--center is--layer -c" style="--c: #fff;">
    <span class="-fz:xl">バナーリンク</span>
  </div>
</a>

活用例は hoverの解説ページを参照してください。

-hov

hover時の挙動をコントロールする -hov Property Class の使い方について解説します。

`set--bleed`

片側だけ画面端まで広げるブリードレイアウトを組むための--bleed変数を生成するクラスです。コンテンツ幅（--contentSize）の外側の余白量がセットされます。ただし、ガター幅（--gutter / --gutter--base）を下限とし、これより狭くなる場合はガター幅を返します。

.set--bleed {
  --bleed: max(var(--gutter, var(--gutter--base)), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
}

↓

paddingにvar(--bleed)を活用する例

Lorem ipsum dolor sit amet. Consec tetur adipi scing elit, sed do eiusmod tempor Inc ididunt ut. Labore et dolore magna aliqua.

Lorem ipsum dolor sit amet. Consec tetur adipi scing elit, sed do eiusmod tempor Inc ididunt ut.

リサイズ

<div class="is--container">
  <div class="is--wrapper has--gutter -contentSize:s -py:30 -bgc:base-2">
    <p>Lorem ipsum dolor sit amet. Consec tetur adipi scing elit, sed do eiusmod tempor Inc ididunt ut. Labore et dolore magna aliqua.</p>
  </div>
  <div class="l--columns set--bleed -contentSize:s -cols_sm -g:0 -g_sm -ai:center" style="--cols:1;--cols_sm:2;--g_sm:var(--s10)">
    <div class="l--box has--gutter -ps -py:30 -py_sm" style="--ps:var(--bleed);--py_sm:0">
      <p>Lorem ipsum dolor sit amet. Consec tetur adipi scing elit, sed do eiusmod tempor Inc ididunt ut.</p>
    </div>
    <div class="l--frame -bdrs:inner -ar:3/2">
      <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" width="1920" height="1280" alt="">
    </div>
  </div>
</div>

<Container>
  <Wrapper contentSize="s" hasGutter py="30" bgc="base-2">
    <p>Lorem ipsum dolor sit amet. Consec tetur adipi scing elit, sed do eiusmod tempor Inc ididunt ut. Labore et dolore magna aliqua.</p>
  </Wrapper>
  <Columns set="bleed" contentSize="s" cols={[1, 2]} g={['0', '10']} ai="center">
    <Box hasGutter ps="var(--bleed)" py={["30", "0"]} >
      <p>Lorem ipsum dolor sit amet. Consec tetur adipi scing elit, sed do eiusmod tempor Inc ididunt ut.</p>
    </Box>
    <Frame bdrs="inner" ar="3/2">
      <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" width="1920" height="1280" alt="" />
    </Frame>
  </Columns>
</Container>

`set--bdrsInner`

親要素の角丸(--bdrs)とPadding(--p)の値から、その内側の角丸（--bdrs--inner）を自動計算するためのクラスです。親要素にset--bdrsInnerクラスを付け、子要素に-bdrs:innerを指定すると、計算された--bdrs--innerが子要素の角丸に適用されます。

（親要素ではbdrsとpの指定が必須となります。）

.set--bdrsInner {
  --bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px) + 1px);
}

↓

使用例

<div class="set--bdrsInner -p:15 -bdrs:40 -bd -bxsh:20">
  <div class="l--frame -bdrs:inner -ar:og">
    <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" width="1920" height="1280" alt="" />
  </div>
</div>

<Lism set="bdrsInner" p="15" bdrs="40" bd bxsh="20">
  <Frame bdrs="inner" ar="og">
    <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" width="1920" height="1280" alt="" />
  </Frame>
</Lism>

p, bdrsは変数で管理されているため、ブレイクポイントで値を変えてもset--bdrsInnerの角丸はそれに追従します。

↓

使用例

Example

リサイズ

<Lism p={[10, 15]} bd bdrs={['30', '40']} class="set--bdrsInner">
  <Lism bd p="20" bdrs="inner" bgc="base-2">
    Example
  </Lism>
</Lism>