Issue 4607 - Default content styles

scss/_variables.scss

Index: scss/_variables.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,86 @@
+/*!
+ * 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/>.
+ */
+
+/* colors
+ ******************************************************************************/
+
+$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
+ ******************************************************************************/
+
+$large-font: 24px;
+$medium-font: 16px;
+$small-font: 12px;
+
+/* font weights
+ ******************************************************************************/
+
+$bold-weight: 600;
+$normal-weight: 400;
+$thin-weight: 300;
+
+/* spacing
+ ******************************************************************************/
+
+$large-space: 56px;
+$medium-space: 34px;
+$small-space: 12px;
+
+/* breakpoints
+ ******************************************************************************/
+
+$mobile-breakpoint: 576px;
+$tablet-breakpoint: 768px;
+$desktop-breakpoint: 992px;