yunser-ui-vue/src/styles/variables-base.less

material design ui for vue2

@import "./colors.less";
@fontFamily: Roboto, Lato, sans-serif;

// primary and accent
@primaryColor: @deepPurple400;  // 主色
@darkerPrimaryColor: @deepPurple600;
// @primaryColor: @deepPurple400;  // 主色
// @darkerPrimaryColor: @deepPurple600;
@lighterPrimaryColor: @grey400;
@accentColor: @pinkA200;
@darkerAccentColor: @grey100;
@lighterAccentColor: @grey500;

// textColor or borderColor
@textColor: @darkBlack;
@secondaryTextColor: fade(@fullBlack, 54%);
@alternateTextColor: @white;
@borderColor: fade(@fullBlack, 12%);
@disabledColor: fade(@fullBlack, 38%);

// background
@backgroundColor: @white;
@statusBarBackgroundColor: @grey300;
@appbarBackgroundColor: @grey100;
@dialogBackgroundColor: @white; // dialogs or cards

// icon color
@activeIconColor: fade(@fullBlack, 54%);
@inActiveIconColor: fade(@fullBlack, 38%);

// spacing
@iconSize: 24px;
@desktopGutter: 24px;
@desktopGutterMore: 32px;
@desktopGutterLess: 16px;
@desktopGutterMini: 8px;
@desktopKeylineIncrement: 64px;
@desktopDropDownMenuItemHeight: 32px;
@desktopDropDownMenuFontSize: 15px;
@desktopDrawerMenuItemHeight: 48px;
@desktopSubheaderHeight: 48px;
@desktopToolbarHeight: 56px;

// animate
@easeOutFunction: cubic-bezier(0.23, 1, 0.32, 1);
@easeInOutFunction: cubic-bezier(0.445, 0.05, 0.55, 0.95);