SCSSをトークン化してみた. 6〜実際の利用

// テキスト
@include color('text', 'accent-primary');

// 背景
@include color('bg', 'default');

// 透過
@include color('overlay', 'dark');

// すべての辺に 1px・default 色の実線
@include border(); 
 → border: 1px solid #ddd;

// 上だけに 1px・default 色の実線
@include border('top', 'default');
→ border-top: 1px solid #ddd;

// 上だけに 2px・subtle 色の実線
@include border('bottom', 'subtle', '2px');

// 左だけに 4px・accent 色の破線
@include border('left', 'accent', '4px', 'dashed');

// 下に暗幕（タイトルを下に載せる系）
@include gradient('overlay-vignette-bottom');

// 右に抜ける暗幕（左側を読ませる系）
@include gradient('overlay-vignette-right');

// 大見出し
@include typography('heading');

// 中見出し
@include typography('subheading');

// 小見出し
@include typography('microheading');

// バッヂ
@include typography('badge');

// 小さめ（ミニ要素向け）
@include radius('xs');
@include radius('sm');

// 標準（一般 UI）
@include radius('md');

// 大きめ（柔らかい印象）
@include radius('lg');

// 完全な円形
@include radius('full');

// ごく薄い影（境界づけ・非アクティブ向け）
@include shadow('faint');

// 基本影（カード・パネルの通常状態）
@include shadow('default');

// ホバー時の強調影
@include shadow('hover');

// モーダル・ドロップダウンなど上層要素
@include shadow('modal');

// しっかり黒い影（ダーク背景向け）
@include shadow('solid-black');

// 影なし（透明影で安全に無効化）
@include shadow('none');

// 通常の状態
@include transition-preset('button');

// 変化時（hover）
@include transition-state('button', 'hover');

// 変化時（active）
@include transition-state('button', 'active');

// 上にsm分空けて配置
@include pos('top', 'sm');

// 下にlg分空けて配置
@include pos('bottom', 'lg');

// 4辺0
@include pos('inset', 'none');

// 意図的に背面へ（背景装飾）
@include z('under');

// 通常のコンテンツ
@include z('base');

// 固定メニュー（簡易 UI）
@include z('fixed-menu');

// 軽いオーバーレイ背景（画像ビューア等）
@include z('overlay');

// sticky 要素（小さめヘッダー・表示制御 UI）
@include z('sticky');

// ドロワー本体（メニューなど）
@include z('drawer');

// ヘッダー全般
@include z('header');

// 左右ページナビ等
@include z('fixed-pager');

// モーダル背景オーバーレイ
@include z('modal-bg');

// モーダル本体
@include z('modal');

// ドロワー内メニュー
@include z('drawer-menu');

// ハンバーガーメニューボタン
@include z('drawer-menu-btn');

// ツールチップ / 最前面
@include z('tooltip');