@silexlabs/silex 3.5.1-7 → 3.5.1

package/dist/client/js/main.js.LICENSE.txt

@@ -8,7 +8,7 @@
  * https://github.com/osartun/Backbone.Undo.js
  */
 
-/*! @silexlabs/grapesjs-filter-styles - 1.2.0 */
+/*! @silexlabs/grapesjs-filter-styles - 1.3.0 */
 
 /*! grapesjs-style-border - 1.0.4 */
 
@@ -18,12 +18,6 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
 /**
  * @license
  * Copyright 2020 Google LLC

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.5.1-7",
+  "version": "3.5.1",
   "version:backwardcompat": "3.0.0",
   "author": "Alex Hoyau (https://lexoyo.me/)",
   "main": "dist/server/server/index.js",
@@ -99,17 +99,17 @@
   "dependencies": {
     "@fontsource/ubuntu": "^5.0.13",
     "@fortawesome/fontawesome-free": "6.6.0",
-    "@silexlabs/grapesjs-advanced-selector": "1.3.1-2",
-    "@silexlabs/grapesjs-data-source": "0.1.1-10",
-    "@silexlabs/grapesjs-filter-styles": "1.2.0",
-    "@silexlabs/grapesjs-fonts": "1.2.0",
-    "@silexlabs/grapesjs-keymaps-dialog": "1.2.0",
-    "@silexlabs/grapesjs-loading": "1.2.0",
-    "@silexlabs/grapesjs-notifications": "0.2.1-0",
-    "@silexlabs/grapesjs-storage-rate-limit": "1.2.0",
-    "@silexlabs/grapesjs-symbols": "1.3.0",
+    "@silexlabs/grapesjs-advanced-selector": "1.4.0",
+    "@silexlabs/grapesjs-data-source": "0.1.1",
+    "@silexlabs/grapesjs-filter-styles": "1.3.0",
+    "@silexlabs/grapesjs-fonts": "1.2.1",
+    "@silexlabs/grapesjs-keymaps-dialog": "1.3.0",
+    "@silexlabs/grapesjs-loading": "1.3.0",
+    "@silexlabs/grapesjs-notifications": "0.2.1",
+    "@silexlabs/grapesjs-storage-rate-limit": "1.3.0",
+    "@silexlabs/grapesjs-symbols": "1.4.0",
     "@silexlabs/grapesjs-ui-suggest-classes": "1.2.0",
-    "@silexlabs/silex-plugins": "1.2.0",
+    "@silexlabs/silex-plugins": "1.3.0",
     "@types/archiver": "^6.0.2",
     "adm-zip": "0.5.14",
     "archiver": "^7.0.1",
@@ -140,7 +140,7 @@
     "html-minifier": "^4.0.0",
     "lit-html": "3.2.1",
     "mkdirp": "3.0.1",
-    "node_modules-path": "2.2.0",
+    "node_modules-path": "2.3.0",
     "node-fetch": "2.6.9",
     "normalize.css": "8.0.1",
     "npm-run-all": "^4.1.5",

package/src/css/_variables.scss

@@ -1,12 +1,23 @@
-// All colors
-// /!\ Duplicated in the grapesjs/index.ts too => keep in sync
+/**
+ * SILEX VARIABLES
+ * Core configuration values for Silex
+ * Colors are now managed in theme-base.scss
+ * /!\ Some values duplicated in grapesjs/index.ts => keep in sync
+ */
+
+// ============================================================
+// COLORS (will be overridden by theme-base.scss)
+// ============================================================
 $primaryColor: #333333;
 $secondaryColor: #ddd;
 $tertiaryColor: #8873FE;
-$quaternaryColor: #A291FF;;
+$quaternaryColor: #A291FF;
 $darkerPrimaryColor: #292929;
 $lighterPrimaryColor: #575757;
 
+// ============================================================
+// LAYOUT DIMENSIONS
+// ============================================================
 $topBarHeight: 40px;
 $projectBarWidth: 35px;
 $projectPanelWidth: 13%;
@@ -14,28 +25,52 @@ $projectPanelMinWidth: 150px;
 $viewsPanelWidth: 25%; // 15% is grapesjs default
 $viewsProjectPanelWidth: 13%;
 $footerHeight: 30px;
+
+// ============================================================
+// TRANSITIONS
+// ============================================================
 $transitionSpeedMedium: .15s;
 $transitionSpeedSlow: .30s;
+
+// ============================================================
+// PREFIXES
+// ============================================================
 $prefix: 'gjs-';
 $pn-prefix: '#{$prefix}pn-';
 $cv-prefix: '#{$prefix}cv-';
+
+// ============================================================
+// Z-INDEXES
+// ============================================================
 $z-dialog-inline: 10;
 $z-loader: 11;
 $z-views-options-buttons: 5;
 
+// ============================================================
+// TYPOGRAPHY
+// ============================================================
 $fontFamily: 'Ubuntu', sans-serif;
 
+// ============================================================
+// CSS CUSTOM PROPERTIES (Legacy support)
+// Note: These are now primarily managed in theme-base.scss
+// ============================================================
 :root {
+  // Legacy color variables (for backward compatibility)
   --primaryColor: #{$primaryColor};
-  --gjs-primary-color: #{$primaryColor} !important;
   --secondaryColor: #{$secondaryColor};
-  --gjs-secondary-color: #{$secondaryColor} !important;
   --tertiaryColor: #{$tertiaryColor};
-  --gjs-tertiary-color: #{$tertiaryColor} !important;
   --quaternaryColor: #{$quaternaryColor};
-  --gjs-quaternary-color: #{$quaternaryColor} !important;
   --darkerPrimaryColor: #{$darkerPrimaryColor};
   --lighterPrimaryColor: #{$lighterPrimaryColor};
+
+  // GrapesJS overrides (also set in theme-base.scss with !important)
+  --gjs-primary-color: #{$primaryColor} !important;
+  --gjs-secondary-color: #{$secondaryColor} !important;
+  --gjs-tertiary-color: #{$tertiaryColor} !important;
+  --gjs-quaternary-color: #{$quaternaryColor} !important;
+
+  // Layout dimensions
   --viewsPanelWidth: #{$viewsPanelWidth};
   --viewsProjectPanelWidth: #{$viewsProjectPanelWidth};
   --footerHeight: #{$footerHeight};

package/src/css/dialog.scss

@@ -2,66 +2,80 @@
 @use "mixins";
 
 .silex-main {
-  transition: opacity variables.$transitionSpeedMedium .5s ease;
+  transition: opacity var(--silex-transition-fast) .5s ease;
 }
+
 .silex-dialog {
-  transition: opacity variables.$transitionSpeedMedium ease;
+  transition: opacity var(--silex-transition-fast) ease;
 }
+
 .silex-dialog-hide {
   opacity: 0;
   visibility: hidden;
-  transition: opacity variables.$transitionSpeedMedium ease, visibility variables.$transitionSpeedSlow 1s ease;
+  transition: opacity var(--silex-transition-fast) ease, visibility var(--silex-transition-medium) 1s ease;
 }
 
 .silex-dialog-inline {
   position: absolute;
-  background-color: variables.$primaryColor;
-  z-index: variables.$z-dialog-inline;
+  background-color: var(--silex-bg-main);
+  z-index: var(--silex-z-dialog);
   border-radius: 3px;
-  border: 2px solid variables.$lighterPrimaryColor;
-  box-shadow: 0 0 10px 0 variables.$lighterPrimaryColor;
+  border: 2px solid var(--silex-border-color-strong);
+  box-shadow: var(--silex-shadow-md);
   display: flex;
   flex-direction: column;
+
   header {
     padding: 10px;
-    border-bottom: 1px solid variables.$lighterPrimaryColor;
+    border-bottom: 1px solid var(--silex-border-color-strong);
   }
+
   main {
     flex-grow: 1;
     padding: 10px;
     max-height: 50vh;
     overflow-y: auto;
   }
+
   footer {
     padding: 10px;
     text-align: right;
-    border-top: 1px solid variables.$lighterPrimaryColor;
+    border-top: 1px solid var(--silex-border-color-strong);
   }
+
   a {
-    color: variables.$quaternaryColor;
+    color: var(--silex-accent-secondary);
   }
+
   header > * {
     margin: 0;
   }
 }
 
+details.silex-more,
 .silex-help {
   margin: 10px 0;
   padding: 10px;
-  border: 1px solid variables.$lighterPrimaryColor;
+  border: 1px solid var(--silex-border-color-strong);
   border-radius: 3px;
-  background-color: variables.$lighterPrimaryColor;
-  color: variables.$secondaryColor;
+  background-color: var(--silex-bg-lighter);
+  color: var(--silex-text-primary);
   font-size: small;
+
   p {
     margin: 0;
   }
+
   a {
-    color: variables.$quaternaryColor;
+    color: var(--silex-accent-secondary);
+  }
+
+  label {
+    background-color: var(--silex-bg-main);
   }
 }
 
 :focus-visible {
-  outline: 2px solid variables.$tertiaryColor;
+  outline: 2px solid var(--silex-focus-outline);
   outline-offset: 2px;
 }

package/src/css/dialogs.scss

@@ -0,0 +1,235 @@
+/**
+ * DIALOGS.SCSS
+ * Unified styling for all dialogs (Settings, Fonts, modals)
+ * Ensures consistent modern look across all popup interfaces
+ *
+ * Note: There is also a dialog.scss file for inline dialogs.
+ * This file handles modal/fullscreen dialogs.
+ */
+
+@use "variables" as *;
+
+// ============================================================
+// BASE MODAL STYLES (GrapesJS modals)
+// ============================================================
+
+.gjs-mdl-dialog {
+  background-color: var(--silex-bg-main);
+  border: 1px solid var(--silex-border-color-strong);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+}
+
+.gjs-mdl-header {
+  background-color: var(--silex-bg-lighter);
+  color: var(--silex-text-primary);
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--silex-border-color-strong);
+  border-radius: 8px 8px 0 0;
+
+  .gjs-mdl-title {
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .gjs-mdl-btn-close {
+    color: var(--silex-text-secondary);
+    opacity: 0.7;
+    transition: all var(--silex-transition-fast);
+
+    &:hover {
+      opacity: 1;
+      color: var(--silex-accent-primary);
+      transform: scale(1.1);
+    }
+  }
+}
+
+.gjs-mdl-content {
+  background-color: var(--silex-bg-main);
+  padding: 24px;
+  max-height: 70vh;
+  overflow-y: auto;
+
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--silex-bg-darker);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--silex-border-color-strong);
+    border-radius: 5px;
+
+    &:hover {
+      background: var(--silex-accent-secondary);
+    }
+  }
+}
+
+// ============================================================
+// FONTS DIALOG - Make it consistent with Settings
+// ============================================================
+
+.gjs-mdl-dialog-fonts,
+.fonts-dialog {
+  .gjs-mdl-content {
+    min-height: 400px;
+    max-height: 70vh;
+  }
+
+  // Add footer if it doesn't exist via CSS
+  &::after {
+    content: '';
+    display: block;
+    height: 60px;
+    background-color: var(--silex-bg-lighter);
+    border-top: 1px solid var(--silex-border-color-strong);
+  }
+}
+
+// Fonts panel content
+.gjs-fonts-c,
+[class*="fonts"] {
+  .font-item {
+    padding: 12px 16px;
+    margin: 6px 0;
+    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);
+    }
+
+    .font-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--silex-text-primary);
+      margin-bottom: 4px;
+    }
+
+    .font-preview {
+      font-size: 12px;
+      color: var(--silex-text-secondary);
+    }
+  }
+}
+
+// ============================================================
+// GENERAL FORM ELEMENTS IN DIALOGS
+// ============================================================
+
+.gjs-mdl-dialog,
+.settings-dialog,
+.silex-dialog-inline {
+  input[type="text"],
+  input[type="email"],
+  input[type="url"],
+  input[type="number"],
+  select,
+  textarea {
+    background-color: var(--silex-input-bg);
+    border: 1px solid var(--silex-border-color-strong);
+    color: var(--silex-text-primary);
+    padding: 10px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: all var(--silex-transition-fast);
+
+    &:hover {
+      border-color: var(--gjs-secondary-light-color);
+    }
+
+    &:focus {
+      border-color: var(--silex-accent-primary);
+      box-shadow: 0 0 0 3px rgba(136, 115, 254, 0.15);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--silex-text-secondary);
+      opacity: 0.6;
+    }
+  }
+
+  label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--silex-text-primary);
+    margin-bottom: 6px;
+    display: block;
+  }
+
+  .form-group {
+    margin-bottom: 16px;
+  }
+
+  button,
+  .silex-button {
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--silex-transition-fast);
+
+    &.primary,
+    &.silex-button--primary {
+      background-color: var(--silex-accent-primary);
+      color: var(--silex-bg-darker);
+      border: none;
+
+      &:hover {
+        background-color: var(--silex-accent-secondary);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(136, 115, 254, 0.3);
+      }
+    }
+
+    &.secondary,
+    &.silex-button--secondary {
+      background-color: var(--silex-button-bg);
+      color: var(--silex-text-primary);
+      border: 1px solid var(--silex-border-color-strong);
+
+      &:hover {
+        background-color: var(--silex-button-hover-bg);
+      }
+    }
+  }
+}
+
+// ============================================================
+// DIALOG ANIMATIONS
+// ============================================================
+
+.gjs-mdl-dialog {
+  animation: dialogFadeIn 0.2s ease;
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+// ============================================================
+// BACKDROP
+// ============================================================
+
+.gjs-mdl-container {
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}

package/src/css/fonts.scss

@@ -1,31 +1,29 @@
 @use "variables" as *;
 .fonts-dialog {
-  .gjs-mdl-dialog {
-    width: 100%;
-    max-width: unset;
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .gjs-mdl-content {
-    flex: 1 1 auto;
+  h2 {
+    font-weight: lighter;
+      background-color: var(--gjs-secondary-dark-color);
+      letter-spacing: 1px;
+      padding: 9px 10px 9px 20px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.25);
   }
   .silex-form__element {
     margin-bottom: 80px;
   }
-  .silex-list li {
-    border-bottom: none;
-  }
-  h2 {
+  .variants-toolbar .silex-button {
+    padding: 0 !important;
+    font-weight: normal;
+    background: none;
+    border: none;
+    font-size: small;
+    text-decoration: underline;
     border-radius: 0;
-    background-color: transparent;
   }
-  footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 20px !important;
-    background-color: $primaryColor;
+  .silex-button {
+    background:
+    none;
+      border: none;
+      font-weight: normal !important;
+      box-shadow: none;
   }
-}
+}

package/src/css/footer.scss

@@ -1,9 +1,10 @@
 @use "variables" as *;
+
 // Footer is sticky at the bottom of the stage
 .gjs-pn-footer {
   bottom: 0;
   left: $projectBarWidth;
   right: var(--viewsPanelWidth);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--silex-shadow-sm);
   height: $footerHeight;
 }

package/src/css/grapesjs-plugins.scss

@@ -7,30 +7,35 @@
 @mixin square-borders-before {
   display: block;
   content: '' !important;
-  border: 2px solid $tertiaryColor;
+  border: 2px solid var(--silex-accent-primary);
   width: 10px;
   height: 10px;
   margin: auto;
 }
+
 .fa-arrows::before {
   @include square-borders-before;
-  border-color: $secondaryColor;
+  border-color: var(--silex-text-primary);
 }
+
 .fa-long-arrow-up::before {
   @include square-borders-before;
-  border-top-color: $secondaryColor;
+  border-top-color: var(--silex-text-primary);
 }
+
 .fa-long-arrow-down::before {
   @include square-borders-before;
-  border-bottom-color: $secondaryColor;
+  border-bottom-color: var(--silex-text-primary);
 }
+
 .fa-long-arrow-left::before {
   @include square-borders-before;
-  border-left-color: $secondaryColor;
+  border-left-color: var(--silex-text-primary);
 }
+
 .fa-long-arrow-right::before {
   @include square-borders-before;
-  border-right-color: $secondaryColor;
+  border-right-color: var(--silex-text-primary);
 }
 
 // Hide tooltip info buttons for border properties that interfere with the visual squares
@@ -76,7 +81,8 @@
 #publish-dialog {
   .notice {
     margin: 10px 0;
-    background-color: rgba(255, 166, 0, 0.2);
+    background-color: var(--gjs-color-warn);
+    color: var(--gjs-main-color);
     border-radius: 5px;
     padding: 10px;
   }
@@ -87,15 +93,15 @@
     border: none;
     height: 5px;
     animation: pub-blink 0.33s infinite alternate;
-    background-color: $tertiaryColor;
+    background-color: var(--silex-accent-primary);
   }
 
   progress::-webkit-progress-bar {
-    background-color: $tertiaryColor;
+    background-color: var(--silex-accent-primary);
   }
 
   progress::-moz-progress-bar {
-    background-color: $tertiaryColor;
+    background-color: var(--silex-accent-primary);
   }
 
   header {
@@ -114,15 +120,15 @@
     }
 
     button {
-      border: solid 2px #484848;
+      border: solid 2px var(--silex-border-color-strong);
       border-radius: 50px;
       padding: 4px 9px;
-      background-color: #444;
-      color: $secondaryColor;
+      background-color: var(--silex-bg-darker);
+      color: var(--silex-text-primary);
     }
 
     .connector {
-      color: $quaternaryColor;
+      color: var(--silex-accent-secondary);
     }
   }
 
@@ -152,8 +158,8 @@
 
     details {
       border-radius: 5px;
-      border: solid #222 2px;
-      background-color: #222;
+      border: solid var(--silex-border-color) 2px;
+      background-color: var(--silex-bg-darker);
       margin: 10px 0;
       padding: 10px;
       word-break: break-word;
@@ -182,15 +188,15 @@
 
           &:hover {
             transition: 200ms;
-            background-color: rgba(255, 255, 255, 0.05);
+            background-color: var(--gjs-soft-light-color);
           }
         }
       }
 
       &:hover {
         transition: 200ms;
-        border-color: $lighterPrimaryColor;
-        background-color: $darkerPrimaryColor;
+        border-color: var(--silex-border-color-strong);
+        background-color: var(--silex-hover-bg);
       }
 
       * {
@@ -217,7 +223,7 @@
     }
 
     .silex-button--primary {
-      background-color: $tertiaryColor;
+      background-color: var(--silex-accent-primary);
     }
   }
 }
@@ -228,7 +234,7 @@
   overflow-y: scroll;
   overflow-x: hidden;
   padding-top: 7px;
-  border-bottom: solid $primaryColor 7px;
+  border-bottom: solid var(--silex-bg-main) 7px;
 }
 
 // // grapesjs-tailwind plugin
@@ -261,3 +267,16 @@
 //   outline: none;
 //   box-shadow: 0 0 0 2pt #c5c5c575;
 // }
+
+// Data source plugin and expressions
+:root {
+  --expression-input-dirty-background-color: transparent !important;
+  --expression-input-dirty-border-radius: 5px !important;
+  --expression-input-active-background-color: var(--gjs-main-light-color) !important;
+  --expression-input-active-color: var(--gjs-secondary-color) !important;
+  --expression-input-dirty-border-color: var(--expression-input-active-background-color) !important;
+
+}
+.property-container::part(property-container) {
+  padding: 0 !important;
+}