@things-factory/operato-hub 7.0.1-beta.6 → 7.0.1-beta.8

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.
@@ -21,7 +21,7 @@ class BizplaceCards extends LitElement {
21
21
  float: left;
22
22
  background-color: var(--md-sys-color-surface);
23
23
  border-radius: var(--border-radius);
24
- border: 1px solid var(--theme-white-color);
24
+ border: 1px solid var(--md-sys-color-on-primary);
25
25
  box-shadow: var(--box-shadow);
26
26
  margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
27
27
  padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
@@ -58,7 +58,7 @@ class BizplaceCards extends LitElement {
58
58
  max-width: 100%;
59
59
  min-height: 20px;
60
60
  opacity: 0.8;
61
- border-top: var(--border-dark-color);
61
+ border-top: var(--border-dim-color);
62
62
  margin-top: var(--margin-narrow);
63
63
 
64
64
  font-size: var(--fontsize-small);
@@ -31,7 +31,7 @@ class BizplaceDomainCards extends LitElement {
31
31
  float: left;
32
32
  background-color: var(--md-sys-color-surface);
33
33
  border-radius: var(--border-radius);
34
- border: 1px solid var(--theme-white-color);
34
+ border: 1px solid var(--md-sys-color-on-primary);
35
35
  box-shadow: var(--box-shadow);
36
36
  margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
37
37
  padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
@@ -62,7 +62,7 @@ class BizplaceDomainCards extends LitElement {
62
62
  max-width: 100%;
63
63
  min-height: 20px;
64
64
  opacity: 0.8;
65
- border-top: var(--border-dark-color);
65
+ border-top: var(--border-dim-color);
66
66
  margin-top: var(--margin-narrow);
67
67
 
68
68
  font-size: var(--fontsize-small);
@@ -23,7 +23,7 @@ class HomeMenuCards extends LitElement {
23
23
  float: left;
24
24
  background-color: var(--md-sys-color-surface);
25
25
  border-radius: var(--border-radius);
26
- border: 1px solid var(--theme-white-color);
26
+ border: 1px solid var(--md-sys-color-on-primary);
27
27
  box-shadow: var(--box-shadow);
28
28
  margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
29
29
  padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
@@ -56,7 +56,7 @@ class HomeMenuCards extends LitElement {
56
56
  max-width: 100%;
57
57
  min-height: 20px;
58
58
  opacity: 0.8;
59
- border-top: var(--border-dark-color);
59
+ border-top: var(--border-dim-color);
60
60
  margin-top: var(--margin-narrow);
61
61
  padding-top: var(--padding-narrow);
62
62
 
@@ -81,16 +81,16 @@ class HomeMenuCards extends LitElement {
81
81
  }
82
82
  [business] li {
83
83
  border: 1px solid var(--status-info-color);
84
- color: var(--theme-white-color);
84
+ color: var(--md-sys-color-on-primary);
85
85
  background-color: var(--status-info-color);
86
86
  }
87
87
  [business] mwc-icon,
88
88
  [business] strong {
89
- color: var(--theme-white-color);
89
+ color: var(--md-sys-color-on-primary);
90
90
  }
91
91
  [business] span {
92
92
  opacity: 1;
93
- color: var(--theme-white-color);
93
+ color: var(--md-sys-color-on-primary);
94
94
  }
95
95
  [business] li:hover {
96
96
  background-color: var(--md-sys-color-primary);
@@ -33,7 +33,7 @@ class OAuth2DecisionPage extends LitElement {
33
33
  }
34
34
  input,
35
35
  select {
36
- border: var(--border-dark-color);
36
+ border: var(--border-dim-color);
37
37
  border-radius: var(--border-radius);
38
38
  margin: var(--input-margin);
39
39
  padding: var(--input-padding);
@@ -44,7 +44,7 @@ class OAuth2DecisionPage extends LitElement {
44
44
  display: flex;
45
45
  flex-direction: column;
46
46
  font: var(--label-font);
47
- color: var(--label-color);
47
+ color: var(--label-color, var(--md-sys-color-on-surface));
48
48
  text-transform: var(--label-text-transform);
49
49
  }
50
50
  [buttons] {
@@ -23,12 +23,12 @@ export class BusinessRegister extends localize(i18next)(LitElement) {
23
23
  }
24
24
  label {
25
25
  font: var(--label-font);
26
- color: var(--label-color);
26
+ color: var(--label-color, var(--md-sys-color-on-surface));
27
27
  text-transform: var(--label-text-transform);
28
28
  }
29
29
  input,
30
30
  select {
31
- border: var(--border-dark-color);
31
+ border: var(--border-dim-color);
32
32
  border-radius: var(--border-radius);
33
33
  margin: var(--input-margin);
34
34
  padding: var(--input-padding);
@@ -21,7 +21,7 @@ class AccountingCard extends LitElement {
21
21
  float: left;
22
22
  background-color: var(--md-sys-color-surface);
23
23
  border-radius: var(--border-radius);
24
- border: 1px solid var(--theme-white-color);
24
+ border: 1px solid var(--md-sys-color-on-primary);
25
25
  box-shadow: var(--box-shadow);
26
26
  margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
27
27
  padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
@@ -54,7 +54,7 @@ class AccountingCard extends LitElement {
54
54
  max-width: 100%;
55
55
  min-height: 20px;
56
56
  opacity: 0.8;
57
- border-top: var(--border-dark-color);
57
+ border-top: var(--border-dim-color);
58
58
  margin-top: var(--margin-narrow);
59
59
 
60
60
  font-size: var(--fontsize-small);
@@ -71,7 +71,7 @@ class ApplicationStore extends connect(store)(PageView) {
71
71
  th {
72
72
  background-color: rgba(var(--primary-color-rgb), 0.1);
73
73
  border-top: var(--th-border-top);
74
- border-bottom: var(--border-dark-color);
74
+ border-bottom: var(--border-dim-color);
75
75
  padding: var(--th-padding);
76
76
 
77
77
  font: var(--th-font);
@@ -80,7 +80,7 @@ class ApplicationStore extends connect(store)(PageView) {
80
80
  }
81
81
  td {
82
82
  padding: var(--td-padding);
83
- border-bottom: var(--border-dark-color);
83
+ border-bottom: var(--border-dim-color);
84
84
  font: var(--td-font);
85
85
  }
86
86
  td a {
@@ -72,12 +72,12 @@ class BizplacePage extends connect(store)(PageView) {
72
72
  flex-direction: column;
73
73
 
74
74
  font: var(--label-font);
75
- color: var(--label-color);
75
+ color: var(--label-color, var(--md-sys-color-on-surface));
76
76
  text-transform: var(--label-text-transform);
77
77
  }
78
78
  input,
79
79
  select {
80
- border: var(--border-dark-color);
80
+ border: var(--border-dim-color);
81
81
  border-radius: var(--border-radius);
82
82
  margin: var(--input-margin);
83
83
  padding: var(--input-padding);
@@ -109,7 +109,7 @@ class BizplacePage extends connect(store)(PageView) {
109
109
  background-color: var(--md-sys-color-surface-variant);
110
110
  margin: var(--fieldset-margin);
111
111
  padding: var(--fieldset-padding);
112
- border: var(--border-dark-color);
112
+ border: var(--border-dim-color);
113
113
  border-radius: var(--border-radius);
114
114
  box-shadow: var(--box-shadow);
115
115
  max-width: var(--input-container-max-width);
@@ -126,7 +126,7 @@ class BizplacePage extends connect(store)(PageView) {
126
126
  }
127
127
  li {
128
128
  padding: var(--padding-default) 0 var(--padding-narrow) 0;
129
- border-bottom: var(--border-dark-color);
129
+ border-bottom: var(--border-dim-color);
130
130
  color: var(--md-sys-color-secondary);
131
131
  }
132
132
  li mwc-icon {
@@ -50,11 +50,11 @@ class BizplaceRegister extends connect(store)(PageView) {
50
50
  flex-direction: column;
51
51
 
52
52
  font: var(--label-font);
53
- color: var(--label-color);
53
+ color: var(--label-color, var(--md-sys-color-on-surface));
54
54
  text-transform: var(--label-text-transform);
55
55
  }
56
56
  input {
57
- border: var(--border-dark-color);
57
+ border: var(--border-dim-color);
58
58
  border-radius: var(--border-radius);
59
59
  margin: var(--input-margin);
60
60
  padding: var(--input-padding);
@@ -72,13 +72,13 @@ class BusinessHome extends connect(store)(PageView) {
72
72
  flex-direction: column;
73
73
 
74
74
  font: var(--label-font);
75
- color: var(--label-color);
75
+ color: var(--label-color, var(--md-sys-color-on-surface));
76
76
  text-transform: var(--label-text-transform);
77
77
  }
78
78
 
79
79
  select,
80
80
  input {
81
- border: var(--border-dark-color);
81
+ border: var(--border-dim-color);
82
82
  border-radius: var(--border-radius);
83
83
  margin: var(--input-margin);
84
84
  padding: var(--input-padding);
@@ -26,7 +26,7 @@ class BusinessSettings extends connect(store)(PageView) {
26
26
  border-radius: var(--border-radius);
27
27
  box-shadow: var(--box-shadow);
28
28
  font: var(--label-font);
29
- color: var(--label-color);
29
+ color: var(--label-color, var(--md-sys-color-on-surface));
30
30
  text-transform: var(--label-text-transform);
31
31
  }
32
32
  div strong {
@@ -21,7 +21,7 @@ class POSCard extends LitElement {
21
21
  float: left;
22
22
  background-color: var(--md-sys-color-surface-variant);
23
23
  border-radius: var(--border-radius);
24
- border: 1px solid var(--theme-white-color);
24
+ border: 1px solid var(--md-sys-color-on-primary);
25
25
  box-shadow: var(--box-shadow);
26
26
  margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
27
27
  padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
@@ -54,7 +54,7 @@ class POSCard extends LitElement {
54
54
  max-width: 100%;
55
55
  min-height: 20px;
56
56
  opacity: 0.8;
57
- border-top: var(--border-dark-color);
57
+ border-top: var(--border-dim-color);
58
58
  margin-top: var(--margin-narrow);
59
59
 
60
60
  font-size: var(--fontsize-small);
@@ -16,7 +16,7 @@ class SellercraftStoreSetting extends connect(store)(localize(i18next)(PageView)
16
16
  background-color: var(--md-sys-color-background);
17
17
  }
18
18
  [overview] {
19
- background-color: var(--theme-white-color, #fff);
19
+ background-color: var(--md-sys-color-on-primary, #fff);
20
20
  border-radius: var(--border-radius);
21
21
  margin-bottom: var(--margin-wide, 15px);
22
22
  padding: var(--padding-wide, 15px);
@@ -51,8 +51,8 @@ class SellercraftStoreSetting extends connect(store)(localize(i18next)(PageView)
51
51
  textarea {
52
52
  width: 800px;
53
53
  height: 250px;
54
- border: var(--border-dark-color);
55
- background-color: var(--theme-white-color, #fff);
54
+ border: var(--border-dim-color);
55
+ background-color: var(--md-sys-color-on-primary, #fff);
56
56
  }
57
57
  [field-2column] {
58
58
  display: grid;
@@ -72,11 +72,11 @@ class SellercraftStoreSetting extends connect(store)(localize(i18next)(PageView)
72
72
  label {
73
73
  margin-bottom: var(--margin-narrow);
74
74
  font: var(--label-font);
75
- color: var(--label-color);
75
+ color: var(--label-color, var(--md-sys-color-on-surface));
76
76
  text-transform: var(--label-text-transform);
77
77
  }
78
78
  input {
79
- border: var(--border-dark-color);
79
+ border: var(--border-dim-color);
80
80
  border-radius: var(--border-radius);
81
81
  margin: var(--input-margin);
82
82
  padding: var(--input-padding, 4px);
@@ -84,7 +84,7 @@ class SellercraftStoreSetting extends connect(store)(localize(i18next)(PageView)
84
84
  flex: 1;
85
85
  }
86
86
  select {
87
- border: var(--border-dark-color);
87
+ border: var(--border-dim-color);
88
88
  border-radius: var(--border-radius);
89
89
  margin: var(--input-margin);
90
90
  padding: var(--input-padding, 4px);
@@ -100,9 +100,9 @@ class SellercraftStoreSetting extends connect(store)(localize(i18next)(PageView)
100
100
  }
101
101
  a {
102
102
  display: inline-block;
103
- border: var(--border-dark-color);
103
+ border: var(--border-dim-color);
104
104
  border-radius: var(--border-radius);
105
- background-color: var(--theme-white-color, #fff);
105
+ background-color: var(--md-sys-color-on-primary, #fff);
106
106
  margin: 9px 0;
107
107
  padding: var(--button-padding, 9px);
108
108
  font-size: 14px;
@@ -4,10 +4,10 @@ body {
4
4
  --primary-color: rgb(var(--primary-color-rgb));
5
5
  --secondary-color-rgb: 58, 88, 119;
6
6
  --secondary-color: rgb(var(--secondary-color-rgb));
7
- --focus-color: var(--theme-white-color);
7
+ --focus-color: var(--md-sys-color-on-primary);
8
8
  --primary-background-color: var(--md-sys-color-secondary);
9
9
  --secondary-background-color: #283644;
10
- --theme-white-color: #fff;
10
+ --md-sys-color-on-primary: #fff;
11
11
  --theme-black-color: rgba(0, 0, 0, 0.9);
12
12
 
13
13
  --focus-background-color: var(--md-sys-color-primary);
@@ -25,7 +25,7 @@ body {
25
25
 
26
26
  /* common style */
27
27
  --border-radius: 4px;
28
- --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
28
+ --border-dim-color: 1px solid rgba(0, 0, 0, 0.15);
29
29
  --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
30
30
 
31
31
  --content-container-max-width: 1200px;
@@ -70,12 +70,12 @@ body {
70
70
  --icon-tiny-size: 24px;
71
71
  --icon-default-size: 36px;
72
72
  --icon-big-size: 48px;
73
- --icon-default-color: var(--theme-white-color);
73
+ --icon-default-color: var(--md-sys-color-on-primary);
74
74
 
75
75
  /* material design component themes */
76
- --mdc-theme-on-primary: var(--theme-white-color);
76
+ --mdc-theme-on-primary: var(--md-sys-color-on-primary);
77
77
  --mdc-theme-primary: var(--secondary-text-color);
78
- --mdc-theme-on-secondary: var(--theme-white-color);
78
+ --mdc-theme-on-secondary: var(--md-sys-color-on-primary);
79
79
  --mdc-theme-secondary: var(--md-sys-color-primary);
80
80
  --mdc-button-outline-color: var(--md-sys-color-primary);
81
81
  --mdc-danger-button-primary-color: var(--status-danger-color);
@@ -85,9 +85,9 @@ body {
85
85
 
86
86
  --md-fab-container-color: var(--md-sys-color-primary);
87
87
  --md-fab-icon-color: var(--focus-color);
88
- --mdc-text-field-fill-color: transparent --md-theme-on-primary: var(--theme-white-color);
88
+ --mdc-text-field-fill-color: transparent --md-theme-on-primary: var(--md-sys-color-on-primary);
89
89
  --md-theme-primary: var(--secondary-text-color);
90
- --md-theme-on-secondary: var(--theme-white-color);
90
+ --md-theme-on-secondary: var(--md-sys-color-on-primary);
91
91
  --md-theme-secondary: var(--md-sys-color-primary);
92
92
  --md-button-outline-color: var(--md-sys-color-primary);
93
93
  --md-danger-button-primary-color: var(--status-danger-color);
@@ -98,7 +98,7 @@ body {
98
98
  /* button style */
99
99
  --button-background-color: #fafbfc;
100
100
  --button-background-focus-color: var(--md-sys-color-primary);
101
- --button-border: var(--border-dark-color);
101
+ --button-border: var(--border-dim-color);
102
102
  --button-border-radius: var(--border-radius);
103
103
  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
104
104
  --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
@@ -109,19 +109,19 @@ body {
109
109
  --button-active-background-color: var(--status-success-color);
110
110
  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
111
111
  --button-activ-border: transparent;
112
- --button-active-color: var(--theme-white-color);
112
+ --button-active-color: var(--md-sys-color-on-primary);
113
113
  --button-active-font: bold 16px var(--theme-font);
114
114
 
115
115
  --button-primary-background-color: var(--secondary-text-color);
116
116
  --button-primary-active-background-color: var(--status-success-color);
117
117
  --button-primary-padding: var(--margin-default) var(--margin-wide);
118
- --button-primary-color: var(--theme-white-color);
118
+ --button-primary-color: var(--md-sys-color-on-primary);
119
119
  --button-primary-font: bold 16px var(--theme-font);
120
120
 
121
121
  --button-delete-background-color: var(--status-danger-color);
122
122
  --button-delete-active-background-color: var(--status-warning-color);
123
123
  --button-delete-padding: var(--margin-default) var(--margin-wide);
124
- --button-delete-color: var(--theme-white-color);
124
+ --button-delete-color: var(--md-sys-color-on-primary);
125
125
  --button-delete-font: bold 16px var(--theme-font);
126
126
 
127
127
  /* table style */
@@ -1,20 +1,17 @@
1
1
  body {
2
2
  /* login page style*/
3
- --auth-background: var(--md-sys-color-primary);
4
3
  --auth-brand-name: bold 20px var(--theme-font);
5
4
  --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
6
5
  --auth-brand-welcome-msg: normal 12px var(--theme-font);
7
6
 
8
- --auth-title-color: var(--theme-white-color);
9
7
  --auth-title-font: bold 32px var(--theme-font);
10
- --auth-description-color: var(--secondary-text-color);
11
8
  --auth-description-font: normal 12px var(--theme-font);
12
9
  --auth-description-padding: 5px 5px 15px 5px;
13
10
 
14
11
  --auth-input-font: normal 18px/24px var(--theme-font);
15
12
  --auth-input-border: 1px solid var(--opacity-dark-color);
16
13
  --auth-input-border-light: 1px solid var(--opacity-light-color);
17
- --auth-input-color: var(--theme-white-color);
14
+ --auth-input-color: var(--md-sys-color-on-primary);
18
15
 
19
16
  --auth-button-background-color: var(--md-sys-color-surface-variant);
20
17
  --auth-button-background-focus-color: var(--status-success-color);
@@ -46,7 +43,7 @@ body {
46
43
  --checkin-header-height: 45px;
47
44
  --checkin-header-background-color: var(--md-sys-color-primary);
48
45
  --checkin-header-title-font: bold 19px var(--theme-font);
49
- --checkin-header-title-color: var(--theme-white-color);
46
+ --checkin-header-title-color: var(--md-sys-color-on-primary);
50
47
  --checkin-wrap-max-width: 500px;
51
48
  --checkin-wrap-padding: var(--padding-wide);
52
49
  }