@genexus/mercury 0.1.18 → 0.1.20

package/dist/mercury.scss

@@ -141,7 +141,6 @@
   }
 }
 
-
 /*----------------------
 Focus
 ----------------------*/
@@ -560,11 +559,9 @@ Window
 
 @mixin font() {
   // families
-  --mer-font-family--inter-light: "Inter_Light", arial, sans-serif; // 300
-  --mer-font-family--inter-regular: "Inter_Regular", arial, sans-serif; // 400
-  --mer-font-family--inter-semi-bold: "Inter_SemiBold", arial, sans-serif; // 600
-  --mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif; // 700
-  --mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif; // 800
+  --mer-font-family--title: Inter, Helvetica, Arial, sans-serif;
+  --mer-font-family--body: Inter, Helvetica, Arial, sans-serif;
+  --mer-font-family--code: monospace;
 
   // weights
   --mer-font__weight--light: 300;
@@ -720,8 +717,10 @@ Window
   --mer-body__bg-color: var(--mer-color__surface);
   --mer-body__color: var(--mer-text__on-surface);
   --mer-body__font-size: var(--mer-font__size--2xs);
-  --mer-body__font-family: var(--mer-font-family--inter-regular);
-  --mer-body__line-height: var(--mer-line-height--regular);
+  --mer-body__font-family: var(--mer-font-family--body);
+  --mer-body__font-weight: var(--mer-font__weight--regular);
+  --mer-body__line-height: var(--mer-line-height--comfortable);
+  --mer-body__margin-block: var(--mer-spacing--sm);
 
   /*----------------------
   System
@@ -1321,6 +1320,67 @@ Window
   }
 }
 
+%fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mer-spacing--md);
+  border: none;
+
+  &__legend {
+    @extend %heading-6;
+    margin-block-end: var(--mer-spacing--md);
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+
+    &--row {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &--row {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+/// @group Fieldset
+/// @param {String} $fieldset-selector [".fieldset"] -
+/// @param {String} $legend-selector [".fieldset-legend"] -
+/// @param {String} $fieldset-group-selector [".fieldset-group"] -
+/// @param {String} $fieldset-group-orientation--row-selector [".fieldset-group--row"] -
+/// @param {String} $fieldset-orientation--row-selector [".fieldset--row"] -
+@mixin fieldset(
+  $fieldset-selector: ".fieldset",
+  $legend-selector: ".fieldset-legend",
+  $fieldset-group-selector: ".fieldset-group",
+  $fieldset-group-orientation--row-selector: ".fieldset-group--row",
+  $fieldset-orientation--row-selector: ".fieldset--row"
+) {
+  #{$fieldset-selector} {
+    @extend %fieldset;
+  }
+
+  #{$legend-selector} {
+    @extend %fieldset__legend;
+  }
+
+  #{$fieldset-group-selector} {
+    @extend %fieldset__group;
+  }
+
+  #{$fieldset-group-orientation--row-selector} {
+    @extend %fieldset__group--row;
+  }
+
+  #{$fieldset-orientation--row-selector} {
+    @extend %fieldset--row;
+  }
+}
+
 // - - - - - - - - - - - - - - - - - - - -
 //              Icon Path
 // - - - - - - - - - - - - - - - - - - - -
@@ -1429,65 +1489,128 @@ Window
   );
 }
 
+%heading-base {
+  font-family: var(--mer-font-family--title);
+  color: var(--mer-color__neutral-gray--100);
+  line-height: var(--mer-line-height--tight);
+}
+
 %heading-1 {
-  font-weight: 700;
-  font-size: 28px;
-  line-height: 32px; // 114.286%
-  letter-spacing: 0.4px;
+  @extend %heading-base;
+  font-size: 36px; //TODO (Update with token, or add token)
+  font-weight: var(--mer-font__weight--bold);
 }
 
 %heading-2 {
-  font-weight: 700;
-  font-size: 22px;
-  line-height: 24px; // 109.091%
-  letter-spacing: 0.8px;
+  @extend %heading-base;
+  font-size: var(--mer-font__size--lg); // 24px
+  font-weight: var(--mer-font__weight--bold);
 }
 
 %heading-3 {
-  // WA. This is not the heading 3 definition from Unanimo
-  font-size: 18px;
-  line-height: 20px; // 109.091%
-  letter-spacing: 0.4px;
+  @extend %heading-base;
+  font-size: 20px; //TODO (Update with token, or add token)
+  font-weight: var(--mer-font__weight--bold);
 }
 
 %heading-4 {
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 18px; // 128.571%
-  letter-spacing: 0.4px;
+  @extend %heading-base;
+  font-size: var(--mer-font__size--md); // 20px
+  font-weight: var(--mer-font__weight--bold);
+}
+
+%heading-5 {
+  @extend %heading-base;
+  font-size: 14px; //TODO (Update with token, or add token)
+  font-weight: var(--mer-font__weight--bold);
+}
+
+%heading-6 {
+  @extend %heading-base;
+  font-size: var(--mer-font__size--sm); // 16px
+  font-weight: var(--mer-font__weight--semi-bold);
 }
 
 %text-body {
-  font-size: var(--mer-font__size--xs);
-  font-family: var(--mer-font-family--inter-regular);
-  line-height: var(--mer-line-height--regular);
-  margin-block: var(--mer-spacing--sm);
+  font-size: var(--mer-font__size--xs); // 14px
+  font-family: var(--mer-body__font-family);
+  font-weight: var(--mer-body__font-weight);
+  line-height: var(--mer-body__line-height);
+  margin-block: var(--mer-body__margin-block);
 }
 
+// tab
 %tab-text {
   font-family: var(--mer-font-family--inter-regular);
   font-size: var(--mer-font__size--2xs);
   line-height: var(--mer-font-family--inter-regular);
 }
 
-@mixin typography-classes() {
-  .heading-1 {
+// button
+%button-text {
+  font-family: var(--mer-font-family--body);
+  font-size: var(--mer-font__size--2xs);
+  line-height: var(--mer-line-height--regular);
+}
+
+%button-text--regular {
+  @extend %button-text;
+  font-weight: var(--mer-font__weight--semi-bold);
+}
+
+%button-text--light {
+  @extend %button-text;
+  font-weight: var(--mer-font__weight--semi-regular);
+}
+
+// tooltip
+%tooltip-text {
+  font-family: var(--mer-font-family--body);
+  font-size: var(--mer-font-size--2xs);
+}
+
+/// @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"] -
+@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",
+  $text-body-selector: ".text-body"
+) {
+  #{$heading--1-selector} {
     @extend %heading-1;
   }
 
-  .heading-2 {
+  #{$heading--2-selector} {
     @extend %heading-2;
   }
 
-  .heading-3 {
+  #{$heading--3-selector} {
     @extend %heading-3;
   }
 
-  .heading-4 {
+  #{$heading--4-selector} {
     @extend %heading-4;
   }
 
-  .text-body {
+  #{$heading--5-selector} {
+    @extend %heading-5;
+  }
+
+  #{$heading--6-selector} {
+    @extend %heading-6;
+  }
+
+  #{$text-body-selector} {
     @extend %text-body;
   }
 }
@@ -1771,28 +1894,28 @@ Window
 
 // This mixins processes icons for the tree view action start part.
 @mixin tree-view-icons(
-  $icons-list,
-  $icons-list-name,
+  $icons-in-category,
+  $category-name,
   $tree-view-selector: ".tree-view"
 ) {
-  @each $icon in $icons-list {
-    $icon-part-name: #{$icons-list-name}-#{$icon};
+  @each $icon in $icons-in-category {
+    $icon-part-name: #{$category-name}-#{$icon};
     //enabled
-    $icon-variable: var(--icon__#{$icons-list-name}_#{$icon}--enabled);
+    $icon-variable: var(--icon__#{$category-name}_#{$icon}--enabled);
     $enabled-selector: "#{$tree-view-selector}::part(item__action #{$icon-part-name})";
     @include tree-view-item__action-icon(
       $item__action-with-icon-selector: $enabled-selector,
       $icon-path: $icon-variable
     );
     //hover
-    $icon-variable: var(--icon__#{$icons-list-name}_#{$icon}--hover);
+    $icon-variable: var(--icon__#{$category-name}_#{$icon}--hover);
     $hover-selector: "#{$tree-view-selector}::part(item__action #{$icon-part-name}):hover";
     @include tree-view-item__action-icon(
       $item__action-with-icon-selector: $hover-selector,
       $icon-path: $icon-variable
     );
     //active
-    $icon-variable: var(--icon__#{$icons-list-name}_#{$icon}--active);
+    $icon-variable: var(--icon__#{$category-name}_#{$icon}--active);
     $active-selector: "#{$tree-view-selector}::part(item__action #{$icon-part-name}):active";
     @include tree-view-item__action-icon(
       $item__action-with-icon-selector: $active-selector,
@@ -1801,60 +1924,58 @@ Window
   }
 }
 
-
-
-/* - - - - - - - - - - - - - - - - - - 
-MONOCHROME CONSTRUCTS
-- - - - - - - - - - - - - - - - - - */
+/* - - - - - - - - - - - - - - - -
+ Monochrome Categories and Colors
+ - - - - - - - - - - - - - - - - -*/
 
 $monochrome-colors: (
- on-surface: (
-   enabled,
-   hover,
-   active,
-   disabled
+  on-surface: (
+    enabled,
+    hover,
+    active,
+    disabled
  ),
- on-primary: (
-   enabled,
-   hover,
-   active,
-   disabled
+  on-primary: (
+    enabled,
+    hover,
+    active,
+    disabled
  ),
- on-disabled: (
-   enabled,
+  on-disabled: (
+    enabled,
  ),
- on-message: (
-   enabled,
+  on-message: (
+    enabled,
  ),
- on-elevation: (
-   enabled,
+  on-elevation: (
+    enabled,
  ),
- primary: (
-   enabled,
-   hover,
-   active,
-   disabled
+  primary: (
+    enabled,
+    hover,
+    active,
+    disabled
  ),
- error: (
-   enabled,
+  error: (
+    enabled,
  ),
- warning: (
-   enabled,
+  warning: (
+    enabled,
  ),
- success: (
-   enabled,
+  success: (
+    enabled,
  ),
- neutral: (
-   enabled,
-   hover,
-   active,
-   disabled
+  neutral: (
+    enabled,
+    hover,
+    active,
+    disabled
  ),
- highlighted: (
-   enabled,
+  highlighted: (
+    enabled,
  ),
- bright: (
-   enabled,
+  bright: (
+    enabled,
  )
 );
 
@@ -1905,6 +2026,44 @@ $monochrome-categories: (
  )
 );
 
+/* - - - - - - - - - - - 
+Monochrome lists
+- - - - - - - - - - - */
+ 
+// windows-tools
+$windows-tools: workflow, workflow-settings, work-with-attributes, watch, toolbox, teamdev, services, roles, rol, responsive-sizes, references, properties, preferences, performance-test-objects, output, logout, last-changes-view, kb-explorer, indexer-monitor, history, genexus-cloud, frontend, filter, filter-conditions, error-list, debugx, datastores, category-groups, breakpoints, backend, alphabetical-order;
+ 
+// navigation
+$navigation: pill-outlined, pill-filled, level-up, level-down, gx-arrow-right, drag, chevron-up, chevron-right, chevron-left, chevron-down, bullet, arrow-up, arrow-right, arrow-left, arrow-down, arrow-down-skyblue;
+ 
+// menus
+$menus: undo, undo-close-object, save, save-all, run, redo, properties, paste, open-object, new-object, find, delete, cut, create-database-tables, copy, cancel-build, build, build-all;
+ 
+// gemini-tools
+$gemini-tools: warning, success, show-more-vertical, show-more-horizontal, share, settings, search, reset, read-only, open-window, notice, more-info, minus, minus-circle, list-view, folder, flow-arrow, file, error, edit, edit-wand, duplicate, download, deleted, delete, data-provider, copy, copy-to-clipboard, color-picker, close, category-ungroup, category-group, card-view, add, add-circle;
+
+$all-monochrome-lists: (
+  windows-tools: $windows-tools,
+  navigation: $navigation,
+  menus: $menus,
+  gemini-tools: $gemini-tools,
+);
+
+/* - - - - - - - - - - - 
+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;
+
+$all-multicolor-lists: (
+  objects: $objects,
+); 
+
+/* - - - - - - - - - - - - - - - - - - 
+MONOCHROME CONSTRUCTS
+- - - - - - - - - - - - - - - - - - */
+
 // functions for monochrome or multicolor:
 @function category-is-excluded($category, $categories-list) {
   @return index($category, $categories-list) != null;
@@ -1925,7 +2084,6 @@ $monochrome-categories: (
   @return $multicolorStates;
 }
 
-
 @mixin generate-monochrome-icons-selectors(
   $all-monochrome-lists,
   $css-prefix: "icon",
@@ -4586,7 +4744,6 @@ MULTICOLOR CONSTRUCTS
 
   }
   
-   $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;
     %icon__objects {
   
 
@@ -8205,7 +8362,6 @@ MULTICOLOR CONSTRUCTS
 
   }
   
-   $windows-tools: workflow, workflow-settings, work-with-attributes, watch, toolbox, teamdev, services, roles, rol, responsive-sizes, references, properties, preferences, performance-test-objects, output, logout, last-changes-view, kb-explorer, indexer-monitor, history, genexus-cloud, frontend, filter, filter-conditions, error-list, debugx, datastores, category-groups, breakpoints, backend, alphabetical-order;
     %icon__windows-tools {
   
 
@@ -13130,7 +13286,6 @@ MULTICOLOR CONSTRUCTS
 
   }
   
-   $navigation: pill-outlined, pill-filled, level-up, level-down, gx-arrow-right, drag, chevron-up, chevron-right, chevron-left, chevron-down, bullet, arrow-up, arrow-right, arrow-left, arrow-down, arrow-down-skyblue;
     %icon__navigation {
   
 
@@ -16099,7 +16254,6 @@ MULTICOLOR CONSTRUCTS
 
   }
   
-   $menus: undo, undo-close-object, save, save-all, run, redo, properties, paste, open-object, new-object, find, delete, cut, create-database-tables, copy, cancel-build, build, build-all;
     %icon__menus {
   
 
@@ -20054,7 +20208,6 @@ MULTICOLOR CONSTRUCTS
 
   }
   
-   $gemini-tools: warning, success, show-more-vertical, show-more-horizontal, share, settings, search, reset, read-only, open-window, notice, more-info, minus, minus-circle, list-view, folder, flow-arrow, file, error, edit, edit-wand, duplicate, download, deleted, delete, data-provider, copy, copy-to-clipboard, color-picker, close, category-ungroup, category-group, card-view, add, add-circle;
     %icon__gemini-tools {
   
 
@@ -24832,17 +24985,6 @@ MULTICOLOR CONSTRUCTS
     }
   
 
-$all-multicolor-lists: ( 
-objects: $objects,
-);
-
-$all-monochrome-lists: ( 
-windows-tools: $windows-tools, 
-navigation: $navigation, 
-menus: $menus, 
-gemini-tools: $gemini-tools,
-);
-
   // - - - - - - - - - - - - - - - - - - - -
   //              Typography
   // - - - - - - - - - - - - - - - - - - - -
@@ -24850,37 +24992,42 @@ gemini-tools: $gemini-tools,
   @if $font-face {
     //light
     @font-face {
-      font-family: Inter_Light; // 300
+      font-family: "Inter";
       src: url("#{$font-face-path}Inter_Light.woff2");
-      font-display: swap;
+      font-weight: 300;
+      font-style: normal;
     }
 
     //regular
     @font-face {
-      font-family: Inter_Regular; // 400
+      font-family: "Inter";
       src: url("#{$font-face-path}Inter_Regular.woff2");
-      font-display: swap;
+      font-weight: 400;
+      font-style: normal;
     }
 
     //semi-bold
     @font-face {
-      font-family: Inter_SemiBold; // 600
+      font-family: "Inter";
       src: url("#{$font-face-path}Inter_SemiBold.woff2");
-      font-display: swap;
+      font-weight: 600;
+      font-style: normal;
     }
 
     //bold
     @font-face {
-      font-family: Inter_Bold; // 700
+      font-family: "Inter";
       src: url("#{$font-face-path}Inter_Bold.woff2");
-      font-display: swap;
+      font-weight: 700;
+      font-style: normal;
     }
 
     //extra-bold
     @font-face {
-      font-family: Inter_ExtraBold; // 800
+      font-family: "Inter";
       src: url("#{$font-face-path}Inter_ExtraBold.woff2");
-      font-display: swap;
+      font-weight: 800;
+      font-style: normal;
     }
   }
 
@@ -25010,11 +25157,13 @@ gemini-tools: $gemini-tools,
       }
 
       @if $font {
-        line-height: var(--mer-line-height--regular);
+        line-height: var(--mer-body__line-height);
       }
 
       @if $font-face {
-        font-family: Inter_Regular;
+        font-family: var(--mer-body__font-family);
+        font-size: var(--mer-body__font-size);
+        font-weight: var(--mer-body__font-weight);
       }
     }
   }
@@ -25077,6 +25226,7 @@ gemini-tools: $gemini-tools,
     // Form control classes
     @if $form-controls-classes {
       @include form-input();
+      @include fieldset();
     }
 
     // Icon classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "files": [
@@ -13,7 +13,7 @@
     "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 src/icons/svg-source src/assets/icons/_generated/ src/icons/svg-source/.config/color-states.json showcase/icons/ ./log ../assets/icons/",
+    "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-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",
@@ -26,7 +26,7 @@
     "chokidar-cli": "^3.0.0",
     "sass": "~1.72.0",
     "scss-bundle": "~3.1.2",
-    "@genexus/svg-sass-generator": "1.1.11"
+    "@genexus/svg-sass-generator": "1.1.13"
   },
   "engines": {
     "pnpm": ">=3"