@genexus/mercury 0.4.5 → 0.4.6

package/dist/mercury.scss

@@ -560,6 +560,74 @@ Dialog Footer
   }
 }
 
+/*----------------------
+Body Spacing
+----------------------*/
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
+  }
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
+  }
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
+  }
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
+  }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
+}
+
 
 // Resets
 @mixin typography-reset() {
@@ -679,12 +747,13 @@ Dialog Footer
   --mer-color__neutral-gray--700: #c0ccd9;
   --mer-color__neutral-gray--800: #d2ddeb;
   --mer-color__neutral-gray--900: #e1ecf9;
-  // 1000 to 1400 do not exist anymore in figma (check with designer)
-  --mer-color__neutral-gray--1000: #;
-  --mer-color__neutral-gray--1100: #;
-  --mer-color__neutral-gray--1200: #;
-  --mer-color__neutral-gray--1300: #;
-  --mer-color__neutral-gray--1400: #;
+  // 1000 to 1400 do not exist anymore in figma but can not be removed yet
+  // because gemini is dependent on this tokens (check with designer)
+  --mer-color__neutral-gray--1000: #f8f8f8;
+  --mer-color__neutral-gray--1100: #f1f1f1;
+  --mer-color__neutral-gray--1200: #e4e4e4;
+  --mer-color__neutral-gray--1300: #dedede;
+  --mer-color__neutral-gray--1400: #ffffff;
 
   // tinted
   --mer-color__tinted-yellow--5: #ffc96b0d;
@@ -739,33 +808,44 @@ Dialog Footer
   --mer-color__neutral-gray--700: #242d3c;
   --mer-color__neutral-gray--800: #181f2a;
   --mer-color__neutral-gray--900: #11151c;
-  // 1000 to 1400 do not exist anymore in figma (check with designer)
-  --mer-color__neutral-gray--1000: #;
-  --mer-color__neutral-gray--1100: #;
-  --mer-color__neutral-gray--1200: #;
-  --mer-color__neutral-gray--1300: #;
-  --mer-color__neutral-gray--1400: #;
-
-  // tinted
-  --mer-color__tinted-yellow--5: #ffc96b0d;
-  --mer-color__tinted-yellow--60: #ffc96b99;
-  --mer-color__tinted-red--5: #fb7c840d;
-  --mer-color__tinted-red--60: #fb7c8499;
-  --mer-color__tinted-green--5: #3fa89b0d;
-  --mer-color__tinted-green--60: #3fa89b99;
-  --mer-color__tinted-blue--5: #5ba7ff0d;
-  --mer-color__tinted-blue--8: #5ba7ff14;
-  --mer-color__tinted-blue--10: #5ba7ff1a;
-  --mer-color__tinted-blue--20: #5ba7ff33;
-  --mer-color__tinted-blue--30: #5ba7ff4d;
-  --mer-color__tinted-blue--50: #5ba7ff80;
-  // tinted no opacity // WA
-  // --mer-color__tinted-blue--5: #1d2838;
-  // --mer-color__tinted-blue--8: #1f2c3f;
-  // --mer-color__tinted-blue--10: #1f2e43;
-  // --mer-color__tinted-blue--20: #293d5c;
-  // --mer-color__tinted-blue--30: #2e4e72;
-  // --mer-color__tinted-blue--50: #3c689c;
+  // 1000 to 1400 do not exist anymore in figma but can not be removed yet
+  // because gemini is dependent on this tokens (check with designer)
+  --mer-color__neutral-gray--1000: #1f2225;
+  --mer-color__neutral-gray--1100: #24272a;
+  --mer-color__neutral-gray--1200: #2d3032;
+  --mer-color__neutral-gray--1300: #3b3e40;
+  --mer-color__neutral-gray--1400: #2d3134;
+
+  // tinted (with opacity) this values had to be updated to the no opacity
+  // version (see below), because colors with opacity caused some issues when
+  // overlapping. Until this is not a definitive edition
+
+  // --mer-color__tinted-yellow--5: #ffc96b0d;
+  // --mer-color__tinted-yellow--60: #ffc96b99;
+  // --mer-color__tinted-red--5: #fb7c840d;
+  // --mer-color__tinted-red--60: #fb7c8499;
+  // --mer-color__tinted-green--5: #3fa89b0d;
+  // --mer-color__tinted-green--60: #3fa89b99;
+  // --mer-color__tinted-blue--5: #5ba7ff0d;
+  // --mer-color__tinted-blue--8: #5ba7ff14;
+  // --mer-color__tinted-blue--10: #5ba7ff1a;
+  // --mer-color__tinted-blue--20: #5ba7ff33;
+  // --mer-color__tinted-blue--30: #5ba7ff4d;
+  // --mer-color__tinted-blue--50: #5ba7ff80;
+
+  // tinted (no opacity) // tints with opacity were giving some issues
+  --mer-color__tinted-yellow--5: #282a2d;
+  --mer-color__tinted-yellow--60: #ad8a53;
+  --mer-color__tinted-red--5: #29252f;
+  --mer-color__tinted-red--60: #aa5962;
+  --mer-color__tinted-green--5: #1c2830;
+  --mer-color__tinted-green--60: #317571;
+  --mer-color__tinted-blue--5: #1d2838;
+  --mer-color__tinted-blue--8: #1f2c3f;
+  --mer-color__tinted-blue--10: #1f2e43;
+  --mer-color__tinted-blue--20: #293d5c;
+  --mer-color__tinted-blue--30: #2e4e72;
+  --mer-color__tinted-blue--50: #3c689c;
 
   // message
   --mer-color__message-green--100: #3fa89b;
@@ -1694,6 +1774,74 @@ Dialog Footer
   }
 }
 
+/*----------------------
+Body Spacing
+----------------------*/
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
+  }
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
+  }
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
+  }
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
+  }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
+}
+
 
 /// @group Label
 /// @param {String} $label-selector [".label"] -
@@ -1968,6 +2116,10 @@ Dialog Footer
   display: grid;
 
   &-group {
+    --spacing-body-block-start: var(--mer-spacing--lg);
+    --spacing-body-block-end: var(--mer-spacing--lg);
+    --spacing-body-inline-start: var(--mer-spacing--md);
+    --spacing-body-inline-end: var(--mer-spacing--md);
     display: grid;
     row-gap: var(--field-group__row-gap);
     column-gap: var(--field-group__column-gap);
@@ -2160,12 +2312,12 @@ Dialog Footer
 }
 
 %layout {
-  --layout__padding-block: var(--mer-spacing--md);
-  --layout__padding-inline: var(--mer-spacing--lg);
+  --spacing-body-block-start: var(--mer-spacing--md);
+  --spacing-body-block-end: var(--mer-spacing--md);
+  --spacing-body-inline-start: var(--mer-spacing--lg);
+  --spacing-body-inline-end: var(--mer-spacing--lg);
 
   display: grid;
-  padding-block: var(--layout__padding-block);
-  padding-inline: var(--layout__padding-inline);
   gap: var(--mer-spacing--md);
   &__panel {
     display: grid;
@@ -2203,19 +2355,6 @@ Dialog Footer
     grid-template-rows: 1fr;
     grid-template-columns: 2fr 1fr;
   }
-
-  &--no-padding {
-    --layout__padding-block: 0;
-    --layout__padding-inline: 0;
-  }
-
-  &--no-block-padding {
-    --layout__padding-block: 0;
-  }
-
-  &--no-inline-padding {
-    --layout__padding-inline: 0;
-  }
 }
 
 /// @group Layout
@@ -2227,9 +2366,6 @@ Dialog Footer
 /// @param {String} $layout--cols-4-selector [".layout--cols-4"] -
 /// @param {String} $layout--cols-1-2-selector [".layout--cols-1-2"] -
 /// @param {String} $layout--cols-2-1-selector [".layout--cols-2-1"] -
-/// @param {String} $layout--no-padding-selector [".layout--no-padding"] -
-/// @param {String} $layout--no-block-padding-selector [".layout--no-block-padding"] -
-/// @param {String} $layout--no-inline-padding-selector [".layout--no-inline-padding"] -
 @mixin layout(
   $layout-selector: ".layout",
   $panel-selector: ".layout__panel",
@@ -2238,10 +2374,7 @@ Dialog Footer
   $layout--cols-3-selector: ".layout--cols-3",
   $layout--cols-4-selector: ".layout--cols-4",
   $layout--cols-1-2-selector: ".layout--cols-1-2",
-  $layout--cols-2-1-selector: ".layout--cols-2-1",
-  $layout--no-padding-selector: ".layout--no-padding",
-  $layout--no-block-padding-selector: ".layout--no-block-padding",
-  $layout--no-inline-padding-selector: ".layout--no-inline-padding"
+  $layout--cols-2-1-selector: ".layout--cols-2-1"
 ) {
   #{$layout-selector} {
     @extend %layout;
@@ -2274,18 +2407,6 @@ Dialog Footer
   #{$layout--cols-2-1-selector} {
     @extend %layout--cols-2-1;
   }
-
-  #{$layout--no-padding-selector} {
-    @extend %layout--no-padding;
-  }
-
-  #{$layout--no-block-padding-selector} {
-    @extend %layout--no-block-padding;
-  }
-
-  #{$layout--no-inline-padding-selector} {
-    @extend %layout--no-inline-padding;
-  }
 }
 
 @mixin heading-tokens() {
@@ -3406,6 +3527,74 @@ Dialog Footer
   }
 }
 
+/*----------------------
+Body Spacing
+----------------------*/
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
+  }
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
+  }
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
+  }
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
+  }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
+}
+
 :root {
   --ch-placeholder-color: var(--mer-text__neutral);
 }
@@ -3583,6 +3772,10 @@ Dialog Footer
 }
 
 %dialog {
+  --spacing-body-block-start: var(--mer-spacing--lg);
+  --spacing-body-block-end: var(--mer-spacing--lg);
+  --spacing-body-inline-start: var(--mer-spacing--md);
+  --spacing-body-inline-end: var(--mer-spacing--md);
   --ch-dialog-max-inline-size: 800px;
   background-color: var(--mer-color__elevation--01);
   box-shadow: var(--mer-box-shadow--01);
@@ -3613,8 +3806,6 @@ Dialog Footer
   }
 
   &__content {
-    padding-block: var(--mer-spacing--lg);
-    padding-inline: var(--mer-spacing--md);
     overflow: auto;
   }
 
@@ -5128,7 +5319,6 @@ Dialog Footer
   // - - - - - - - - - - - - - - - - - - - -
 
   --tree-view__min-inline-size: max-content;
-  --tree-view__padding: var(--mer-spacing--xs);
   --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs);
 
   // - - - - - - - - - - - - - - - - - - - -
@@ -5171,12 +5361,7 @@ Dialog Footer
   @include tree-view-tokens();
   font-size: var(--tree-view__font-size);
   line-height: var(--mer-line-height--regular);
-  padding: var(--tree-view__padding);
   min-inline-size: var(--tree-view__min-inline-size);
-
-  &--no-padding {
-    padding: 0;
-  }
 }
 
 // TODO: Improve this
@@ -5279,7 +5464,6 @@ Dialog Footer
 ///
 @mixin tree-view(
   $tree-view-selector: ".tree-view",
-  $tree-view--no-padding-selector: ".tree-view--no-padding",
 
   // Drag preview
   $drag-preview-selector: ".tree-view::part(drag-preview)",
@@ -5330,10 +5514,6 @@ Dialog Footer
     @include scrollbar-styles();
   }
 
-  #{$tree-view--no-padding-selector} {
-    @extend %tree-view--no-padding;
-  }
-
   // - - - - - - - - - - - - - - - - - - - -
   //               Drag preview
   // - - - - - - - - - - - - - - - - - - - -
@@ -5470,6 +5650,7 @@ Dialog Footer
   $form-controls-classes: true,
   $icon-classes: true,
   $layout-classes: true,
+  $spacing-classes: true,
   $typography-classes: true,
 
   // Components
@@ -28079,6 +28260,11 @@ Dialog Footer
       @include control-footer();
     }
 
+    // Spacing classes
+    @if $spacing-classes {
+      @include spacing-body();
+    }
+
     // Typography classes
     @if $typography-classes {
       @include typography-classes();
@@ -28187,6 +28373,7 @@ Dialog Footer
   $form-controls-classes: false,
   $icon-classes: false,
   $layout-classes: false,
+  $spacing-classes: false,
   $typography-classes: false,
 
   // Components
@@ -28245,6 +28432,7 @@ Dialog Footer
     $form-controls-classes: $form-controls-classes,
     $icon-classes: $icon-classes,
     $layout-classes: $layout-classes,
+    $spacing-classes: $spacing-classes,
     $typography-classes: $typography-classes,
 
     // Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",
@@ -12,7 +12,7 @@
   "scripts": {
     "build": "tsc && npm run icons-svg && npm run icons-sass && npm run build.scss && npm run copy-tasks",
     "build-no-svg": "tsc && npm run build.scss && npm run copy-tasks",
-    "build.scss": "scss-bundle -e ./src/mercury.scss -o dist/mercury.scss && npm run build.bundles && npm run copy-all.css npm run showcase.scss",
+    "build.scss": "scss-bundle -e ./src/mercury.scss -o dist/mercury.scss && npm run build.bundles && npm run copy-all.css && npm run showcase.scss",
     "build.bundles": "fse copy --all --keepExisting --errorOnExist --dereference --preserveTimestamps --quiet src/bundles/scss dist/bundles/scss && sass --load-path=src --no-source-map --style compressed dist/bundles/scss:dist/bundles/css",
     "start": "vite --port 5200 --open showcase/button.html",
     "validate.ci": "npm run build-no-svg",