newcp-theme 1.0.0

package/dist/internal-scss/variables.scss

@@ -0,0 +1,70 @@
+// ==================== 变量定义 ====================
+
+// 全局padding
+$padding: 10px;
+//阴影色
+$shadow-color: rgba(0, 0, 0, 0.1);
+//蒙板色
+$mask-color: #000;
+
+// 主背景色
+$bg-color: #ffffff;
+// 文字主色
+$fore-color: #303030;
+// 边框颜色
+$border-color: #dcdfe6;
+
+//主题前景色
+$theme-fore: #ffffff;
+// 主题颜色
+$colmap: (
+    primary: #409eff,
+    success: #67c23a,
+    warning: #e6a23c,
+    danger: #f56c6c,
+    info: #909399,
+  );
+
+$disabled-text-color: var(--nc-bg-color-9);
+
+$disabled-border-color: var(--nc-bg-color-3);
+
+$bg-colhover: var(--nc-bg-color-2);
+
+//border
+$border-width: 1px;
+$border-radius: 4px;
+$border-radius-round: 20px;
+
+$border-style: solid;
+
+//字体大小
+$font-size: 10px;
+
+//zindex
+$popup-zindex: 1000;
+$modal-zindex: 1000;
+$drawer-zindex: 1000;
+$notification-zindex: 1000;
+$message-zindex: 1001;
+$pop-zindex: 1002;
+
+// 字体
+$font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
+$font-weight: 400;
+
+// 动画
+$transition-duration: 0.2s;
+$transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+$transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+
+$transition-all: all $transition-duration $transition-function-ease-in-out-bezier;
+$transition-fade: opacity $transition-duration $transition-function-fast-bezier;
+$transition-md-fade: transform $transition-duration $transition-function-fast-bezier, opacity $transition-duration $transition-function-fast-bezier;
+$transition-fade-linear: opacity $transition-duration linear;
+$transition-border: border-color $transition-duration $transition-function-ease-in-out-bezier;
+$transition-box-shadow: box-shadow $transition-duration $transition-function-ease-in-out-bezier;
+$transition-color: color $transition-duration $transition-function-ease-in-out-bezier;
+
+// scrollbar
+$scrollbar-width: 3px;

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "newcp-theme",
+  "version": "1.0.0",
+  "description": "原生web component组件库-样式主题配置工具",
+  "main": "dist/index.js",
+  "bin": {
+    "newcp-theme": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc && mkdir dist\\internal-scss 2>nul && xcopy src\\internal-scss\\* dist\\internal-scss\\ /E /H /Y /Q && xcopy src\\default-config.ts dist\\ /Y",
+    "start": "node dist/index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "commander": "^14.0.3",
+    "sass": "^1.98.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/sass": "^1.43.1",
+    "typescript": "^6.0.2"
+  }
+}

package/src/default-config.ts

@@ -0,0 +1,60 @@
+// NC UI 主题默认配置
+// 所有可自定义的 SCSS 变量均在此处，修改后执行编译命令即可生效，请勿修改变量名
+export const defaultConfig = {
+  // ==================== 基础样式变量 ====================
+  "$padding": "10px", // 全局默认内边距
+  "$shadow-color": "rgba(0, 0, 0, 0.1)", // 全局阴影颜色
+  "$mask-color": "#000", // 全局遮罩层背景色
+  "$bg-color": "#ffffff", // 页面/组件主背景色
+  "$fore-color": "#303030", // 页面/组件主文字色
+  "$border-color": "#dcdfe6", // 全局基础边框色
+  "$theme-fore": "#ffffff", // 主题文字前景色
+
+  // ==================== 五大主题色：主色、成功、警告、危险、信息 ====================
+  "$colmap": `(
+    primary: #409eff,
+    success: #67c23a,
+    warning: #e6a23c,
+    danger: #f56c6c,
+    info: #909399,
+  )`,
+
+  // ==================== 禁用状态 ====================
+  "$disabled-text-color": "var(--nc-bg-color-9)", // 禁用状态文字颜色
+  "$disabled-border-color": "var(--nc-bg-color-3)", // 禁用状态边框颜色
+  "$bg-colhover": "var(--nc-bg-color-2)", // 元素hover背景色
+
+  // ==================== 边框相关 ====================
+  "$border-width": "1px", // 全局边框宽度
+  "$border-radius": "4px", // 基础圆角大小
+  "$border-radius-round": "20px", // 圆形/胶囊形圆角
+  "$border-style": "solid", // 全局边框样式（实线/虚线等）
+
+  // ==================== 字体相关 ====================
+  "$font-size": "10px", // 基础字号（基准值）
+  "$font-family": "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif", // 全局字体
+  "$font-weight": 400, // 基础字重
+
+  // ==================== z-index 层级 ====================
+  "$popup-zindex": 1000, // 弹出层基础层级
+  "$modal-zindex": 1000, // 模态框层级
+  "$drawer-zindex": 1000, // 抽屉弹窗层级
+  "$notification-zindex": 1000, // 通知提示层级
+  "$message-zindex": 1001, // 消息提示层级
+  "$pop-zindex": 1002, // 气泡/弹出框层级
+
+  // ==================== 动画 / 过渡 ====================
+  "$transition-duration": "0.2s", // 基础过渡动画时长
+  "$transition-function-ease-in-out-bezier": "cubic-bezier(0.645, 0.045, 0.355, 1)", // 缓动函数（先慢后快再慢）
+  "$transition-function-fast-bezier": "cubic-bezier(0.23, 1, 0.32, 1)", // 快速缓动函数
+  "$transition-all": "all $transition-duration $transition-function-ease-in-out-bezier", // 全局统一过渡动画
+  "$transition-fade": "opacity $transition-duration $transition-function-fast-bezier", // 淡入淡出动画
+  "$transition-md-fade": "transform $transition-duration $transition-function-fast-bezier, opacity $transition-duration $transition-function-fast-bezier", // 位移+淡入淡出组合动画
+  "$transition-fade-linear": "opacity $transition-duration linear", // 线性淡入淡出
+  "$transition-border": "border-color $transition-duration $transition-function-ease-in-out-bezier", // 边框色过渡动画
+  "$transition-box-shadow": "box-shadow $transition-duration $transition-function-ease-in-out-bezier", // 阴影过渡动画
+  "$transition-color": "color $transition-duration $transition-function-ease-in-out-bezier", // 文字色过渡动画
+
+  // ==================== 滚动条 ====================
+  "$scrollbar-width": "3px", // 滚动条宽度
+};

package/src/index.ts

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import fs from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+
+const program = new Command();
+
+program
+  .name('newcp-theme')
+  .version('1.0.0')
+  .description('NC 主题编译 CLI 工具');
+
+// ==============================================
+// 1. init 命令：生成 theme.config.ts
+// ==============================================
+program
+  .command('init')
+  .description('生成主题配置文件 theme.config.ts')
+  .action(() => {
+    // 1. 读取默认配置文件的原始内容
+    const templatePath = path.resolve(__dirname, 'default-config.ts');
+    let content = fs.readFileSync(templatePath, 'utf8');
+
+    // 2. 把 export const 改成 export default （给用户用）
+    content = content.replace('export const defaultConfig =', 'export default');
+
+    // 3. 写入到用户目录
+    const targetPath = path.resolve(process.cwd(), 'theme.config.ts');
+    fs.writeFileSync(targetPath, content, 'utf8');
+
+    console.log('✅ 主题配置文件 theme.config.ts 生成成功！\n');
+    console.log('🔧 修改主题配置文件后执行：newcp-theme build 可生成专属你的CSS样式文件！');
+  });
+
+// ==============================================
+// 2. build 命令
+// ==============================================
+program
+  .command('build')
+  .description('编译主题变量并生成 CSS')
+  .action(async () => {
+    const cwd = process.cwd();
+    const internalScssDir = path.resolve(__dirname, 'internal-scss');
+    const tempDir = path.resolve(cwd, '.newcp-temp');
+
+    try {
+      console.log('📖 读取主题配置...\n');
+
+      // 1. 创建临时目录
+      if (!fs.existsSync(tempDir)) {
+        fs.mkdirSync(tempDir);
+      }
+
+      // 2. 复制所有内置 SCSS 到临时目录
+      const scssFiles = fs.readdirSync(internalScssDir);
+      for (const file of scssFiles) {
+        const src = path.join(internalScssDir, file);
+        const dest = path.join(tempDir, file);
+        fs.copyFileSync(src, dest);
+      }
+
+      // 3. 读取用户配置
+      const configPath = path.join(cwd, 'theme.config.ts');
+      if (!fs.existsSync(configPath)) {
+        console.log('❌ 错误：未找到主题配置文件theme.config.ts，请先执行 newcp-theme init');
+        return;
+      }
+
+      // ==============================================
+      // 安全读取 TS 文件
+      // ==============================================
+      const content = fs.readFileSync(configPath, 'utf8');
+      const match = content.match(/export default([\s\S]*);/);
+      const userConfig = eval('(' + match[1] + ')');
+
+      // 4. 读取内置 variables.scss
+      const scssFilePath = path.join(tempDir, 'variables.scss');
+      let scssContent = fs.readFileSync(scssFilePath, 'utf8');
+
+      console.log('🔁 正在替换SCSS样式文件中变量的值...\n');
+
+      // 5. 变量替换逻辑
+      let flag = 0;
+      for (const [key, newValue] of Object.entries(userConfig)) {
+        const regex = new RegExp(`\\${key}:\\s*([\\s\\S]*?);`);
+        const match = regex.exec(scssContent);
+
+        if (match) {
+          let oldValue = match[1].trim();
+          let newStr = String(newValue).trim();
+          const oldClean = oldValue.replace(/\s+/g, '');
+          const newClean = newStr.replace(/\s+/g, '');
+
+          if (oldClean !== newClean) {
+            flag = 1;
+            console.log(`✅ 已修改的变量：${key}`);
+            console.log(`   旧值：${oldValue}`);
+            console.log(`   新值：${newValue}\n`);
+            scssContent = scssContent.replace(regex, `${key}: ${newValue};`);
+          }
+        }
+      }
+      if (flag===0) {
+        console.log("✅ 暂无变量进行了修改！\n");
+      }
+
+      // 6. 写入修改后的 variables.scss
+      fs.writeFileSync(scssFilePath, scssContent, 'utf8');
+      console.log('✅ SCSS样式文件更新完成！\n');
+
+      // 7. 编译
+      console.log('🔨 正在编译SCSS样式文件 ...\n');
+      execSync('sass cssvariables.scss variables.css', {
+        stdio: 'inherit',
+        cwd: tempDir,
+      });
+
+      // 8. 把生成的 variables.css 移到用户目录
+      const generatedCss = path.join(tempDir, 'variables.css');
+      const targetCss = path.join(cwd, 'variables.css');
+      fs.copyFileSync(generatedCss, targetCss);
+
+      console.log('🎉 编译成功！CSS样式文件 variables.css 已生成！');
+    } catch (err) {
+      console.error('❌ 编译失败：', err);
+    } finally {
+      // 强制清理临时文件夹，无论成功失败
+      if (fs.existsSync(tempDir)) {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+      }
+    }
+  });
+
+program.parse();

package/src/internal-scss/animation.scss

@@ -0,0 +1,48 @@
+// _animations.scss（动画模块）
+
+// fadeIn
+@mixin fadeIn {
+  // 封装动画调用（可选，推荐）
+  animation: fadeIn var(--nc-transition-duration-1) ease;
+}
+
+// 定义淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@mixin fadeOut {
+  animation: fadeOut var(--nc-transition-duration-1) ease;
+}
+// fadeOut
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@mixin slideIn {
+  // 封装动画调用（可选，推荐）
+  animation: slideIn var(--nc-transition-duration-1) ease;
+}
+// slideIn
+@keyframes slideIn {
+  from {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

package/src/internal-scss/cssvariables.scss

@@ -0,0 +1,139 @@
+@use "./variables.scss" as v;
+@use "./function.scss" as f;
+@use "./global.scss" as g;
+
+/**
+ * 颜色说明： 
+ * placeholder:
+ *  color:var(--nc--fore-color-5);
+ * disabled:
+ * background-color: var(--nc-bg-color-2);
+ * border-color: var(--nc-bg-color-3);
+ * color: var(--nc-bg-color-9);
+ * hover:
+ *   background-color: var(--nc-bg-color-5);
+ *   color: var(--nc--fore-color-0);
+ * selected:
+ *  background-color:var(--nc-primary-light-9);
+ *  color:var(--nc-primary-light-0);  
+ */
+:root {
+  //阴影色
+  --nc-shadow-color: #{v.$shadow-color};
+  //蒙板色
+  --nc-mask-color: #{v.$mask-color};
+  //1-10级背景色、前景色
+  @for $i from 0 through 9 {
+    $bg: v.$bg-color;
+    $fore: v.$fore-color;
+    @if f.is-darktheme() {
+      $bg: f.getcolor(v.$bg-color, l, 0.2 * $i);
+      $fore: f.getcolor(v.$fore-color, d, 0.5 * $i);
+    } @else {
+      $bg: f.getcolor(v.$bg-color, d, 0.2 * $i);
+      $fore: f.getcolor(v.$fore-color, l, 0.5 * $i);
+    }
+    --nc-bg-color-#{$i}: #{$bg};
+    --nc-fore-color-#{$i}: #{$fore};
+  }
+
+  --nc-theme-fore: #{v.$theme-fore};
+  //1-10级 primary、success、warn、danger、info theme  light和dark
+  $themes: primary success warning danger info;
+  @each $theme in $themes {
+    @for $i from 0 through 9 {
+      --nc-#{$theme}-light-#{$i}: #{f.getthemecolor($theme, l, $i)};
+      --nc-#{$theme}-dark-#{$i}: #{f.getthemecolor($theme, d, $i)};
+    }
+  }
+
+  //font family
+  --nc-font-family: #{v.$font-family};
+  //字体大小 基础10px，依次增加2px，10-28px
+  // 0号 小字体
+  // 1号 正常字体
+  @for $i from 0 through 9 {
+    --nc-font-size-#{$i}: #{v.$font-size + 2 * $i};
+  }
+
+  // 字体加粗 1-5级
+  @for $i from 0 through 5 {
+    --nc-font-weight-#{$i}: #{v.$font-weight + 100 * $i};
+  }
+
+  // border
+  --nc-border-width: #{v.$border-width};
+
+  // border radius
+  --nc-border-radius-base: #{v.$border-radius};
+  --nc-border-radius-larger: #{v.$border-radius + 2};
+  --nc-border-radius-largest: #{v.$border-radius + 4};
+
+  --nc-border-radius-round: #{v.$border-radius-round};
+  --nc-border-radius-round: 50%;
+  //0-4级边框色、实线边框、虚线边框
+  @for $i from 0 through 4 {
+    $color: v.$border-color;
+    @if f.is-darktheme() {
+      $color: #{f.getcolor(v.$border-color, l, $i * 0.2)};
+    }
+    else {
+      $color: #{f.getcolor(v.$border-color, d, $i * 0.2)};
+    }
+    --nc-border-color-#{$i}: #{$color};
+    --nc-border-solid-#{$i}: #{v.$border-width} #{$color} solid;
+    --nc-border-dash-#{$i}: #{v.$border-width} #{$color} dashed;
+  }
+
+  //padding
+  --nc-padding: #{v.$padding};
+
+  //duration 1-5级 0.2-0.6
+  @for $i from 0 through 4 {
+    --nc-transition-duration-#{$i}: #{v.$transition-duration + 0.1 * $i};
+  }
+  --nc-transition-ease-in-out-bezier: #{v.$transition-function-ease-in-out-bezier};
+  --nc-transition-function-fast-bezier: #{v.$transition-function-fast-bezier};
+
+  --nc-scrollbar-width: #{v.$scrollbar-width};
+
+  //zindex
+  --nc-popup-zindex: #{v.$popup-zindex};
+  --nc-modal-zindex: #{v.$modal-zindex};
+  --nc-drawer-zindex: #{v.$drawer-zindex};
+  --nc-notification-zindex: #{v.$notification-zindex};
+  --nc-message-zindex: #{v.$message-zindex};
+  --nc-pop-zindex: #{v.$pop-zindex};
+  //超链接
+  a {
+    @extend %a;
+  }
+
+  //字体
+  * {
+    font-family: v.$font-family;
+  }
+}
+
+/* 整个滚动条 */
+::-webkit-scrollbar {
+  width: var(--nc-scrollbar-width); /* 垂直滚动条宽度 */
+  height: var(--nc-scrollbar-width); /* 水平滚动条高度 */
+}
+
+/* 滚动条轨道（背景） */
+::-webkit-scrollbar-track {
+  background: var(--nc-bg-color-1);
+  border-radius: var(--nc-scrollbar-width);
+}
+
+/* 滚动条滑块（可拖动部分） */
+::-webkit-scrollbar-thumb {
+  background: var(--nc-bg-color-9);
+  border-radius: var(--nc-scrollbar-width);
+}
+
+/* 滑块悬停效果 */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--nc-fore-color-9);
+}

package/src/internal-scss/function.scss

@@ -0,0 +1,43 @@
+@use "./variables.scss" as v;
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+/**** 颜色函数 ****/
+/**
+ * 获取颜色
+ * @param $color -  颜色
+ * @param $type -   类型：l(light，颜色变浅)，d（dark，颜色逐渐变深),为空则返回$color
+ * @param $level -  变轻或变深的程度，按照10%*$level 变化
+ */
+@function getcolor($color, $type: null, $level: null) {
+  @if $type ==null {
+    @return $color;
+  }
+
+  $lightness: math.percentage(math.div($level, 10));
+
+  @if $type == "l" {
+    @return color.mix(#fff, $color, $lightness);
+  } @else {
+    @return color.mix(#000, $color, $lightness);
+  }
+}
+
+/**
+ * 获取主题颜色
+ * @param $name -   颜色名，primary,success,warning,danger,info
+ * @param $type -   类型：l(light，颜色变浅)，d（dark，颜色逐渐变深),默认l
+ * @param $level -  变轻或变深的程度，按照10%*$level 变化
+ */
+@function getthemecolor($name, $type: null, $level: null) {
+  $color: map.get(v.$colmap, $name);
+  @return getcolor($color, $type, $level);
+}
+
+/**
+ * 判断是否为深色主题
+ */
+@function is-darktheme() {
+  $color: color.channel(v.$bg-color, "lightness", $space: hsl);
+  @return $color < 50%;
+}

package/src/internal-scss/global.scss

@@ -0,0 +1,14 @@
+%a {
+  color: var(--nc-primary-light-0);
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: var(--nc-primary-light-3);
+  }
+
+  &:active {
+    color: var(--nc-primary-dark-2);
+  }
+}
+

package/src/internal-scss/index.scss

@@ -0,0 +1,6 @@
+@forward "./src/variables.scss";
+@forward "./src/mixins.scss";
+@forward "./src/function.scss";
+// @forward "./src/cssvariables.scss";
+@forward "./src/global.scss";
+@forward "./src/animation.scss";

package/src/internal-scss/mixins.scss

@@ -0,0 +1,140 @@
+@use "sass:math";
+// ==================== 混入定义 ====================
+
+// 尺寸混入
+@mixin size-variant($padding, $font-size) {
+  padding: $padding;
+  font-size: $font-size;
+}
+
+// 文本溢出省略
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 居中混入用于 flex 布局居中
+@mixin center-flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 居中混入 -- 用于 position 居中 -- 注意将父元素设置为 position: relative
+@mixin center-position {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/**
+ * 箭头
+ *  @size - 字体大小
+ */
+@mixin arrow($size) {
+  display: inline-block;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    width: calc($size / 3);
+    height: calc($size / 3);
+    border: solid currentColor;
+    /* 对勾颜色 */
+    border-width: 0 1px 1px 0;
+    /* 只显示右下边框，模拟对勾 */
+    transform-origin: center;
+  }
+}
+
+/**
+ * 对勾
+ * @size :  尺寸
+ */
+@mixin check($size) {
+  content: "";
+  width: calc($size / 2 - 2px);
+  height: calc($size / 2 + 2px);
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+//disabled
+@mixin disabled-box {
+  cursor: not-allowed;
+  background-color: var(--nc-bg-color-2);
+  border-color: var(--nc-bg-color-3);
+  color: var(--nc-bg-color-9);
+}
+//disabled（仅font）
+@mixin disabled-font {
+  cursor: not-allowed;
+  color: var(--nc-bg-color-9);
+}
+
+//hover
+@mixin item-hover {
+  background-color: var(--nc-bg-color-3);
+  color: var(--nc-fore-color-0);
+}
+
+// 带边框hover
+@mixin item-hover-border {
+  border-color: var(--nc-primary-light-0);
+  color: var(--nc-primary-light-0);
+}
+
+// focus
+@mixin focus-visible($color: var(--nc-primary-light-0)) {
+  outline: none;
+  box-shadow: 0 0 0 2px $color;
+}
+
+// selected
+@mixin item-selected() {
+  background-color: var(--nc-primary-light-9);
+  color: var(--nc-primary-light-0);
+}
+// seleted font only
+@mixin item-selected-text() {
+  color: var(--nc-primary-light-0);
+}
+
+// close 按钮
+@mixin close-btn($size:var(--nc-font-size-0)) {
+  font-size: $size;
+  transition: color var(--nc-transition-duration-0) ease;
+  cursor: pointer;
+  &:hover {
+    color: var(--nc-danger-dark-2);
+    font-weight: var(--nc-font-weight-1);
+  }
+  &::after {
+    content: "✕";
+  }
+}
+// 圆底close按钮
+@mixin circle-close-btn($size:var(--nc-font-size-1)) {
+  display:inline-block;
+  font-size: calc($size - 6px);
+  width:$size;
+  height:$size;
+  text-align:center;
+  line-height: $size;
+  border-radius:50%;
+  color:var(--nc-bg-color-1);
+  background-color:var(--nc-bg-color-9);
+  transition: all var(--nc-transition-duration-0) ease;
+  cursor: pointer;
+  &:hover {
+    background-color:var(--nc-fore-color-9);
+  }
+  &::after {
+    content: "✕";
+  }
+}
+
+