@kosdev-code/kos-nx-plugin 2.0.21 → 2.0.22

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/package.json +2 -2
  2. package/src/generators/kos-ui-project/files/src/app/app.css.template +118 -4
  3. package/src/generators/kos-ui-project/files/src/app/components/main-view/main-view.tsx.template +41 -21
  4. package/src/generators/kos-ui-project/files/src/index.html.template +1 -1
  5. package/src/generators/preset/files/src/app/app.css.template +118 -4
  6. package/src/generators/preset/files/src/app/components/main-view/main-view.tsx.template +41 -21
  7. package/src/generators/preset/files/src/index.html.template +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kosdev-code/kos-nx-plugin",
3
- "version": "2.0.21",
3
+ "version": "2.0.22",
4
4
  "type": "commonjs",
5
5
  "generators": "./generators.json",
6
6
  "publishConfig": {
@@ -19,7 +19,7 @@
19
19
  "main": "./src/index.js",
20
20
  "kos": {
21
21
  "build": {
22
- "gitHash": "ab95ecbd79f58dbb04fc4643c756c2134210aef2"
22
+ "gitHash": "ab095f25172b0a41c0a0cf2bf1b1870fd1e3b8b1"
23
23
  }
24
24
  }
25
25
  }
package/src/generators/kos-ui-project/files/src/app/app.css.template CHANGED
@@ -1,11 +1,125 @@
1
+ :root{
2
+ /* radius */
3
+ --kos-generic-border-radius-small: 4px;
4
+ --kos-generic-border-radius-medium: 8px;
5
+ --kos-generic-border-radius-large: 16px;
6
+ --kos-generic-border-radius-x-large: 24px;
7
+
8
+ /* border-width */
9
+ --kos-generic-border-width-small: 1px;
10
+ --kos-generic-border-width-large: 4px;
11
+
12
+ /* border-style */
13
+ --kos-generic-solid-border-style: solid;
14
+
15
+ /* box-shadow */
16
+ --kos-generic-box-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1);
17
+ --kos-generic-box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
18
+ --kos-generic-box-shadow-large: 0 8px 16px rgba(0, 0, 0, 0.1);
19
+
20
+ /* box-sizing */
21
+ --kos-generic-box-sizing: border-box;
22
+
23
+ /* color */
24
+ --kos-generic-color-blue-5: #d7f2f6;
25
+ --kos-generic-color-blue-10: #93dae8;
26
+ --kos-generic-color-blue-80: #416af6;
27
+ --kos-generic-color-blue-100: #2126f8;
28
+ --kos-generic-color-green-10: #d7f6da;
29
+ --kos-generic-color-green-100: #00bb26;
30
+ --kos-generic-color-grey-5: #f9f9f9;
31
+ --kos-generic-color-grey-7: #f3f4f8;
32
+ --kos-generic-color-grey-10: #f0f0f0;
33
+ --kos-generic-color-grey-15: #e3e4e9;
34
+ --kos-generic-color-grey-20: #dfdede;
35
+ --kos-generic-color-grey-23: #dedede;
36
+ --kos-generic-color-grey-25: #d2d4da;
37
+ --kos-generic-color-grey-30: #c5c5c5;
38
+ --kos-generic-color-grey-40: #aaaaaa;
39
+ --kos-generic-color-grey-45: #9496a1;
40
+ --kos-generic-color-grey-47: #898a8d;
41
+ --kos-generic-color-grey-50: #888888;
42
+ --kos-generic-color-grey-60: #797979;
43
+ --kos-generic-color-grey-63: #777986;
44
+ --kos-generic-color-grey-65: #5b5d6b;
45
+ --kos-generic-color-grey-70: #414141;
46
+ --kos-generic-color-grey-80: #292929;
47
+ --kos-generic-color-grey-85: #282a3a;
48
+ --kos-generic-color-grey-85-60: #282a3a99;
49
+ --kos-generic-color-grey-90: #101223;
50
+ --kos-generic-color-grey-90-05: #1012230d;
51
+ --kos-generic-color-grey-100: #171717;
52
+ --kos-generic-color-grey-100-50: #17171780;
53
+ --kos-generic-color-orange-100: #ff9e32;
54
+ --kos-generic-color-orange-200: #c87321;
55
+ --kos-generic-color-red-5: #ffe1e2;
56
+ --kos-generic-color-red-10: #f6d7d7;
57
+ --kos-generic-color-red-100: #ff091b;
58
+ --kos-generic-color-red-200: #a70412;
59
+ --kos-generic-color-red-coca-cola: #f40009;
60
+ --kos-generic-color-white: #ffffff;
61
+
62
+ /* font-size */
63
+ --kos-generic-font-size-xx-small: 12px;
64
+ --kos-generic-font-size-x-small: 14px;
65
+ --kos-generic-font-size-small: 16px;
66
+ --kos-generic-font-size-medium: 20px;
67
+ --kos-generic-font-size-large: 24px;
68
+ --kos-generic-font-size-x-large: 28px;
69
+ --kos-generic-font-size-xx-large: 32px;
70
+
71
+ /* font-weight */
72
+ --kos-generic-font-weight-regular: normal;
73
+ --kos-generic-font-weight-medium: 600;
74
+ --kos-generic-font-weight-bold: 700;
75
+
76
+ /* letter-spacing */
77
+ --kos-generic-letter-spacing-small: 0.48px;
78
+
79
+ /* padding */
80
+ --kos-generic-padding-xx-large: 40px;
81
+ --kos-generic-padding-x-large: 32px;
82
+ --kos-generic-padding-large: 24px;
83
+ --kos-generic-padding-medium: 16px;
84
+ --kos-generic-padding-small: 8px;
85
+ --kos-generic-padding-x-small: 4px;
86
+
87
+ /* transition */
88
+ --kos-generic-transition-duration-short: 150ms;
89
+ --kos-generic-transition-duration-medium: 250ms;
90
+ --kos-generic-transition-duration-long: 350ms;
91
+
92
+ /* text-align */
93
+ --kos-generic-left-text-align: left;
94
+ --kos-generic-center-text-align: center;
95
+ }
96
+
97
+ :root {
98
+ --kos-semantic-control-container-font-size: var(--kos-generic-font-size-medium);
99
+ --kos-semantic-control-container-color: var(--kos-generic-color-white);
100
+ }
101
+
102
+ :root {
103
+
104
+ // shell
105
+ --kos-component-shell-width: 100vw;
106
+ --kos-component-shell-height: 100vh;
107
+ --kos-component-shell-height: 100vh;
108
+ --kos-component-shell-background-color: black;
109
+ }
1
110
  body {
2
- height: 100vh;
3
- width: 100vw;
111
+ height: var(--kos-component-shell-height);
112
+ width: var(--kos-component-shell-width);
4
113
  overflow: hidden;
5
- background-color: black;
114
+ background-color: var(--kos-component-shell-background-color);
6
115
  user-select: none;
7
116
  font-family: Montserrat, sans-serif;
8
- font-size: 20px;
117
+ font-size: var(--kos-semantic-control-container-font-size);
118
+ }
119
+
120
+ .kos-theme-light {
121
+ --kos-component-shell-background-color: var(--kos-generic-color-white);
122
+ --kos-semantic-control-container-color: var(--kos-generic-color-grey-100);
9
123
  }
10
124
 
11
125
  .App {
package/src/generators/kos-ui-project/files/src/app/components/main-view/main-view.tsx.template CHANGED
@@ -1,3 +1,4 @@
1
+ import { css, Global } from '@emotion/react';
1
2
  import styled from '@emotion/styled';
2
3
  import {
3
4
  kosComponent,
@@ -10,24 +11,37 @@ const log = KosLog.createLogger({ name: 'main-view' });
10
11
  log.debug('main-view component loaded');
11
12
 
12
13
  export const MainView: React.FunctionComponent = kosComponent(() => {
13
- const { t } = useKosTranslation('<%= nameDashCase %>');
14
+ const { t } = useKosTranslation('theme-sample');
14
15
  return (
15
- <Main>
16
- <div className="logo">
17
- <img src="./assets/kos-logo.svg"></img>
18
- </div>
19
- <h1>{t('welcome', { default: 'You are now connected.' })}</h1>
20
- <h2>
21
- <Trans
22
- t={t}
23
- i18nKey="visit"
24
- defaults={'For more information, visit <link>www.kosdev.com</link>.'}
25
- components={{ link: <a href="http://www.kosdev.com" /> }}
26
- />
27
- </h2>
28
-
29
- <div className="footer"></div>
30
- </Main>
16
+ <>
17
+ <Global
18
+ styles={css`
19
+ .kos-theme-dark {
20
+ --kos-component-logo-url: url('./assets/kos-logo.svg');
21
+ }
22
+
23
+ .kos-theme-light {
24
+ --kos-component-logo-url: url('./assets/kos-logo-light.svg');
25
+ }
26
+ `}
27
+ />
28
+ <Main>
29
+ <div className="logo"></div>
30
+ <h1>{t('welcome', { default: 'You are now connected.' })}</h1>
31
+ <h2>
32
+ <Trans
33
+ t={t}
34
+ i18nKey="visit"
35
+ defaults={
36
+ 'For more information, visit <link>www.kosdev.com</link>.'
37
+ }
38
+ components={{ link: <a href="http://www.kosdev.com" /> }}
39
+ />
40
+ </h2>
41
+
42
+ <div className="footer"></div>
43
+ </Main>
44
+ </>
31
45
  );
32
46
  });
33
47
 
@@ -38,15 +52,21 @@ const Main = styled.div`
38
52
  justify-content: center;
39
53
  width: 100%;
40
54
  height: 100%;
41
- padding: 50px;
55
+ text-align: center;
56
+ padding-top: 180px;
42
57
  position: relative;
43
- color: white;
58
+
44
59
  .logo {
45
60
  display: flex;
46
61
  justify-content: center;
47
62
  align-items: center;
48
- width: 300px;
63
+ width: 200px;
64
+ height: 72px;
65
+
66
+ background-size: cover;
67
+ background-image: var(--kos-component-logo-url);
49
68
  }
69
+
50
70
  .footer {
51
71
  position: fixed;
52
72
  bottom: 0;
@@ -56,4 +76,4 @@ const Main = styled.div`
56
76
  background-image: url('./assets/graphics.png');
57
77
  background-size: cover;
58
78
  }
59
- `;
79
+ `;
package/src/generators/kos-ui-project/files/src/index.html.template CHANGED
@@ -8,7 +8,7 @@
8
8
  <meta name="viewport" content="width=device-width, initial-scale=1" />
9
9
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
10
10
  </head>
11
- <body>
11
+ <body class="kos-theme-light">
12
12
  <div id="root"></div>
13
13
  </body>
14
14
  </html>
package/src/generators/preset/files/src/app/app.css.template CHANGED
@@ -1,11 +1,125 @@
1
+ :root{
2
+ /* radius */
3
+ --kos-generic-border-radius-small: 4px;
4
+ --kos-generic-border-radius-medium: 8px;
5
+ --kos-generic-border-radius-large: 16px;
6
+ --kos-generic-border-radius-x-large: 24px;
7
+
8
+ /* border-width */
9
+ --kos-generic-border-width-small: 1px;
10
+ --kos-generic-border-width-large: 4px;
11
+
12
+ /* border-style */
13
+ --kos-generic-solid-border-style: solid;
14
+
15
+ /* box-shadow */
16
+ --kos-generic-box-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1);
17
+ --kos-generic-box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
18
+ --kos-generic-box-shadow-large: 0 8px 16px rgba(0, 0, 0, 0.1);
19
+
20
+ /* box-sizing */
21
+ --kos-generic-box-sizing: border-box;
22
+
23
+ /* color */
24
+ --kos-generic-color-blue-5: #d7f2f6;
25
+ --kos-generic-color-blue-10: #93dae8;
26
+ --kos-generic-color-blue-80: #416af6;
27
+ --kos-generic-color-blue-100: #2126f8;
28
+ --kos-generic-color-green-10: #d7f6da;
29
+ --kos-generic-color-green-100: #00bb26;
30
+ --kos-generic-color-grey-5: #f9f9f9;
31
+ --kos-generic-color-grey-7: #f3f4f8;
32
+ --kos-generic-color-grey-10: #f0f0f0;
33
+ --kos-generic-color-grey-15: #e3e4e9;
34
+ --kos-generic-color-grey-20: #dfdede;
35
+ --kos-generic-color-grey-23: #dedede;
36
+ --kos-generic-color-grey-25: #d2d4da;
37
+ --kos-generic-color-grey-30: #c5c5c5;
38
+ --kos-generic-color-grey-40: #aaaaaa;
39
+ --kos-generic-color-grey-45: #9496a1;
40
+ --kos-generic-color-grey-47: #898a8d;
41
+ --kos-generic-color-grey-50: #888888;
42
+ --kos-generic-color-grey-60: #797979;
43
+ --kos-generic-color-grey-63: #777986;
44
+ --kos-generic-color-grey-65: #5b5d6b;
45
+ --kos-generic-color-grey-70: #414141;
46
+ --kos-generic-color-grey-80: #292929;
47
+ --kos-generic-color-grey-85: #282a3a;
48
+ --kos-generic-color-grey-85-60: #282a3a99;
49
+ --kos-generic-color-grey-90: #101223;
50
+ --kos-generic-color-grey-90-05: #1012230d;
51
+ --kos-generic-color-grey-100: #171717;
52
+ --kos-generic-color-grey-100-50: #17171780;
53
+ --kos-generic-color-orange-100: #ff9e32;
54
+ --kos-generic-color-orange-200: #c87321;
55
+ --kos-generic-color-red-5: #ffe1e2;
56
+ --kos-generic-color-red-10: #f6d7d7;
57
+ --kos-generic-color-red-100: #ff091b;
58
+ --kos-generic-color-red-200: #a70412;
59
+ --kos-generic-color-red-coca-cola: #f40009;
60
+ --kos-generic-color-white: #ffffff;
61
+
62
+ /* font-size */
63
+ --kos-generic-font-size-xx-small: 12px;
64
+ --kos-generic-font-size-x-small: 14px;
65
+ --kos-generic-font-size-small: 16px;
66
+ --kos-generic-font-size-medium: 20px;
67
+ --kos-generic-font-size-large: 24px;
68
+ --kos-generic-font-size-x-large: 28px;
69
+ --kos-generic-font-size-xx-large: 32px;
70
+
71
+ /* font-weight */
72
+ --kos-generic-font-weight-regular: normal;
73
+ --kos-generic-font-weight-medium: 600;
74
+ --kos-generic-font-weight-bold: 700;
75
+
76
+ /* letter-spacing */
77
+ --kos-generic-letter-spacing-small: 0.48px;
78
+
79
+ /* padding */
80
+ --kos-generic-padding-xx-large: 40px;
81
+ --kos-generic-padding-x-large: 32px;
82
+ --kos-generic-padding-large: 24px;
83
+ --kos-generic-padding-medium: 16px;
84
+ --kos-generic-padding-small: 8px;
85
+ --kos-generic-padding-x-small: 4px;
86
+
87
+ /* transition */
88
+ --kos-generic-transition-duration-short: 150ms;
89
+ --kos-generic-transition-duration-medium: 250ms;
90
+ --kos-generic-transition-duration-long: 350ms;
91
+
92
+ /* text-align */
93
+ --kos-generic-left-text-align: left;
94
+ --kos-generic-center-text-align: center;
95
+ }
96
+
97
+ :root {
98
+ --kos-semantic-control-container-font-size: var(--kos-generic-font-size-medium);
99
+ --kos-semantic-control-container-color: var(--kos-generic-color-white);
100
+ }
101
+
102
+ :root {
103
+
104
+ // shell
105
+ --kos-component-shell-width: 100vw;
106
+ --kos-component-shell-height: 100vh;
107
+ --kos-component-shell-height: 100vh;
108
+ --kos-component-shell-background-color: black;
109
+ }
1
110
  body {
2
- height: 100vh;
3
- width: 100vw;
111
+ height: var(--kos-component-shell-height);
112
+ width: var(--kos-component-shell-width);
4
113
  overflow: hidden;
5
- background-color: black;
114
+ background-color: var(--kos-component-shell-background-color);
6
115
  user-select: none;
7
116
  font-family: Montserrat, sans-serif;
8
- font-size: 20px;
117
+ font-size: var(--kos-semantic-control-container-font-size);
118
+ }
119
+
120
+ .kos-theme-light {
121
+ --kos-component-shell-background-color: var(--kos-generic-color-white);
122
+ --kos-semantic-control-container-color: var(--kos-generic-color-grey-100);
9
123
  }
10
124
 
11
125
  .App {
package/src/generators/preset/files/src/app/components/main-view/main-view.tsx.template CHANGED
@@ -1,3 +1,4 @@
1
+ import { css, Global } from '@emotion/react';
1
2
  import styled from '@emotion/styled';
2
3
  import {
3
4
  kosComponent,
@@ -10,24 +11,37 @@ const log = KosLog.createLogger({ name: 'main-view' });
10
11
  log.debug('main-view component loaded');
11
12
 
12
13
  export const MainView: React.FunctionComponent = kosComponent(() => {
13
- const { t } = useKosTranslation('<%= nameDashCase %>');
14
+ const { t } = useKosTranslation('theme-sample');
14
15
  return (
15
- <Main>
16
- <div className="logo">
17
- <img src="./assets/kos-logo.svg"></img>
18
- </div>
19
- <h1>{t('welcome', { default: 'You are now connected.' })}</h1>
20
- <h2>
21
- <Trans
22
- t={t}
23
- i18nKey="visit"
24
- defaults={'For more information, visit <link>www.kosdev.com</link>.'}
25
- components={{ link: <a href="http://www.kosdev.com" /> }}
26
- />
27
- </h2>
28
-
29
- <div className="footer"></div>
30
- </Main>
16
+ <>
17
+ <Global
18
+ styles={css`
19
+ .kos-theme-dark {
20
+ --kos-component-logo-url: url('./assets/kos-logo.svg');
21
+ }
22
+
23
+ .kos-theme-light {
24
+ --kos-component-logo-url: url('./assets/kos-logo-light.svg');
25
+ }
26
+ `}
27
+ />
28
+ <Main>
29
+ <div className="logo"></div>
30
+ <h1>{t('welcome', { default: 'You are now connected.' })}</h1>
31
+ <h2>
32
+ <Trans
33
+ t={t}
34
+ i18nKey="visit"
35
+ defaults={
36
+ 'For more information, visit <link>www.kosdev.com</link>.'
37
+ }
38
+ components={{ link: <a href="http://www.kosdev.com" /> }}
39
+ />
40
+ </h2>
41
+
42
+ <div className="footer"></div>
43
+ </Main>
44
+ </>
31
45
  );
32
46
  });
33
47
 
@@ -38,15 +52,21 @@ const Main = styled.div`
38
52
  justify-content: center;
39
53
  width: 100%;
40
54
  height: 100%;
41
- padding: 50px;
55
+ text-align: center;
56
+ padding-top: 180px;
42
57
  position: relative;
43
- color: white;
58
+
44
59
  .logo {
45
60
  display: flex;
46
61
  justify-content: center;
47
62
  align-items: center;
48
- width: 300px;
63
+ width: 200px;
64
+ height: 72px;
65
+
66
+ background-size: cover;
67
+ background-image: var(--kos-component-logo-url);
49
68
  }
69
+
50
70
  .footer {
51
71
  position: fixed;
52
72
  bottom: 0;
@@ -56,4 +76,4 @@ const Main = styled.div`
56
76
  background-image: url('./assets/graphics.png');
57
77
  background-size: cover;
58
78
  }
59
- `;
79
+ `;
package/src/generators/preset/files/src/index.html.template CHANGED
@@ -8,7 +8,7 @@
8
8
  <meta name="viewport" content="width=device-width, initial-scale=1" />
9
9
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
10
10
  </head>
11
- <body>
11
+ <body class="kos-theme-light">
12
12
  <div id="root"></div>
13
13
  <script type="module" src="/src/main.tsx"></script>
14
14
  </body>