/* GunjoUI のデザイントークン（配信版をそのまま取り込んだもの。2026-09-12 に #969 の追加ぶんへ更新）出どころ: https://www.gunjo.jp/tokens.css ⛔ 手で書き換えない。値の上書きは index.html 側の :root で行う */ /* * GunjoUI デザイントークン（スタンドアロン版・Tailwind 不要の純 CSS） * GunjoUI design tokens, standalone. No build step required. * * 配布元: https://www.gunjo.jp/tokens.css * 使い方の解説: https://www.gunjo.jp/docs/no-npm * License: MIT (https://github.com/uixhero/gunjo) * * 値は "H S% L%" の HSL トリプレットです（hsl() で包んでいないのは、 * 透明度を後から合成できるようにするためです）: * * color: hsl(var(--primary)); * background: hsl(var(--primary) / 0.1); * * セマンティックトーンは 5 色（primary / info / success / warning / * destructive）。各色に subtle（淡い背景）・base（標準）・strong（濃い強調） * の 3 段と、専用の border があり、背景には -subtle、その上の文字には * -subtle-foreground のように、対になる foreground を組み合わせます。 * * ダークモードはまたはで * 切り替えます。OS 設定に追従させる場合はにこの 1 行: * * * * 影は box-shadow: var(--shadow-md) のようにそのまま使えます。 * --duration-* と --ease-* は transition / animation に使います。 * * 余白 --space-* と字 --text-* / --leading-* / --font-weight-* は、段階名が * Tailwind と同じです（--space-2 は gap-2 と同じ 8px＝2 段目の意味で、2px では * ありません）。小数の段はハイフンで書きます（--space-0-5 = 2px）。値は rem * なので、利用者がブラウザの文字サイズを変えると一緒に大きくなります。 * 各行の末尾に、既定の 16px 基準で何 px になるかを添えてあります。 * * padding: var(--space-4); 16px になります * font-size: var(--text-sm); 14px になります * font-weight: var(--font-weight-semibold); * * --control-h（36px）はボタン・入力・セレクトの共通の高さ、--text-ui と * --text-prose は「UI は 14px・長文は 16px」という密度の決まりです。密度を * 変えたいときは、個々の指定ではなくこの 3 つを差し替えてください。 */ :root { --primary-subtle: 220 60% 96%; --primary-subtle-foreground: 220 43% 28%; --primary: 220 62% 49%; --primary-foreground: 210 40% 98%; --primary-strong: 220 47% 38%; --primary-strong-foreground: 210 40% 98%; --primary-border: 220 55% 82%; --info-subtle: 214 100% 97%; --info-subtle-foreground: 217 91% 28%; --info: 217 91% 60%; --info-foreground: 222 47% 11%; --info-strong: 224 76% 48%; --info-strong-foreground: 210 40% 98%; --info-border: 214 95% 86%; --success-subtle: 138 76% 97%; --success-subtle-foreground: 143 64% 24%; --success: 142 71% 45%; --success-foreground: 144 61% 10%; --success-strong: 142 72% 29%; --success-strong-foreground: 210 40% 98%; --success-border: 141 84% 85%; --warning-subtle: 48 96% 89%; --warning-subtle-foreground: 32 95% 20%; --warning: 45 93% 47%; --warning-foreground: 24 10% 10%; --warning-strong: 32 95% 35%; --warning-strong-foreground: 210 40% 98%; --warning-border: 45 96% 75%; --destructive-subtle: 0 86% 97%; --destructive-subtle-foreground: 0 63% 31%; --destructive: 0 72% 51%; --destructive-foreground: 210 40% 98%; --destructive-strong: 0 72% 43%; --destructive-strong-foreground: 210 40% 98%; --destructive-border: 0 93% 84%; --overlay: 0 0% 0%; --background: 0 0% 100%; --foreground: 240 20% 6%; --card: 0 0% 100%; --card-foreground: 240 20% 6%; --popover: 0 0% 100%; --popover-foreground: 240 20% 6%; --secondary: 210 40% 96%; --secondary-foreground: 240 6% 10%; --muted: 210 40% 96%; --muted-foreground: 215 20% 40%; --accent: 29 31% 87%; --accent-foreground: 14 22% 19%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 220 62% 49%; --radius: 0.5rem; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --shadow-none: none; --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --palette-red: 0 84% 60%; --palette-green: 142 71% 45%; --palette-blue: 221 83% 53%; --palette-yellow: 48 96% 53%; --palette-cyan: 188 86% 53%; --palette-magenta: 292 84% 61%; --palette-gray: 220 9% 46%; --palette-white: 0 0% 100%; --palette-black: 0 0% 0%; --pure-white: 0 0% 100%; --pure-black: 220 60% 4%; /* 余白 — 段階名は Tailwind と同じ（--space-2 は gap-2 と同じ 8px）。小数の段は "-" で書く（--space-0-5 = 0.5 段 = 2px）。 */ --space-0: 0px; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-56: 14rem; /* 224px */ --space-64: 16rem; /* 256px */ /* 字の大きさ — rem なので利用者の文字サイズ設定に追従する */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* 行間 */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* 太さ */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* 文字種 — 採用先で上書きしてよい。Mincho の webfont は同梱しない */ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-mincho: "Shippori Mincho", "Yu Mincho", YuMincho, serif; /* 密度の決まり（/docs/typography の「密度のルール」） */ --control-h: 2.25rem; /* 36px h-9 */ --text-ui: var(--text-sm); /* UI の既定 */ --text-prose: var(--text-base); /* 長文の既定 */ } .dark, [data-theme="dark"] { --primary-subtle: 218 50% 18%; --primary-subtle-foreground: 218 90% 88%; --primary: 218 68% 63%; --primary-foreground: 220 60% 8%; --primary-strong: 218 55% 72%; --primary-strong-foreground: 220 60% 8%; --primary-border: 218 50% 38%; --info-subtle: 220 47% 16%; --info-subtle-foreground: 213 94% 88%; --info: 213 94% 68%; --info-foreground: 222 47% 11%; --info-strong: 213 94% 68%; --info-strong-foreground: 222 47% 11%; --info-border: 217 55% 35%; --success-subtle: 150 50% 14%; --success-subtle-foreground: 142 76% 85%; --success: 142 69% 58%; --success-foreground: 144 61% 9%; --success-strong: 142 69% 58%; --success-strong-foreground: 144 61% 9%; --success-border: 145 52% 32%; --warning-subtle: 38 60% 15%; --warning-subtle-foreground: 48 96% 82%; --warning: 43 96% 56%; --warning-foreground: 26 83% 14%; --warning-strong: 43 96% 56%; --warning-strong-foreground: 26 83% 14%; --warning-border: 40 64% 34%; --destructive-subtle: 0 50% 16%; --destructive-subtle-foreground: 0 93% 88%; --destructive: 0 72% 51%; --destructive-foreground: 210 40% 98%; --destructive-strong: 0 72% 43%; --destructive-strong-foreground: 210 40% 98%; --destructive-border: 0 55% 36%; --overlay: 0 0% 0%; --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 14 22% 19%; --accent-foreground: 29 31% 87%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 218 68% 63%; --palette-red: 0 84% 60%; --palette-green: 142 71% 45%; --palette-blue: 221 83% 53%; --palette-yellow: 48 96% 53%; --palette-cyan: 188 86% 53%; --palette-magenta: 292 84% 61%; --palette-gray: 220 9% 46%; --palette-white: 0 0% 100%; --palette-black: 0 0% 0%; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.4); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.1); --shadow-none: none; } /* 最小のベーススタイル（Tailwind preflight の要点だけを純 CSS で再現） */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); } body { margin: 0; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; font-family: var(--font-sans); background-color: hsl(var(--background)); color: hsl(var(--foreground)); }