Utility Class( u--* )

ユーティリティクラスを紹介します。

スタイル・装飾をまとめてセットするようなクラスを分類しています。

`u--cbox`

--keycolor変数をベースに、--c, --bgc, --bdc を color-mix() で生成します。

color, background-color にそれぞれ生成された変数がセットされますが、--bdcは変数定義のみになるため、ボーダーを表示する時は-bdクラスとの併用が必要です。

@use '../mixin' as mixin;

/*
  Note: Property Class より優先度が下で定義すること
  Memo: bgcの mix は transparent ではなく --base と混ぜている → 背景メディアがあるときも可読性が落ちないように + chat のように同じ背景色の装飾が一部重なっていても大丈夫なように。
*/
#{mixin.maybe_double('.u--cbox')} {
  --mutedKeycolor: var(--keycolor);
  --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 25%));
  --bgc: color-mix(in srgb, var(--base), var(--mutedKeycolor) var(--cbox-bgPct, 4%));
  --bdc: color-mix(in srgb, var(--divider), var(--keycolor) var(--cbox-bdPct, 50%));
  --link-c: var(--keycolor); // --link を上書きすると、keycolorに --link が使えなくなる

  color: var(--c);
  background-color: var(--bgc);

  // 相対カラー構文をサポートしているブラウザでは、 shadowのカラーもキーカラーに寄せる
  @supports (color: oklch(from red l c h)) {
    --mutedKeycolor: oklch(from var(--keycolor) l calc(c * 0.75) h);
    // --shc: color-mix(in srgb, var(--shadow), oklch(from var(--keycolor) l c h / 0.25) var(--cbox-shPct, 50%));
  }
}

↓

例

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

リサイズ

<div class="u--cbox -p:20" style="--keycolor: var(--red)">
  <p>
    Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex
    eos <b>doloribus aut dolore</b> nisi provident.
  </p>
</div>
<div class="set--bxsh u--cbox -bd -bdrs:20 -bxsh:20 -p:20" style="--keycolor: var(--purple)">
  <p>
    Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex
    eos <b>doloribus aut dolore</b> nisi provident.
  </p>
</div>
<div class="u--cbox -bdc:keycolor -bd-s -p:20" style="--keycolor: var(--brand); --bdw: 4px">
  <p>
    Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex
    eos <b>doloribus aut dolore</b> nisi provident.
  </p>
</div>

<Lism util="cbox" keycolor="red" p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>
<Lism util="cbox" keycolor="purple" bd bdrs="20" bxsh="20" set="bxsh" p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>
<Lism util="cbox" keycolor="brand" bdc="keycolor" bd-s bdw="4px" p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>

↓

バッジで利用する例と、変数によるカスタマイズ例

BadgeBadgeBadge

リサイズ

<div class="l--cluster -g:10">
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--red)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--green)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--blue)">Badge</span>
</div>
<div class="l--cluster -g:10" style="--cbox-cPct: 76%; --cbox-bdPct: 20%">
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--red)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--green)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--blue)">Badge</span>
</div>

<Lism layout="cluster" g="10">
  <Lism as="span" util="cbox" keycolor="red" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="green" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="blue" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
</Lism>
<Lism layout="cluster" g="10" style={{'--cbox-cPct': '76%', '--cbox-bdPct': '20%'}}>
  <Lism as="span" util="cbox" keycolor="red" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="green" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="blue" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
</Lism>

↓

パレットカラー一覧

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

`u--trim` & `u--trimAll`

テキストのハーフレディング分の余白を調整するためのクラスです。

自身のmargin-blockを調整するだけのu--trimと、子要素のテキスト系要素の上下マージンを一括で調整するu--trimAllがあります。

↓

u--trim

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

リサイズ

<div class="l--box -bd" style="--bds: dashed">
  <p class="u--trim">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>

<Box bd bds="dashed">
  <Text util="trim">Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</Text>
</Box>

@use '../mixin' as mixin;

/*
  ハーフレディングをトリミングするユーティリティクラス。
  (1em - 1lh) / 2 = ハーフレディングの負値。--hl に依存しないため、hl / lh どちらのスコープでも正しくトリムされる。
 */
#{mixin.maybe_double('.u--trim')} {
  margin-block: calc((1em - 1lh) / 2);
}

// 子要素の一括トリミング
// :empty → img, hr, input, br などにもマッチ。かつ中身のない装飾 a--divider や a--spacer もこれだけで除外できる
#{mixin.maybe_double('.u--trimAll')} > :not(:empty, figure, picture, video, button, textarea, table) {
  margin-block: calc((1em - 1lh) / 2);
}

u--trimAllは、対象外の要素（:empty, figure, picture, video, button, textarea, table）を除いたすべての直下要素にマージン調整を適用します。:emptyにより、img・hr・brなどの空要素や、中身のない装飾用のdiv（a--divider / a--spacerなど）も対象外になります。追加で除外したい要素がある場合は、利用側で .u--trimAll > xxx { margin-block: 0 } のように個別打ち消しで対応してください。

↓

u--trimAll

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ

<div class="l--stack u--trimAll -bd -g:30 -p:30 -bdrs:10">
  <img class="-ar:og" src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" />
  <p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
  <p>
    ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます...。
  </p>
</div>

<Stack util="trimAll" bd g="30" p="30" bdrs="10">
  <Media ar="og" src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" inferSize />
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
  </p>
</Stack>

`u--srOnly`

要素を視覚的に隠すことができるクラスです。
スクリーンリーダー用のテキストなどに利用してください。

/* For screen reader text */

// .u--srOnly--focusable:not(:focus),
.u--srOnly:not(#_) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

`u--clipText`

テキストで背景をクリッピングするためのクラスです。

.u--clipText {
  // Memo: Property Class(s.-bg:`, `.-c:`) に負けないように important つけている
  background-clip: text !important;
  color: transparent !important;
}

↓

テキストで背景をクリッピング

TEXT

<Center>
  <Box util="clipText" bgr="no-repeat" bgi="linear-gradient(45deg, var(--blue), var(--pink))">
    <Text fz="5xl" fw="bold" hl="0" lts="l">
      TEXT
    </Text>
  </Box>
</Center>

<div class="l--center">
  <div class="l--box u--clipText -bgr:no-repeat" style="--bgi: linear-gradient(45deg, var(--blue), var(--pink))">
    <p class="-fz:5xl -fw:bold -hl:0 -lts:l">TEXT</p>
  </div>
</div>

Opt-in

ここからは、Lism CSS のコアCSSファイルには含まれていない、便利なユーティリティクラスの作成例をいくつか紹介します。

`u--inlineCenter`

絵文字やインラインアイコンをテキストの中央に合わせるクラスです。 vertical-align: middleだけでは位置がずれるため、translateで補正します。

↓

使用例

Lorem ipsum dolor sit amet.

Dog, and Cat.

🚀 Emoji.

Inline img icon.

import { AlertIcon } from '@lism-css/icons/react';

<p><Icon util="inlineCenter" icon={AlertIcon} c="red" fz="xl" /> Lorem ipsum dolor sit amet.</p>
<p><Icon util="inlineCenter" as={Dog} fz="l" />Dog, and <Icon util="inlineCenter" as={Cat} fz="l"/>Cat.</p>
<p><span class="u--inlineCenter -fz:xl">🚀</span> Emoji.</p>
<p><Icon fz="2xl" util="inlineCenter" src="https://emojix.s3.ap-northeast-1.amazonaws.com/g3/svg/1f916.svg" alt="image" /> Inline img icon.</p>

.u--inlineCenter {
  vertical-align: middle; /* 基準をmiddleにセット */
  translate: 0 calc(-1 * (0.35em - 0.5ex)); /* middleの計算式を元に追加で調整。（0.5cap - 0.5ex が英文では理想。）*/
}

`u--divide` / `u--enclose`

グリッド・フレックスボックスの子要素の間に区切り線を表示するu--divideと、各子要素を囲んでテーブルのセルのように見せるu--encloseです。

どちらもgapと子要素のbox-shadowで線を描くため、borderと比べると描画がやや粗く、フレックスボックスで子要素が折り返すと線の出方が崩れることがあります。そのためコアには含めていません。並び方向が切り替わるレイアウトの区切り線は、bdwをブレイクポイントで切り替える方法を優先してください。

使う場合は、コアのユーティリティクラスと同じ@layer lism-utilityに追加します。

@layerなし版（main_no_layer.css / full_no_layer.css）では、コアのユーティリティクラスが@layerの外にセレクタ二重化（.u--trim.u--trim）で出力されます。そのため下の追加CSSも、@layer lism-utility { ... }の囲みを外し、.u--divide / .u--encloseを.u--divide.u--divide / .u--enclose.u--encloseに置き換えてください。

borderではないため、bds（border-style）などの border 系プロパティは効きません。線幅は--bdw変数で指定します。
u--divideはoverflow: clipを指定しているため、子孫にツールチップやドロップダウンなど外側にはみ出す要素を配置すると意図せずクリップされます。

↓

u--divideとu--encloseの比較

divide

enclose

リサイズ

<div class="l--autoColumns u--divide -bdrs:20" style="--cols:16rem">
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
</div>
<div class="l--autoColumns u--enclose -bdrs:20" style="--cols:16rem">
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
</div>

<AutoColumns util="divide" cols="16rem" bdrs="20">
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
</AutoColumns>
<AutoColumns util="enclose" cols="16rem" bdrs="20">
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
</AutoColumns>

@layer lism-utility {
  .u--divide,
  .u--enclose {
    --bdw: 1px;
    --bdc: var(--divider);
    gap: var(--bdw); /* 線の太さぶんだけ隙間を空ける */
  }
  .u--divide > *,
  .u--enclose > * {
    box-shadow: 0 0 0 var(--bdw) var(--bdc); /* 隙間を子要素の影で埋めて線に見せる */
  }
  /* 間の区切りだけ残す（外周の影は切り落とす） */
  .u--divide {
    overflow: clip;
  }
  /* 各セルを囲む */
  .u--enclose {
    padding: var(--bdw);
  }
}

u--divideにbdを指定すると、カレンダーのように、要素のないマスが空白のまま罫線だけ残る表現ができます。

↓

bdを指定

Item

リサイズ

<div class="l--columns u--divide -cols_sm -bd -bdc:current -fz:s" style="--cols:4;--cols_sm:5">
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
</div>

<Columns util="divide" cols={["4", "5"]} bd bdc="current" fz="s">
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
</Columns>

Utility Class( u--* )

u--cbox

u--trim & u--trimAll

u--srOnly

u--clipText

Opt-in

u--inlineCenter

u--divide / u--enclose

`u--cbox`

`u--trim` & `u--trimAll`

`u--srOnly`

`u--clipText`

`u--inlineCenter`

`u--divide` / `u--enclose`