@node-projects/web-component-designer 0.2.30 → 0.2.31

package/dist/elements/widgets/designerView/tools/toolBar/popups/TextShadowEditorWindow.js

@@ -102,16 +102,16 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
         display: flex;
         flex-direction: column;
         width: 360px;
-        color: #ddd;
+        color: var(--wcd-color-text, #ddd);
         font-family: sans-serif;
         font-size: 12px;
         gap: 6px;
         padding: 8px;
-        background: #2a2a2a;
+        background: var(--wcd-color-surface-raised, #2a2a2a);
       }
       .preview-area {
-        background: #1a1a1a;
-        border: 1px solid #444;
+        background: var(--wcd-color-surface, #1a1a1a);
+        border: 1px solid var(--wcd-color-border, #444);
         border-radius: 4px;
         height: 60px;
         display: flex;
@@ -121,7 +121,7 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
       .preview-text {
         font-size: 28px;
         font-weight: bold;
-        color: #fff;
+        color: var(--wcd-color-text, #fff);
         user-select: none;
       }
       .layers-row {
@@ -133,11 +133,11 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
         list-style: none;
         margin: 0;
         padding: 0;
-        border: 1px solid #444;
+        border: 1px solid var(--wcd-color-border, #444);
         border-radius: 3px;
         max-height: 80px;
         overflow-y: auto;
-        background: #1e1e1e;
+        background: var(--wcd-color-surface, #1e1e1e);
       }
       .layer-list li {
         display: flex;
@@ -152,7 +152,7 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
       .swatch {
         width: 12px; height: 12px;
         border-radius: 2px;
-        border: 1px solid #555;
+        border: 1px solid var(--wcd-color-border, #555);
         flex-shrink: 0;
       }
       .disabled-label { opacity: 0.4; }
@@ -163,9 +163,9 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
       }
       .layer-buttons button {
         width: 22px; height: 22px;
-        background: #3a3a3a;
-        color: #ddd;
-        border: 1px solid #555;
+        background: var(--wcd-color-surface-raised, #3a3a3a);
+        color: var(--wcd-color-text, #ddd);
+        border: 1px solid var(--wcd-color-border, #555);
         border-radius: 3px;
         cursor: pointer;
         font-size: 13px;
@@ -178,15 +178,15 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
         gap: 3px 6px;
         align-items: center;
       }
-      .controls label { color: #aaa; }
+      .controls label { color: var(--wcd-color-text-muted, #aaa); }
       .controls input[type=range] { width: 100%; }
       .controls input[type=color] {
         width: 100%;
         height: 22px;
         padding: 1px;
-        border: 1px solid #555;
+        border: 1px solid var(--wcd-color-border, #555);
         border-radius: 3px;
-        background: #1e1e1e;
+        background: var(--wcd-color-surface, #1e1e1e);
         cursor: pointer;
       }
       .check-row {
@@ -202,10 +202,10 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
         user-select: none;
       }
       .css-out {
-        background: #1e1e1e;
-        border: 1px solid #333;
+        background: var(--wcd-color-surface, #1e1e1e);
+        border: 1px solid var(--wcd-color-border, #333);
         border-radius: 3px;
-        color: #7ec8e3;
+        color: var(--wcd-color-accent-text, #7ec8e3);
         font-family: monospace;
         font-size: 11px;
         padding: 6px;
@@ -221,20 +221,20 @@ export class TextShadowEditorWindow extends DraggableToolWindow {
       .actions .load-btn { margin-right: auto; }
       .actions button, .apply-btn {
         padding: 4px 12px;
-        background: #3a3a3a;
-        color: #ddd;
-        border: 1px solid #555;
+        background: var(--wcd-color-surface-raised, #3a3a3a);
+        color: var(--wcd-color-text, #ddd);
+        border: 1px solid var(--wcd-color-border, #555);
         border-radius: 3px;
         cursor: pointer;
         font-size: 12px;
       }
       .actions button:hover, .apply-btn:hover { background: #555; }
       .apply-btn {
-        background: #3a6a9a;
-        border-color: #2a5a8a;
+        background: var(--wcd-color-accent, #3a6a9a);
+        border-color: var(--wcd-color-accent-border, #2a5a8a);
       }
       .apply-btn:hover { background: #4a7aaa; }
-      .val-label { text-align: right; color: #888; }
+      .val-label { text-align: right; color: var(--wcd-color-text-muted, #888); }
     `;
     }
     get windowTemplate() {

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js

@@ -49,7 +49,7 @@ export class TransformToolPopup extends DraggableToolWindow {
         grid-row-gap: 2px;
         font-size: small;
         margin: 10px;
-        color: white;
+        color: var(--wcd-color-text, white);
       }
       #button-div{
         display: grid;
@@ -79,7 +79,7 @@ export class TransformToolPopup extends DraggableToolWindow {
       #cube-background{
         width: 60px;
         height: 60px;
-        background: gray;
+        background: var(--wcd-transform-tool-divider-color, gray);
         margin-top: 20px;
         margin-left: 20px;
       }
@@ -91,7 +91,7 @@ export class TransformToolPopup extends DraggableToolWindow {
         justify-content: center;
         align-items: center;
         width: 100%;
-        color: white;
+        color: var(--wcd-color-text, white);
       }
     `;
     }

package/dist/elements/widgets/layerDepthView/layerDepthView.js

@@ -9,8 +9,8 @@ export class LayerDepthView extends BaseCustomWebComponentConstructorAppend {
           height: 100%;
           position: relative;
           isolation: isolate;
-          background: #f3f4f6;
-          color: #111827;
+          background: var(--wcd-layer-depth-view-background, #f3f4f6);
+          color: var(--wcd-layer-depth-view-text-color, #111827);
           user-select: none;
           -webkit-user-select: none;
         }
@@ -50,7 +50,7 @@ export class LayerDepthView extends BaseCustomWebComponentConstructorAppend {
           display: none;
           align-items: center;
           justify-content: center;
-          color: #4b5563;
+          color: var(--wcd-layer-depth-view-muted-color, #4b5563);
           font: 13px sans-serif;
           pointer-events: none;
         }
@@ -66,8 +66,8 @@ export class LayerDepthView extends BaseCustomWebComponentConstructorAppend {
           gap: 8px;
           box-sizing: border-box;
           padding: 7px 9px;
-          background: rgba(255, 255, 255, 0.92);
-          border: 1px solid rgba(17, 24, 39, 0.14);
+          background: var(--wcd-layer-depth-view-card-background, rgba(255, 255, 255, 0.92));
+          border: 1px solid var(--wcd-layer-depth-view-card-border-color, rgba(17, 24, 39, 0.14));
           font: 12px sans-serif;
           pointer-events: auto;
           z-index: 1;

package/dist/elements/widgets/miniatureView/miniatureView.js

@@ -34,7 +34,7 @@ export class MiniatureView extends BaseCustomWebComponentConstructorAppend {
           left: 0;
           width: 100%;
           height: 100%;
-          border: 1px solid black;
+          border: 1px solid var(--wcd-miniature-view-border-color, black);
           pointer-events: none;
         }`;
     static template = html `

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -12,7 +12,7 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
 
     button {
       background-color: transparent;
-      color: white;
+      color: var(--wcd-color-text, white);
       border: none;
       font-size: 13px;
       display: block;
@@ -22,7 +22,7 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
       padding: 8px 14px;
     }
     button:hover {
-      background: var(--light-grey, #383f52);
+      background: var(--wcd-palette-item-hover-background, var(--light-grey, var(--wcd-color-surface-hover, #383f52)));
     }
 
     table {
@@ -30,7 +30,7 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
     }
 
     td {
-      color: white;
+      color: var(--wcd-color-text, white);
       font-size: 13px;
     }
 

package/dist/elements/widgets/paletteView/paletteView.js

@@ -11,6 +11,13 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
       flex-direction: column;
       flex: 1;
       height: 100%;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    node-projects-designer-tab-control {
+      flex: 1;
+      min-height: 0;
     }`;
     constructor() {
         super();

package/dist/elements/widgets/paletteView/paletteView.js.map

@@ -1 +1 @@
-{"version":3,"file":"paletteView.js","sourceRoot":"","sources":["../../../../src/elements/widgets/paletteView/paletteView.ts"],"names":[],"mappings":"AAAA,OAAO,sCAAsC,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,gCAAgC,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAGhG,MAAM,OAAO,WAAY,SAAQ,gCAAgC;IAExD,QAAQ,GAAG,QAAQ,CAAC;IAEnB,mBAAmB,CAAqB;IAEhD,MAAM,CAAmB,KAAK,GAAG,GAAG,CAAA;;;;;;MAMhC,CAAC;IAEL;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,4BAA4B,EAAE,CAAC;QAEpC,IAAI,CAAC,mBAAmB,GAAG,IAAI,kBAAkB,EAAE,CAAC;QACpD,IAAI,CAAC,mBAAmB,CAAC,aAAa,GAAG,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACxD,CAAC;IAEM,KAAK,CAAC,YAAY,CAAC,gBAAkC,EAAE,gBAAoC;QAChG,IAAI,CAAC,mBAAmB,CAAC,SAAS,GAAG,EAAE,CAAC;QACxC,KAAK,MAAM,CAAC,IAAI,gBAAgB,EAAE,CAAC;YACjC,IAAI,CAAC;gBACH,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;gBACrC,IAAI,cAAc,GAAG,IAAI,eAAe,EAAE,CAAC;gBAC3C,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC9B,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;gBACrD,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;gBACxD,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE;oBACjC,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;gBACvE,CAAC,CAAC,CAAC;YACL,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QACD,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,CAAC;IAC1C,CAAC;;AAGH,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,WAAW,CAAC,CAAC"}
+{"version":3,"file":"paletteView.js","sourceRoot":"","sources":["../../../../src/elements/widgets/paletteView/paletteView.ts"],"names":[],"mappings":"AAAA,OAAO,sCAAsC,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,gCAAgC,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAGhG,MAAM,OAAO,WAAY,SAAQ,gCAAgC;IAExD,QAAQ,GAAG,QAAQ,CAAC;IAEnB,mBAAmB,CAAqB;IAEhD,MAAM,CAAmB,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;MAahC,CAAC;IAEL;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,4BAA4B,EAAE,CAAC;QAEpC,IAAI,CAAC,mBAAmB,GAAG,IAAI,kBAAkB,EAAE,CAAC;QACpD,IAAI,CAAC,mBAAmB,CAAC,aAAa,GAAG,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACxD,CAAC;IAEM,KAAK,CAAC,YAAY,CAAC,gBAAkC,EAAE,gBAAoC;QAChG,IAAI,CAAC,mBAAmB,CAAC,SAAS,GAAG,EAAE,CAAC;QACxC,KAAK,MAAM,CAAC,IAAI,gBAAgB,EAAE,CAAC;YACjC,IAAI,CAAC;gBACH,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;gBACrC,IAAI,cAAc,GAAG,IAAI,eAAe,EAAE,CAAC;gBAC3C,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC9B,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;gBACrD,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;gBACxD,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE;oBACjC,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;gBACvE,CAAC,CAAC,CAAC;YACL,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QACD,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,CAAC;IAC1C,CAAC;;AAGH,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,WAAW,CAAC,CAAC"}

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -23,10 +23,10 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
       -webkit-user-select: none;
     }
     button:hover {
-      box-shadow: inset 0 3px 0 var(--light-grey);
+      box-shadow: inset 0 3px 0 var(--wcd-property-grid-tab-indicator-inactive-color, var(--light-grey));
     }
     button:focus {
-      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
+      box-shadow: inset 0 3px 0 var(--wcd-property-grid-tab-indicator-color, var(--highlight-pink, var(--wcd-color-accent, #e91e63)));
     }
     `;
     static properties = {

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -36,7 +36,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     label, input, select {
       display: inline-block;
-      color: white;
+      color: var(--wcd-color-text, white);
       background: transparent;
       margin: 2px 0;
       padding: 0 2px 0 4px;
@@ -60,7 +60,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       border: none;
     }
     .editor-control, .content-wrapper > input, .content-wrapper > select {
-      border: 1px solid var(--input-border-color, #596c7a);
+      border: 1px solid var(--wcd-input-border-color, var(--input-border-color, var(--wcd-color-border, #596c7a)));
       border-radius: 0;
     }
     .editor-control, input, select {
@@ -79,22 +79,22 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       margin-left: 4px;
     }*/
     .editor-control[disabled], input[disabled], select[disabled] {
-      color: #BDBDBD;
+      color: var(--wcd-color-text-muted, #BDBDBD);
     }
     select {
       background: transparent;
     }
     select:focus option {
-      color: black;
+      color: var(--wcd-property-grid-select-option-color, black);
     }
     .unset-value {
-      color: lightslategray
+      color: var(--wcd-property-grid-unset-value-color, var(--wcd-color-text-muted, lightslategray))
     }
     .unset-value > * {
-      color: lightslategray
+      color: var(--wcd-property-grid-unset-value-color, var(--wcd-color-text-muted, lightslategray))
     }
     .unset-value:focus {
-      color: white
+      color: var(--wcd-color-text, white)
     }
     .group-header {
       grid-column: 1 / 3;
@@ -103,7 +103,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     .group-header[clickable]:hover {
       cursor:pointer;
-      color: orange;
+      color: var(--wcd-property-grid-group-header-hover-color, orange);
       text-decoration: underline;
     }
     .group-header::after{
@@ -122,11 +122,11 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     .group-desc[clickable]:hover {
       cursor:pointer;
-      color: orange;
+      color: var(--wcd-property-grid-group-header-hover-color, orange);
       text-decoration: underline;
     }
     .dragOverProperty {
-      outline: 2px dashed orange;
+      outline: 2px dashed var(--wcd-property-grid-drop-target-color, orange);
       outline-offset: -2px;
     }
     `;

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -12,8 +12,8 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       height: 100%;
       user-select: none;
       -webkit-user-select: none;
-      background: var(--medium-grey, #2f3545);
-      color: white;
+      background: var(--wcd-property-grid-background, var(--medium-grey, var(--wcd-color-surface-raised, #2f3545)));
+      color: var(--wcd-color-text, white);
     }
     div.root {
       display: grid;
@@ -28,13 +28,13 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       margin-right: 5px;
     }
     input {
-      background: var(--medium-grey, #2f3545);
-      border: solid 1px gray;
-      color: white;
+      background: var(--wcd-property-grid-background, var(--medium-grey, var(--wcd-color-surface-raised, #2f3545)));
+      border: solid 1px var(--wcd-color-border, gray);
+      color: var(--wcd-color-text, white);
       width: calc(100% - 6px);
     }
     #type {
-      color: wheat;
+      color: var(--wcd-property-grid-header-highlight-color, wheat);
       white-space: nowrap;
       overflow: hidden;
       font-size: 12px;

package/dist/elements/widgets/treeView/treeView.js

@@ -22,7 +22,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
       position: relative;
       width: 100%;
       height: 100%;
-      background: var(--dark-grey, #232733);
+      background: var(--wcd-tree-view-background, var(--dark-grey, var(--wcd-color-surface, #232733)));
       overflow-y: auto;
     }
     button {
@@ -35,22 +35,22 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
       text-align: left;
       display: inline-block;
       margin: 0;
-      background: var(--dark-grey, #232733);
+      background: var(--wcd-tree-view-background, var(--dark-grey, var(--wcd-color-surface, #232733)));
       position: relative;
-      color: white;
+      color: var(--wcd-color-text, white);
     }
     button:hover, button:focus {
-      background: var(--light-grey, #383f52);
+      background: var(--wcd-tree-view-item-hover-background, var(--light-grey, var(--wcd-color-surface-hover, #383f52)));
     }
     span {
       margin: 4px;
     }
     .id {
       font-style: italic;
-      color: var(--highlight-pink, #e91e63);
+      color: var(--wcd-tree-view-id-color, var(--highlight-pink, var(--wcd-color-accent, #e91e63)));
     }
     .selected {
-      background: var(--light-grey, #383f52);
+      background: var(--wcd-tree-view-item-selected-background, var(--light-grey, var(--wcd-color-surface-hover, #383f52)));
       outline: none;
     }
 
@@ -76,8 +76,8 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
         left: calc(var(--horz-shift) - var(--horz-margin));
         width: calc(var(--horz-margin) - var(--horz-shift));
         height: calc(var(--vert-shift) + var(--vert-margin));
-        border-left: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
+        border-left: 1px solid var(--wcd-tree-view-connector-color, #ccc);
+        border-bottom: 1px solid var(--wcd-tree-view-connector-color, #ccc);
         border-radius: 0;
     }
 
@@ -89,8 +89,8 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
         left: calc(var(--horz-shift) - var(--horz-margin));
         width: calc(var(--horz-margin) - var(--horz-shift));
         height: calc(100% - var(--vert-shift));
-        border-left: 1px solid #ccc;
-        border-top: 1px solid #ccc;
+        border-left: 1px solid var(--wcd-tree-view-connector-color, #ccc);
+        border-top: 1px solid var(--wcd-tree-view-connector-color, #ccc);
         border-radius: 0;
     }