Issue 4607 - Default content styles

scss/_variables.scss

 /*!
- * This file is part of universal-design-language
+ * This file is part of website-defaults
  * Copyright (C) 2016 Eyeo GmbH
  *
- * universal-design-language is free software: you can redistribute it and/or
+ * website-defaults is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
- * universal-design-language is distributed in the hope that it will be useful,
+ * website-defaults is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
- * along with web.starter-kit.  If not, see <http://www.gnu.org/licenses/>.
+ * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* colors
+/*******************************************************************************
+ * Variables
+ *******************************************************************************
+ * ~ WARNING ~ DO NOT EDIT THIS FILE!
+ * Set variables within project specfic SCSS before including website defaults.
+ *******************************************************************************
+ * - Brand colors
+ * - Fonts
+ * - Spacing
+ * - Breakpoints
  ******************************************************************************/
 
-$white: #fafafa;
-$gray-light: #e0e0e0;
-$gray: #9e9e9e;
-$gray-dark: #616161;
-$black: #212121;
-
-$red-light: #ffcdd2;
-$red: #f44336;
-$red-dark: #b71c1c;
-
-$green-light: #c8e6c9;
-$green: #4caf50;
-$green-dark: #1b5e20;
-
-$blue-light: #bbdefb;
-$blue: #2196f3;
-$blue-dark: #0d47a1;
-
-$primary: $white;

[saroyanm, 2016/11/03 19:41:15]

To what $primary variable suppose to apply ?

[juliandoucette, 2016/11/03 22:59:38]

See comment below.

-$primary-foreground: $black;
-$primary-background: $white;
-
-$inverted: $black;

[saroyanm, 2016/11/03 19:41:14]

To what $inverted variable suppose to apply ?

[juliandoucette, 2016/11/03 22:59:39]

See comment below.

-$inverted-foreground: $white;
-$inverted-background: $black;
-
-$secondary: $gray-dark;

[saroyanm, 2016/11/03 19:41:14]

To what $secondary variable suppose to apply ?

[juliandoucette, 2016/11/03 22:59:38]

See comment below.

-$secondary-foreground: $gray-light;
-$secondary-background: $gray-dark;
-
-$accent: $blue;

[saroyanm, 2016/11/03 19:41:14]

To what $accent variable suppose to apply ?

[juliandoucette, 2016/11/03 22:59:38]

Sorry for the confusion. These are common *design language* terms. I think
Google explains them pretty well here:
https://material.google.com/style/color.html#color-color-schemes

Acceptable Ads example:
Primary -> Black
Secondary -> Gray
Accent -> Green

[saroyanm, 2016/11/04 16:01:18]

Acknowledged.

[juliandoucette, 2016/11/04 17:32:27]

1. I will add comments describing the naming scheme
2. I will make variables changable

[juliandoucette, 2016/11/08 15:52:00]

Done.

-$accent-foreground: $white;
-$accent-background: $blue-dark;
-
-$error: $red;
-$error-foreground: $white;
-$error-background: $red-dark;
-
-/* font sizes
+/* Brand colors
  ******************************************************************************/
 
-$large-font: 24px;
-$medium-font: 16px;
-$small-font: 12px;
+/* Primary - The most widely used across all screens and components. */
 
-/* font weights
+$primary: #212121 !default;
+$primary-light: #fff !default;
+$primary-dark: #000 !default;
+
+/* Secondary - Used to indicate a related action or information. */
+
+$secondary: #9e9e9e !default;
+$secondary-light: #eee !default;
+$secondary-dark: #424242 !default;
+
+/* Accent - Used for action buttons and interactive elements. */
+
+$accent: #1565c0 !default;
+$accent-light: #e3f2fd !default;
+$accent-dark: #0d47a1 !default;
+
+/* Error - Used for error messages and warnings. */
+
+$error: #f44336 !default;
+$error-light: #ffebee !default;
+$error-dark: #b71c1c !default;
+
+/* Fonts
  ******************************************************************************/
 
-$bold-weight: 600;
-$normal-weight: 400;
-$thin-weight: 300;
+$primary-font: sans-serif !default;
+$secondary-font: serif !default;
+$monospace-font: monospace !default;
 
-/* spacing
+$large-font: 20px !default;
+$medium-font: 16px !default;
+$small-font: 12px !default;
+
+$bold-weight: 600 !default;
+$normal-weight: 400 !default;
+$thin-weight: 300 !default;
+
+/* Spacing
  ******************************************************************************/
 
-$large-space: 56px;
-$medium-space: 34px;
-$small-space: 12px;
+$large-space: 64px !default;
+$medium-space: 32px !default;
+$small-space: 16px !default;
 
-/* breakpoints
+/* Breakpoints
  ******************************************************************************/
 
-$mobile-breakpoint: 576px;
 $tablet-breakpoint: 768px;
 $desktop-breakpoint: 992px;
+
+/* Container widths
+ ******************************************************************************/
+
+$mobile-width: 540px !default;
+$tablet-width: 720px !default;
+$desktop-width: 960px !default;