@genexus/mercury 0.2.0 → 0.3.0

package/dist/mercury.scss

@@ -1540,7 +1540,6 @@ Dialog Footer
 
 %heading-base {
   font-family: var(--mer-font-family--title);
-  color: var(--mer-color__neutral-gray--100);
   line-height: var(--mer-line-height--tight);
 }
 
@@ -1580,6 +1579,13 @@ Dialog Footer
   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);
@@ -1619,46 +1625,52 @@ Dialog Footer
 }
 
 /// @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;
   }
@@ -1668,7 +1680,6 @@ Dialog Footer
 
 %layout {
   display: grid;
-  grid-template-rows: 1fr;
   padding-block: var(--mer-spacing--md);
   padding-inline: var(--mer-spacing--lg);
   gap: var(--mer-spacing--md);
@@ -1678,26 +1689,35 @@ Dialog Footer
   }
 
   &--cols-1 {
+    // Do not add this property in the base class. Otherwise, putting this
+    // class in the Host of the component will override any grid-template
+    // property inside the Shadow DOM due to specificity
+    grid-template-rows: 1fr;
     grid-template-columns: 1fr;
   }
 
   &--cols-2 {
+    grid-template-rows: 1fr;
     grid-template-columns: repeat(2, 1fr);
   }
 
   &--cols-3 {
+    grid-template-rows: 1fr;
     grid-template-columns: repeat(3, 1fr);
   }
 
   &--cols-4 {
+    grid-template-rows: 1fr;
     grid-template-columns: repeat(4, 1fr);
   }
 
   &--cols-1-2 {
+    grid-template-rows: 1fr;
     grid-template-columns: 1fr 2fr;
   }
 
   &--cols-2-1 {
+    grid-template-rows: 1fr;
     grid-template-columns: 2fr 1fr;
   }
 }
@@ -2104,9 +2124,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,
 ); 
 
 /* - - - - - - - - - - - - - - - - - - 
@@ -2597,6 +2621,7 @@ MULTICOLOR CONSTRUCTS
 
   &__caption {
     @extend %heading-5;
+    @extend %heading__color--highlighted;
     word-break: break-word;
   }
 
@@ -7152,6 +7177,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*/
 
   

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
+  "module": "dist/assets-manager.js",
+  "types": "dist/assets-manager.d.ts",
   "files": [
     "dist/"
   ],
   "type": "module",
   "scripts": {
-    "build": "npm run icons-svg && npm run icons-sass && npm run build.scss && npm run copy-tasks && npm run showcase.scss",
+    "build": "tsc && npm run icons-svg && npm run icons-sass && npm run build.scss && npm run copy-tasks && npm run showcase.scss",
     "build-no-svg": "npm run build.scss && npm run copy-tasks",
     "build.scss": "scss-bundle -e ./src/mercury.scss -o dist/mercury.scss && sass test/test.scss dist/css/mercury.css",
     "test": "sass test/test.scss  test/mercury.css",
     "validate.ci": "npm run build-no-svg",
-    "icons-svg": "ssg-svg --srcDir=src/icons/svg-source --outDir=src/assets/icons/_generated/ --configFilePath=src/icons/svg-source/.config/color-states.json --showcaseDir=showcase/icons/ --showcaseBaseHref=../assets/icons/ --logDir=./log --objectFilePath=src/assets/MERCURY_ASSETS.js",
+    "icons-svg": "ssg-svg --srcDir=src/icons/svg-source --outDir=src/assets/icons/_generated/ --configFilePath=src/icons/svg-source/.config/color-states.json --showcaseDir=showcase/icons/ --showcaseBaseHref=../assets/icons/ --logDir=./log --objectFilePath=src/assets/MERCURY_ASSETS.ts",
     "icons-sass": "ssg-sass src/assets/icons/ src/icons/_generated/ src/icons/svg-source/.config/color-states.json",
     "watch:sass": "chokidar src/**/*.scss ../common/**/*.scss -c \"npm run build.scss\"",
     "copy-tasks": "node copy-tasks.js",
@@ -22,11 +24,12 @@
   "license": "MIT",
   "devDependencies": {
     "@atao60/fse-cli": "^0.1.9",
+    "@genexus/svg-sass-generator": "1.1.15",
     "chokidar": "^3.6.0",
     "chokidar-cli": "^3.0.0",
     "sass": "~1.72.0",
     "scss-bundle": "~3.1.2",
-    "@genexus/svg-sass-generator": "1.1.15"
+    "typescript": "~5.5.3"
   },
   "engines": {
     "pnpm": ">=3"