@genexus/mercury 0.0.2

package/src/base/button/_styles-2.scss

@@ -0,0 +1,275 @@
+%button-base {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  justify-content: center;
+  gap: var(--spacing-un-spacing--s); // Used when the button has icons
+  min-block-size: var(--button__height);
+  font-family: var(--button__font-family);
+  font-size: var(--button__font-size);
+  line-height: 18px; // 128.571%
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
+}
+
+%button-primary {
+  @extend %button-base;
+  background-color: var(--accents-un-accent__primary);
+  border-radius: var(--border-radius-un-border__radius--s);
+  color: var(--text-un-text__on-primary);
+  padding-inline: var(--spacing-un-spacing--xl);
+
+  &--focus-visible {
+    @include focus-style();
+  }
+
+  &--hover {
+    background-color: var(--accents-un-accent__primary--hover);
+  }
+
+  &--active {
+    background-color: var(--accents-un-accent__primary--active);
+  }
+
+  &--disabled {
+    background-color: var(--accents-un-accent__disabled);
+    color: var(--text-un-text__on-disabled);
+  }
+
+  &--error {
+    background: var(--accents-un-accent__destructive);
+  }
+}
+
+%button-secondary {
+  @extend %button-base;
+  border: var(--border-radius-un-border__radius--xs) solid
+    var(--borders-un-border-color__primary);
+  border-radius: var(--border-radius-un-border__radius--s);
+  color: var(--text-un-text__primary);
+  padding-inline: var(--spacing-un-spacing--xl);
+
+  &--focus-visible {
+    @include focus-style();
+  }
+
+  &--hover {
+    background-color: var(--accents-un-accent__primary-dim--hover);
+    border-color: var(--borders-un-border-color__primary--hover);
+    color: var(--text-un-text__primary--hover);
+  }
+
+  &--active {
+    color: var(--text-un-text__primary--active);
+    border-color: var(--borders-un-border-color__primary--active);
+  }
+
+  &--disabled {
+    border-color: var(--borders-un-border-color__disabled);
+    color: var(--text-un-text__on-disabled);
+  }
+
+  &--error {
+    border-color: var(--borders-un-border-color__destructive);
+    color: var(--text-un-text__destructive);
+  }
+}
+
+%button-tertiary {
+  @extend %button-base;
+  color: var(--text-un-text__primary);
+  padding-inline: var(--spacing-un-spacing--l);
+
+  &--focus-visible {
+    @include focus-style($outline: true);
+  }
+
+  &--hover {
+    background-color: var(--accents-un-accent__primary-dim--hover);
+    color: var(--text-un-text__primary--hover);
+  }
+
+  &--active {
+    color: var(--text-un-text__primary--active);
+  }
+
+  &--disabled {
+    color: var(--text-un-text__on-disabled);
+  }
+
+  &--error {
+    color: var(--text-un-text__destructive);
+  }
+}
+
+%button-icon {
+  content: "";
+  display: block;
+  inline-size: var(--spacing-un-spacing--xl);
+  block-size: var(--spacing-un-spacing--xl);
+  -webkit-mask: var(--ch-button-icon) 50% 50% / 100% 100% no-repeat;
+  background-color: currentColor;
+}
+
+%button-icon-only {
+  padding-inline: var(--spacing-un-spacing--s);
+}
+
+%button-icon-and-text,
+%button-icon-after-and-text {
+  padding-inline: var(--spacing-un-spacing--l);
+}
+
+%button-icon-after-and-text--before {
+  order: 1;
+}
+
+%text-link {
+  color: var(--link-un-link__font-color);
+  font-size: 14px;
+  line-height: 18px; // 128.571%
+  letter-spacing: 0.4px;
+  text-decoration-line: underline;
+}
+
+@mixin button-primary(
+  $selector: ".button-primary",
+  $add--disabled: true,
+  $add--error: true
+) {
+  #{$selector} {
+    @extend %button-primary;
+
+    &:focus-visible {
+      @extend %button-primary--focus-visible;
+    }
+
+    &:hover {
+      @extend %button-primary--hover;
+    }
+
+    &:active {
+      @extend %button-primary--active;
+    }
+
+    @if $add--disabled == true {
+      &:disabled,
+      &--disabled {
+        @extend %button-primary--disabled;
+      }
+    }
+
+    @if $add--error == true {
+      &--error {
+        @extend %button-primary--error;
+      }
+    }
+  }
+}
+
+@mixin button-secondary(
+  $selector: ".button-secondary",
+  $add--disabled: true,
+  $add--error: true
+) {
+  #{$selector} {
+    @extend %button-secondary;
+
+    &:focus-visible {
+      @extend %button-secondary--focus-visible;
+    }
+
+    &:hover {
+      @extend %button-secondary--hover;
+    }
+
+    &:active {
+      @extend %button-secondary--active;
+    }
+
+    @if $add--disabled == true {
+      &:disabled,
+      &--disabled {
+        @extend %button-secondary--disabled;
+      }
+    }
+
+    @if $add--error == true {
+      &--error {
+        @extend %button-secondary--error;
+      }
+    }
+  }
+}
+
+@mixin button-tertiary(
+  $selector: ".button-tertiary",
+  $add--disabled: true,
+  $add--error: true
+) {
+  #{$selector} {
+    @extend %button-tertiary;
+
+    &:focus-visible {
+      @extend %button-tertiary--focus-visible;
+    }
+
+    &:hover {
+      @extend %button-tertiary--hover;
+    }
+
+    &:active {
+      @extend %button-tertiary--active;
+    }
+
+    @if $add--disabled == true {
+      &:disabled,
+      &--disabled {
+        @extend %button-tertiary--disabled;
+      }
+    }
+
+    @if $add--error == true {
+      &--error {
+        @extend %button-tertiary--error;
+      }
+    }
+  }
+}
+
+@mixin button-classes() {
+  // Button primary
+  @include button-primary();
+
+  // Button secondary
+  @include button-secondary();
+
+  // Button tertiary
+  @include button-tertiary();
+
+  // Button with icon
+  .button-icon-only::before,
+  .button-icon-and-text::before,
+  .button-icon-after-and-text::before {
+    @extend %button-icon;
+  }
+
+  .button-icon-only {
+    @extend %button-icon-only;
+  }
+
+  .button-icon-and-text,
+  .button-icon-after-and-text {
+    @extend %button-icon-and-text;
+  }
+
+  .button-icon-after-and-text::before {
+    @extend %button-icon-after-and-text--before;
+  }
+}
+
+@mixin hyperlink() {
+  .text-link {
+    @extend %text-link;
+  }
+}

package/src/base/button/_styles.scss

@@ -0,0 +1,50 @@
+@import "tokens";
+@import "icons";
+
+@mixin button($with-icons) {
+  :root {
+    @include button-tokens();
+  }
+  /*----------------------
+    General button styles
+    ----------------------*/
+  .button {
+    font-family: var(--button__font-family);
+    padding-block-start: var(--button__padding-block);
+    padding-block-end: var(--button__padding-block);
+    padding-inline-start: var(--button__padding-inline);
+    padding-inline-end: var(--button__padding-inline);
+    height: var(--button__height);
+    font-weight: var(--button__font-weight);
+    color: var(--button__color);
+    border-radius: var(--button__border-radius);
+    border-width: var(--button__border-width);
+    border-style: var(--button__border-style);
+    border-color: var(--button-primary__border-color);
+  }
+
+  /*----------------------
+    Button primary
+    ----------------------*/
+  .button--primary {
+    background-color: var(--button-primary__background-color);
+
+    // hover
+    &:hover {
+      color: var(--button-primary__color--hover);
+      background-color: var(--button-primary__background-color--hover);
+      border-color: var(--button-primary__border-color--hover);
+    }
+
+    // active
+    &:active {
+      color: var(--button-primary__color--active);
+      background-color: var(--button-primary__background-color--active);
+      border-color: var(--button-primary__border-color--active);
+    }
+
+    // hover
+    &:disabled {
+    }
+  }
+}

package/src/base/button/_tokens.scss

@@ -0,0 +1,85 @@
+@mixin button-tokens() {
+  /*----------------------
+    General
+    ----------------------*/
+  //padding
+  --button__padding-block: 0;
+  --button__padding-inline: var(--mer-spacing--sm);
+  //border
+  --button__border-width: 1px;
+  --button__border-style: solid;
+  --button__border-color: transparent;
+  --button__border-radius: var(--mer-border__radius--sm);
+  //font
+  --button__font-family: inherit;
+  --button__font-size: inherit;
+  --button__font-weight: var(--mer-font__weight--semi-bold);
+  --button__letter-spacing: inherit;
+  --button__line-height: inherit;
+  --button__color: var(--mer-text__on-primary);
+  //other
+  --button__height: var(--spacing-comp-05);
+
+  /*----------------------
+    Primary
+    ----------------------*/
+  --button-primary__color: inherit;
+  --button-primary__background-color: var(--mer-accent__primary);
+  --button-primary__border-color: var(--button-primary__background-color);
+  //hover
+  --button-primary__color--hover: var(--mer-text__on-primary);
+  --button-primary__background-color--hover: var(--mer-accent__primary--hover);
+  --button-primary__border-color--hover: var(
+    --button-primary__background-color--hover
+  );
+  //active
+  --button-primary__color--active: var(--mer-text__on-primary--active);
+  --button-primary__background-color--active: var(
+    --mer-accent__primary--active
+  );
+  --button-primary__border-color--active: var(
+    --button-primary__background-color--active
+  );
+  //disabled
+  --button-primary__color--disabled: inherit;
+  --button-primary__background-color--disabled: inherit;
+  --button-primary__border-color--disabled: inherit;
+
+  /*----------------------
+    Secondary
+    ----------------------*/
+  --button-secondary__color: inherit;
+  --button-secondary__background-color: inherit;
+  --button-secondary__border-color: inherit;
+  //hover
+  --button-secondary__color--hover: inherit;
+  --button-secondary__background-color--hover: inherit;
+  --button-secondary__border-color--hover: inherit;
+  //active
+  --button-secondary__color--active: inherit;
+  --button-secondary__background-color--active: inherit;
+  --button-secondary__border-color--active: inherit;
+  //disabled
+  --button-secondary__color--disabled: inherit;
+  --button-secondary__background-color--disabled: inherit;
+  --button-secondary__border-color--disabled: inherit;
+
+  /*----------------------
+    Outlined
+    ----------------------*/
+  --button-outlined__color: inherit;
+  --button-outlined__background-color: inherit;
+  --button-outlined__border-color: inherit;
+  //hover
+  --button-outlined__color--hover: inherit;
+  --button-outlined__background-color--hover: inherit;
+  --button-outlined__border-color--hover: inherit;
+  //active
+  --button-outlined__color--active: inherit;
+  --button-outlined__background-color--active: inherit;
+  --button-outlined__border-color--active: inherit;
+  //disabled
+  --button-outlined__color--disabled: inherit;
+  --button-outlined__background-color--disabled: inherit;
+  --button-outlined__border-color--disabled: inherit;
+}

package/src/base/icons/sass/icons-selectors.scss

@@ -0,0 +1,12 @@
+
+    
+//Multicolor lists
+    
+    
+@mixin icons-lists($icons-path: "./assets/icons") {
+  @import "multicolor/objects";
+
+  $all-multicolor-lists: (
+    objects: $icons-objects
+  );
+}