@things-factory/shell 7.0.1-alpha.104 → 7.0.1-alpha.106

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 (7) hide show
  1. package/client/themes/app-theme.css +17 -17
  2. package/client/themes/grist-theme.css +1 -1
  3. package/client/themes/layout-theme.css +11 -6
  4. package/client/themes/material-theme.css +1 -0
  5. package/client/themes/oops-theme.css +2 -2
  6. package/dist-server/tsconfig.tsbuildinfo +1 -1
  7. package/package.json +2 -2
package/client/themes/app-theme.css CHANGED
@@ -5,12 +5,12 @@ 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
10
  --theme-white-color: #fff;
11
11
  --theme-black-color: rgba(0, 0, 0, 0.9);
12
12
 
13
- --focus-background-color: var(--primary-color);
13
+ --focus-background-color: var(--md-sys-color-primary);
14
14
  --primary-text-color: #111;
15
15
  --secondary-text-color: #017e7f;
16
16
 
@@ -40,7 +40,7 @@ body {
40
40
  --padding-wide: var(--margin-wide);
41
41
 
42
42
  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
43
- --scrollbar-thumb-hover-color: var(--primary-color);
43
+ --scrollbar-thumb-hover-color: var(--md-sys-color-primary);
44
44
 
45
45
  --fontsize-default: 14px;
46
46
  --fontsize-small: 13px;
@@ -52,7 +52,7 @@ body {
52
52
  /* title & description style */
53
53
  --title-margin: var(--margin-narrow) 0;
54
54
  --title-font: bold 24px var(--theme-font);
55
- --title-text-color: var(--secondary-color);
55
+ --title-text-color: var(--md-sys-color-secondary);
56
56
  --title-font-mobile: bold 20px var(--theme-font);
57
57
 
58
58
  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
@@ -61,8 +61,8 @@ body {
61
61
 
62
62
  --subtitle-padding: 12px 5px 3px 5px;
63
63
  --subtitle-font: bold 18px var(--theme-font);
64
- --subtitle-text-color: var(--primary-color);
65
- --subtitle-border-bottom: 1px solid var(--primary-color);
64
+ --subtitle-text-color: var(--md-sys-color-primary);
65
+ --subtitle-border-bottom: 1px solid var(--md-sys-color-primary);
66
66
 
67
67
  /* icon style */
68
68
  --icon-tiny-size: 24px;
@@ -74,8 +74,8 @@ body {
74
74
  --mdc-theme-on-primary: var(--theme-white-color);
75
75
  --mdc-theme-primary: var(--secondary-text-color);
76
76
  --mdc-theme-on-secondary: var(--theme-white-color);
77
- --mdc-theme-secondary: var(--primary-color);
78
- --mdc-button-outline-color: var(--primary-color);
77
+ --mdc-theme-secondary: var(--md-sys-color-primary);
78
+ --mdc-button-outline-color: var(--md-sys-color-primary);
79
79
  --mdc-danger-button-primary-color: var(--status-danger-color);
80
80
  --mdc-danger-button-outline-color: var(--status-danger-color);
81
81
  --mdc-button-outline-width: 1px;
@@ -83,21 +83,21 @@ body {
83
83
 
84
84
  /* button style */
85
85
  --button-background-color: #fafbfc;
86
- --button-background-focus-color: var(--primary-color);
86
+ --button-background-focus-color: var(--md-sys-color-primary);
87
87
  --button-border: var(--border-dark-color);
88
88
  --button-border-radius: var(--border-radius);
89
89
  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
90
90
  --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
91
- --button-color: var(--secondary-color);
91
+ --button-color: var(--md-sys-color-secondary);
92
92
  --button-font: 600 var(--fontsize-default) var(--theme-font);
93
93
  --button-text-transform: capitalize;
94
94
  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
95
- --button-activ-border: 1px solid var(--primary-color);
96
- --button-activ-background-color: var(--primary-color);
95
+ --button-activ-border: 1px solid var(--md-sys-color-primary);
96
+ --button-activ-background-color: var(--md-sys-color-primary);
97
97
  --button-activ-color: var(--theme-white-color);
98
98
  --iconbtn-padding: var(--padding-narrow);
99
99
 
100
- --button-primary-background-color: var(--primary-color);
100
+ --button-primary-background-color: var(--md-sys-color-primary);
101
101
  --button-primary-active-background-color: var(--status-success-color);
102
102
  --button-primary-padding: var(--margin-default) var(--margin-wide);
103
103
  --button-primary-color: var(--theme-white-color);
@@ -105,25 +105,25 @@ body {
105
105
 
106
106
  /* table style */
107
107
  --th-padding: var(--padding-default);
108
- --th-border-top: 2px solid var(--secondary-color);
108
+ --th-border-top: 2px solid var(--md-sys-color-secondary);
109
109
  --th-text-transform: capitalize;
110
110
  --th-font: bold var(--fontsize-small) var(--theme-font);
111
111
  --th-color: rgba(var(--secondary-color-rgb), 0.8);
112
112
 
113
- --tr-background-color: var(--theme-white-color);
113
+ --tr-background-color: var(--md-sys-color-surface-variant);
114
114
  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
115
115
  --tr-background-hover-color: #e1f5fe;
116
116
  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
117
117
  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
118
118
  --td-padding: var(--padding-default);
119
119
  --td-font: normal 13px var(--theme-font);
120
- --td-color: var(--secondary-color);
120
+ --td-color: var(--md-sys-color-secondary);
121
121
 
122
122
  --label-cell-background-color: #f6f6f6; /* th or td common background color */
123
123
 
124
124
  /* form style */
125
125
  --label-font: normal var(--fontsize-default) var(--theme-font);
126
- --label-color: var(--secondary-color);
126
+ --label-color: var(--md-sys-color-on-surface);
127
127
  --label-text-transform: capitalize;
128
128
  --input-margin: var(--margin-narrow) 0;
129
129
  --input-padding: 6px 2px;
package/client/themes/grist-theme.css CHANGED
@@ -43,7 +43,7 @@ body {
43
43
  --grid-gutter-padding: var(--spacing-tiny) 0;
44
44
 
45
45
  --grid-record-background-color: var(--md-sys-color-surface-container-lowest);
46
- --grid-record-odd-background-color: var(--md-sys-color-primary-container);
46
+ --grid-record-odd-background-color: var(--md-sys-color-surface-container-low);
47
47
  --grid-record-padding: var(--spacing-small) var(--spacing-medium);
48
48
  --grid-record-color: var(--md-sys-color-on-surface-variant);
49
49
  --grid-record-color-hover: var(--md-sys-color-primary);
package/client/themes/layout-theme.css CHANGED
@@ -1,8 +1,8 @@
1
1
  body {
2
- --header-bar-background-color: var(--md-sys-color-primary-container);
2
+ --header-bar-background-color: var(--md-sys-color-primary);
3
3
  --header-bar-icon-size: var(--icon-default-size);
4
4
  --header-bar-title: bold 17.5px var(--theme-font);
5
- --header-bar-color: var(--md-sys-color-on-primary-container);
5
+ --header-bar-color: var(--md-sys-color-on-primary);
6
6
  --header-bar-height: 45px;
7
7
  --header-bar-item-padding: 0px 5px 0 0;
8
8
 
@@ -16,12 +16,12 @@ body {
16
16
 
17
17
  --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
18
18
 
19
- --aside-background-color: var(--secondary-background-color);
19
+ --aside-background-color: var(--md-sys-color-secondary-container);
20
20
  --aside-list-textbtton: 18px var(--theme-font);
21
21
  --aside-list-icon: var(--icon-default-size);
22
- --aside-list-bottom-line: var(--border-dark-color);
22
+ --aside-list-bottom-line: var(--md-sys-color-outline);
23
23
  --aside-list-detail-background-color: #fff;
24
- --aside-list-detail-text: 14px var(--primary-background-color);
24
+ --aside-list-detail-text: 14px var(--md-sys-color-on-secondary-container);
25
25
 
26
26
  --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
27
27
 
@@ -30,7 +30,7 @@ body {
30
30
  --button-container-background: transparent;
31
31
  --button-container-height: initial;
32
32
  --button-container-align: right;
33
- --button-container-button-background-color: var(--secondary-color);
33
+ --button-container-button-background-color: var(--md-sys-color-secondary);
34
34
  --button-container-button-border-radius: var(--button-border-radius);
35
35
  --button-container-button-margin: var(--button-margin);
36
36
  --button-container-button-font: bold var(--fontsize-large) var(--theme-font);
@@ -60,6 +60,11 @@ body {
60
60
  --splitter-hover-background-color: rgba(0, 0, 0, 0.1);
61
61
  }
62
62
 
63
+ .dark {
64
+ --header-bar-background-color: var(--md-sys-color-inverse-primary);
65
+ --header-bar-color: var(--md-sys-color-primary);
66
+ }
67
+
63
68
  @media only screen and (max-width: 460px) {
64
69
  body {
65
70
  --button-container-margin: 0 -15px;
package/client/themes/material-theme.css CHANGED
@@ -19,4 +19,5 @@ body {
19
19
  --md-text-button-container-shape: var(--md-sys-shape-corner-small);
20
20
  --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
21
21
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
22
+ --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
22
23
  }
package/client/themes/oops-theme.css CHANGED
@@ -7,9 +7,9 @@ body {
7
7
  --oops-note-icon-padding: var(--padding-default);
8
8
  --oops-note-title-margin: 7px 0 2px 0;
9
9
  --oops-note-title-font: bold 14px var(--theme-font);
10
- --oops-note-title-color: var(--secondary-color);
10
+ --oops-note-title-color: var(--md-sys-color-secondary);
11
11
  --oops-note-description-font: normal 12px var(--theme-font);
12
- --oops-note-description-color: var(--primary-color);
12
+ --oops-note-description-color: var(--md-sys-color-primary);
13
13
  }
14
14
  @media only screen and (max-width: 460px) {
15
15
  body {