rsuite/src/styles/constants.less

A suite of react components

//Functions
@import 'mixins/palette';
@import 'mixins/calc-font-color';

//
// Variables
// --------------------------------------------------

//** NameSpace
@ns: rs-;
// Ie stuffix
@ie-suffix: ~'\9';
// Control enable ie polyfill
@ie-polyfill: true;

//== Colors

//** Gray levels.
@B000: #fff;
@B050: #f7f7fa;
@B100: #f2f2f5;
@B200: #e5e5ea;
@B300: #d9d9d9;
@B400: #c5c6c7;
@B500: #a6a6a6;
@B600: #8e8e93;
@B700: #7a7a7a;
@B800: #575757;
@B900: #272c36;

//** Pallet
@base-color: #3498ff;
@H050: color(~`palette('@{base-color}', 50)`);
@H100: color(~`palette('@{base-color}', 100)`);
@H200: color(~`palette('@{base-color}', 200)`);
@H300: color(~`palette('@{base-color}', 300)`);
@H400: color(~`palette('@{base-color}', 400)`);
@H500: @base-color;
@H600: color(~`palette('@{base-color}', 600)`);
@H700: color(~`palette('@{base-color}', 700)`);
@H800: color(~`palette('@{base-color}', 800)`);
@H900: color(~`palette('@{base-color}', 900)`);

//** spectrum
@red: #f44336;
@orange: #ff9800;
@yellow: #ffca28;
@green: #4caf50;
@cyan: #00bcd4;
@blue: #2196f3;
@violet: #673ab7;
@spectrum: red, orange, yellow, green, cyan, blue, violet;

//** Sub colors.
@success-color: #4caf50;
@success-light-color: #edfae1;

@info-color: #2196f3;
@info-light-color: #e9f5fe;

@warning-color: #ffb300;
@warning-light-color: #fff9e6;

@error-color: #f44336;
@error-light-color: #fde9ef;

//** Global textual link color.
@link-color: @H700;
//** Link hover color.
@link-hover-color: @H800;
//** Link Active color
@link-active-color: @H900;
//** border base color.
@border-base-color: @B300;
//** base bg color.
@base-bg-color: @B050;
//** border primary color.
@border-primary-color: @H500;
//** loading text color
@loading-text-color: @B800;

//** Global button ripple switch
@button-ripple: true;