Issue 4607 - Default content styles

scss/_variables.scss

 /*!
  * This file is part of universal-design-language
  * Copyright (C) 2016 Eyeo GmbH
  *
  * universal-design-language 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,
  * 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/>.
  */
 
 /* UDL variables
  *******************************************************************************
- * - Basic colors
+ * ~ WARNING ~ DO NOT EDIT THIS FILE!
+ * Set variables within project specfic SCSS before including UDL styles.
+ *******************************************************************************
  * - Brand colors
  * - Fonts
  * - Spacing
  * - Breakpoints
  ******************************************************************************/
 
-/* Basic colors

[saroyanm, 2016/11/15 14:28:57]

Do we need this ? I thought people will use brand colors and adjust them
according to the website/project.

[juliandoucette, 2016/11/16 14:58:52]

Acknowledged.

We will create variations of brand colors as-needed instead.

[juliandoucette, 2016/11/17 16:09:39]

Done.

- ******************************************************************************/
-
-$white: #fafafa !default;
-$gray-light: #e0e0e0 !default;
-$gray: #9e9e9e !default;
-$gray-dark: #616161 !default;
-$black: #212121 !default;
-
-$red-light: #ffcdd2 !default;
-$red: #f44336 !default;
-$red-dark: #b71c1c !default;
-
-$green-light: #c8e6c9 !default;
-$green: #4caf50 !default;
-$green-dark: #1b5e20 !default;
-
-$blue-light: #bbdefb !default;
-$blue: #2196f3 !default;
-$blue-dark: #0d47a1 !default;
-
 /* Brand colors
  ******************************************************************************/
 
 /* Primary - The most widely used across all screens and components. */
 
-$primary: $white !default;

[saroyanm, 2016/11/15 14:28:58]

Do we have a process of overriding the default variables ? I think if we will
only use this file to change the variables we do not need to setup default
values ? How you imagine the override process and why are we using defaults here
?

[juliandoucette, 2016/11/16 14:58:51]

Acknowledged.

We will add a DO NOT EDIT comment in this file explaining how SCSS variables
work.

[juliandoucette, 2016/11/17 16:09:39]

Done.

-$primary-foreground: $black !default;
-$primary-background: $white !default;
+$primary: #212121 !default;
+$primary-light: #fafafa !default;
+$primary-dark: #000 !default;
 
 /* Secondary - Used to indicate a related action or information. */
 
-$secondary: $gray-dark !default;
-$secondary-foreground: $gray-light !default;
-$secondary-background: $gray-dark !default;
+$secondary: #9e9e9e !default;
+$secondary-light: #9e9e9e !default;
+$secondary-dark: #424242 !default;
 
 /* Accent - Used for action buttons and interactive elements. */
 
-$accent: $blue !default;
-$accent-foreground: $white !default;
-$accent-background: $blue-dark !default;
+$accent: #1565c0 !default;
+$accent-light: #e3f2fd !default;
+$accent-dark: #0d47a1 !default;
 
 /* Error - Used for error messages and warnings. */
 
-$error: $red !default;
-$error-foreground: $white !default;
-$error-background: $red-dark !default;
+$error: #f44336 !default;
+$error-light: #ffebee !default;
+$error-dark: #b71c1c !default;
 
 /* Fonts
  ******************************************************************************/
 
-$sans-font: sans-serif !default;

[saroyanm, 2016/11/15 14:28:58]

Detail: having variable with the same names as the font itself doesn't make much
sense I think, we need to understand where the font will be used to make the
naming consistent.

[juliandoucette, 2016/11/16 14:58:51]

Acknowledged.

We will change these to primary/secondary instead of sans/serif.

[juliandoucette, 2016/11/17 16:09:39]

Done.

-$serif-font: serif !default;

[saroyanm, 2016/11/15 14:28:58]

I can't see this font being used in content.

[juliandoucette, 2016/11/16 14:58:52]

Acknowledged.

+$primary-font: sans-serif !default;
+$secondary-font: serif !default;
 $monospace-font: monospace !default;
 
 $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: 64px !default;
 $medium-space: 32px !default;
 $small-space: 16px !default;
 
 /* Breakpoints
  ******************************************************************************/
 
-$mobile-breakpoint: 576px !default;

[juliandoucette, 2016/11/17 16:09:39]

Done.

[juliandoucette, 2016/11/17 16:09:40]

NOTE: Removed mobile breakpoint.

 $tablet-breakpoint: 768px !default;

[saroyanm, 2016/11/24 15:18:44]

We will remove "!default", because people should not be able to edit this
numbers.

[juliandoucette, 2016/11/25 16:28:45]

Done.

 $desktop-breakpoint: 992px !default;
 
 /* Container widths

[saroyanm, 2016/11/21 18:44:41]

Not sure if we need this variables, see my comment here:
https://codereview.adblockplus.org/29361647/diff2/29362495:29363507/scss/_con...

[juliandoucette, 2016/11/22 00:54:05]

Acknowledged.

See my comment on the other page.

[juliandoucette, 2016/11/25 16:28:44]

Done.

  ******************************************************************************/
 
 $mobile-width: 540px !default;
 $tablet-width: 720px !default;
 $desktop-width: 960px !default;