// Blues $blue-wordpress: #0087be; $blue-light: #78dcfa; $blue-medium: #3582c4; $blue-dark: #005082; $blue-medium-dark: #2271b1; $blue-grey-light: #f6f7f7; $blue-grey-dark: #0a4b78; $light-gray-700: #c3c4c7; // Grays $gray-original: #87a6bc; $gray: desaturate( $gray-original, 100% ); // Intermediary transform to match dotcom's colors // $gray color functions: // // lighten( $gray, 10% ) // lighten( $gray, 20% ) // lighten( $gray, 30% ) // darken( $gray, 10% ) // darken( $gray, 20% ) // darken( $gray, 30% ) // // See wordpress.com/design-handbook/colors/ for more info. $gray-light: lighten( $gray, 33% ); //#f6f6f6 $gray-dark: darken( $gray, 38% ); //#404040 // $gray-text: ideal for standard, non placeholder text // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background $gray-text: $gray-dark; $gray-text-min: darken( $gray, 18% ); //#537994 // Shades of gray $gray-lighten-10: lighten( $gray, 10% ); // #a8bece $gray-lighten-20: lighten( $gray, 20% ); // #c8d7e1 $gray-lighten-30: lighten( $gray, 30% ); // #e9eff3 $gray-darken-10: darken( $gray, 10% ); // #668eaa $gray-darken-20: darken( $gray, 20% ); // #4f748e $gray-darken-30: darken( $gray, 30% ); // #3d596d // Oranges $orange-jazzy: #f0821e; $orange-fire: #d63638; // Alerts $alert-yellow: #f0b849; $alert-red: #d94f4f; $alert-green: #4ab866; $alert-purple: #855DA6; // Link hovers $link-highlight: tint($blue-medium, 20%); // Essentials $white: rgba(255,255,255,1); $transparent: rgba(255,255,255,0); $border-ultra-light-gray: #e8f0f5;