tdesign-react
Version:
TDesign Component for React
106 lines (83 loc) • 3.68 kB
text/less
// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]
// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
// 如：@button-line-bg-color-hover
// 如：@button-line-height-s
@import "../../_variables.less";
// 颜色
// Menu 浅色模式下跟随全局变化，需要使用语义化 token；深色模式独立存在，使用底层颜色 token
@menu-theme-light: @bg-color-container;
@menu-theme-dark: @gray-color-13;
@menu-theme-primary: @brand-color;
@menu-color-light: @text-color-primary;
@menu-color-dark: @font-white-2;
@menu-item-color--light: @text-color-primary;
@menu-item-color--dark: @text-color-anti;
@menu-item-active-bg--light: @brand-color-light;
@menu-item-active-bg--dark: @brand-color;
@menu-item-active-color--light: @brand-color;
@menu-item-active-color--dark: @text-color-anti;
@menu-item-hover-color--light: @text-color-primary;
@menu-item-hover-bg--light: @bg-color-container-hover;
@menu-item-hover-bg--dark: @gray-color-10;
@menu-item-animation-bg--light: @bg-color-container-active;
@menu-item-animation-bg--dark: @gray-color-11;
@menu-item-disabled-color: @text-color-disabled;
@menu-item-disabled-color-dark: @font-white-4;
@menu-menu-group-title-color: @text-color-placeholder;
@menu-menu-group-title-color--dark: @font-white-3;
@menu-group-title-bg--collapse: @component-stroke;
@menu-group-title-bg--collapse--dark: @gray-color-10;
@menu-light-active-color: @brand-color;
@menu-dark-active-color: @text-color-anti;
@menu-light-active-bg: @bg-color-secondarycontainer-hover;
@menu-light-hover-bg: @bg-color-container-hover;
@menu-dark-active-bg: @gray-color-9;
@menu-dark-hover-bg: @gray-color-10;
@submenu-item-color: @text-color-primary;
@submenu-item-active-color: @brand-color;
@submenu-dark-item-active-color: #4582e6;
@menu-border-color: @component-stroke;
@menu-border-color--dark: @gray-color-10;
@menu-popup-item-color: @text-color-primary;
@menu-popup-item-hover-bg: @bg-color-container-hover;
@menu-popup-item-active-color: @brand-color;
@head-menu-popup-item-color: @text-color-primary;
@head-menu-popup-item-active-color: @text-color-primary;
@menu-head-item-color: @text-color-primary;
@menu-operations-color: @text-color-primary;
// head menu
@head-menu-item-height: @comp-size-m;
@head-menu-submenu-border-color: @component-stroke;
// default menu
@default-menu-width: 232px;
@default-menu-collapse-width: 64px;
@default-menu-active-color: @brand-color;
@default-menu-active-color--dark: @brand-color;
@default-menu-item-height: @comp-size-l;
@default-menu-item-color--light: @text-color-secondary;
@default-menu-item-color--dark: @font-white-2;
// popup
@popup-item-padding-left: @comp-paddingLR-l;
// 高度
@menu-height-default: @comp-size-xxxl;
// z-index
@menu-outer-zindex: 1000;
// 字号
@menu-font-size: @font-body-medium;
@menu-extra-font-size: @font-body-small;
// box-shadow
@menu-head-shadow: 0 8px 10px -5px rgba(0, 0, 0, .08),
0 16px 24px 2px rgba(0, 0, 0, .04), 0 6px 30px 5px rgba(0, 0, 0, .05);
@menu-head-submenu-shadow: inset 0 -1px 0 0 #eee;
@menu-default-shadow: 0 5px 5px -3px rgba(0, 0, 0, .1),
0 8px 10px 1px rgba(0, 0, 0, .06), 0 3px 14px 6px rgba(0, 0, 0, .05);
// transition
@fade-linear-transition: opacity 200ms linear;
@md-fade-transition: transform 300ms cubic-bezier(.23, 1, .32, 1),
opacity 300ms cubic-bezier(.23, 1, .32, 1);