@aleph-alpha/config-unocss

配置 UnoCSS

@aleph-alpha/ config-unocss (英语)

Aleph Alpha 前端的共享 UnoCSS预设. 套装设计-系统令牌预设,web-fonts预设,以及内容-管道帮助器,这样每个应用程序和库都可以共享一个UnoCSS配置.

设计标志本身就住在 @aleph-alpha/config-tokens,且嵌入式网络字体在 @aleph-alpha/config-fonts;此软件包既消耗了两者,又将其暴露为UnoCSS预设.

安装

pnpm add -D @aleph-alpha/config-unocss

应用程序的使用

大多数应用程序只需要:

// uno.config.ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig();

defineAppConfig() 包装 defineConfig 从UnoCSS, 预线 presetsAlephAlpha() 和设计-系统内容路径,并曝光用于应用特定扩展的钩.

上层

import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig({
  // Extra presets appended after the defaults
  presets: [/* presetMyApp() */],

  // Extra rules — e.g. local workarounds or brand utilities
  rules: [
    ['my-rule', { color: 'red' }],
  ],

  // Theme overrides — merged into the base theme
  theme: {
    breakpoints: { xs: '480px' },
    colors: { 'brand-bg-brand': '#CCE804' },
  },

  // Pull classes out of additional node_modules packages.
  // filesystem and pipeline.include are union-merged with the DS defaults.
  content: {
    filesystem: ['node_modules/@my-org/some-lib/**/*'],
  },

  // Pass-through options — anything `defineConfig` accepts
  shortcuts: { /* ... */ },
  safelist: [/* ... */],
  transformers: [/* ... */],
});

手动编译( 图书馆、 高级应用程序)

import { defineConfig } from 'unocss';
import { presetsAlephAlpha, getDesignSystemContentPathConfig } from '@aleph-alpha/config-unocss';

export default defineConfig({
  presets: [...presetsAlephAlpha()],
  ...getDesignSystemContentPathConfig('vue'),
});

来自遗产的移徙 @aleph-alpha/config-css

在此之前 (~11行):

import {
  getDesignSystemContentPathConfig,
  presetAlephAlpha,
} from '@aleph-alpha/config-css';
import { defineConfig } from 'unocss';

export default defineConfig({
  ...getDesignSystemContentPathConfig('vue'),
  presets: [presetAlephAlpha()],
});

之后 (3行):

import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig();

拥有自己品牌颜色的Apps通过 theme 选项。 您在此列出的颜色在设计- 系统符号上方被深深地浮出水面—— 只有您设定的密钥被覆盖, 其他的符号调色板仍然可用 :

import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig({
  theme: {
    colors: {
      'brand-bg-brand': '#CCE804',
      'core-bg-accent': '#555CF9',
    },
  },
});

附加UNOCSS预设(如:. presetTypography)或变压器(例如. transformerDirectives 页:1 @apply把它压上 presets 财务报告和审定财务报表 transformers数字 :

import { defineAppConfig } from '@aleph-alpha/config-unocss';
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';
import { presetTypography, transformerDirectives } from 'unocss';

export default defineAppConfig({
  presets: [presetAlephAlphaIcons(), presetTypography()],
  theme: {
    breakpoints: { xs: '480px', sm: '640px', md: '768px', lg: '1024px' },
    colors: { 'brand-bg-brand': '#CCE804' },
  },
  transformers: [transformerDirectives()],
});

包裹主题的 Apps 在自己的预设中覆盖(definePreset保持这种模式不变—— defineAppConfig 接受在默认情况下预设的 UnoCSS :

import { defineAppConfig } from '@aleph-alpha/config-unocss';
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';
import { definePreset } from 'unocss';

const presetMyAppTheme = definePreset(() => ({
  name: 'my-app-theme',
  theme: { colors: { 'core-bg-primary': '#FBFBFD' } },
}));

export default defineAppConfig({
  presets: [presetAlephAlphaIcons(), presetMyAppTheme()],
});

带有本地工作环的应用程序(如:特定符号的α-hex修正、年龄较大的间隔预设shims) ds-components-vue (各版本)保持本地化,并通过 presets 或者说 rules数字 :

import { defineAppConfig } from '@aleph-alpha/config-unocss';
import { alphaFixRules } from './local-alpha-fix';

export default defineAppConfig({
  rules: alphaFixRules,
});

iQQ 遗产 presetAlephAlpha() (单方)不再出口——切换到 defineAppConfig() 如上所示。 如果您需要自定义的原始预设堆栈 defineConfig复数 presetsAlephAlpha() (见 手工编译) (中文(简体) ).

出口

• defineAppConfig(options?) - 面向应用 defineConfig 包装、捆绑 presetsAlephAlpha() + 设计-系统内容路径.
• presetsAlephAlpha() ——完整预设堆栈(Wind,Typography,web字体,动画,符号,主题,遗产相配).
• tokenPreset ——只有设计-系统符号预设(CSS变量,主题映射).
• commonPresets ——"风"+"打字"+"网络字体"+"动画",无符号.
• createPresets() ——令牌预设 + 暗相模式主题预设 + 遗留相配预设.
• getDesignSystemContentPathConfig(framework) ——用于扫描的内容管道配置 @aleph-alpha/ds-components-vue 或者说 -svelte。 。 。 .
• Theme ——TypeScript主题类型由设计符所衍生出.
• AppConfigOptions - 脚本类型 defineAppConfig。 。 。 .
• presetWebFontsAlephAlpha ——内置 @font-face (c) 蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特的《规则》.