@genexus/genexus-ide-ui 0.0.79 → 0.0.81

package/dist/collection/components/ai-assistant/ai-message.css

@@ -6,10 +6,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 */
 /*--- Messages ---*/
 .message {
-  --user-bg-color: #242d36;
-  --ai-error-bg-color: #272124;
-  --ai-error-border-color: #a3585e;
-  --ai-message-error-color: var(--color-error-dark);
+  color: var(--ai-message-all_color);
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 100ms;
@@ -20,14 +17,14 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: hidden;
 }
 .message__inner-wrapper {
-  padding: var(--spacing-comp-01) var(--spacing-comp-02);
-  border-radius: var(--border-radius-sm);
-  border: var(--border-width-sm) solid transparent;
-  background-color: var(--gray-12);
-  margin-block-start: var(--spacing-comp-02);
+  padding: var(--ai-message-all_padding);
+  border-radius: var(--ai-message-all_border-radius);
+  border: var(--ai-message-all_border-width) solid transparent;
+  background-color: var(--ai-message-base-background-color);
+  margin-block-start: var(--ai-message-all_margin-block-start);
 }
 .message__caption {
-  font-size: var(--mc-font-size-xxs);
+  font-size: var(--ai-message-all_font-size);
   line-height: 1.6em;
   position: relative;
 }
@@ -48,16 +45,19 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   /* Standard syntax */
 }
 .message--user .message__inner-wrapper {
-  background-color: var(--user-bg-color);
+  background-color: var(--ai-message-user_background-color);
 }
 .message--assistant-action .message__inner-wrapper {
   font-style: italic;
 }
+.message--assistant-in-progress {
+  color: var(--ai-message-ai-in-progress_color);
+}
 .message--assistant-in-progress .message__inner-wrapper {
   font-style: italic;
   display: grid;
   grid-template-columns: 1fr auto;
-  gap: var(--spacing-comp-02);
+  gap: var(--ai-message-in-progress-gap);
 }
 .message--assistant-in-progress .message__inner-wrapper .message__caption {
   overflow: hidden;
@@ -69,8 +69,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   flex: none;
 }
 .message--assistant-error .message__inner-wrapper {
-  background-color: var(--ai-error-bg-color);
-  border-color: var(--ai-error-border-color);
+  background-color: var(--ai-message-ai-error_background-color);
+  border-color: var(--ai-message-ai-error_border-color);
 }
 .message--copyable {
   cursor: pointer;
@@ -100,8 +100,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   width: 5px;
   height: 5px;
   border-radius: 2.5px;
-  background-color: var(--gray-03);
-  color: var(--gray-03);
+  background-color: var(--ai-dot_color);
+  color: var(--ai-dot_color);
   box-shadow: 9999px 0 0 -5px;
   animation: dot-pulse 1.5s infinite linear;
   animation-delay: 0.25s;
@@ -114,8 +114,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   width: 5px;
   height: 5px;
   border-radius: 2.5px;
-  background-color: var(--gray-03);
-  color: var(--gray-03);
+  background-color: var(--ai-dot_color);
+  color: var(--ai-dot_color);
 }
 .dot-pulse::before {
   box-shadow: 9984px 0 0 -5px;
@@ -169,9 +169,9 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-on-background);
+  color: var(--ai-copy_color);
   display: flex;
-  gap: var(--spacing-comp-01);
+  gap: var(--ai-copy_gap);
 }
 
 .hiChar {

package/dist/collection/components/bpm-application-declaration/bpm-app-declaration.css

@@ -40,6 +40,21 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: auto;
 }
 
+.justify-start {
+  display: flex;
+  justify-content: start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: end;
+}
+
 /* Grids */
 .grid {
   display: grid;

package/dist/collection/components/create-kb-from-server/create-kb-from-server.css

@@ -40,6 +40,21 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: auto;
 }
 
+.justify-start {
+  display: flex;
+  justify-content: start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: end;
+}
+
 /* Grids */
 .grid {
   display: grid;

package/dist/collection/components/dashboard-home/dashboard-home.css

@@ -0,0 +1,300 @@
+/*Gemini*/
+/*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.justify-start {
+  display: flex;
+  justify-content: start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
+:host {
+  display: block;
+  height: 100%;
+  overflow: auto;
+}
+
+:host,
+.gx-ide-main-wrapper,
+.grid--basic,
+.project,
+.recent-objects {
+  height: 100%;
+  overflow: auto;
+}
+
+.kb {
+  grid-area: kb;
+  align-self: center;
+}
+.kb .version-pill {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kb .kb-detail {
+  flex-wrap: wrap;
+  margin-block-start: var(--spacing-comp-04);
+  gap: var(--spacing-comp-04);
+}
+.kb .kb-detail .display-inline {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.environment {
+  grid-area: environment;
+}
+.environment gxg-title-editable {
+  margin-block-end: var(--gx-ide-cards-vertical-spacing);
+}
+.environment .grid--environments {
+  flex-grow: 1;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.environment .grid--environments .align-center {
+  gap: var(--spacing-comp-01);
+}
+.environment .grid--environments .front-end {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-cards-vertical-spacing);
+}
+
+.project {
+  grid-area: project;
+}
+.project .project-buttons {
+  margin-block-start: var(--spacing-comp-04);
+  gap: var(--spacing-comp-04);
+}
+.project gxg-form-textarea::part(textarea) {
+  width: 100%;
+  background-color: transparent;
+  line-height: var(--line-height-default);
+  font-size: var(--mc-font-size-xs);
+}
+
+.recent-objects {
+  grid-area: recent-objects;
+}
+.recent-objects .recent-objects-card {
+  margin-block-end: var(--gx-ide-cards-vertical-spacing);
+}
+.recent-objects .recent-objects-card:last-child {
+  margin-block-end: 0;
+}
+.recent-objects .recent-objects-card .grid--recent-objects {
+  flex-grow: 1;
+  grid-template-columns: 1fr 10fr 12fr 1fr;
+  gap: var(--gx-ide-cards-horizontal-spacing);
+  height: 100%;
+}
+.recent-objects .recent-objects-card .grid--recent-objects .obj-name {
+  color: var(--gray-06);
+}
+
+.grid--basic {
+  flex-grow: 1;
+  grid-template-columns: 1.12fr 1fr;
+  gap: var(--spacing-comp-06);
+  grid-template-areas: "kb environment" "project recent-objects";
+  grid-template-rows: auto 1fr;
+}
+
+gxg-title-editable {
+  width: 100%;
+}
+
+gx-ide-card {
+  height: 100%;
+}