/* ============================================================ GrowthSurvey デザイントークン（公開ページ） ------------------------------------------------------------ 学習基盤 /lxp/ の test-env/css/tokens.css と同じ値を持つ。 値を動かすときは必ず両方を直すこと。片方だけ動かすと二つの面がずれる。 このファイルは「値」だけを持つ。部品の見た目は css/neumorphism.css にある。 分けてあるのは、top.html が Tailwind で組まれていて部品の定義を要らないため。 トークンだけ読めば、Tailwind のページも同じ色・同じ段階になる。 ============================================================ */ /* ============================================================ 1. デザイントークン（学習基盤 /lxp/ と同一の値） ============================================================ */ :root { color-scheme: light; /* 地と面 ------------------------------------------------- */ --gs-ground: #ffffff; --gs-surface-1: #f8f7fa; --gs-surface-2: #f0eef4; --gs-surface-3: #e6e2ec; /* 罫線 ---------------------------------------------------- */ --gs-rule: #dad5e2; /* 装飾・区切り（情報を担わない） */ --gs-rule-strong: #9e8eb4; /* 操作部品の境界。対白 3.01:1 */ /* テキスト ------------------------------------------------ */ --gs-text: #3e2f56; /* 対白 12.03:1 */ --gs-text-2: #63507e; /* 対白 7.05:1 */ --gs-text-3: #7f6d9a; /* 対白 4.61:1 ここが最も薄い可読色 */ /* 基調色（文字として使える濃度） ---------------------------- */ --gs-primary: #8a5ecc; /* 対白 4.61:1 */ --gs-primary-strong: #6e38c0; /* 対白 7.02:1 */ --gs-primary-tint: #f2ecfb; --gs-secondary: #df2261; /* 対白 4.63:1 */ --gs-secondary-tint: #fdecf2; /* 意味色（文字として使える濃度） ---------------------------- */ --gs-success: #168651; /* 対白 4.60:1 */ --gs-success-tint: #e8f6ee; --gs-warning: #a96504; /* 対白 4.62:1 */ --gs-warning-tint: #fbf1e2; --gs-danger: #d83934; /* 対白 4.61:1 */ --gs-danger-tint: #fdecec; --gs-info: #586dd5; /* 対白 4.60:1 */ --gs-info-tint: #eceffb; /* 白文字を載せる塗り --------------------------------------- */ --gs-fill-primary: #8b5cd0; --gs-fill-secondary: #dc2a65; --gs-fill-success: #138651; --gs-fill-warning: #a96504; --gs-fill-danger: #da3630; --gs-fill-info: #576cd8; --gs-on-fill: #ffffff; /* 三欲求の識別色（色だけに依存させない。必ず形とラベルを併記） */ --gs-need-competence: #6e38c0; --gs-need-autonomy: #168651; --gs-need-relatedness: #df2261; /* 系列の色（図表のカテゴリ）------------------------------ 色相を 40 度ずつ回した 9 色。対白の比を 7.0 と 4.6 で交互にしてあるので、 色相だけでなく明るさでも見分けられる（色が見分けにくい方にも届く）。 いちばん近い二色でも ΔE 28.7 離れている。全て白地で 4.5:1 以上なので、 図の中の文字にもそのまま使える。**色だけで意味を伝えない。必ず名前を添える。** */ --gs-series-1: #6500fc; --gs-series-2: #d200c4; --gs-series-3: #b40030; --gs-series-4: #c74f00; --gs-series-5: #575d00; --gs-series-6: #248800; --gs-series-7: #006729; --gs-series-8: #00828b; --gs-series-9: #0040f0; /* 覆い（モーダル・引き出しの下に敷く暗幕）-------------------- 文字色と同じ色を半分の濃さで敷く。純黒だと後ろの色が濁る。 */ --gs-scrim: rgba(62, 47, 86, .5); /* 影は重なり物だけ。面の分離には使わない -------------------- */ --gs-shadow-overlay: 0 12px 32px rgba(62, 47, 86, .18), 0 2px 6px rgba(62, 47, 86, .10); /* 画面の下に貼りつく帯は、上へ影を落とす（下向きの影だと本文に落ちない） */ --gs-shadow-overlay-up: 0 -10px 30px rgba(62, 47, 86, .12); /* 脈打つ輪。注意を引く一箇所だけに使う */ --gs-ring-primary: rgba(139, 92, 208, .40); --gs-ring-primary-0: rgba(139, 92, 208, 0); --gs-ring-danger: rgba(218, 54, 48, .30); --gs-ring-danger-0: rgba(218, 54, 48, 0); /* 形 ------------------------------------------------------- */ --gs-r-sm: 4px; --gs-r-md: 8px; --gs-r-lg: 12px; --gs-r-pill: 999px; /* 余白（4の倍数） ------------------------------------------ */ --gs-s1: 4px; --gs-s2: 8px; --gs-s3: 12px; --gs-s4: 16px; --gs-s5: 24px; --gs-s6: 32px; --gs-s7: 48px; --gs-s8: 64px; /* 操作領域の最小寸法（WCAG 2.5.5 / 2.5.8） ------------------ */ --gs-tap-min: 44px; /* 書体: ゴシック体で統一。メイリオを優先に含める ------------- */ --gs-font: "Noto Sans JP", "Meiryo", "メイリオ", "Hiragino Sans", "Yu Gothic", "游ゴシック", system-ui, sans-serif; --gs-font-num: "Archivo", "Helvetica Neue", Arial, sans-serif; /* 文字の段階。比は約 1.26。4xl と 5xl は公開ページの見出し用に 同じ比で上へ伸ばしたもの（学習基盤の tokens.css にも同じ値がある）。 別の尺度を持たせず、一本の段階を上下に使い分ける。 */ --gs-fs-xs: 12px; --gs-fs-sm: 13px; --gs-fs-md: 15px; --gs-fs-lg: 17px; --gs-fs-xl: 21px; --gs-fs-2xl: 27px; --gs-fs-3xl: 34px; --gs-fs-4xl: 43px; --gs-fs-5xl: 54px; --gs-lh: 1.85; /* 動き。役割ごとに時間とイージングを決める（公開ページと学習基盤で同一） */ --gs-dur-tap: 90ms; /* 押した瞬間の反応。ここが遅いと「効いていない」と感じる */ --gs-dur-state: 160ms; /* ホバー・フォーカス・選択の状態変化 */ --gs-dur-enter: 240ms; /* 要素の出現 */ --gs-dur-exit: 150ms; /* 消失。出現より速くする */ --gs-dur-meter: 620ms; /* 数値の充填。読む時間が要るので長め */ --gs-dur-sheen: 720ms; /* 走る光が横切りきるまで */ --gs-dur-orbit: 4s; /* 周回する光の一周 */ --gs-dur-ambient: 9s; /* 止まらない動き。速いと読む邪魔になる */ --gs-stagger: 70ms; /* 連続する要素の時間差 */ --gs-ease-out: cubic-bezier(.2, .75, .3, 1); /* 出現・移動の既定 */ --gs-ease-in: cubic-bezier(.5, 0, .9, .4); /* 消失 */ --gs-ease-standard: cubic-bezier(.35, .6, .25, 1); /* 双方向の状態変化 */ --gs-ease-commit: cubic-bezier(.28, 1.2, .5, 1); /* 確定の手応え。わずかに行き過ぎて戻る */ /* 動きの量と、状態のための光 ------------------------------ 影とグラデーションは構造には使わない。ここにあるのは全て状態の材料。 色は一つも直書きしていない。透明度は color-mix でトークンから作る。 */ --gs-press-scale: .985; /* 押したときの縮み。触れている実感を出す最小限 */ --gs-lift: -3px; /* 面が浮く量 */ --gs-lift-sm: -1px; /* 操作部品が浮く量。面より控えめにする */ --gs-glow-soft: 0 6px 20px color-mix(in srgb, var(--gs-primary) 18%, transparent); --gs-glow-firm: 0 8px 26px color-mix(in srgb, var(--gs-primary) 28%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --gs-ground: #16131b; --gs-surface-1: #1d1926; --gs-surface-2: #241f31; --gs-surface-3: #2d2740; --gs-rule: #332c44; --gs-rule-strong: #6b5f80; --gs-text: #d4cfdb; --gs-text-2: #a59cb4; --gs-text-3: #877a99; --gs-primary: #9568d9; --gs-primary-strong: #ad8ae4; --gs-primary-tint: #241a38; --gs-secondary: #de4779; --gs-secondary-tint: #331623; --gs-success: #2a9061; --gs-success-tint: #12281d; --gs-warning: #b17219; --gs-warning-tint: #2c2212; --gs-danger: #df4c47; --gs-danger-tint: #2f1717; --gs-info: #6579d9; --gs-info-tint: #1a1f38; --gs-need-competence: #ad8ae4; --gs-need-autonomy: #2a9061; --gs-need-relatedness: #de4779; --gs-series-1: #b787ff; --gs-series-2: #e400d5; --gs-series-3: #ff6e94; --gs-series-4: #d85600; --gs-series-5: #9ca800; --gs-series-6: #279300; --gs-series-7: #00b94a; --gs-series-8: #008d98; --gs-series-9: #789cff; --gs-series-1: #b787ff; --gs-series-2: #e400d5; --gs-series-3: #ff6e94; --gs-series-4: #d85600; --gs-series-5: #9ca800; --gs-series-6: #279300; --gs-series-7: #00b94a; --gs-series-8: #008d98; --gs-series-9: #789cff; --gs-shadow-overlay: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --gs-scrim: rgba(0, 0, 0, .62); --gs-shadow-overlay-up: 0 -10px 30px rgba(0,0,0,.5); } } :root[data-theme="dark"] { color-scheme: dark; --gs-ground: #16131b; --gs-surface-1: #1d1926; --gs-surface-2: #241f31; --gs-surface-3: #2d2740; --gs-rule: #332c44; --gs-rule-strong: #6b5f80; --gs-text: #d4cfdb; --gs-text-2: #a59cb4; --gs-text-3: #877a99; --gs-primary: #9568d9; --gs-primary-strong: #ad8ae4; --gs-primary-tint: #241a38; --gs-secondary: #de4779; --gs-secondary-tint: #331623; --gs-success: #2a9061; --gs-success-tint: #12281d; --gs-warning: #b17219; --gs-warning-tint: #2c2212; --gs-danger: #df4c47; --gs-danger-tint: #2f1717; --gs-info: #6579d9; --gs-info-tint: #1a1f38; --gs-need-competence: #ad8ae4; --gs-need-autonomy: #2a9061; --gs-need-relatedness: #de4779; --gs-shadow-overlay: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --gs-scrim: rgba(0, 0, 0, .62); --gs-shadow-overlay-up: 0 -10px 30px rgba(0,0,0,.5); } /* ============================================================ 2. 旧トークンの受け皿 ------------------------------------------------------------ 25 ページの style ブロックが --neo-* / --space-* / --radius-* を 直接参照している。名前は残したまま、指す先だけを GS トークンへ移す。 これで、ページ側を一行も触らずに見た目が体系へ揃う。 新しく書くところでは --gs-* を使うこと。ここは移行のための層である。 ============================================================ */ :root { /* 地と面 */ --neo-bg: var(--gs-ground); --neo-bg-dark: var(--gs-surface-2); /* 影は使わない。面の分離は罫線でおこなう。 ページ側に box-shadow: var(--neo-shadow) が残っていても、 ここが none なので影は出ない。 */ --neo-shadow: none; --neo-shadow-sm: none; --neo-shadow-lg: none; --neo-shadow-inset: none; --neo-shadow-inset-sm: none; --neo-shadow-inset-lg: none; --neo-shadow-dark: var(--gs-rule); --neo-shadow-light: var(--gs-ground); --neo-shadow-dark-strong: var(--gs-rule-strong); /* 文字色 */ --neo-text: var(--gs-text); --neo-text-secondary: var(--gs-text-2); --neo-text-muted: var(--gs-text-3); --neo-accent: var(--gs-primary-strong); --text-primary: var(--gs-text); --text-secondary: var(--gs-text-2); --text-muted: var(--gs-text-3); --text-light: var(--gs-text-3); /* 意味色。旧値（#22c55e など）は白地でも薄紫地でも AA を満たさなかった。 読める濃度のトークンへ寄せる。 */ --neo-success: var(--gs-success); --neo-warning: var(--gs-warning); --neo-danger: var(--gs-danger); --neo-info: var(--gs-info); --accent-success: var(--gs-success); --accent-warning: var(--gs-warning); --accent-danger: var(--gs-danger); --accent-info: var(--gs-info); /* グラデーションは使わない。単色の塗りへ。 */ --gradient-start: var(--gs-fill-primary); --gradient-end: var(--gs-fill-primary); --gradient-primary: var(--gs-fill-primary); /* 角丸 */ --neo-radius: var(--gs-r-lg); --neo-radius-sm: var(--gs-r-md); --neo-radius-lg: var(--gs-r-lg); --neo-radius-xl: var(--gs-r-lg); --radius-sm: var(--gs-r-md); --radius-md: var(--gs-r-lg); --radius-lg: var(--gs-r-lg); --radius-xl: var(--gs-r-lg); --radius-full: var(--gs-r-pill); /* 余白 */ --space-xs: var(--gs-s1); --space-sm: var(--gs-s2); --space-md: var(--gs-s4); --space-lg: var(--gs-s5); --space-xl: var(--gs-s6); --space-2xl: var(--gs-s7); /* 動き */ --neo-transition: background-color var(--gs-dur-state) var(--gs-ease-standard), border-color var(--gs-dur-state) var(--gs-ease-standard), color var(--gs-dur-state) var(--gs-ease-standard); --transition-fast: var(--gs-dur-tap) var(--gs-ease-out); --transition-normal: var(--gs-dur-state) var(--gs-ease-standard); --transition-slow: var(--gs-dur-enter) var(--gs-ease-out); }