@ldmjs/ui 1.0.90 → 2.0.0-beta.1

package/dist/scss/_buttons.scss

@@ -1,8 +1,22 @@
+:root {
+  --button-xs: 32px;
+  --button-s: 40px;
+  --button-m: 48px;
+  --button-l: 56px;
+}
+
 body {
+  button:focus,
+  button:active {
+    outline: none !important;
+  }
+
+  .v-btn:after {
+    transition: none !important;
+  }
+
   .v-btn {
     text-transform: none !important;
-    font-size: var(--font-size) !important;
-    font-weight: 400 !important;
     letter-spacing: 0 !important;
 
     .v-btn__overlay {
@@ -12,380 +26,668 @@ body {
       display: none;
     }
 
-    &.v-btn--density-compact {
-      height: var(--input-height);
-
-      &:not(.v-btn--variant-outlined):not(.v-btn--variant-elevated) {
-        .v-btn__overlay {
-          display: none;
-        }
-      }
-    }
-  }
-
-  &.mobile-device {
-    .v-btn:hover,
-    .v-btn.small-button:hover,
-    .v-btn.square-sm-button:hover {
-      background: none !important;
-      background-color: transparent !important;
-    }
-  }
-
-  .small-button {
-    font-size: var(--font-size) !important;
-    padding: 0 12px;
-
-    &.v-btn--variant-text {
-      padding: 0 12px !important;
+    &.v-btn--variant-flat {
+      box-shadow: none;
     }
 
-    &.v-btn--block {
-      height: auto;
-      min-height: var(--input-height);
-      padding: 4px 6px;
+    &.v-btn--size-x-small,
+    &.v-btn--size-small,
+    &.v-btn--size-default,
+    &.v-btn--size-large,
+    &.v-btn--size-x-large {
+      min-width: unset;
     }
 
-    &:not(.v-btn--block) {
-      height: var(--input-height) !important;
+    &.v-btn--disabled {
+      opacity: 1;
     }
+  }
 
-    &.bg-primary {
-      background-color: var(--primary-l-2) !important;
-
-      &:hover {
-        background-color: var(--primary-l-1) !important;
-      }
-
-      &:active {
-        background-color: var(--primary) !important;
-      }
+  .ld-button {
+    font-family: var(--semibold);
+    font-weight: 400 !important;
+    border-radius: var(--border-radius) !important;
 
-      &[disabled] {
-        background-color: var(--grey-l-5) !important;
-        color: var(--grey) !important;
+    &:not(.ld-button-square) {
+      .v-btn__content {
+        svg:nth-child(1) {
+          margin-right: 4px;
+        }
+        svg:nth-child(3) {
+          margin-left: 4px;
+        }
       }
     }
 
-    &.bg-success {
-      background-color: var(--success) !important;
-      color: var(--white) !important;
-
-      &:hover {
-        background-color: var(--success-d-1) !important;
-      }
-
-      &:active {
-        background-color: var(--success-d-2) !important;
-      }
-
-      &[disabled] {
-        background-color: var(--grey-l-5) !important;
-        color: var(--grey) !important;
+    &.v-btn {
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        border: 2px solid var(--focus);
+        border-radius: calc(var(--border-radius) + 4px);
       }
     }
 
-    &.bg-grey {
-      background-color: var(--grey-l-6) !important;
-      color: var(--text) !important;
-
-      &:hover {
-        color: var(--grey) !important;
-      }
-
-      &:active {
-        background-color: var(--grey-l-4) !important;
-        color: var(--text) !important;
-      }
-
-      &[disabled] {
-        background-color: var(--grey-l-5) !important;
-        color: var(--grey) !important;
+    &.v-btn:focus-visible {
+      &:after {
+        opacity: 1;
       }
     }
 
-    &.text-primary {
-      color: var(--primary) !important;
-      &:hover {
-        background-color: var(--primary-l-8) !important;
-      }
-
-      &:active {
-        background-color: var(--primary-l-7) !important;
-      }
+    &.v-btn--size-x-small {
+      font-size: var(--text-body-s) !important;
+      min-height: unset;
+      height: var(--button-xs) !important;
+      padding: 0 14px !important;
 
-      &.--active {
-        background-color: var(--primary-l-8) !important;
-        border-color: var(--primary-l-2) !important;
-        color: var(--primary-l-2) !important;
+      &.ld-button-square {
+        min-width: unset;
+        width: var(--button-xs) !important;
+        padding: 0 !important;
       }
     }
 
-    &.text-success {
-      &.v-btn--variant-outlined {
-        color: var(--success-d-1) !important;
-        .v-icon {
-          color: var(--success-d-1) !important;
-        }
-      }
-      &:hover {
-        background-color: var(--success-l-6) !important;
-      }
+    &.v-btn--size-small {
+      font-size: var(--text-body-s) !important;
+      min-height: unset;
+      height: var(--button-s) !important;
+      padding: 0 16px !important;
 
-      &:active {
-        background-color: var(--success-l-5) !important;
+      &.ld-button-square {
+        min-width: unset;
+        width: var(--button-s) !important;
+        padding: 0 !important;
       }
     }
 
-    &.text-grey {
-      &.v-btn--variant-outlined {
-        border-color: var(--grey-l-5) !important;
-        span {
-          color: var(--text) !important;
-        }
-        .v-icon {
-          color: var(--grey);
-        }
-        svg {
-          color: var(--grey);
-        }
-      }
-      &.v-btn--variant-text {
-        border: 1px solid transparent;
-      }
-      &:hover {
-        background-color: var(--grey-l-5) !important;
-      }
+    &.v-btn--size-large {
+      font-size: var(--text-body-m) !important;
+      min-height: unset;
+      height: var(--button-m) !important;
+      padding: 0 20px !important;
 
-      &:active {
-        background-color: var(--grey-l-5) !important;
+      &.ld-button-square {
+        min-width: unset;
+        width: var(--button-m) !important;
+        padding: 0 !important;
       }
     }
 
-    &.text-error {
-      &.v-btn--variant-outlined {
-        color: var(--error);
-        .v-icon {
-          color: var(--error);
-        }
-      }
-      &:hover {
-        background-color: var(--error-l-6) !important;
-      }
+    &.v-btn--size-x-large {
+      font-size: var(--text-body-l) !important;
+      min-height: unset;
+      height: var(--button-l) !important;
+      padding: 0 24px !important;
 
-      &:active {
-        background-color: var(--error-l-5) !important;
+      &.ld-button-square {
+        min-width: unset;
+        width: var(--button-l) !important;
+        padding: 0 !important;
       }
     }
 
-    .v-icon, svg {
-      margin-right: 4px;
-    }
-
-    svg.primary--text {
-      color: var(--primary) !important;
-    }
+    @mixin buttonflat(
+      $colorname,
+      $iconcolor,
+      $default,
+      $hover,
+      $active,
+      $disabled
+    ) {
+      &.bg-#{$colorname} {
+        background-color: $default !important;
+        color: var(--white) !important;
 
-    &:after {
-      content: unset;
-    }
-  }
+        svg {
+          color: var(--white) !important;
+        }
 
-  .square-sm-button {
-    padding: 0 !important;
-    height: var(--input-height) !important;
-    width: var(--input-height) !important;
-    min-width: var(--input-height) !important;
-    min-height: var(--input-height) !important;
-    max-width: var(--input-height) !important;
-    max-height: var(--input-height) !important;
-    border-radius: var(--border-radius);
-
-    &.v-btn--icon {
-      border: none;
-      border-radius: var(--border-radius);
-      background: none !important;
-    }
+        &.v-btn--icon {
+          background-color: transparent !important;
+          color: $iconcolor !important;
 
-    .v-icon:not(.custom-icon) {
-      transform: translate(1px, 1px);
-    }
+          svg {
+            color: $iconcolor !important;
+          }
 
-    &.bg-primary {
-      color: var(--white) !important;
-      &:not(.v-btn--icon) {
-        background-color: var(--primary-l-2) !important;
+          &:hover,
+          &:active,
+          &[disabled] {
+            background-color: transparent !important;
+            border-color: transparent !important;
+          }
+        }
 
         &:hover {
-          background-color: var(--primary-l-1) !important;
+          background-color: $hover !important;
         }
 
         &:active {
-          background-color: var(--primary) !important;
+          background-color: $active !important;
+        }
+
+        &[disabled] {
+          background-color: $disabled !important;
+          color: var(--white) !important;
         }
       }
     }
 
-    &.bg-success {
-      color: var(--white) !important;
-      &:not(.v-btn--icon) {
-        background-color: var(--success) !important;
+    @mixin buttonoutlined(
+      $colorname,
+      $borderDefault,
+      $colorDefault,
+      $bgHover,
+      $borderHover,
+      $colorHover,
+      $bgActive,
+      $borderActive,
+      $colorActive
+    ) {
+      &.v-btn--variant-outlined.text-#{$colorname} {
+        background-color: var(--white) !important;
+        border-color: $borderDefault !important;
+        color: $colorDefault !important;
 
-        &:hover {
-          background-color: var(--success-d-1) !important;
+        svg {
+          color: $colorDefault !important;
         }
 
-        &:active {
-          background-color: var(--success-d-2) !important;
-        }
-      }
+        &.v-btn--icon {
+          background-color: transparent !important;
+          border-color: transparent !important;
+          color: $colorDefault !important;
 
-      &[disabled] {
-        color: var(--grey) !important;
+          svg {
+            color: $colorDefault !important;
+          }
 
-        &:not(.v-btn--icon) {
-          background-color: var(--grey-l-5) !important;
+          &:hover,
+          &:active,
+          &[disabled] {
+            background-color: transparent !important;
+            border-color: transparent !important;
+          }
         }
-      }
-    }
-
-    &.bg-grey {
-      color: var(--grey);
-      &:not(.v-btn--icon) {
-        background-color: var(--grey-l-6) !important;
 
         &:hover {
+          background-color: $bgHover !important;
+          border-color: $borderHover !important;
+          color: $colorHover !important;
+
           svg {
-            color: var(--grey-l-1) !important;
+            color: $colorHover !important;
           }
         }
 
         &:active {
-          background-color: var(--grey-l-4) !important;
+          background-color: $bgActive !important;
+          border-color: $borderActive !important;
+          color: $colorActive !important;
+
           svg {
-            color: var(--text) !important;
+            color: $colorActive !important;
           }
         }
-      }
-
-      svg {
-        color: var(--grey);
-      }
 
-      &[disabled] {
-        color: var(--grey) !important;
+        &[disabled] {
+          background-color: var(--white) !important;
+          border-color: var(--grey-l-4) !important;
+          color: var(--grey-l-2) !important;
 
-        &:not(.v-btn--icon) {
-          background-color: var(--grey-l-5) !important;
+          svg {
+            color: var(--grey-l-2) !important;
+          }
         }
       }
     }
 
-    &.text-primary {
-      color: var(--primary) !important;
-      &.v-btn--variant-text {
-        .v-icon:not(.text-primary):not(.text-grey):not(.text-success):not(.text-error):not(.text-warning) {
-          color: var(--primary) !important;
-        }
+    @mixin buttontonal(
+      $colorname,
+      $bgDefault,
+      $colorDefault,
+      $bgHover,
+      $colorHover,
+      $bgActive,
+      $colorActive,
+      $bgDisabled,
+      $colorDisabled
+    ) {
+      &.v-btn--variant-tonal.text-#{$colorname} {
+        background-color: $bgDefault !important;
+        color: $colorDefault !important;
+
         svg {
-          color: var(--primary) !important;
+          color: $colorDefault !important;
         }
-      }
-      &:not(.v-btn--icon) {
+
+        &.v-btn--icon {
+          background-color: transparent !important;
+          color: $colorDefault !important;
+
+          svg {
+            color: $colorDefault !important;
+          }
+
+          &:hover,
+          &:active,
+          &[disabled] {
+            background-color: transparent !important;
+            border-color: transparent !important;
+          }
+        }
+
         &:hover {
-          background-color: var(--primary-l-8) !important;
+          background-color: $bgHover !important;
+          border-color: transparent;
+          color: $colorHover !important;
+
+          svg {
+            color: $colorHover !important;
+          }
         }
+
         &:active {
-          background-color: var(--primary-l-7) !important;
+          background-color: $bgActive !important;
+          border-color: transparent;
+          color: $colorActive !important;
+
+          svg {
+            color: $colorActive !important;
+          }
         }
-      }
 
-      &.--active {
-        border-color: var(--primary-l-2);
-        background-color: var(--primary-l-8) !important;
-        svg {
-          color: var(--primary-l-2) !important;
+        &[disabled] {
+          background-color: $bgDisabled !important;
+          color: $colorDisabled !important;
+
+          svg {
+            color: $colorDisabled !important;
+          }
         }
       }
     }
 
-    &.text-grey {
-      &.v-btn--variant-outlined {
-        color: var(--grey-l-5) !important;
-        .v-icon {
-          color: var(--grey);
-        }
-        svg {
-          color: var(--grey);
-        }
-      }
-      &.v-btn--disabled {
-        opacity: 1;
-        background-color: var(--grey-l-6);
+    @mixin buttontext(
+      $colorname,
+      $colorDefault,
+      $bgHover,
+      $colorHover,
+      $bgActive,
+      $colorActive
+    ) {
+      &.v-btn--variant-text.text-#{$colorname} {
+        color: $colorDefault !important;
 
         svg {
-          color: var(--grey-l-4);
-        }
-        &.v-btn--icon {
-          background: none;
-          opacity: 0.8;
+          color: $colorDefault !important;
         }
-      }
-      &:not(.v-btn--icon) {
+
         &:hover {
-          background-color: var(--grey-l-5) !important;
+          color: $colorHover !important;
+          background-color: $bgHover;
+
+          svg {
+            color: $colorHover !important;
+          }
         }
 
         &:active {
-          background-color: var(--grey-l-4) !important;
-        }
-      }
-      &.--active {
-        border-color: var(--primary-l-2);
-        background-color: var(--primary-l-8) !important;
-        svg {
-          color: var(--primary-l-2) !important;
-        }
-      }
-    }
+          color: $colorActive !important;
+          background-color: $bgActive;
 
-    &.text-success {
-      &.v-btn--variant-outlined {
-        color: var(--success-d-1) !important;
-        .v-icon {
-          color: var(--success-d-1) !important;
-        }
-        svg {
-          color: var(--success-d-1) !important;
+          svg {
+            color: $colorActive !important;
+          }
         }
 
-        &:not(.v-btn--icon) {
-          &:hover {
-            background-color: var(--success-l-6);
+        &[disabled] {
+          color: var(--grey-l-2) !important;
+          background-color: var(--white);
+
+          svg {
+            color: var(--grey-l-2) !important;
           }
         }
       }
     }
 
-    &.text-error {
-      &.v-btn--variant-outlined {
-        color: var(--error) !important;
-        .v-icon {
-          color: var(--error) !important;
-        }
-        svg {
-          color: var(--error) !important;
-        }
-      }
-      &:not(.v-btn--icon) {
-        &:hover {
-          background-color: var(--error-l-6) !important;
-        }
+    // ----------- primary
+
+    // -- flat
+
+    @include buttonflat(
+      'primary',
+      // icon text color
+      var(--primary-d-1),
+      // default bg
+      var(--primary),
+      // hover bg
+      var(--primary-d-1),
+      // active bg
+      var(--primary-d-2),
+      // disabled bg
+      var(--primary-l-4)
+    );
+
+    // -- outlined
+
+    @include buttonoutlined(
+      'primary',
+      // border default
+      var(--primary-l-3),
+      // color default
+      var(--primary-d-1),
+      // bg hover
+      var(--primary-l-6),
+      // border hover
+      var(--primary-l-2),
+      // color hover
+      var(--primary-d-2),
+      // bg active
+      var(--primary-l-5),
+      // border active
+      var(--primary-l-1),
+      // color active
+      var(--primary-d-3)
+    );
+
+    // -- tonal
+
+    @include buttontonal(
+      'primary',
+      // bg default
+      var(--primary-l-6),
+      // color default
+      var(--primary-d-1),
+      // bg hover
+      var(--primary-l-5),
+      // color hover
+      var(--primary-d-2),
+      // bg active
+      var(--primary-l-4),
+      // color active
+      var(--primary-d-3),
+      // bg disabled
+      var(--primary-l-6),
+      // color disabled
+      var(--primary-l-3)
+    );
+
+    // -- text
+
+    @include buttontext(
+      'primary',
+      // color default
+      var(--primary-d-1),
+      // bg hover
+      var(--primary-l-6),
+      // color hover
+      var(--primary-d-2),
+      // bg avtive
+      var(--primary-l-5),
+      // color active
+      var(--primary-d-3)
+    );
+
+    // ----------- success
+
+    // -- flat
+
+    @include buttonflat(
+      'success',
+      // icon text color
+      var(--success-d-1),
+       // default bg
+      var(--success),
+      // hover bg
+      var(--success-d-1),
+      // active bg
+      var(--success-d-2),
+      // disabled bg
+      var(--success-l-5)
+    );
+
+    // -- outlined
+
+    @include buttonoutlined(
+      'success',
+      // border default
+      var(--success-l-2),
+      // color default
+      var(--success-d-1),
+      // bg hover
+      var(--success-l-7),
+      // border hover
+      var(--success-l-1),
+      // color hover
+      var(--success-d-2),
+      // bg active
+      var(--success-l-6),
+      // border active
+      var(--success),
+      // color active
+      var(--success-d-3)
+    );
+
+    // -- tonal
+
+    @include buttontonal(
+      'success',
+      // bg default
+      var(--success-l-7),
+      // color default
+      var(--success-d-1),
+      // bg hover
+      var(--success-l-6),
+      // color hover
+      var(--success-d-2),
+      // bg active
+      var(--success-l-5),
+      // color active
+      var(--success-d-3),
+      // bg disabled
+      var(--success-l-7),
+      // color disabled
+      var(--success-l-3)
+    );
+
+    // -- text
+
+    @include buttontext(
+      'success',
+      // color default
+      var(--success-d-1),
+      // bg hover
+      var(--success-l-6),
+      // color hover
+      var(--success-d-2),
+      // bg avtive
+      var(--success-l-5),
+      // color active
+      var(--success-d-3)
+    );
+
+    // ----------- error
+
+    // -- flat
+
+    @include buttonflat(
+      'error',
+      // icon text color
+      var(--error-d-1),
+       // default bg
+      var(--error),
+      // hover bg
+      var(--error-d-1),
+      // active bg
+      var(--error-d-2),
+      // disabled bg
+      var(--error-l-5)
+    );
+
+    // -- outlined
+
+    @include buttonoutlined(
+      'error',
+      // border default
+      var(--error-l-3),
+      // color default
+      var(--error),
+      // bg hover
+      var(--error-l-7),
+      // border hover
+      var(--error-l-2),
+      // color hover
+      var(--error-d-1),
+      // bg active
+      var(--error-l-6),
+      // border active
+      var(--error-l-1),
+      // color active
+      var(--error-d-2)
+    );
+
+    // -- tonal
+
+    @include buttontonal(
+      'error',
+      // bg default
+      var(--error-l-7),
+      // color default
+      var(--error-d-1),
+      // bg hover
+      var(--error-l-6),
+      // color hover
+      var(--error-d-2),
+      // bg active
+      var(--error-l-5),
+      // color active
+      var(--error-d-3),
+      // bg disabled
+      var(--error-l-7),
+      // color disabled
+      var(--error-l-3)
+    );
+
+    // -- text
+
+    @include buttontext(
+      'error',
+      // color default
+      var(--error-d-1),
+      // bg hover
+      var(--error-l-6),
+      // color hover
+      var(--error-d-2),
+      // bg avtive
+      var(--error-l-5),
+      // color active
+      var(--error-d-3)
+    );
+
+    // ----------- grey
+
+    // -- flat
+
+    @include buttonflat(
+      'grey',
+      // icon text color
+      var(--grey-d-3),
+      // default bg
+      var(--grey),
+      // hover bg
+      var(--grey-d-1),
+      // active bg
+      var(--grey-d-2),
+      // disabled bg
+      var(--grey-l-4)
+    );
+
+    // -- outlined
+
+    @include buttonoutlined(
+      'grey',
+      // border default
+      var(--grey-l-3),
+      // color default
+      var(--grey-d-3),
+      // bg hover
+      var(--grey-l-6),
+      // border hover
+      var(--grey-l-2),
+      // color hover
+      var(--grey-d-4),
+      // bg active
+      var(--grey-l-5),
+      // border active
+      var(--grey-l-1),
+      // color active
+      var(--grey-d-5)
+    );
+
+    // -- tonal
+
+    @include buttontonal(
+      'grey',
+      // bg default
+      var(--grey-l-6),
+      // color default
+      var(--grey-d-3),
+      // bg hover
+      var(--grey-l-5),
+      // color hover
+      var(--grey-d-4),
+      // bg active
+      var(--grey-l-4),
+      // color active
+      var(--grey-d-5),
+      // bg disabled
+      var(--grey-l-6),
+      // color disabled
+      var(--grey-l-2)
+    );
+
+    // -- text
+
+    @include buttontext(
+      'grey',
+      // color default
+      var(--grey-d-3),
+      // bg hover
+      var(--grey-l-5),
+      // color hover
+      var(--grey-d-4),
+      // bg avtive
+      var(--grey-l-4),
+      // color active
+      var(--grey-d-5)
+    );
+
+    // ----------- white
+
+    // -- flat
+
+    &.bg-white {
+      //
+    }
 
-        &:active {
-          background-color: var(--error-l-5) !important;
-        }
-      }
+    // -- outlined
+
+    // -- tonal
+
+    // -- text
+
+    // --------------------------------------------------
+
+    svg.primary--text {
+      color: var(--primary) !important;
     }
   }
 }