@liha-css/foundation

@liha-css/foundation は Void Reset 後の“最低限の足場” を配布します。 タイポグラフィ（h1/h2…）や見た目のルールは提供せず、「読める・操作できる」だけを保証します。

• @liha-css/reset で 全破壊された世界に
• @liha-css/tokens の値（色/フォント/フォーカス）を使って
• 最低限のアプリ基盤を敷き直す

Install

pnpm add @liha-css/foundation
# or npm i @liha-css/foundation
# or yarn add @liha-css/foundation

Usage

@layer liha.foundation で定義されます。 基本は tokens → reset → foundation → app の順で読み込むのを推奨します。

import '@liha-css/foundation'

What it does

• Safari/iOS の事故（勝手な文字拡大）を抑制
• tab-size を固定してコード表示を安定化
• tokens の semantic を参照して body の基本（font / text / bg / line-height） を復帰
• リンクが「リンク」と分かる最低限の色を付与
• :focus-visible を tokens の --liha-color-focus-ring で統一
• code/pre の等幅フォントと pre のスクロールを最低限保証
• （任意）accent-color / color-scheme でネイティブUIの方向性を揃える

Important notes (Read this)

• 見た目を揃えるのが目的ではありません
  • 見出しサイズ、余白、ボタンの装飾などは 一切 提供しません（それをやるなら Tailwind 的にクラスを用意する方針）。
• tokens への依存があります
  • --liha-color-* / --liha-font-* を参照するため、基本は @liha-css/tokens と併用してください。
• accent-color は任意です
  • checkbox/radio などネイティブUIを tokens に寄せたいときだけ有効です（完全自作するなら不要）。

CSS

@layer liha.foundation {
  html {
    /* iOS/Safariの事故防止 */
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;

    /* 任意: ネイティブUIの色を tokens に寄せる（checkbox等） */
    accent-color: var(--liha-color-primary-main);

    /* 任意: UAにテーマの意図を伝える（今はlight固定でOK） */
    color-scheme: light;
  }

  body {
    font-family: var(--liha-font-body);
    color: var(--liha-color-text-main);
    background-color: var(--liha-color-bg-default);
    line-height: 1.5;
  }

  /* リンクは tokens の semantic を参照（“リンクがリンク” になる最低限） */
  a {
    color: var(--liha-color-link);
    text-decoration: inherit;
  }
  a:hover {
    color: var(--liha-color-link-hover);
  }

  /* focus は tokens の focus-ring を使う（操作性の統一） */
  :where(:focus-visible) {
    outline: 2px solid var(--liha-color-focus-ring);
    outline-offset: 2px;
  }

  /* Voidでも最低限の可読性（コード/等幅） */
  code,
  pre {
    font-family: var(--liha-font-code);
  }

  pre {
    overflow: auto;
  }
}

Recommended pairings

• @liha-css/tokens
  • 色 / フォント / focus-ring など、foundation が参照する値を提供します。
• @liha-css/reset
  • foundation は “全破壊後の足場” なので、reset とセットでの利用が前提です。

Browser support

• Modern browsers only
• CSS Cascade Layers（@layer）に依存します
• Safari/iOS 向けの最小パッチ（-webkit-text-size-adjust）を含みます