// Typography $base-font-family: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; $heading-font-family: $base-font-family; $monospace-font-family: monaco,Consolas,"Lucida Console",monospace; // Font Sizes $base-font-size: 12px; $large-pass-font-size: 22px; // Line height $base-line-height: 1.5; $heading-line-height: 1.2; // Other Sizes $base-border-radius: 1px; $base-spacing: $base-line-height * 1em; $small-spacing: $base-spacing / 2; $base-z-index: 0; $base-padding-v: .4em; $base-padding-h: .8em; $mobile-back-button-height: 3em; $base-padding: $base-padding-v $base-padding-h; $medium-padding: .8em 1em; $base-padding-px: 4px 8px; $modal-icon-size: 6em; // Borders @function base-border() { @return 1px solid base-border-color(); }; @function light-border() { @return 1px solid light-border-color(); }; @function selected-border-width() { @return 3px; } @function selected-border() { @return selected-border-width() solid th(action-color); } @function selected-hover-border() { @return 1px solid action-color(); } @function selected-transparent-border() { @return 1px solid transparent; } // Forms @function form-box-shadow() { @return inset 0 1px 3px form-box-shadow-color(); } @function form-box-shadow-focus() { @return form-box-shadow(), 0 0 3px form-box-shadow-color-focus(); } @function form-box-shadow-focus-error() { @return form-box-shadow(), 0 0 3px form-box-shadow-color-focus-error(); } // Shadows @function dropdown-box-shadow() { @return 0 0 50px dropdown-box-shadow-color(); } // Animations $base-duration: 150ms; $base-timing: ease; $slow-transition-in: $base-duration*2 ease-in; $slow-transition-out: $base-duration ease-out; $tip-transition-in: 500ms $ease-in-expo; $tip-transition-out: $slow-transition-out; // Math $sqrt2: 1.41; $z-index-no-modal: 10000; $z-index-modal: 100000; // Screen sizes $tablet-width: 736px; $mobile-width: 620px;