@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.98c4058

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
@@ -41,6 +41,7 @@
 }
 .button ::slotted(six-icon) {
   pointer-events: none;
+  transform: translateY(-1.5px);
 }
 
 .button-wrapper--disabled {
@@ -54,6 +55,10 @@
   align-items: center;
 }
 
+.button:focus-visible {
+  outline: var(--six-focus-ring);
+  outline-offset: var(--six-focus-ring-offset);
+}
 .button.button--secondary {
   background-color: var(--six-color-white);
   border-color: var(--six-color-web-rock-900);
@@ -67,15 +72,10 @@
 .button.button--secondary:hover:not(.button--disabled) {
   background-color: var(--six-color-web-rock-100);
 }
-.button.button--secondary:focus:not(.button--disabled) {
-  background-color: var(--six-color-web-rock-100);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--secondary:active:not(.button--disabled) {
   background-color: var(--six-color-web-rock-300);
   border-color: var(--six-color-web-rock-900);
-  border-width: var(--six-focus-ring-width);
+  border-width: 1px;
 }
 .button.button--primary {
   background-color: var(--six-color-web-rock-900);
@@ -91,11 +91,6 @@
   background-color: var(--six-color-web-rock-800);
   border-color: var(--six-color-web-rock-800);
 }
-.button.button--primary:focus:not(.button--disabled) {
-  background-color: var(--six-color-web-rock-900);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--primary:active:not(.button--disabled) {
   background-color: var(--six-color-web-rock-900);
   border-color: var(--six-color-web-rock-900);
@@ -112,9 +107,6 @@
 .button.button--link:hover:not(.button--disabled) {
   color: var(--six-color-action-600);
 }
-.button.button--link:focus:not(.button--disabled) {
-  border-color: var(--six-color-web-rock-400);
-}
 .button.button--link:active:not(.button--disabled) {
   color: var(--six-color-action-light-to-be-defined);
 }
@@ -132,11 +124,6 @@
   background-color: var(--six-color-danger-900);
   border-color: var(--six-color-danger-900);
 }
-.button.button--danger:focus:not(.button--disabled) {
-  background-color: var(--six-color-danger-800);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--danger:active:not(.button--disabled) {
   background-color: var(--six-color-danger-800);
   border-color: var(--six-color-danger-800);
@@ -156,11 +143,6 @@
   background-color: var(--six-color-warning-800);
   border-color: var(--six-color-warning-800);
 }
-.button.button--warning:focus:not(.button--disabled) {
-  background-color: var(--six-color-warning-700);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--warning:active:not(.button--disabled) {
   background-color: var(--six-color-warning-700);
   border-color: var(--six-color-warning-700);
@@ -180,11 +162,6 @@
   background-color: var(--six-color-success-600);
   border-color: var(--six-color-success-600);
 }
-.button.button--success:focus:not(.button--disabled) {
-  background-color: var(--six-color-success-500);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--success:active:not(.button--disabled) {
   background-color: var(--six-color-success-500);
   border-color: var(--six-color-success-500);
@@ -204,13 +181,25 @@
   background-color: var(--six-color-action-600);
   border-color: var(--six-color-action-600);
 }
-.button.button--action:focus:not(.button--disabled) {
+.button.button--action:active:not(.button--disabled) {
   background-color: var(--six-color-action-500);
+  border-color: var(--six-color-action-500);
+  opacity: 70%;
+}
+.button.button--action-outline {
+  border-color: var(--six-color-action-500);
+  background-color: var(--six-color-white);
+  color: var(--six-color-action-500);
+}
+.button.button--action-outline.button--disabled {
+  background-color: var(--six-color-web-rock-400);
   border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
+  color: var(--six-color-web-rock-700);
 }
-.button.button--action:active:not(.button--disabled) {
-  background-color: var(--six-color-action-500);
+.button.button--action-outline:hover:not(.button--disabled) {
+  background-color: var(--six-color-web-rock-100);
+}
+.button.button--action-outline:active:not(.button--disabled) {
   border-color: var(--six-color-action-500);
   opacity: 70%;
 }