@bifrostui/styles 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alibaba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# `@bifrostui/styles`
+
+Common style definitions for BUI React components
+
+## Usage
+
+```sh
+// with npm
+npm install @bifrostui/styles
+
+// with yarn
+yarn add @bifrostui/styles
+```

package/dist/index.css

@@ -0,0 +1,339 @@
+/* stylelint-disable selector-type-no-unknown */
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'][data-theme='dm'] {
+    /** 颜色 */
+    --bui-color-blue: #48b1f1;
+    --bui-color-orange: #ff8f3f;
+    --bui-color-gray: #f5f5f5;
+    --bui-color-pink: #ff8e92;
+    --bui-color-neutral-2: #4d4d56;
+    --bui-color-neutral-3: #9c9ca5;
+    --bui-color-neutral-5: #f1f1f1;
+    --bui-color-bg-default: #f4f5f6;
+    --bui-color-powder-start: #ff72a2;
+    --bui-color-powder-end: #ff7070;
+    --bui-title-size-2: 20px;
+    --bui-title-size-3: 18px;
+    --bui-color-red: #ff4886;
+    --bui-color-fg-default: #2e333e;
+    --bui-color-fg-muted: #2e333e;
+    --bui-shape-radius-label: 4px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'][data-theme='dm'] {
+    --bui-color-neutral-5: #e5e5e5;
+    --bui-color-powder-start: #ff4886;
+    --bui-color-powder-end: #ffa662;
+    --bui-color-fg-default: #f0f6fc;
+    --bui-color-fg-muted: #8b949e;
+    --bui-color-fg-subtle: #484f58;
+    --bui-color-fg-disabled: #484f58;
+    --bui-color-bg-default: #010409;
+    --bui-color-bg-view: #161b22;
+    --bui-color-border-default: #30363d;
+  }
+}
+/* default theme */
+:root,
+page,
+.bui-default-light,
+[data-color-mode='light'][data-theme='default'] {
+  /** 品牌红 */
+  --bui-color-red: #ff335c;
+  --bui-color-red-light: #ffebef;
+  /** 明亮粉 */
+  --bui-color-pink: #dd10f2;
+  --bui-color-pink-light: #fce7fe;
+  /** 活力橙 */
+  --bui-color-orange: #ff8533;
+  --bui-color-orange-light: #fff0e5;
+  /** 亲和绿 */
+  --bui-color-green: #00d68f;
+  --bui-color-green-light: #dcf9f0;
+  /** 神秘紫 */
+  --bui-color-purple: #8b52ff;
+  --bui-color-purple-light: #f2ebff;
+  /** 宁静蓝 */
+  --bui-color-blue: #148aff;
+  --bui-color-blue-light: #e1f0ff;
+  /** 中性灰 */
+  --bui-color-gray: #8896b1;
+  --bui-color-gray-light: #f3f5f8;
+  --bui-color-black: #000;
+  --bui-color-white: #fff;
+  --bui-color-vip: #ff866e;
+  /** 中性色 */
+  --bui-color-neutral-0: var(--bui-color-black);
+  --bui-color-neutral-1: #2e333e;
+  --bui-color-neutral-2: #5f6672;
+  --bui-color-neutral-3: #959aa5;
+  --bui-color-neutral-4: #ced1d6;
+  --bui-color-neutral-5: #e9ebef;
+  --bui-color-neutral-6: #f5f6f8;
+  --bui-color-neutral-7: var(--bui-color-white);
+  /** 字重 */
+  --bui-font-weight-normal: 400;
+  --bui-font-weight-medium: 500;
+  --bui-font-weight-bold: 600;
+  /** 主题 */
+  --bui-color-primary: var(--bui-color-red);
+  --bui-color-primary-light: var(--bui-color-red-light);
+  --bui-color-info: var(--bui-color-blue);
+  --bui-color-info-light: var(--bui-color-blue-light);
+  --bui-color-success: var(--bui-color-green);
+  --bui-color-success-light: var(--bui-color-green-light);
+  --bui-color-warning: var(--bui-color-orange);
+  --bui-color-warning-light: var(--bui-color-orange-light);
+  --bui-color-danger: var(--bui-color-red);
+  --bui-color-danger-light: var(--bui-color-red-light);
+  /** 语义化字体 */
+  --bui-title-size-1: 21px;
+  --bui-title-size-2: 18px;
+  --bui-title-size-3: 16px;
+  --bui-title-size-4: 15px;
+  --bui-text-size-1: 14px;
+  --bui-text-size-2: 13px;
+  --bui-text-size-3: 12px;
+  --bui-text-size-4: 11px;
+  --bui-text-size-5: 10px;
+  --bui-color-fg-default: var(--bui-color-neutral-1);
+  --bui-color-fg-muted: var(--bui-color-neutral-2);
+  --bui-color-fg-subtle: var(--bui-color-neutral-3);
+  --bui-color-fg-disabled: var(--bui-color-neutral-4);
+  --bui-color-bg-default: var(--bui-color-neutral-6);
+  --bui-color-bg-view: var(--bui-color-neutral-7);
+  --bui-color-border-default: var(--bui-color-neutral-5);
+  --bui-color-border-primary: rgba(255, 51, 92, 0.4);
+  --bui-color-border-info: rgba(20, 138, 255, 0.4);
+  --bui-color-border-success: rgba(0, 214, 143, 0.4);
+  --bui-color-border-warning: rgba(255, 133, 51, 0.4);
+  --bui-color-border-danger: rgba(255, 51, 92, 0.4);
+  --bui-color-border-gray: rgba(136, 150, 177, 0.4);
+  --bui-color-primary-start: #ef16b9;
+  --bui-color-primary-end: var(--bui-color-red);
+  --bui-color-secondary-start: #f32adf;
+  --bui-color-secondary-end: var(--bui-color-pink);
+  --bui-color-info-start: #33a7ff;
+  --bui-color-info-end: var(--bui-color-blue);
+  --bui-color-warning-start: #ffad33;
+  --bui-color-warning-end: var(--bui-color-orange);
+  --bui-color-success-start: #00ebac;
+  --bui-color-success-end: var(--bui-color-green);
+  --bui-color-danger-start: #ef16b9;
+  --bui-color-danger-end: var(--bui-color-red);
+  --bui-color-vip-start: #ffd4a6;
+  --bui-color-vip-end: #ffbeae;
+  --bui-shape-radius-popover: 18px;
+  --bui-shape-radius-drawer: 12px;
+  --bui-shape-radius-card: 9px;
+  --bui-shape-radius-default: 6px;
+  --bui-shape-radius-poster: 4px;
+  --bui-shape-radius-label: 3px;
+  --bui-spacing-xl: 15px;
+  --bui-spacing-lg: 12px;
+  --bui-spacing-md: 9px;
+  --bui-spacing-sm: 6px;
+  --bui-spacing-xs: 4px;
+  --bui-line-height: 1.5;
+  --bui-z-index-dropdown: 1000;
+  --bui-z-index-affix: 1100;
+  --bui-z-index-modal-backdrop: 1200;
+  --bui-z-index-modal: 1200;
+  --bui-z-index-popover: 1300;
+  --bui-z-index-tooltip: 1400;
+  --bui-z-index-toast: 1500;
+  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
+    sans-serif;
+}
+.bui-dark,
+[data-color-mode='dark'][data-theme='default'] {
+  --bui-color-fg-default: #f0f6fc;
+  --bui-color-fg-muted: #8b949e;
+  --bui-color-fg-subtle: #484f58;
+  --bui-color-fg-disabled: #484f58;
+  --bui-color-bg-default: #010409;
+  --bui-color-bg-view: #161b22;
+  --bui-color-border-default: #30363d;
+}
+/** 大麦主题 */
+.bui-dm-light,
+[data-color-mode='light'][data-theme='dm'] {
+  /** 颜色 */
+  --bui-color-blue: #48b1f1;
+  --bui-color-orange: #ff8f3f;
+  --bui-color-gray: #f5f5f5;
+  --bui-color-pink: #ff8e92;
+  --bui-color-neutral-2: #4d4d56;
+  --bui-color-neutral-3: #9c9ca5;
+  --bui-color-neutral-5: #f1f1f1;
+  --bui-color-bg-default: #f4f5f6;
+  --bui-color-powder-start: #ff72a2;
+  --bui-color-powder-end: #ff7070;
+  --bui-title-size-2: 20px;
+  --bui-title-size-3: 18px;
+  --bui-color-red: #ff4886;
+  --bui-color-fg-default: #2e333e;
+  --bui-color-fg-muted: #2e333e;
+  --bui-shape-radius-label: 4px;
+}
+/** 大麦主题 */
+.bui-dm-dark,
+[data-color-mode='dark'][data-theme='dm'] {
+  --bui-color-neutral-5: #e5e5e5;
+  --bui-color-powder-start: #ff4886;
+  --bui-color-powder-end: #ffa662;
+  --bui-color-fg-default: #f0f6fc;
+  --bui-color-fg-muted: #8b949e;
+  --bui-color-fg-subtle: #484f58;
+  --bui-color-fg-disabled: #484f58;
+  --bui-color-bg-default: #010409;
+  --bui-color-bg-view: #161b22;
+  --bui-color-border-default: #30363d;
+}
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'] {
+    /** 品牌红 */
+    --bui-color-red: #ff335c;
+    --bui-color-red-light: #ffebef;
+    /** 明亮粉 */
+    --bui-color-pink: #dd10f2;
+    --bui-color-pink-light: #fce7fe;
+    /** 活力橙 */
+    --bui-color-orange: #ff8533;
+    --bui-color-orange-light: #fff0e5;
+    /** 亲和绿 */
+    --bui-color-green: #00d68f;
+    --bui-color-green-light: #dcf9f0;
+    /** 神秘紫 */
+    --bui-color-purple: #8b52ff;
+    --bui-color-purple-light: #f2ebff;
+    /** 宁静蓝 */
+    --bui-color-blue: #148aff;
+    --bui-color-blue-light: #e1f0ff;
+    /** 中性灰 */
+    --bui-color-gray: #8896b1;
+    --bui-color-gray-light: #f3f5f8;
+    --bui-color-black: #000;
+    --bui-color-white: #fff;
+    --bui-color-vip: #ff866e;
+    /** 中性色 */
+    --bui-color-neutral-0: var(--bui-color-black);
+    --bui-color-neutral-1: #2e333e;
+    --bui-color-neutral-2: #5f6672;
+    --bui-color-neutral-3: #959aa5;
+    --bui-color-neutral-4: #ced1d6;
+    --bui-color-neutral-5: #e9ebef;
+    --bui-color-neutral-6: #f5f6f8;
+    --bui-color-neutral-7: var(--bui-color-white);
+    /** 字重 */
+    --bui-font-weight-normal: 400;
+    --bui-font-weight-medium: 500;
+    --bui-font-weight-bold: 600;
+    /** 主题 */
+    --bui-color-primary: var(--bui-color-red);
+    --bui-color-primary-light: var(--bui-color-red-light);
+    --bui-color-info: var(--bui-color-blue);
+    --bui-color-info-light: var(--bui-color-blue-light);
+    --bui-color-success: var(--bui-color-green);
+    --bui-color-success-light: var(--bui-color-green-light);
+    --bui-color-warning: var(--bui-color-orange);
+    --bui-color-warning-light: var(--bui-color-orange-light);
+    --bui-color-danger: var(--bui-color-red);
+    --bui-color-danger-light: var(--bui-color-red-light);
+    /** 语义化字体 */
+    --bui-title-size-1: 21px;
+    --bui-title-size-2: 18px;
+    --bui-title-size-3: 16px;
+    --bui-title-size-4: 15px;
+    --bui-text-size-1: 14px;
+    --bui-text-size-2: 13px;
+    --bui-text-size-3: 12px;
+    --bui-text-size-4: 11px;
+    --bui-text-size-5: 10px;
+    --bui-color-fg-default: var(--bui-color-neutral-1);
+    --bui-color-fg-muted: var(--bui-color-neutral-2);
+    --bui-color-fg-subtle: var(--bui-color-neutral-3);
+    --bui-color-fg-disabled: var(--bui-color-neutral-4);
+    --bui-color-bg-default: var(--bui-color-neutral-6);
+    --bui-color-bg-view: var(--bui-color-neutral-7);
+    --bui-color-border-default: var(--bui-color-neutral-5);
+    --bui-color-border-primary: rgba(255, 51, 92, 0.4);
+    --bui-color-border-info: rgba(20, 138, 255, 0.4);
+    --bui-color-border-success: rgba(0, 214, 143, 0.4);
+    --bui-color-border-warning: rgba(255, 133, 51, 0.4);
+    --bui-color-border-danger: rgba(255, 51, 92, 0.4);
+    --bui-color-border-gray: rgba(136, 150, 177, 0.4);
+    --bui-color-primary-start: #ef16b9;
+    --bui-color-primary-end: var(--bui-color-red);
+    --bui-color-secondary-start: #f32adf;
+    --bui-color-secondary-end: var(--bui-color-pink);
+    --bui-color-info-start: #33a7ff;
+    --bui-color-info-end: var(--bui-color-blue);
+    --bui-color-warning-start: #ffad33;
+    --bui-color-warning-end: var(--bui-color-orange);
+    --bui-color-success-start: #00ebac;
+    --bui-color-success-end: var(--bui-color-green);
+    --bui-color-danger-start: #ef16b9;
+    --bui-color-danger-end: var(--bui-color-red);
+    --bui-color-vip-start: #ffd4a6;
+    --bui-color-vip-end: #ffbeae;
+    --bui-shape-radius-popover: 18px;
+    --bui-shape-radius-drawer: 12px;
+    --bui-shape-radius-card: 9px;
+    --bui-shape-radius-default: 6px;
+    --bui-shape-radius-poster: 4px;
+    --bui-shape-radius-label: 3px;
+    --bui-spacing-xl: 15px;
+    --bui-spacing-lg: 12px;
+    --bui-spacing-md: 9px;
+    --bui-spacing-sm: 6px;
+    --bui-spacing-xs: 4px;
+    --bui-line-height: 1.5;
+    --bui-z-index-dropdown: 1000;
+    --bui-z-index-affix: 1100;
+    --bui-z-index-modal-backdrop: 1200;
+    --bui-z-index-modal: 1200;
+    --bui-z-index-popover: 1300;
+    --bui-z-index-tooltip: 1400;
+    --bui-z-index-toast: 1500;
+    --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
+    sans-serif;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] {
+    --bui-color-fg-default: #f0f6fc;
+    --bui-color-fg-muted: #8b949e;
+    --bui-color-fg-subtle: #484f58;
+    --bui-color-fg-disabled: #484f58;
+    --bui-color-bg-default: #010409;
+    --bui-color-bg-view: #161b22;
+    --bui-color-border-default: #30363d;
+  }
+}
+/* set color-scheme */
+:root,
+page,
+[data-color-mode='light'] {
+  color-scheme: light;
+}
+[data-color-mode='dark'] {
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'] {
+    color-scheme: light;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] {
+    color-scheme: dark;
+  }
+}
+[data-color-mode] {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-default);
+}

package/index.less

@@ -0,0 +1,81 @@
+/* stylelint-disable selector-type-no-unknown */
+
+@import './theme/index.less';
+@import './mixins/index.less';
+
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'][data-theme='dm'] {
+    .dm-light();
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'][data-theme='dm'] {
+    .dm-dark();
+  }
+}
+
+/* default theme */
+:root,
+page,
+.bui-default-light,
+[data-color-mode='light'][data-theme='default'] {
+  .light();
+}
+
+.bui-dark,
+[data-color-mode='dark'][data-theme='default'] {
+  .dark();
+}
+
+/** 大麦主题 */
+.bui-dm-light,
+[data-color-mode='light'][data-theme='dm'] {
+  .dm-light();
+}
+
+/** 大麦主题 */
+.bui-dm-dark,
+[data-color-mode='dark'][data-theme='dm'] {
+  .dm-dark();
+}
+
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'] {
+    .light();
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] {
+    .dark();
+  }
+}
+
+/* set color-scheme */
+:root,
+page,
+[data-color-mode='light'] {
+  color-scheme: light;
+}
+
+[data-color-mode='dark'] {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'] {
+    color-scheme: light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] {
+    color-scheme: dark;
+  }
+}
+
+[data-color-mode] {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-default);
+}

package/mixins/gradient.less

@@ -0,0 +1,3 @@
+.linear-gradient(@start: @pink-start, @end: @pink-end) {
+  background-image: linear-gradient(45deg, @start 0%, @end 100%);
+}

package/mixins/index.less

@@ -0,0 +1,2 @@
+@import './gradient.less';
+@import './text.less';

package/mixins/text.less

@@ -0,0 +1,6 @@
+.ellipsis() {
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@bifrostui/styles",
+  "version": "0.0.5",
+  "description": "Common style definitions for BUI React components",
+  "homepage": "http://bui.taopiaopiao.com",
+  "license": "MIT",
+  "files": [
+    "index.less",
+    "theme",
+    "mixins",
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rm -rf dist && mkdir dist  && lessc index.less > dist/index.css"
+  },
+  "gitHead": "f24f431d8291f7838d943eb887c970c7bb0ce5ec"
+}

package/theme/default-dark.less

@@ -0,0 +1,18 @@
+.dark() {
+  // default是最通用的色彩，比如标题和一级信息
+  --bui-color-fg-default: #f0f6fc;
+  // 柔和色，通常用于次级及补充说明信息
+  --bui-color-fg-muted: #8b949e;
+  // 淡色，很细微的色彩，用于辅助和需要弱化的信息
+  --bui-color-fg-subtle: #484f58;
+  // 用于失效、不可用等状态
+  --bui-color-fg-disabled: #484f58;
+
+  // 默认背景色
+  --bui-color-bg-default: #010409;
+  // 视图背景色
+  --bui-color-bg-view: #161b22;
+
+  // 分割线、边框
+  --bui-color-border-default: #30363d;
+}

package/theme/default-light.less

@@ -0,0 +1,142 @@
+.light() {
+  /** 品牌红 */
+  --bui-color-red: #ff335c;
+  --bui-color-red-light: #ffebef;
+
+  /** 明亮粉 */
+  --bui-color-pink: #dd10f2;
+  --bui-color-pink-light: #fce7fe;
+
+  /** 活力橙 */
+  --bui-color-orange: #ff8533;
+  --bui-color-orange-light: #fff0e5;
+
+  /** 亲和绿 */
+  --bui-color-green: #00d68f;
+  --bui-color-green-light: #dcf9f0;
+
+  /** 神秘紫 */
+  --bui-color-purple: #8b52ff;
+  --bui-color-purple-light: #f2ebff;
+
+  /** 宁静蓝 */
+  --bui-color-blue: #148aff;
+  --bui-color-blue-light: #e1f0ff;
+
+  /** 中性灰 */
+  --bui-color-gray: #8896b1;
+  --bui-color-gray-light: #f3f5f8;
+  --bui-color-black: #000;
+  --bui-color-white: #fff;
+  --bui-color-vip: #ff866e;
+
+  /** 中性色 */
+  --bui-color-neutral-0: var(--bui-color-black);
+  --bui-color-neutral-1: #2e333e;
+  --bui-color-neutral-2: #5f6672;
+  --bui-color-neutral-3: #959aa5;
+  --bui-color-neutral-4: #ced1d6;
+  --bui-color-neutral-5: #e9ebef;
+  --bui-color-neutral-6: #f5f6f8;
+  --bui-color-neutral-7: var(--bui-color-white);
+
+  /** 字重 */
+  --bui-font-weight-normal: 400;
+  --bui-font-weight-medium: 500;
+  --bui-font-weight-bold: 600;
+
+  /** 主题 */
+  --bui-color-primary: var(--bui-color-red);
+  --bui-color-primary-light: var(--bui-color-red-light);
+  --bui-color-info: var(--bui-color-blue);
+  --bui-color-info-light: var(--bui-color-blue-light);
+  --bui-color-success: var(--bui-color-green);
+  --bui-color-success-light: var(--bui-color-green-light);
+  --bui-color-warning: var(--bui-color-orange);
+  --bui-color-warning-light: var(--bui-color-orange-light);
+  --bui-color-danger: var(--bui-color-red);
+  --bui-color-danger-light: var(--bui-color-red-light);
+
+  /** 语义化字体 */
+  --bui-title-size-1: 21px;
+  --bui-title-size-2: 18px;
+  --bui-title-size-3: 16px;
+  --bui-title-size-4: 15px;
+  --bui-text-size-1: 14px;
+  --bui-text-size-2: 13px;
+  --bui-text-size-3: 12px;
+  --bui-text-size-4: 11px;
+  --bui-text-size-5: 10px;
+
+  // 前景色，通常用于文字
+  // default是最通用的色彩，比如标题和一级信息
+  --bui-color-fg-default: var(--bui-color-neutral-1);
+  // 柔和色，通常用于次级及补充说明信息
+  --bui-color-fg-muted: var(--bui-color-neutral-2);
+  // 淡色，很细微的色彩，用于辅助和需要弱化的信息
+  --bui-color-fg-subtle: var(--bui-color-neutral-3);
+  // 用于失效、不可用等状态
+  --bui-color-fg-disabled: var(--bui-color-neutral-4);
+
+  // 默认背景色
+  --bui-color-bg-default: var(--bui-color-neutral-6);
+  // 视图背景色
+  --bui-color-bg-view: var(--bui-color-neutral-7);
+  // 分割线、边框
+  --bui-color-border-default: var(--bui-color-neutral-5);
+  --bui-color-border-primary: fade(#ff335c, 40%);
+  --bui-color-border-info: fade(#148aff, 40%);
+  --bui-color-border-success: fade(#00d68f, 40%);
+  --bui-color-border-warning: fade(#ff8533, 40%);
+  --bui-color-border-danger: fade(#ff335c, 40%);
+  --bui-color-border-gray: fade(#8896b1, 40%);
+
+  // 主题色渐变
+  --bui-color-primary-start: #ef16b9;
+  --bui-color-primary-end: var(--bui-color-red);
+  --bui-color-secondary-start: #f32adf;
+  --bui-color-secondary-end: var(--bui-color-pink);
+  --bui-color-info-start: #33a7ff;
+  --bui-color-info-end: var(--bui-color-blue);
+  --bui-color-warning-start: #ffad33;
+  --bui-color-warning-end: var(--bui-color-orange);
+  --bui-color-success-start: #00ebac;
+  --bui-color-success-end: var(--bui-color-green);
+  --bui-color-danger-start: #ef16b9;
+  --bui-color-danger-end: var(--bui-color-red);
+  --bui-color-vip-start: #ffd4a6;
+  --bui-color-vip-end: #ffbeae;
+
+  // 形状定义
+  // 页面级浮层
+  --bui-shape-radius-popover: 18px;
+  --bui-shape-radius-drawer: 12px;
+  // 卡片、普通视图、抽屉、action sheet，常用于信息密度较低的视图
+  --bui-shape-radius-card: 9px;
+  // 独立海报、卡片，常用于信息密度较高的视图
+  --bui-shape-radius-default: 6px;
+  // 容器内海报
+  --bui-shape-radius-poster: 4px;
+  // 标签
+  --bui-shape-radius-label: 3px;
+
+  // 空间定义
+  --bui-spacing-xl: 15px;
+  --bui-spacing-lg: 12px;
+  --bui-spacing-md: 9px;
+  --bui-spacing-sm: 6px;
+  --bui-spacing-xs: 4px;
+  --bui-line-height: 1.5;
+  --bui-z-index-dropdown: 1000; // dropdown 、cascader、DatePicker、select、TimePicker、treeSelect
+  --bui-z-index-affix: 1100; // 吸顶元素、固定元素fixed
+  --bui-z-index-modal-backdrop: 1200;
+  --bui-z-index-modal: 1200; // drawer、 model
+  --bui-z-index-popover: 1300;
+  --bui-z-index-tooltip: 1400;
+  --bui-z-index-toast: 1500; // 反馈提示，高于所有元素
+
+  // 字体
+  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
+    sans-serif;
+}

package/theme/dm-dark.less

@@ -0,0 +1,22 @@
+.dm-dark() {
+  --bui-color-neutral-5: #e5e5e5;
+  --bui-color-powder-start: #ff4886;
+  --bui-color-powder-end: #ffa662;
+
+  // default是最通用的色彩，比如标题和一级信息
+  --bui-color-fg-default: #f0f6fc;
+  // 柔和色，通常用于次级及补充说明信息
+  --bui-color-fg-muted: #8b949e;
+  // 淡色，很细微的色彩，用于辅助和需要弱化的信息
+  --bui-color-fg-subtle: #484f58;
+  // 用于失效、不可用等状态
+  --bui-color-fg-disabled: #484f58;
+
+  // 默认背景色
+  --bui-color-bg-default: #010409;
+  // 视图背景色
+  --bui-color-bg-view: #161b22;
+
+  // 分割线、边框
+  --bui-color-border-default: #30363d;
+}

package/theme/dm-light.less

@@ -0,0 +1,19 @@
+.dm-light() {
+  /** 颜色 */
+  --bui-color-blue: #48b1f1;
+  --bui-color-orange: #ff8f3f;
+  --bui-color-gray: #f5f5f5;
+  --bui-color-pink: #ff8e92;
+  --bui-color-neutral-2: #4d4d56;
+  --bui-color-neutral-3: #9c9ca5;
+  --bui-color-neutral-5: #f1f1f1;
+  --bui-color-bg-default: #f4f5f6;
+  --bui-color-powder-start: #ff72a2;
+  --bui-color-powder-end: #ff7070;
+  --bui-title-size-2: 20px;
+  --bui-title-size-3: 18px;
+  --bui-color-red: #ff4886;
+  --bui-color-fg-default: #2e333e;
+  --bui-color-fg-muted: #2e333e;
+  --bui-shape-radius-label: 4px;
+}

package/theme/index.less

@@ -0,0 +1,4 @@
+@import './default-light.less';
+@import './default-dark.less';
+@import './dm-light.less';
+@import './dm-dark.less';