@bifrostui/styles 2.0.0-alpha.3 → 2.0.0-alpha.30

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/dist/index.css

@@ -4,25 +4,15 @@
 /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
 /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
 /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
-.bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
-[data-color-mode][data-theme='pioneer'] .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-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full,
-[data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.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-pioneer-light .bui-tabs .bui-tabs-indicator,
-[data-color-mode][data-theme='pioneer'] .bui-tabs .bui-tabs-indicator {
-  background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
-}
 /* 经典 */
 :root,
 page,
 xhs-page,
 .bui-default-light,
 [data-color-mode='light'][data-theme] {
-  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
+  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
+    sans-serif;
   --bui-color-red: #ff335c;
   --bui-color-red-light: #ffebef;
   --bui-color-pink: #dd10f2;
@@ -115,6 +105,7 @@ xhs-page,
   --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-border-purple: rgba(139, 82, 255, 0.4);
   --bui-color-primary-start: #ef16b9;
   --bui-color-primary-end: var(--bui-color-red);
   --bui-color-secondary-start: #f32adf;
@@ -192,7 +183,7 @@ xhs-page,
   --bui-color-blue-dark: #2b9ce5;
   --bui-color-aiblue: #5cfffa;
   --bui-color-aiblue-light: #f0fffc;
-  --bui-color-aiblue-dark: #1d858c;
+  --bui-color-aiblue-dark: #00898e;
   --bui-color-primary-start: var(--bui-color-red);
   --bui-color-primary-end: #ff4a72;
   --bui-color-info-start: #51bbff;
@@ -212,7 +203,9 @@ xhs-page,
 /** 先锋主题 */
 .bui-pioneer-light,
 [data-color-mode][data-theme='pioneer'] {
-  --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-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;
@@ -236,18 +229,21 @@ xhs-page,
   --bui-color-blue-dark: #0757a3;
   --bui-color-aiblue: #5cfffa;
   --bui-color-aiblue-light: #f0fffc;
-  --bui-color-aiblue-dark: #1d858c;
+  --bui-color-aiblue-dark: #00898e;
   --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-color-warning: var(--bui-color-yellow);
+  --bui-color-warning-light: var(--bui-color-yellow-light);
+  --bui-color-warning-dark: var(--bui-color-yellow-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-warning: rgba(255, 166, 8, 0.4);
   --bui-color-border-danger: rgba(255, 71, 26, 0.4);
-  --bui-color-primary-start: #ffb300;
+  --bui-color-border-purple: rgba(117, 77, 255, 0.4);
+  --bui-color-primary-start: #ff8500;
   --bui-color-primary-end: var(--bui-color-primary);
   --bui-color-info-start: #5bc8ff;
   --bui-color-info-end: var(--bui-color-info);
@@ -260,21 +256,28 @@ xhs-page,
   --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-small-height: 21px;
+  --bui-btn-height: 30px;
   --bui-btn-full-height: 45px;
-  --bui-btn-large-height: 30px;
-  --bui-btn-full-font-size: 18px;
+  --bui-btn-large-height: 45px;
+  --bui-btn-full-font-size: var(--bui-title-size-3);
+  --bui-btn-large-font-size: var(--bui-title-size-3);
   --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-btn-small-border-radius: var(--bui-radius-3);
+  --bui-btn-border-radius: var(--bui-radius-4);
+  --bui-btn-large-border-radius: var(--bui-radius-5);
+  --bui-btn-full-border-radius: var(--bui-radius-5);
   --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-height: 6PX;
   --bui-tabs-indicator-border-radius: 2px;
+  --bui-tabs-indicator-width: 27px;
   --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
+  --bui-tabs-indicator-bg: linear-gradient(90deg, var(--bui-color-primary-start) 0%, var(--bui-color-primary-end) 100%);
+  --bui-calendar-middle-bg-color: var(--bui-color-primary-light);
+  --bui-calendar-range-both-ends-bg-color: #ffb999;
 }
 /** 暗黑模式 */
 .bui-dark,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/styles",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.30",
   "main": "dist/index.css",
   "description": "Common style definitions for BUI React components",
   "homepage": "http://bui.taopiaopiao.com",
@@ -25,11 +25,11 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "devDependencies": {
+    "less": "^4.2.0"
+  },
   "scripts": {
     "theme:create": "node ./scripts/create-theme.mjs",
     "build": "rm -rf dist && mkdir dist && lessc index.less > dist/index.css"
-  },
-  "devDependencies": {
-    "less": "^4.2.0"
   }
-}
+}

package/registry/default-light.mjs

@@ -135,6 +135,7 @@ export const defaultLight = {
     '--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-border-purple': 'rgba(139, 82, 255, 0.4)',
 
     // 主题色渐变
     '--bui-color-primary-start': '#ef16b9',
@@ -208,4 +209,4 @@ export const defaultLight = {
     '--bui-z-index-tooltip': '1400',
     '--bui-z-index-toast': '1500', // 反馈提示，高于所有元素
   },
-};
+};

package/registry/dm-light.mjs

@@ -36,7 +36,7 @@ export const dmLight = {
     /** 智能蓝 */
     '--bui-color-aiblue': '#5cfffa',
     '--bui-color-aiblue-light': '#f0fffc',
-    '--bui-color-aiblue-dark': '#1d858c',
+    '--bui-color-aiblue-dark': '#00898e',
 
     /** 主题色渐变 */
     '--bui-color-primary-start': 'var(--bui-color-red)',
@@ -57,4 +57,4 @@ export const dmLight = {
     '--bui-color-border-warning': 'rgba(255, 175, 0, 0.4)',
     '--bui-color-border-danger': 'rgba(255, 50, 153, 0.4)',
   },
-};
+};

package/registry/pioneer-light.mjs

@@ -45,28 +45,31 @@ export const pioneerLight = {
     /** 智能蓝 */
     '--bui-color-aiblue': '#5cfffa',
     '--bui-color-aiblue-light': '#f0fffc',
-    '--bui-color-aiblue-dark': '#1d858c',
+    '--bui-color-aiblue-dark': '#00898e',
 
     /** 主题 */
     '--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-color-warning': 'var(--bui-color-yellow)',
+    '--bui-color-warning-light': 'var(--bui-color-yellow-light)',
+    '--bui-color-warning-dark': 'var(--bui-color-yellow-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-warning': 'rgba(255, 166, 8, 0.4)',
     '--bui-color-border-danger': 'rgba(255, 71, 26, 0.4)',
+    '--bui-color-border-purple': 'rgba(117, 77, 255, 0.4)',
 
     /** 主题色渐变 */
-    '--bui-color-primary-start': '#ffb300',
+    '--bui-color-primary-start': '#ff8500',
     '--bui-color-primary-end': 'var(--bui-color-primary)',
     '--bui-color-info-start': '#5bc8ff',
     '--bui-color-info-end': 'var(--bui-color-info)',
@@ -85,14 +88,17 @@ export const pioneerLight = {
     '--bui-shape-radius-default': 'var(--bui-radius-4)',
 
     // Button
+    '--bui-btn-small-height': '21px',
+    '--bui-btn-height': '30px',
     '--bui-btn-full-height': '45px',
-    '--bui-btn-large-height': '30px',
-    '--bui-btn-full-font-size': '18px',
+    '--bui-btn-large-height': '45px',
+    '--bui-btn-full-font-size': 'var(--bui-title-size-3)',
+    '--bui-btn-large-font-size': 'var(--bui-title-size-3)',
     '--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-btn-small-border-radius': 'var(--bui-radius-3)',
+    '--bui-btn-border-radius': 'var(--bui-radius-4)',
+    '--bui-btn-large-border-radius': 'var(--bui-radius-5)',
+    '--bui-btn-full-border-radius': 'var(--bui-radius-5)',
 
     // Card
     '--bui-card-header-title-font-size': 'var(--bui-title-size-3)',
@@ -100,8 +106,15 @@ export const pioneerLight = {
     // Tabs
     '--bui-tab-font-size': 'var(--bui-title-size-4)',
     '--bui-tab-color': 'var(--bui-color-fg-muted)',
-    '--bui-tabs-indicator-height': '4PX',
+    '--bui-tabs-indicator-height': '6PX',
     '--bui-tabs-indicator-border-radius': '2px',
+    '--bui-tabs-indicator-width': '27px',
     '--bui-tabs-indicator-box-shadow': '0 2px 4px 0 rgba(255, 98, 0, 0.2)',
+    '--bui-tabs-indicator-bg':
+      'linear-gradient(90deg,var(--bui-color-primary-start) 0%,var(--bui-color-primary-end) 100%)',
+
+    // Calendar
+    '--bui-calendar-middle-bg-color': 'var(--bui-color-primary-light)',
+    '--bui-calendar-range-both-ends-bg-color': '#ffb999',
   },
 };

package/themes/default-light.less

@@ -1,8 +1,8 @@
 /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
 .default-light() {
-  --bui-font-family:
-    'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB',
-    'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
+  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
+    sans-serif;
   --bui-color-red: #ff335c;
   --bui-color-red-light: #ffebef;
   --bui-color-pink: #dd10f2;
@@ -95,6 +95,7 @@
   --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-border-purple: rgba(139, 82, 255, 0.4);
   --bui-color-primary-start: #ef16b9;
   --bui-color-primary-end: var(--bui-color-red);
   --bui-color-secondary-start: #f32adf;

package/themes/dm-light.less

@@ -20,7 +20,7 @@
   --bui-color-blue-dark: #2b9ce5;
   --bui-color-aiblue: #5cfffa;
   --bui-color-aiblue-light: #f0fffc;
-  --bui-color-aiblue-dark: #1d858c;
+  --bui-color-aiblue-dark: #00898e;
   --bui-color-primary-start: var(--bui-color-red);
   --bui-color-primary-end: #ff4a72;
   --bui-color-info-start: #51bbff;

package/themes/index.less

@@ -3,4 +3,3 @@
 @import './default-dark.less';
 @import './dm-light.less';
 @import './pioneer-light.less';
-@import './pioneer-light-components.less';

package/themes/pioneer-light.less

@@ -1,9 +1,8 @@
 /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护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-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;
@@ -27,18 +26,21 @@
   --bui-color-blue-dark: #0757a3;
   --bui-color-aiblue: #5cfffa;
   --bui-color-aiblue-light: #f0fffc;
-  --bui-color-aiblue-dark: #1d858c;
+  --bui-color-aiblue-dark: #00898e;
   --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-color-warning: var(--bui-color-yellow);
+  --bui-color-warning-light: var(--bui-color-yellow-light);
+  --bui-color-warning-dark: var(--bui-color-yellow-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-warning: rgba(255, 166, 8, 0.4);
   --bui-color-border-danger: rgba(255, 71, 26, 0.4);
-  --bui-color-primary-start: #ffb300;
+  --bui-color-border-purple: rgba(117, 77, 255, 0.4);
+  --bui-color-primary-start: #ff8500;
   --bui-color-primary-end: var(--bui-color-primary);
   --bui-color-info-start: #5bc8ff;
   --bui-color-info-end: var(--bui-color-info);
@@ -51,20 +53,31 @@
   --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-small-height: 21px;
+  --bui-btn-height: 30px;
   --bui-btn-full-height: 45px;
-  --bui-btn-large-height: 30px;
-  --bui-btn-full-font-size: 18px;
+  --bui-btn-large-height: 45px;
+  --bui-btn-full-font-size: var(--bui-title-size-3);
+  --bui-btn-large-font-size: var(--bui-title-size-3);
   --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-btn-small-border-radius: var(--bui-radius-3);
+  --bui-btn-border-radius: var(--bui-radius-4);
+  --bui-btn-large-border-radius: var(--bui-radius-5);
+  --bui-btn-full-border-radius: var(--bui-radius-5);
   --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-height: 6PX;
   --bui-tabs-indicator-border-radius: 2px;
+  --bui-tabs-indicator-width: 27px;
   --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
+  --bui-tabs-indicator-bg: linear-gradient(
+    90deg,
+    var(--bui-color-primary-start) 0%,
+    var(--bui-color-primary-end) 100%
+  );
+  --bui-calendar-middle-bg-color: var(--bui-color-primary-light);
+  --bui-calendar-range-both-ends-bg-color: #ffb999;
 }

package/themes/pioneer-light-components.less

@@ -1,51 +0,0 @@
-// 无法用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%
-      );
-    }
-  }
-}