/* * 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 に使います。 */ :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%; } .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: 1.5; -webkit-font-smoothing: antialiased; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; background-color: hsl(var(--background)); color: hsl(var(--foreground)); }