@silexlabs/silex 3.5.1-7 → 3.5.1

package/src/css/grapesjs.scss

@@ -6,19 +6,60 @@
 }
 
 
+// GrapesJS color utility classes - using CSS custom properties
 .#{$prefix} {
-  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor) {
-    &#{$cnum} {
-      &-bg {
-        background-color: $ccol;
+  &one {
+    &-bg {
+      background-color: var(--gjs-primary-color);
+    }
+
+    &-color {
+      color: var(--gjs-primary-color);
+
+      &-h:hover {
+        color: var(--gjs-primary-color);
       }
+    }
+  }
+
+  &two {
+    &-bg {
+      background-color: var(--gjs-secondary-color);
+    }
 
-      &-color {
-        color: $ccol;
+    &-color {
+      color: var(--gjs-secondary-color);
 
-        &-h:hover {
-          color: $ccol;
-        }
+      &-h:hover {
+        color: var(--gjs-secondary-color);
+      }
+    }
+  }
+
+  &three {
+    &-bg {
+      background-color: var(--gjs-tertiary-color);
+    }
+
+    &-color {
+      color: var(--gjs-tertiary-color);
+
+      &-h:hover {
+        color: var(--gjs-tertiary-color);
+      }
+    }
+  }
+
+  &four {
+    &-bg {
+      background-color: var(--gjs-quaternary-color);
+    }
+
+    &-color {
+      color: var(--gjs-quaternary-color);
+
+      &-h:hover {
+        color: var(--gjs-quaternary-color);
       }
     }
   }
@@ -54,10 +95,11 @@
 
 // Dialogs
 .gjs-mdl-header {
-  background-color: $primaryColor;
-  color: $secondaryColor;
+  background-color: var(--silex-bg-main);
+  color: var(--silex-text-primary);
   padding: 20px;
-  border-bottom: 1px solid $lighterPrimaryColor;
+  border-bottom: 1px solid var(--silex-border-color-strong);
+
   .gjs-mdl-btn-close {
     top: 15px;
   }
@@ -65,16 +107,22 @@
 
 // Inside the canvas
 .gjs-toolbar {
-  background-color: $tertiaryColor;
+  background-color: var(--silex-accent-primary);
 }
+
 .gjs-resizer-h {
-  border-color: $tertiaryColor;
+  border-color: var(--silex-accent-primary);
 }
-.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
-    background-color: $tertiaryColor;
+
+.gjs-com-badge,
+.gjs-com-badge-red,
+.gjs-badge {
+  background-color: var(--silex-accent-primary);
 }
-.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
-    outline: 1px solid $tertiaryColor;
+
+.gjs-cv-canvas .gjs-highlighter,
+.gjs-cv-canvas .gjs-highlighter-sel {
+  outline: 1px solid var(--silex-accent-primary);
 }
 
 .gjs-cv-canvas {
@@ -102,9 +150,9 @@
 .top-style-section {
   position: sticky;
   top: -1px; /* Fixes a visual gap on the top */
-  border-bottom: solid $lighterPrimaryColor 1px;
-  background-color: $primaryColor;
-  box-shadow: 0 0 15px 0 #00000060;
+  border-bottom: solid var(--silex-border-color-strong) 1px;
+  background-color: var(--silex-bg-main);
+  box-shadow: var(--silex-shadow-lg);
   z-index: 999;
 }
 .gjs-clm-label-sel {

package/src/css/index.scss

@@ -2,9 +2,12 @@
 @use "normalize.css/normalize";
 
 @use "_variables";
-//@use "light";
 @use "grapesjs/src/styles/scss/main";
 
+/* Theme system */
+@use "theme-base";
+@use "theme-modern";
+
 /* Silex styles imports */
 @use "silex";
 @use "loader";
@@ -15,6 +18,8 @@
 @use "page-panel";
 @use "website-info";
 @use "grapesjs";
+@use "panels";
+@use "dialogs";
 
 //@use "grapesjs-light";
 
@@ -30,4 +35,3 @@
   background-position: center;
   background-repeat: no-repeat;
 }
-

package/src/css/page-panel.scss

@@ -5,46 +5,57 @@
     display: contents !important;
     height: fit-content;
   }
+
   .pages {
     display: flex;
     flex-direction: column;
     margin-bottom: 30px;
+
     .pages__main {
-      flex: 1; // take the available space in height
-      background-color: $primaryColor;
+      flex: 1;
+      background-color: var(--silex-bg-main);
       min-height: 20vh;
     }
+
     .pages__page {
       display: flex;
       align-items: center;
-      background-color: $darkerPrimaryColor;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+      background-color: var(--silex-bg-darker);
+      border-bottom: 1px solid var(--silex-border-color);
       cursor: cursor;
       transition: opacity 0.2s ease, background-color 0.2s ease;
+
       &:hover {
-        background-color: $primaryColor;
+        background-color: var(--silex-hover-bg);
+
         .pages__page-name {
-          color: $quaternaryColor;
+          color: var(--silex-accent-secondary);
         }
       }
+
       &:active {
         cursor: grabbing;
       }
     }
+
     .pages__page-dragging {
       opacity: 0.4;
       cursor: grabbing !important;
     }
+
     .pages__page-selected {
-      background-color: $lighterPrimaryColor;
+      background-color: var(--silex-active-bg);
       cursor: default;
+
       .pages__page-name {
-        color: $quaternaryColor;
+        color: var(--silex-accent-secondary);
       }
     }
+
     .pages__main.pages__single-page .pages__remove-btn {
       visibility: hidden;
     }
+
     .pages__page-name {
       white-space: nowrap;
       overflow: hidden;
@@ -58,28 +69,29 @@
       align-items: center;
       gap: 4px;
     }
+
     .pages__icon {
       padding: 6px;
       cursor: pointer;
       font-size: 12px;
+
+      &:hover {
+        color: var(--silex-accent-secondary);
+      }
     }
-    .pages__icon:hover {
-      color: $quaternaryColor;
-    }
+
     .pages__drag-handle {
       cursor: grab;
       opacity: 0.6;
       flex-shrink: 0;
+
       &:hover {
         opacity: 1;
       }
     }
   }
+
   .#{$pn-prefix}buttons {
     flex-direction: column;
-    .#{$pn-prefix}btn {
-    }
-    .#{$pn-prefix}btn:first-child {
-    }
   }
 }

package/src/css/panels.scss

@@ -0,0 +1,261 @@
+/**
+ * PANELS.SCSS
+ * Unified styling for all left-side panels (Blocks, Pages, Symbols, Layers)
+ * Ensures consistent look and behavior across all project panels
+ */
+
+@use "variables" as *;
+
+// ============================================================
+// UNIFIED PANEL STRUCTURE
+// ============================================================
+
+// All project panels share the same base styling
+.#{$pn-prefix}project-bar-container {
+  .project-bar__panel {
+    // Consistent header styling
+    .project-bar__panel-header {
+      background-color: var(--silex-bg-lighter);
+      border-bottom: 1px solid var(--silex-border-color-strong);
+      min-height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+
+      .project-bar__panel-header-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--silex-text-primary);
+        letter-spacing: 0.02em;
+      }
+
+      .project-bar__panel-header-button {
+        opacity: 0.7;
+        transition: opacity var(--silex-transition-fast);
+
+        &:hover {
+          opacity: 1;
+          color: var(--silex-accent-primary);
+        }
+      }
+    }
+
+    // Consistent body styling
+    & > main,
+    & > .gjs-blocks-c,
+    & > *:not(header) {
+      background-color: var(--silex-bg-main);
+      padding: 8px;
+    }
+  }
+}
+
+// ============================================================
+// BLOCKS PANEL SPECIFIC
+// ============================================================
+
+.gjs-blocks-c {
+  // Block categories
+  .gjs-block-category {
+    margin-bottom: 8px;
+
+    .gjs-title {
+      padding: 8px 12px;
+      background-color: var(--silex-bg-lighter);
+      border: 1px solid var(--silex-border-color);
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--silex-text-secondary);
+      cursor: pointer;
+      transition: all var(--silex-transition-fast);
+
+      &:hover {
+        background-color: var(--silex-hover-bg);
+        color: var(--silex-text-primary);
+        border-color: var(--silex-accent-primary);
+      }
+    }
+
+    .gjs-blocks-c {
+      padding: 8px 0;
+    }
+  }
+
+  // Individual blocks
+  .gjs-block {
+    margin: 6px;
+    padding: 12px;
+    background-color: var(--silex-bg-lighter);
+    border: 1px solid var(--silex-border-color);
+    border-radius: 6px;
+    transition: all var(--silex-transition-fast);
+
+    &:hover {
+      background-color: var(--silex-hover-bg);
+      border-color: var(--silex-accent-primary);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .gjs-block-label {
+      font-size: 11px;
+      color: var(--silex-text-secondary);
+      margin-top: 8px;
+    }
+
+    /* symbols */
+    &.symbols__symbol-selected {
+      border-color: var(--silex-accent-primary);
+    }
+  }
+}
+
+// ============================================================
+// PAGES PANEL SPECIFIC
+// ============================================================
+
+.page-panel-container {
+  .pages {
+    .pages__main {
+      padding: 4px;
+    }
+
+    .pages__page {
+      margin: 2px 0;
+      padding: 10px 12px;
+      border-radius: 4px;
+      background-color: var(--silex-bg-darker);
+      border: 1px solid transparent;
+
+      &:hover {
+        background-color: var(--silex-hover-bg);
+        border-color: var(--silex-border-color);
+      }
+
+      &.pages__page-selected {
+        background-color: var(--silex-active-bg);
+        border-color: var(--silex-accent-primary);
+        border-left-width: 3px;
+      }
+    }
+
+    .pages__page-name {
+      font-size: 13px;
+      color: var(--silex-text-primary);
+    }
+
+    .pages__icon {
+      opacity: 0.6;
+      transition: opacity var(--silex-transition-fast);
+
+      &:hover {
+        opacity: 1;
+        color: var(--silex-accent-primary);
+      }
+    }
+  }
+
+  // Collection pages section
+  .pages__collection-section {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--silex-border-color-strong);
+
+    h3 {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--silex-text-secondary);
+      margin-bottom: 8px;
+    }
+  }
+}
+
+// ============================================================
+// LAYERS PANEL SPECIFIC
+// ============================================================
+
+.gjs-layer-wrapper {
+  .gjs-layer {
+    padding: 6px 8px;
+    margin: 1px 0;
+    border-radius: 3px;
+    transition: background-color var(--silex-transition-fast);
+
+    &:hover {
+      background-color: var(--silex-hover-bg);
+    }
+
+    &.gjs-selected {
+      background-color: var(--silex-active-bg);
+      border-left: 3px solid var(--silex-accent-primary);
+    }
+
+    .gjs-layer-title {
+      font-size: 12px;
+      color: var(--silex-text-primary);
+    }
+
+    .gjs-layer-count {
+      font-size: 10px;
+      color: var(--silex-text-secondary);
+    }
+  }
+}
+
+// ============================================================
+// SYMBOLS PANEL (if exists) - Same treatment
+// ============================================================
+
+.symbols-panel {
+  .symbol-item {
+    padding: 10px 12px;
+    margin: 4px 0;
+    background-color: var(--silex-bg-lighter);
+    border: 1px solid var(--silex-border-color);
+    border-radius: 4px;
+    transition: all var(--silex-transition-fast);
+
+    &:hover {
+      background-color: var(--silex-hover-bg);
+      border-color: var(--silex-accent-primary);
+    }
+
+    &.selected {
+      background-color: var(--silex-active-bg);
+      border-color: var(--silex-accent-primary);
+      border-left-width: 3px;
+    }
+  }
+}
+
+// ============================================================
+// CONSISTENT SCROLLBARS FOR ALL PANELS
+// ============================================================
+
+.#{$pn-prefix}project-bar-container {
+  .project-bar__panel {
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--silex-bg-main);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--silex-border-color-strong);
+      border-radius: 4px;
+
+      &:hover {
+        background: var(--silex-accent-secondary);
+      }
+    }
+  }
+}

package/src/css/project-bar.scss

@@ -1,42 +1,43 @@
 @use "variables" as *;
 
-// squeeze the stage iframe when panel is open
-//.silex-squeeze-left .gjs-frame-wrapper {
-//  margin-left: 18%;
-//  width: auto;
-//}
+// Squeeze the stage iframe when panel is open
 .silex-squeeze-left .gjs-cv-canvas {
   left: calc(var(--viewsProjectPanelWidth) + 35px);
   width: auto;
   right: var(--viewsPanelWidth);
 }
 
-
-// button bar
+// Button bar
 .#{$pn-prefix}project-bar-panel {
   width: $projectBarWidth;
   padding: 0;
+
   .#{$pn-prefix}buttons {
     flex-direction: column;
     min-height: 100vh;
     justify-content: flex-start;
+
     .project-bar-spacer {
       flex: 1;
     }
+
     .#{$pn-prefix}btn {
       margin: 5px 0 5px 0px;
       padding: 5px;
+
       &.#{$pn-prefix}active {
-        background-color: $lighterPrimaryColor;
+        background-color: var(--silex-active-bg);
         width: $projectBarWidth;
         box-shadow: none;
       }
     }
+
     .#{$pn-prefix}btn.project-bar__dirty {
-      background-color: $quaternaryColor;
-      color: white;
+      background-color: var(--silex-accent-secondary);
+      color: var(--silex-text-inverse);
     }
   }
+
   .logo {
     background-image: url('../assets/logo-silex-small.png');
     background-repeat: no-repeat;
@@ -47,71 +48,82 @@
 }
 
 // Resize options project panel button
-.viewsOptionsProjectPanel__size-btn::before {
-  content: '→';
-}
 .viewsOptionsProjectPanel__size-btn {
   z-index: $z-views-options-buttons;
   right: auto;
   left: 0;
+
+  &::before {
+    content: '→';
+  }
 }
-// For fixed block size after project panel resizing (instead of default value 45%)
+
+// Fixed block size after project panel resizing
 .gjs-block {
   width: 84px;
 }
 
-// panels
+// Panels
 .#{$pn-prefix}project-bar-container {
   top: $topBarHeight;
   width: $projectPanelWidth;
   min-width: $projectPanelMinWidth;
   height: calc(100% - $topBarHeight - $footerHeight);
-  background-color: $lighterPrimaryColor;
+  background-color: var(--silex-bg-lighter);
+
   &:not(.gjs-hidden) {
-    display: flex; // let the child take the whole height
+    display: flex;
     flex-direction: column;
   }
+
   .project-bar__panel:not(.gjs-hidden) {
     flex: 1;
-    display: flex; // let the child take the whole height
+    display: flex;
     flex-direction: column;
-    background-color: $primaryColor;
+    background-color: var(--silex-bg-main);
     overflow: auto;
+
     .gjs-layer {
-      background-color: $primaryColor;
+      background-color: var(--silex-bg-main);
     }
   }
+
   .project-bar__panel > *:not(header) {
     flex: 1;
     display: initial;
-   }
-   .project-bar__panel-header {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 5px;
-      border-bottom: 1px solid $lighterPrimaryColor;
-      .project-bar__panel-header-title {
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 3px 0;
-        margin: 0;
-        font-size: large;
-        font-weight: 600;
-      }
-      .project-bar__panel-header-button {
-        cursor: pointer;
-        span {
-          background-color: #444;
-          border-radius: 100%;
-          display: inline-block;
-          line-height: 13px;
-        }
+  }
+
+  .project-bar__panel-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    border-bottom: 1px solid var(--silex-border-color-strong);
+
+    .project-bar__panel-header-title {
+      flex: 1 1 auto;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 3px 0;
+      margin: 0;
+      font-size: large;
+      font-weight: 600;
+    }
+
+    .project-bar__panel-header-button {
+      cursor: pointer;
+
+      span {
+        background-color: var(--silex-bg-darker);
+        border-radius: 100%;
+        display: inline-block;
+        line-height: 13px;
       }
-      .project-bar__panel-header-button:hover {
-        color: $quaternaryColor;
+
+      &:hover {
+        color: var(--silex-accent-secondary);
       }
     }
   }
+}