@genexus/mercury 0.0.2 → 0.1.1

package/src/base/button/_icons.scss

@@ -1,139 +0,0 @@
-//monochrome
-@mixin button-icon-style-monochrome(
-  $input-selector,
-  $output-selector,
-  $light: true,
-  $dark: true,
-  $on-surface: true,
-  $on-primary: true,
-  $on-primary-active: true
-) {
-  //light
-  @if $light {
-    #{$output-selector} {
-      @if $on-surface {
-        &--on-surface {
-          @extend #{$input-selector}--on-surface-light !optional;
-        }
-      }
-      @if $on-primary {
-        &--on-primary {
-          @extend #{$input-selector}--on-primary-light !optional;
-        }
-      }
-      @if $on-primary-active {
-        &--on-primary:active {
-          @extend #{$input-selector}--on-primary-active-light !optional;
-        }
-      }
-    }
-  }
-  //dark
-  @if $dark {
-    html.dark #{$output-selector} {
-      @if $on-surface {
-        @if $dark {
-          &--on-surface {
-            @extend #{$input-selector}--on-surface-dark !optional;
-          }
-        }
-      }
-      @if $on-primary {
-        @if $dark {
-          &--on-primary {
-            @extend #{$input-selector}--on-primary-dark !optional;
-          }
-        }
-      }
-      @if $on-primary-active {
-        @if $dark {
-          &--on-primary:active {
-            @extend #{$input-selector}--on-primary-active-dark !optional;
-          }
-        }
-      }
-    }
-  }
-}
-
-//multicolor
-@mixin button-icon-style-multicolor(
-  $input-selector,
-  $output-selector,
-  $light: true,
-  $dark: true,
-  $enabled: true,
-  $hover: true,
-  $active: true,
-  $disabled: true
-) {
-  // enabled
-  @if $enabled and $light {
-    #{$output-selector} {
-      @extend #{$input-selector}--enabled-light;
-    }
-  }
-  @if $enabled and $dark {
-    html.dark #{$output-selector} {
-      @extend #{$input-selector}--enabled-dark;
-    }
-  }
-
-  // :hover
-  @if $hover and $light {
-    #{$output-selector}:hover {
-      @extend #{$input-selector}--hover-light;
-    }
-  }
-  @if $hover and $dark {
-    html.dark #{$output-selector}:hover {
-      @extend #{$input-selector}--hover-dark;
-    }
-  }
-
-  // :active
-  @if $active and $light {
-    #{$output-selector}:active {
-      @extend #{$input-selector}--active-light;
-    }
-  }
-  @if $active and $dark {
-    html.dark #{$output-selector}:active {
-      @extend #{$input-selector}--active-dark;
-    }
-  }
-
-  // :disabled
-  @if $disabled and $light {
-    #{$output-selector}:disabled {
-      @extend #{$input-selector}--disabled-light;
-    }
-  }
-  @if $disabled and $dark {
-    html.dark #{$output-selector}:disabled {
-      @extend #{$input-selector}--disabled-dark;
-    }
-  }
-}
-
-@mixin icons-classes() {
-  // Generate monochrome icons (light and/or dark)
-  // @each $list-name, $list in $all-monochrome-lists {
-  //   @each $icon in $list {
-  //     @include button-icon-style-monochrome(
-  //       $input-selector: "%icon__#{$list-name}-#{$icon}",
-  //       $output-selector: ".icon__#{$list-name}-#{$icon}"
-  //     );
-  //   }
-  // }
-
-  //Generate multicolor icons (light and/or dark)
-  @each $list-name, $list in $all-multicolor-lists {
-    @each $icon in $list {
-      @include button-icon-style-multicolor(
-        $input-selector: "%icon__#{$list-name}-#{$icon}",
-        $output-selector: ".icon__#{$list-name}-#{$icon}"
-      );
-    }
-  }
-}

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

@@ -1,275 +0,0 @@
-%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

@@ -1,50 +0,0 @@
-@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

@@ -1,85 +0,0 @@
-@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

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