@genexus/mercury 0.1.21 → 0.2.1

package/dist/mercury.scss

@@ -158,7 +158,7 @@ Focus
 /*----------------------
 Scrollbar
 ----------------------*/
-@mixin scrollbar-styles {
+%scrollbar-styles {
   //scrollbar
   &::-webkit-scrollbar {
     width: var(--mer-scrollbar__size);
@@ -187,6 +187,9 @@ Scrollbar
     background: var(--mer-scrollbar-corner__bg);
   }
 }
+@mixin scrollbar-styles() {
+  @extend %scrollbar-styles;
+}
 
 /*----------------------------------------------------
 Item (applies to every item (tree, grid, list, etc...)
@@ -299,6 +302,37 @@ Window
   box-shadow: var(--mer-box-shadow--01);
 }
 
+/*----------------------
+Dialog Footer
+----------------------*/
+// Defined here to be used on /components/dialog as well as to replicate
+// dialog footer styles on genexus-ide-ui components
+%control-footer {
+  padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
+  gap: var(--mer-spacing--sm);
+  align-items: center;
+
+  &--with-border {
+    border-block-start: var(--mer-border__width--sm) solid
+      var(--mer-color__elevation--04);
+  }
+}
+@mixin control-footer(
+  $selector: ".control-footer",
+  $with-border-selector: ".control-footer--border",
+  $with-border: true
+) {
+  #{$selector} {
+    @extend %control-footer;
+  }
+
+  @if $with-border {
+    #{$with-border-selector} {
+      @extend %control-footer--with-border;
+    }
+  }
+}
+
 
 // Resets
 @mixin typography-reset() {
@@ -603,10 +637,10 @@ Window
 }
 
 @mixin timing() {
-  --mer-timing--super-fast: 100;
-  --mer-timing--fast: 200;
-  --mer-timing--regular: 500;
-  --mer-timing--slow: 1000;
+  --mer-timing--super-fast: 100ms;
+  --mer-timing--fast: 200ms;
+  --mer-timing--regular: 500ms;
+  --mer-timing--slow: 1000ms;
 }
 
 
@@ -1382,14 +1416,21 @@ Window
 }
 
 // - - - - - - - - - - - - - - - - - - - -
-//              Icon Path
+//         Icon Mask / Background
 // - - - - - - - - - - - - - - - - - - - -
-
 /// @group Icon
 /// @param {String} $selector [".icon-mask"] -
 /// @param {type} $icon-path [null] -
 /// @param {type} $icon-class [null] -
-/// @output
+/// @example scss
+///   SCSS:
+///     @include icon-mask($selector: "icon__example", $icon-path: var(--icon__example));
+///
+/// @example markup
+///   HTML/render:
+///     <div class="icon__example icon-size-sm"></div>
+///     <div class="icon__example icon-size-md"></div>
+///
 @mixin icon-mask($selector: ".icon-mask", $icon-path: null, $icon-class: null) {
   #{$selector} {
     @if $icon-path != null {
@@ -1406,7 +1447,15 @@ Window
 /// @param {String} $selector [".icon-background"] -
 /// @param {type} $icon-path [null] -
 /// @param {type} $icon-class [null] -
-/// @output
+/// @example scss
+///   SCSS:
+///     @include icon-background($selector: "icon__example", $icon-path: var(--icon__example));
+///
+/// @example markup
+///   HTML/render:
+///     <div class="icon__example icon-size-sm"></div>
+///     <div class="icon__example icon-size-md"></div>
+///
 @mixin icon-background(
   $selector: ".icon-background",
   $icon-path: null,
@@ -1426,7 +1475,6 @@ Window
 // - - - - - - - - - - - - - - - - - - - -
 //               Icon Sizes
 // - - - - - - - - - - - - - - - - - - - -
-
 %icon-size--sm {
   @include icon-background-common-styles(
     $inline-size: var(--mer-icon__box--sm),
@@ -1434,6 +1482,7 @@ Window
     $background-size: 100%
   );
 }
+
 %icon-size--md {
   @include icon-background-common-styles(
     $inline-size: var(--mer-icon__box--md),
@@ -1443,19 +1492,20 @@ Window
 }
 
 /// @group Icon
-/// @param {String} $selector [".icon-size-sm"] -
+/// @param {String} $selector [".icon-size-sm"]
 @mixin icon-size-sm($selector: ".icon-size-sm") {
   #{$selector} {
-    ::before {
+    &::before {
       @extend %icon-size--sm;
     }
   }
 }
+
 /// @group Icon
-/// @param {String} $selector [".icon-size-sm"] -
-@mixin icon-size-sm($selector: ".icon-size-md") {
+/// @param {String} $selector [".icon-size-md"] -
+@mixin icon-size-md($selector: ".icon-size-md") {
   #{$selector} {
-    ::before {
+    &::before {
       @extend %icon-size--md;
     }
   }
@@ -1464,7 +1514,6 @@ Window
 // - - - - - - - - - - - - - - - - - - - -
 //              Form Input
 // - - - - - - - - - - - - - - - - - - - -
-
 @mixin form-input-bg-x-rtl-support() {
   // has to be included in the root
   :root[dir="rtl"] {
@@ -1491,8 +1540,8 @@ Window
 
 %heading-base {
   font-family: var(--mer-font-family--title);
-  color: var(--mer-color__neutral-gray--100);
   line-height: var(--mer-line-height--tight);
+  color: transparent;
 }
 
 %heading-1 {
@@ -1515,7 +1564,7 @@ Window
 
 %heading-4 {
   @extend %heading-base;
-  font-size: var(--mer-font__size--md); // 20px
+  font-size: var(--mer-font__size--sm); // 16px
   font-weight: var(--mer-font__weight--bold);
 }
 
@@ -1527,10 +1576,17 @@ Window
 
 %heading-6 {
   @extend %heading-base;
-  font-size: var(--mer-font__size--sm); // 16px
+  font-size: var(--mer-font__size--2xs); // 12px
   font-weight: var(--mer-font__weight--semi-bold);
 }
 
+// Colors
+%heading__color {
+  &--highlighted {
+    color: var(--mer-text__highlighted);
+  }
+}
+
 %text-body {
   font-size: var(--mer-font__size--xs); // 14px
   font-family: var(--mer-body__font-family);
@@ -1570,46 +1626,52 @@ Window
 }
 
 /// @group Typography
-/// @param {String} $heading--1-selector [".heading-1"] -
-/// @param {String} $heading--2-selector [".heading-2"] -
-/// @param {String} $heading--3-selector [".heading-3"] -
-/// @param {String} $heading--4-selector [".heading-4"] -
-/// @param {String} $heading--5-selector [".heading-5"] -
-/// @param {String} $heading--6-selector [".heading-6"] -
-/// @param {String} $text-body-selector [".text-body"] -
+/// @param {String} $heading-1-selector [".heading-1"] -
+/// @param {String} $heading-2-selector [".heading-2"] -
+/// @param {String} $heading-3-selector [".heading-3"] -
+/// @param {String} $heading-4-selector [".heading-4"] -
+/// @param {String} $heading-5-selector [".heading-5"] -
+/// @param {String} $heading-6-selector [".heading-6"] -
+/// @param {String} $heading-highlighted-selector [".heading--highlighted"] -
+/// @param {String} $text-body-selector [".text--body"] -
 @mixin typography-classes(
-  $heading--1-selector: ".heading-1",
-  $heading--2-selector: ".heading-2",
-  $heading--3-selector: ".heading-3",
-  $heading--4-selector: ".heading-4",
-  $heading--5-selector: ".heading-5",
-  $heading--6-selector: ".heading-6",
+  $heading-1-selector: ".heading-1",
+  $heading-2-selector: ".heading-2",
+  $heading-3-selector: ".heading-3",
+  $heading-4-selector: ".heading-4",
+  $heading-5-selector: ".heading-5",
+  $heading-6-selector: ".heading-6",
+  $heading-highlighted: ".heading--highlighted",
   $text-body-selector: ".text-body"
 ) {
-  #{$heading--1-selector} {
+  #{$heading-1-selector} {
     @extend %heading-1;
   }
 
-  #{$heading--2-selector} {
+  #{$heading-2-selector} {
     @extend %heading-2;
   }
 
-  #{$heading--3-selector} {
+  #{$heading-3-selector} {
     @extend %heading-3;
   }
 
-  #{$heading--4-selector} {
+  #{$heading-4-selector} {
     @extend %heading-4;
   }
 
-  #{$heading--5-selector} {
+  #{$heading-5-selector} {
     @extend %heading-5;
   }
 
-  #{$heading--6-selector} {
+  #{$heading-6-selector} {
     @extend %heading-6;
   }
 
+  #{$heading-highlighted} {
+    @extend %heading__color--highlighted;
+  }
+
   #{$text-body-selector} {
     @extend %text-body;
   }
@@ -2055,9 +2117,13 @@ Multicolor lists
  
 // objects
 $objects: workflow, work-panel, web-panel, web-component, version, url-rewrite, transaction, to-be-defined, theme, theme-web, theme-for-sd, table, super-app, subtype-group, structured-data-type, stencil, roles, report, references, query, procedure, patterns, panel-for-sd, orphant-document, offline-database, object, notification-templates, module, module-open, mini-app, menubar, menu, masterpage, main-object, language, knowledge-base, image, generator, generator-category, folder, folder-open, file, external-object, environment-select, environment-no-select, dso, domain, document, document-workflow, diagram, design, deployment-unit, dataview-index, datastore, datastore-category, data-view, data-selector, data-provider, dashboard, customization, conversational-flows, category, calendars, business-process-diagram, bg-color, attribute, api;
+ 
+// editing-structures
+$editing-structures: user-index, system-index, redundant-attribute, platforms, logical-attributes, formula-redundant, default, attribute-key, attribute-formula, attribute-description;
 
 $all-multicolor-lists: (
   objects: $objects,
+  editing-structures: $editing-structures,
 ); 
 
 /* - - - - - - - - - - - - - - - - - - 
@@ -2530,64 +2596,102 @@ MULTICOLOR CONSTRUCTS
   border-radius: 0;
   background-color: var(--mer-color__elevation--01);
   box-shadow: var(--mer-box-shadow--01);
-}
 
-%dialog__backdrop {
-  background-color: color-mix(
-    in srgb,
-    var(--elevation-un-elevation--4) 25%,
-    transparent
-  );
-  backdrop-filter: blur(5px);
-  z-index: 108; // TODO: This is a WA to show the backdrop above the button of the dropdown
-}
+  &__backdrop {
+    background-image: url(../../src/assets/images/noise-texture-200x200.png);
+    background-color: rgba(32, 36, 40, 0.9);
+    backdrop-filter: blur(1.5px);
+    z-index: 108; // TODO: This is a WA to show the backdrop above the button of the dropdown
+  }
 
-%dialog__header {
-  align-items: flex-start;
-  gap: var(--mer-spacing--sm);
-  padding: var(--mer-spacing--md) var(--mer-spacing--sm);
-  border-block-end: var(--mer-border__width--sm) solid
-    var(--mer-color__elevation--04);
-}
+  &__header {
+    align-items: flex-start;
+    gap: var(--mer-spacing--sm);
+    padding: var(--mer-spacing--md) var(--mer-spacing--sm);
+    border-block-end: var(--mer-border__width--sm) solid
+      var(--mer-color__elevation--04);
+  }
 
-%dialog__content {
-  padding: var(--mer-spacing--lg) var(--mer-spacing--md);
-}
+  &__caption {
+    @extend %heading-5;
+    @extend %heading__color--highlighted;
+    word-break: break-word;
+  }
 
-%dialog__caption {
-  color: var(--mer-text__on-elevation);
-  font-family: var(--mer-font-family--inter-bold);
-  word-break: break-word;
-}
+  &__close {
+    @extend %icon-size--md;
+  }
 
-%dialog__footer {
-  padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
-  border-block-start: var(--mer-border__width--sm) solid
-    var(--mer-color__elevation--04);
-  gap: var(--mer-spacing--sm);
-}
+  &__content {
+    padding: var(--mer-spacing--lg) var(--mer-spacing--md);
+    overflow: auto;
+  }
 
-%dialog__close {
-  @extend %icon-size--md;
+  &__footer {
+    @extend %control-footer;
+    @extend %control-footer--with-border;
+  }
+
+  /*------------------------------
+  Edges (For dragging)
+  -------------------------------*/
+  &__edge {
+    $edge-border-width: var(--mer-border__width--lg);
+    $edge-border-style: solid;
+    $edge-color: var(--mer-color__tinted-blue--20);
+    border-color: transparent;
+    transition: var(--mer-timing--fast) border-color;
+    &--hover {
+      border-color: $edge-color;
+    }
+    &-block-start {
+      border-block-start-width: $edge-border-width;
+      border-block-start-style: $edge-border-style;
+    }
+    &-inline-end {
+      border-inline-end-width: $edge-border-width;
+      border-inline-end-style: $edge-border-style;
+    }
+    &-block-end {
+      border-block-end-width: $edge-border-width;
+      border-block-end-style: $edge-border-style;
+    }
+    &-inline-start {
+      border-inline-start-width: $edge-border-width;
+      border-inline-start-style: $edge-border-style;
+    }
+  }
 }
 
 /// @group Dialog
 /// @param {String} $dialog-selector [".dialog::part(dialog)"] -
 /// @param {String} $backdrop-selector [".dialog.ch-dialog--modal"] -
 /// @param {String} $header-selector [".dialog::part(header)"] -
-/// @param {String} $content-selector [".dialog::part(content)"] -
 /// @param {String} $caption-selector [".dialog::part(caption)"] -
 /// @param {String} $close-selector [".dialog::part(close-button)"] -
+/// @param {String} $content-selector [".dialog::part(content)"] -
 /// @param {String} $footer-selector [".dialog::part(footer)"] -
+// Edges (For dragging)
+/// @param {String} $edge-selector [".dialog::part(edge)"] -
+/// @param {String} $edge-block-start-selector [".dialog::part(edge-block-start)"] -
+/// @param {String} $edge-inline-end-selector [".dialog::part(edge-inline-end)"] -
+/// @param {String} $edge-block-end-selector [".dialog::part(edge-block-end)"] -
+/// @param {String} $edge-inline-start-selector [".dialog::part(edge-inline-start)"] -
+// Icons
 /// @param {String} $icons-path [""] -
 @mixin dialog(
   $dialog-selector: ".dialog::part(dialog)",
   $backdrop-selector: ".dialog.ch-dialog--modal",
   $header-selector: ".dialog::part(header)",
-  $content-selector: ".dialog::part(content)",
   $caption-selector: ".dialog::part(caption)",
   $close-selector: ".dialog::part(close-button)",
+  $content-selector: ".dialog::part(content)",
   $footer-selector: ".dialog::part(footer)",
+  $edge-selector: ".dialog::part(edge)",
+  $edge-block-start-selector: ".dialog::part(edge-block-start)",
+  $edge-inline-end-selector: ".dialog::part(edge-inline-end)",
+  $edge-block-end-selector: ".dialog::part(edge-block-end)",
+  $edge-inline-start-selector: ".dialog::part(edge-inline-start)",
   $icons-path: ""
 ) {
   #{$dialog-selector} {
@@ -2602,18 +2706,10 @@ MULTICOLOR CONSTRUCTS
     @extend %dialog__header;
   }
 
-  #{$content-selector} {
-    @extend %dialog__content;
-  }
-
   #{$caption-selector} {
     @extend %dialog__caption;
   }
 
-  #{$footer-selector} {
-    @extend %dialog__footer;
-  }
-
   #{$close-selector} {
     @extend %dialog__close;
     @extend %icon__gemini-tools_close_neutral--enabled;
@@ -2627,6 +2723,41 @@ MULTICOLOR CONSTRUCTS
       @extend %icon__gemini-tools_close_neutral--disabled;
     }
   }
+
+  #{$content-selector} {
+    @extend %dialog__content;
+    height: 100%;
+  }
+
+  #{$footer-selector} {
+    @extend %dialog__footer;
+  }
+
+  /*------------------------------
+  Edges (For dragging)
+  -------------------------------*/
+  #{$edge-selector} {
+    @extend %dialog__edge;
+    &:hover {
+      @extend %dialog__edge--hover;
+    }
+  }
+
+  #{$edge-block-start-selector} {
+    @extend %dialog__edge-block-start;
+  }
+
+  #{$edge-inline-end-selector} {
+    @extend %dialog__edge-inline-end;
+  }
+
+  #{$edge-block-end-selector} {
+    @extend %dialog__edge-block-end;
+  }
+
+  #{$edge-inline-start-selector} {
+    @extend %dialog__edge-inline-start;
+  }
 }
 
 @mixin radio-group-tokens() {
@@ -7039,6 +7170,462 @@ MULTICOLOR CONSTRUCTS
     }
   
 
+  
+  /* =================================
+  LIGHT CUSTOM PROPERTIES
+  ================================= */
+
+  :root.light {
+  /*editing-structures*/
+  --icon__editing-structures_user-index--enabled: url('#{$icons-path}editing-structures/light/user-index.svg#enabled'); 
+  --icon__editing-structures_user-index--hover: url('#{$icons-path}editing-structures/light/user-index.svg#hover'); 
+  --icon__editing-structures_user-index--active: url('#{$icons-path}editing-structures/light/user-index.svg#active'); 
+  --icon__editing-structures_user-index--disabled: url('#{$icons-path}editing-structures/light/user-index.svg#disabled'); 
+  --icon__editing-structures_system-index--enabled: url('#{$icons-path}editing-structures/light/system-index.svg#enabled'); 
+  --icon__editing-structures_system-index--hover: url('#{$icons-path}editing-structures/light/system-index.svg#hover'); 
+  --icon__editing-structures_system-index--active: url('#{$icons-path}editing-structures/light/system-index.svg#active'); 
+  --icon__editing-structures_system-index--disabled: url('#{$icons-path}editing-structures/light/system-index.svg#disabled'); 
+  --icon__editing-structures_redundant-attribute--enabled: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#enabled'); 
+  --icon__editing-structures_redundant-attribute--hover: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#hover'); 
+  --icon__editing-structures_redundant-attribute--active: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#active'); 
+  --icon__editing-structures_redundant-attribute--disabled: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#disabled'); 
+  --icon__editing-structures_platforms--enabled: url('#{$icons-path}editing-structures/light/platforms.svg#enabled'); 
+  --icon__editing-structures_platforms--hover: url('#{$icons-path}editing-structures/light/platforms.svg#hover'); 
+  --icon__editing-structures_platforms--active: url('#{$icons-path}editing-structures/light/platforms.svg#active'); 
+  --icon__editing-structures_platforms--disabled: url('#{$icons-path}editing-structures/light/platforms.svg#disabled'); 
+  --icon__editing-structures_logical-attributes--enabled: url('#{$icons-path}editing-structures/light/logical-attributes.svg#enabled'); 
+  --icon__editing-structures_logical-attributes--hover: url('#{$icons-path}editing-structures/light/logical-attributes.svg#hover'); 
+  --icon__editing-structures_logical-attributes--active: url('#{$icons-path}editing-structures/light/logical-attributes.svg#active'); 
+  --icon__editing-structures_logical-attributes--disabled: url('#{$icons-path}editing-structures/light/logical-attributes.svg#disabled'); 
+  --icon__editing-structures_formula-redundant--enabled: url('#{$icons-path}editing-structures/light/formula-redundant.svg#enabled'); 
+  --icon__editing-structures_formula-redundant--hover: url('#{$icons-path}editing-structures/light/formula-redundant.svg#hover'); 
+  --icon__editing-structures_formula-redundant--active: url('#{$icons-path}editing-structures/light/formula-redundant.svg#active'); 
+  --icon__editing-structures_formula-redundant--disabled: url('#{$icons-path}editing-structures/light/formula-redundant.svg#disabled'); 
+  --icon__editing-structures_default--enabled: url('#{$icons-path}editing-structures/light/default.svg#enabled'); 
+  --icon__editing-structures_default--hover: url('#{$icons-path}editing-structures/light/default.svg#hover'); 
+  --icon__editing-structures_default--active: url('#{$icons-path}editing-structures/light/default.svg#active'); 
+  --icon__editing-structures_default--disabled: url('#{$icons-path}editing-structures/light/default.svg#disabled'); 
+  --icon__editing-structures_attribute-key--enabled: url('#{$icons-path}editing-structures/light/attribute-key.svg#enabled'); 
+  --icon__editing-structures_attribute-key--hover: url('#{$icons-path}editing-structures/light/attribute-key.svg#hover'); 
+  --icon__editing-structures_attribute-key--active: url('#{$icons-path}editing-structures/light/attribute-key.svg#active'); 
+  --icon__editing-structures_attribute-key--disabled: url('#{$icons-path}editing-structures/light/attribute-key.svg#disabled'); 
+  --icon__editing-structures_attribute-formula--enabled: url('#{$icons-path}editing-structures/light/attribute-formula.svg#enabled'); 
+  --icon__editing-structures_attribute-formula--hover: url('#{$icons-path}editing-structures/light/attribute-formula.svg#hover'); 
+  --icon__editing-structures_attribute-formula--active: url('#{$icons-path}editing-structures/light/attribute-formula.svg#active'); 
+  --icon__editing-structures_attribute-formula--disabled: url('#{$icons-path}editing-structures/light/attribute-formula.svg#disabled'); 
+  --icon__editing-structures_attribute-description--enabled: url('#{$icons-path}editing-structures/light/attribute-description.svg#enabled'); 
+  --icon__editing-structures_attribute-description--hover: url('#{$icons-path}editing-structures/light/attribute-description.svg#hover'); 
+  --icon__editing-structures_attribute-description--active: url('#{$icons-path}editing-structures/light/attribute-description.svg#active'); 
+  --icon__editing-structures_attribute-description--disabled: url('#{$icons-path}editing-structures/light/attribute-description.svg#disabled'); 
+
+  }
+
+  /* =================================
+  DARK CUSTOM PROPERTIES
+  ================================= */
+
+  :root.dark {
+  /*editing-structures*/
+  --icon__editing-structures_user-index--enabled: url('#{$icons-path}editing-structures/dark/user-index.svg#enabled'); 
+  --icon__editing-structures_user-index--hover: url('#{$icons-path}editing-structures/dark/user-index.svg#hover'); 
+  --icon__editing-structures_user-index--active: url('#{$icons-path}editing-structures/dark/user-index.svg#active'); 
+  --icon__editing-structures_user-index--disabled: url('#{$icons-path}editing-structures/dark/user-index.svg#disabled'); 
+  --icon__editing-structures_system-index--enabled: url('#{$icons-path}editing-structures/dark/system-index.svg#enabled'); 
+  --icon__editing-structures_system-index--hover: url('#{$icons-path}editing-structures/dark/system-index.svg#hover'); 
+  --icon__editing-structures_system-index--active: url('#{$icons-path}editing-structures/dark/system-index.svg#active'); 
+  --icon__editing-structures_system-index--disabled: url('#{$icons-path}editing-structures/dark/system-index.svg#disabled'); 
+  --icon__editing-structures_redundant-attribute--enabled: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#enabled'); 
+  --icon__editing-structures_redundant-attribute--hover: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#hover'); 
+  --icon__editing-structures_redundant-attribute--active: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#active'); 
+  --icon__editing-structures_redundant-attribute--disabled: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#disabled'); 
+  --icon__editing-structures_platforms--enabled: url('#{$icons-path}editing-structures/dark/platforms.svg#enabled'); 
+  --icon__editing-structures_platforms--hover: url('#{$icons-path}editing-structures/dark/platforms.svg#hover'); 
+  --icon__editing-structures_platforms--active: url('#{$icons-path}editing-structures/dark/platforms.svg#active'); 
+  --icon__editing-structures_platforms--disabled: url('#{$icons-path}editing-structures/dark/platforms.svg#disabled'); 
+  --icon__editing-structures_logical-attributes--enabled: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#enabled'); 
+  --icon__editing-structures_logical-attributes--hover: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#hover'); 
+  --icon__editing-structures_logical-attributes--active: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#active'); 
+  --icon__editing-structures_logical-attributes--disabled: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#disabled'); 
+  --icon__editing-structures_formula-redundant--enabled: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#enabled'); 
+  --icon__editing-structures_formula-redundant--hover: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#hover'); 
+  --icon__editing-structures_formula-redundant--active: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#active'); 
+  --icon__editing-structures_formula-redundant--disabled: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#disabled'); 
+  --icon__editing-structures_default--enabled: url('#{$icons-path}editing-structures/dark/default.svg#enabled'); 
+  --icon__editing-structures_default--hover: url('#{$icons-path}editing-structures/dark/default.svg#hover'); 
+  --icon__editing-structures_default--active: url('#{$icons-path}editing-structures/dark/default.svg#active'); 
+  --icon__editing-structures_default--disabled: url('#{$icons-path}editing-structures/dark/default.svg#disabled'); 
+  --icon__editing-structures_attribute-key--enabled: url('#{$icons-path}editing-structures/dark/attribute-key.svg#enabled'); 
+  --icon__editing-structures_attribute-key--hover: url('#{$icons-path}editing-structures/dark/attribute-key.svg#hover'); 
+  --icon__editing-structures_attribute-key--active: url('#{$icons-path}editing-structures/dark/attribute-key.svg#active'); 
+  --icon__editing-structures_attribute-key--disabled: url('#{$icons-path}editing-structures/dark/attribute-key.svg#disabled'); 
+  --icon__editing-structures_attribute-formula--enabled: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#enabled'); 
+  --icon__editing-structures_attribute-formula--hover: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#hover'); 
+  --icon__editing-structures_attribute-formula--active: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#active'); 
+  --icon__editing-structures_attribute-formula--disabled: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#disabled'); 
+  --icon__editing-structures_attribute-description--enabled: url('#{$icons-path}editing-structures/dark/attribute-description.svg#enabled'); 
+  --icon__editing-structures_attribute-description--hover: url('#{$icons-path}editing-structures/dark/attribute-description.svg#hover'); 
+  --icon__editing-structures_attribute-description--active: url('#{$icons-path}editing-structures/dark/attribute-description.svg#active'); 
+  --icon__editing-structures_attribute-description--disabled: url('#{$icons-path}editing-structures/dark/attribute-description.svg#disabled'); 
+
+  }
+  
+    %icon__editing-structures {
+  
+
+  /* =================================
+  LIGHT PLACEHOLDERS SELECTORS
+  ================================= */
+  
+
+    /* - - - - - - - - - - - - 
+    user-index.svg 
+    - - - - - - - - - - - - */
+    
+    &_user-index--enabled {
+      --icon-path: var(--icon__editing-structures_user-index--enabled);
+    }
+    &_user-index--hover {
+      --icon-path: var(--icon__editing-structures_user-index--hover);
+    }
+    &_user-index--active {
+      --icon-path: var(--icon__editing-structures_user-index--active);
+    }
+    &_user-index--disabled {
+      --icon-path: var(--icon__editing-structures_user-index--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    system-index.svg 
+    - - - - - - - - - - - - */
+    
+    &_system-index--enabled {
+      --icon-path: var(--icon__editing-structures_system-index--enabled);
+    }
+    &_system-index--hover {
+      --icon-path: var(--icon__editing-structures_system-index--hover);
+    }
+    &_system-index--active {
+      --icon-path: var(--icon__editing-structures_system-index--active);
+    }
+    &_system-index--disabled {
+      --icon-path: var(--icon__editing-structures_system-index--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    redundant-attribute.svg 
+    - - - - - - - - - - - - */
+    
+    &_redundant-attribute--enabled {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--enabled);
+    }
+    &_redundant-attribute--hover {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--hover);
+    }
+    &_redundant-attribute--active {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--active);
+    }
+    &_redundant-attribute--disabled {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    platforms.svg 
+    - - - - - - - - - - - - */
+    
+    &_platforms--enabled {
+      --icon-path: var(--icon__editing-structures_platforms--enabled);
+    }
+    &_platforms--hover {
+      --icon-path: var(--icon__editing-structures_platforms--hover);
+    }
+    &_platforms--active {
+      --icon-path: var(--icon__editing-structures_platforms--active);
+    }
+    &_platforms--disabled {
+      --icon-path: var(--icon__editing-structures_platforms--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    logical-attributes.svg 
+    - - - - - - - - - - - - */
+    
+    &_logical-attributes--enabled {
+      --icon-path: var(--icon__editing-structures_logical-attributes--enabled);
+    }
+    &_logical-attributes--hover {
+      --icon-path: var(--icon__editing-structures_logical-attributes--hover);
+    }
+    &_logical-attributes--active {
+      --icon-path: var(--icon__editing-structures_logical-attributes--active);
+    }
+    &_logical-attributes--disabled {
+      --icon-path: var(--icon__editing-structures_logical-attributes--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    formula-redundant.svg 
+    - - - - - - - - - - - - */
+    
+    &_formula-redundant--enabled {
+      --icon-path: var(--icon__editing-structures_formula-redundant--enabled);
+    }
+    &_formula-redundant--hover {
+      --icon-path: var(--icon__editing-structures_formula-redundant--hover);
+    }
+    &_formula-redundant--active {
+      --icon-path: var(--icon__editing-structures_formula-redundant--active);
+    }
+    &_formula-redundant--disabled {
+      --icon-path: var(--icon__editing-structures_formula-redundant--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    default.svg 
+    - - - - - - - - - - - - */
+    
+    &_default--enabled {
+      --icon-path: var(--icon__editing-structures_default--enabled);
+    }
+    &_default--hover {
+      --icon-path: var(--icon__editing-structures_default--hover);
+    }
+    &_default--active {
+      --icon-path: var(--icon__editing-structures_default--active);
+    }
+    &_default--disabled {
+      --icon-path: var(--icon__editing-structures_default--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    attribute-key.svg 
+    - - - - - - - - - - - - */
+    
+    &_attribute-key--enabled {
+      --icon-path: var(--icon__editing-structures_attribute-key--enabled);
+    }
+    &_attribute-key--hover {
+      --icon-path: var(--icon__editing-structures_attribute-key--hover);
+    }
+    &_attribute-key--active {
+      --icon-path: var(--icon__editing-structures_attribute-key--active);
+    }
+    &_attribute-key--disabled {
+      --icon-path: var(--icon__editing-structures_attribute-key--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    attribute-formula.svg 
+    - - - - - - - - - - - - */
+    
+    &_attribute-formula--enabled {
+      --icon-path: var(--icon__editing-structures_attribute-formula--enabled);
+    }
+    &_attribute-formula--hover {
+      --icon-path: var(--icon__editing-structures_attribute-formula--hover);
+    }
+    &_attribute-formula--active {
+      --icon-path: var(--icon__editing-structures_attribute-formula--active);
+    }
+    &_attribute-formula--disabled {
+      --icon-path: var(--icon__editing-structures_attribute-formula--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    attribute-description.svg 
+    - - - - - - - - - - - - */
+    
+    &_attribute-description--enabled {
+      --icon-path: var(--icon__editing-structures_attribute-description--enabled);
+    }
+    &_attribute-description--hover {
+      --icon-path: var(--icon__editing-structures_attribute-description--hover);
+    }
+    &_attribute-description--active {
+      --icon-path: var(--icon__editing-structures_attribute-description--active);
+    }
+    &_attribute-description--disabled {
+      --icon-path: var(--icon__editing-structures_attribute-description--disabled);
+    }
+
+  
+  /* =================================
+  DARK PLACEHOLDERS SELECTORS
+  ================================= */
+  
+
+    /* - - - - - - - - - - - - 
+    user-index.svg 
+    - - - - - - - - - - - - */
+    
+    &_user-index--enabled {
+      --icon-path: var(--icon__editing-structures_user-index--enabled);
+    }
+    &_user-index--hover {
+      --icon-path: var(--icon__editing-structures_user-index--hover);
+    }
+    &_user-index--active {
+      --icon-path: var(--icon__editing-structures_user-index--active);
+    }
+    &_user-index--disabled {
+      --icon-path: var(--icon__editing-structures_user-index--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    system-index.svg 
+    - - - - - - - - - - - - */
+    
+    &_system-index--enabled {
+      --icon-path: var(--icon__editing-structures_system-index--enabled);
+    }
+    &_system-index--hover {
+      --icon-path: var(--icon__editing-structures_system-index--hover);
+    }
+    &_system-index--active {
+      --icon-path: var(--icon__editing-structures_system-index--active);
+    }
+    &_system-index--disabled {
+      --icon-path: var(--icon__editing-structures_system-index--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    redundant-attribute.svg 
+    - - - - - - - - - - - - */
+    
+    &_redundant-attribute--enabled {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--enabled);
+    }
+    &_redundant-attribute--hover {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--hover);
+    }
+    &_redundant-attribute--active {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--active);
+    }
+    &_redundant-attribute--disabled {
+      --icon-path: var(--icon__editing-structures_redundant-attribute--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    platforms.svg 
+    - - - - - - - - - - - - */
+    
+    &_platforms--enabled {
+      --icon-path: var(--icon__editing-structures_platforms--enabled);
+    }
+    &_platforms--hover {
+      --icon-path: var(--icon__editing-structures_platforms--hover);
+    }
+    &_platforms--active {
+      --icon-path: var(--icon__editing-structures_platforms--active);
+    }
+    &_platforms--disabled {
+      --icon-path: var(--icon__editing-structures_platforms--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    logical-attributes.svg 
+    - - - - - - - - - - - - */
+    
+    &_logical-attributes--enabled {
+      --icon-path: var(--icon__editing-structures_logical-attributes--enabled);
+    }
+    &_logical-attributes--hover {
+      --icon-path: var(--icon__editing-structures_logical-attributes--hover);
+    }
+    &_logical-attributes--active {
+      --icon-path: var(--icon__editing-structures_logical-attributes--active);
+    }
+    &_logical-attributes--disabled {
+      --icon-path: var(--icon__editing-structures_logical-attributes--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    formula-redundant.svg 
+    - - - - - - - - - - - - */
+    
+    &_formula-redundant--enabled {
+      --icon-path: var(--icon__editing-structures_formula-redundant--enabled);
+    }
+    &_formula-redundant--hover {
+      --icon-path: var(--icon__editing-structures_formula-redundant--hover);
+    }
+    &_formula-redundant--active {
+      --icon-path: var(--icon__editing-structures_formula-redundant--active);
+    }
+    &_formula-redundant--disabled {
+      --icon-path: var(--icon__editing-structures_formula-redundant--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    default.svg 
+    - - - - - - - - - - - - */
+    
+    &_default--enabled {
+      --icon-path: var(--icon__editing-structures_default--enabled);
+    }
+    &_default--hover {
+      --icon-path: var(--icon__editing-structures_default--hover);
+    }
+    &_default--active {
+      --icon-path: var(--icon__editing-structures_default--active);
+    }
+    &_default--disabled {
+      --icon-path: var(--icon__editing-structures_default--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    attribute-key.svg 
+    - - - - - - - - - - - - */
+    
+    &_attribute-key--enabled {
+      --icon-path: var(--icon__editing-structures_attribute-key--enabled);
+    }
+    &_attribute-key--hover {
+      --icon-path: var(--icon__editing-structures_attribute-key--hover);
+    }
+    &_attribute-key--active {
+      --icon-path: var(--icon__editing-structures_attribute-key--active);
+    }
+    &_attribute-key--disabled {
+      --icon-path: var(--icon__editing-structures_attribute-key--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    attribute-formula.svg 
+    - - - - - - - - - - - - */
+    
+    &_attribute-formula--enabled {
+      --icon-path: var(--icon__editing-structures_attribute-formula--enabled);
+    }
+    &_attribute-formula--hover {
+      --icon-path: var(--icon__editing-structures_attribute-formula--hover);
+    }
+    &_attribute-formula--active {
+      --icon-path: var(--icon__editing-structures_attribute-formula--active);
+    }
+    &_attribute-formula--disabled {
+      --icon-path: var(--icon__editing-structures_attribute-formula--disabled);
+    }
+
+    /* - - - - - - - - - - - - 
+    attribute-description.svg 
+    - - - - - - - - - - - - */
+    
+    &_attribute-description--enabled {
+      --icon-path: var(--icon__editing-structures_attribute-description--enabled);
+    }
+    &_attribute-description--hover {
+      --icon-path: var(--icon__editing-structures_attribute-description--hover);
+    }
+    &_attribute-description--active {
+      --icon-path: var(--icon__editing-structures_attribute-description--active);
+    }
+    &_attribute-description--disabled {
+      --icon-path: var(--icon__editing-structures_attribute-description--disabled);
+    }
+  
+    }
+  
+
 /*monochrome lists*/
 
   
@@ -25233,6 +25820,9 @@ MULTICOLOR CONSTRUCTS
     @if $icon-classes {
       @include icon-mask();
       @include icon-background();
+      @include icon-size-sm();
+      @include icon-size-md();
+
       @include form-input-icon();
       @include form-input-bg-x-rtl-support();
     }
@@ -25240,6 +25830,7 @@ MULTICOLOR CONSTRUCTS
     // Layout classes
     @if $layout-classes {
       @include layout();
+      @include control-footer();
     }
   }