@bifrostui/styles 1.4.5-beta.1 → 1.4.5-beta.3

package/dist/index.css

@@ -5,6 +5,9 @@ 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-color-red: #ff335c;
   --bui-color-red-light: #ffebef;
@@ -120,9 +123,30 @@ xhs-page,
   --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-btn-font-size: var(--bui-text-size-3);
+  --bui-btn-font-weight: var(--bui-font-weight-medium);
+  --bui-btn-border-radius: 120px;
+  --bui-btn-height: 27px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-bg: var(--bui-color-bg-view);
+  --bui-btn-opacity: 1;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-border: 0;
+  --bui-btn-font-family: var(--bui-font-family);
+  --bui-card-font-family: var(--bui-font-family);
+  --bui-card-font-size: var(--bui-text-size-2);
+  --bui-tabs-font-family: var(--bui-font-family);
+  --bui-tabs-font-size: var(--bui-text-size-1);
+  --bui-tabs-height: 39px;
+  --bui-tabs-color: var(--bui-color-fg-subtle);
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-bg: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3px;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
 }
 /** 大麦主题-高亮 */
 .bui-dm-light,
@@ -213,7 +237,7 @@ xhs-page,
   --bui-color-fg-muted: var(--bui-color-neutral-2);
   --bui-color-fg-subtle: var(--bui-color-neutral-3);
   --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
-  --bui-color-bg-default: var(--bui-color-neutral-6);
+  --bui-color-bg-default: #f0f3f7;
   --bui-color-bg-view: var(--bui-color-neutral-7);
   --bui-color-bg-popover: var(--bui-color-neutral-7);
   --bui-color-bg-alpha-light-9: rgba(255, 255, 255, 0.9);
@@ -287,31 +311,26 @@ xhs-page,
 [data-color-mode][data-theme='pioneer'] .bui-btn-medium {
   --bui-btn-border-radius: 6px;
 }
+.bui-pioneer-light .bui-btn-small,
+[data-color-mode][data-theme='pioneer'] .bui-btn-small {
+  --bui-btn-border-radius: 6px;
+}
 .bui-pioneer-light .bui-tabs,
 [data-color-mode][data-theme='pioneer'] .bui-tabs {
   --bui-tabs-font-size: var(--bui-title-size-4);
   --bui-tabs-active-font-weight: 700;
   --bui-tabs-color: var(--bui-color-fg-muted);
-  --bui-tabs-indicator-width: 36px;
   /* prettier-ignore */
-  --bui-tabs-indicator-height: 7PX;
+  --bui-tabs-indicator-height: 4PX;
   --bui-tabs-indicator-border-radius: 2px;
-  --bui-tabs-indicator-bottom: 6px;
-  --bui-tabs-indicator-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
+  --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
 }
 .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%);
 }
-.bui-pioneer-light .bui-tab-active,
-[data-color-mode][data-theme='pioneer'] .bui-tab-active {
-  --bui-tabs-font-family: var(--bui-font-family-accent);
-  --bui-tabs-font-size: var(--bui-title-size-2);
-  --bui-tabs-color: var(--bui-color-fg-default);
-}
-.bui-pioneer-light .bui-card-header,
-[data-color-mode][data-theme='pioneer'] .bui-card-header {
-  --bui-card-font-family: var(--bui-font-family-accent);
+.bui-pioneer-light .bui-card-header-title,
+[data-color-mode][data-theme='pioneer'] .bui-card-header-title {
   --bui-card-font-size: var(--bui-title-size-3);
 }
 /** 暗黑模式 */

package/mixins/gradient.less

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/styles",
-  "version": "1.4.5-beta.1",
+  "version": "1.4.5-beta.3",
   "main": "dist/index.css",
   "description": "Common style definitions for BUI React components",
   "homepage": "http://bui.taopiaopiao.com",

package/theme/default-light.less

@@ -1,4 +1,9 @@
 .light() {
+  // 字体
+  --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;
@@ -78,7 +83,7 @@
   // 用于失效、不可用等状态
   --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);
@@ -147,8 +152,34 @@
   --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;
+  // Components Variables
+  // Button
+  --bui-btn-font-size: var(--bui-text-size-3);
+  --bui-btn-font-weight: var(--bui-font-weight-medium);
+  --bui-btn-border-radius: 120px;
+  --bui-btn-height: 27px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-bg: var(--bui-color-bg-view);
+  --bui-btn-opacity: 1;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-border: 0;
+  --bui-btn-font-family: var(--bui-font-family);
+
+  // Card
+  --bui-card-font-family: var(--bui-font-family);
+  --bui-card-font-size: var(--bui-text-size-2);
+
+  // Tabs
+  --bui-tabs-font-family: var(--bui-font-family);
+  --bui-tabs-font-size: var(--bui-text-size-1);
+  --bui-tabs-height: 39px;
+  --bui-tabs-color: var(--bui-color-fg-subtle);
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-bg: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3px;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
 }

package/theme/pioneer-light.less

@@ -84,7 +84,7 @@
   --bui-color-fg-disabled: fade(#181818, 50%);
 
   // 默认背景色
-  --bui-color-bg-default: var(--bui-color-neutral-6);
+  --bui-color-bg-default: #f0f3f7;
   // 视图背景色
   --bui-color-bg-view: var(--bui-color-neutral-7);
   --bui-color-bg-popover: var(--bui-color-neutral-7);
@@ -194,17 +194,19 @@
     --bui-btn-border-radius: 6px;
   }
 
+  .bui-btn-small {
+    --bui-btn-border-radius: 6px;
+  }
+
   .bui-tabs {
     --bui-tabs-font-size: var(--bui-title-size-4);
     --bui-tabs-active-font-weight: 700;
     --bui-tabs-color: var(--bui-color-fg-muted);
-    --bui-tabs-indicator-width: 36px;
 
     /* prettier-ignore */
-    --bui-tabs-indicator-height: 7PX;
+    --bui-tabs-indicator-height: 4PX;
     --bui-tabs-indicator-border-radius: 2px;
-    --bui-tabs-indicator-bottom: 6px;
-    --bui-tabs-indicator-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
+    --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
 
     .bui-tabs-indicator {
       background-image: linear-gradient(
@@ -216,14 +218,7 @@
     }
   }
 
-  .bui-tab-active {
-    --bui-tabs-font-family: var(--bui-font-family-accent);
-    --bui-tabs-font-size: var(--bui-title-size-2);
-    --bui-tabs-color: var(--bui-color-fg-default);
-  }
-
-  .bui-card-header {
-    --bui-card-font-family: var(--bui-font-family-accent);
+  .bui-card-header-title {
     --bui-card-font-size: var(--bui-title-size-3);
   }
 }