spb/spbgit Public MIT

1/**2 * ─────────────────────────────────────────────3 *  SPB Git — Personal Git Platform4 * ─────────────────────────────────────────────5 *  Author  : Simon-Pierre Boucher6 *  Contact : contact@spboucher.ai7 *  File    : src/web/assets/css/tokens.css8 *  Purpose : Design tokens v2 — colors, gradients, depth, themes9 *  License : MIT © Simon-Pierre Boucher10 * ─────────────────────────────────────────────11 */1213@font-face {14  font-family: 'Inter';15  src: url('/assets/fonts/inter-400.woff2') format('woff2');16  font-weight: 400;17  font-style: normal;18  font-display: swap;19}20@font-face {21  font-family: 'Inter';22  src: url('/assets/fonts/inter-500.woff2') format('woff2');23  font-weight: 500;24  font-style: normal;25  font-display: swap;26}27@font-face {28  font-family: 'Inter';29  src: url('/assets/fonts/inter-600.woff2') format('woff2');30  font-weight: 600;31  font-style: normal;32  font-display: swap;33}34@font-face {35  font-family: 'Inter';36  src: url('/assets/fonts/inter-700.woff2') format('woff2');37  font-weight: 700;38  font-style: normal;39  font-display: swap;40}41@font-face {42  font-family: 'JetBrains Mono';43  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');44  font-weight: 400;45  font-style: normal;46  font-display: swap;47}48@font-face {49  font-family: 'JetBrains Mono';50  src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2');51  font-weight: 600;52  font-style: normal;53  font-display: swap;54}5556:root,57html[data-theme='dark'] {58  --bg: #0b0e14;59  --bg-glow-1: rgba(79, 140, 255, 0.055);60  --bg-glow-2: rgba(34, 211, 170, 0.04);61  --surface: #11151c;62  --surface-2: #161b24;63  --surface-3: #1b2130;64  --border: #1f2530;65  --border-strong: #2a3242;66  --text: #e6e9ef;67  --text-bright: #f4f6fa;68  --muted: #8b93a3;69  --faint: #5c6474;70  --accent: #4f8cff;71  --accent-hover: #6ea1ff;72  --accent-soft: rgba(79, 140, 255, 0.14);73  --accent-glow: rgba(79, 140, 255, 0.35);74  --accent-2: #22d3aa;75  --accent-2-soft: rgba(34, 211, 170, 0.12);76  --gradient-brand: linear-gradient(120deg, #4f8cff 0%, #22d3aa 100%);77  --gradient-text: linear-gradient(100deg, #e6e9ef 20%, #9db6e8 60%, #4f8cff 100%);78  --danger: #ff5d5d;79  --success: #3fb950;80  --warning: #d29922;81  --add-bg: rgba(63, 185, 80, 0.14);82  --add-bg-strong: rgba(63, 185, 80, 0.28);83  --add-text: #56d364;84  --del-bg: rgba(248, 81, 73, 0.13);85  --del-bg-strong: rgba(248, 81, 73, 0.28);86  --del-text: #ff7b72;87  --hunk-bg: rgba(79, 140, 255, 0.07);88  --code-bg: #0d1117;89  --code-head: #131922;90  --chip-bg: rgba(79, 140, 255, 0.12);91  --heat-0: #161b24;92  --heat-1: #0e4429;93  --heat-2: #006d32;94  --heat-3: #26a641;95  --heat-4: #39d353;96  --radius: 10px;97  --radius-lg: 14px;98  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;99  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;100  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);101  --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, 0.55);102  --shadow-card: 0 14px 40px -18px rgba(0, 0, 0, 0.6);103  --ring: 0 0 0 3px rgba(79, 140, 255, 0.32);104  --nav-bg: rgba(11, 14, 20, 0.82);105  color-scheme: dark;106}107108html[data-theme='light'] {109  --bg: #f6f8fb;110  --bg-glow-1: rgba(47, 111, 224, 0.05);111  --bg-glow-2: rgba(13, 158, 128, 0.04);112  --surface: #ffffff;113  --surface-2: #f1f4f8;114  --surface-3: #e9edf4;115  --border: #dbe1ea;116  --border-strong: #c3ccd9;117  --text: #1c2330;118  --text-bright: #0d1320;119  --muted: #57606e;120  --faint: #8a93a3;121  --accent: #2f6fe0;122  --accent-hover: #1e5ecf;123  --accent-soft: rgba(47, 111, 224, 0.1);124  --accent-glow: rgba(47, 111, 224, 0.25);125  --accent-2: #0d9e80;126  --accent-2-soft: rgba(13, 158, 128, 0.1);127  --gradient-brand: linear-gradient(120deg, #2f6fe0 0%, #0d9e80 100%);128  --gradient-text: linear-gradient(100deg, #1c2330 20%, #29456f 60%, #2f6fe0 100%);129  --danger: #d33636;130  --success: #1a7f37;131  --warning: #9a6700;132  --add-bg: rgba(26, 127, 55, 0.1);133  --add-bg-strong: rgba(26, 127, 55, 0.22);134  --add-text: #1a7f37;135  --del-bg: rgba(207, 34, 46, 0.09);136  --del-bg-strong: rgba(207, 34, 46, 0.2);137  --del-text: #cf222e;138  --hunk-bg: rgba(47, 111, 224, 0.06);139  --code-bg: #f6f8fa;140  --code-head: #eef1f5;141  --chip-bg: rgba(47, 111, 224, 0.1);142  --heat-0: #ebedf0;143  --heat-1: #9be9a8;144  --heat-2: #40c463;145  --heat-3: #30a14e;146  --heat-4: #216e39;147  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);148  --shadow-2: 0 6px 24px -10px rgba(16, 24, 40, 0.16);149  --shadow-card: 0 14px 40px -20px rgba(16, 24, 40, 0.22);150  --ring: 0 0 0 3px rgba(47, 111, 224, 0.25);151  --nav-bg: rgba(246, 248, 251, 0.85);152  color-scheme: light;153}154155/* Shiki dual-theme switch */156html[data-theme='dark'] .shiki,157html[data-theme='dark'] .shiki span {158  color: var(--shiki-dark) !important;159  background-color: transparent !important;160}161html[data-theme='light'] .shiki,162html[data-theme='light'] .shiki span {163  color: var(--shiki-light) !important;164  background-color: transparent !important;165}166167@media (prefers-reduced-motion: reduce) {168  *, *::before, *::after {169    animation-duration: 0.01ms !important;170    transition-duration: 0.01ms !important;171  }172}173