src/styles/variables.styl

/* ===== 基础变量定义 ===== */
:root
  --radius-large: 1rem
  --content-delay: 150ms

/* ===== 主题相关变量 ===== */
:root
  --primary: oklch(0.70 0.14 var(--hue))
  --page-bg: oklch(0.95 0.01 var(--hue))
  --card-bg: white
  --card-bg-transparent: rgba(255, 255, 255, 0.6)
  
  --btn-content: oklch(0.55 0.12 var(--hue))
  --btn-regular-bg: oklch(0.95 0.025 var(--hue))
  --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue))
  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue))
  
  --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue))
  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue))
  
  --btn-card-bg-hover: oklch(0.98 0.005 var(--hue))
  --btn-card-bg-active: oklch(0.9 0.03 var(--hue))
  
  --enter-btn-bg: var(--btn-regular-bg)
  --enter-btn-bg-hover: var(--btn-regular-bg-hover)
  --enter-btn-bg-active: var(--btn-regular-bg-active)
  
  --deep-text: oklch(0.25 0.02 var(--hue))
  --title-active: oklch(0.6 0.1 var(--hue))
  
  --line-divider: rgba(0, 0, 0, 0.08)
  --line-color: rgba(0, 0, 0, 0.1)
  --meta-divider: rgba(0, 0, 0, 0.2)
  --content-meta: rgba(0, 0, 0, 0.7)
  
  --inline-code-bg: var(--btn-regular-bg)
  --inline-code-color: var(--btn-content)
  --selection-bg: oklch(0.90 0.05 var(--hue))
  --codeblock-bg: oklch(0.17 0.015 var(--hue))
  --codeblock-topbar-bg: oklch(0.3 0.02 var(--hue))
  
  --license-block-bg: rgba(0, 0, 0, 0.03)
  
  --link-underline: oklch(0.93 0.04 var(--hue))
  --link-hover: oklch(0.95 0.025 var(--hue))
  --link-active: oklch(0.90 0.05 var(--hue))
  
  --float-panel-bg: white
  
  --scrollbar-bg-light: rgba(0, 0, 0, 0.4)
  --scrollbar-bg-hover-light: rgba(0, 0, 0, 0.5)
  --scrollbar-bg-active-light: rgba(0, 0, 0, 0.6)
  
  --scrollbar-bg-dark: rgba(255, 255, 255, 0.4)
  --scrollbar-bg-hover-dark: rgba(255, 255, 255, 0.5)
  --scrollbar-bg-active-dark: rgba(255, 255, 255, 0.6)
  
  --scrollbar-bg: var(--scrollbar-bg-light)
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-light)
  --scrollbar-bg-active: var(--scrollbar-bg-active-light)
  
  --display-light-icon: 1
  --display-dark-icon: 0
  
  --admonitions-color-tip: oklch(0.7 0.14 180)
  --admonitions-color-note: oklch(0.7 0.14 250)
  --admonitions-color-important: oklch(0.7 0.14 310)
  --admonitions-color-warning: oklch(0.7 0.14 60)
  --admonitions-color-caution: oklch(0.6 0.2 25)
  
  /* TOC相关变量 */
  --toc-badge-bg: oklch(0.9 0.045 var(--hue))
  --toc-btn-hover: oklch(0.92 0.015 var(--hue))
  --toc-btn-active: oklch(0.90 0.015 var(--hue))
  --toc-width: calc((100vw - var(--page-width)) / 2 - 1rem)
  --toc-item-active: oklch(0.70 0.13 var(--hue))
  
  /* 主题色选择条渐变 */
  --color-selection-bar: linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360))

/* 暗色主题变量 */
:root.dark
  --primary: oklch(0.75 0.14 var(--hue))
  --page-bg: oklch(0.16 0.014 var(--hue))
  --card-bg: oklch(0.23 0.015 var(--hue))
  --card-bg-transparent: rgba(23, 23, 23, 0.6)
  
  --btn-content: oklch(0.75 0.1 var(--hue))
  --btn-regular-bg: oklch(0.33 0.035 var(--hue))
  --btn-regular-bg-hover: oklch(0.38 0.04 var(--hue))
  --btn-regular-bg-active: oklch(0.43 0.045 var(--hue))
  
  --btn-plain-bg-hover: oklch(0.30 0.035 var(--hue))
  --btn-plain-bg-active: oklch(0.27 0.025 var(--hue))
  
  --btn-card-bg-hover: oklch(0.3 0.03 var(--hue))
  --btn-card-bg-active: oklch(0.35 0.035 var(--hue))
  
  --line-divider: rgba(255, 255, 255, 0.08)
  --line-color: rgba(255, 255, 255, 0.1)
  --meta-divider: rgba(255, 255, 255, 0.2)
  --content-meta: rgba(255, 255, 255, 0.6)
  
  --selection-bg: oklch(0.40 0.08 var(--hue))
  --codeblock-bg: oklch(0.17 0.015 var(--hue))
  --codeblock-topbar-bg: oklch(0.12 0.015 var(--hue))
  
  --license-block-bg: var(--codeblock-bg)
  
  --link-underline: oklch(0.40 0.08 var(--hue))
  --link-hover: oklch(0.40 0.08 var(--hue))
  --link-active: oklch(0.35 0.07 var(--hue))
  
  --float-panel-bg: oklch(0.19 0.015 var(--hue))
  
  --scrollbar-bg: var(--scrollbar-bg-dark)
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-dark)
  --scrollbar-bg-active: var(--scrollbar-bg-active-dark)
  
  --display-light-icon: 0
  --display-dark-icon: 1
  
  --admonitions-color-tip: oklch(0.75 0.14 180)
  --admonitions-color-note: oklch(0.75 0.14 250)
  --admonitions-color-important: oklch(0.75 0.14 310)
  --admonitions-color-warning: oklch(0.75 0.14 60)
  --admonitions-color-caution: oklch(0.65 0.2 25)
  
  /* TOC相关变量 - 暗色主题 */
  --toc-badge-bg: var(--btn-regular-bg)
  --toc-btn-hover: oklch(0.28 0.04 var(--hue))
  --toc-btn-active: oklch(0.32 0.05 var(--hue))
  --toc-item-active: oklch(0.35 0.07 var(--hue))
  
  /* 主题色选择条渐变 - 暗色主题 */
  --color-selection-bar: linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))

/* ===== 响应式断点变量 ===== */
:root
  /* 断点定义 */
  --breakpoint-xs: 320px
  --breakpoint-sm: 480px
  --breakpoint-md: 768px
  --breakpoint-lg: 1024px
  --breakpoint-xl: 1280px
  --breakpoint-2xl: 1536px
  
  /* 容器宽度 */
  --container-xs: 100%
  --container-sm: 100%
  --container-md: 100%
  --container-lg: 1024px
  --container-xl: 1280px
  --container-2xl: 1536px

/* ===== 动画变量 ===== */
:root
  /* 缓动函数 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1)
  --ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94)
  --ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19)
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1)
  
  /* 动画时长 */
  --duration-fast: 150ms
  --duration-normal: 200ms
  --duration-medium: 300ms
  --duration-slow: 400ms
  --duration-slower: 500ms
  
  /* 动画延迟 */
  --delay-none: 0ms
  --delay-short: 50ms
  --delay-medium: 100ms
  --delay-long: 150ms
  --delay-longer: 200ms

/* ===== 间距变量 ===== */
:root
  /* 基础间距 */
  --spacing-xs: 0.25rem    /* 4px */
  --spacing-sm: 0.5rem     /* 8px */
  --spacing-md: 0.75rem    /* 12px */
  --spacing-lg: 1rem       /* 16px */
  --spacing-xl: 1.25rem    /* 20px */
  --spacing-2xl: 1.5rem    /* 24px */
  --spacing-3xl: 2rem      /* 32px */
  --spacing-4xl: 2.5rem    /* 40px */
  --spacing-5xl: 3rem      /* 48px */
  
  /* 组件间距 */
  --widget-gap-mobile: var(--spacing-md)
  --widget-gap-tablet: var(--spacing-lg)
  --widget-gap-desktop: var(--spacing-xl)
  
  /* 侧边栏宽度 */
  --sidebar-width-mobile: 100%
  --sidebar-width-tablet: 280px
  --sidebar-width-desktop: 320px

/* ===== 阴影变量 ===== */
:root
  /* 基础阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1)
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1)
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25)
  
  /* 特殊阴影 */
  --shadow-navbar: 0 4px 16px rgba(0, 0, 0, 0.1)
  --shadow-navbar-dark: 0 4px 16px rgba(0, 0, 0, 0.2)
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15)
  --shadow-button-dark: 0 4px 12px rgba(255, 255, 255, 0.1)

/* ===== 边框半径变量 ===== */
:root
  --radius-sm: 0.25rem     /* 4px */
  --radius-md: 0.375rem    /* 6px */
  --radius-lg: 0.5rem      /* 8px */
  --radius-xl: 0.75rem     /* 12px */
  --radius-2xl: 1rem       /* 16px */
  --radius-3xl: 1.5rem     /* 24px */
  --radius-full: 9999px

/* ===== 透明度变量 ===== */
:root
  --opacity-0: 0
  --opacity-5: 0.05
  --opacity-10: 0.1
  --opacity-20: 0.2
  --opacity-25: 0.25
  --opacity-30: 0.3
  --opacity-40: 0.4
  --opacity-50: 0.5
  --opacity-55: 0.55
  --opacity-60: 0.6
  --opacity-70: 0.7
  --opacity-75: 0.75
  --opacity-80: 0.8
  --opacity-85: 0.85
  --opacity-90: 0.9
  --opacity-95: 0.95
  --opacity-100: 1

/* ===== 模糊效果变量 ===== */
:root
  --blur-sm: 4px
  --blur-md: 8px
  --blur-lg: 12px
  --blur-xl: 16px
  --blur-2xl: 20px
  --blur-3xl: 24px

/* ===== 变换变量 ===== */
:root
  /* 平移 */
  --translate-xs: 0.125rem   /* 2px */
  --translate-sm: 0.25rem     /* 4px */
  --translate-md: 0.5rem      /* 8px */
  --translate-lg: 0.75rem     /* 12px */
  --translate-xl: 1rem        /* 16px */
  --translate-2xl: 1.5rem      /* 24px */
  --translate-3xl: 2rem       /* 32px */
  
  /* 缩放 */
  --scale-95: 0.95
  --scale-98: 0.98
  --scale-100: 1
  --scale-105: 1.05
  --scale-110: 1.1

/* ===== 层级变量 ===== */
:root
  --z-dropdown: 1000
  --z-sticky: 1020
  --z-fixed: 1030
  --z-modal-backdrop: 1040
  --z-modal: 1050
  --z-popover: 1060
  --z-tooltip: 1070
  --z-toast: 1080
  --z-navbar: 20
  --z-banner: 10
  --z-content: 30

/* ===== 性能优化变量 ===== */
:root
  /* GPU加速 */
  --gpu-transform: translateZ(0)
  --gpu-backface: hidden
  
  /* 动画性能 */
  --animation-fill-mode: both
  --animation-timing: var(--ease-standard)
  --animation-duration: var(--duration-medium)

/* ===== 响应式工具类 ===== */
@media (max-width: 767px)
  :root
    --container-width: var(--container-sm)
    --widget-gap: var(--widget-gap-mobile)
    --sidebar-width: var(--sidebar-width-mobile)

@media (min-width: 768px) and (max-width: 1279px)
  :root
    --container-width: var(--container-md)
    --widget-gap: var(--widget-gap-tablet)
    --sidebar-width: var(--sidebar-width-tablet)

@media (min-width: 1280px)
  :root
    --container-width: var(--container-lg)
    --widget-gap: var(--widget-gap-desktop)
    --sidebar-width: var(--sidebar-width-desktop)