global

这是一个

基于 CSS 变量的
固执己见的
Microsoft Edge 优先的
试作型 纯 stylus 套件

所有 css 变量名都是定语后置的，就像方言里把公鸡叫做鸡公，例如 --color-button:disabled

## install

pnpm i @nanarino/stylus

## import

在 css 里全局引入

@import url('@nanarino/stylus')

或者在 js 里全局引入

import '@nanarino/stylus'

按需引入需要你熟悉源码（bushi🤣

比如你只是使用按钮，你需要在 stylus 代码里引入如下

// 覆写函数和定义常量
@require '@nanarino/stylus/lib/mixins/*'
// 定义 CSS 变量
@require '@nanarino/stylus/lib/variables/*'
// 设置兜底字体
@require '@nanarino/stylus/lib/common/font'
// 设置默认主题色
@require '@nanarino/stylus/lib/primary'
// 引入按钮
@require '@nanarino/stylus/lib/components/button'

## data-theme

主题变量 theme: 'light'|'dark'
它保存在 document.documentElement.dataset 和 localStorage 里

使用本文档右上角可以快捷切换主题

## color

全局变量

• 纯黑 --black
• 纯白 --white

其他的颜色 各自有10个明度等级 都是RGB值：

### data-primary

[data-primary] 可以让有颜色的标签改变为以下4种目标颜色之一。

• [data-primary]
• [data-primary=success]
• [data-primary=danger]
• [data-primary=warning]

需要 [data-primary] 才可以额外获得主题色的组件往往具有局部变量，如 button 的 --color-button
不需要 [data-primary] 就具备主题色的组件往往具有全局变量，如 tag 的 --color-tag

如何自订主題色 参考: custom.styl

如何与其他框架联动 参考 custom @nanarino/stylus with tdesign

## shadow

• 通配变量 --box-shadow-color 阴影颜色RGB值，默认是 --gray-4 这里是 --primary-4

以下也都是通配变量

## message

往 body>.na-message-queue 里 append 以下元素即可显示消息

• --background-color-message 局部变量 改变消息背景色RGB

.na-message(data-primary style={
    "--background-color-message": 'var(--magenta-5)',
    "--box-shadow-color": 'var(--magenta-4)'
})
    p.na-paragraph
        svg.na-message-prefix
        span 发射成功

对于本文档页面的消息使用的是：添加元素后再定期移除。

## z-index