Skip to main content
Version: Current

CI/CD Style guide

This style guide is visible as modal on the website, when you click Navigation → “Hilfe nötig?” → Styleguide.

Colors

We have 7 adjusted colors. Each color has a range from 100 (lighter) to 900 (darker) and 500 is the base color.

colors.scss#L1-7
$primary: #533a20;
$secondary: #64ae24;
$gray: #5e636e;
// States
$warning: #cc990e;
$success: $secondary;
$danger: #cf3a00;
$info: #006bcf;

client/src/scss/colors.scss

Variables​

The color variables are generated, which makes them invisible for the autocomplete of IDEs. The generations of the individual stepped variables happen in colors.scss#L34-61 if this is from interests.

caution

var(--fs-color-{name}-{step}) → var(--fs-color-primary-500) for the primary base color.

colors.scss#L62-65
--fs-color-role-ambassador: var(--fs-color-warning-500);
--fs-color-role-storemanager: var(--fs-color-secondary-500);
--fs-color-role-foodsaver: var(--fs-color-primary-500);
--fs-color-role-foodsharer: var(--fs-color-primary-500);
--fs-color-role-jumper: var(--fs-color-primary-500);

--fs-color-type-stores: var(--fs-color-danger-500);
--fs-color-type-baskets: var(--fs-color-secondary-500);
--fs-color-type-foodshare-points: var(--fs-color-warning-500);
--fs-color-type-communities: var(--fs-color-info-500);

colors.scss#L62-65, are some special cases for colors for roles, stores, baskets etc …

Usage​

Good
color: var(--fs-color-primary-500);
background-color: var(--fs-color-primary-200);
border-color: var(--fs-color-primary-300);
Bad
color: $primary;
background-color: #ddd8d2;
border-color: #{tint($primary, 25%)};

Icons

Fonts

Components