feat: scss configurable variables

BREAKING CHANGE: stylesheet has to be imported into project

README.md

@@ -3,7 +3,7 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)
 
 > Angular date picker and parser
-> 
+>
 > *this project is currently a work in progress*
 
 ### 🏠 [Homepage](https://github.com/AnnotationSro/ng-a-datepicker)
@@ -26,6 +26,24 @@ yarn start
 npm run start
 ```
 
+## Styles
+You can import stylesheet and change variables
+```scss
+$text-light: #ffffff; // !default
+$text-lighter: #d8d8d8; // !default
+$text-dark: #212529; // !default
+
+$bg-light: #ffffff; // !default
+$bg-active: #52b4f6; // !default
+
+$border-radius: 5px; //!default
+$border-color: #ced4da; // !default
+$border-color-active: #9fd6fa; // !default
+$border-color-shadow: #3facf5; // !default
+
+@import "~@annotation/ng-datepicker/ng-datepicker";
+```
+
 ## Authors
 
 👤 **Pavol Slany**

ng-a-date-picker/package.json

@@ -61,5 +61,9 @@
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.3.5"
+  },
+  "volta": {
+    "node": "12.14.1",
+    "yarn": "1.22.11"
   }
 }

ng-a-date-picker/projects/ng-datepicker/README.md

@@ -0,0 +1,65 @@
+# Welcome to @annotation/ng-datepicker 👋
+[![Version](https://img.shields.io/npm/v/@annotation/ng-datepicker.svg)](https://www.npmjs.com/package/@annotation/ng-datepicker)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)
+
+> Angular date picker and parser
+> 
+> *this project is currently a work in progress*
+
+### 🏠 [Homepage](https://github.com/AnnotationSro/ng-a-datepicker)
+
+## Install
+
+```sh
+yarn add @annotation/ng-parser ## peer dependency
+yarn add @annotation/ng-datepicker
+## OR ##
+npm install @annotation/ng-parser --save  ## peer dependency
+npm install @annotation/ng-datepicker --save
+```
+
+## Usage
+
+```sh
+yarn start
+## OR ##
+npm run start
+```
+
+## Styles 
+You can import stylesheet and change variables
+```scss
+$text-light: #ffffff; // !default
+$text-lighter: #d8d8d8; // !default
+$text-dark: #212529; // !default
+
+$bg-light: #ffffff; // !default
+$bg-active: #52b4f6; // !default
+
+$border-radius: 5px; //!default
+$border-color: #ced4da; // !default
+$border-color-active: #9fd6fa; // !default
+$border-color-shadow: #3facf5; // !default
+
+@import "~@annotation/ng-datepicker/ng-datepicker";
+```
+
+## Authors
+
+👤 **Pavol Slany**
+
+* Website: www.annotation.sk
+* Github: [@slany](https://github.com/slany)
+
+👤 **Martin Filo**
+
+* Website: www.annotation.sk
+* Github: [@Chiff](https://github.com/Chiff)
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+
+***
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

ng-a-date-picker/projects/ng-datepicker/src/lib/components/popup/popup.component.scss → ng-a-date-picker/projects/ng-datepicker/ng-datepicker.scss

@@ -1,4 +1,16 @@
-$border-color: #ced4da;
+$text-light: #ffffff !default;
+$text-lighter: #d8d8d8 !default;
+$text-dark: #212529 !default;
+
+$bg-light: #ffffff !default;
+$bg-active: #52b4f6 !default;
+
+$border-radius: 5px !default;
+$border-color: #ced4da !default;
+$border-color-active: #9fd6fa !default;
+$border-color-shadow: #3facf5 !default;
+
+
 
 .ng-date-popup {
   position: absolute;
@@ -10,9 +22,9 @@ $border-color: #ced4da;
   transform: translateY(100%);
   padding: 10px;
 
-  background: white;
+  background: $bg-light;
   border: 2px solid $border-color;
-  border-radius: 5px;
+  border-radius: $border-radius;
 
   width: 300px;
 
@@ -35,17 +47,17 @@ $border-color: #ced4da;
 
 .ng-date-popup--prev,
 .ng-date-popup--next {
-  color: #52b4f6;
+  color: $bg-active;
   display: inline-block;
   text-decoration: none;
   cursor: pointer;
   background-color: transparent;
   border: 2px solid transparent;
-  border-radius: 5px;
+  border-radius: $border-radius;
 }
 .ng-date-popup--prev[disabled],
 .ng-date-popup--next[disabled] {
-  color: #d8d8d8;
+  color: $text-lighter;
   cursor: default;
 }
 
@@ -65,15 +77,15 @@ $border-color: #ced4da;
   flex-grow: 1;
 
   border: 2px solid $border-color;
-  border-radius: 5px;
+  border-radius: $border-radius;
   padding: 4px 12px;
 
   &:focus {
-    color: #212529;
-    background-color: #fff;
-    border-color: #9fd6fa;
+    color: $text-dark;
+    background-color: $bg-light;
+    border-color: $border-color-active;
     outline: 0;
-    box-shadow: 0 0 0 0.25rem rgba(63, 172, 245, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba($border-color-shadow, 0.25);
   }
 }
 
@@ -111,17 +123,17 @@ $border-color: #ced4da;
 }
 
 .ng-date-popup--date-weekend {
-  background: rgba(#52b4f6, 0.15);
+  background: rgba($bg-active, 0.15);
 }
 
 .ng-date-popup--date-disabled {
   background: rgba($border-color, 0.25);
-  color: #212529;
+  color: $text-dark;
 }
 
 .ng-date-popup--date-active {
-  background: #52b4f6;
-  color: white;
+  background: $bg-active;
+  color: $text-light;
 }
 
 .ng-date-popup--relative-wrapper {

ng-a-date-picker/projects/ng-datepicker/ng-package.json

@@ -5,5 +5,9 @@
     "entryFile": "src/public-api.ts"
   },
   "whitelistedNonPeerDependencies": [
-  ]
+  ],
+  "assets": [
+    "./ng-datepicker.scss",
+    "./README.md"
+  ],
 }

ng-a-date-picker/projects/ng-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotation/ng-datepicker",
-  "version": "0.2.4-alpha",
+  "version": "0.3.0-alpha",
   "description": "Angular datepicker - work in progress",
   "scripts": {
     "release": "dotenv release-it"

ng-a-date-picker/projects/ng-datepicker/src/lib/components/popup/popup.component.ts

@@ -10,7 +10,6 @@ import { ParseService } from '../../services/parse.service';
 @Component({
   selector: 'ng-date-popup',
   templateUrl: './popup.component.html',
-  styleUrls: ['./popup.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class PopupComponent implements OnInit, OnDestroy {