variables.scss

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */
$base-unit: 5px;
$corner-radius: 2px;

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */
$tc-black: #151516;
$tc-gray-90: #2a2a2b;
$tc-gray-80: #404041;
$tc-gray-70: #555;
$tc-gray-75: #006dea;
$tc-gray-60: #6b6b6b;
$tc-gray-50: #808080;
$tc-gray-40: #959596;
$tc-gray-30: #aaaaab;
$tc-gray-20: #c0c0c0;
$tc-gray-10: #d5d5d5;
$tc-gray-05: #e0e0e0;
$tc-gray-neutral-dark: #ebebeb;
$tc-gray-neutral-light: #fafafb;
$tc-white: #fff;

/* Accents & Shades. */
$tc-dark-blue-110: #006dea;
$tc-dark-blue-100: #0681ff;
$tc-dark-blue-70: #55a5ff;
$tc-dark-blue-30: #cee6ff;
$tc-dark-blue-10: #f4f9ff;

/* Light Blue - design color code. */
$tc-light-blue-110: #169ed9;
$tc-light-blue-100: #26ade9;
$tc-light-blue-70: #67c5ef;
$tc-light-blue-30: #bde6f8;
$tc-light-blue-10: #e9f6fc;

/* Warm Orange - data science color code. */
$tc-orange-110: #f26500;
$tc-orange-100: #fb7d22;
$tc-orange-70: #fda464;
$tc-orange-30: #fee3d0;
$tc-orange-10: #fff0eb;

/* Red - used for warnings/ */
$tc-red-110: #ea1900;
$tc-red-100: #f22f24;
$tc-red-70: #ff5b52;
$tc-red-30: #ffd4d1;
$tc-red-10: #fff4f4;

/* Yellow. */
$tc-yellow-110: #f2c900;
$tc-yellow-100: #fde400;
$tc-yellow-70: #fbee88;
$tc-yellow-30: #fff8ca;
$tc-yellow-10: #fffde5;

/* Greens - development color code. */
$tc-green-110: #55b000;
$tc-green-100: #60c700;
$tc-green-70: #96d957;
$tc-green-30: #cfefb2;
$tc-green-10: #effae5;

/* Purples. */
$tc-purple-110: #9050a3;
$tc-purple-100: #9050a3;
$tc-purple-70: #b47dd6;
$tc-purple-30: #e2c7f2;
$tc-purple-10: #f8f2fb;

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */
$tc-gold-130: #865e07;
$tc-gold-110: #c99014;
$tc-gold-100: #ffd84d;

$tc-silver-130: #554e48;
$tc-silver-110: #716d67;
$tc-silver-100: #d1d0cf;

$tc-bronze-130: #733d17;
$tc-bronze-110: #854e29;
$tc-bronze-100: #d98d64;

/* Pastel colors, used for levels. */
$tc-pastel-green: #25c089;
$tc-pastel-blue: #666eff;
$tc-pastel-yellow: #fcb816;
$tc-pastel-crimson: #e6175c;

/* Color aliases. */

/* Base metal colors. */
$tc-gold: $tc-gold-100;
$tc-silver: $tc-silver-100;
$tc-bronze: $tc-bronze-100;

/* Brand colors. */
$tc-dark-blue: $tc-dark-blue-100;
$tc-light-blue: $tc-light-blue-100;
$tc-green: $tc-green-100;
$tc-purple: $tc-purple-100;
$tc-yellow: $tc-yellow-100;
$tc-orange: $tc-orange-100;
$tc-red: $tc-red-100;

/* Community achievement color codes. */
$tc-level-1: $tc-gray-50;
$tc-level-2: $tc-pastel-green;
$tc-level-3: $tc-pastel-blue;
$tc-level-4: $tc-pastel-yellow;
$tc-level-5: $tc-pastel-crimson;