@veltra/styles 1.0.0

package/src/theme/helper.ts

@@ -0,0 +1,58 @@
+import type { RGBColor } from './type'
+
+/** 实现十六进制颜色转RGB颜色，包括透明度 */
+export function HEXToRGB(color: string): RGBColor {
+  // 移除可能存在的 '#' 前缀
+  let hex = color.replace(/^#/, '')
+  let [r, g, b] = [0, 0, 0]
+
+  if (hex.length === 3) {
+    const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]
+    hex = `${r10}${r10}${g10}${g10}${b10}${b10}`
+  }
+
+  r = parseInt(hex.slice(0, 2), 16)
+  g = parseInt(hex.slice(2, 4), 16)
+  b = parseInt(hex.slice(4, 6), 16)
+
+  return [r, g, b]
+}
+
+/**
+ * 混合两个颜色，并返回混合结果的十六进制表示。
+ * @param color1 - 第一个颜色，格式为`#RRGGBB`。
+ * @param color2 - 第二个颜色，格式为`#RRGGBB`。
+ * @param ratio - 颜色混合的比例，取值范围为0到1。
+ * @returns 混合结果的十六进制表示。
+ */
+export function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {
+  if (ratio > 1) throw new Error('ratio的值在0-1之间')
+  const color1RGB = HEXToRGB(color1)
+  const color2RGB = HEXToRGB(color2)
+
+  const color1Ratio = 1 - ratio
+
+  return (
+    '#' +
+    color1RGB
+      .map((n, i) => {
+        const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+      })
+      .join('')
+  )
+}
+
+export function defineBySize(
+  variable: Record<'small' | 'default' | 'large', number>
+): Record<'small' | 'default' | 'large', number> {
+  return variable
+}
+
+/**
+ * 引用全局主题 CSS 变量（`--u-*` 命名空间）
+ * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`
+ */
+export function cssVar(prop: string): string {
+  return `var(--u-${prop})`
+}

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+export { UITheme } from './ui-theme'
+export { lightTheme } from './light'
+export { darkTheme } from './dark'
+export type * from './type'
+export { cssVar, defineBySize, HEXToRGB, mixColor } from './helper'
+export { currentTheme, loadTheme, setTheme } from '../load-theme'

package/src/theme/light.ts

@@ -0,0 +1,60 @@
+import { defineBySize } from './helper'
+import { UITheme } from './ui-theme'
+
+export const lightTheme: UITheme = new UITheme(
+  {
+    color: {
+      primary: '#1E88E5',
+      success: '#2ba471',
+      warning: '#e37318',
+      danger: '#d54941',
+      info: '#009688',
+      disabled: '#f5f7fa',
+      default: '#f1f5f9'
+    },
+
+    bg: {
+      color: {
+        bottom: '#f5f5f5',
+        middle: '#fafafa',
+        top: '#ffffff',
+        hover: '#f5f7fa',
+        black: '#000000'
+      },
+
+      filter: { blur: 'blur(16px)', saturate: 'saturate(180%)' }
+    },
+
+    border: { color: '#dcdfe6', width: 1, style: 'solid' },
+
+    'text-color': {
+      title: '#303133',
+      main: '#606266',
+      placeholder: '#a8abb2',
+      second: '#979797',
+      assist: '#c0c4cc',
+      disabled: '#a8abb2',
+      white: '#fff'
+    },
+
+    radius: defineBySize({ small: 4, default: 6, large: 8 }),
+
+    'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),
+
+    'font-family':
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+
+    'font-size-title': defineBySize({ small: 16, default: 16, large: 18 }),
+
+    'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),
+
+    'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),
+
+    shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1 },
+
+    gap: defineBySize({ small: 6, default: 8, large: 12 }),
+
+    breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 }
+  },
+  { reactive: false }
+)

package/src/theme/type.ts

@@ -0,0 +1,156 @@
+/**
+ * RGB颜色[红,绿,蓝]
+ */
+export type RGBColor = [number, number, number]
+
+/** 仅含全局 token；组件级 token 由各组件 SCSS 以 `--u-{component}-*` 声明 */
+export type Theme = {
+  /** 主题色 */
+  color: {
+    /** 主要颜色 */
+    primary: string
+    /** 成功颜色 */
+    success: string
+    /** 警告颜色 */
+    warning: string
+    /** 危险颜色 */
+    danger: string
+    /** 信息颜色 */
+    info: string
+    /** 禁用颜色 */
+    disabled: string
+    /** 默认颜色 */
+    default: string
+  }
+  /** 背景 */
+  bg: {
+    /** 背景色 */
+    color: {
+      /** 底部背景色 */
+      bottom: string
+      /** 中部背景色 */
+      middle: string
+      /** 顶部背景色 */
+      top: string
+      /** 悬停背景色 */
+      hover: string
+      /** 黑色背景 */
+      black: string
+    }
+
+    filter: {
+      /** 背景模糊 */
+      blur: string
+      /** 背景饱和度 */
+      saturate: string
+    }
+  }
+
+  border: {
+    /** 边框颜色 */
+    color: string
+    /** 边框宽度 */
+    width: number
+    /** 边框样式 */
+    style: string
+  }
+
+  /** 文字色 */
+  'text-color': {
+    /** 标题文字颜色 */
+    title: string
+    /** 主要文字颜色 */
+    main: string
+    /** 占位符文字颜色 */
+    placeholder: string
+    /** 次要文字颜色 */
+    second: string
+    /** 辅助文字颜色 */
+    assist: string
+    /** 禁用文字颜色 */
+    disabled: string
+    /** 白色文字 */
+    white: string
+  }
+  /** 圆角大小 */
+  radius: {
+    /** 小圆角 */
+    small: number
+    /** 默认圆角 */
+    default: number
+    /** 大圆角 */
+    large: number
+  }
+  /** 表单组件高度 */
+  'form-component-height': {
+    /** 小尺寸表单组件高度 */
+    small: number
+    /** 默认尺寸表单组件高度 */
+    default: number
+    /** 大尺寸表单组件高度 */
+    large: number
+  }
+
+  /** 字体族 */
+  'font-family': string
+  /** 标题字体大小 */
+  'font-size-title': {
+    /** 小尺寸标题字体 */
+    small: number
+    /** 默认尺寸标题字体 */
+    default: number
+    /** 大尺寸标题字体 */
+    large: number
+  }
+  /** 正文字体大小 */
+  'font-size-main': {
+    /** 小尺寸正文字体 */
+    small: number
+    /** 默认尺寸正文字体 */
+    default: number
+    /** 大尺寸正文字体 */
+    large: number
+  }
+  /** 辅助文字字体大小 */
+  'font-size-assist': {
+    /** 小尺寸辅助文字字体 */
+    small: number
+    /** 默认尺寸辅助文字字体 */
+    default: number
+    /** 大尺寸辅助文字字体 */
+    large: number
+  }
+  /** 阴影 */
+  shadow: {
+    /** 阴影颜色 */
+    color: string
+    /** 阴影水平偏移 */
+    x: number
+    /** 阴影垂直偏移 */
+    y: number
+    /** 阴影模糊半径 */
+    blur: number
+    /** 阴影扩散半径 */
+    spread: number
+  }
+  /** 间距 */
+  gap: {
+    /** 小间距 */
+    small: number
+    /** 默认间距 */
+    default: number
+    /** 大间距 */
+    large: number
+  }
+  /** 断点 */
+  breakpoint: {
+    /** 超小屏幕断点 */
+    xs: number
+    /** 小屏幕断点 */
+    sm: number
+    /** 中等屏幕断点 */
+    md: number
+    /** 大屏幕断点 */
+    lg: number
+  }
+}

package/src/theme/ui-theme.ts

@@ -0,0 +1,265 @@
+import { isObj, o, str } from '@cat-kit/core'
+import { withUnit } from '@veltra/utils'
+import { reactive, toRaw, watch } from 'vue'
+
+import { mixColor } from './helper'
+import type { Theme } from './type'
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]
+}
+
+function isDevEnv(): boolean {
+  try {
+    if (typeof import.meta !== 'undefined') {
+      const env = (import.meta as { env?: { DEV?: boolean } }).env
+      if (env?.DEV === true) return true
+    }
+  } catch {
+    /* ignore */
+  }
+  const proc = (globalThis as { process?: { env?: Record<string, string | undefined> } }).process
+  return typeof proc !== 'undefined' && proc.env?.NODE_ENV !== 'production'
+}
+
+export class UITheme {
+  static themeID = 'ultra-ui-theme'
+
+  private static legacyDeprecationWarned = false
+
+  private static adoptedSheet: CSSStyleSheet | null = null
+
+  readonly theme: Theme
+
+  private readonly reactiveEnabled: boolean
+
+  constructor(theme: Theme, options?: { reactive?: boolean }) {
+    this.reactiveEnabled = options?.reactive !== false
+    this.theme = reactive(theme) as Theme
+    if (this.reactiveEnabled) {
+      watch(this.theme, () => this.render(), { deep: true })
+    }
+  }
+
+  static setTheme(mode: 'light' | 'dark' | 'auto'): void {
+    if (typeof document === 'undefined') return
+    const el = document.documentElement
+    if (mode === 'auto') {
+      delete el.dataset.theme
+    } else {
+      el.dataset.theme = mode
+    }
+  }
+
+  private renderBase(
+    theme: Record<string, unknown>,
+    themeRules: string[] = [],
+    parentKey = '--u'
+  ): string[] {
+    Object.keys(theme).forEach((key) => {
+      const value = theme[key]
+      const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`
+      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        this.renderBase(value as Record<string, unknown>, themeRules, varKey)
+      } else {
+        if (value || value === 0) {
+          const v = withUnit(value as number | string, 'px')
+          if (v !== undefined) {
+            themeRules.push(`${varKey}: ${v}`)
+          }
+        }
+      }
+    })
+
+    return themeRules
+  }
+
+  private renderBorder(theme: Theme): string {
+    const border = Object.keys(theme.border)
+      .map((key) => `var(--u-border-${key})`)
+      .join(' ')
+
+    return `--u-border: ${border}`
+  }
+
+  private renderTypeColor(theme: Theme): string {
+    const { color } = theme
+
+    const types = Object.keys(color)
+    const rates = [1, 3, 5, 7, 9]
+
+    return types
+      .map((type) => {
+        const colorValue = color[type as keyof typeof color]! as `#${string}`
+
+        return rates
+          .map((rate) => {
+            const light = `--u-color-${type}-light-${rate}: ${mixColor(
+              colorValue,
+              '#fff',
+              rate / 10
+            )}`
+            const dark = `--u-color-${type}-dark-${rate}: ${mixColor(
+              colorValue,
+              '#000',
+              rate / 10
+            )}`
+            return `${light};${dark}`
+          })
+          .join(';')
+      })
+      .join(';')
+  }
+
+  private renderShadow(_theme: Theme): string {
+    const shadow = ['x', 'y', 'blur', 'spread', 'color']
+      .map((k) => `var(--u-shadow-${k})`)
+      .join(' ')
+
+    return `--u-shadow: ${shadow}`
+  }
+
+  private renderBGColorAlpha(theme: Theme): string {
+    const { color } = theme.bg
+    return Object.keys(color)
+      .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)
+      .join(';')
+  }
+
+  private renderBGFilter(theme: Theme): string {
+    const { filter } = theme.bg
+    return `--u-bg-filter: ${filter.blur} ${filter.saturate}`
+  }
+
+  /** 主题变量声明（不含 legacy 副本） */
+  themeToDeclarationList(theme: Theme): string[] {
+    const raw = theme as unknown as Record<string, unknown>
+    const lines: string[] = [...this.renderBase(raw)]
+    const chunks = [
+      this.renderTypeColor(theme),
+      this.renderShadow(theme),
+      this.renderBGColorAlpha(theme),
+      this.renderBGFilter(theme),
+      this.renderBorder(theme)
+    ]
+    for (const c of chunks) {
+      lines.push(
+        ...c
+          .split(';')
+          .map((s) => s.trim())
+          .filter(Boolean)
+      )
+    }
+    return lines
+  }
+
+  private static withLegacyDuplicates(decls: string[]): string {
+    const legacy: string[] = []
+    for (const decl of decls) {
+      const idx = decl.indexOf(':')
+      if (idx === -1) continue
+      const name = decl.slice(0, idx).trim()
+      const value = decl.slice(idx + 1).trim()
+      if (name.startsWith('--u-')) {
+        legacy.push(`--${name.slice(4)}: ${value}`)
+      }
+    }
+    return [...decls, ...legacy].join(';')
+  }
+
+  private static warnLegacyOnce(): void {
+    if (!isDevEnv() || UITheme.legacyDeprecationWarned) return
+    UITheme.legacyDeprecationWarned = true
+    console.warn(
+      '[@veltra/styles] Theme CSS variables now prefer the `--u-` namespace. ' +
+        'Unprefixed aliases (e.g. `--color-primary`) are deprecated and will be removed in a future major version.'
+    )
+  }
+
+  private static declarationBlock(decls: string[]): string {
+    const merged = UITheme.withLegacyDuplicates(decls)
+    UITheme.warnLegacyOnce()
+    return merged
+  }
+
+  private static removeExistingStyleTag(doc: Document): void {
+    const el = doc.getElementById(UITheme.themeID)
+    if (el?.parentNode) {
+      el.parentNode.removeChild(el)
+    }
+  }
+
+  private static applyGlobalCSS(css: string): void {
+    const doc = typeof document !== 'undefined' ? document : undefined
+    if (!doc) return
+
+    const canAdopt =
+      typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype
+
+    if (canAdopt) {
+      UITheme.removeExistingStyleTag(doc)
+      if (!UITheme.adoptedSheet) {
+        UITheme.adoptedSheet = new CSSStyleSheet()
+        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]
+      }
+      UITheme.adoptedSheet.replaceSync(css)
+    } else {
+      if (UITheme.adoptedSheet) {
+        UITheme.adoptedSheet = null
+      }
+      let style = doc.getElementById(UITheme.themeID)
+      if (!style) {
+        style = doc.createElement('style')
+        style.id = UITheme.themeID
+        doc.head.appendChild(style)
+      }
+      style.textContent = css
+    }
+  }
+
+  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */
+  static injectBuiltInThemes(light: UITheme, dark: UITheme): void {
+    const lightDecls = light.themeToDeclarationList(toRaw(light.theme))
+    const darkDecls = dark.themeToDeclarationList(toRaw(dark.theme))
+    const lightBlock = UITheme.declarationBlock(lightDecls)
+    const darkBlock = UITheme.declarationBlock(darkDecls)
+
+    const css = [
+      `html { ${lightBlock} }`,
+      `@media (prefers-color-scheme: dark) {`,
+      `  html:not([data-theme="light"]) { ${darkBlock} }`,
+      `}`,
+      `html[data-theme="light"] { ${lightBlock} }`,
+      `html[data-theme="dark"] { ${darkBlock} }`
+    ].join('\n')
+
+    UITheme.applyGlobalCSS(css)
+  }
+
+  render(): void {
+    const decls = this.themeToDeclarationList(toRaw(this.theme))
+    const block = UITheme.declarationBlock(decls)
+    const css = `html { ${block} }`
+    UITheme.applyGlobalCSS(css)
+  }
+
+  new(customTheme: RecursivePartial<Theme> = {}): UITheme {
+    function delEmpty(obj: Record<string, unknown>) {
+      Object.keys(obj).forEach((key) => {
+        const value = obj[key]
+        if (isObj(value)) {
+          return delEmpty(value as Record<string, unknown>)
+        }
+        if (!value && value !== 0) {
+          delete obj[key]
+        }
+      })
+    }
+
+    delEmpty(customTheme as Record<string, unknown>)
+
+    const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>
+    o(base).deepExtend(customTheme as Record<string, any>)
+    return new UITheme(base as Theme, { reactive: this.reactiveEnabled })
+  }
+}