Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

add theming in vars with blue variation

Browse Source
This commit is contained in:
Tykayn 2021-03-29 11:13:59 +02:00 committed by tykayn
parent b483cc520e
commit b280637158
3 changed files with 79 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
doc/TODO.md Normal file
View File

@ -0,0 +1,5 @@
# Todo - liste des choses à faire
# Choses faites
voir le [changelog.md]

1
doc/changelog.md Normal file
View File

@ -0,0 +1 @@
# Change log

103
src/styles/variables.scss
View File

@ -1,45 +1,88 @@
@charset "UTF-8";
// config
$theme-vars: 'blue'; // violet , blue
// colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154
$green: #64d16e;
$black: #000000;
$ugly-purple: #b24eb7;
$lavender-pink: #e9bdeb;
$white: #ffffff;
$dark-lavender: #7d6c99;
$dusty-orange: #f18647;
$violet: #bd10e0;
$red: #cd0000;
$cool-grey: #aeafb1;
$warm-grey: #807e7e;
$wisteria: #bf83c2;
$pale-purple: #d198d4;
$green: #64d16e;
$dusty-orange: #f18647;
$red: #cd0000;
$pink: #fa7c91;
$purple: #8a4d76;
$pink: #fa7c91;
$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;
// FONT
$default_font: 'pt_sans';
$title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
@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';
}