Set Class

Utility classes defined in the @lism-base layer are provided in the format set--{className}. They are used for HTML element base styling or for setting variables.

The set— classes fall into two categories:

The {name} in set--var:{name} corresponds to the name of the CSS variable each class sets up (e.g. --bxsh--* → var:bxsh, --_isHov / --_notHov → var:hov, --bdrs--inner → var:bdrsInner).

set--plain

A class for resetting primary styles.

// ボタンやリンク、モーダルスタイルをリセットするためのユーティリティクラス
// 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: calc(1em + var(--hl) * 2); /* 全称セレクタ と同じ値 */
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  text-decoration: none;
  border-radius: 0;
}

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

set--revert

A class for explicitly reverting to the browser’s default appearance. On its own it carries no styles (it does not revert every property wholesale).

It works only when combined with specific HTML elements, and currently targets only ul / ol.

In Lism CSS, list styles are reset on ul / ol elements that have any class. Apply set--revert when a list has classes but you still want to keep the list markers (for example, a list that only carries Property Classes).

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

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

set--var:bxsh

Elements with the .set--var:bxsh class have the --bxsh-- variables that compose the shadow redefined.

/* --------------------------------------------------
  shadow
    Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
    要素ごとに --shc を上書きできるよう、再セット用の set--var:bxsh クラスを併用する。
-------------------------------------------------- */
:root {
  --shc: hsl(220 4% 8% / 15%);

  --shsz--10: 0px 1px 3px;
  --shsz--20: 0px 2px 6px;
  --shsz--30: 0px 4px 12px;
  --shsz--40: 0px 8px 24px;
  --shsz--50: 0px 16px 48px;
}

:root,
.set--var\:bxsh {
  --bxsh--10: var(--shsz--10) var(--shc);
  --bxsh--20: var(--shsz--20) var(--shc);
  --bxsh--30: var(--shsz--30) var(--shc);
  --bxsh--40: var(--shsz--40) var(--shc);
  --bxsh--50: var(--shsz--50) var(--shc);
}

By overriding the --shc variable here, you can adjust the color tint of the shadow.

<div class="l--flex set--var: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--var: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--var:hov

Sets the hover state variables (--_notHov, `—_isHov“) as follows. Primarily used to control hover styles on child elements.

• --_isHov is defined as an empty value only when not hovered (and not focus-within).
• Conversely, --_notHov is defined as an empty value when hovered or focus-within.

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

This empty variable trick enables the following patterns:

• var(--_isHov, {value to apply on hover})
• var(--_notHov, {value to apply when not hovered})

For example, with color: var(--_isHov, red), when hovered --_isHov becomes undefined, so color: red is applied.

.-hov\:test {
  color: var(--_isHov, green) var(--_notHov, red); /* green on hover, red when not hovered */
  box-shadow: var(--_isHov, var(--bxsh--30)); /* shadow on hover (invalid value when not hovered) */
  opacity: var(--_notHov, var(--o--pp)); /* reduced opacity when not hovered (invalid value on hover) */
}

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

By applying set--var:hov to a parent element and using the --_isHov and --_notHov variables on child elements, you can trigger style changes on children based on the parent’s hover state.

For example, this is useful for zooming an image inside a card when the parent box is hovered. The -hov:in:zoom class is provided out of the box for this purpose.

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

↓

Usage example of -hov:in:zoom

Banner Link

<a href="###" class="l--frame set--var:hov is--boxLink -ar:21/9 -ov:hidden">
  <img class="has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" 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">Banner Link</span>
  </div>
</a>

See the hover documentation page for usage examples.

set--var:bdrsInner

A class that automatically calculates the inner border radius (--bdrs--inner) from the parent element’s border radius (--bdrs) and padding (--p). Apply set--var:bdrsInner to the parent element, then use -bdrs:inner on the child element to apply the calculated --bdrs--inner.

(Both bdrs and p must be specified on the parent element.)

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

↓

Usage example

HTML JSX

<div class="set--var:bdrsInner -p:15 -bdrs:40 -bd -bxsh:20">
  <div class="l--frame -bdrs:inner -ar:og">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" width="1920" height="1280" alt="" />
  </div>
</div>

<Lism set="var:bdrsInner" p="15" bdrs="40" bd bxsh="20">
  <Frame bdrs="inner" ar="og">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" width="1920" height="1280" alt="" />
  </Frame>
</Lism>

Since p and bdrs are managed as variables even when their values change at breakpoints, set--var:bdrsInner also supports responsive border radius.

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