更新记录

0.0.1（2024-04-19）

• nap-scss alpha

平台兼容性

NAPDESIGN 辅助样式库

• 作为 nap ui 组件库的辅助样式，提供了组件的全局设计变量，以及组件中的CSS原子类
• 语雀文档

设计用途

• 1、自定义覆盖全局设计变量来整体修改nap-ui组件库的主题或外观（全局的设计变量是部分组件变量的依赖值）
• 2、当作原生开发的CSS原子类在项目中高效开发界面（哪怕不使用nap-ui任何组件）

更多说明

/**
 * nap-scss 辅助主题变量及辅助原子样式
 * 
 * 1、辅助主题变量：
 * ----文件路径：'@/uni_modules/nap-scss/vars/vars.scss'
 * ----必须在uni.scss文件内容的顶部@import，且路径中的 @/ 不可省略，否则报错（修正：4.12开始发现该问题已不存在了）
 * ----引入后才可以在业务样式中使用所有scss变量（包括色板变量），hbx代码助手不会联想提示这些通过文件引入的变量
 * 
 * 2、辅助原子样式：
 * ----文件路径：'@/uni_modules/nap-scss/styles/styles.scss'
 * ----部分原子类依赖主题变量var.scss，因此必须先按照上面的要求在uni.scss顶部引入
 * ----在APP.uvue的样式中@import，此时路径中的 @/ 可以省略
 * ----引入后可以在业务中使用相关原子类，涵盖了绝大部分官方文档所支持的原生css属性（不包括仅WEB端支持的属性）
 * ----小技巧：输入nap-，hbx代码助手会自动联想提示相关的class类名，windows按住alt键单击可跳转到定义处(mac按住option键)
 */
@import '@/uni_modules/nap-scss/vars/vars.scss';

/**
 * nap-design 自定义变量，实现主题定制
 * 通常来说，广义的主题不仅指主题颜色，也包括了尺寸间距圆角等其他影响视觉的因素，你可以视设计稿作出自定义调整
 * 以下细说的「xx主题变量」特指与主题相关的颜色变量
 * 目前仅提供「正常模式」和「暗黑模式」两套主题变量，不支持额外的内置动态主题，且这两种模式下都支持分别自定义配置
 * 
 * 1、「全局主题变量」：简称「全局变量」
 * ----全局变量包括了「色板取值变量」和「主题设计变量」，部分主题设计变量依赖于色板取值变量，其他如尺寸圆角等设计变量则无关
 * ----色板变量原则上不要自定义覆盖，可当作特殊颜色变量在页面样式中使用（如：大批量标签或流程状态需要视觉差异的场景中，无需再耽误UI设计而直接按变量命名模式取用即可）
 * 
 * 2、「组件主题变量」：简称「组件变量」
 * ----作为组件的直接控制变量，生效的优先级最高，即当一个组件变量依赖一个全局变量时，若同时自定义则最终生效的是组件变量
 * 
 * 3、「暗黑主题变量」：简称「暗黑变量」
 * ----暗黑变量也分为全局的和组件内的，组件内的暗黑变量可能依赖于全局的暗黑变量
 * ----在开启暗黑模式的前提下，如果自定义的两个暗黑变量之间存在依赖关系，最终生效的是组件内的暗黑变量
 * ----之所以组件内再细化暗黑变量，是为了支持更多样化的暗黑设计（目前所见的大厂应用，如微信，其图标在暗黑模式下依旧是多彩图标）
 * 
 * 4、「暗黑模式」：
 * ----关于暗黑模式的实现涉及面较广，比如颜色反转、动态主题、系统主题跟随、自定义组件及视图、特殊资源文件管理等
 * ----没有哪一个ui组件库能满足所有的用户需求，因此现实业务中的暗黑设计务必反复测试保证模式生效及用户体验最佳
 * ----组件库设计了一键暗黑模式的总开关（应用内持久化处理，值为布尔类型）；而单个组件又设计了props属性dark作为子开关（属性值为0|1|2）
 * ----当dark=1时强制正常模式，当dark=2时强制暗黑模式，当dark=0或不传时由总开关控制
 * 
 * 5、「灰度模式」：缅怀悼念事件场景
 * ----TODO
 */

// 实例
$nap-primary: #5E7CE0;