SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsveltra-styles

veltra-styles

Frontend & websites

View repository

Updated 10-15 17:30

About this skill

veltra-styles

Outputs

File Content
generated/theme-tokens.md Theme Types and light/dark preset TS
generated/scss-api.md _mixins、_functions、_vars full SCSS
generated/theme-ts-api.md UITheme、loadTheme、helper etc. TS
generated/manifest.json Sync time and output file list
references/theming-guide.md Quick start, dark mode, custom themes, component tokens

Run bun run sync-veltra-styles or bun run sync-skills to regenerate generated/。

Theme data flow (overview)

  1. Theme type（theme/type.ts) describes a nested token tree such as colors, font sizes, borders, etc.
  2. UITheme class（theme/ui-theme.ts) holds a theme object, flattens it into --u-* CSS variables and injects them into the document (built-in themes use injectBuiltInThemes, custom ones use render()）。
  3. loadTheme()（load-theme.ts) initializes on the browser side: registers light/dark by default, syncs useConfig document size class; optionally pass in custom UITheme。
  4. SCSS consumption：fn.use-var(...)、fn.component-var(...) generates var(--u-...), corresponding one-to-one with the injected variables.

BEM quick reference (@veltra/styles/mixins）

Under the premise of @use 'pkg:@veltra/styles/mixins' as m :

Mixin Generated class name example Typical use
@include m.b(name) .u-name Block root
@include m.e(el) &__el(located within the block) Element
@include m.m(mod) &--mod Modifier
@include m.is(state) .is-state State class

m.dark() etc. wrapped in generated/scss-api.md 's _mixins.scss to view the full text.

SCSS import trio

@use 'pkg:@veltra/styles/mixins' as m;
@use 'pkg:@veltra/styles/functions' as fn;
@use 'pkg:@veltra/styles/vars';

Consumer builds need Sass NodePackageImporterenabled (already configured in this repository's desktop / playground).

CSS variable helpers (functions）

  • fn.use-var(text-color, main) → var(--u-text-color-main)(the parameter is a token path fragment).
  • fn.component-var(button, height) → variables under the component namespace (for specific naming see Theme corresponding block).

For complete signatures and edge cases, refer to generated/scss-api.md .

TypeScript theme API quick reference

API Purpose
loadTheme(theme?) Inject theme; when no arguments are passed, use built-in light + dark presets
setTheme('light' | 'dark' | 'auto') Switch data-theme or follow the system
UITheme.new(partialTheme) / lightTheme.new(...) Derive a custom UITheme
currentTheme ShallowRef<UITheme | undefined>from a preset, the currently active theme instance

and @veltra/compositions interface

loadTheme internally uses useConfig to attach the global document size class to document.documentElement. Therefore @veltra/styles/theme at runtime depends on vue and @veltra/compositions；compositions packages must not export themeagain, to avoid circular dependencies (see root directory AGENTS.md package graph).

Further reading (legacy reference documentation)

and generated/ mirror each other: locate Sass, theme runtime, and build integration across repositories.

Maintenance

  • Authoritative source:packages/styles/src/(SCSS partial and theme/、load-theme.ts）。
  • After changing tokens or theme logic, run bun run sync-veltra-styles / sync-skills, and check whether the variable names in the desktop component SCSS are still aligned.