@bifrostui/styles 1.5.3 → 2.0.0-alpha.1

package/themes/pioneer-light-components.less

@@ -0,0 +1,51 @@
+// 无法用css variables实现的先锋版高亮主题色
+@import '../mixins/variables.less';
+
+@{theme-selector-pioneer-light} {
+  .bui-btn {
+    &.bui-btn-contained {
+      &.bui-btn-primary {
+        &.bui-btn-large {
+          background-image:
+            radial-gradient(
+              35px 25px ellipse at 2% 110%,
+              #fffe1e 0%,
+              rgba(251, 134, 35, 0) 99%
+            ),
+            radial-gradient(
+              35px 25px ellipse at 110% 120%,
+              #ff3018 0%,
+              rgba(0, 48, 24, 0) 92%
+            ),
+            linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
+        }
+
+        &.bui-btn-full {
+          background-image:
+            radial-gradient(
+              93px 50px ellipse at 2% 110%,
+              #fffe1e 0%,
+              rgba(251, 134, 35, 0) 100%
+            ),
+            radial-gradient(
+              93px 50px ellipse at 98% 110%,
+              #ff3018 0%,
+              rgba(0, 48, 24, 0) 92%
+            ),
+            linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
+        }
+      }
+    }
+  }
+
+  .bui-tabs {
+    .bui-tabs-indicator {
+      background-image: linear-gradient(
+        90deg,
+        #ff9b00 0%,
+        #ffa700 21%,
+        #ff8300 100%
+      );
+    }
+  }
+}

package/themes/pioneer-light.less

@@ -0,0 +1,70 @@
+/** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
+.pioneer-light() {
+  --bui-font-family-accent:
+    'AlibabaPuHuiTi-Heavy', 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
+    sans-serif;
+  --bui-color-red: #ff471a;
+  --bui-color-red-light: #ffefe6;
+  --bui-color-red-dark: #b31800;
+  --bui-color-orange: #ff5000;
+  --bui-color-orange-light: #ffede5;
+  --bui-color-orange-dark: #d93d00;
+  --bui-color-yellow: #ffa608;
+  --bui-color-yellow-light: #fffae6;
+  --bui-color-yellow-dark: #b36500;
+  --bui-color-lemonyellow: #fff36f;
+  --bui-color-lemonyellow-light: #ffffeb;
+  --bui-color-lemonyellow-dark: #b3a13d;
+  --bui-color-green: #40bf00;
+  --bui-color-green-light: #f2ffe6;
+  --bui-color-green-dark: #1f7300;
+  --bui-color-purple: #754dff;
+  --bui-color-purple-light: #f6f0ff;
+  --bui-color-purple-dark: #3924b3;
+  --bui-color-blue: #229af0;
+  --bui-color-blue-light: #f0fbff;
+  --bui-color-blue-dark: #0757a3;
+  --bui-color-aiblue: #5cfffa;
+  --bui-color-aiblue-light: #f0fffc;
+  --bui-color-aiblue-dark: #1d858c;
+  --bui-color-primary: var(--bui-color-orange);
+  --bui-color-primary-light: var(--bui-color-orange-light);
+  --bui-color-primary-dark: var(--bui-color-orange-dark);
+  --bui-title-size-4: var(--bui-font-size-md1);
+  --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
+  --bui-color-border-primary: rgba(255, 80, 0, 0.4);
+  --bui-color-border-info: rgba(34, 154, 240, 0.4);
+  --bui-color-border-success: rgba(64, 191, 0, 0.4);
+  --bui-color-border-warning: rgba(255, 80, 0, 0.4);
+  --bui-color-border-danger: rgba(255, 71, 26, 0.4);
+  --bui-color-primary-start: #ffb300;
+  --bui-color-primary-end: var(--bui-color-primary);
+  --bui-color-info-start: #5bc8ff;
+  --bui-color-info-end: var(--bui-color-info);
+  --bui-color-warning-start: #fc3;
+  --bui-color-warning-end: var(--bui-color-warning);
+  --bui-color-success-start: #66d933;
+  --bui-color-success-end: var(--bui-color-success);
+  --bui-color-danger-start: #ff7633;
+  --bui-color-danger-end: var(--bui-color-danger);
+  --bui-shape-radius-drawer: var(--bui-radius-6);
+  --bui-shape-radius-card: var(--bui-radius-5);
+  --bui-shape-radius-default: var(--bui-radius-4);
+  --bui-btn-full-height: 45px;
+  --bui-btn-large-height: 30px;
+  --bui-btn-full-font-size: 18px;
+  --bui-btn-full-font-family: var(--bui-font-family-accent);
+  --bui-btn-small-border-radius: 6px;
+  --bui-btn-border-radius: 6px;
+  --bui-btn-large-border-radius: 7px;
+  --bui-btn-full-border-radius: 14px;
+  --bui-card-header-title-font-size: var(--bui-title-size-3);
+  --bui-tab-font-size: var(--bui-title-size-4);
+  --bui-tab-color: var(--bui-color-fg-muted);
+
+  /* prettier-ignore */
+  --bui-tabs-indicator-height: 4PX;
+  --bui-tabs-indicator-border-radius: 2px;
+  --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
+}

package/theme/default-dark.less

@@ -1,29 +0,0 @@
-.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-bg-popover: fade(#484f58, 70%);
-  --bui-color-bg-alpha-light-9: fade(#161b22, 90%);
-  --bui-color-bg-alpha-light-7: fade(#161b22, 70%);
-  --bui-color-bg-alpha-light-5: fade(#161b22, 50%);
-  --bui-color-bg-alpha-light-3: fade(#161b22, 30%);
-  --bui-color-bg-alpha-light-1: fade(#161b22, 10%);
-  --bui-color-bg-alpha-dark-9: fade(#484f58, 90%);
-  --bui-color-bg-alpha-dark-7: fade(#484f58, 70%);
-  --bui-color-bg-alpha-dark-5: fade(#484f58, 50%);
-  --bui-color-bg-alpha-dark-3: fade(#484f58, 30%);
-  --bui-color-bg-alpha-dark-1: fade(#484f58, 10%);
-
-  // 分割线、边框
-  --bui-color-border-default: #30363d;
-}

package/theme/default-light.less

@@ -1,154 +0,0 @@
-.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-bg-popover: var(--bui-color-neutral-7);
-  --bui-color-bg-alpha-light-9: fade(#fff, 90%);
-  --bui-color-bg-alpha-light-7: fade(#fff, 70%);
-  --bui-color-bg-alpha-light-5: fade(#fff, 50%);
-  --bui-color-bg-alpha-light-3: fade(#fff, 30%);
-  --bui-color-bg-alpha-light-1: fade(#fff, 10%);
-  --bui-color-bg-alpha-dark-9: fade(#000, 90%);
-  --bui-color-bg-alpha-dark-7: fade(#000, 70%);
-  --bui-color-bg-alpha-dark-5: fade(#000, 50%);
-  --bui-color-bg-alpha-dark-3: fade(#000, 30%);
-  --bui-color-bg-alpha-dark-1: fade(#000, 10%);
-
-  // 分割线、边框
-  --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

@@ -1,33 +0,0 @@
-.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-bg-popover: fade(#484f58, 70%);
-  --bui-color-bg-alpha-light-9: fade(#161b22, 90%);
-  --bui-color-bg-alpha-light-7: fade(#161b22, 70%);
-  --bui-color-bg-alpha-light-5: fade(#161b22, 50%);
-  --bui-color-bg-alpha-light-3: fade(#161b22, 30%);
-  --bui-color-bg-alpha-light-1: fade(#161b22, 10%);
-  --bui-color-bg-alpha-dark-9: fade(#484f58, 90%);
-  --bui-color-bg-alpha-dark-7: fade(#484f58, 70%);
-  --bui-color-bg-alpha-dark-5: fade(#484f58, 50%);
-  --bui-color-bg-alpha-dark-3: fade(#484f58, 30%);
-  --bui-color-bg-alpha-dark-1: fade(#484f58, 10%);
-
-  // 分割线、边框
-  --bui-color-border-default: #30363d;
-}

package/theme/dm-light.less

@@ -1,19 +0,0 @@
-.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

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