@silexlabs/silex 3.5.1-7 → 3.5.1

package/src/css/silex.scss

@@ -12,23 +12,39 @@
   }
   h2 {
     font-size: 18px;
-    background: $lighterPrimaryColor;
+    background: var(--silex-bg-lighter);
     border-radius: 8px 8px 0 0;
     padding: 8px;
     margin: 0;
     font-weight: normal;
   }
+
   h3 {
     margin: 10px 0;
     font-size: 18px;
     font-weight: normal;
   }
-  //Better contrast than grapesjs default for select menu et input
-  select, input {
-    background-color: $darkerPrimaryColor;
+
+  // Better contrast than grapesjs default for select menu and input
+  select,
+  input {
+    background-color: var(--silex-input-bg);
   }
-  .gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
-    color: $secondaryColor;
+  select.gjs-input-unit {
+    height: 100%;
+    background-color: transparent;
+  }
+
+  .gjs-color-warn,
+  .gjs-sm-sector .gjs-sm-field input,
+  .gjs-clm-tags .gjs-sm-field input,
+  .gjs-sm-sector .gjs-clm-field input,
+  .gjs-clm-tags .gjs-clm-field input,
+  .gjs-sm-sector .gjs-sm-field select,
+  .gjs-clm-tags .gjs-sm-field select,
+  .gjs-sm-sector .gjs-clm-field select,
+  .gjs-clm-tags .gjs-clm-field select {
+    color: var(--silex-text-primary);
   }
 }
 
@@ -70,21 +86,30 @@
   pointer-events: auto;
   overflow: hidden; /* settings scroll is on .settings-body */
   display: flex;
-  flex-direction: column;
+
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+
+  .silex-bar .silex-list {
+    display: flex; // This list is tabs
+  }
 
   .settings-content {
-    flex: 1;
     display: flex;
     flex-direction: column;
     background-color: var(--primaryColor);
-    overflow: hidden;
+    overflow: auto;
+    width: 920px;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
   }
   .settings-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid var(--gjs-border-color, #ddd);
+    border-bottom: 1px solid var(--silex-border-color-strong);
   }
   .settings-header h3 {
     margin: 0;
@@ -114,36 +139,26 @@
     flex-direction: column;
   }
   .settings-body .silex-sidebar-dialog {
-    flex: 1;
-  }
-  footer {
-    position: fixed;
-    z-index: 10;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 20px 0;
+    flex-direction: column;
   }
   form.silex-form {
-    padding-bottom: 100px; // leave space for fixed footer
     textarea {
       min-height: 250px;
     }
   }
   .silex-form__element {
     padding: 10px 5px;
-    border: 1px solid $lighterPrimaryColor;
     margin: 10px 0;
     width: 98%;
   }
+
   footer {
-    position: fixed;
     z-index: 10;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 20px 0;
-    background-color: $primaryColor;
+    background-color: var(--silex-bg-main);
     &>*:last-child {
       margin-right: 30px;
     }
@@ -169,23 +184,23 @@ input.silex-button[type="button"],
 input.silex-button[type="submit"] {
   cursor: pointer;
   font-family: inherit;
-  color: #fff;
+  color: var(--silex-text-inverse);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #e9ebeb;
-  border-bottom-color: #e1e3e3;
+  border: 1px solid var(--silex-border-color);
   border-radius: 4px;
-  box-shadow: 0 2px 4px 0 rgba(14, 30, 37, .12);
-  background-color: $lighterPrimaryColor;
-  border-color: transparent;
+  box-shadow: var(--silex-shadow-sm);
+  background-color: var(--silex-button-bg);
   padding: 5px;
+
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $tertiaryColor;
+    box-shadow: 0 0 0 2px var(--silex-focus-outline);
   }
+
   &:hover {
-    background-color: $darkerPrimaryColor;
+    background-color: var(--silex-button-hover-bg);
   }
 }
 
@@ -196,11 +211,11 @@ input.silex-button[type="submit"] {
 }
 
 .silex-button.silex-button--primary {
-  background-color: $lighterPrimaryColor;
+  background-color: var(--silex-button-bg);
 }
 
 .silex-button.silex-button--secondary {
-  background-color: $primaryColor;
+  background-color: var(--silex-bg-main);
 }
 
 .silex-button--size {
@@ -224,11 +239,12 @@ input.silex-button[type="submit"] {
 .silex-sidebar-dialog,
 .silex-bar {
   display: flex;
+  align-items: start;
   &>* {
     margin: 5px;
   }
   main {
-    width: 93%;
+    width: 99%;
   }
 }
 
@@ -237,24 +253,26 @@ ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  //background-color: #575757;
-  &>li {
+
+  & > li {
     padding: 5px;
-    border-bottom: 1px solid $lighterPrimaryColor;
-    //background-color: #444;
+    border-bottom: 1px solid var(--silex-border-color-strong);
     margin: 5px;
   }
+
   fieldset {
-    border-color: $lighterPrimaryColor;
+    border-color: var(--silex-border-color-strong);
   }
-  h4 { // badge-like
+
+  h4 {
+    // badge-like
     display: inline-block;
     padding: 5px;
     padding-bottom: 2px;
     margin: 10px 5px;
     font-weight: normal;
-    color: #3d3d3d;
-    background-color: #c4c4c4;
+    color: var(--silex-badge-text);
+    background-color: var(--silex-badge-bg);
   }
   .silex-list__item__body {
     display: flex;
@@ -272,36 +290,48 @@ ul.silex-list {
 
 ol.silex-list--menu,
 ul.silex-list--menu {
-  &>li {
+  & > li {
     padding: 15px;
     margin: 0;
     border: 1px solid transparent;
-    border-bottom-color: $lighterPrimaryColor;
+    border-bottom-color: var(--silex-border-color-strong);
     text-align: center;
     cursor: pointer;
+
+    &:first-child {
+      border-top-color: var(--silex-border-color-strong);
+    }
+
+    &:hover {
+      color: var(--silex-accent-primary);
+      background-color: var(--silex-hover-bg);
+    }
   }
-  &>li:first-child {
-    border-top-color: $lighterPrimaryColor;
-  }
-  .active,
-  &>li:hover {
-    color: $tertiaryColor;
-    background-color: $darkerPrimaryColor;
+
+  .active {
+    color: var(--silex-accent-primary);
+    background-color: var(--silex-hover-bg);
   }
 }
 
 form.silex-form {
   display: flex;
   flex-direction: column;
+
   footer {
     text-align: right;
-    border-top: 1px solid $lighterPrimaryColor;
+    border-top: 1px solid var(--silex-border-color-strong);
     padding: 20px 0 10px;
     margin: 20px 0 0;
   }
-  button, input, optgroup, select, textarea {
-    background-color: $darkerPrimaryColor;
-    color: $secondaryColor;
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    background-color: var(--silex-input-bg);
+    color: var(--silex-text-primary);
     padding: 5px;
     border: none;
   }
@@ -315,7 +345,4 @@ form.silex-form {
     display: inline-flex;
     flex-direction: column;
   }
-  .silex-form__group.col2 {
-    column-count: 2;
-  }
 }

package/src/css/theme-base.scss

@@ -0,0 +1,93 @@
+/**
+ * THEME-BASE.SCSS
+ * Base theming system for Silex
+ *
+ * Philosophy:
+ * - Leverage GrapesJS variables as much as possible
+ * - Only introduce new variables when truly necessary
+ * - Provide semantic tokens for Silex-specific UI elements
+ * - Keep it minimal and maintainable
+ */
+
+@use "variables" as silex-vars;
+
+:root {
+  // ============================================================
+  // 1. OVERRIDE GRAPESJS VARIABLES (Primary theme colors)
+  // ============================================================
+  // These are set by Silex and override GrapesJS defaults
+
+  --gjs-primary-color: #{silex-vars.$primaryColor};
+  --gjs-secondary-color: #{silex-vars.$secondaryColor};
+  --gjs-tertiary-color: #{silex-vars.$tertiaryColor};
+  --gjs-quaternary-color: #{silex-vars.$quaternaryColor};
+
+  // Computed variations for Silex UI
+  --gjs-primary-darker: #{silex-vars.$darkerPrimaryColor};
+  --gjs-primary-lighter: #{silex-vars.$lighterPrimaryColor};
+
+  // ============================================================
+  // 2. SILEX-SPECIFIC SEMANTIC TOKENS
+  // ============================================================
+  // These provide semantic meaning for Silex UI components
+  // They map to GrapesJS variables where possible
+
+  // Backgrounds
+  --silex-bg-main: var(--gjs-primary-color);
+  --silex-bg-darker: var(--gjs-primary-darker);
+  --silex-bg-lighter: var(--gjs-primary-lighter);
+  --silex-bg-surface: var(--gjs-primary-color);
+
+  // Text colors
+  --silex-text-primary: var(--gjs-secondary-color);
+  --silex-text-secondary: var(--gjs-font-color);
+  --silex-text-inverse: #ffffff;
+
+  // Borders
+  --silex-border-color: var(--gjs-light-border);
+  --silex-border-color-strong: var(--gjs-primary-lighter);
+
+  // Shadows
+  --silex-shadow-color: rgba(0, 0, 0, 0.2);
+  --silex-shadow-sm: 0 0 5px var(--silex-shadow-color);
+  --silex-shadow-md: 0 0 10px var(--silex-shadow-color);
+  --silex-shadow-lg: 0 0 15px var(--silex-shadow-color);
+
+  // Interactive states
+  --silex-hover-bg: var(--gjs-primary-darker);
+  --silex-active-bg: var(--gjs-primary-lighter);
+  --silex-focus-outline: var(--gjs-tertiary-color);
+
+  // Accents
+  --silex-accent-primary: var(--gjs-tertiary-color);
+  --silex-accent-secondary: var(--gjs-quaternary-color);
+
+  // Status colors (use GrapesJS semantic colors)
+  --silex-status-info: var(--gjs-color-blue);
+  --silex-status-success: var(--gjs-color-green);
+  --silex-status-warning: var(--gjs-color-yellow);
+  --silex-status-error: var(--gjs-color-red);
+
+  // UI Specific
+  --silex-button-bg: var(--gjs-primary-lighter);
+  --silex-button-hover-bg: var(--gjs-primary-darker);
+  --silex-input-bg: var(--gjs-primary-darker);
+  --silex-badge-bg: #c4c4c4;
+  --silex-badge-text: #3d3d3d;
+
+  // Dimensions (from Silex)
+  --silex-top-bar-height: #{silex-vars.$topBarHeight};
+  --silex-project-bar-width: #{silex-vars.$projectBarWidth};
+  --silex-footer-height: #{silex-vars.$footerHeight};
+
+  // Transitions
+  --silex-transition-fast: #{silex-vars.$transitionSpeedMedium};
+  --silex-transition-medium: #{silex-vars.$transitionSpeedSlow};
+
+  // Font
+  --silex-font-family: #{silex-vars.$fontFamily};
+
+  // Z-indexes
+  --silex-z-dialog: #{silex-vars.$z-dialog-inline};
+  --silex-z-loader: #{silex-vars.$z-loader};
+}

package/src/css/theme-modern.scss

@@ -0,0 +1,265 @@
+/**
+ * THEME-MODERN.SCSS
+ * Modern Dark Theme 2025 for Silex
+ *
+ * Design Philosophy:
+ * - Minimalisme structuré
+ * - Beaucoup d'espace visuel
+ * - Ombres très douces, jamais fortes
+ * - Pas de gradients visibles
+ * - Micro-interactions 150–200ms
+ * - Haute lisibilité
+ * - Harmonie avec les IDE modernes (VS Code, etc.)
+ *
+ * Palette (Solid & Modern):
+ * - Global background: #111111
+ * - Surfaces: #1A1A1A, #1D1D1D
+ * - Borders: #262626
+ * - Primary text: #E5E5E5
+ * - Secondary text: #A8A8A8
+ * - Accent: #8873FE (purple moderne)
+ */
+
+@use "variables" as silex-vars;
+
+:root {
+  // ============================================================
+  // BASE COLORS - Modern Dark 2025
+  // ============================================================
+
+  // Main backgrounds
+  --primaryColor: #1A1A1A;
+  --gjs-primary-color: #1A1A1A !important;
+
+  // Text colors
+  --secondaryColor: #E5E5E5;
+  --gjs-secondary-color: #E5E5E5 !important;
+  --gjs-font-color: #E5E5E5 !important;
+  --gjs-font-color-active: #FFFFFF !important;
+
+  // Accent colors
+  --tertiaryColor: #8873FE;
+  --gjs-tertiary-color: #8873FE !important;
+  --quaternaryColor: #7461E3;
+  --gjs-quaternary-color: #7461E3 !important;
+
+  // Variations
+  --darkerPrimaryColor: #111111;
+  --lighterPrimaryColor: #1D1D1D;
+  --gjs-primary-darker: #111111;
+  --gjs-primary-lighter: #1D1D1D;
+
+  // GrapesJS system colors
+  --gjs-main-color: #1A1A1A;
+  --gjs-main-dark-color: rgba(0, 0, 0, 0.3);
+  --gjs-secondary-dark-color: rgba(0, 0, 0, 0.15);
+  --gjs-main-light-color: rgba(255, 255, 255, 0.08);
+  --gjs-secondary-light-color: rgba(255, 255, 255, 0.5);
+  --gjs-soft-light-color: rgba(255, 255, 255, 0.02);
+
+  // Status colors (solid, modern, accessible)
+  --gjs-color-blue: #6B8AFF;
+  --gjs-color-green: #5FD68F;
+  --gjs-color-yellow: #FFA94D;
+  --gjs-color-red: #FF6B6B;
+
+  // Utility colors
+  --gjs-color-highlight: #8873FE;
+  --gjs-color-warn: #FFA94D;
+
+  // ============================================================
+  // SILEX SEMANTIC TOKENS - Modern Theme
+  // ============================================================
+
+  // Backgrounds
+  --silex-bg-main: #1A1A1A;
+  --silex-bg-darker: #111111;
+  --silex-bg-lighter: #1D1D1D;
+  --silex-bg-surface: #1A1A1A;
+
+  // Text colors
+  --silex-text-primary: #E5E5E5;
+  --silex-text-secondary: #A8A8A8;
+  --silex-text-inverse: #FFFFFF;
+
+  // Borders (subtle, modern)
+  --silex-border-color: rgba(255, 255, 255, 0.08);
+  --silex-border-color-strong: #262626;
+  --gjs-light-border: rgba(255, 255, 255, 0.08);
+
+  // Shadows (très douces)
+  --silex-shadow-color: rgba(0, 0, 0, 0.4);
+  --silex-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --silex-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --silex-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
+
+  // Interactive states (micro-interactions)
+  --silex-hover-bg: #222222;
+  --silex-active-bg: #252525;
+  --silex-focus-outline: #8873FE;
+
+  // Accents
+  --silex-accent-primary: #8873FE;
+  --silex-accent-secondary: #7461E3;
+
+  // Status colors
+  --silex-status-info: #6B8AFF;
+  --silex-status-success: #5FD68F;
+  --silex-status-warning: #FFA94D;
+  --silex-status-error: #FF6B6B;
+
+  // UI Components
+  --silex-button-bg: #252525;
+  --silex-button-hover-bg: #2D2D2D;
+  --silex-input-bg: #141414;
+  --silex-badge-bg: #2D2D2D;
+  --silex-badge-text: #E5E5E5;
+
+  // Transitions (150-200ms pour micro-interactions)
+  --silex-transition-fast: 0.15s;
+  --silex-transition-medium: 0.2s;
+  --gjs-animation-duration: 0.18s;
+
+  // ============================================================
+  // REFINEMENTS - Polish & Details
+  // ============================================================
+
+  // Scrollbars
+  --gjs-scrollbar-track: #1A1A1A;
+  --gjs-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+
+  // Borders & Dividers
+  --gjs-border-color: #262626;
+
+  // Arrow & Decorations
+  --gjs-arrow-color: rgba(255, 255, 255, 0.5);
+  --gjs-dark-text-shadow: rgba(0, 0, 0, 0.4);
+}
+
+// ============================================================
+// GLOBAL REFINEMENTS
+// ============================================================
+
+// Smooth scrollbars everywhere
+.gjs-editor-cont {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--gjs-scrollbar-track);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--gjs-scrollbar-thumb);
+    border-radius: 5px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  }
+}
+
+// Smooth transitions on interactive elements
+button,
+.gjs-pn-btn,
+.silex-button,
+input,
+select,
+.gjs-block,
+.gjs-layer {
+  transition: all var(--silex-transition-fast) ease;
+}
+
+// Modern focus states
+*:focus-visible {
+  outline: 2px solid var(--silex-focus-outline);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+// Refined selection highlight
+::selection {
+  background-color: rgba(136, 115, 254, 0.3);
+  color: #FFFFFF;
+}
+
+// ============================================================
+// COMPONENT-SPECIFIC REFINEMENTS
+// ============================================================
+
+// Modern buttons with subtle elevation
+.gjs-pn-btn,
+.silex-button {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  &:active {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// Refined panels
+.gjs-pn-panel,
+.silex-dialog-inline {
+  backdrop-filter: blur(10px);
+}
+
+// Modern input fields
+input[type="text"],
+input[type="number"],
+select,
+textarea {
+  border: 1px solid var(--silex-border-color-strong);
+  border-radius: 4px;
+
+  &: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);
+  }
+}
+
+// Subtle separators
+.gjs-pn-panel,
+.project-bar__panel-header,
+.settings-header {
+  border-bottom-color: var(--silex-border-color-strong);
+}
+
+// Modern blocks with hover effect
+.gjs-block {
+  border: 1px solid var(--silex-border-color);
+  border-radius: 6px;
+  background: var(--silex-bg-lighter);
+
+  &:hover {
+    border-color: var(--silex-accent-primary);
+    background: var(--silex-hover-bg);
+  }
+}
+
+// Refined layers
+.gjs-layer {
+  &.gjs-selected {
+    background-color: var(--silex-active-bg);
+    border-left: 2px solid var(--silex-accent-primary);
+  }
+
+  &:hover {
+    background-color: var(--silex-hover-bg);
+  }
+}
+
+// Modern toolbar in canvas
+.gjs-toolbar {
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}

package/src/css/website-info.scss

@@ -9,6 +9,6 @@
   padding: 0 10px;
   line-height: 1;
   min-width: 100px;
-  border: 1px solid $lighterPrimaryColor;
-  background-color: $darkerPrimaryColor;
+  border: 1px solid var(--silex-border-color-strong);
+  background-color: var(--silex-bg-darker);
 }