@veltra/styles 1.0.0

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@veltra/styles",
+  "version": "1.0.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.scss",
+    "src/index.ts",
+    "src/load-theme.ts",
+    "src/theme/index.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./normalize": {
+      "sass": "./src/normalize.scss",
+      "development": "./src/normalize.scss",
+      "import": "./src/normalize.scss",
+      "default": "./src/normalize.scss"
+    },
+    "./mixins": {
+      "sass": "./src/_mixins.scss",
+      "development": "./src/_mixins.scss",
+      "import": "./src/_mixins.scss",
+      "default": "./src/_mixins.scss"
+    },
+    "./vars": {
+      "sass": "./src/_vars.scss",
+      "development": "./src/_vars.scss",
+      "import": "./src/_vars.scss",
+      "default": "./src/_vars.scss"
+    },
+    "./functions": {
+      "sass": "./src/_functions.scss",
+      "development": "./src/_functions.scss",
+      "import": "./src/_functions.scss",
+      "default": "./src/_functions.scss"
+    },
+    "./anime/*": {
+      "sass": "./src/anime/*",
+      "development": "./src/anime/*",
+      "import": "./src/anime/*",
+      "default": "./src/anime/*"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "development": "./src/theme/index.ts",
+      "import": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./*": {
+      "sass": "./src/*",
+      "development": "./src/*",
+      "import": "./src/*",
+      "default": "./src/*"
+    }
+  },
+  "scripts": {
+    "build": "tsdown && bun scripts/copy-scss.ts",
+    "check-types": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@cat-kit/core": "^1.0.1",
+    "@veltra/compositions": "workspace:*",
+    "@veltra/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@tsdown/css": "^0.21.7",
+    "sass-embedded": "^1.99.0",
+    "tsdown": "^0.21.7"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}

package/src/_functions.scss

@@ -0,0 +1,49 @@
+@use 'vars';
+@use 'sass:list';
+
+// 使用单个变量（全局主题 token，`--u-*`）
+@function use-var($basename, $nodes...) {
+  $suffix: '';
+
+  @each $node in $nodes {
+    $suffix: $suffix + '-' + $node;
+  }
+
+  @return var(--u-#{$basename}#{$suffix});
+}
+
+// 组件级 token：`var(--u-{component}-{property}[, fallback])`
+@function component-var($component, $property, $fallback: null) {
+  @if $fallback == null {
+    @return var(--u-#{$component}-#{$property});
+  }
+
+  @return var(--u-#{$component}-#{$property}, #{$fallback});
+}
+
+// 使用多个变量
+@function use-vars($vars, $separator: ' ') {
+  $result: '';
+  $len: list.length($vars);
+  @for $i from 1 to $len {
+    $result: $result + use-var(list.nth($vars, $i)) + $separator;
+  }
+
+  $result: $result + use-var(list.nth($vars, $len));
+
+  @return $result;
+}
+
+// bem的函数
+@function bem($b, $e: null, $m: null) {
+  $b: '.' + vars.$namespace + $b;
+  @if ($e != null) {
+    $b: $b + '__' + $e;
+  }
+
+  @if ($m != null) {
+    $b: $b + '--' + $m;
+  }
+
+  @return $b;
+}

package/src/_mixins.scss

@@ -0,0 +1,177 @@
+@use 'vars';
+@use 'sass:list';
+@use 'sass:map';
+@use 'functions' as fn;
+
+/** flex布局 */
+@mixin flex($display: flex, $justify: flex-start, $align: center, $wrap: nowrap) {
+  display: $display;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+}
+
+@mixin size {
+  @each $size in vars.$sizes {
+    &--#{$size} {
+      @content ($size);
+    }
+  }
+}
+
+@mixin b($blocks...) {
+  @each $block in $blocks {
+    .#{vars.$namespace}#{$block} {
+      @content;
+    }
+  }
+}
+
+@mixin e($elements...) {
+  $selector-list: null;
+
+  @each $element in $elements {
+    @if ($selector-list != null) {
+      $selector-list: #{$selector-list} + ', &__' + #{$element};
+    } @else {
+      $selector-list: '&__' + #{$element};
+    }
+  }
+
+  #{$selector-list} {
+    @content;
+  }
+}
+
+@mixin m($modifiers...) {
+  $selector-list: null;
+
+  @each $modifier in $modifiers {
+    @if ($selector-list != null) {
+      $selector-list: #{$selector-list} + ', &--' + #{$modifier};
+    } @else {
+      $selector-list: '&--' + #{$modifier};
+    }
+  }
+
+  #{$selector-list} {
+    @content;
+  }
+}
+
+@mixin em($element, $modifier) {
+  $selector: '&__' + #{$element} + '--' + $modifier;
+  #{$selector} {
+    @content;
+  }
+}
+
+@mixin is($types...) {
+  @each $type in $types {
+    &.is-#{$type} {
+      @content;
+    }
+  }
+}
+
+@mixin bem($b, $e: null, $m: null) {
+  $b: '.' + vars.$namespace + $b;
+
+  @if ($e != null) {
+    @each $ei in $e {
+      @if ($m != null) {
+        @each $mi in $m {
+          #{$b + '__' + $ei + '--' + $mi} {
+            @content;
+          }
+        }
+      } @else {
+        #{$b + '__' + $ei} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    #{$b} {
+      @content;
+    }
+  }
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+@mixin css-var($prefix, $list) {
+  @each $type, $value in $list {
+    @if $value == null {
+      --#{$prefix}: #{$type};
+    } @else {
+      // "" + $type用于消除警告
+      --#{$prefix}-#{"" + $type}: #{$value};
+    }
+  }
+}
+
+@function breakpoint($point) {
+  @return var(--u-breakpoint-#{$point});
+}
+
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+@mixin dark {
+  html[data-theme='dark'] & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme='light']) & {
+      @content;
+    }
+  }
+}
+
+@mixin xs {
+  @media screen and (min-width: 0) and (max-width: breakpoint(xs)) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media screen and (min-width: breakpoint(xs)) and (max-width: breakpoint(sm)) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (min-width: breakpoint(sm)) and (max-width: breakpoint(md)) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (min-width: breakpoint( md)) and (max-width: breakpoint(lg)) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (min-width: breakpoint(lg)) {
+    @content;
+  }
+}

package/src/_vars.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+
+$namespace: 'u-';
+
+// 与全局 CSS 变量对齐的语义化别名（便于 SCSS 中直接引用）
+$color-primary: var(--u-color-primary);
+$text-color-main: var(--u-text-color-main);
+$border-color: var(--u-border-color);
+$bg-color-top: var(--u-bg-color-top);
+
+// 定义size映射的函数, 保证尺寸的统一性, size-vars(small, default, large)
+// 例子：
+// size-vars((height: 24px), (height: 32px), (height: 40px))
+// 生成:
+//  (small: (height: 24px), default: (height: 32px), large: (height: 40px))
+@function size-vars($sizes...) {
+  $size-types: (small, default, large);
+  $size-result: ();
+
+  @for $i from 1 through length($size-types) {
+    $size-result: map.merge($size-result, (#{nth($size-types, $i)}: nth($sizes, $i)));
+  }
+  @return $size-result;
+}
+
+$sizes: (small, default, large);
+
+// 颜色类别
+$color-types: (
+  // 品牌色
+  primary,
+  // 成功色
+  success,
+  // 警告色
+  warning,
+  // 危险色
+  danger,
+  // 信息
+  info,
+  // 禁用色
+  disabled,
+  // 默认色
+  default
+);

package/src/anime/fade.scss

@@ -0,0 +1,8 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s linear;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

package/src/anime/slide.scss

@@ -0,0 +1,28 @@
+.slide-down,
+.slide-up {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition:
+      transform 0.2s cubic-bezier(0, 0, 0.2, 1),
+      opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.slide-down {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-10px);
+  }
+}
+
+.slide-up {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(10px);
+  }
+}

package/src/anime/spring.scss

@@ -0,0 +1,42 @@
+@keyframes spring-in {
+  0% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1.1);
+  }
+  60% {
+    transform: scale(1);
+  }
+  80% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// @keyframes spring-out {
+//   100% {
+//     transform: scale3d(0, 0, 0) translate3d(0, 0, 0);
+//     opacity: 0;
+//   }
+// }
+
+.spring-enter-active {
+  transform-origin: center;
+  animation: spring-in 0.5s ease-in-out;
+}
+
+.spring-leave-active {
+  // animation: spring-out 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06);
+
+  transition:
+    transform 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06),
+    opacity 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06);
+}
+
+.spring-leave-to {
+  transform: scale3d(0, 0, 0) translate3d(0, 0, 0) !important;
+  opacity: 0;
+}

package/src/anime/zoom-in.scss

@@ -0,0 +1,73 @@
+.zoom-in,
+.zoom-in-left,
+.zoom-in-right,
+.zoom-in-top,
+.zoom-in-bottom {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition:
+      opacity 0.15s ease-in,
+      transform 0.15s ease-in;
+  }
+
+  &-leave-active {
+    transition:
+      opacity 0.15s ease-out,
+      transform 0.15s ease-out;
+  }
+}
+
+.zoom-in-left,
+.zoom-in-right {
+  &-enter-from,
+  &-leave-to {
+    transform: scaleX(0.8);
+  }
+}
+
+.zoom-in-top,
+.zoom-in-bottom {
+  &-enter-from,
+  &-leave-to {
+    transform: scaleY(0.8);
+  }
+}
+
+.zoom-in {
+  &-enter-from,
+  &-leave-to {
+    transform: scale(0.8);
+  }
+}
+
+.zoom-in-left {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: left center;
+  }
+}
+
+.zoom-in-right {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: right center;
+  }
+}
+
+.zoom-in-top {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: center top;
+  }
+}
+
+.zoom-in-bottom {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: center bottom;
+  }
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+declare module '*.scss' {}

package/src/index.ts

@@ -0,0 +1,5 @@
+import './normalize.scss'
+import './anime/fade.scss'
+import './anime/slide.scss'
+import './anime/spring.scss'
+import './anime/zoom-in.scss'

package/src/load-theme.ts

@@ -0,0 +1,46 @@
+import { useConfig } from '@veltra/compositions'
+import { shallowRef, type ShallowRef } from 'vue'
+
+import { darkTheme } from './theme/dark'
+import { lightTheme } from './theme/light'
+import { UITheme } from './theme/ui-theme'
+
+export const currentTheme: ShallowRef<UITheme | undefined> = shallowRef<UITheme>()
+
+export function setTheme(mode: 'light' | 'dark' | 'auto'): void {
+  UITheme.setTheme(mode)
+}
+
+/**
+ * @description 加载主题, 如果你是 SSR 环境,
+ * 请在 `onMounted` 中调用，否则你可以在
+ * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。
+ *
+ * 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。
+ * 传入自定义 `UITheme` 时使用单次 `html { }` 注入。
+ */
+export function loadTheme(theme?: UITheme): void {
+  currentTheme.value = theme ?? lightTheme
+
+  const { config } = useConfig()
+  if (typeof document !== 'undefined') {
+    document.documentElement.classList.add(config.size)
+  }
+
+  if (typeof document === 'undefined') return
+
+  if (!theme) {
+    currentTheme.value = lightTheme
+    UITheme.injectBuiltInThemes(lightTheme, darkTheme)
+    return
+  }
+
+  currentTheme.value = theme
+
+  if (theme === lightTheme || theme === darkTheme) {
+    UITheme.injectBuiltInThemes(lightTheme, darkTheme)
+    UITheme.setTheme(theme === darkTheme ? 'dark' : 'light')
+  } else {
+    theme.render()
+  }
+}

package/src/normalize.scss

@@ -0,0 +1,63 @@
+// 生成css变量
+// 主题主要由色彩, 大小, 圆角, 阴影, 字体, 边框构成
+// 其中色彩又分为文字颜色, 背景颜色
+@use 'mixins' as m;
+@use 'functions' as fn;
+@use 'vars';
+
+// 初始化
+html {
+  font-family: fn.use-var(font-family);
+  font-weight: normal;
+  color: fn.use-var(text-color, main);
+  line-height: 1.4;
+
+  @each $size in vars.$sizes {
+    &.#{$size} {
+      font-size: fn.use-var(font-size-main, $size);
+    }
+  }
+}
+
+body,
+ul,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+div,
+section,
+head,
+aside,
+body,
+main,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+article,
+button,
+input,
+textarea {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul {
+  padding: 0;
+}
+li {
+  list-style: none;
+}

package/src/theme/__test__/ui-theme.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+
+import { lightTheme } from '../light'
+import { UITheme } from '../ui-theme'
+
+describe('UITheme', () => {
+  it('themeToDeclarationList emits only --u-prefixed custom properties', () => {
+    const decls = lightTheme.themeToDeclarationList(lightTheme.theme)
+    expect(decls.some((d) => d.startsWith('--u-color-primary:'))).toBe(true)
+    for (const d of decls) {
+      const name = d.split(':')[0]?.trim()
+      if (!name) continue
+      expect(name.startsWith('--u-')).toBe(true)
+    }
+  })
+
+  it('setTheme toggles data-theme on documentElement', () => {
+    if (typeof document === 'undefined') return
+    const el = document.documentElement
+    UITheme.setTheme('dark')
+    expect(el.dataset.theme).toBe('dark')
+    UITheme.setTheme('light')
+    expect(el.dataset.theme).toBe('light')
+    UITheme.setTheme('auto')
+    expect(el.dataset.theme).toBeUndefined()
+  })
+})

package/src/theme/dark.ts

@@ -0,0 +1,38 @@
+import { lightTheme } from './light'
+
+export const darkTheme = lightTheme.new({
+  color: {
+    primary: '#4f8ff7',
+    success: '#52c41a',
+    warning: '#faad14',
+    danger: '#ff4d4f',
+    info: '#13c2c2',
+    disabled: '#212020',
+    default: '#595959'
+  },
+
+  bg: {
+    color: {
+      bottom: '#0f0f0f',
+      middle: '#1a1a1a',
+      top: '#262626',
+      hover: '#303030',
+      black: '#000000'
+    },
+    filter: { blur: 'blur(16px)', saturate: 'saturate(180%)' }
+  },
+
+  'text-color': {
+    title: '#f0f0f0',
+    main: '#d9d9d9',
+    second: '#a6a6a6',
+    placeholder: '#737373',
+    assist: '#595959',
+    disabled: '#434343',
+    white: '#ffffff'
+  },
+
+  border: { color: '#404040' },
+
+  shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0 }
+})