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-120: #006ad7;
$tc-dark-blue-110: #006ad7;
$tc-dark-blue-105: #006feb;
$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: #0076a5;
$tc-light-blue-100: #15acec;
$tc-light-blue-70: #63c4f1;
$tc-light-blue-30: #bce6f9;
$tc-light-blue-10: #e9f6fc;

/* Warm Orange - data science color code. */
$tc-orange-110: #ba4c00;
$tc-orange-100: #fd7d00;
$tc-orange-70: #ffa45d;
$tc-orange-30: #ffe3cf;
$tc-orange-10: #fff0eb;

/* Red - used for warnings/ */
$tc-red-110: #ea1900;
$tc-red-100: #f52c14;
$tc-red-70: #ff5a4c;
$tc-red-30: #ffd4d0;
$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-120: #328732;
$tc-green-110: #258205;
$tc-green-100: #5cc900;
$tc-green-70: #94db4e;
$tc-green-30: #cef0af;
$tc-green-10: #effae4;

/* Purples. */
$tc-purple-110: #753488;
$tc-purple-100: #914da5;
$tc-purple-70: #b57ad8;
$tc-purple-30: #e2c6f3;
$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: #9a6d00;
$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: #d98f64;

/* Pastel colors, used for levels. */
$tc-pastel-green: #12c188;
$tc-pastel-blue: #5656f4;
$tc-pastel-yellow: #feb900;
$tc-pastel-crimson: #e90c5a;

/* 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;