topcoat-theme/src/variables-light.styl

Default theme for Topcoat components

/* This file should include color and image variables corresponding to the light theme */

/* ---------- colors ---------- */
var-color            = #454545
var-background-color = #e5e9e8
var-background--body = #DFE2E2
var-highlight-color  = #fff
var-shadow-color     = #000

/* ---------- darken ---------- */
var-dark    = 5
var-darker  = 5.5
var-darkest = 25.9

/* ---------- lighten ---------- */
var-light    = 6
var-lighter  = 15
var-lightest = 24

/* ---------- alphas ---------- */
var-alpha--high = 0.5
var-alpha--med  = 0.23
var-alpha--low  = 0.1

/* ---------- thickness ---------- */
var-border-thickness = 1px

/* ---------- shadows ---------- */
var-box-shadow--shadow = 0 1px var-highlight-color

/* Secondary colors (based on colors above)

Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!

*/
var-background-color--down = darken(var-background--body, var-dark)
var-background-color--hover = lighten(var-background--body, var-light)
var-border = var-border-thickness solid var-border-color
var-box-shadow = inset 0 var-border-thickness var-highlight-color
var-box-shadow--down = inset 0 var-border-thickness rgba(var-shadow-color, var-alpha--low)
var-text-shadow = var-box-shadow--shadow
var-background-color--input = darken(var-background-color, var-darker)
var-border-color = darken(var-background-color, var-darkest)

/* Icons */
var-menu-stack-icon = url("../img/hamburger_dark.svg")

/* Navigation Bar */
var-color--navigation-bar = var-color
var-box-shadow--navigation-bar = inset 0 -1px var-border-color, 0 var-border-thickness darken(var-background-color, var-darker)

/* Text Input */
var-color--placeholder = lighten(var-color, var-lightest)
var-color--focus = var-color
var-background-color--text-input = var-highlight-color
var-background-color--text-input--focus = var-highlight-color
var-box-shadow--text-input = inset 0 var-border-thickness 0 rgba(var-shadow-color, var-alpha--med)

/* List */
var-background-color--list = var-background-color
var-border-top--list-container = var-border
var-border-top--list = var-border
var-border-bottom--list = var-border-thickness solid var-highlight-color
var-border-top--list-item--first = var-border-thickness solid darken(var-background-color, var-darker)
var-border-top--list-item = var-border-bottom--list
var-border-bottom--list-item = var-border
var-color--list-header = var-color
var-text-shadow--list-header = 0 var-border-thickness 0 rgba(var-highlight-color, var-alpha--high)
var-border-top--list-header = var-border-thickness solid rgba(var-highlight-color, var-alpha--high)
var-border-bottom--list-header = var-border-thickness solid rgba(var-highlight-color, var-alpha--med)
var-background-color--list-header = var-background-color--down

/* Overlay */
var-modal-bg-color = var-background-color
var-overlay__header-border = var-border

/* Progress bar */
var-bar-bg-color = var-background-color--down
var-progress-bg-color = var-background-color

/* Checkbox */
var-border--checkmark = 7px solid var-color

/* Range input */
var-range-background = var-background-color--down
var-range__slider-border = var-border
var-range__slider-background = var-background-color
var-range__slider-bg-size = 7px 18px
var-range__slider-box-shadow = inset 0 var-border-thickness 0 rgba(var-shadow-color, var-alpha--low);

/* Radio Button */
var-border--radio-button = var-border-thickness solid rgba(var-shadow-color, var-alpha--low)
var-background--radio-button = var-color
var-box-shadow--radio-button = 0 var-border-thickness rgba(var-highlight-color, var-alpha--high)

/* Tab bar */
var-color--tab-bar--active = var-background-color--cta
var-background-color--tab-bar--active = var-background-color-light--cta
var-box-shadow--tab-bar--active = inset 0 0 var-border-thickness rgba(var-shadow-color, var-alpha--low)

/* Switch */
var-color--switch__label--left = var-background-color--cta
var-background-color--switch__label--left = var-background-color-light--cta
var-background-color--switch__label--right = var-background-color--down