// -------------------------------------------------- // Variables used throughout the theme // -------------------------------------------------- // Layout dimensions // -------------------------------------------------- $small-width: 800px !default; $medium-width: 995px !default; $large-width: 1110px !default; // Brand color variables // -------------------------------------------------- $google: #5b76f7 !default; $instagram: #125688 !default; $facebook: #3b5998 !default; $cas: #70BA61 !default; $twitter: #00bced !default; $yahoo: #810293 !default; $github: #6d6d6d !default; // Fonts // -------------------------------------------------- $base-font-size: 14px !default; $base-line-height: 19px !default; $base-font-family: Helvetica, Arial, sans-serif !default; /* These files don't actually exist. They're injected by Stylesheet::Compiler. */ @import "theme_variables"; @import "plugins_variables"; @import "common/foundation/math"; // Color Utilities // w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast @function dc-color-brightness($color) { @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); } // Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2 @function srgb-scale($foreground, $background, $percent) { $ratio: ($percent / 100%); $iratio: 1 - $ratio; $f_r2: red($foreground) * red($foreground); $f_g2: green($foreground) * green($foreground); $f_b2: blue($foreground) * blue($foreground); $b_r2: red($background) * red($background); $b_g2: green($background) * green($background); $b_b2: blue($background) * blue($background); $r_r2: $f_r2 * $ratio + $b_r2 * $iratio; $r_g2: $f_g2 * $ratio + $b_g2 * $iratio; $r_b2: $f_b2 * $ratio + $b_b2 * $iratio; $r_r: sqrt($r_r2); $r_g: sqrt($r_g2); $r_b: sqrt($r_b2); @return rgb($r_r, $r_g, $r_b); } // Replaces dark-light-diff($primary, $secondary, 50%, -50%) @function blend-primary-secondary($percent) { @return srgb-scale($primary, $secondary, $percent); } @function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) { @if dc-color-brightness($adjusted-color) < dc-color-brightness($comparison-color) { @return scale-color($adjusted-color, $lightness: $lightness); } @else { @return scale-color($adjusted-color, $lightness: $darkness); } } @function dark-light-choose($light-theme-result, $dark-theme-result) { @if dc-color-brightness($primary) < dc-color-brightness($secondary) { @return $light-theme-result; } @else { @return $dark-theme-result; } } // standard color transformations, use these if possible, and add any new dark-light-diffs here //primary $primary-very-low: dark-light-diff($primary, $secondary, 97%, -80%); $primary-low: dark-light-diff($primary, $secondary, 90%, -65%); $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%); $primary-medium: dark-light-diff($primary, $secondary, 50%, -20%); $primary-high: dark-light-diff($primary, $secondary, 30%, -10%); //header_primary $header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%); $header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -20%); $header_primary-high: dark-light-diff($header_primary, $secondary, 20%, 20%); //secondary $secondary-low: dark-light-diff($secondary, $primary, 70%, -70%); $secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%); $secondary-high: dark-light-diff($secondary, $primary, 30%, -35%); //tertiary $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%); $tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%); $tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%); //quaternary $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%); //highlight $highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%); $highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%); //danger $danger-low: dark-light-diff($danger, $secondary, 50%, -40%); $danger-medium: dark-light-diff($danger, $secondary, 30%, -60%); //success $success-low: dark-light-diff($success, $secondary, 80%, -60%); $success-medium: dark-light-diff($success, $secondary, 50%, -40%); //love $love-low: dark-light-diff($love, $secondary, 85%, -60%);