// hikari-components/styles/index.scss
// Component styles entry point
//
// This file imports all component SCSS files, which will be compiled
// to CSS by the Grass compiler during the build process.
// ============================================
// SCSS Variables & Mixins (must be first)
// ============================================
// Use @use with as * to make variables available to all imported files
@use '../../../theme/styles/variables.scss' as *;
@use '../../../theme/styles/mixins.scss' as *;
// ============================================
// Theme Base Styles (before components)
// ============================================
// Import theme base styles with CSS variables for hikari and tairitsu themes
@import '../../../theme/styles/base.scss';
// ============================================
// Utility Classes (Tailwind-compatible)
// ============================================
// Basic utility classes for the Hikari UI framework
// These provide the CSS for ClassesBuilder-generated class names
// Display
.hi-hidden { display: none; }
.hi-block { display: block; }
.hi-inline-block { display: inline-block; }
.hi-flex { display: flex; }
.hi-inline-flex { display: inline-flex; }
.hi-grid { display: grid; }
.hi-inline-grid { display: inline-grid; }
// Flex Direction
.hi-flex-row { flex-direction: row; }
.hi-flex-col { flex-direction: column; }
.hi-flex-row-reverse { flex-direction: row-reverse; }
.hi-flex-col-reverse { flex-direction: column-reverse; }
// Flex
.hi-flex-1 { flex: 1 1 0%; }
.hi-flex-auto { flex: 1 1 auto; }
.hi-flex-none { flex: none; }
.hi-grow-0 { flex-grow: 0; }
.hi-grow-1 { flex-grow: 1; }
.hi-shrink-0 { flex-shrink: 0; }
.hi-shrink-1 { flex-shrink: 1; }
// Align Items
.hi-items-start { align-items: flex-start; }
.hi-items-end { align-items: flex-end; }
.hi-items-center { align-items: center; }
.hi-items-stretch { align-items: stretch; }
.hi-items-baseline { align-items: baseline; }
// Justify Content
.hi-justify-start { justify-content: flex-start; }
.hi-justify-end { justify-content: flex-end; }
.hi-justify-center { justify-content: center; }
.hi-justify-between { justify-content: space-between; }
.hi-justify-around { justify-content: space-around; }
.hi-justify-evenly { justify-content: space-evenly; }
// Gap
.hi-gap-0 { gap: 0; }
.hi-gap-1 { gap: 0.25rem; }
.hi-gap-2 { gap: 0.5rem; }
.hi-gap-3 { gap: 0.75rem; }
.hi-gap-4 { gap: 1rem; }
.hi-gap-5 { gap: 1.25rem; }
.hi-gap-6 { gap: 1.5rem; }
.hi-gap-8 { gap: 2rem; }
.hi-gap-12 { gap: 3rem; }
// Padding
.hi-p-0 { padding: 0; }
.hi-p-1 { padding: 0.25rem; }
.hi-p-2 { padding: 0.5rem; }
.hi-p-3 { padding: 0.75rem; }
.hi-p-4 { padding: 1rem; }
.hi-p-5 { padding: 1.25rem; }
.hi-p-6 { padding: 1.5rem; }
.hi-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.hi-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.hi-px-4 { padding-left: 1rem; padding-right: 1rem; }
.hi-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.hi-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
// Margin
.hi-m-0 { margin: 0; }
.hi-m-1 { margin: 0.25rem; }
.hi-m-2 { margin: 0.5rem; }
.hi-m-3 { margin: 0.75rem; }
.hi-m-4 { margin: 1rem; }
.hi-m-auto { margin: auto; }
.hi-mx-auto { margin-left: auto; margin-right: auto; }
.hi-mb-2 { margin-bottom: 0.5rem; }
.hi-mb-4 { margin-bottom: 1rem; }
.hi-mb-6 { margin-bottom: 1.5rem; }
// Width
.hi-w-full { width: 100%; }
.hi-w-screen { width: 100vw; }
.hi-w-auto { width: auto; }
.hi-w-6 { width: 1.5rem; }
.hi-w-8 { width: 2rem; }
.hi-w-12 { width: 3rem; }
.hi-w-24 { width: 6rem; }
.hi-w-64 { width: 16rem; }
.hi-max-w-full { max-width: 100%; }
.hi-max-w-logo { max-width: 160px; }
// Height
.hi-h-full { height: 100%; }
.hi-h-screen { height: 100vh; }
.hi-h-auto { height: auto; }
.hi-h-6 { height: 1.5rem; }
.hi-h-8 { height: 2rem; }
.hi-h-10 { height: 2.5rem; }
.hi-h-12 { height: 3rem; }
// Min Width
.hi-min-w-0 { min-width: 0; }
// Object Fit
.hi-object-contain { object-fit: contain; }
.hi-object-cover { object-fit: cover; }
// Font Size
.hi-text-xs { font-size: 0.75rem; line-height: 1rem; }
.hi-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.hi-text-base { font-size: 1rem; line-height: 1.5rem; }
.hi-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.hi-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.hi-text-2xl { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
// Font Weight
.hi-font-medium { font-weight: 500; }
.hi-font-semibold { font-weight: 600; }
.hi-font-bold { font-weight: 700; }
// Text Align
.hi-text-center { text-align: center; }
.hi-text-left { text-align: left; }
.hi-text-right { text-align: right; }
// Text Color - 语义化颜色，支持主题切换
.hi-text-white { color: var(--hi-color-text-inverted, #FFFFFF); }
.hi-text-black { color: var(--hi-color-text-primary, #000000); }
.hi-text-primary { color: var(--hi-color-text-primary, #2D2D2D); }
.hi-text-secondary { color: var(--hi-color-text-secondary, #6B7280); }
.hi-text-muted { color: var(--hi-color-text-secondary, #9CA3AF); }
.hi-text-accent { color: var(--hi-color-accent, #F59E0B); }
// Background Color - 语义化背景色，支持主题切换
.hi-bg-primary { background-color: var(--hi-color-primary, #7BCFA6); }
.hi-bg-secondary { background-color: var(--hi-color-surface-secondary, linear-gradient(135deg, #ffffff 0%, #f0f0f4 100%)); }
.hi-bg-accent { background-color: var(--hi-color-accent, #F59E0B); }
.hi-bg-white { background-color: var(--hi-color-surface, #FFFFFF); }
.hi-bg-black { background-color: var(--hi-color-background, #000000); }
.hi-bg-surface { background-color: var(--hi-color-surface, #FAFAFA); }
// Border Color - 语义化边框色，支持主题切换
.hi-border-transparent { border-color: transparent; }
// Border Radius
.hi-radius-sm { border-radius: 0.125rem; }
.hi-radius-md { border-radius: 0.375rem; }
.hi-radius-lg { border-radius: 0.5rem; }
.hi-radius-xl { border-radius: 0.75rem; }
.hi-rounded { border-radius: 0.25rem; }
.hi-rounded-full { border-radius: 9999px; }
// Shadow
.hi-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.hi-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.hi-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
// Cursor
.hi-cursor-pointer { cursor: pointer; }
// Transition
.hi-transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hi-transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hi-duration-150 { transition-duration: 150ms; }
.hi-duration-300 { transition-duration: 300ms; }
.hi-ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
// Opacity
.hi-opacity-50 { opacity: 0.5; }
// Overflow
.hi-overflow-hidden { overflow: hidden; }
.hi-overflow-auto { overflow: auto; }
.hi-overflow-x-hidden { overflow-x: hidden; }
.hi-overflow-y-auto { overflow-y: auto; }
// Position
.hi-relative { position: relative; }
.hi-absolute { position: absolute; }
.hi-fixed { position: fixed; }
.hi-sticky { position: sticky; }
// Z-Index
.hi-z-10 { z-index: 10; }
.hi-z-20 { z-index: 20; }
.hi-z-50 { z-index: 50; }
// ============================================
// Animation Utility Classes (通用动画)
// ============================================
// Spin (旋转)
.hi-spin { animation: hi-spin 1s linear infinite; }
@keyframes hi-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
// Pulse (脉搏)
.hi-pulse { animation: hi-pulse 2s ease-in-out infinite; }
@keyframes hi-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
// Bounce (弹跳)
.hi-bounce { animation: hi-bounce 1s ease-in-out infinite; }
@keyframes hi-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
// Fade In (淡入)
.hi-fade-in { animation: hi-fade-in 0.3s ease-out forwards; }
@keyframes hi-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
// Zoom In (缩放淡入)
.hi-zoom-in { animation: hi-zoom-in 0.3s ease-out forwards; }
@keyframes hi-zoom-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
// Slide In Left (从左滑入)
.hi-slide-in-left { animation: hi-slide-in-left 0.3s ease-out forwards; }
@keyframes hi-slide-in-left {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
// Slide In Right (从右滑入)
.hi-slide-in-right { animation: hi-slide-in-right 0.3s ease-out forwards; }
@keyframes hi-slide-in-right {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
// Slide In Top (从上滑入)
.hi-slide-in-top { animation: hi-slide-in-top 0.3s ease-out forwards; }
@keyframes hi-slide-in-top {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
// Slide In Bottom (从下滑入)
.hi-slide-in-bottom { animation: hi-slide-in-bottom 0.3s ease-out forwards; }
@keyframes hi-slide-in-bottom {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
// Fade In Scale (淡入+缩放)
.hi-fade-in-scale { animation: hi-fade-in-scale 0.3s ease-out forwards; }
@keyframes hi-fade-in-scale {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
// Fade Out Scale (淡出+缩放)
.hi-fade-out-scale { animation: hi-fade-out-scale 0.3s ease-out forwards; }
@keyframes hi-fade-out-scale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.9); }
}
// Blur In (模糊淡入)
.hi-blur-in { animation: hi-blur-in 0.3s ease-out forwards; }
@keyframes hi-blur-in {
from { opacity: 0; filter: blur(10px); }
to { opacity: 1; filter: blur(0); }
}
// Bounce In (弹性进入)
.hi-bounce-in { animation: hi-bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
@keyframes hi-bounce-in {
0% { opacity: 0; transform: scale(0.3); }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
// Grid
.hi-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.hi-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hi-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hi-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hi-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hi-col { flex: 1 1 0%; }
// ============================================
// Additional utility classes not yet in palette:
// Max-width constraints for images
.hi-max-w-logo {
max-width: 160px;
}
// Object-fit utilities for images
.hi-object-contain {
object-fit: contain;
}
.hi-object-cover {
object-fit: cover;
}
// ============================================
// CSS Variables (Default Fallback Values)
// ============================================
//
// These CSS custom properties provide default fallback values.
// The ThemeProvider component will override these values at runtime
// based on the selected theme (Hikari light or Tairitsu dark).
//
// Benefits:
// - Components outside ThemeProvider still have valid colors
// - Development preview without ThemeProvider wrapper
// - Graceful degradation for older browsers
//
// Note: These are fallback values only. ThemeProvider injects
// actual theme colors via inline styles at runtime.
:root {
// Theme Colors (matching legacy hikari computed styles)
--hi-primary: #FFC0CB; // pink
--hi-secondary: #519A73; // 苍翠
--hi-accent: #F7B500; // 姜黄
--hi-success: #0EB840; // 葱倩
--hi-warning: #EED677; // 鹅黄
--hi-danger: #FF4C00; // 朱红
--hi-info: #6ABED6; // 蓝色
// Surface & Background Colors (matching legacy computed values)
--hi-background: #ffffff;
--hi-surface: rgba(255, 255, 255, 0.7);
--hi-border: #C4D8DA;
// Text Colors (matching legacy — slate gray not near-black)
--hi-text-primary: #50616D;
--hi-text-secondary: rgba(80, 97, 109, 0.65);
--hi-text-disabled: rgba(80, 97, 109, 0.35);
// Aliases for components (with color- prefix for consistency)
--hi-color-text-primary: var(--hi-text-primary);
--hi-color-text-secondary: var(--hi-text-secondary);
--hi-color-border: var(--hi-border);
--hi-color-primary: var(--hi-primary);
--hi-color-background: var(--hi-background);
--hi-color-surface: var(--hi-surface);
--hi-color-surface-secondary: var(--hi-page-bg, linear-gradient(135deg, #ffffff 0%, #f0f0f4 100%));
--hi-secondary-bg: rgba(255, 255, 255, 0.5);
--hi-tertiary-bg: rgba(240, 240, 244, 0.5);
// Component-specific Colors (light theme defaults)
--hi-button-bg: var(--hi-surface);
--hi-button-bg-hover: rgba(255, 192, 203, 0.8);
--hi-button-text: #50616D;
--hi-button-border: var(--hi-border);
--hi-input-bg: var(--hi-surface);
--hi-input-bg-focus: #FFFFFF;
--hi-input-border: var(--hi-border);
--hi-input-border-focus: var(--hi-primary);
--hi-input-text: #50616D;
--hi-input-placeholder: rgba(80, 97, 109, 0.4);
--hi-card-bg: var(--hi-surface);
--hi-card-border: var(--hi-border);
// Header & Aside surfaces
--hi-header-surface: var(--hi-surface);
--hi-aside-surface: var(--hi-surface);
--hi-badge-bg-primary: var(--hi-primary);
--hi-badge-bg-success: var(--hi-success);
// Button Variant Colors (matching legacy visual output)
--hi-button-primary: var(--hi-primary);
--hi-button-primary-hover: rgba(255, 192, 203, 0.85);
--hi-button-primary-light: #FFE4E9;
--hi-button-primary-dark: #FF9AA9;
--hi-button-secondary: var(--hi-secondary);
--hi-button-secondary-hover: rgba(81, 154, 115, 0.8);
--hi-button-secondary-light: #6BB38C;
--hi-button-secondary-dark: #3D7657;
--hi-button-danger: var(--hi-danger);
--hi-button-danger-hover: rgba(255, 76, 0, 0.8);
--hi-button-danger-light: #FF7A33;
--hi-button-danger-dark: #CC3D00;
--hi-button-success: var(--hi-success);
--hi-button-success-hover: rgba(14, 184, 64, 0.8);
--hi-button-success-light: #3DC86E;
--hi-button-success-dark: #0A8F33;
// Button icon colors
--hi-button-icon-on-dark: #ffffff;
--hi-button-icon-on-light: #50616D;
--hi-badge-bg-warning: var(--hi-warning);
--hi-badge-bg-danger: var(--hi-danger);
--hi-badge-text: #FFFFFF;
// Opacity Variants
--hi-opacity-0: 0;
--hi-opacity-10: 0.1;
--hi-opacity-20: 0.2;
--hi-opacity-30: 0.3;
--hi-opacity-40: 0.4;
--hi-opacity-50: 0.5;
--hi-opacity-60: 0.6;
--hi-opacity-70: 0.7;
--hi-opacity-80: 0.8;
--hi-opacity-90: 0.9;
--hi-opacity-100: 1;
// Shadow & Glow Effects (matching legacy — variable-driven)
--hi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--hi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--hi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--hi-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--hi-glow-primary-sm: 0 0 8px rgba(255, 179, 167, 0.3);
--hi-glow-primary-md: 0 0 16px rgba(255, 179, 167, 0.5);
--hi-glow-primary-lg: 0 0 24px rgba(255, 179, 167, 0.4);
--hi-glow-danger-sm: 0 0 8px rgba(232, 90, 79, 0.3);
--hi-glow-danger-md: 0 0 16px rgba(232, 90, 79, 0.5);
--hi-glow-success-sm: 0 0 8px rgba(92, 191, 145, 0.3);
--hi-glow-success-md: 0 0 16px rgba(92, 191, 145, 0.5);
--hi-glow-warning-sm: 0 0 8px rgba(238, 214, 119, 0.3);
--hi-glow-warning-md: 0 0 16px rgba(238, 214, 119, 0.5);
// Common Values
--hi-white-5: rgba(255, 255, 255, 0.05);
--hi-white-8: rgba(255, 255, 255, 0.08);
--hi-white-10: rgba(255, 255, 255, 0.1);
--hi-white-15: rgba(255, 255, 255, 0.15);
--hi-white-20: rgba(255, 255, 255, 0.2);
--hi-white-30: rgba(255, 255, 255, 0.3);
--hi-black-10: rgba(0, 0, 0, 0.1);
--hi-black-20: rgba(0, 0, 0, 0.2);
--hi-black-30: rgba(0, 0, 0, 0.3);
// Scrollbar Colors
--hi-scrollbar-track-dark: rgba(74, 66, 102, 0.25); // 黛 with 25% opacity
--hi-scrollbar-track-light: rgba(74, 66, 102, 0.12); // 黛 with 12% opacity
--hi-scrollbar-thumb: rgba(148, 163, 184, 0.6); // Slate with 60% opacity
--hi-scrollbar-thumb-hover: rgba(203, 213, 225, 0.8); // Slate with 80% opacity
--hi-scrollbar-thumb-active-filter: brightness(0.85); // Darken in light mode
}
// Dark theme specific overrides — must stay in sync with Tairitsu::palette() in hikari-palette
[data-theme="tairitsu"] {
// Theme Colors
--hi-primary: #144A74; // 鷃蓝
--hi-secondary: #FFC773; // 姜黄
--hi-accent: #FFC773; // 姜黄
--hi-success: #0EB840; // 葱倩
--hi-warning: #FFF143; // 鹅黄
--hi-danger: #FF4C00; // 朱红
--hi-info: #144A74; // 鷃蓝
// Surface & Background Colors
--hi-background: #161823; // 漆黑 — 深邃夜空底色
--hi-surface: rgba(32, 35, 54, 0.7); // 比 background 稍亮
--hi-border: #303448; // 比 surface 稍亮
// Text Colors
--hi-text-primary: #F0F0F5; // 近白，主文本
--hi-text-secondary: #B3B8C7; // 柔白偏蓝，次要文本
--hi-text-disabled: #6B7280;
// Aliases for components (with color- prefix for consistency)
--hi-color-text-primary: var(--hi-text-primary);
--hi-color-text-secondary: var(--hi-text-secondary);
--hi-color-border: var(--hi-border);
--hi-color-primary: var(--hi-primary);
--hi-color-background: var(--hi-background);
--hi-color-surface: var(--hi-surface);
--hi-color-surface-secondary: var(--hi-page-bg, linear-gradient(135deg, #10101c 0%, #161823 100%));
// Scrollbar Colors
--hi-scrollbar-track-dark: rgba(255,255, 255, 0.08);
--hi-scrollbar-track-light: rgba(255, 255, 255, 0.04);
--hi-scrollbar-thumb: rgba(179, 184, 199, 0.5);
--hi-scrollbar-thumb-hover: rgba(179, 184, 199, 0.7);
--hi-scrollbar-thumb-active-filter: brightness(1.2);
// Component-specific Colors
--hi-button-bg: rgba(240, 240, 245, 0.08);
--hi-button-bg-hover: rgba(240, 240, 245, 0.14);
--hi-input-bg: rgba(240, 240, 245, 0.06);
--hi-input-bg-focus: rgba(240, 240, 245, 0.10);
--hi-card-bg: rgba(240, 240, 245, 0.06);
}
// ============================================
// Global Transitions
// ============================================
* {
transition: all 0.3s $hikari-ease-smooth;
}
// ============================================
// 2. Basic Components
// ============================================
@import './components/background.scss';
@import './components/avatar.scss';
@import './components/button.scss';
@import './components/icon_button.scss';
@import './components/input.scss';
@import './components/select.scss';
@import './components/card.scss';
@import './components/image.scss';
@import './components/badge.scss';
@import './components/checkbox.scss';
@import './components/radio.scss';
@import './components/divider.scss';
@import './components/icon.scss';
@import './components/arrow.scss';
@import './components/switch.scss';
@import './components/slider.scss';
@import './components/number_input.scss';
@import './components/search.scss';
@import './components/input_wrapper.scss';
// ============================================
// Feedback Components
// ============================================
@import './components/glow.scss';
@import './components/alert.scss';
@import './components/toast.scss';
@import './components/tooltip.scss';
@import './components/progress.scss';
@import './components/skeleton.scss';
@import './components/spin.scss';
@import './components/drawer.scss';
@import './components/popover.scss';
@import './components/modal.scss';
// ============================================
// Navigation Components
// ============================================
@import './components/menu.scss';
@import './components/tabs.scss';
@import './components/breadcrumb.scss';
@import './components/sidebar.scss';
// ============================================
// Layout Components
// ============================================
@import './components/layout.scss';
@import './components/header.scss';
@import './components/aside.scss';
@import './components/container.scss';
@import './components/grid.scss';
@import './components/section.scss';
@import './components/scrollbar_container.scss';
@import './components/table.scss';
@import './components/tree.scss';
@import './components/pagination.scss';
@import './components/carousel.scss';
@import './components/code_block.scss';
@import './components/markdown_renderer.scss';
// ============================================
// Additional Components
// ============================================
@import './components/anchor.scss';
@import './components/cascader.scss';
@import './components/collapse.scss';
@import './components/drag.scss';
@import './components/filter.scss';
@import './components/flex.scss';
@import './components/pagination_jump_modal.scss';
@import './components/selection.scss';
@import './components/sort.scss';
@import './components/stepper.scss';
@import './components/transfer.scss';
@import './components/virtual-scroll.scss';