@charset "UTF-8"; // config $theme-vars: 'blue'; // violet , blue // colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154 $black: #000000; $white: #ffffff; $cool-grey: #aeafb1; $warm-grey: #807e7e; $green: #64d16e; $dusty-orange: #f18647; $red: #cd0000; $pink: #fa7c91; $purple: #8a4d76; $ugly-purple: #b24eb7; $violet: #bd10e0; $wisteria: #bf83c2; $pale-purple: #d198d4; $lavender-pink: #e9bdeb; $dark-lavender: #7d6c99; // blue variation around styleguide $blueish-green: #64d1a9; $blueish-dusty-orange: #74a389; $blueish-red: #9d00cd; $blueish-pink: #d47cfa; $blueish-purple: #4d4d8a; $blueish-ugly-purple: #4d5b8a; $blueish-violet: #5810bd; $blueish-wisteria: #8b83bf; $blueish-pale-purple: #8a9bd1; $blueish-lavender-pink: #8a97e9; $blueish-dark-lavender: #7d6c8a; $blueish-brown: #636c77; $brown: #757763; $beige-light: #d0d1cd; $beige-lighter: #eff0eb; // interpretations in app $primary_color: $ugly-purple; $primary: $ugly-purple; $secondary_color: $lavender-pink; $font_color: $black; $logo_color: $dark-lavender; $logo_color_2: $green; $legend_color: $dark-lavender; $legend_color_2: $dusty-orange; $choice_select_border_color: $cool-grey; $hover-color: $warm-grey; $grey-dark: $warm-grey; $grey-light: $beige-light; $clicked-color: $wisteria; $mini-button-color: $pale-purple; $warning: $dusty-orange; $danger: $red; $success: $green; @if $theme-vars == 'violet' { $primary_color: $ugly-purple; $primary: $ugly-purple; $secondary_color: $lavender-pink; $font_color: $black; $logo_color: $dark-lavender; $logo_color_2: $green; $legend_color: $dark-lavender; $legend_color_2: $dusty-orange; $choice_select_border_color: $cool-grey; $hover-color: $warm-grey; $grey-dark: $warm-grey; $grey-light: $beige-light; $clicked-color: $wisteria; $mini-button-color: $pale-purple; $warning: $dusty-orange; $danger: $red; $success: $green; // FONT $default_font: 'pt_sans'; $title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono'; } @else if $theme-vars == 'blue' { $primary_color: $blueish-ugly-purple; $primary: $blueish-ugly-purple; $secondary_color: $blueish-lavender-pink; $font_color: $black; $logo_color: $blueish-dark-lavender; $logo_color_2: $blueish-green; $legend_color: $blueish-dark-lavender; $legend_color_2: $blueish-dusty-orange; $choice_select_border_color: $cool-grey; $hover-color: $warm-grey; $grey-dark: $warm-grey; $grey-light: $beige-light; $clicked-color: $blueish-wisteria; $mini-button-color: $blueish-pale-purple; $warning: $blueish-dusty-orange; $danger: $blueish-red; $success: $blueish-green; // FONT $default_font: 'pt_sans'; $title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono'; }