@progressive-development/pd-wizard 0.0.58 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +4 -3
  2. package/src/PdSteps.js +23 -18
  3. package/src/PdWizard.js +15 -11
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "order",
15
15
  "steps"
16
16
  ],
17
- "version": "0.0.58",
17
+ "version": "0.1.2",
18
18
  "main": "index.js",
19
19
  "module": "index.js",
20
20
  "scripts": {
@@ -31,8 +31,9 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@lit/localize": "^0.11.2",
34
- "@progressive-development/pd-forms": "^0.1.4",
35
- "@progressive-development/pd-icon": "^0.1.8",
34
+ "@progressive-development/pd-forms": "^0.1.6",
35
+ "@progressive-development/pd-icon": "^0.1.10",
36
+ "@progressive-development/pd-shared-styles": "0.1.1",
36
37
  "lit": "^2.2.0"
37
38
  },
38
39
  "devDependencies": {
package/src/PdSteps.js CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  import { LitElement, html, css } from 'lit';
8
8
 
9
+ import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
10
+
9
11
  /**
10
12
  * An example element.
11
13
  *
@@ -19,7 +21,9 @@ class PdSteps extends LitElement {
19
21
  */
20
22
 
21
23
  static get styles() {
22
- return css`
24
+ return [
25
+ PDColorStyles, PDFontStyles,
26
+ css`
23
27
  :host {
24
28
 
25
29
  /**
@@ -28,31 +32,32 @@ class PdSteps extends LitElement {
28
32
  * Übergabe Properties angepasst, bis die Steps refactored werden....
29
33
  */
30
34
 
31
- --my-font: var(--app-font-title-family);
35
+ --my-font: var(--pd-default-font-title-family);
32
36
 
33
- --my-step-passed-name-circle-color: var(--app-primary-dark-col, #0A3A48);
34
- --my-step-passed-border-color: var(--app-success-col, #42a01c);
35
- --my-step-passed-color: var(--app-success-light-col, #f5ffe8);
37
+ --my-step-passed-name-circle-color: var(--pd-default-dark-col);
38
+ --my-step-passed-border-color: var(--pd-default-success-col);
39
+ --my-step-passed-color: var(--pd-default-success-light-col);
36
40
 
37
- --my-step-text-color: var(--app-primary-bg-col, #fefefe);
38
- --my-step-name-circle-color: var(--app-primary-bg-col, #fefefe);
41
+ --my-step-text-color: var(--pd-default-bg-col);
42
+ --my-step-name-circle-color: var(--pd-default-bg-col);
39
43
 
40
- --my-step-current-text-color: var(--app-primary-dark-col, #0A3A48);
41
- --my-step-current-name-circle-color: var(--app-primary-dark-col, #0A3A48);;
42
- --my-step-current-border-color: var(--app-primary-bg-col, #fefefe);
43
- --my-step-current-color: var(--app-hover-col, #f3d7a0);
44
+ --my-step-current-text-color: var(--pd-default-dark-col);
45
+ --my-step-current-name-circle-color: var(--pd-default-dark-col);
46
+ --my-step-current-border-color: var(--pd-default-bg-col);
47
+ --my-step-current-color: var(--pd-default-hover-col);
44
48
 
45
- --my-step-unfinished-border-color: var(--app-primary-bg-col, #fefefe);
46
- --my-step-unfinished-color: var(--app-primary-col, #067394);
49
+ --my-step-unfinished-border-color: var(--pd-default-bg-col);
50
+ --my-step-unfinished-color: var(--pd-default-col);
47
51
 
48
-
52
+ /*
49
53
  --my-step-passed-gradient-color: var(--squi-test, #084c61);
50
54
  --my-step-current-gradient-color: var(--squi-test, #f3d7a0);
55
+ */
51
56
 
52
- --my-step-hover-color: var(--app-hover-col, #f3d7a0);
57
+ --my-step-hover-color: var(--pd-default-hover-col);
53
58
 
54
- --my-bg-color: var(--app-primary-light-col, #AFC1D2);
55
- --my-hr-bg-color: var(--app-primary-bg-col, #fefefe);
59
+ --my-bg-color: var(--pd-default-light-col);
60
+ --my-hr-bg-color: var(--pd-default-bg-col);
56
61
 
57
62
  display: block;
58
63
  background-color: var(--my-bg-color);
@@ -252,7 +257,7 @@ class PdSteps extends LitElement {
252
257
  padding-top: 3px;
253
258
  }
254
259
  }
255
- `;
260
+ `];
256
261
  }
257
262
 
258
263
  static get properties() {
package/src/PdWizard.js CHANGED
@@ -11,6 +11,8 @@ import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/Pd
11
11
  import '@progressive-development/pd-icon/pd-icon.js';
12
12
  import '@progressive-development/pd-forms/pd-button.js';
13
13
 
14
+ import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
15
+
14
16
  import './PdSteps.js';
15
17
 
16
18
  /**
@@ -40,13 +42,15 @@ export class PdWizard extends LitElement {
40
42
  */
41
43
 
42
44
  static get styles() {
43
- return css`
45
+ return [
46
+ PDColorStyles, PDFontStyles,
47
+ css`
44
48
  :host {
45
49
 
46
50
  /* These values are used more than onnce and dfined here for short access */
47
51
  --my-height: var(--pd-wizard-title-height, 110px);
48
- --my-header-font-color: var(--pd-wizard-header-font-col, var(--app-primary-bg-col, #fefefe));
49
- --my-header-bg-col: var(--pd-wizard-header-bg-col, var(--app-primary-col, #067394));
52
+ --my-header-font-color: var(--pd-wizard-header-font-col, var(--pd-default-bg-col));
53
+ --my-header-bg-col: var(--pd-wizard-header-bg-col, var(--pd-default-col));
50
54
 
51
55
  display: block;
52
56
  /*min-height: 100%;*/
@@ -99,7 +103,7 @@ export class PdWizard extends LitElement {
99
103
  display: flex;
100
104
  justify-content: center;
101
105
  height: 100%;
102
- background-color: var(--pd-wizard-content-bg-col, var(--app-primary-bg-col, #fefefe));
106
+ background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
103
107
  }
104
108
 
105
109
  .wiz-content-inner {
@@ -107,7 +111,7 @@ export class PdWizard extends LitElement {
107
111
  min-height: 200px;
108
112
  min-width: 400px;
109
113
  max-width: 1000px;
110
- background-color: var(--pd-wizard-content-inner-bg-col, var(--app-primary-bg-col, #fefefe));
114
+ background-color: var(--pd-wizard-content-inner-bg-col, var(--pd-default-bg-col));
111
115
  }
112
116
 
113
117
  .wiz-buttons {
@@ -121,8 +125,8 @@ export class PdWizard extends LitElement {
121
125
  height: 80px;
122
126
  /*background-color: var(--pd-wizard-footer-bg-col, red);*/
123
127
  background: linear-gradient(to right,
124
- var(--pd-wizard-buttons-bg-col1, var(--app-primary-light-col, #AFC1D2)) 0%,
125
- var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col, lightgrey)) 100%);
128
+ var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
129
+ var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col)) 100%);
126
130
  }
127
131
 
128
132
  .wiz-breadcrumbs {
@@ -138,7 +142,7 @@ export class PdWizard extends LitElement {
138
142
  }
139
143
 
140
144
  .title {
141
- font-family: var(--app-font-title-family);
145
+ font-family: var(--pd-default-font-title-family);
142
146
  font-size: var(--pd-wizard-header-font-size, 2em);
143
147
  font-weight: bolder;
144
148
  line-height: var(--my-height);
@@ -166,8 +170,8 @@ export class PdWizard extends LitElement {
166
170
 
167
171
  .close:hover,
168
172
  .close:focus {
169
- color: var(--app-hover-col, #f3d7a0);
170
- --pd-icon-stroke-col: var(--app-hover-col, #f3d7a0);
173
+ color: var(--pd-default-hover-col);
174
+ --pd-icon-stroke-col: var(--pd-default-hover-col);
171
175
  }
172
176
 
173
177
  /* Size Elements for small width */
@@ -193,7 +197,7 @@ export class PdWizard extends LitElement {
193
197
  }
194
198
  }
195
199
 
196
- `;
200
+ `];
197
201
  }
198
202
 
199
203
  static get properties() {