topcoat-theme/src/variables-shared.styl

Default theme for Topcoat components

/* Call To Action */
var-color--cta = #fff
var-background-color--cta = #288edf
var-notification-color = #ec514e

var-background-color-light--cta = lighten(var-background-color--cta, 42.5)
var-border-color--cta = darken(var-background-color--cta, 23)
var-border--cta = 1px solid var-border-color--cta
var-background-color--cta--down = darken(var-background-color--cta, 6.5)
var-background-color--cta--hover = lighten(var-background-color--cta, 8)
var-box-shadow--cta = inset 0 1px rgba(var-color--cta, 0.36)
var-box-shadow--cta--down = inset 0 1px rgba(invert(var-color--cta), 0.12)
var-font-weight--cta = 500
var-text-shadow--cta = 0 -1px rgba(invert(var-color--cta), 0.36)
var-overflow = hidden
var-border--focus = 1px solid #0036FF
var-box-shadow--focus = 0 0 0 2px #6fb5f1
var-border--invalid = 1px solid var-notification-color

/* Text Input */
var-placeholder-color--input = #c6c8c8
var-color--focus = #000

/* Radio input */
var-radio-offset = -109px
var-radio-offset--checked = -74px
var-radio-width = 37px
var-radio-bgsize = var-radio-width
var-radio-height = 31px
var-radio-line-height = var-radio-height
var-radio-margin = 15px

/* Overlay */
var-overlay-bg-color = rgba(88, 90, 92, 0.7)
var-overlay-padding = 20px 10px
var-overlay-bg-box-shadow = inset 0px 0px 115px 0px #000000
var-overlay-width = 50%
var-overlay-margin--left = - var-overlay-width / 2

/* Textarea */
var-font-size--textarea--large = 1.3rem
var-line-height--large = 1.3rem
var-margin = 0

/* Progress bar container */
var-bar-border-radius   = 12px
var-bar-width           = 250px
var-bar-height          = 1.25rem

/* Progress bar progress */
var-progress-border-radius = 12px 0 0 12px

/* Switch */
var-content--switch__label--left = 'ON'
var-content--switch__label--right = 'OFF'
var-margin-bottom--switch__toggle = -1px
var-margin-top--switch__toggle = -1px
var-transition--switch__toggle = margin-left 0.05s ease-in-out
var-margin-bottom--switch__toggle = -1px
var-margin-top--switch__toggle = -1px

/* Notification */
var-notification-padding = 0.15em 0.5em 0.2em
var-notification-margin = 5px
var-notification-border-radius = 2px
var-notification-bg-color = var-notification-color
var-notification-color = #fff

/* Search */
var-search-icon = url("../img/search.svg")