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

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

@@ -1,14 +1,18 @@
+:root,
+page,
+xhs-page {
+  --bui-countdown-font-size: var(--bui-text-size-1);
+  --bui-countdown-color: var(--bui-color-fg-default);
+  --bui-countdown-font-weight: var(--bui-font-weight-normal);
+  --bui-countdown-slice-unit-margin: 0 2px;
+}
 .bui-countdown {
-  --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
-  --color: var(--bui-countdown-color, var(--bui-color-fg-default));
-  --font-weight: var(--bui-countdown-font-weight, var(--bui-font-weight-normal));
-  --slice-unit-margin: var(--bui-countdown-slice-unit-margin, 0 2px);
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-size: var(--font-size);
-  color: var(--color);
-  font-weight: var(--font-weight);
+  font-size: var(--bui-countdown-font-size);
+  color: var(--bui-countdown-color);
+  font-weight: var(--bui-countdown-font-weight);
   font-family: var(--bui-font-family);
 }
 .bui-countdown-slice {
@@ -35,5 +39,5 @@
     sans-serif;
 }
 .bui-countdown-slice-unit {
-  margin: var(--slice-unit-margin);
+  margin: var(--bui-countdown-slice-unit-margin);
 }

package/es/Dialog/index.css

@@ -1,30 +1,34 @@
+:root,
+page,
+xhs-page {
+  --bui-dialog-max-width: 300px;
+  --bui-dialog-border-radius: var(--bui-shape-radius-drawer);
+  --bui-dialog-title-padding: 0 40px 9px;
+  --bui-dialog-desc-padding: 0 24px;
+  --bui-dialog-footer-margin-top: 15px;
+  --bui-dialog-button-height: 53px;
+  --bui-dialog-button-line-height: 25px;
+  --bui-dialog-button-padding: 12px 0 13px;
+  --bui-dialog-button-font-size: 17px;
+  --bui-dialog-button-border-left: 1px solid rgba(0, 0, 0, 0.05);
+  --bui-dialog-button-active-background-color: rgba(54, 57, 64, 0.05);
+}
 .bui-dialog {
-  --max-width: var(--bui-dialog-max-width, 300px);
-  --border-radius: var(--bui-dialog-border-radius, var(--bui-shape-radius-drawer));
-  --title-padding: var(--bui-dialog-title-padding, 0 40px 9px);
-  --desc-padding: var(--bui-dialog-desc-padding, 0 24px);
-  --footer-margin-top: var(--bui-dialog-footer-margin-top, 15px);
-  --button-height: var(--bui-dialog-button-height, 53px);
-  --button-line-height: var(--bui-dialog-button-line-height, 25px);
-  --button-padding: var(--bui-dialog-button-padding, 12px 0 13px);
-  --button-font-size: var(--bui-dialog-button-font-size, 17px);
-  --button-border-left: var(--bui-dialog-button-border-left, 1px solid rgba(0, 0, 0, 0.05));
-  --button-active-background-color: var(--bui-dialog-button-active-background-color, rgba(54, 57, 64, 0.05));
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .bui-dialog-body {
   padding-top: 21px;
-  min-width: var(--max-width);
+  min-width: var(--bui-dialog-max-width);
   margin: 0 auto;
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-dialog-border-radius);
   background-clip: padding-box;
   background-color: var(--bui-color-bg-view);
   line-height: 21px;
 }
 .bui-dialog-body-title {
-  padding: var(--title-padding);
+  padding: var(--bui-dialog-title-padding);
   font-size: var(--bui-title-size-2);
   text-align: center;
   color: var(--bui-color-fg-default);
@@ -34,7 +38,7 @@
   margin-top: var(--bui-spacing-sm);
 }
 .bui-dialog-body-desc {
-  padding: var(--desc-padding);
+  padding: var(--bui-dialog-desc-padding);
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-title-size-4);
   text-align: center;
@@ -43,9 +47,8 @@
   padding-top: 0;
 }
 .bui-dialog-body-footer {
-  margin-top: var(--footer-margin-top);
+  margin-top: var(--bui-dialog-footer-margin-top);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
-  display: -webkit-box;
   display: flex;
 }
 .bui-dialog-body-input {
@@ -56,13 +59,13 @@
   flex: 1;
   display: block;
   width: 100%;
-  height: var(--button-height);
-  line-height: var(--button-line-height);
-  padding: var(--button-padding);
-  font-size: var(--button-font-size);
+  height: var(--bui-dialog-button-height);
+  line-height: var(--bui-dialog-button-line-height);
+  padding: var(--bui-dialog-button-padding);
+  font-size: var(--bui-dialog-button-font-size);
   border: 0;
   outline: 0;
-  border-left: var(--button-border-left);
+  border-left: var(--bui-dialog-button-border-left);
   border-radius: 0;
   text-align: center;
   box-sizing: border-box;
@@ -71,5 +74,5 @@
   border: none;
 }
 .bui-dialog-body-button:active {
-  background-color: var(--button-active-background-color);
+  background-color: var(--bui-dialog-button-active-background-color);
 }

package/es/Divider/Divider.d.ts

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

package/es/Divider/Divider.js

@@ -16,7 +16,7 @@ var __spreadValues = (a, b) => {
 };
 import clsx from "clsx";
 import React, { forwardRef } from "react";
-import "./Divider.css";
+import "./index.css";
 const prefixCls = "bui-divider";
 const Divider = forwardRef((props, ref) => {
   const {

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

@@ -1,20 +1,24 @@
+:root,
+page,
+xhs-page {
+  --bui-divider-height: 100%;
+  --bui-divider-width: 100%;
+  --bui-divider-border-width: 1px;
+  --bui-divider-line-width: 40px;
+}
 .bui-divider {
-  --height: var(--bui-divider-height, 100%);
-  --width: var(--bui-divider-width, 100%);
-  --border-width: var(--bui-divider-border-width, 1px);
-  --line-width: var(--bui-divider-line-width, 40px);
   border-color: var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
 .bui-divider-vertical {
-  height: var(--height);
+  height: var(--bui-divider-height);
   display: inline-block;
-  border-right-width: var(--border-width);
+  border-right-width: var(--bui-divider-border-width);
   border-right-style: solid;
 }
 .bui-divider-horizontal {
-  width: var(--width);
-  border-bottom-width: var(--border-width);
+  width: var(--bui-divider-width);
+  border-bottom-width: var(--bui-divider-border-width);
   border-bottom-style: solid;
 }
 .bui-divider-vertical-dashed {
@@ -31,8 +35,8 @@
   justify-content: center;
 }
 .bui-divider-line {
-  width: var(--line-width);
-  border-bottom-width: var(--border-width);
+  width: var(--bui-divider-line-width);
+  border-bottom-width: var(--bui-divider-border-width);
   border-bottom-style: solid;
   border-color: var(--bui-color-border-default);
 }

package/es/Drawer/Drawer.d.ts

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

package/es/Drawer/Drawer.js

@@ -33,7 +33,7 @@ import clsx from "clsx";
 import React, { useState } from "react";
 import Modal from "../Modal";
 import Slide from "../Slide";
-import "./Drawer.css";
+import "./index.css";
 const prefixCls = "bui-drawer";
 const oppositeDirection = {
   left: "right",

package/es/IconButton/IconButton.d.ts

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

package/es/IconButton/IconButton.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import { isMini } from "@bifrostui/utils";
 import clsx from "clsx";
 import React from "react";
-import "./IconButton.css";
+import "./index.css";
 const prefixCls = "bui-icon-btn";
 const IconButton = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
@@ -37,7 +37,7 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       className,
       children,
-      color = "default",
+      color = "neutral",
       disabled = false,
       size = "medium",
       variant = "default",
@@ -72,7 +72,7 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
       isMini && React.isValidElement(children) ? React.cloneElement(children, __spreadValues(__spreadValues({}, !isContainedVariant && {
         color: ((_b = children.props) == null ? void 0 : _b.color) || color
       }), isContainedVariant && {
-        htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "#fff"
+        htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "var(--bui-color-white)"
       })) : children
     );
   }

package/es/IconButton/IconButton.types.d.ts

@@ -10,16 +10,17 @@ export type IconButtonProps<D extends React.ElementType = 'button', P = {}> = Ov
          */
         size?: 'small' | 'medium' | 'large';
         /** 按钮颜色
-         * @default 'default'
+         * @default 'neutral'
          */
-        color?: ThemeColor | 'default';
+        color?: ThemeColor;
         /**
          * - default: 图标按钮
          * - contained: 实心填充按钮
          * - outlined: 描边按钮
+         * - subtle: 柔和按钮
          * @default 'default'
          */
-        variant?: 'default' | 'contained' | 'outlined';
+        variant?: 'default' | 'contained' | 'outlined' | 'subtle';
         /**
          * - circular: 圆形
          * - square: 正方形

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

@@ -1,10 +1,20 @@
+:root,
+page,
+xhs-page {
+  --bui-icon-btn-contained-bg-color: var(--bui-color-neutral-5);
+  --bui-icon-btn-color: var(--bui-color-fg-muted);
+  --bui-icon-btn-small-font-size: var(--bui-text-size-4);
+  --bui-icon-btn-font-size: 17px;
+  --bui-icon-btn-small-padding: var(--bui-spacing-xs);
+  --bui-icon-btn-padding: 5px;
+  --bui-icon-btn-large-padding: var(--bui-spacing-sm);
+  --bui-icon-btn-large-font-size: 23px;
+  --bui-icon-btn-disabled-opacity: 0.5;
+  --bui-icon-btn-outlined-border: 1px solid;
+  --bui-icon-btn-subtle-border: 1px solid transparent;
+  --bui-icon-btn-border: 1px solid transparent;
+}
 .bui-icon-btn {
-  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
-  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
-  --icon-size: var(--bui-icon-btn-font-size, 17px);
-  --user-area: var(--bui-icon-btn-padding, 5px);
-  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
-  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
   position: relative;
   display: inline-flex;
   height: auto;
@@ -12,12 +22,12 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color);
+  border: var(--bui-icon-btn-border);
+  color: var(--bui-icon-btn-color);
   cursor: pointer;
   font-family: var(--bui-font-family);
-  font-size: var(--icon-size);
-  padding: var(--user-area);
+  font-size: var(--bui-icon-btn-font-size);
+  padding: var(--bui-icon-btn-padding);
 }
 .bui-icon-btn::before {
   position: absolute;
@@ -40,28 +50,16 @@
   border: 0;
 }
 .bui-icon-btn-small {
-  font-size: var(--bui-text-size-4);
-  padding: var(--bui-spacing-xs);
-}
-.bui-icon-btn-small.bui-icon-btn-outlined,
-.bui-icon-btn-small.bui-icon-btn-contained {
-  padding: var(--bui-spacing-xs);
-}
-.bui-icon-btn-medium.bui-icon-btn-outlined,
-.bui-icon-btn-medium.bui-icon-btn-contained {
-  padding: var(--user-area);
+  font-size: var(--bui-icon-btn-small-font-size);
+  padding: var(--bui-icon-btn-small-padding);
 }
 .bui-icon-btn-large {
-  font-size: var(--large-font-size);
-  padding: var(--bui-spacing-sm);
-}
-.bui-icon-btn-large.bui-icon-btn-outlined,
-.bui-icon-btn-large.bui-icon-btn-contained {
-  padding: var(--bui-spacing-sm);
+  font-size: var(--bui-icon-btn-large-font-size);
+  padding: var(--bui-icon-btn-large-padding);
 }
 .bui-icon-btn-disabled {
   pointer-events: none;
-  opacity: var(--disabled-opacity);
+  opacity: var(--bui-icon-btn-disabled-opacity);
 }
 .bui-icon-btn-circular {
   border-radius: 100%;
@@ -84,8 +82,14 @@
 .bui-icon-btn-default.bui-icon-btn-warning {
   color: var(--bui-color-warning);
 }
+.bui-icon-btn-default.bui-icon-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-icon-btn-default.bui-icon-btn-dark {
+  color: var(--bui-color-fg-default);
+}
 .bui-icon-btn-outlined {
-  border: solid 1px;
+  border: var(--bui-icon-btn-outlined-border);
 }
 .bui-icon-btn-outlined.bui-icon-btn-primary {
   color: var(--bui-color-primary);
@@ -107,8 +111,16 @@
   color: var(--bui-color-danger);
   border-color: var(--bui-color-danger);
 }
+.bui-icon-btn-outlined.bui-icon-btn-light {
+  color: var(--bui-color-bg-view);
+  border-color: var(--bui-color-bg-view);
+}
+.bui-icon-btn-outlined.bui-icon-btn-dark {
+  color: var(--bui-color-fg-default);
+  border-color: var(--bui-color-fg-default);
+}
 .bui-icon-btn-contained {
-  background-color: var(--bg-color);
+  background-color: var(--bui-icon-btn-contained-bg-color);
 }
 .bui-icon-btn-contained.bui-icon-btn-primary {
   color: var(--bui-color-white);
@@ -150,3 +162,41 @@
       var(--bui-color-danger-start) 0%,
       var(--bui-color-danger-end) 100%);
 }
+.bui-icon-btn-contained.bui-icon-btn-light {
+  color: var(--bui-color-fg-default);
+  background: var(--bui-color-bg-view);
+}
+.bui-icon-btn-contained.bui-icon-btn-dark {
+  color: var(--bui-color-bg-view);
+  background: var(--bui-color-fg-default);
+}
+.bui-icon-btn-subtle {
+  background-color: var(--bui-color-gray-light);
+  border: var(--bui-icon-btn-subtle-border);
+}
+.bui-icon-btn-subtle.bui-icon-btn-warning {
+  color: var(--bui-color-warning);
+  background: var(--bui-color-warning-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-primary {
+  color: var(--bui-color-primary);
+  background: var(--bui-color-primary-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-info {
+  color: var(--bui-color-info);
+  background: var(--bui-color-info-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-success {
+  color: var(--bui-color-success);
+  background: var(--bui-color-success-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-danger {
+  color: var(--bui-color-danger);
+  background: var(--bui-color-danger-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-icon-btn-subtle.bui-icon-btn-dark {
+  color: var(--bui-color-fg-default);
+}

package/es/Image/index.css

@@ -1,5 +1,9 @@
+:root,
+page,
+xhs-page {
+  --bui-image-default-background-color: rgba(127, 127, 127, 0.2);
+}
 .bui-image {
-  --default-background-color: var(--bui-image-default-background-color, rgba(127, 127, 127, 0.2));
   width: auto;
   height: auto;
   display: inline-block;
@@ -32,5 +36,5 @@
 .bui-image-default-icon-item {
   width: 100%;
   height: 100%;
-  background-color: var(--default-background-color);
+  background-color: var(--bui-image-default-background-color);
 }

package/es/Input/Input.d.ts

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

package/es/Input/Input.js

@@ -33,7 +33,7 @@ import { ErrorCircleFilledIcon } from "@bifrostui/icons";
 import { isMini, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useState } from "react";
-import "./Input.css";
+import "./index.css";
 const prefixCls = "bui-input";
 const Input = forwardRef((props, ref) => {
   const _a = props, {
@@ -141,7 +141,7 @@ const Input = forwardRef((props, ref) => {
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })
     ),
-    clearable && !!inputValue && hasFocus && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ React.createElement(ErrorCircleFilledIcon, { htmlColor: "#959aa5" })),
+    clearable && !!inputValue && hasFocus && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ React.createElement(ErrorCircleFilledIcon, { htmlColor: "var(--bui-color-fg-subtle)" })),
     endIcon && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-icon ${prefixCls}-icon-end` }, endIcon)
   );
 });

package/es/Input/{Input.css → index.css}

@@ -1,18 +1,24 @@
+:root,
+page,
+xhs-page {
+  --bui-input-height: 32px;
+  --bui-input-padding: 4px 10px;
+  --bui-input-border-radius: var(--bui-shape-radius-default);
+  --bui-input-icon-start-margin-right: 3px;
+  --bui-input-icon-end-margin-left: 3px;
+  --bui-input-background-color: transparent;
+  --bui-input-disabled-background-color: rgba(0, 0, 0, 0.04);
+  --bui-input-clear-color: #ced1d6;
+  --bui-input-clear-font-size: var(--bui-title-size-3);
+}
 .bui-input {
-  --height: var(--bui-input-height, 32px);
-  --padding: var(--bui-input-padding, 4px 10px);
-  --border-radius: var(--bui-input-border-radius, var(--bui-shape-radius-default));
-  --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
-  --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
-  --background-color: var(--bui-input-background-color, transparent);
-  --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--height);
-  padding: var(--padding);
+  height: var(--bui-input-height);
+  padding: var(--bui-input-padding);
   box-sizing: border-box;
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-input-border-radius);
   border: 1px solid var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
@@ -23,29 +29,27 @@
   font-size: var(--bui-title-size-3);
 }
 .bui-input-icon-start {
-  margin-right: var(--icon-start-margin-right);
+  margin-right: var(--bui-input-icon-start-margin-right);
 }
 .bui-input-icon-end {
-  margin-left: var(--icon-end-margin-left);
+  margin-left: var(--bui-input-icon-end-margin-left);
 }
 .bui-input-input {
   flex: 1;
   min-width: 0;
-  display: flex;
-  align-items: center;
   padding: 0;
   height: 100%;
   color: var(--bui-color-fg-default);
   border: none;
   outline: none;
-  background-color: var(--background-color);
+  background-color: var(--bui-input-background-color);
   font-size: var(--bui-text-size-2);
 }
 .bui-input-input::placeholder {
   color: var(--bui-color-fg-subtle);
 }
 .bui-input-disabled {
-  background-color: var(--disabled-background-color);
+  background-color: var(--bui-input-disabled-background-color);
 }
 .bui-input-disabled .bui-input-input {
   color: var(--bui-color-fg-disabled);
@@ -57,9 +61,9 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--bui-color-fg-disabled);
+  color: var(--bui-input-clear-color);
   height: 100%;
-  font-size: var(--bui-title-size-3);
+  font-size: var(--bui-input-clear-font-size);
 }
 .bui-input .bui-mini-placeholder {
   width: auto;

package/es/ItemSelector/ItemSelector.miniapp.d.ts

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

package/es/ItemSelector/ItemSelector.miniapp.js

@@ -20,7 +20,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import ItemSelectorCore from "./ItemSelectorCore";
-import "./miniapp.css";
 const ItemSelector = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const { items } = props;

package/es/ItemSelector/ItemSelectorCore.d.ts

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

package/es/ItemSelector/ItemSelectorCore.js

@@ -31,7 +31,7 @@ import clsx from "clsx";
 import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
 import ScrollView from "../ScrollView";
 import Selector from "./Selector";
-import "./ItemSelector.css";
+import "./index.css";
 const DEVIATION_HEIGHT = "6vmin";
 const prefixCls = "bui-item-selector";
 const ItemSelector = /* @__PURE__ */ React.forwardRef(

package/es/List/List.css

@@ -1,7 +1,11 @@
+:root,
+page,
+xhs-page {
+  --bui-list-small-item-padding: 5px 12px;
+  --bui-list-medium-item-padding: 18px 12px;
+  --bui-list-large-item-padding: 20px 12px;
+}
 .bui-list {
-  --small-item-padding: var(--bui-list-small-item-padding, 5px 12px);
-  --medium-item-padding: var(--bui-list-medium-item-padding, 18px 12px);
-  --large-item-padding: var(--bui-list-large-item-padding, 20px 12px);
   background: var(--bui-color-bg-view);
   font-size: var(--bui-title-size-3);
   font-family: var(--bui-font-family);

package/es/List/ListItem.css

@@ -10,13 +10,13 @@
   color: var(--bui-color-fg-subtle);
 }
 .bui-list-small .bui-list-item {
-  padding: var(--small-item-padding);
+  padding: var(--bui-list-small-item-padding);
 }
 .bui-list-medium .bui-list-item {
-  padding: var(--medium-item-padding);
+  padding: var(--bui-list-medium-item-padding);
 }
 .bui-list-large .bui-list-item {
-  padding: var(--large-item-padding);
+  padding: var(--bui-list-large-item-padding);
 }
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);