@chatui/core/es/styles/var.less

The React library for Chatbot UI

@global-style: true;

// Color Palette
@brand-1: #ff6200;
@brand-2: #ffb300;
@brand-3: #ffe0cc;
@black: #000;
@white: #fff;
@gray-1: #11192d;
@gray-2: #50607a;
@gray-3: #7c889c;
@gray-4: #cacfd7;
@gray-5: #50607a;
@gray-6: #e5e5e5;
@gray-7: #f5f5f5;
@gray-8: #f3f6f8;

@blue: #0080ff;
@gray-dark: #11192d;
@green: #1dbf1d;
@orange: #ff6200;
@red: #ff0300;
@yellow: #ffb300;
@yellow-light: #fff9db;

// Box Shadow
@shadow-1: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
@shadow-2: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
@shadow-3: 0 6px 10px 0 rgba(0, 0, 0, 0.08);

// Gutter
@gutter: 12px;

// Body
@body-bg: @white;
@body-color: var(--color-text-1);

// Links
@link-color: var(--blue);
@link-decoration: none;
// @link-hover-color: darken(@link-color, 15%);
@link-hover-decoration: underline;

// Typography
@font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
@font-family-base: @font-family-sans-serif;

@font-size-root: 16px;
@font-size-base: 1rem;

@font-size-xxs: 1rem * (10px / @font-size-root);
@font-size-xs: 1rem * (12px / @font-size-root);
@font-size-sm: 1rem * (14px / @font-size-root);
@font-size-md: 1rem * (16px / @font-size-root);
@font-size-lg: 1rem * (18px / @font-size-root);

// @font-weight-lighter: lighter;
// @font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 500;
// @font-weight-bolder: bolder;

@font-weight-base: @font-weight-normal;

@line-height-base: 1.5;
@line-height-lg: 1.75;
@line-height-sm: 1.25;

// Border
@border-width: 1px;
// @border-color: @gray-4;
// @border-radius-sm: 0.25rem; // 4px
// @border-radius-md: 0.75rem; // 12px
// @border-radius-lg: 1.25rem; // 20px

// Button
@btn-padding: 5px 12px;
@btn-border-radius: 999px;
@btn-bg: var(--color-fill-1);
@btn-font-family: inherit;
@btn-font-size: @font-size-sm;
@btn-font-weight: @font-weight-normal;
@btn-line-height: @line-height-base;

@btn-hover-bg: rgba(0, 0, 0, 0.04);
@btn-active-bg: rgba(0, 0, 0, 0.08);

@btn-padding-sm: 4px 12px;
// @btn-border-radius-sm: 15px;
@btn-font-size-sm: @font-size-sm;

@btn-padding-lg: 7px 12px;
// @btn-border-radius-lg: 50px;
@btn-font-size-lg: @font-size-md;

@btn-block-spacing-y: 9px;

@btn-border-width: @border-width;

@btn-transition: 0.15s ease-in-out;

// Composer
@composer-padding: 9px var(--gutter);

@composer-input-max-height: 132px;
@composer-input-min-height: 36Px;
@composer-input-padding: 8px 12px;
@composer-input-bg: var(--color-fill-1);
@composer-input-caret-color: var(--brand-2);
@composer-input-transition: border-color 0.15s ease-in-out;

// Input
@input-width: 100%;
@input-min-height: 24px;
@input-margin: 0;
@input-padding: 5px @gutter;
@input-border: 1px solid var(--color-line-1);
@input-border-radius: 12px;
@input-bg: var(--color-fill-1);
@input-font-family: inherit;
@input-font-size: @font-size-sm;
@input-line-height: 1.5;
@input-color: var(--color-text-1);
@input-resize: none;

// List
@list-bg: var(--color-fill-1);
@list-border-width: @border-width;
@list-border-color: var(--color-line-1);
@list-border-radius: 2px;

@list-item-padding: 10px var(--gutter);
@list-item-color: var(--color-text-1);
@list-item-font-size: 15px;
@list-item-line-height: 1.6;
@list-item-icon-color: var(--color-text-3);

@list-item-hover-bg: @btn-hover-bg;

@list-item-active-bg: var(--color-fill-2);

// Navbar
@navbar-height: 44Px;
@navbar-padding: 0 var(--gutter);

@navbar-color: var(--color-text-1);
@navbar-font-size: 17Px;
@navbar-logo-height: @navbar-height - 6Px;

// Notice
@notice-padding: @gutter;
@notice-border-radius: 12px;
@notice-bg: var(--color-fill-1);
@notice-icon-color: var(--brand-1);

@notice-content-color: var(--color-text-1);
@notice-content-font-size: 13px;

// Popover
@popover-border-radius: 6px;
@popover-bg: var(--color-fill-1);
@popover-box-shadow: @modal-box-shadow;

// RateActions
@rate-btn-bg: var(--color-fill-1);

// Card
@card-padding: 12px;
@card-title-padding: @card-padding @card-padding 6px;
@card-title-font-size: @font-size-md;
@card-title-font-weight: @font-weight-bold;
@card-subtitle-font-size: @font-size-xxs;
@card-subtitle-color: var(--color-text-3);
@card-border-width: @border-width;
@card-border-radius: 12px;
// @card-border-color: ;
@card-bg: var(--color-fill-1);

@card-text-color: var(--color-text-1);

@card-size-xl: 300Px;
@card-size-lg: 160px;
@card-size-md: 120px;
@card-size-sm: 104px;
@card-size-xs: 80px;

// 卡片自适应宽度 = 100%宽度 - 赞踩宽度 - 赞踩左右边距
@card-fluid-width: calc(100% - var(--rate-width) - 16Px);
@card-max-width: 432Px;
@card-min-width: 256Px;

@card-btn-padding: 10px;
@card-btn-line-height: 1.5;
@card-btn-spacing-x: @gutter;
@card-btn-spacing-y: 0;
@card-btn-border-color: var(--color-line-1);

@card-column-btn-bg: var(--color-fill-1);
@card-column-btn-color: var(--color-text-2);

@card-column-btn-primary-color: var(--brand-1);

@card-column-btn-hover-bg: var(--color-fill-2);
@card-column-btn-active-bg: var(--color-fill-2);

// Carousel
@carousel-dots-bottom: 8px;

@carousel-dot-width: 8px;
@carousel-dot-height: @carousel-dot-width;
@carousel-dot-margin: 0 4px;
@carousel-dot-padding: 0;
@carousel-dot-border: 0;
@carousel-dot-border-radius: 50%;
@carousel-dot-transition: 0.3s;

// Icon
@icon-size-lg: 30px;

// IconButton
@icon-button-border: 0;
@icon-button-border-radius: 3px;
@icon-button-bg: transparent;
@icon-button-color: var(--color-text-2);
@icon-button-size: 18px;

@icon-button-primary-color: var(--brand-2);

@icon-button-lg-border-radius: 6px;
@icon-button-lg-size: 24px;

// Modals
@modal-width: 320px;
@modal-border-radius: 12px;

@modal-bg: var(--color-fill-1);
@modal-box-shadow: var(--shadow-3);

@modal-header-padding: @gutter;

@modal-title-margin: 0;
@modal-title-color: var(--color-text-1);
@modal-title-font-size: @font-size-lg;
@modal-title-font-weight: @font-weight-bold;

@modal-close-padding: 0;
@modal-close-color: var(--color-text-1);

@modal-footer-x-padding: @gutter;
@modal-btn-x-spacing: @gutter;

@modal-btn-y-padding: 12px;
@modal-btn-y-border-width: 1px;
@modal-btn-y-bg: var(--color-fill-1);
@modal-btn-y-color: var(--color-text-2);
@modal-btn-y-primary-color: var(--brand-1);

@modal-fade-transform: translate(0, -50px);
@modal-show-transform: none;
@modal-opacity: 0;
@modal-show-opacity: 1;
@modal-transition: transform 0.3s ease-out, opacity 0.15s linear;

// Popup
@popup-bg: var(--color-fill-1);

@popup-max-height: 70vh;
@popup-wide-width: 480px;

@popup-header-padding: 18px 40px 12px;

@popup-title-margin: @modal-title-margin;
@popup-title-color: @modal-title-color;
@popup-title-font-size: @modal-title-font-size;

@popup-subtitle-margin: 0;
@popup-subtitle-color: var(--color-text-3);
@popup-subtitle-font-size: @font-size-xs;

@popup-close-color: @modal-close-color;

@popup-footer-padding: 9px @gutter;
@popup-btn-x-spacing: @gutter;
@popup-btn-y-spacing: 9px;

// SendConfirm
@send-confirm-dialog-width: 480px;
@send-confirm-dialog-margin: 20px;
@send-confirm-inner-height: 320px;

// Progress bars
@progress-height: 2px;
@progress-bg: var(--color-line-1);
@progress-border-radius: 100px;
@progress-bar-bg: var(--blue);
@progress-bar-transition: width 0.6s ease;

@progress-bar-bg-success: var(--green);
@progress-bar-bg-error: var(--red);

// QuickReplies
@quick-replies-padding: 9Px var(--gutter);

@quick-reply-color: var(--color-text-1);
@quick-reply-font-size: 14Px;

@quick-reply-dot-top: 0;
@quick-reply-dot-right: 0;
@quick-reply-dot-size: 8px;
@quick-reply-dot-bg: var(--red);

// ScrollView
@scroll-view-spacing-x: 6px;

// Tag
@tag-margin: 0 4px 0 0;
@tag-padding: 0 6px;
@tag-border-radius: 4px;
@tag-color: var(--brand-1);
@tag-font-size: 12px;

// Price
@price-font-size: @font-size-sm;

// Goods
@goods-img-width: 72px;
@goods-img-height: @goods-img-width;
@goods-img-border-radius: 12px;

@goods-padding: @gutter;
@goods-gap: 9Px;
@goods-desc-color: var(--color-text-3);
@goods-meta-color: var(--color-text-3);
@goods-meta-font-size: @font-size-xxs;
@goods-border-width: 1px;
@goods-border-color: var(--color-line-1);
@goods-count-color: var(--color-text-3);
@goods-count-font-size: @font-size-sm;
@goods-unit-font-size: @font-size-xs;
@goods-buy-btn-bg: var(--brand-1);
@goods-buy-btn-color: #fff;
@goods-buy-btn-padding: 2px;

// Toast
@toast-content-padding: 18px 24px;
@toast-content-border-radius: 12px;
@toast-content-bg: rgba(0, 0, 0, 0.7);

@toast-message-margin: 0;
@toast-message-color: var(--color-fill-1);
@toast-message-font-size: 16px;

// Z-index
@zindex-backdrop: 100;
@zindex-modal: 100;
@zindex-popup: @zindex-modal;
@zindex-popover: 1030;
@zindex-toast: 200;
@zindex-tooltip: 200;
@zindex-recorder-toast: 100;

@zindex-navbar: 10;
@zindex-footer: 10;
@zindex-quick-replies: 110;
@zindex-rate-actions: 10;

@zindex-step-dot: 2;