@sankhyalabs/ezui 6.3.3 → 6.4.0-dev.2

package/dist/collection/components/ez-button/ez-button.css

@@ -1,81 +1,162 @@
 :host {
-
   /* dimensions */
   /*@doc Define a largura mínima do componente.*/
-  --ez-button--min-width: 100px;
+  --ez-button--min-width: 50px;
   /*@doc Define a largura do componente.*/
-  --ez-button--width: 'auto';
+  --ez-button--width: auto;
   /*@doc Define a altura do componente.*/
-  --ez-button--height: 42px;
-  /*@doc Define a largura do slot que contém o ícone.*/
-  --ez-button__icon--width: 18px;
-  /*@doc Define o espaçamento entre o ícone e o label.*/
-  --ez-button__inline__icon--padding: 12px;
+  --ez-button--height: var(--space--42, 42px);
 
   /*@doc Define o espaçamento superior ao label.*/
-  --ez-button--padding-top: 0px;
+  --ez-button--padding-top: var(--space--0, 0px);
   /*@doc Define o espaçamento inferior ao label.*/
-  --ez-button--padding-bottom: 0px;
+  --ez-button--padding-bottom: var(--space--0, 0px);
   /*@doc Define o espaçamento à direita do label.*/
-  --ez-button--padding-right: var(--space--large, 24px);
+  --ez-button--padding-right: var(--space--12, 12px);
   /*@doc Define o espaçamento à esquerda do label.*/
-  --ez-button--padding-left: var(--space--large, 24px);
+  --ez-button--padding-left: var(--space--12, 12px);
+  /*@doc Define o gap entre o texto e ícone, quando existir.*/
+  --ez-button--icon--gap: var(--space--8, 8px);
 
   /* general */
   /*@doc Define a cor do label.*/
-  --ez-button--color: var(--title--primary, #2B3A54);
+  --ez-button--color: var(--color--ocean-green-600, #008561);
+  /*@doc Define a cor do label do botao tipo label-icon.*/
+  --ez-button--label-icon--color: var(--color--ocean-green-500, #1A9171);
+  /*@doc Define a cor do label do botao tipo label-icon, quando o mouse sobre o botão.*/
+  --ez-button--label-icon--hover-color: var(--color--ocean-green-700, #00684C);
+  /*@doc Define a cor do label do botao tipo label-icon, quando desabilitado.*/
+  --ez-button--label-icon--disabled-color: var(--color--gray-400);
+  /*@doc Define a cor do icone esquerdo.*/
+  --ez-button--left-icon--color: var(--color--ocean-green-600, #008561);
+  /*@doc Define a cor do icone direito, quando o mouse está sobre o botão.*/
+  --ez-button--right-icon--color: var(--color--ocean-green-600, #008561);
+  /*@doc Define a cor do icone esquerdo.*/
+  --ez-button--left-icon--hover-color: var(--color--ocean-green-600, #008561);
+  /*@doc Define a cor do icone direito, quando o mouse está sobre o botão.*/
+  --ez-button--right-icon--hover-color: var(--color--ocean-green-600, #008561);
+  /*@doc Define a cor do icone esquerdo, quando desabilitado.*/
+  --ez-button--left-icon--disabled-color: var(--color--gray-300, #A4A5A7);
+  /*@doc Define a cor do icone direito, quando desabilitado.*/
+  --ez-button--right-icon--disabled-color: var(--color--gray-300, #A4A5A7);
   /*@doc Define o tamanho do label.*/
-  --ez-button--font-size: var(--text--medium, 14px);
+  --ez-button--font-size: var(--font-size--default, 14px);
   /*@doc Define a família da fonte do label.*/
   --ez-button--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --ez-button--font-weight: var(--text-weight--large, 500);
+  --ez-button--font-weight: var(--font-weight--medium, 500);
   /*@doc Define a cor de fundo do botão.*/
-  --ez-button--background-color: var(--background--light, #ffffff);
+  --ez-button--background-color: var(--color--gray-70, #ffffff);
   /*@doc Define o raio da borda do botão.*/
-  --ez-button--border-radius: var(--border--radius-large, 24px);
+  --ez-button--border-radius: var(--border--radius--24, 24px);
   /*@doc Define o estilo da borda do botão.*/
-  --ez-button--border: 1px solid var(--color--strokes);
+  --ez-button--border: 1px solid var(--color--gray-90, #EAEAEA);
+  /*@doc Define o estilo da borda do botão quando em hover.*/
+  --ez-button--hover--border: 1px solid var(--color--gray-90, #EAEAEA);
   /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
   --ez-button--justify-content: center;
 
   /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
-  --ez-button--hover-color: var(--color--primary-600, #007a5a);
+  --ez-button--hover-color: var(--color--ocean-green-600, #008561);
   /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-  --ez-button--hover--background-color: var(--background--light, #ffffff);
+  --ez-button--hover--background-color: var(--color--gray-80, #F9F9F9);
 
   /*@doc Define a cor do texto quando o botão está desabilitado.*/
-  --ez-button--disabled-color: var(--text--primary);
+  --ez-button--disabled-color: var(--color--gray-400, #77777A);
   /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-  --ez-button--disabled--background-color: var(--background--medium);
-
-  /*@doc Define o estido da borda quando o botão está selecionado.*/
-  --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300);
-  /*@doc Define a sombra do botão quando selecionado.*/
-  --ez-button--focus--box-shadow: var(--color--primary-300) 0px 0px 0px 2px;
-
-  /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
-  --ez-button--active-color: var(--color--primary-700);
-   /*@doc Define a cor do fundo ao ativar o botão.*/
-  --ez-button--active--background-color: var(--background--strong);
-
+  --ez-button--disabled--background-color: var(--color--gray-80, #F9F9F9);
+  /*@doc Define a cor da borda quando o botão está desabilitado.*/
+  --ez-button--disabled--border: 1px solid var(--color--gray-200, #A4A5A7);
+  /*@doc Define a cor do icone quando o botão está desabilitado.*/
+  --ez-button--disabled-icon-color: var(--color--gray-400, #D2D2D3);
   /*@doc Define a cor do texto do botão no modo link.*/
-  --ez-button--link-color: var(--color--primary, '#008561');
+  --ez-button--link-color: var(--color--ocean-green-600, #008561);
   /*@doc Define a cor do texto do botão no hover do modo link.*/
-  --ez-button--link--hover-color: var(--color--primary-700, '#1C1D22');
-
-  --ez-button--link-disabled-color: var(--text--secondary, #a2abb9);
-
+  --ez-button--link--hover-color: var(--color--primary-700, #1C1D22);
+  /*@doc Define a cor do texto do botão no hover do modo link, quando desabilitado.*/
+  --ez-button--link-disabled-color: var(--color--gray-400, #77777A);
   /*@doc Define o tamanho small na fonte do texto do botão no modo link.*/
-  --ez-button--link--small--font-size: var(--text--small, 12px);
+  --ez-button--link--small--font-size: var(--font-size--small, 12px);
   /*@doc Define o tamanho medium na fonte do texto do botão no modo link.*/
-  --ez-button--link--medium--font-size: var(--text--medium, 14px);
+  --ez-button--link--medium--font-size: var(--font-size--default, 14px);
   /*@doc Define o tamanho large na fonte do texto do botão no modo link.*/
-  --ez-button--link--large--font-size: var(--text--large, 16px);
+  --ez-button--link--large--font-size: var(--font-size--medium, 16px);
+
+  display: flex;
+  width: fit-content;
 }
 
-ez-icon {
-  --ez-icon--color: inherit;
+:host(.ez-button--primary) {
+  /* default */
+  --ez-button--color: var(--color--gray-70);
+  --ez-button--background-color: var(--color--ocean-green-500);
+  --ez-button--font-weight: var(--font-weight--regular);
+  --ez-button--left-icon--color: var(--color--gray-70);
+  --ez-button--right-icon--color: var(--color--gray-70);
+  --ez-button--border: 1px solid var(--color--ocean-green-500);
+  /* hover */
+  --ez-button--hover-color: var(--color--gray-70);
+  --ez-button--hover--background-color: var(--color--ocean-green-700);
+  --ez-button--hover--border: 1px solid var(--color--ocean-green-700);
+  --ez-button--left-icon--hover-color: var(--color--gray-70);
+  --ez-button--right-icon--hover-color: var(--color--gray-70);
+  /* disabled */
+  --ez-button--disabled-color: var(--color--gray-70);
+  --ez-button--disabled--background-color: var(--color--gray-400);
+  --ez-button--disabled--border: 1px solid var(--color--gray-400);
+  --ez-button--disabled-icon-color: var(--color--gray-200);
+  --ez-button--left-icon--disabled-color: var(--color--gray-200);
+  --ez-button--right-icon--disabled-color: var(--color--gray-200);
+}
+
+:host(.ez-button--secondary) {
+  /* default */
+  --ez-button--color: var(--color--ocean-green-600);
+  --ez-button--background-color: var(--color--gray-70);
+  --ez-button--border: 1px solid var(--color--gray-90);
+  --ez-button--left-icon--color: var(--color--ocean-green-600);
+  --ez-button--right-icon--color: var(--color--ocean-green-600);
+  /* hover */
+  --ez-button--hover-color: var(--color--ocean-green-600);
+  --ez-button--hover--background-color: var(--color--gray-80);
+  --ez-button--hover--border: 1px solid var(--color--gray-90);
+  --ez-button--left-icon--hover-color: var(--color--ocean-green-600);
+  --ez-button--right-icon--hover-color: var(--color--ocean-green-600);
+  /* disabled */
+  --ez-button--disabled-color: var(--color--gray-400);
+  --ez-button--disabled--background-color: var(--color--gray-80);
+  --ez-button--disabled--border: 1px solid var(--color--gray-200);
+  --ez-button--disabled-icon-color: var(--color--gray-400);
+  --ez-button--left-icon--disabled-color: var(--color--gray-300);
+  --ez-button--right-icon--disabled-color: var(--color--gray-300);
+}
+
+:host(.ez-button--tertiary) {
+  /* default */
+  --ez-button--color: var(--color--ocean-green-600);
+  --ez-button--background-color: transparent;
+  --ez-button--font-weight: var(--font-weight--regular);
+  --ez-button--border: none;
+  --ez-button--left-icon--color: var(--color--ocean-green-600);
+  --ez-button--right-icon--color: var(--color--ocean-green-600);
+  /* hover */
+  --ez-button--hover-color: var(--color--ocean-green-800);
+  --ez-button--hover--background-color: transparent;
+  --ez-button--hover--border: none;
+  --ez-button--left-icon--hover-color: var(--color--ocean-green-800);
+  --ez-button--right-icon--hover-color: var(--color--ocean-green-800);
+  /* disabled */
+  --ez-button--disabled-color: var(--color--gray-400);
+  --ez-button--disabled--background-color: transparent;
+  --ez-button--disabled--border: transparent;
+  --ez-button--disabled-icon-color: var(--color--gray-200);
+  --ez-button--left-icon--disabled-color: var(--color--gray-200);
+  --ez-button--right-icon--disabled-color: var(--color--gray-200);
+}
+
+:host(.ez-button--link--primary) {
+  color: var(--color--primary);
+  fill: var(--color--primary);
 }
 
 button {
@@ -83,10 +164,16 @@ button {
   position: relative;
   display: flex;
   align-items: center;
-  margin: 0;
+  outline: 0;
+  border: 0;
+  margin: 0; 
+  padding: 0;
   cursor: pointer;
-  transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear, transform 0.15s ease;
   white-space: nowrap;
+  box-sizing: border-box;
+  overflow: hidden;
+  transform: scale(1);
 
   /*public*/
   min-width: var(--ez-button--min-width);
@@ -97,7 +184,7 @@ button {
   font-weight: var(--ez-button--font-weight);
   padding: var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);
   border-radius: var(--ez-button--border-radius);
-
+  gap: var(--ez-button--icon--gap);
   background-color: var(--ez-button--background-color);
   color: var(--ez-button--color);
   fill: var(--ez-button--color);
@@ -105,55 +192,144 @@ button {
   justify-content: var(--ez-button--justify-content);
 }
 
-button:focus {
-  outline: none;
-  box-shadow: var(--ez-button--focus--box-shadow);
+/* Bounce effect */
+button.pressed {
+  transform: scale(0.98);
+}
+
+/* Icon button bounce effect */
+button.btn-icon {
+  transition: background-color 0.2s linear, transform 0.15s ease;
+  transform: scale(1);
+}
+
+button.btn-icon.pressed {
+  transform: scale(0.95);
+}
+
+/* Disable bounce for disabled buttons */
+button:disabled,
+button[aria-disabled] {
+  transform: scale(1) !important;
+}
+
+.ripple {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+  transform: scale(0);
+  animation: ripple-animation 0.6s linear;
+  z-index: 0;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+:host .ripple,
+:host(.ez-button--secondary) .ripple {
+  background: rgba(0, 133, 97, 0.2);
+}
+
+:host(.ez-button--primary) .ripple {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+:host(.ez-button--tertiary) .ripple {
+  background: rgba(0, 133, 97, 0.15);
+}
+
+/* Ensure button content stays above ripple */
+button > *:not(.ripple) {
+  position: relative;
+  z-index: 1;
+}
+
+/* Disable ripple for disabled buttons */
+button:disabled .ripple,
+button[aria-disabled] .ripple {
+  display: none;
 }
 
 button:hover {
-  outline: none;
   background-color: var(--ez-button--hover--background-color);
+  border: var(--ez-button--hover--border);
   color: var(--ez-button--hover-color);
   fill: var(--ez-button--hover-color);
   --ez-icon--color: var(--ez-button--hover-color);
 }
 
-button:active {
-  outline: none;
-  box-shadow: none;
-  background-color: var(--ez-button--active--background-color);
-  color: var(--ez-button--active-color);
-  fill: var(--ez-button--active-color);
-  --ez-icon--color: var(--ez-button--active-color);
-}
-
+button[aria-disabled]:active,
+button:disabled:active,
+button[aria-disabled]:hover,
+button:disabled:hover,
+button[aria-disabled],
 button:disabled {
   background-color: var(--ez-button--disabled--background-color);
   color: var(--ez-button--disabled-color);
   fill: var(--ez-button--disabled-color);
-  --ez-icon--color: var(--ez-button--disabled-color);
+  --ez-icon--color: var(--ez-button--disabled-icon-color);
+  --ez-button--left-icon--color: var(--ez-button--left-icon--disabled-color);
+  --ez-button--right-icon--color: var(--ez-button--right-icon--disabled-color);
   cursor: no-drop;
+  border: var(--ez-button--disabled--border);
 }
 
-.x-small{
+button[aria-disabled].force-focus-visible,
+button[aria-disabled]:focus-visible {
+  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--petroleum-100);
+}
+
+button ez-icon {
+  --ez-icon--color: inherit;
+}
+button ez-icon.leftIcon {
+  --ez-icon--color: var(--ez-button--left-icon--color);
+}
+button ez-icon.rightIcon {
+  --ez-icon--color: var(--ez-button--right-icon--color);
+}
+button:hover ez-icon.leftIcon {
+  --ez-icon--color: var(--ez-button--left-icon--hover-color);
+}
+button:hover ez-icon.rightIcon {
+  --ez-icon--color: var(--ez-button--right-icon--hover-color);
+}
+button:disabled:hover ez-icon.leftIcon,
+button[aria-disabled]:hover ez-icon.leftIcon {
+  --ez-icon--color: var(--ez-button--left-icon--disabled-color);
+}
+button:disabled:hover ez-icon.rightIcon,
+button[aria-disabled]:hover ez-icon.rightIcon {
+  --ez-icon--color: var(--ez-button--right-icon--disabled-color);
+}
+
+button.x-small{
   height: 28px;
   --ez-button--font-size: var(--text--small, 12px);
 }
 
-.small{
+button.small{
   height: 32px;
   --ez-button--font-size: var(--text--small, 12px);
 }
 
-.medium{
+button.medium{
   height: 42px;
 }
 
-.large{
+button.large{
   height: 46px;
 }
 
-.btn-icon {
+button.btn-icon {
   padding: 0px;
 }
 
@@ -185,19 +361,16 @@ button:disabled {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--ez-button--color);
+  color: var(--ez-button--label-icon--color);
 }
 
 .label-icon:hover {
-  color: var(--ez-button--hover-color);
-  fill: var(--ez-button--hover-color);
-  --ez-icon--color: var(--ez-button--hover-color);
+  color: var(--ez-button--label-icon--hover-color);
+  fill: var(--ez-button--label-icon--hover-color);
 }
 
-.label-icon:active {
-  color: var(--ez-button--active-color);
-  fill: var(--ez-button--active-color);
-  --ez-icon--color: var(--ez-button--active-color);
+.label-icon .disabled {
+  color: var(--ez-button--label-icon--disabled-color);
 }
 
 .label-icon label {
@@ -212,30 +385,44 @@ button:disabled {
   user-select: none;
 }
 
+button[aria-disabled]+label,
 button:disabled+label {
   max-width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  cursor: pointer;
   font-family: var(--ez-button--font-family);
   font-size: var(--ez-button--font-size);
   font-weight: var(--ez-button--font-weight);
-  color: var(--ez-button--disabled-color);
+  color: var(--ez-button--label-icon--disabled-color);
   cursor: no-drop;
 }
 
+button.force-focus-visible,
+button:focus-visible {
+  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--ocean-green-200);
+}
+
 div.label-icon{
   cursor: pointer;
 }
 
-div.label-icon,button:disabled{
+div.label-icon button[aria-disabled],
+div.label-icon button:disabled{
   cursor: no-drop;
 }
 
 
 a {
   /*private*/
+  outline: 0;
+  border: 0;
+  margin: 0; 
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  padding-inline: var(--space--8);
   font-family: var(--ez-button--font-family);
   font-weight: var(--ez-button--font-weight);
   color: var(--ez-button--link-color);
@@ -243,12 +430,30 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--ez-button--border-radius);
   /*public*/
+  gap: var(--ez-button--icon--gap);
+}
+
+a ez-icon{
+  --ez-icon--color: var(--ez-button--link--color);
 }
 
 a:hover {
   /*public*/
   color: var(--ez-button--link--hover-color);
+  --ez-icon--color: var(--ez-button--link--hover-color);
+}
+a:hover ez-icon {
+  --ez-icon--color: var(--ez-button--link--hover-color);
+}
+
+a.disabled {
+  color: var(--ez-button--link-disabled-color);
+  cursor: not-allowed;
+}
+a.disabled ez-icon {
+  --ez-icon--color: var(--ez-button--link-disabled-color);
 }
 
 a.small{
@@ -266,7 +471,14 @@ a.large{
   line-height: var(--ez-button--link--large--font-size);
 }
 
-a.disabled {
-  color: var(--ez-button--link-disabled-color);
-  cursor: not-allowed;
-}
+a.force-focus-visible,
+a:focus-visible {
+  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--ocean-green-200);
+}
+
+a.disabled.force-focus-visible,
+a.disabled:focus-visible {
+  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--petroleum-100);
+}