sunrize 1.11.0 → 1.11.2

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 (29) hide show
  1. package/package.json +14 -13
  2. package/src/Application/Application.js +1 -1
  3. package/src/Application/Dashboard.js +12 -3
  4. package/src/Application/Document.js +13 -8
  5. package/src/Application/Hierarchy.js +10 -3
  6. package/src/Controls/AddPrototypePopover.js +2 -2
  7. package/src/Controls/AnimationPropertiesPopover.js +12 -1
  8. package/src/Controls/Dialog.js +5 -2
  9. package/src/Controls/EditNodePopover.js +1 -1
  10. package/src/Controls/EditUserDefinedFieldPopover.js +1 -1
  11. package/src/Editors/AnimationEditor.js +105 -73
  12. package/src/Editors/AnimationMemberList.js +2 -2
  13. package/src/Editors/BrowserFrame.js +5 -3
  14. package/src/Editors/Console.js +253 -17
  15. package/src/Editors/Library.js +1 -1
  16. package/src/Editors/MaterialsLibrary.js +5 -3
  17. package/src/Editors/OutlineEditor.js +342 -224
  18. package/src/Editors/OutlineView.js +149 -174
  19. package/src/Editors/Panel.js +55 -1
  20. package/src/Editors/SceneProperties.js +188 -49
  21. package/src/Fields/MFStringTextArea.js +13 -11
  22. package/src/Fields/SFStringInput.js +12 -12
  23. package/src/Tools/Core/X3DNodeTool.js +1 -1
  24. package/src/Undo/Editor.js +93 -74
  25. package/src/assets/X3DUOM.xml +13 -4
  26. package/src/assets/themes/default.css +274 -67
  27. package/src/assets/themes/media-template.css +1 -9
  28. package/src/assets/themes/media.css +1 -9
  29. package/src/assets/themes/system-colors.css +63 -61
package/src/assets/themes/system-colors.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "utf-8";
2
2
 
3
3
  @media (prefers-color-scheme: light) {
4
- body {
4
+ :root {
5
5
  color-scheme: light;
6
6
 
7
7
  /* Colors */
@@ -31,24 +31,36 @@
31
31
 
32
32
  --selection-color: black;
33
33
  --selection-background-color: rgb(246, 196, 197);
34
- --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
35
34
  --selection-range: rgba(0, 0, 0, 0.05);
36
- }
35
+ --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
37
36
 
38
- /* TweakPanel colors */
39
- :root {
40
- --tp-base-background-color: hsl(230, 7%, 85%);
41
- --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
42
- --tp-container-background-color: hsl(230, 7%, 90%);
37
+ /* Filter Colors */
38
+
39
+ --filter-system-red: invert(31%) sepia(82%) saturate(3000%) hue-rotate(344deg) brightness(115%) contrast(105%);
40
+ --filter-system-gray0: invert(36%) sepia(72%) saturate(11%) hue-rotate(222deg) brightness(95%) contrast(90%);
41
+ --filter-system-gray1: invert(63%) sepia(4%) saturate(334%) hue-rotate(201deg) brightness(89%) contrast(86%);
42
+
43
+ /* Special Colors */
44
+
45
+ --sidebar-background-color: rgb(208, 219, 231);
46
+ --tint-color1: rgba(255, 255, 255, 0.5);
47
+ --tint-color2: rgba(255, 255, 255, 1);
48
+
49
+ /* TweakPanel colors */
50
+
51
+ --tp-base-border-radius: 12px;
52
+ --tp-container-background-color: white;
43
53
  --tp-container-background-color-active: hsl(230, 7%, 90%);
44
54
  --tp-container-background-color-focus: hsl(230, 7%, 90%);
45
55
  --tp-container-background-color-hover: hsl(230, 7%, 95%);
56
+ --tp-base-background-color: var(--system-gray7);
57
+ --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
46
58
  --tp-container-foreground-color: hsl(230, 7%, 17%);
47
59
  --tp-groove-foreground-color: hsl(230, 7%, 17%);
48
60
  --tp-input-background-color: hsl(230, 7%, 92%);
49
- --tp-input-background-color-active: hsl(230, 7%, 96%);
50
- --tp-input-background-color-focus: hsl(230, 7%, 96%);
51
- --tp-input-background-color-hover: hsl(230, 7%, 96%);
61
+ --tp-input-background-color-active: hsl(230, 7%, 94%);
62
+ --tp-input-background-color-focus: hsl(230, 7%, 94%);
63
+ --tp-input-background-color-hover: hsl(230, 7%, 94%);
52
64
  --tp-input-foreground-color: hsl(230, 7%, 17%);
53
65
  --tp-button-background-color: var(--tp-input-background-color);
54
66
  --tp-button-background-color-active: var(--tp-input-background-color-active);
@@ -66,7 +78,7 @@
66
78
  }
67
79
 
68
80
  @media (prefers-color-scheme: dark) {
69
- body {
81
+ :root {
70
82
  color-scheme: dark;
71
83
 
72
84
  /* Colors */
@@ -96,12 +108,29 @@
96
108
 
97
109
  --selection-color: white;
98
110
  --selection-background-color: rgb(167, 118, 119);
99
- --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
100
111
  --selection-range: rgba(255, 255, 255, 0.05);
101
- }
112
+ --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
102
113
 
103
- /* TweakPanel colors */
104
- :root {
114
+ /* Filter Colors */
115
+
116
+ --filter-system-red: invert(69%) sepia(59%) saturate(6315%) hue-rotate(336deg) brightness(99%) contrast(108%);
117
+ --filter-system-gray0: invert(97%) sepia(2%) saturate(509%) hue-rotate(200deg) brightness(84%) contrast(94%);
118
+ --filter-system-gray1: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);
119
+
120
+ /* Special Colors */
121
+
122
+ --sidebar-background-color: rgb(42, 50, 63);
123
+ --tint-color1: rgba(0, 0, 0, 0.2);
124
+ --tint-color2: rgba(0, 0, 0, 0.4);
125
+
126
+ /* TweakPanel colors */
127
+
128
+ --tp-base-border-radius: 12px;
129
+ --tp-container-background-color: black;
130
+ --tp-container-background-color-hover: black;
131
+ --tp-container-background-color-active: black;
132
+ --tp-container-background-color-focus: black;
133
+ --tp-base-background-color: var(--system-gray7);
105
134
  --tp-input-background-color: rgba(187, 188, 196, 0.1);
106
135
  --tp-input-background-color-active: rgba(187, 188, 196, 0.25);
107
136
  --tp-input-background-color-focus: rgba(187, 188, 196, 0.2);
@@ -121,36 +150,6 @@
121
150
  }
122
151
  }
123
152
 
124
- body {
125
- /* Filter Colors */
126
-
127
- --filter-system-red: invert(31%) sepia(82%) saturate(3000%) hue-rotate(344deg) brightness(115%) contrast(105%);
128
- --filter-system-gray0: invert(36%) sepia(72%) saturate(11%) hue-rotate(222deg) brightness(95%) contrast(90%);
129
- --filter-system-gray1: invert(63%) sepia(4%) saturate(334%) hue-rotate(201deg) brightness(89%) contrast(86%);
130
-
131
- /* Special Colors */
132
-
133
- --sidebar-background-color: rgb(208, 219, 231);
134
- --tint-color1: rgba(255, 255, 255, 0.5);
135
- --tint-color2: rgba(255, 255, 255, 1);
136
- }
137
-
138
- @media (prefers-color-scheme: dark) {
139
- body {
140
- /* Filter Colors */
141
-
142
- --filter-system-red: invert(69%) sepia(59%) saturate(6315%) hue-rotate(336deg) brightness(99%) contrast(108%);
143
- --filter-system-gray0: invert(97%) sepia(2%) saturate(509%) hue-rotate(200deg) brightness(84%) contrast(94%);
144
- --filter-system-gray1: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);
145
-
146
- /* Special Colors */
147
-
148
- --sidebar-background-color: rgb(42, 50, 63);
149
- --tint-color1: rgba(0, 0, 0, 0.2);
150
- --tint-color2: rgba(0, 0, 0, 0.4);
151
- }
152
- }
153
-
154
153
  body {
155
154
  /* Colors */
156
155
 
@@ -196,21 +195,27 @@ body {
196
195
  /* Tools */
197
196
 
198
197
  --tool-backdrop-filter: blur(25px);
199
- --tool-background-color: rgba(208, 219, 231, 0.8); /* --sidebar-background-color */
200
- --tool-border-radius: 6px;
198
+ --tool-background-color: color-mix(in srgb, var(--sidebar-background-color), transparent 20%);
199
+ --tool-border-radius: 12px;
201
200
  --tool-border: 1px solid var(--system-gray8);
202
201
  --tool-shadow: 3px 3px 9px rgba(0, 0, 0, 0.6);
203
202
 
204
- --preview-background-color: white;
205
- --preview-border: 1px solid var(--system-gray6);
206
-
207
203
  --background-disabled: repeating-linear-gradient(
208
204
  -45deg,
209
205
  var(--tint-color1),
210
206
  var(--tint-color1) 10px,
211
207
  transparent 10px,
212
208
  transparent 20px
213
- )
209
+ );
210
+
211
+ /*Qtip */
212
+
213
+ --qtip-shadow: var(--tool-shadow);
214
+ --qtip-border-radius: 12px;
215
+
216
+ --qtip-background-color: white;
217
+ --qtip-border: 1px solid var(--system-gray1);
218
+ --qtip-highlight-color: black;
214
219
  }
215
220
 
216
221
  @media (prefers-color-scheme: dark) {
@@ -230,17 +235,14 @@ body {
230
235
 
231
236
  /* Tools */
232
237
 
233
- --tool-background-color: rgba(42, 50, 63, 0.8); /* --sidebar-background-color */
238
+ --tool-background-color: color-mix(in srgb, var(--sidebar-background-color), transparent 20%);
234
239
  --tool-border: 1px solid var(--system-gray2);
235
240
  --tool-shadow: 3px 3px 9px var(--system-gray8);
236
241
 
237
- --preview-background-color: black;
238
- --preview-border: 1px solid var(--system-gray4);
239
- }
240
- }
242
+ /* Qtip */
241
243
 
242
- body {
243
- --qtip-background-color: var(--sidebar-background-color);
244
- --qtip-border: var(--tool-border);
245
- --qtip-shadow: var(--tool-shadow);
244
+ --qtip-background-color: black;
245
+ --qtip-border: 1px solid var(--system-gray4);
246
+ --qtip-highlight-color: white;
247
+ }
246
248
  }