@birtycom/omniacs (英语)
OmniaCSS的公用事业——现代CSS(定位、容器查询、取景过渡、滚动驱动动画、, light-dark()作为工具类, 按需生成。 。 。 .
npm install -D @birdycom/omniacss
PostCSS / Vite / 拉拉维尔 设置 @omnia; 在您的 CSS 中:
// postcss.config.js
import omniacss from "@birdycom/omniacss/postcss";
export default { plugins: [omniacss({ content: ["src/**/*.{html,js,vue,tsx}"] })] };
与 欧姆尼亚乌伊 已安装, @omniaui; (在 @omnia;) 添加内容使用的组件、块和 Pro 块,用同样的方式,在 @layer omniaui。 。 。 . @omniaui components; 只有一个包.
引擎 API
import { buildCss } from "@birdycom/omniacss/engine";
const { css, stats } = await buildCss({ content: ["src/**/*.html"], layer: "omnia" });
全面建设(原型): import "@birdycom/omniacss" 调色板符号: @birdycom/omniacss/tokens 主题符号: @birdycom/omniacss/theme 常设委员会: @birdycom/omniacss/scss/*。 。 。 .
主题符号( 网络和桌面)
tokens/semantic.json 是语义主题的单一来源 : --oc-background, (中文(简体) ), --oc-foreground, (中文(简体) ),
--oc-primary, (中文(简体) ), --oc-border,互动状态 --oc-row-alt, (中文(简体) ), --oc-hover, (中文(简体) ), --oc-pressed, (中文(简体) ),
--oc-selected, (中文(简体) ), --oc-disabled-foreground附加时 --oc-radius, (中文(简体) ), --oc-focus-width,字体和阴影.
每种颜色都是奥姆尼亚调色板符号,光线第一,暗色第二.
-
网络 :
dist/oc-theme.css(装入后)oc-colors.css(b) ——light-dark()自定义属性。 OmniaUI以此为基础. -
桌面应用程序 (Tkinter, Qt, WinUI.): (中文(简体) )
dist/tokens/持有每个模式解决的同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同异同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同异同同同同同同同var()左, 如 sRGB 十六进制( Gamut 映射 CSS 颜色 4 方式, 不剪接), 来源oklch阿尔法, 和上面的 OmniaCSS 版本 :omnia.tokens.json—— 说{ omniacss, tokens: { background: { light: { hex, oklch }, dark: { … } }, radius: { px }, … } }omnia.dtcg.json——W3C设计. 托肯斯( 小于$value深处$extensions(中文(简体) )omnia_tokens.py—— 说PALETTES = {"light": {…}, "dark": {…}}, (中文(简体) ),SIZES, (中文(简体) ),TEXT, (中文(简体) ),FONTS, (中文(简体) ),SHADOWS, (中文(简体) ),font()
应用程序中的节点? 从 CDN 下载 :
https://unpkg.com/@birdycom/omniacss@<version>/dist/tokens/omnia_tokens.py。 。 。 . 有你自己的主题:npx omniacss tokens --source my-semantic.json --format python(见@birdycom/omniacss-cli) (中文(简体) ).
文档 : https://github.com/Birdycom/OmniaCSS#readme 页面存档备份,存于互联网档案馆 麻省理工学院