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

material design ui for vue2

@appbarColor: @primaryColor;
@appbarTextColor: @alternateTextColor;

@avatarColor: @alternateTextColor;
@avatarBackgroundColor: darken(@alternateTextColor, 26%);

@badgeColor: @lighterPrimaryColor;
@badgeTextColor: @alternateTextColor;
@badgePrimaryColor: @primaryColor;
@badgePrimaryTextColor: @alternateTextColor;
@badgeSecondaryColor: @accentColor;
@badgeSecondaryTextColor: @alternateTextColor;

@baseFontFamily: @fontFamily;
@baseTextColor: @textColor;
@baseBackgroundColor: @backgroundColor;
@baseLinkColor: @accentColor;

@bottomNavBackgroundColor: @dialogBackgroundColor;
@bottomNavShiftBackgroundColor: @primaryColor;
@bottomNavUnselectedColor: @secondaryTextColor;
@bottomNavShiftUnselectedColor: fade(@alternateTextColor, 70%);
@bottomNavSelectedColor: @primaryColor;
@bottomNavShiftSelectedColor: @alternateTextColor;

@bottomSheetColor: @dialogBackgroundColor;

@cardBackgroudColor: @backgroundColor;
@cardTitleColor: fade(@textColor, 87%);
@cardSubtitleColor: fade(@textColor, 54%);
@cardMediaColor: @darkWhite;
@cardMediaOverlayContentBackground: @lightBlack;
@cardMediaTitleColor: @darkWhite;
@cardMediaSubtitleColor: @lightWhite;
@cardTextColor: @textColor;

@checkboxColor: @textColor;
@checkboxTextColor: @textColor;
@checkboxDisabledColor: @disabledColor;
@checkboxCheckedColor: @primaryColor;

@chipColor: darken(@alternateTextColor, 12%);
@chipHoverColor: rgb(206, 206, 206);
@chipTextColor: fade(@textColor, 87%);
@chipDeleteColor: fade(@textColor, 26%);
@chipHoverDeleteColor: fade(fade(@textColor, 26%), 40%);

@circularProgressColor: @primaryColor;

@datePickerColor: @primaryColor;
@datePickerTextColor: @alternateTextColor;
@datePickerCalendarTextColor: @textColor;
@datePickerSelectColor: @primaryColor;
@datePickerSelectTextColor: @alternateTextColor;
@datePickerCalendarYearBackgroundColor: @dialogBackgroundColor;
@datePickerHeaderColor: @primaryColor;

@dialogBorderColor: @borderColor;
@dialogTitleColor: @textColor;
@dialogBodyColor: fade(@textColor, 60%);;
@dialogColor: @dialogBackgroundColor;

@dropDownMenuTextColor: @textColor;
@dropDownMenuIconColor: @borderColor;
@dropDownMenuLineColor: @borderColor;

// flatButton
@flatButtonColor: transparent;
@flatButtonTextColor: @textColor;
@flatButtonPrimaryTextColor: @primaryColor;
@flatButtonSecondaryTextColor: @accentColor;

// iconButton
@iconButtonPrimaryColor: @primaryColor;
@iconButtonSecondaryColor: @accentColor;

// floatButton
@floatButtonColor: @primaryColor;
@floatButtonIconColor: @alternateTextColor;
@floatButtonSecondaryColor: @accentColor;
@floatButtonSecondaryIconColor: @alternateTextColor;
@floatButtonDisabledColor: darken(@alternateTextColor, 12%);
@floatButtonDisabledIconColor: fade(@textColor, 30%);

@gridListTextColor: @white;
@gridListTitlebarColor: rgba(0, 0, 0, 0.4);

// circle
@circleColor: @primaryColor;
@circleSecondaryColor: @accentColor;

@linearProgressColor: @lighterPrimaryColor;
@linearProgressFillColor: @primaryColor;

// listItem
@listTextColor: @textColor;
@listHoverColor: fade(@listTextColor, 10%);
@listSecondaryTextColor: @secondaryTextColor;
@listLeftIconColor: @grey600;
@listRightIconColor: @grey600;
@listSelectedColor: @primaryColor;

@menuTextColor: @textColor;
@menuSelectColor: @accentColor;
@menuHoverColor: rgba(0, 0, 0, .1);
@menuDisabledColor: @disabledColor;
@menuLeftIconColor: @grey600;
@menuRightIconColor: @grey600;

@paginationTextColor: @textColor;
@paginationHoverBackgroundColor: rgba(0, 0, 0, .1);
@paginationActiveBackgroundColor: @primaryColor;
@paginationActiveColor: @white;
@paginationDisabledColor: @disabledColor;

@paperColor: @textColor;
@paperBackgroundColor: @dialogBackgroundColor;

@pickerColor: @dialogBackgroundColor;
@pickerTextColor: @secondaryTextColor;
@pickerSelectedTextColor: @textColor;
@pickerBorderColor: @borderColor;

@popoverColor: @dialogBackgroundColor;

@popupColor: @dialogBackgroundColor;

@radioColor: @textColor;
@radioTextColor: @textColor;
@radioDisabledColor: @disabledColor;
@radioCheckedColor: @primaryColor;

// raisedButton
@raisedButtonColor: @alternateTextColor;
@raisedButtonTextColor: @textColor;
@raisedButtonPrimaryColor: @primaryColor;
@raisedButtonSecondaryColor: @accentColor;
@raisedButtonDisabledColor: darken(@alternateTextColor, 10%);
@raisedButtonDisabledTextColor: fade(@textColor, 30%);

@refreshControlColor: @primaryColor;

@sliderTrackColor: @lighterPrimaryColor;
@sliderSelectionColor: @primaryColor;
@sliderDisabledColor:  @lighterPrimaryColor;
@sliderZeroColor: @alternateTextColor;

@snackbarColor: @textColor;
@snackbarTextColor: @alternateTextColor;

@stepperBackgroundColor: transparent;
@stepperHoverBackgroundColor: fade(@textColor, 6%);
@stepperIconColor: @primaryColor;
@stepperHoveredIconColor: @grey700;
@stepperInactiveIconColor: @grey500;
@stepperTextColor: @textColor;
@stepperNumTextColor: @alternateTextColor;
@stepperDisabledTextColor: @disabledColor;
@stepperConnectorLineColor: @grey400;

// subHeader
@subHeaderColor: @secondaryTextColor;

@switchThumbOnColor: @primaryColor;
@switchThumbOffColor: @darkerAccentColor;
@switchThumbDisabledColor: @grey300;
@switchTrackOnColor: fade(@primaryColor, 50%);
@switchTrackOffColor: @lighterPrimaryColor;
@switchTrackDisabledColor: @lighterPrimaryColor;
@switchTextColor: @textColor;
@switchTextDisabledColor: @disabledColor;

@tableBackgroundColor: @alternateTextColor;
@tableBorderColor: @borderColor;
@tableTextColor: @textColor;
@tableRowSelectedBackgroundColor: @grey100;
@tableRowHoverBackgroundColor: @grey200;
@tableRowStripeBackgroundColor: fade(lighten(@primaryColor, 50%), 40%);
@tableTheadTextColor: @secondaryTextColor;

@tabsBackgroundColor: @primaryColor;
@tabsLineColor: @accentColor;
@tabsTextColor: fade(@alternateTextColor, 70%);
@tabsSelectedTextColor: @alternateTextColor;

@textFieldTextColor: @secondaryTextColor;
@textFieldInputColor: @textColor;
@textFieldHintColor: @disabledColor;
@textFieldFocusTextColor: @primaryColor;
@textFieldDisabledTextColor: @disabledColor;
@textFieldErrorTextColor: @red;
@textFieldLineColor: @borderColor;
@textFieldFocusLineColor: @primaryColor;
@textFieldErrorLineColor: @red;
@textFieldDisabledLineColor: @disabledColor;

@timePickerColor: @alternateTextColor;
@timePickerClockColor: @textColor;
@timePickerClockCircleColor: fade(@darkBlack, 7%);
@timePickerSelectColor: @primaryColor;
@timePickerSelectTextColor: @alternateTextColor;
@timePickerHeaderColor: @primaryColor;

@toastTextColor: @alternateTextColor;
@toastColor: @textColor;

@tooltipTextColor: @alternateTextColor;
@tooltipRippleColor: @grey700;