material-ui/src/less/variables/custom-variables.less

Material Design UI components built with React

// Feel free to change this file to customize your app.
// This is place to put any variable overrides as well.

//Typography
@headingFontFamily: 'Roboto', sans-serif;
@contentFontFamily: 'Roboto', sans-serif;

//App Colors
@primary-1-color: @cyan-500;
@primary-2-color: @cyan-700;
@primary-3-color: @cyan-100;
@accent-1-color: @pink-A200;
@accent-2-color: @pink-A400;
@accent-3-color: @pink-A100;

//Text Colors
@body-text-color: @dark-black;

//Border Colors
@border-color: @grey-300;

//Component Colors
@app-bar-color: @primary-1-color;
@app-bar-text-color: @dark-white;
@canvas-color: @white;
@drop-down-menu-icon-color: @min-black;
@left-nav-color: @white;
@subheader-border-color: @border-color;
@subheader-text-color: @primary-1-color;

// menu
@menu-background-color: white;
@menu-item-data-height: 32px;
@menu-item-height: 48px;
@menu-item-hover-color: rgba(0, 0, 0, .035);
@menu-item-padding: @desktop-gutter;
@menu-item-selected-text-color: @accent-1-color;
@menu-container-background-color: white;
@menu-subheader-padding: @desktop-gutter;

// buttons
@button-height: 36px;
@button-min-width: 88px;

@flat-button-color: @white;
@flat-button-hover-color: darken(@flat-button-color, 10%);
@flat-button-text-color: @body-text-color;
@flat-button-ripple-color: rgba(0,0,0,0.1);
@flat-button-focus-ripple-color: fade(@flat-button-ripple-color, 7%);
@flat-button-primary-hover-color: lighten(@accent-1-color, 32%);
@flat-button-primary-text-color: @accent-1-color;
@flat-button-primary-ripple-color: fade(darken(@flat-button-primary-text-color, 20%), 10%);
@flat-button-primary-focus-ripple-color: fade(@flat-button-primary-ripple-color, 7%);
@flat-button-disabled-text-color: fade(@flat-button-text-color, 30%);

@raised-button-color: @white;
@raised-button-hover-color: darken(@raised-button-color, 10%);
@raised-button-text-color: @body-text-color;
@raised-button-ripple-color: rgba(0,0,0,0.1);
@raised-button-focus-ripple-color: fade(@raised-button-ripple-color, 7%);
@raised-button-primary-color: @accent-1-color;
@raised-button-primary-hover-color: darken(@accent-1-color, 15%);
@raised-button-primary-text-color: @white;
@raised-button-primary-ripple-color: fade(@black, 15%);
@raised-button-primary-focus-ripple-color: @raised-button-primary-ripple-color;
@raised-button-disabled-color: @raised-button-hover-color;
@raised-button-disabled-text-color: fade(@raised-button-text-color, 30%);

@floating-action-button-size: 56px;
@floating-action-button-mini-size: 40px;
@floating-action-button-color: @accent-1-color;
@floating-action-button-icon-color: @white;
@floating-action-button-hover-color: @raised-button-primary-hover-color;
@floating-action-button-ripple-color: @raised-button-primary-ripple-color;
@floating-action-button-focus-ripple-color: @raised-button-primary-ripple-color;
@floating-action-button-disabled-color: @raised-button-disabled-color;
@floating-action-button-disabled-text-color: @raised-button-disabled-text-color;

// input
@input-width: 320px;
@input-font-size: 16px;
@input-placeholder-size: 13px;
@input-error-color: red;
@input-bar-height: 2px;

// radio button
@radio-button-size: 16px;
@radio-button-border-color: black;
@radio-button-background-color: white;
@radio-button-check-color: black;

// checkbox
@checkbox-box-background-color: white;
@checkbox-box-border-color: black;
@checkbox-check-color: green;

// toast
@mui-toast-color: white;
@mui-toast-background-color: #323232;
@mui-toast-action-color: yellow;

// toggle
@toggle-size: 20px;
@toggle-track-on-color: @cyan-200;
@toggle-track-off-color: @min-black;
@toggle-track-disabled-color: @faint-black;
@toggle-thumb-on-color: @primary-1-color;
@toggle-thumb-off-color: @grey-50;
@toggle-thumb-disabled-color: @grey-800;

// toolbar
@toolbar-background-color: darken(#eeeeee, 5%);
@toolbar-height: 56px;
@toolbar-icon-color: rgba(0, 0, 0, .40);
@toolbar-separator-color: rgba(0, 0, 0, .175);
@toolbar-menu-hover-color: rgba(0, 0, 0, .10);
@toolbar-menu-hover-color: @white;

// slider
@slider-track-size: 2px;
@slider-track-color: @min-black;
@slider-track-color-selected: @grey-500;
@slider-handle-size: 12px;
@slider-handle-size-active: @slider-handle-size * 2;
@slider-handle-size-disabled: 8px;
@slider-handle-color-zero: @grey-400;
@slider-selection-color: @primary-3-color;

// layout
@app-bar-height: @desktop-keyline-increment;
@left-nav-width: (@desktop-keyline-increment * 4);