@bifrostui/react 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/Badge/{Badge.css → index.css}

@@ -1,14 +1,18 @@
+:root,
+page,
+xhs-page {
+  --bui-badge-position: 14%;
+  --bui-badge-min-width: 15px;
+  --bui-badge-height: 15px;
+  --bui-badge-line-height: 15px;
+  --bui-badge-padding: 0 3px;
+  --bui-badge-border-radius: 8px;
+  --bui-badge-outlined-padding: 0 2px;
+  --bui-badge-dot-size: 9px;
+  --bui-badge-bubble-padding: 0 5px;
+  --bui-badge-bubble-border-radius: 6px 6px 6px 0;
+}
 .bui-badge {
-  --badge-position: var(--bui-badge-position, 14%);
-  --min-width: var(--bui-badge-min-width, 15px);
-  --height: var(--bui-badge-height, 15px);
-  --line-height: var(--bui-badge-line-height, 15px);
-  --padding: var(--bui-badge-padding, 0 3px);
-  --border-radius: var(--bui-badge-border-radius, 8px);
-  --outlined-padding: var(--bui-badge-outlined-padding, 0 2px);
-  --dot-size: var(--bui-badge-dot-size, 9px);
-  --bubble-padding: var(--bui-badge-bubble-padding, 0 5px);
-  --bubble-border-radius: var(--bui-badge-bubble-border-radius, 6px 6px 6px 0);
   display: inline-block;
   font-family: var(--bui-font-family);
 }
@@ -18,18 +22,18 @@
 .bui-badge-position .bui-badge-contained,
 .bui-badge-position .bui-badge-outlined {
   position: absolute;
-  top: var(--badge-position);
-  right: var(--badge-position);
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
   transform: scale(1) translate(50%, -50%);
 }
 .bui-badge-position .bui-badge-dot {
-  top: var(--badge-position);
-  right: var(--badge-position);
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
   transform: scale(1) translate(50%, -50%);
 }
 .bui-badge-position .bui-badge-bubble {
-  top: var(--badge-position);
-  right: var(--badge-position);
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
   transform: scale(1) translate(50%, -50%);
 }
 .bui-badge-contained,
@@ -38,18 +42,18 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  min-width: var(--min-width);
-  height: var(--height);
-  line-height: var(--line-height);
-  padding: var(--padding);
+  min-width: var(--bui-badge-min-width);
+  height: var(--bui-badge-height);
+  line-height: var(--bui-badge-line-height);
+  padding: var(--bui-badge-padding);
   font-size: var(--bui-text-size-4);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-badge-border-radius);
   color: var(--bui-color-bg-view);
   white-space: nowrap;
   z-index: 1;
 }
 .bui-badge-outlined {
-  padding: var(--outlined-padding);
+  padding: var(--bui-badge-outlined-padding);
 }
 .bui-badge-primary {
   background-color: var(--bui-color-primary);
@@ -66,16 +70,23 @@
 .bui-badge-danger {
   background-color: var(--bui-color-danger);
 }
+.bui-badge-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-badge-dark {
+  background-color: var(--bui-color-fg-default);
+}
 .bui-badge-dot {
-  width: var(--dot-size);
+  width: var(--bui-badge-dot-size);
   min-width: 0;
-  height: var(--dot-size);
+  height: var(--bui-badge-dot-size);
   padding: 0;
   border-radius: 100%;
 }
 .bui-badge-bubble {
-  border-radius: var(--bubble-border-radius);
-  padding: var(--bubble-padding);
+  border-radius: var(--bui-badge-bubble-border-radius);
+  padding: var(--bui-badge-bubble-padding);
 }
 .bui-badge-outlined {
   background: var(--bui-color-bg-view);
@@ -100,6 +111,15 @@
   border: 1px solid var(--bui-color-danger);
   color: var(--bui-color-danger);
 }
+.bui-badge-outlined.bui-badge-light {
+  background: var(--bui-color-bg-default);
+  border: 1px solid var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-dark {
+  border: 1px solid var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
+}
 .bui-badge-outlined.bui-badge-bubble {
-  border-radius: var(--bubble-border-radius);
+  border-radius: var(--bui-badge-bubble-border-radius);
 }

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { BreadcrumbProps } from './Breadcrumb.types';
-import './Breadcrumb.less';
+import './index.less';
 declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<BreadcrumbProps<"nav", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Breadcrumb;

package/dist/Breadcrumb/Breadcrumb.js

@@ -59,7 +59,7 @@ module.exports = __toCommonJS(Breadcrumb_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_BreadcrumbItem = __toESM(require("./BreadcrumbItem"));
-var import_Breadcrumb2 = require("./Breadcrumb.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-breadcrumb";
 const Breadcrumb = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {

package/dist/Breadcrumb/index.css

@@ -0,0 +1,38 @@
+:root,
+page,
+xhs-page {
+  --bui-breadcrumb-margin: 0;
+  --bui-breadcrumb-padding: 0;
+  --bui-breadcrumb-color: rgba(0, 0, 0, 0.45);
+  --bui-breadcrumb-item-separator-margin: 0 8px;
+  --bui-breadcrumb-last-item-color: rgba(0, 0, 0, 0.88);
+}
+.bui-breadcrumb {
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  color: var(--bui-breadcrumb-color);
+  list-style: none;
+  font-size: var(--bui-text-size-1);
+  line-height: var(--bui-line-height);
+}
+.bui-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  list-style: none;
+}
+.bui-breadcrumb-list a {
+  color: var(--bui-breadcrumb-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+.bui-breadcrumb-list li:last-child {
+  color: var(--bui-breadcrumb-last-item-color);
+}
+.bui-breadcrumb-item {
+  cursor: pointer;
+}
+.bui-breadcrumb-item-separator {
+  margin: var(--bui-breadcrumb-item-separator-margin);
+}

package/dist/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-import './Button.less';
+import './index.less';
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button/Button.js

@@ -58,7 +58,7 @@ __export(Button_exports, {
 module.exports = __toCommonJS(Button_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Button2 = require("./Button.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-btn";
 const ButtonIcon = ({ children, iconPosition }) => {
   return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon-${iconPosition}` }, children);
@@ -98,7 +98,8 @@ const Button = /* @__PURE__ */ import_react.default.forwardRef(
           },
           className
         ),
-        ref
+        ref,
+        disabled
       }, others),
       startIcon && /* @__PURE__ */ import_react.default.createElement(ButtonIcon, { iconPosition: "start" }, startIcon),
       children,

package/{es/Button/Button.css → dist/Button/index.css}

@@ -1,3 +1,28 @@
+:root,
+page,
+xhs-page {
+  --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-small-border-radius: 120px;
+  --bui-btn-large-border-radius: 120px;
+  --bui-btn-full-border-radius: 120px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-background: var(--bui-color-bg-view);
+  --bui-btn-border: 0;
+  --bui-btn-height: 27px;
+  --bui-btn-small-height: 24px;
+  --bui-btn-large-height: 33px;
+  --bui-btn-full-height: 42px;
+  --bui-btn-subtle-border: 0;
+  --bui-btn-outlined-border: 1px solid var(--bui-color-neutral-4);
+  --bui-btn-disabled-opacity: 0.5;
+  --bui-btn-small-padding: 0 11px;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-large-padding: 0 14px;
+  --bui-btn-full-font-size: var(--bui-title-size-4);
+  --bui-btn-full-font-family: var(--bui-font-family);
+}
 .bui-btn {
   outline: 0;
   cursor: pointer;
@@ -9,7 +34,7 @@
   justify-content: center;
   white-space: nowrap;
   color: var(--bui-btn-color);
-  background: var(--bui-btn-bg);
+  background: var(--bui-btn-background);
   font-size: var(--bui-btn-font-size);
   font-weight: var(--bui-btn-font-weight);
   border: var(--bui-btn-border);
@@ -17,8 +42,7 @@
   height: var(--bui-btn-height);
   padding: var(--bui-btn-padding);
   line-height: var(--bui-line-height);
-  font-family: var(--bui-btn-font-family);
-  opacity: var(--bui-btn-opacity);
+  font-family: var(--bui-font-family);
 }
 @keyframes spin {
   from {
@@ -62,51 +86,56 @@
 }
 .bui-btn-disabled {
   pointer-events: none;
-  --bui-btn-opacity: 0.5;
+  opacity: var(--bui-btn-disabled-opacity);
 }
 .bui-btn-small {
-  --bui-btn-height: 24px;
-  --bui-btn-font-size: var(--bui-text-size-4);
-  --bui-btn-padding: 0 11px;
+  font-size: var(--bui-text-size-4);
+  padding: var(--bui-btn-small-padding);
+  height: var(--bui-btn-small-height);
+  border-radius: var(--bui-btn-small-border-radius);
 }
 .bui-btn-large {
-  --bui-btn-height: 33px;
-  --bui-btn-font-size: var(--bui-text-size-2);
+  font-size: var(--bui-text-size-2);
+  padding: var(--bui-btn-large-padding);
+  height: var(--bui-btn-large-height);
+  border-radius: var(--bui-btn-large-border-radius);
 }
 .bui-btn-full {
-  --bui-btn-height: 42px;
-  --bui-btn-font-size: var(--bui-title-size-4);
+  font-family: var(--bui-btn-full-font-family);
+  font-size: var(--bui-btn-full-font-size);
   width: 100%;
+  height: var(--bui-btn-full-height);
+  border-radius: var(--bui-btn-full-border-radius);
 }
 .bui-btn-text {
-  --bui-btn-bg: none;
+  background: none;
 }
 .bui-btn-text.bui-btn-primary {
-  --bui-btn-color: var(--bui-color-primary);
+  color: var(--bui-color-primary);
 }
 .bui-btn-text.bui-btn-success {
-  --bui-btn-color: var(--bui-color-success);
+  color: var(--bui-color-success);
 }
 .bui-btn-text.bui-btn-info {
-  --bui-btn-color: var(--bui-color-info);
+  color: var(--bui-color-info);
 }
 .bui-btn-text.bui-btn-warning {
-  --bui-btn-color: var(--bui-color-warning);
+  color: var(--bui-color-warning);
 }
 .bui-btn-text.bui-btn-danger {
-  --bui-btn-color: var(--bui-color-danger);
+  color: var(--bui-color-danger);
 }
 .bui-btn-text.bui-btn-light {
-  --bui-btn-color: var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
 }
 .bui-btn-text.bui-btn-dark {
-  --bui-btn-color: var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
 }
 .bui-btn-text.bui-btn-vip {
-  --bui-btn-color: var(--bui-color-vip);
+  color: var(--bui-color-vip);
 }
 .bui-btn-contained {
-  --bui-btn-bg: var(--bui-color-neutral-5);
+  background: var(--bui-color-neutral-5);
 }
 .bui-btn-contained.bui-btn-primary {
   color: var(--bui-color-white);
@@ -149,24 +178,24 @@
       var(--bui-color-danger-end) 100%);
 }
 .bui-btn-contained.bui-btn-light {
-  --bui-btn-color: var(--bui-color-fg-default);
-  --bui-btn-bg: var(--bui-color-bg-view);
+  color: var(--bui-color-fg-default);
+  background: var(--bui-color-bg-view);
 }
 .bui-btn-contained.bui-btn-dark {
-  --bui-btn-color: var(--bui-color-bg-view);
-  --bui-btn-bg: var(--bui-color-fg-default);
+  color: var(--bui-color-bg-view);
+  background: var(--bui-color-fg-default);
 }
 .bui-btn-contained.bui-btn-vip {
-  --bui-btn-color: #582331;
-  --bui-btn-bg:
+  color: #582331;
+  background-image:
     linear-gradient(
       90deg,
       var(--bui-color-vip-start) 3%,
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  --bui-btn-bg: transparent;
-  --bui-btn-border: 1px solid var(--bui-color-neutral-4);
+  background: none;
+  border: var(--bui-btn-outlined-border);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -189,19 +218,21 @@
   border-color: var(--bui-color-danger);
 }
 .bui-btn-outlined.bui-btn-light {
-  --bui-btn-color: var(--bui-color-bg-view);
-  --bui-btn-border: solid 1px var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
 }
 .bui-btn-outlined.bui-btn-dark {
-  --bui-btn-color: var(--bui-color-fg-default);
-  --bui-btn-border: solid 1px var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
+  border: 1px solid var(--bui-color-fg-default);
 }
 .bui-btn-outlined.bui-btn-vip {
   color: var(--bui-color-vip);
   border-color: var(--bui-color-vip);
 }
 .bui-btn-subtle {
-  --bui-btn-bg: var(--bui-color-gray-light);
+  background-image: none;
+  background-color: var(--bui-color-gray-light);
+  border: var(--bui-btn-subtle-border);
 }
 .bui-btn-subtle.bui-btn-warning {
   color: var(--bui-color-warning);
@@ -224,13 +255,13 @@
   background: var(--bui-color-danger-light);
 }
 .bui-btn-subtle.bui-btn-light {
-  --bui-btn-color: var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
 }
 .bui-btn-subtle.bui-btn-dark {
-  --bui-btn-color: var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
 }
 .bui-btn-subtle.bui-btn-vip {
+  color: var(--bui-color-vip);
   position: relative;
-  --bui-btn-color: var(--bui-color-vip);
-  --bui-btn-bg: rgba(255, 134, 110, 0.3);
+  background-color: rgba(255, 134, 110, 0.3);
 }

package/dist/Calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CalendarProps } from './Calendar.types';
-import './Calendar.less';
+import './index.less';
 declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Calendar;

package/dist/Calendar/Calendar.js

@@ -67,7 +67,7 @@ var import_isoWeek = __toESM(require("dayjs/plugin/isoWeek"));
 var import_react = __toESM(require("react"));
 var import_utils2 = require("./utils");
 var import_locales = require("../locales");
-var import_Calendar2 = require("./Calendar.css");
+var import_index = require("./index.css");
 import_dayjs.default.extend(import_isoWeek.default);
 const classes = {
   root: "bui-calendar",
@@ -153,14 +153,14 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         import_icons.CaretLeftIcon,
         {
           className: `${classes.handler}-btn-icon`,
-          htmlColor: isMinMonth && "#cccccc"
+          htmlColor: isMinMonth && "var(--bui-color-fg-disabled)"
         }
       ),
       right: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ import_react.default.createElement(
         import_icons.CaretRightIcon,
         {
           className: `${classes.handler}-btn-icon`,
-          htmlColor: isMaxMonth && "#cccccc"
+          htmlColor: isMaxMonth && "var(--bui-color-fg-disabled)"
         }
       )
     };

package/dist/Calendar/{Calendar.css → index.css}

@@ -1,19 +1,23 @@
+:root,
+page,
+xhs-page {
+  --bui-calendar-padding: 6px 12px 7px;
+  --bui-calendar-week-height: 30px;
+  --bui-calendar-handler-height: 28px;
+  --bui-calendar-handler-margin-bottom: 7px;
+  --bui-calendar-handler-text-width: 80px;
+  --bui-calendar-handler-btn-width: 46px;
+  --bui-calendar-handler-btn-height: 100%;
+  --bui-calendar-handler-btn-icon-font-size: 28px;
+  --bui-calendar-day-box-height: 30px;
+  --bui-calendar-day-box-margin-bottom: 7px;
+  --bui-calendar-day-disabled-color: #9c9ca5;
+  --bui-calendar-middle-color: #000;
+  --bui-calendar-middle-background-color: #ffeaf1;
+  --bui-calendar-range-both-ends-color: #000;
+  --bui-calendar-range-both-ends-background-color: #ffc7da;
+}
 .bui-calendar {
-  --padding: var(--bui-calendar-padding, 6px 12px 7px);
-  --week-height: var(--bui-calendar-week-height, 30px);
-  --handler-height: var(--bui-calendar-handler-height, 28px);
-  --handler-margin-bottom: var(--bui-calendar-handler-margin-bottom, 7px);
-  --handler-text-width: var(--bui-calendar-handler-text-width, 80px);
-  --handler-btn-width: var(--bui-calendar-handler-btn-width, 46px);
-  --handler-btn-height: var(--bui-calendar-handler-btn-height, 100%);
-  --handler-btn-icon-font-size: var(--bui-calendar-handler-btn-icon-font-size, 28px);
-  --day-box-height: var(--bui-calendar-day-box-height, 30px);
-  --day-box-margin-bottom: var(--bui-calendar-day-box-margin-bottom, 7px);
-  --day-disabled-color: var(--bui-calendar-day-disabled-color, #9c9ca5);
-  --middle-color: var(--bui-calendar-middle-color, #000);
-  --middle-background-color: var(--bui-calendar-middle-background-color, #ffeaf1);
-  --range-both-ends-color: var(--bui-calendar-range-both-ends-color, #000);
-  --range-both-ends-background-color: var(--bui-calendar-range-both-ends-background-color, #ffc7da);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -21,11 +25,11 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  padding: var(--padding);
+  padding: var(--bui-calendar-padding);
   font-family: var(--bui-font-family);
 }
 .bui-calendar-week {
-  height: var(--week-height);
+  height: var(--bui-calendar-week-height);
   font-size: var(--bui-text-size-2);
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
@@ -44,21 +48,21 @@
   color: var(--bui-color-primary);
 }
 .bui-calendar-handler {
-  height: var(--handler-height);
+  height: var(--bui-calendar-handler-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--handler-margin-bottom);
+  margin-bottom: var(--bui-calendar-handler-margin-bottom);
 }
 .bui-calendar-handler-text {
-  width: var(--handler-text-width);
+  width: var(--bui-calendar-handler-text-width);
   font-size: var(--bui-title-size-3);
   font-weight: var(--bui-font-weight-medium);
   text-align: center;
 }
 .bui-calendar-handler-btn {
   font-size: 16px;
-  height: var(--handler-btn-height);
+  height: var(--bui-calendar-handler-btn-width);
   width: var(--handler-btn-width);
   cursor: pointer;
   display: flex;
@@ -66,7 +70,7 @@
   justify-content: center;
 }
 .bui-calendar-handler-btn-icon {
-  font-size: var(--handler-btn-icon-font-size);
+  font-size: var(--bui-calendar-handler-btn-icon-font-size);
 }
 .bui-calendar-month {
   display: flex;
@@ -75,8 +79,8 @@
 }
 .bui-calendar-day-box {
   width: 14.28%;
-  height: var(--day-box-height);
-  margin-bottom: var(--day-box-margin-bottom);
+  height: var(--bui-calendar-day-box-height);
+  margin-bottom: var(--bui-calendar-day-box-margin-bottom);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -94,27 +98,27 @@
   cursor: pointer;
 }
 .bui-calendar-day.bui-calendar-disabled {
-  color: var(--day-disabled-color);
+  color: var(--bui-calendar-day-disabled-color);
 }
 .bui-calendar-today {
   color: var(--bui-color-primary);
 }
 .bui-calendar-middle {
-  color: var(--middle-color);
+  color: var(--bui-calendar-middle-color);
   border-radius: 0;
-  background-color: var(--middle-background-color);
+  background-color: var(--bui-calendar-middle-background-color);
 }
 .bui-calendar-start {
-  color: var(--range-both-ends-color);
-  background-color: var(--range-both-ends-background-color);
+  color: var(--bui-calendar-range-both-ends-color);
+  background-color: var(--bui-calendar-range-both-ends-background-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .bui-calendar-end {
-  color: var(--range-both-ends-color);
-  background-color: var(--range-both-ends-background-color);
+  color: var(--bui-calendar-range-both-ends-color);
+  background-color: var(--bui-calendar-range-both-ends-background-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/dist/Card/Card.css

@@ -1,8 +1,17 @@
+:root,
+page,
+xhs-page {
+  --bui-card-header-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-footer-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-header-title-font-size: var(--bui-title-size-4);
+  --bui-card-content-font-size: var(--bui-text-size-2);
+  --bui-card-footer-font-size: var(--bui-text-size-2);
+}
 .bui-card {
   background-color: var(--bui-color-bg-view);
   border-radius: var(--bui-shape-radius-card);
   overflow: hidden;
-  font-family: var(--bui-card-font-family);
+  font-family: var(--bui-font-family);
 }
 .bui-card-header + .bui-card-content {
   padding-top: 0;

package/dist/Card/CardContent.css

@@ -1,5 +1,5 @@
 .bui-card-content {
   padding: var(--bui-spacing-lg);
   color: var(--bui-color-fg-muted);
-  font-size: var(--bui-card-font-size);
+  font-size: var(--bui-card-content-font-size);
 }

package/dist/Card/CardFooter.css

@@ -2,6 +2,6 @@
   color: var(--bui-color-fg-muted);
   display: flex;
   align-items: center;
-  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
-  font-size: var(--bui-card-font-size);
+  padding: var(--bui-card-footer-padding);
+  font-size: var(--bui-card-footer-font-size);
 }

package/dist/Card/CardHeader.css

@@ -1,12 +1,12 @@
 .bui-card-header {
-  --bui-card-font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
   flex-direction: row;
   position: relative;
-  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  padding: var(--bui-card-header-padding);
+  font-size: var(--bui-title-size-4);
   font-weight: var(--bui-font-weight-bold);
-  font-family: var(--bui-card-font-family);
+  font-family: var(--bui-font-family);
   color: var(--bui-color-fg-default);
 }
 .bui-card-header-title {
@@ -15,6 +15,7 @@
   text-overflow: ellipsis;
   max-width: 100%;
   flex-shrink: 0;
+  font-size: var(--bui-card-header-title-font-size);
   font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-card-header-subtitle {

package/dist/Card/CardHeader.js

@@ -66,13 +66,13 @@ const CardHeader = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, { title, subtitle, className, extra, endIcon, onClick } = _a, others = __objRest(_a, ["title", "subtitle", "className", "extra", "endIcon", "onClick"]);
     const chevron = (() => {
       if (typeof endIcon === "boolean") {
-        return endIcon ? /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", htmlColor: "#ced1d6" }) : null;
+        return endIcon ? /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", color: "disabled" }) : null;
       }
       if (import_react.default.isValidElement(endIcon)) {
         return endIcon;
       }
       if (onClick) {
-        return /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", htmlColor: "#ced1d6" });
+        return /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", color: "disabled" });
       }
       return null;
     })();