wenay-react2 1.0.40 → 1.0.41

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 (28) hide show
  1. package/doc/EXAMPLE_USAGE.md +915 -0
  2. package/doc/PROJECT_FUNCTIONALITY.md +401 -0
  3. package/doc/PROJECT_RULES.md +80 -0
  4. package/doc/WENAY_REACT2_RENAMES.md +177 -0
  5. package/doc/changes/v1.0.35.md +26 -0
  6. package/doc/changes/v1.0.37.md +13 -0
  7. package/doc/changes/v1.0.38.md +48 -0
  8. package/doc/changes/v1.0.39.md +35 -0
  9. package/doc/changes/v1.0.40.md +15 -0
  10. package/doc/changes/v1.0.41.md +13 -0
  11. package/doc/progress/README.md +14 -0
  12. package/doc/progress/hook-controller-opportunities.md +367 -0
  13. package/doc/progress/hook-extraction-audit.md +195 -0
  14. package/doc/progress/public-surface-normalization.md +368 -0
  15. package/doc/progress/style-system-normalization.md +121 -0
  16. package/doc/target/README.md +33 -0
  17. package/doc/target/my.md +109 -0
  18. package/doc/wenay-react2-1.0.8.tgz +0 -0
  19. package/doc/wenay-react2-rare.md +702 -0
  20. package/doc/wenay-react2.md +475 -0
  21. package/lib/common/src/logs/logs.d.ts +27 -0
  22. package/lib/common/src/logs/logs.js +76 -27
  23. package/lib/common/src/styles/tokens.d.ts +7 -6
  24. package/lib/common/src/styles/tokens.js +8 -5
  25. package/lib/style/menuRight.css +29 -23
  26. package/lib/style/style.css +15 -9
  27. package/lib/style/tokens.css +8 -4
  28. package/package.json +2 -1
package/lib/common/src/styles/tokens.d.ts CHANGED
@@ -10,19 +10,20 @@ export declare const tokens: {
10
10
  readonly borderCommon: "rgb(50, 62, 71)";
11
11
  };
12
12
  readonly menu: {
13
- readonly bgColor: "rgba(12, 12, 12, 0.91)";
14
- readonly blur: "10px";
13
+ readonly bgColor: "#0c0c0c";
14
+ readonly blur: "0px";
15
15
  readonly border: "1px solid rgba(255, 255, 255, 0.41)";
16
- readonly activeBackground: "rgba(255, 255, 255, 0.23)";
16
+ readonly activeBackground: "#262626";
17
17
  readonly itemColor: "#fff";
18
+ readonly itemActiveBgColor: "#262626";
19
+ readonly itemActiveColor: "#fff";
18
20
  readonly itemHoverColor: "#101010";
19
21
  readonly itemHoverBgColor: "#fff";
22
+ readonly itemPressedColor: "#101010";
23
+ readonly itemPressedBgColor: "#f2c94c";
20
24
  readonly outlineColor: "#007bff";
21
25
  readonly shadow: "0 0 20px 14px rgba(34, 60, 80, 0.2)";
22
26
  };
23
- /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
24
- * --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
25
- * (inherit/auto) until a theme sets them. */
26
27
  readonly wnd: {
27
28
  readonly bg: "transparent";
28
29
  readonly border: "none";
package/lib/common/src/styles/tokens.js CHANGED
@@ -12,17 +12,20 @@ export const tokens = {
12
12
  borderCommon: 'rgb(50, 62, 71)',
13
13
  },
14
14
  menu: {
15
- bgColor: 'rgba(12, 12, 12, 0.91)',
16
- blur: '10px',
15
+ bgColor: '#0c0c0c',
16
+ blur: '0px',
17
17
  border: '1px solid rgba(255, 255, 255, 0.41)',
18
- activeBackground: 'rgba(255, 255, 255, 0.23)',
18
+ activeBackground: '#262626',
19
19
  itemColor: '#fff',
20
+ itemActiveBgColor: '#262626',
21
+ itemActiveColor: '#fff',
20
22
  itemHoverColor: '#101010',
21
23
  itemHoverBgColor: '#fff',
24
+ itemPressedColor: '#101010',
25
+ itemPressedBgColor: '#f2c94c',
22
26
  outlineColor: '#007bff',
23
27
  shadow: '0 0 20px 14px rgba(34, 60, 80, 0.2)',
24
- },
25
- /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
28
+ }, /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
26
29
  * --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
27
30
  * (inherit/auto) until a theme sets them. */
28
31
  wnd: {
package/lib/style/menuRight.css CHANGED
@@ -7,12 +7,12 @@
7
7
  right: 0;
8
8
  }
9
9
  .menu-container.activeM {
10
- background: var(--menu-active-background);
10
+ background: var(--menu-active-background, var(--menu-item-active-bg-color, #262626));
11
11
  }
12
12
 
13
13
  .menu-button {
14
14
  padding: 4px 10px;
15
- color: var(--menu-item-color);
15
+ color: var(--menu-item-color, #fff);
16
16
  font-size: 28px;
17
17
  border: none;
18
18
  background: transparent;
@@ -33,38 +33,44 @@
33
33
 
34
34
 
35
35
  .dropdown-content {
36
- background: var(--menu-bg-color);
37
- border-top: var(--menu-border);
38
- border-left: var(--menu-border);
39
- border-right: var(--menu-border);
36
+ background: var(--menu-bg-color, #0c0c0c);
37
+ border-top: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
38
+ border-left: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
39
+ border-right: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
40
40
  user-select: none;
41
41
  min-width: 50px;
42
42
  height: min-content;
43
43
  width: max-content;
44
44
  }
45
45
 
46
- .menu-item {
47
- min-height: 30px;
48
- padding: 10px;
49
- position: relative;
50
- cursor: pointer;
51
- border-bottom: var(--menu-border);
52
- transition: background 0.3s;
53
- }
54
-
55
- .menu-item:hover,
56
- .menu-item.force-hover {
57
- background: var(--menu-item-hover-bg-color);
58
- color: var(--menu-item-hover-color);
46
+ .menu-item {
47
+ min-height: 30px;
48
+ padding: 10px;
49
+ position: relative;
50
+ cursor: pointer;
51
+ color: var(--menu-item-color, #fff);
52
+ border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
53
+ transition: background 0.3s, color 0.3s;
54
+ }
55
+
56
+ .menu-item:hover,
57
+ .menu-item.force-hover {
58
+ background: var(--menu-item-hover-bg-color, #fff);
59
+ color: var(--menu-item-hover-color, #101010);
60
+ }
61
+
62
+ .menu-item:active {
63
+ background: var(--menu-item-pressed-bg-color, #f2c94c);
64
+ color: var(--menu-item-pressed-color, #101010);
59
65
  }
60
66
 
61
67
  .submenu {
62
- background: var(--menu-bg-color);
68
+ background: var(--menu-bg-color, #0c0c0c);
63
69
 
64
- backdrop-filter: blur(var(--menu-blur)); /* Blur */
65
- -webkit-backdrop-filter: blur(var(--menu-blur)); /* For Safari */
70
+ backdrop-filter: blur(var(--menu-blur, 0px)); /* Blur */
71
+ -webkit-backdrop-filter: blur(var(--menu-blur, 0px)); /* For Safari */
66
72
 
67
- border: var(--menu-border);
73
+ border: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
68
74
  min-width: 200px;
69
75
  }
70
76
  .draggable-div {
package/lib/style/style.css CHANGED
@@ -136,11 +136,11 @@ input:invalid {
136
136
 
137
137
  /* Menu */
138
138
  .MenuR {
139
- box-shadow: var(--menu-shadow);
139
+ box-shadow: var(--menu-shadow, 0 0 20px 14px rgba(34, 60, 80, 0.2));
140
140
  margin-top: 4px;
141
141
  min-width: 80px;
142
142
  width: max-content;
143
- background: var(--menu-bg-color);
143
+ background: var(--menu-bg-color, #0c0c0c);
144
144
  }
145
145
 
146
146
  .maxSize {
@@ -197,18 +197,24 @@ input:invalid {
197
197
  menu-specific colors through the shared --menu-* token contract. */
198
198
  .MenuR.toButton,
199
199
  .MenuR.toButtonA {
200
- color: var(--menu-item-color);
201
- border-bottom: var(--menu-border);
200
+ color: var(--menu-item-color, #fff);
201
+ border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
202
202
  }
203
203
  .MenuR.toButtonA {
204
- background: var(--menu-active-background);
204
+ background: var(--menu-active-background, var(--menu-item-active-bg-color, #262626));
205
+ color: var(--menu-item-active-color, var(--menu-item-color, #fff));
205
206
  }
206
207
  .MenuR.toButton:hover,
207
- .MenuR.toButton:active,
208
208
  .MenuR.toButtonA:hover {
209
- background: var(--menu-item-hover-bg-color);
210
- color: var(--menu-item-hover-color);
211
- border-bottom: var(--menu-border);
209
+ background: var(--menu-item-hover-bg-color, #fff);
210
+ color: var(--menu-item-hover-color, #101010);
211
+ border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
212
+ }
213
+ .MenuR.toButton:active,
214
+ .MenuR.toButtonA:active {
215
+ background: var(--menu-item-pressed-bg-color, #f2c94c);
216
+ color: var(--menu-item-pressed-color, #101010);
217
+ border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
212
218
  }
213
219
 
214
220
  /* Menu indicator elements */
package/lib/style/tokens.css CHANGED
@@ -21,13 +21,17 @@
21
21
  --base-color-hover: #fff;
22
22
 
23
23
  /* Menu */
24
- --menu-bg-color: rgba(12, 12, 12, 0.91);
25
- --menu-blur: 10px;
24
+ --menu-bg-color: #0c0c0c;
25
+ --menu-blur: 0px;
26
26
  --menu-border: var(--base-border);
27
- --menu-active-background: rgba(255, 255, 255, 0.23);
28
27
  --menu-item-color: var(--base-color-hover);
28
+ --menu-item-active-bg-color: #262626;
29
+ --menu-item-active-color: var(--base-color-hover);
30
+ --menu-active-background: var(--menu-item-active-bg-color);
29
31
  --menu-item-hover-color: #101010;
30
- --menu-item-hover-bg-color: var(--base-color-hover);
32
+ --menu-item-hover-bg-color: var(--base-color-hover);
33
+ --menu-item-pressed-color: #101010;
34
+ --menu-item-pressed-bg-color: #f2c94c;
31
35
  --menu-outline-color: #007bff;
32
36
 
33
37
  /* Menu shadow (was a literal in .MenuR) */
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "wenay-react2",
3
- "version": "1.0.40",
3
+ "version": "1.0.41",
4
4
  "description": "Common react",
5
5
  "strict": true,
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",
8
8
  "files": [
9
9
  "lib/**/*",
10
+ "doc/**/*",
10
11
  "!**/*.tsbuildinfo"
11
12
  ],
12
13
  "author": "wenay",