/* ========================================================================== Carbon Design System トークン定義 IBM Carbon Design System 準拠 - アプリ本体の DESIGN.md と整合 ========================================================================== */ :root { /* -------------------------------------------------------------------- カラー: ベース（Gray スケール） -------------------------------------------------------------------- */ --cds-gray-100: #161616; --cds-gray-90: #262626; --cds-gray-80: #393939; --cds-gray-70: #525252; --cds-gray-60: #6f6f6f; --cds-gray-50: #8d8d8d; --cds-gray-30: #c6c6c6; --cds-gray-20: #e0e0e0; --cds-gray-10: #f4f4f4; --cds-white: #ffffff; /* -------------------------------------------------------------------- カラー: インタラクティブ（Blue） -------------------------------------------------------------------- */ --cds-blue-80: #002d9c; --cds-blue-70: #0043ce; --cds-blue-60: #0f62fe; /* 唯一のアクセントカラー */ --cds-blue-50: #4589ff; --cds-blue-40: #78a9ff; --cds-blue-10: #edf5ff; /* -------------------------------------------------------------------- カラー: サポート / ステータス -------------------------------------------------------------------- */ --cds-red-60: #da1e28; --cds-red-70: #b81921; --cds-green-50: #24a148; --cds-yellow-30: #f1c21b; /* -------------------------------------------------------------------- セマンティックトークン（背景・テキスト・ボーダー） -------------------------------------------------------------------- */ --cds-background: var(--cds-white); --cds-layer-01: var(--cds-gray-10); --cds-layer-02: var(--cds-gray-20); --cds-layer-01-hover: #e8e8e8; --cds-text-primary: var(--cds-gray-100); --cds-text-secondary: var(--cds-gray-70); --cds-text-placeholder: var(--cds-gray-60); --cds-text-on-color: var(--cds-white); --cds-text-helper: var(--cds-gray-60); --cds-border-subtle: var(--cds-gray-20); --cds-border-strong: var(--cds-gray-30); /* -------------------------------------------------------------------- インタラクティブ（ボタン / リンク / フォーカス） -------------------------------------------------------------------- */ --cds-button-primary: var(--cds-blue-60); --cds-button-primary-hover: #0353e9; --cds-button-primary-active: var(--cds-blue-80); --cds-button-secondary: var(--cds-gray-80); --cds-button-secondary-hover:#4c4c4c; --cds-button-tertiary: var(--cds-blue-60); --cds-button-tertiary-hover: var(--cds-blue-70); --cds-link-primary: var(--cds-blue-60); --cds-link-primary-hover: var(--cds-blue-70); --cds-focus: var(--cds-blue-60); --cds-focus-inset: var(--cds-white); --cds-field: var(--cds-gray-10); --cds-support-error: var(--cds-red-60); --cds-support-success: var(--cds-green-50); --cds-support-warning: var(--cds-yellow-30); --cds-support-info: var(--cds-blue-60); /* -------------------------------------------------------------------- 単元別カラー（情報Iマスターの 4 単元） アプリ側 UNIT_COLOR_MAP と対応 -------------------------------------------------------------------- */ --cds-unit-society: #0f62fe; /* Blue 60 - 情報社会 */ --cds-unit-design: #8a3ffc; /* Purple 60 - デザイン */ --cds-unit-design-text: #6929c4; /* Purple 70（AA 4.5:1 準拠の文字色） */ --cds-unit-programming: #007d79; /* Teal 60 - プログラミング */ --cds-unit-network: #ba4e00; /* Orange 70 - ネットワーク */ /* -------------------------------------------------------------------- タイポグラフィ -------------------------------------------------------------------- */ --cds-font-sans: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; --cds-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* フォントサイズ（Carbon type scale） */ --cds-font-size-display-01: 3.75rem; /* 60px */ --cds-font-size-display-02: 3.00rem; /* 48px */ --cds-font-size-heading-01: 2.625rem; /* 42px */ --cds-font-size-heading-02: 2.00rem; /* 32px */ --cds-font-size-heading-03: 1.50rem; /* 24px */ --cds-font-size-heading-04: 1.25rem; /* 20px */ --cds-font-size-body-01: 1.00rem; /* 16px */ --cds-font-size-body-02: 0.875rem; /* 14px */ --cds-font-size-caption-01: 0.75rem; /* 12px */ /* 行高 */ --cds-line-height-display: 1.17; --cds-line-height-heading: 1.25; --cds-line-height-body: 1.50; --cds-line-height-compact: 1.29; /* 文字間隔（微細トラッキング） */ --cds-letter-spacing-body-short: 0.16px; --cds-letter-spacing-caption: 0.32px; /* フォントウェイト */ --cds-font-weight-light: 300; --cds-font-weight-regular: 400; --cds-font-weight-semibold: 600; /* -------------------------------------------------------------------- スペーシング（8px グリッド） -------------------------------------------------------------------- */ --cds-spacing-01: 0.125rem; /* 2px */ --cds-spacing-02: 0.25rem; /* 4px */ --cds-spacing-03: 0.5rem; /* 8px */ --cds-spacing-04: 0.75rem; /* 12px */ --cds-spacing-05: 1rem; /* 16px */ --cds-spacing-06: 1.5rem; /* 24px */ --cds-spacing-07: 2rem; /* 32px */ --cds-spacing-08: 2.5rem; /* 40px */ --cds-spacing-09: 3rem; /* 48px */ --cds-spacing-10: 4rem; /* 64px */ --cds-spacing-11: 5rem; /* 80px */ --cds-spacing-12: 6rem; /* 96px */ --cds-spacing-13: 10rem; /* 160px */ /* -------------------------------------------------------------------- レイアウト / ブレークポイント / コンテナ -------------------------------------------------------------------- */ --cds-breakpoint-sm: 320px; --cds-breakpoint-md: 672px; --cds-breakpoint-lg: 1056px; --cds-breakpoint-xlg: 1312px; --cds-breakpoint-max: 1584px; --cds-container-max: 1312px; /* -------------------------------------------------------------------- エレベーション（Carbon はシャドウ控えめ） -------------------------------------------------------------------- */ --cds-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.3); --cds-shadow-overlay: 0 2px 6px rgba(0, 0, 0, 0.3); /* -------------------------------------------------------------------- アニメーション -------------------------------------------------------------------- */ --cds-duration-fast-01: 70ms; --cds-duration-fast-02: 110ms; --cds-duration-moderate-01: 150ms; --cds-duration-moderate-02: 240ms; --cds-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9); --cds-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9); --cds-easing-exit: cubic-bezier(0.2, 0, 1, 0.9); }