Rebase Style

Base階層の最後で定義されている、スタイルをリセット・再定義するためのユーティリティクラスを紹介します。

`re--style`

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

:where(.re--style) {
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
}

↓

re--styleを併用する

<div class='l--flex -g:30 -ff:mono'>
  <button>button</button>
  <button class='re--style'>button.re--style</button>
</div>

`re--list`

リストをブラウザ標準スタイルに戻すためのクラスです。
(class属性のないul,olに対して適用しているスタイルと同じものを適用します。)

.re--list {
  --list-pis: 1.5em;
  list-style: revert;
}

↓

Preview

List item 1
List item 2
- Nested item
- …
  - Nested item
  - …
List item 3
1. Nested item
2. …

<ul class='re--list'>
  <li>List item 1</li>
  <li>
    List item 2
    <ul>
      <li>Nested item</li>
      <li>...</li>
    </ul>
  </li>
  <li>
    List item 3
    <ol>
      <li>Nested item</li>
      <li>...</li>
    </ol>
  </li>
</ul>

↓

Ordered List

List item 1
List item 2
1. Nested item
2. …
  1. Nested item
  2. …
List item 3
- Nested item
- …

<ol class='re--list'>
  <li>List item 1</li>
  <li>
    List item 2
    <ol>
      <li>Nested item</li>
      <li>...</li>
    </ol>
  </li>
  <li>
    List item 3
    <ul>
      <li>Nested item</li>
      <li>...</li>
    </ul>
  </li>
</ol>

`re--sh`

.re--sh クラスを指定した要素では、シャドウを構成する各CSS変数が再定義されます。

ここで変数を上書きすることで、シャドウの色味などを調整することが可能です。

↓

シャドウの上書き例

Default:

Box

re—sh して変数を上書きした例:

Box

<div class="re--sh l--flex -g:40" style="--sh-hsl:200 50% 50%;--sh-a:20%">
  <div class="l--box -bxsh:1 -p:40 -bdrs:3">Box</div>
  <div class="l--box -bxsh:4 -p:40 -bdrs:3">Box</div>
</div>