@genexus/genexus-ide-ui 1.0.0 → 1.0.2

package/dist/collection/components/bpm/export-xpdl/bpm-export-xpdl.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/import-files/bpm-import-files.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/import-gxpm/bpm-import-gxpm.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/objects-selector/bpm-objects-selector.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/timer-duration/bpm-timer-duration.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles