@vjsplus-j/galaxy-styles

🎨 星空主题样式库 🎨

完整的设计系统 - 包含设计令牌、混入、主题等

✨ 特性

• 🎨 完整设计令牌 - 颜色、字体、间距、圆角、阴影、动画
• 🪄 强大混入系统 - 玻璃态、渐变、响应式、工具函数
• 🌌 星空主题 - 深色主题，基于星空美学
• 📦 按需导入 - 支持SCSS模块化导入
• 🎭 TypeScript友好 - 提供CSS变量支持
• 💪 零依赖 - 仅需要sass编译器

📦 安装

# npm
npm install @vjsplus-j/galaxy-styles

# yarn
yarn add @vjsplus-j/galaxy-styles

# pnpm
pnpm add @vjsplus-j/galaxy-styles

安装sass（如果还没有）：

npm install -D sass

🚀 快速开始

方式 1: 导入编译后的CSS

// main.ts
import '@vjsplus-j/galaxy-styles'

方式 2: 在SCSS中使用

// 导入完整样式系统
@use '@vjsplus-j/galaxy-styles/styles' as *;

// 或按需导入
@use '@vjsplus-j/galaxy-styles/tokens/colors' as *;
@use '@vjsplus-j/galaxy-styles/mixins/glass' as *;

.my-card {
  @include glass-card;
  color: $text-primary;
}

🎨 设计令牌（Design Tokens）

颜色系统

@use '@vjsplus-j/galaxy-styles/tokens/colors' as *;

// 品牌色
$color-primary: #42a5f5;        // 银河蓝
$color-secondary: #4dd0e1;      // 青色
$color-accent: #5c6bc0;         // 靛蓝

// 功能色
$color-success: #66bb6a;
$color-warning: #ffa726;
$color-danger: #ef5350;
$color-info: #78909c;

// 文本颜色（深色主题）
$text-primary: #ffffff;
$text-secondary: rgba(255, 255, 255, 0.65);

// 渐变
$gradient-primary: linear-gradient(135deg, #42a5f5 0%, #4dd0e1 100%);
$gradient-rainbow: linear-gradient(...);

间距系统

@use '@vjsplus-j/galaxy-styles/tokens/spacing' as *;

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 28px;

其他令牌

• typography - 字体系统
• radius - 圆角系统
• shadows - 阴影和发光效果
• animations - 动画时长和关键帧

🪄 混入（Mixins）

玻璃态效果

@use '@vjsplus-j/galaxy-styles/mixins/glass' as *;

.my-card {
  @include glass-card;      // 玻璃态卡片
}

.my-button {
  @include glass-button;    // 玻璃态按钮
}

.my-navbar {
  @include glass-navbar;    // 玻璃态导航栏
}

渐变效果

@use '@vjsplus-j/galaxy-styles/mixins/gradient' as *;

.title {
  @include gradient-text-primary;    // 渐变文字
}

.background {
  @include nebula-gradient;          // 星云渐变
  @include grid-pattern;             // 网格图案
}

.border {
  @include gradient-border(2px);    // 渐变边框
}

响应式

@use '@vjsplus-j/galaxy-styles/mixins/responsive' as *;

.element {
  font-size: 14px;

  @include md-up {        // ≥768px
    font-size: 16px;
  }

  @include mobile {       // <768px
    padding: 12px;
  }

  @include desktop {      // ≥1024px
    padding: 24px;
  }
}

工具混入

@use '@vjsplus-j/galaxy-styles/mixins/utils' as *;

.container {
  @include flex-center;              // Flexbox居中
  @include custom-scrollbar;         // 自定义滚动条
}

.text {
  @include text-ellipsis;            // 单行省略
  @include text-ellipsis-multi(2);   // 多行省略
}

.button {
  @include hover-lift;               // 悬停上升效果
}

🌈 主题系统

使用CSS变量

样式库自动注入CSS变量到:root：

.my-component {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-base);
}

可用的主题类

<div class="glass-card">玻璃态卡片</div>
<button class="glass-button">玻璃态按钮</button>
<h1 class="gradient-text">渐变文字</h1>
<button class="gradient-button">渐变按钮</button>

📖 完整模块列表

设计令牌（Tokens）

| 模块 | 路径 | 说明 | |------|------|------| | 颜色 | tokens/colors | 品牌色、功能色、渐变 | | 字体 | tokens/typography | 字体族、大小、粗细 | | 间距 | tokens/spacing | 20+ 间距规格 | | 圆角 | tokens/radius | 圆角尺寸 | | 阴影 | tokens/shadows | 阴影和发光效果 | | 动画 | tokens/animations | 时长、缓动、关键帧 |

混入（Mixins）

| 模块 | 路径 | 说明 | |------|------|------| | 玻璃态 | mixins/glass | 玻璃态效果 | | 渐变 | mixins/gradient | 渐变效果 | | 响应式 | mixins/responsive | 断点和媒体查询 | | 工具 | mixins/utils | 布局、文本等工具 |

核心样式（Core）

| 模块 | 路径 | 说明 | |------|------|------| | Reset | core/reset | CSS重置 | | Base | core/base | 基础元素样式 |

主题（Themes）

| 模块 | 路径 | 说明 | |------|------|------| | 星空深色 | themes/galaxy-dark | 默认主题 |

🎯 使用示例

Vue 组件

<template>
  <div class="hero-section">
    <h1 class="title">星空主题</h1>
    <p class="description">美丽的设计系统</p>
    <button class="cta-button">开始使用</button>
  </div>
</template>

<style lang="scss" scoped>
@use '@vjsplus-j/galaxy-styles/tokens/colors' as *;
@use '@vjsplus-j/galaxy-styles/tokens/spacing' as *;
@use '@vjsplus-j/galaxy-styles/mixins/glass' as *;
@use '@vjsplus-j/galaxy-styles/mixins/gradient' as *;
@use '@vjsplus-j/galaxy-styles/mixins/responsive' as *;

.hero-section {
  @include glass-card;
  padding: $spacing-2xl;
  text-align: center;

  @include mobile {
    padding: $spacing-lg;
  }
}

.title {
  @include gradient-text-rainbow;
  font-size: 48px;
  margin-bottom: $spacing-lg;

  @include mobile {
    font-size: 32px;
  }
}

.description {
  color: $text-secondary;
  font-size: 18px;
  margin-bottom: $spacing-xl;
}

.cta-button {
  @include gradient-primary;
  @include hover-lift;
  padding: $spacing-md $spacing-xl;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
</style>

📚 相关项目

• @vjsplus-j/vue-starfall - 星空主题组件库

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 开源协议

MIT

Copyright © 2025 李飞恒. All rights reserved.

Made with ❤️ by 李飞恒