Merge pull request #5 from oskar-binary/oskar/base-css

oskar/base-css
binary-com · Jul 26, 2019 · 2f595a2 · 2f595a2
2 parents f57ee28 + 457d2ec
commit 2f595a2
Show file tree

Hide file tree

Showing 8 changed files with 315 additions and 35 deletions.
diff --git a/packages/base-style/README.md b/packages/base-style/README.md
@@ -2,12 +2,10 @@
 > Responsible for the basic style setup for all packages.
 
 Includes:
-* Animations
-* Devices - media query breakpoints
-* Mixins
-* Reset
 * Colors - all color variables
+* Devices - media query breakpoints
 * Fonts - font variables and setup
+* Reset
 
 ## Usage
 
@@ -51,24 +49,3 @@ p {
 ```
 
 To define new typefaces, add the name and value in the `$FONT_SIZES`, `$FONT_WEIGHTS` or `$COLORS` maps accordingly in `fonts.scss` file.
-
-#### Mixins
-```scss
-// mixins.scss
-@mixin link {
-    color: $COLOR_WHITE;
-
-    &:hover, &:active {
-        text-decoration: none;
-    }
-}
-// package
-.sidebar {
-    background: $COLOR_LIGHT_GRAY;
-
-    a {
-        @include link;
-        display: block;
-    }
-}
-```
diff --git a/packages/base-style/src/sass/animations.scss b/packages/base-style/src/sass/animations.scss
diff --git a/packages/base-style/src/sass/colors.scss b/packages/base-style/src/sass/colors.scss
@@ -1,11 +1,45 @@
-/*#region colors*/
-$BGCOLOR : #39b19d;
-/*#endregion colors*/
-/*#region font-sizes*/
-/*#endregion font-sizes*/
+/* stylelint-disable color-no-hex */
 
-.body {
-    font: 'outline';
-    font-size: 5em;
-    color: $BGCOLOR;
-}
+// Basic
+$COLOR_BLACK      : #000000;
+$COLOR_GREEN_1    : #39b19d;
+$COLOR_GREEN_2    : #2d9f93;
+$COLOR_GREEN_3    : #21ce99;
+$COLOR_ORANGE     : #ff9933;
+$COLOR_DARK_ORANGE: #ff8802;
+$COLOR_PURPLE     : #4f60ae;
+$COLOR_RED        : #e31c4b;
+$COLOR_SKY_BLUE   : #2196f3;
+$COLOR_WHITE      : #ffffff;
+
+// Light theme
+$COLOR_LIGHT_BLACK_1        : rgba(0, 0, 0, 0.8);
+$COLOR_LIGHT_BLACK_2        : rgba(0, 0, 0, 0.4);
+$COLOR_LIGHT_BLACK_3        : rgba(0, 0, 0, 0.16);
+$COLOR_LIGHT_BLACK_3_SOLID_1: #d6d6d6;
+$COLOR_LIGHT_BLACK_3_SOLID_2: #b3b3b3;
+$COLOR_LIGHT_BLACK_4        : rgba(0, 0, 0, 0.04);
+$COLOR_LIGHT_BLACK_4_SOLID  : #f4f4f6;
+$COLOR_LIGHT_GRAY_1         : #999cac;
+$COLOR_LIGHT_GRAY_2         : rgba(153, 156, 172, 0.32);
+$COLOR_LIGHT_GREEN_GRADIENT : linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 148, 117, 0.16));
+$COLOR_LIGHT_RED_GRADIENT   : linear-gradient(to top, rgba(255, 255, 255, 0), rgba(227, 28, 75, 0.16));
+$COLOR_LIGHT_WHITE_GRADIENT : linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+// Dark theme
+$COLOR_DARK_BLACK_GRADIENT : linear-gradient(to right, rgba(16, 19, 32, 1), rgba(16, 19, 32, 0));
+$COLOR_DARK_BLUE_1         : #0b0e18;
+$COLOR_DARK_BLUE_2         : #101320;
+$COLOR_DARK_BLUE_3         : #191c31;
+$COLOR_DARK_BLUE_4         : #202641;
+$COLOR_DARK_BLUE_5         : #2a3052;
+$COLOR_DARK_BLUE_6         : #555975;
+$COLOR_DARK_BLUE_7         : #7f8397;
+$COLOR_DARK_BLUE_8         : rgba(127, 131, 151, 0.3);
+$COLOR_DARK_GRAY_1         : #282a37;
+$COLOR_DARK_GRAY_2         : #303342;
+$COLOR_DARK_GREEN_GRADIENT : linear-gradient(to top, rgba(16, 19, 32, 0), rgba(0, 148, 117, 0.16));
+$COLOR_DARK_RED_GRADIENT   : linear-gradient(to top, rgba(16, 19, 32, 0), rgba(227, 28, 75, 0.16));
+$COLOR_DARK_GRAY_1         : #282a37;
+$COLOR_DARK_GRAY_2         : #303342;
+$COLOR_DARK_GRAY_3         : #555975;
diff --git a/packages/base-style/src/sass/devices.scss b/packages/base-style/src/sass/devices.scss
@@ -0,0 +1,36 @@
+// /*
+//  * Devices breakpoints - TODO: define proper breakpoints
+//  */
+// @mixin breakpoints($val) {
+//     $big-desktop: '(max-width: 1800px)';
+//     $tab-land   : '(max-width: 1200px)';
+//     $tab-port   : '(max-width: 900px)';
+//     $phone-xl   : '(max-width: 599px)';
+//     $phone-lg   : '(max-width: 480px)';
+
+//     @if $val == big-desktop {
+//         @media #{$big-desktop} {
+//             @content;
+//         }
+//     }
+//     @else if $val == tab-land {
+//         @media #{$tab-land} {
+//             @content;
+//         }
+//     }
+//     @else if $val == tab-port {
+//         @media #{$tab-port} {
+//             @content;
+//         }
+//     }
+//     @else if $val == phone-xl {
+//         @media #{$phone-xl} {
+//             @content;
+//         }
+//     }
+//     @else if $val == phone-lg {
+//         @media #{$phone-lg} {
+//             @content;
+//         }
+//     }
+// }
diff --git a/packages/base-style/src/sass/fonts.scss b/packages/base-style/src/sass/fonts.scss
@@ -0,0 +1,147 @@
+@at-root {
+    @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=latin,vietnamese,cyrillic-ext,latin-ext,cyrillic');
+}
+
+/*
+    Constants
+*/
+$FONT_STACK: roboto, sans-serif;
+$BASE_FONT_SIZE: 10px;
+
+/*
+    Variables
+*/
+$FONT_SIZES: (
+    'heading'   em(30px),
+    'large'     em(28px),
+    'title'     em(16px),
+    'paragraph' em(14px),
+    'small'     em(12px),
+    'xsmall'    em(10px),
+    'xxsmall'   em(8px),
+    'xxxsmall'  em(6px),
+);
+
+$FONT_COLORS: (
+    'active'   $COLOR_WHITE,
+    'black'    $COLOR_LIGHT_BLACK_1,
+    'grey'     $COLOR_LIGHT_BLACK_2,
+    'disabled' $COLOR_LIGHT_BLACK_3,
+    'green'    $COLOR_GREEN_1,
+    'red'      $COLOR_RED,
+    'orange'   $COLOR_ORANGE,
+);
+
+$FONT_WEIGHTS: (
+    'bold'     700,
+    'semibold' 500,
+    'normal'   400,
+    'light'    300,
+);
+
+$TEXT_ALIGN: (
+    'center' center,
+    'left'   left,
+    'right'  right,
+);
+
+$LINEHEIGHTS: (
+    'large' : 1.75,
+    'medium': 1.5,
+    'small' : 1.25,
+);
+
+/*
+    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
+    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
+    Variables name example: --title-center-semibold-red
+ */
+$TYPEFACES_LIST: generate-typefaces();
+
+/*
+ * PX to EM
+ * @param $px - px value to be converted
+ * @param $base - base font size (in `em`)
+ * Note: 'em' values are calculate based on the element font-size
+ *       to properly converts 'px' to 'em', please pass in the element font-size with it
+ * Usage example:
+    padding: em(16px, 1.6em); // font-size in 'em'
+ */
+ @function em($px, $base: $BASE_FONT_SIZE) {
+    $list: ();
+    @if length($px) != 1 {
+        @for $i from 1 through length($px) {
+            $val_em: (nth($px, $i) / $base) * 1em;
+            $list: append($list, $val_em, space);
+        }
+        @return $list;
+    }
+    @else {
+        @return ($px / $base) * 1em;
+    }
+}
+
+/*
+ * Set property by passing a property name, and values.
+ * @param $property name - padding, margin etc.
+ * @param $values        - values in `px` (space separated for multiple values)
+ * @param $font-size     - base font-size in `em`
+ * Usage example:
+   @include toEm(padding, 8px 16px 8px, 1.6em);
+ */
+@mixin toEm($property, $values, $font-size: $BASE_FONT_SIZE) {
+    #{$property}: em($values, $font-size);
+}
+
+/*
+ * Sets font-size, font-weight, color, text-transform, text-align and line-height
+ * Usage example:
+   @include setTypeface(16px, bold, black, uppercase);
+ */
+ @mixin setTypeface($size, $align, $weight, $colour, $tt) {
+    @if $size {
+        font-size: $size;
+    }
+    @if $colour {
+        color: $colour;
+    }
+    @if $weight {
+        font-weight: $weight;
+    }
+    @if $tt {
+        text-transform: $tt;
+    }
+    @if $align {
+        text-align: $align;
+    }
+    @if $size == 1.6em {
+        line-height: map-get($map: $LINEHEIGHTS, $key: 'large');
+    }
+    @else if $size == 1.4em {
+        line-height: map-get($map: $LINEHEIGHTS, $key: 'medium');
+    }
+    @else if $size == 1.2em {
+        line-height: map-get($map: $LINEHEIGHTS, $key: 'small');
+    }
+    @else {
+        line-height: unset;
+    }
+}
+
+/*
+ * Set typefaces by passing a typeface variable name
+ * @param $var   - typeface variable
+ * @param $tt    - text-transform property
+ * @param $align - text-align property
+ * Usage example:
+   @include typeface(--paragraph-bold-black, uppercase, center);
+ */
+@mixin typeface($var, $tt: capitalize) {
+    $typeface_config: map-get($map: $TYPEFACES_LIST, $key: $var);
+
+    $size  : nth($typeface_config, 1); // font-size
+    $align : nth($typeface_config, 2); // text-align
+    $weight: nth($typeface_config, 3); // font-weight
+    $color : nth($typeface_config, 4); // color
+    @include setTypeface($size, $align, $weight, $color, $tt);
+}
diff --git a/packages/base-style/src/sass/mixins.scss b/packages/base-style/src/sass/mixins.scss
diff --git a/packages/base-style/src/sass/reset.scss b/packages/base-style/src/sass/reset.scss
@@ -0,0 +1,55 @@
+/*------------------------------------*
+ *  # Reset SCSS
+ *  - to make browsers render all elements more consistently
+ *  - Reference:  https://github.com/AdamMarsden/simple-typography/blob/master/_reset.scss
+ *------------------------------------*/
+
+/* stylelint-disable */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup, input,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+html {
+    height: 100%;
+}
+body {
+    line-height: 1;
+    height: 100%;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+/* stylelint-enable */
diff --git a/packages/base-style/src/sass/theme.scss b/packages/base-style/src/sass/theme.scss
@@ -0,0 +1,31 @@
+/*
+ * Implementation of themes
+ * generate sets of themes keys object property (dark / light)
+ * @param $themes - themes property
+ * Usage example:
+   @include themify($themes) { color: themed('background_color') }
+ */
+ @mixin themify($themes) {
+    @each $theme, $map in $themes {
+        .theme--#{$theme} & {
+            $theme-map: () !global;
+            @each $key, $submap in $map {
+                $value: map-get(map-get($themes, $theme), '#{$key}');
+                $theme-map: map-merge($theme-map, ($key: $value)) !global;
+            }
+            @content;
+            $theme-map: null !global;
+        }
+    }
+}
+
+/*
+ * Generate typefaces key-value pair of themefy object
+ * Should be inside themify mixins
+ * Example:
+   @include themify($themes) { border-color: 1px solid themed('background_color') }
+ */
+ @function themed($key) {
+    @return map-get($theme-map, $key);
+}
+