@progressive-development/pd-dialog 0.0.48 → 0.1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development dialog components.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.48",
+  "version": "0.1.0",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,9 +17,10 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "^0.1.3",
-    "@progressive-development/pd-icon": "^0.1.7",
+    "@progressive-development/pd-forms": "^0.1.5",
+    "@progressive-development/pd-icon": "^0.1.9",
     "@progressive-development/pd-price": "0.0.8",
+    "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.0.2"
   },
   "devDependencies": {

package/src/PdBookDatePopup.js

@@ -6,6 +6,9 @@
 import { LitElement, html, css } from 'lit';
 
 import '@progressive-development/pd-price/pd-price.js';
+
+import { PDFontStyles } from '@progressive-development/pd-shared-styles';
+
 import '../pd-popup-dialog.js';
 
 /**
@@ -24,14 +27,16 @@ export class PdBookDatePopup extends LitElement {
    */
 
   static get styles() {
-    return css`
+    return [
+      PDFontStyles,
+      css`
       p {
           color: var(--pd-default-font-content-col);
           font-size: var(--pd-default-font-content-size);
           font-family: var(--pd-default-font-content-family);
           max-width: 600px;
       }
-    `;
+    `];
   }
 
   static get properties() {

package/src/PdPopup.js

@@ -8,7 +8,7 @@ import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/Pd
 
 import '@progressive-development/pd-icon';
 
-import { SharedGlobalStyles } from './shared-global-styles.js';
+import { PDColorStyles } from '@progressive-development/pd-shared-styles';
 
 
 
@@ -21,7 +21,7 @@ import { SharedGlobalStyles } from './shared-global-styles.js';
 export class PdPopup extends LitElement {
   static get styles() {
     return [
-      SharedGlobalStyles,
+      PDColorStyles,
       css`
       :host {
         display: block;
@@ -35,7 +35,7 @@ export class PdPopup extends LitElement {
 
       /* Modal Content */
       .modal-content {        
-        background-color: var(--pd-default-bg-color);
+        background-color: var(--pd-default-bg-col);
         opacity: 1;
         margin: auto;
         padding: 20px;

package/src/PdPopupDialog.js

@@ -7,7 +7,7 @@ import { LitElement, html, css } from 'lit';
 
 import '@progressive-development/pd-forms/pd-button.js';
 
-import { SharedGlobalStyles } from './shared-global-styles.js';
+import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 /**
  * An example element.
@@ -22,7 +22,7 @@ export class PdPopupDialog extends LitElement {
 
   static get styles() {
     return [
-      SharedGlobalStyles,
+      PDColorStyles, PDFontStyles,
       css`
       :host {
         display: block;        
@@ -38,7 +38,7 @@ export class PdPopupDialog extends LitElement {
 
       .modal-content {        
         margin: auto;
-        border: 1px solid #666666;
+        border: 1px solid var(--pd-default-light-col);
         box-shadow: -4px 4px 10px var(--pd-default-dark-col);
         max-width: var(--pd-popup-max-width, 700px);
       }
@@ -55,7 +55,7 @@ export class PdPopupDialog extends LitElement {
         padding-top: 8px;
         font-family: var(--pd-default-font-title-family);
         font-size: var(--pd-popup-header-font-size, 1.4em);
-        color: var(--pd-popup-header-font-col, var(--pd-default-bg-color));
+        color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
       }
 
       .info-logo {
@@ -66,7 +66,7 @@ export class PdPopupDialog extends LitElement {
 
       .content {
         padding: 0.5rem 1rem 1rem 1rem;
-        background-color: var(--pd-popup-header-font-col, var(--pd-default-bg-color));
+        background-color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
         height: 100%;
       }
 

package/src/PdSubmitDialog.js

@@ -6,6 +6,9 @@
 import { LitElement, html, css } from 'lit';
 
 import '@progressive-development/pd-icon/pd-icon.js';
+
+import { PDColorStyles } from '@progressive-development/pd-shared-styles';
+
 import '../pd-popup-dialog.js';
 
 export const STATUS_SEND = 1;
@@ -24,15 +27,13 @@ export class PdSubmitDialog extends LitElement {
    */
 
   static get styles() {
-    return css`
+    return [
+      PDColorStyles,
+      css`
       :host {
         display: block;
       }
 
-      .popup-dialog {
-        --popup-max-width: 800px;
-      }
-
       .progress-container {
         padding: 20px;
       }
@@ -82,7 +83,7 @@ export class PdSubmitDialog extends LitElement {
           transform: rotate(360deg);
         }
       }
-    `;
+    `];
   }
 
   static get properties() {

package/src/shared-global-styles.js

@@ -1,56 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { css } from 'lit';
-
-export const SharedGlobalStyles = css`
-
-  :host {
-    /** 
-     * Set default fonts for all pd-components.
-     * Use content, title and input categories for fonts.
-     */
-    --pd-default-font-title-family: var(--app-font-title-family);
-    --pd-default-font-content-family: var(--app-font-content-family);
-    --pd-default-font-input-family: var(--app-font-input-family);
-
-    --pd-default-font-title-col: var(--app-font-title-col, #0A3A48);    
-    --pd-default-font-content-col: var(--app-font-content-col, #353738);
-    --pd-default-font-input-col: var(--app-font-input-col, #353738);
-
-    --pd-default-font-content-size: var(--app-font-content-size, 1em);
-    --pd-default-font-input-size: var(--app-font-input-size, 1em);
-
-    /**
-     * Set default colors for all pd-components 
-     */
-    --pd-default-col: var(--app-primary-col, #067394);
-    --pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
-    --pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
-    --pd-default-bg-color: var(--app-primary-bg-col, #fefefe);
-
-    --pd-default-hover-col: var(--app-hover-col, #f3d7a0);
-    --pd-default-error-col: var(--app-error-col, #cc2029);
-    --pd-default-error-light-col: var(--app-error-light-col, #ffe8e8);
-    --pd-default-success-col: var(--app-success-col, #42a01c);
-    --pd-default-success-light-col: var(--app-success-light-col, #f5ffe8);
-    --pd-default-disabled-col: var(--app-disabled-col, #888585);
-    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);    
-
-    --pd-default-modal-bg-rgba: rgba(175, 193, 210, 0.8); /* #AFC1D2 to rgba for opacity */
-  }
-
-  .modal {
-      position: fixed; /* Stay in place */
-      z-index: 100; /* Sit on top */        
-      left: 0;
-      top: 0;
-      width: 100%; /* Full width */
-      height: 100%; /* Full height */
-      overflow: auto; /* Enable scroll if needed */
-      background-color: var(--pd-popup-modal-bg-rgba, var(--pd-default-modal-bg-rgba)); /* RGBA Wert muss hier verwendet werden */
-  }
-
-`;