@fesjs/fes-design/es/style/themes/default.less

fes-design for PC

// The prefix to use on all css classes from ant.
@cls-prefix: fes;

@fes-icon-cls: fes-design-icon;

// An override for the html selector for theme prefixes
@html-selector: html;

// -------- font -----------
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
@line-height-base: 22px;

// font-size
@font-size-caption: calc(var(--f-font-size-base) - 2px);
@font-size-body: var(--f-font-size-base);
@font-size-head: calc(var(--f-font-size-base) + 2px);
@font-size-title: calc(var(--f-font-size-base) + 6px);
@font-size-large-title: calc(var(--f-font-size-base) + 10px);

// font-weight
@font-weight-regular: 400;
@font-weight-medium: 500;
@font-weight-semibold: 600;

// -------- vertical paddings -----------
@padding-lg: var(--f-padding-large); // containers
@padding-md: var(--f-padding-middle); // small containers and buttons
@padding-sm: var(--f-padding-small); // Form controls and items
@padding-xs: var(--f-padding-xsmall); // small items

// -------- shadow -----------
@shadow-up: 0 -2px var(--f-shadow-radius) var(--f-shadow-color);
@shadow-down: 0 2px var(--f-shadow-radius) var(--f-shadow-color);
@shadow-left: -2px 0 var(--f-shadow-radius) var(--f-shadow-color);
@shadow-right: 2px 0 var(--f-shadow-radius) var(--f-shadow-color);
@shadow-sm-up: 0 -2px var(--f-shadow-radius-sm) var(--f-shadow-color-sm);
@shadow-sm-down: 0 2px var(--f-shadow-radius-sm) var(--f-shadow-color-sm);
@shadow-sm-left: -2px 0 var(--f-shadow-radius-sm) var(--f-shadow-color-sm);
@shadow-sm-right: 2px 0 var(--f-shadow-radius-sm) var(--f-shadow-color-sm);

// z-index list, order by `z-index`
@zindex-badge: 1;
@zindex-table-fixed: 1;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-tooltip: 1060;
@zindex-image: 1080;

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
@animation-duration-slow: 0.3s;
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s;

// form

@data-input-height-base: 32px;