SCSSをトークン化してみた. 4

// ==================================================
// Foundation: color-map
// Token Type: Semantic（用途・意味） / Mixed: No
// Source: primitives-color（実値は primitives 側が唯一ソース）
// --------------------------------------------------
// Purpose: text / bg / border / overlay の用途別カラーを定義
// Keys: 'text.default', 'bg.default', 'border.default', 'overlay.dark' など
// Notes: scale（xs/sm/md...）は扱わない（意味 → 実値のマッピングのみ）
// ==================================================

@use '../primitives/primitives-color' as *;

$color-map: (

  // -------------------------
  // Text
  // -------------------------
  'text': (
    // ===== Light direction (通常背景用の暗いテキスト：濃 → 薄) =====
    'default':   $neutral-900,  // 通常テキスト（最も濃い）
    'sub': $gray-600,     // 補助テキスト
    'faint':  $gray-400,     // 控えめテキスト
    'disabled':  $gray-300,     // 無効状態
    
    // ===== Dark direction (暗い背景用の明るいテキスト：明 → 暗) =====
    'inverse':           $white,         // 通常テキスト（最も明るい）
    'inverse-sub': $neutral-200,   // 補助テキスト
    'inverse-faint':  $neutral-400,   // 控えめテキスト
    'inverse-disabled':  $neutral-600,   // 無効状態
    
    // ===== Interactive（インタラクティブ要素） =====
    'link':       $blue-400,   // リンク
    'link-hover': $blue-600,   // リンクホバー
    
    // ===== State系 =====
    'error':   $red-600,
    'success': $green-600,
    'warning': $yellow-600,
    
    // ===== Accent系 =====
    'accent-primary':          $red-900,
    'accent-primary-light':    $red-300,
    'accent-secondary':        $gold-300,
    'accent-secondary-light':  $gold-200,
  ),


  // -------------------------
  // Background
  // -------------------------
  'bg': (
    // ===== Light direction (白 → 濃く) =====
    'plain':    $white,         // 基準（最も軽い）
    'subtle':   $off-white,      // うっすらベージュ
    'default':  $neutral-100,   // 標準背景
    'emphasis': $neutral-200,   // 強調背景
    
    // ===== Dark direction (黒 → 薄く) =====
    'inverse':          $black,        // 基準（最も重い）
    'inverse-subtle':   $neutral-900,  // 黒よりほんの少し薄い
    'inverse-default':  $neutral-600,  // 標準の反転
    'inverse-emphasis': $neutral-400,  // 強調の反転（最も明るい）
    
    // ===== State系 =====
    'error':   $red-100,
    'success': $green-50,
    'warning': $yellow-50,
    
    // ===== Accent系 =====
    'accent-primary':          $red-900,
    'accent-primary-light':    $red-600,
    'accent-secondary':        $gold-300,
    'accent-secondary-light':  $gold-100,
  ),


  // -------------------------
  // Border
  // -------------------------
  'border': (
    // ===== Light direction (薄 → 濃) =====
    'faint':    $gray-100,      // 最も薄い（ほぼ見えない）
    'subtle':   $gray-200,      // かすかに見える
    'default':  $neutral-300,   // 標準
    'emphasis': $neutral-600,   // 強調
    'strong':   $neutral-900,   // 最も濃い
    
    // ===== Dark direction (inverse背景用の明るいボーダー) =====
    'inverse':          $white,         // 白いボーダー
    'inverse-subtle':   $neutral-200,   // 少し暗い
    'inverse-default':  $neutral-400,   // 標準
    'inverse-emphasis': $neutral-600,   // 強調
    
    // ===== State系 =====
    'error':   $red-600,
    'success': $green-400,
    'warning': $yellow-600,
    
    // ===== Accent系 =====
    'accent-primary':          $red-600,
    'accent-primary-light':    $red-300,
    'accent-secondary':        $gold-300,
    'accent-secondary-light':  $gold-200,
  ),


  // -------------------------
  // Overlay
  // -------------------------
  'overlay': (
    // ===== Dark overlays（黒ベース：暗くする） =====
    'dark':        rgba(0, 0, 0, 0.40),  // 標準
    'dark-strong': rgba(0, 0, 0, 0.70),  // 濃い
    'dark-heavy':  rgba(0, 0, 0, 0.90),  // 最も濃い
    
    // ===== Light overlays（白ベース：明るくする） =====
    'light':        rgba(255, 255, 255, 0.30),  // 標準
    'light-strong': rgba(255, 255, 255, 0.60),  // 濃い
    'light-heavy':  rgba(255, 255, 255, 0.90),  // 最も濃い
  ),
);

// ==================================================
// Foundation: gradient-map
// Token Type: Semantic（Preset） / Mixed: No
// Source: color-map（bg.inverse をベースに生成）
// --------------------------------------------------
// Purpose: overlay/vignette 等の用途別グラデーションを定義
// Keys: 'overlay-vignette-bottom', 'overlay-vignette-right' など
// Notes: scale（xs/sm...）は扱わない（用途プリセットのみ）
// ==================================================

@use 'sass:map';
@use './color-map' as cm;

$gradient-base: map.get(cm.$color-map, 'bg', 'inverse');

$gradient-map: (
  // 下に暗幕（タイトルを下に載せる系）
  'overlay-vignette-bottom': linear-gradient(
    to bottom,
    rgba($gradient-base, 0) 0%,
    rgba($gradient-base, 0.60) 100%
  ),

  // 右に抜ける暗幕（左側を読ませる系）
  'overlay-vignette-right': linear-gradient(
    to right,
    rgba($gradient-base, 0.30) 0%,
    rgba($gradient-base, 0.30) 70%,
    rgba($gradient-base, 0) 100%
  ),
);

// ==================================================
// Foundation: font-scale-map
// Token Type: Scale（段階） / Mixed: No
// Source: rem()（core/function）※用途は font-role-map 側で管理
// --------------------------------------------------
// Purpose: フォントの段階トークン（size / line-height / letter-spacing）を定義
// Keys: xs/sm/md/lg/xl/2xl...7xl（＋ breakpoint: sm/md/lg/xl）
// Notes: 役割（heading/body...）への割当は role-map が担当（このmapは値の定義のみ）
// ==================================================

@use '../core/function' as *;

$font-scale-map: (
  // xs：最小クラス（注釈・ラベルの下限近辺）
  'xs': (
    'sm': (size: rem(10), line-height: rem(16), letter-spacing: 0.02em),
    'md': (size: rem(11), line-height: rem(18), letter-spacing: 0.02em),
    'lg': (size: rem(12), line-height: rem(20), letter-spacing: 0.02em),
    'xl': (size: rem(12), line-height: rem(20), letter-spacing: 0.02em)
  ),

  // sm：小さめ（補助情報の基準）
  'sm': (
    'sm': (size: rem(12), line-height: rem(18), letter-spacing: 0.02em),
    'md': (size: rem(13), line-height: rem(20), letter-spacing: 0.02em),
    'lg': (size: rem(14), line-height: rem(22), letter-spacing: 0.02em),
    'xl': (size: rem(14), line-height: rem(22), letter-spacing: 0.02em)
  ),

  // md：中核スケール（全体の基準になりやすい）
  'md': (
    'sm': (size: rem(14), line-height: rem(22), letter-spacing: 0.02em),
    'md': (size: rem(16), line-height: rem(26), letter-spacing: 0.02em),
    'lg': (size: rem(18), line-height: rem(30), letter-spacing: 0.02em),
    'xl': (size: rem(18), line-height: rem(30), letter-spacing: 0.02em)
  ),

  // lg：強めスケール（mdより目立つ）
  'lg': (
    'sm': (size: rem(18), line-height: rem(28), letter-spacing: 0.02em),
    'md': (size: rem(20), line-height: rem(32), letter-spacing: 0.02em),
    'lg': (size: rem(24), line-height: rem(36), letter-spacing: 0.02em),
    'xl': (size: rem(24), line-height: rem(36), letter-spacing: 0.02em)
  ),

  // xl：見出し寄りスケール（lgより強い）
  'xl': (
    'sm': (size: rem(24), line-height: rem(36), letter-spacing: 0.03em),
    'md': (size: rem(28), line-height: rem(40), letter-spacing: 0.03em),
    'lg': (size: rem(32), line-height: rem(48), letter-spacing: 0.03em),
    'xl': (size: rem(32), line-height: rem(48), letter-spacing: 0.03em)
  ),

  // 2xl〜7xl：大見出し領域（大きいほど“短い文字向き”になりがち）
  '2xl': (
    'sm': (size: rem(28), line-height: rem(40), letter-spacing: 0.03em),
    'md': (size: rem(32), line-height: rem(48), letter-spacing: 0.03em),
    'lg': (size: rem(40), line-height: rem(56), letter-spacing: 0.03em),
    'xl': (size: rem(40), line-height: rem(56), letter-spacing: 0.03em)
  ),

  '3xl': (
    'sm': (size: rem(32), line-height: rem(44), letter-spacing: 0.03em),
    'md': (size: rem(40), line-height: rem(56), letter-spacing: 0.03em),
    'lg': (size: rem(48), line-height: rem(64), letter-spacing: 0.03em),
    'xl': (size: rem(48), line-height: rem(64), letter-spacing: 0.03em)
  ),

  '4xl': (
    'sm': (size: rem(40), line-height: rem(52), letter-spacing: 0.03em),
    'md': (size: rem(48), line-height: rem(64), letter-spacing: 0.03em),
    'lg': (size: rem(60), line-height: rem(76), letter-spacing: 0.03em),
    'xl': (size: rem(60), line-height: rem(76), letter-spacing: 0.03em)
  ),

  '5xl': (
    'sm': (size: rem(48), line-height: rem(60), letter-spacing: 0.02em),
    'md': (size: rem(60), line-height: rem(76), letter-spacing: 0.02em),
    'lg': (size: rem(72), line-height: rem(88), letter-spacing: 0.02em),
    'xl': (size: rem(72), line-height: rem(88), letter-spacing: 0.02em)
  ),

  '6xl': (
    'sm': (size: rem(60), line-height: rem(72),  letter-spacing: 0.02em),
    'md': (size: rem(72), line-height: rem(88),  letter-spacing: 0.02em),
    'lg': (size: rem(88), line-height: rem(104), letter-spacing: 0.02em),
    'xl': (size: rem(96), line-height: rem(112), letter-spacing: 0.02em)
  ),

  '7xl': (
    'sm': (size: rem(72), line-height: rem(84),  letter-spacing: 0.02em),
    'md': (size: rem(90), line-height: rem(104), letter-spacing: 0.02em),
    'lg': (size: rem(110), line-height: rem(128), letter-spacing: 0.02em),
    'xl': (size: rem(120), line-height: rem(140), letter-spacing: 0.02em)
  )
);

// ==================================================
// Foundation: font-role-map
// Token Type: Semantic（Role / Alias） / Mixed: No
// Source: font-size-scale-map（値は持たず scale キーのみ参照）
// --------------------------------------------------
// Purpose: 用途（heading/body/nav...）→ サイズ段階（xs/sm/md...）の割り当て
// Keys: 'heading', 'body', 'caption', 'note', 'label', 'badge', 'nav' など
// Notes: 実値（rem等）は scale 側に集約（role-map は参照のみ）
// ==================================================
$font-role-map: (

  // 見出し（ページ・セクション共通）
  'heading': 'xl',

  // 小見出し（見出しの補足）
  'subheading': 'lg',

  // 本文（基本テキスト）
  'body': 'md',

  // キャプション・補助説明
  'caption': 'sm',

  // 注釈・補足情報（最小）
  'note': 'xs',

  // フォーム・UIラベル
  'label': 'sm',

  // バッヂ（NEW / SALE など）
  'badge': 'xs',

  // グローバルナビ等のUIテキスト
  'nav': 'sm',
);

// ==================================================
// Foundation: font-weight-role-map
// Token Type: Semantic（Role / Alias） / Mixed: No
// Source: primitives-font-weight（値は持たず weight-token キーのみ参照）
// --------------------------------------------------
// Purpose: 用途（heading/body/nav...）→ 太さトークン（regular/semibold/bold）の割り当て
// Keys: 'heading', 'subheading', 'body', 'caption', 'note', 'label', 'badge', 'nav'
// Notes: bold は見出し中心に限定し、濫用を防ぐ（日本語の圧問題対策）
// ==================================================

$font-weight-role-map: (
  // 見出し（ページ・セクション共通）
  'heading': 'bold',

  // 小見出し（見出しの補足）
  // ※ここは medium に落とす案もあるが、まずは bold で「强调階層」を明確に
  'subheading': 'bold',

  // 本文（基本テキスト）
  'body': 'regular',

  // キャプション・補助説明
  'caption': 'regular',

  // 注釈・補足情報（最小）
  'note': 'regular',

  // フォーム・UIラベル（UIとして“見える”必要がある）
  'label': 'regular',

  // バッヂ（NEW / SALE など）…短い・強い・目立たせたい
  'badge': 'bold',

  // グローバルナビ等のUIテキスト（強すぎず弱すぎず）
  'nav': 'regular'
);

@use 'sass:map';
@use '../core/function' as *;
@use '../primitives/primitives-space' as ps;

// ==================================================
// Foundation: space-map（レスポンシブ対応）
// Token Type: Mixed（Scale + Semantic/Role） / Mixed: Yes
// Includes:
// - Scale : none/xs〜7xl（primitives-space に集約：$space-scale-map）
// - Role  : container/button/section...（用途別：このファイルで直書き）
// Source: primitives-space, rem()（core/function）
// --------------------------------------------------
// Purpose: spacing() mixin の参照元として「共通スケール + 用途別」を一括提供
// Keys:
// - Scale: 'md' / '2xl' など
// - Role : 'container-inline' / 'button-inline' など
// Notes:
// - 共通スケールは primitives 側を唯一ソースとする
// - 用途別は可読性優先で直書き（role→scale参照はしない）
// ==================================================

// --------------------------------------------------
// Role（用途別スペース：Layout / Component）
// --------------------------------------------------
$space-role-map: (

  // --------------------------------------
  // コンテンツコンテナ（左右余白）
  // --------------------------------------
  'container-inline': (
    'xs': rem(8),
    'sm': rem(16),
    'md': rem(24),
    'lg': rem(32),
    'xl': rem(40),
  ),

  // --------------------------------------
  // ワイドコンテンツコンテナ（左右余白）
  // --------------------------------------
  'container-inline-wide': (
    'xs': rem(16),
    'sm': rem(24),
    'md': rem(32),
    'lg': rem(48),
    'xl': rem(72),
  ),

  // --------------------------------------
  // グローバルナビ・上下余白
  // --------------------------------------
  'global-nav-block': (
    'xs': rem(8),
    'sm': rem(8),
    'md': rem(16),
    'lg': rem(16),
    'xl': rem(24),
  ),

  // --------------------------------------
  // グローバルナビ・左右余白
  // --------------------------------------
  'global-nav-inline': (
    'xs': rem(8),
    'sm': rem(8),
    'md': rem(16),
    'lg': rem(16),
    'xl': rem(24),
  ),

  // --------------------------------------
  // ボタンの高さを決める上下余白（block）
  // --------------------------------------
  'button-block': (
    'xs': rem(8),
    'sm': rem(8),
    'md': rem(16),
    'lg': rem(16),
    'xl': rem(24),
  ),

  // --------------------------------------
  // ボタンの横幅（左右 padding）
  // --------------------------------------
  'button-inline': (
    'xs': rem(16),
    'sm': rem(24),
    'md': rem(32),
    'lg': rem(40),
    'xl': rem(48),
  ),

  // --------------------------------------
  // ワイドセクション（上下 padding）
  // --------------------------------------
  'section-wide': (
    'xs': rem(24),
    'sm': rem(32),
    'md': rem(64),
    'lg': rem(96),
    'xl': rem(128),
  ),

  // --------------------------------------
  // フッターメニューリンクの行間
  // --------------------------------------
  'footer-menu-link': (
    'xs': rem(4),
    'sm': rem(4),
    'md': rem(8),
    'lg': rem(8),
    'xl': rem(8),
  ),
);

// --------------------------------------------------
// Export: scale + role を統合した最終マップ（既存I/F維持）
// --------------------------------------------------
$space-map: map.merge(ps.$space-scale-map, $space-role-map);

// ==================================================
// Foundation: radius-map
// Token Type: Scale（段階） / Mixed: No
// Source: rem()（core/function）
// --------------------------------------------------
// Purpose: 角丸の段階トークン（none/xs/sm/md/lg/full）を定義
// Keys: 'none', 'xs', 'sm', 'md', 'lg', 'full'
// Notes: 用途ごとの割当（button/card...）は各コンポーネント側で決める
// ==================================================

@use '../core/function' as *;

$radius-map: (
  // -------------------------
  // 角丸なし
  // -------------------------
  'none': 0,                    // 完全にフラット（テーブルや仕切りなど）

  // -------------------------
  // 小さめ（ミニ要素向け）
  // -------------------------
  'xs': rem(2),                 // バッジ・小さなピル・タグなど
  'sm': rem(4),                 // 小型ボタン・小カード

  // -------------------------
  // 標準（一般 UI）
  // -------------------------
  'md': rem(8),                 // 標準ボタン・カード・フォーム要素

  // -------------------------
  // 大きめ（柔らかい印象）
  // -------------------------
  'lg': rem(16),                // モーダル・大きめのカード・画像

  // -------------------------
  // 完全な円形
  // -------------------------
  'full': rem(9999),            // アバター・円アイコン・ピル型ボタン
);

@use '../primitives/primitives-shadow' as *;

// ==================================================
// Foundation: shadow-map
// Token Type: Mixed（Scale + Semantic） / Mixed: Yes
// Includes:
// - Scale    : 'sm'/'md'/'lg'（サイズ段階）
// - Semantic : 'faint'/'default'/'hover'/'modal'...（用途）
// Source: primitives-shadow（影素材）
// --------------------------------------------------
// Purpose: 影を「用途（semantic）× サイズ（scale）」で一括管理する
// Keys: shadow('default','md') のように参照する想定
// Notes: 実値（rgba等）は primitives-shadow 側に集約
// ==================================================

$shadow-map: (
  // ごく薄い影（境界づけ・非アクティブ向け）
  'faint': (
    'sm': 0 1px 4px $shadow-07,
    'md': 0 2px 6px $shadow-10,
    'lg': 0 3px 8px $shadow-12,
  ),

  // 基本影（カード・パネルの通常状態）
  'default': (
    'sm': 0 2px 4px $shadow-05,
    'md': 0 4px 10px $shadow-07,
    'lg': 0 6px 18px $shadow-09,
  ),

  // ホバー時の強調影
  'hover': (
    'sm': 0 2px 6px $shadow-10,
    'md': 0 4px 12px $shadow-13,
    'lg': 0 6px 20px $shadow-16,
  ),

  // モーダル・ドロップダウンなど上層要素
  // NOTE: sm は作らない方針（領域が大きいため）
  'modal': (
    'md': 0 6px 30px $shadow-18,
    'lg': 0 10px 40px $shadow-22,
  ),

  // しっかり黒い影（ダーク背景向け）
  'solid-black': (
    'sm': 0 2px 6px $shadow-60,
    'md': 0 4px 12px $shadow-60,
    'lg': 0 12px 28px $shadow-60,
  ),

  // 影なし（透明影で安全に無効化）
  'none': (
    'sm': 0 0 0 0 transparent,
    'md': 0 0 0 0 transparent,
    'lg': 0 0 0 0 transparent,
  ),
);

@use '../core/function' as *;
@use '../primitives/primitives-transition' as pt;

// ==================================================
// Foundation: transition-map
// Token Type: Mixed（Scale + Semantic/Preset） / Mixed: Yes
// Includes:
// - Scale : duration / easing（primitives-transition 参照）
// - Preset: 要素タイプ別 preset（default/hover/active 等）
// Source: primitives-transition, rem()（core/function）
// --------------------------------------------------
// Purpose: 要素タイプごとに「動き」を preset 化して一括管理する
// Keys: transition-preset('button') / transition-state('button','hover') 等を想定
// Notes: 色は color-map + color() で別管理（組み合わせ爆発を回避）
// ==================================================

$transition-map: (
  // --------------------------------------
  // 基本パラメータ（Scale）
  // --------------------------------------
  'duration': pt.$transition-duration-map,
  'easing': pt.$transition-easing-map,

  // --------------------------------------
  // 要素タイプ別プリセット（Preset）
  // --------------------------------------
  'preset': (
    'button': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (background-color, color, transform, box-shadow),
      'transform': (
        'default': scale(1),
        'hover': scale(1.02),
        'active': scale(0.98),
      ),
    ),

    'card': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (transform, box-shadow),
      'transform': (
        'default': translateY(0),
        'hover': translateY(rem(-2)),
      ),
    ),

    'link': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (color, background-color),
    ),

    'nav-link': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (color, background-color, transform),
      'transform': (
        'default': translateY(0),
        'hover': translateY(rem(-1)),
        'active': translateY(rem(1)),
      ),
    ),

    'icon': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (transform),
      'transform': (
        'default': scale(1),
        'hover': scale(1.08),
        'active': scale(0.95),
      ),
    ),

    'image': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (transform),
      'transform': (
        'default': scale(1),
        'hover': scale(1.02),
      ),
    ),

    'overlay': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (opacity, visibility),
      'opacity': (
        'default': 0,
        'active': 1,
      ),
    ),

    'modal': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (opacity, transform),
      'opacity': (
        'default': 0,
        'active': 1,
      ),
      'transform': (
        'default': translateY(rem(20)),
        'active': translateY(0),
      ),
    ),

    'drawer': (
      'duration': 'normal',
      'easing': 'out',
      'properties': (transform, visibility),
      'transform': (
        'default': translateX(-100%),
        'active': translateX(0),
      ),
    ),

    'accordion': (
      'duration': 'normal',
      'easing': 'in-out',
      'properties': (max-height, padding, gap),
    ),

    'form-input': (
      'duration': 'fast',
      'easing': 'out',
      'properties': (border-color, box-shadow),
    ),
  ),
);

// ==================================================
// Foundation: z-map
// Token Type: Semantic（用途・意味） / Mixed: No
// Source: none（z-index の実値をここで一元管理）
// --------------------------------------------------
// Purpose: レイヤー衝突を防ぐため、用途別に z-index を統一管理する
// Keys: 'header', 'drawer', 'modal', 'tooltip' など
// Notes: scale（xs/sm...）は扱わない（用途キー → 数値の直マップ）
// ==================================================

$z-map: (
  // -------------------------
  // 基本レイヤー（低〜中）
  // -------------------------
  'under': 0,     // 意図的に背面へ（背景装飾）
  'base': 1,      // 通常のコンテンツ

  // -------------------------
  // 固定 UI（弱 → 強）
  // -------------------------
  'fixed-menu': 40,   // 固定メニュー（簡易 UI）
  'overlay': 50,      // 軽いオーバーレイ背景（画像ビューア等）
  'sticky': 300,      // sticky 要素（小さめヘッダー・表示制御 UI）
  'drawer': 400,      // ドロワー本体（メニューなど）

  // -------------------------
  // ヘッダー / 固定ナビゲーション
  // -------------------------
  'header': 700,       // ヘッダー全般
  'fixed-pager': 800,  // 左右ページナビ等

  // -------------------------
  // モーダル（背景 → 本体）
  // -------------------------
  'modal-bg': 900,     // モーダル背景オーバーレイ
  'modal': 1000,       // モーダル本体

  // -------------------------
  // 操作 UI（最前面）
  // -------------------------
  'drawer-menu': 1100,       // ドロワー内メニュー
  'drawer-menu-btn': 1200,   // ハンバーガーメニューボタン
  'tooltip': 1300            // ツールチップ / 最前面
);

// ==================================================
// Foundation: elevation-map
// Token Type: Semantic（Preset） / Mixed: No
// Source: rem()（core/function）※将来 shadow-map 参照に移行可
// --------------------------------------------------
// Purpose: hover 等で影が変化する “from/to” を用途プリセットとして定義
// Keys: 'none', 'card', 'float'（必要に応じて popover 等を追加）
// Notes: scale（xs/sm/md...）は扱わない（用途プリセットのみ）
// ==================================================
@use '../core/function' as *;

$elevation-map: (
  'none': (
    'from': null,
    'to': null,
  ),

  'card': (
    'from': 0 rem(6) rem(16) rgba(0, 0, 0, 0.10),
    'to': 0 rem(10) rem(28) rgba(0, 0, 0, 0.16),
  ),

  'float': (
    'from': 0 rem(8) rem(20) rgba(0, 0, 0, 0.12),
    'to': 0 rem(14) rem(34) rgba(0, 0, 0, 0.18),
  ),
);