@things-factory/operato-tools 7.0.1-alpha.99 → 7.0.1-beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/client/pages/generator/meta-generator-page.js +8 -8
  2. package/client/pages/main.js +1 -1
  3. package/client/themes/app-theme.css +21 -21
  4. package/dist-server/tsconfig.tsbuildinfo +1 -1
  5. package/package.json +4 -4
package/client/pages/generator/meta-generator-page.js CHANGED
@@ -48,7 +48,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
48
48
  :host {
49
49
  display: flex;
50
50
  flex-direction: column;
51
- background-color: var(--main-section-background-color);
51
+ background-color: var(--md-sys-color-background);
52
52
  padding: var(--padding-wide);
53
53
  overflow: auto;
54
54
  }
@@ -60,7 +60,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
60
60
  h2 {
61
61
  border: var(--grist-title-border);
62
62
  font: var(--grist-title-font);
63
- color: var(--secondary-color);
63
+ color: var(--md-sys-color-secondary);
64
64
  padding-bottom: var(--grist-title-with-grid-padding);
65
65
  border-bottom: var(--subtitle-border-bottom);
66
66
  }
@@ -87,7 +87,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
87
87
  cursor: pointer;
88
88
  }
89
89
  .tab[activate] {
90
- background-color: var(--primary-color);
90
+ background-color: var(--md-sys-color-primary);
91
91
  box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
92
92
  opacity: 1;
93
93
  font-weight: bold;
@@ -96,7 +96,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
96
96
  flex: 1;
97
97
  display: flex;
98
98
  flex-direction: column;
99
- background-color: var(--theme-white-color);
99
+ background-color: var(--md-sys-color-surface);
100
100
  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
101
101
  border: var(--border-dark-color);
102
102
  border-width: 0 1px 1px 1px;
@@ -108,7 +108,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
108
108
  flex: 1;
109
109
  flex-direction: column;
110
110
  overflow-x: overlay;
111
- background-color: var(--main-section-background-color);
111
+ background-color: var(--md-sys-color-background);
112
112
  }
113
113
  @media screen and (max-width: 480px) {
114
114
  .content-container {
@@ -118,7 +118,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
118
118
  }
119
119
 
120
120
  [field-2column] {
121
- background-color: var(--theme-white-color);
121
+ background-color: var(--md-sys-color-surface);
122
122
  margin: var(--margin-wide) 0;
123
123
  padding: var(--padding-wide);
124
124
  border-radius: var(--border-radius);
@@ -135,7 +135,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
135
135
  padding-bottom: var(--padding-default);
136
136
  }
137
137
  [subfield] {
138
- background-color: var(--theme-white-color);
138
+ background-color: var(--md-sys-color-surface-variant);
139
139
  margin: var(--margin-wide) 0;
140
140
  padding: var(--padding-wide);
141
141
  border-radius: var(--border-radius);
@@ -180,7 +180,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
180
180
  }
181
181
  select:focus {
182
182
  outline: none;
183
- border-bottom: 1px solid var(--primary-color);
183
+ border-bottom: 1px solid var(--md-sys-color-primary);
184
184
  }
185
185
  ox-grist {
186
186
  overflow-y: auto;
package/client/pages/main.js CHANGED
@@ -10,7 +10,7 @@ class OperatoToolsMain extends connect(store)(PageView) {
10
10
  css`
11
11
  :host {
12
12
  display: block;
13
- background-color: var(--main-section-background-color);
13
+ background-color: var(--md-sys-color-background);
14
14
  padding: var(--padding-wide);
15
15
  overflow: auto;
16
16
  }
package/client/themes/app-theme.css CHANGED
@@ -5,13 +5,13 @@ body {
5
5
  --secondary-color-rgb: 57, 78, 100;
6
6
  --secondary-color: rgb(var(--secondary-color-rgb));
7
7
  --focus-color: var(--theme-white-color);
8
- --primary-background-color: var(--secondary-color);
8
+ --primary-background-color: var(--md-sys-color-secondary);
9
9
  --secondary-background-color: #283644;
10
- --main-section-background-color: #f4f7fb;
10
+ :#f4f7fb;
11
11
  --theme-white-color: #fff;
12
12
  --theme-black-color: rgba(0, 0, 0, 0.9);
13
13
 
14
- --focus-background-color: var(--primary-color);
14
+ --focus-background-color: var(--md-sys-color-primary);
15
15
  --primary-text-color: #111;
16
16
  --secondary-text-color: #017e7f;
17
17
 
@@ -41,7 +41,7 @@ body {
41
41
  --padding-wide: var(--margin-wide);
42
42
 
43
43
  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
44
- --scrollbar-thumb-hover-color: var(--primary-color);
44
+ --scrollbar-thumb-hover-color: var(--md-sys-color-primary);
45
45
 
46
46
  --fontsize-default: 14px;
47
47
  --fontsize-small: 13px;
@@ -53,7 +53,7 @@ body {
53
53
  /* title & description style */
54
54
  --title-margin: var(--margin-narrow) 0;
55
55
  --title-font: bold 24px var(--theme-font);
56
- --title-text-color: var(--secondary-color);
56
+ --title-text-color: var(--md-sys-color-secondary);
57
57
  --title-font-mobile: bold 20px var(--theme-font);
58
58
 
59
59
  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
@@ -62,8 +62,8 @@ body {
62
62
 
63
63
  --subtitle-padding: 12px 5px 3px 5px;
64
64
  --subtitle-font: bold 18px var(--theme-font);
65
- --subtitle-text-color: var(--primary-color);
66
- --subtitle-border-bottom: 1px solid var(--primary-color);
65
+ --subtitle-text-color: var(--md-sys-color-primary);
66
+ --subtitle-border-bottom: 1px solid var(--md-sys-color-primary);
67
67
 
68
68
  /* icon style */
69
69
  --icon-tiny-size: 24px;
@@ -75,21 +75,21 @@ body {
75
75
  --mdc-theme-on-primary: var(--theme-white-color);
76
76
  --mdc-theme-primary: var(--secondary-text-color);
77
77
  --mdc-theme-on-secondary: var(--theme-white-color);
78
- --mdc-theme-secondary: var(--primary-color);
79
- --mdc-button-outline-color: var(--primary-color);
78
+ --mdc-theme-secondary: var(--md-sys-color-primary);
79
+ --mdc-button-outline-color: var(--md-sys-color-primary);
80
80
  --mdc-danger-button-primary-color: var(--status-danger-color);
81
81
  --mdc-danger-button-outline-color: var(--status-danger-color);
82
82
  --mdc-button-outline-width: 1px;
83
83
  --mdc-button-horizontal-padding: 16px;
84
84
 
85
- --md-fab-container-color: var(--primary-color);
85
+ --md-fab-container-color: var(--md-sys-color-primary);
86
86
  --md-fab-icon-color: var(--focus-color);
87
87
 
88
88
  --md-theme-on-primary: var(--theme-white-color);
89
89
  --md-theme-primary: var(--secondary-text-color);
90
90
  --md-theme-on-secondary: var(--theme-white-color);
91
- --md-theme-secondary: var(--primary-color);
92
- --md-button-outline-color: var(--primary-color);
91
+ --md-theme-secondary: var(--md-sys-color-primary);
92
+ --md-button-outline-color: var(--md-sys-color-primary);
93
93
  --md-danger-button-primary-color: var(--status-danger-color);
94
94
  --md-danger-button-outline-color: var(--status-danger-color);
95
95
  --md-button-outline-width: 1px;
@@ -97,21 +97,21 @@ body {
97
97
 
98
98
  /* button style */
99
99
  --button-background-color: #fafbfc;
100
- --button-background-focus-color: var(--primary-color);
100
+ --button-background-focus-color: var(--md-sys-color-primary);
101
101
  --button-border: var(--border-dark-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);
105
- --button-color: var(--secondary-color);
105
+ --button-color: var(--md-sys-color-secondary);
106
106
  --button-font: 600 var(--fontsize-default) var(--theme-font);
107
107
  --button-text-transform: capitalize;
108
108
  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
109
- --button-activ-border: 1px solid var(--primary-color);
110
- --button-activ-background-color: var(--primary-color);
109
+ --button-activ-border: 1px solid var(--md-sys-color-primary);
110
+ --button-activ-background-color: var(--md-sys-color-primary);
111
111
  --button-activ-color: var(--theme-white-color);
112
112
  --iconbtn-padding: var(--padding-narrow);
113
113
 
114
- --button-primary-background-color: var(--primary-color);
114
+ --button-primary-background-color: var(--md-sys-color-primary);
115
115
  --button-primary-active-background-color: var(--status-success-color);
116
116
  --button-primary-padding: var(--margin-default) var(--margin-wide);
117
117
  --button-primary-color: var(--theme-white-color);
@@ -119,25 +119,25 @@ body {
119
119
 
120
120
  /* table style */
121
121
  --th-padding: var(--padding-default);
122
- --th-border-top: 2px solid var(--secondary-color);
122
+ --th-border-top: 2px solid var(--md-sys-color-secondary);
123
123
  --th-text-transform: capitalize;
124
124
  --th-font: bold var(--fontsize-small) var(--theme-font);
125
125
  --th-color: rgba(var(--secondary-color-rgb), 0.8);
126
126
 
127
- --tr-background-color: var(--theme-white-color);
127
+ --tr-background-color: var(--md-sys-color-surface-variant);
128
128
  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
129
129
  --tr-background-hover-color: #e1f5fe;
130
130
  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
131
131
  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
132
132
  --td-padding: var(--padding-default);
133
133
  --td-font: normal 13px var(--theme-font);
134
- --td-color: var(--secondary-color);
134
+ --td-color: var(--md-sys-color-secondary);
135
135
 
136
136
  --label-cell-background-color: #f6f6f6; /* th or td common background color */
137
137
 
138
138
  /* form style */
139
139
  --label-font: normal var(--fontsize-default) var(--theme-font);
140
- --label-color: var(--secondary-color);
140
+ --label-color: var(--md-sys-color-on-surface);
141
141
  --label-text-transform: capitalize;
142
142
  --input-margin: var(--margin-narrow) 0;
143
143
  --input-padding: 6px 2px;