@ldmjs/ui 1.0.89 → 2.0.0-beta.0

package/dist/scss/_calendar.scss

@@ -1,60 +1,163 @@
-body {
-  .vc-blue {
-    // --vc-accent-50: #eff6ff;
-    // --vc-accent-100: #dbeafe;
-    --vc-accent-200: var(--secondary);
-    --vc-accent-300: var(--primary-l-3);
-    --vc-accent-400: var(--primary-l-2);
-    --vc-accent-500: var(--primary-l-1);
-    --vc-accent-600: var(--primary);
-    --vc-accent-700: var(--primary-d-1);
-    --vc-accent-800: var(--primary-d-1);
-    --vc-accent-900: var(--primary-d-1);
-  }
-  .vc-highlight-content-solid {
-    font-weight: normal;
-    color: var(--white);
-  }
-  .vc-attr {
-    --vc-highlight-solid-bg: var(--vc-accent-400) !important;
-  }
-  .vc-light {
-    --vc-rounded-lg: var(--border-radius);
-    --vc-border: var(--grey-l-5);
-  }
-  .vc-popover-content {
-    border-color: var(--grey-l-5);
-  }
-  .vc-title span {
-    color: var(--text);
-    font-size: var(--font-size-2);
-    font-weight: 600;
-    font-family: 'Roboto', Arial, Helvetica, sans-serif;
-  }
-  .vc-arrow {
-    color: var(--grey);
+@use "utils";
+
+@mixin calendarbutton {
+  $parent: utils.getParent(&);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--button-xs);
+  border: 2px solid transparent;
+  border-radius: var(--border-radius);
+
+  span {
+    font-family: var(--regular);
+    font-size: var(--text-body-s);
+  }
+
+  &[disabled] {
+    span {
+      color: var(--grey-d-1);
+    }
+  }
+
+  $selected: utils.getSelector($parent, '--selected');
+
+  &:not([disabled]):not(#{$selected}) {
+    &:hover {
+      background-color: var(--grey-l-6);
+    }
+
+    &:focus-visible {
+      border: 2px solid var(--focus);
+    }
+  }
+}
+
+@mixin today() {
+  $parent: utils.getParent(&);
+
+  span {
+    position: relative;
+    font-family: var(--semibold);
+    color: var(--primary-d-1);
+  }
+
+  $selected: utils.getSelector($parent, '--selected');
+
+  &:not(#{$selected}) {
+    span {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        margin-left: -2px;
+        width: 4px;
+        height: 4px;
+        border-radius: 4px;
+        background-color: var(--primary-d-1);
+      }
+    }
+  }
+}
+
+@mixin selected() {
+  &:not([disabled]) {
+    background-color: var(--primary);
+    span {
+      color: var(--white);
+    }
+
     &:hover {
-      background: none !important;
+      background-color: var(--primary-d-1);
+      span {
+        color: var(--white);
+      }
     }
   }
-  .vc-weekday {
-    color: var(--grey-l-2);
-    font-size: var(--font-size);
-    font-weight: 600;
-    font-family: 'Roboto', Arial, Helvetica, sans-serif;
+
+  &[disabled] {
+    background-color: var(--primary-l-2);
+    span {
+      color: var(--text);
+    }
   }
+}
+
+body {
+  .ld-calendar {
+    width: 284px;
+    padding-top: 16px;
+
+    .v-date-picker-controls {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+      height: 40px;
+      margin-bottom: 8px;
+      padding: 0 16px;
+      flex: unset;
+      flex-shrink: 0;
+
+      button {
+        font-family: var(--medium);
+        font-size: var(--text-body-m);
+      }
+    }
+
+    .v-date-picker-month__days {
+      column-gap: 0;
+    }
+
+    .v-date-picker-month__day {
+      width: 36px;
+      height: 32px;
+      margin-bottom: 8px;
 
-  .vc-day-content {
-    color: var(--text);
-    font-size: var(--font-size);
-    font-weight: 400;
-    font-family: 'Roboto', Arial, Helvetica, sans-serif;
-    &.vc-disabled {
-      color: var(--grey-l-2) !important;
+      &.v-date-picker-month__weekday {
+        color: var(--grey-d-1);
+      }
     }
-    &.vc-highlight-content-solid {
-      color: var(--white) !important;
-      font-weight: 600 !important;
+
+    .ld-calendar-day {
+      @include calendarbutton();
+
+      width: var(--button-xs);
+
+      &--today {
+        @include today();
+      }
+
+      &--selected {
+        @include selected();
+      }
+    }
+
+    .ld-calendar-month {
+      @include calendarbutton();
+
+      &--today {
+        @include today();
+      }
+
+      &--selected {
+        @include selected();
+      }
+    }
+
+    .ld-calendar-year {
+      @include calendarbutton();
+
+      &--today {
+        @include today();
+      }
+
+      &--selected {
+        @include selected();
+      }
     }
   }
 }

package/dist/scss/_checkbox.scss

@@ -0,0 +1,245 @@
+:root {
+  --checkbox-s: 16px;
+  --checkbox-m: 20px;
+  --checkbox-l: 24px;
+}
+
+body {
+  .ld-checkbox {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 20px;
+
+    input[type='checkbox'] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+
+    input[type='checkbox'] + .ld-checkbox-icon {
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      background-color: var(--white);
+      border: 1px solid var(--grey-l-4);
+      border-radius: 4px;
+      color: transparent;
+      z-index: 1;
+    }
+
+    input[type='checkbox']:focus + .ld-checkbox-icon {
+      svg {
+        opacity: 0;
+      }
+    }
+
+    input[type='checkbox']:checked + .ld-checkbox-icon {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--white);
+      overflow: hidden;
+      svg {
+        opacity: 1;
+      }
+    }
+
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      word-wrap: break-word;
+      max-width: 100%;
+    }
+
+    &-hint {
+      font-family: var(--regular);
+      color: var(--grey-d-1);
+    }
+
+    @mixin checkboxsize($size, $fontSize) {
+      label {
+        height: calc($size + 8px);
+        width: calc($size + 8px);
+
+        input[type='checkbox'] + .ld-checkbox-icon {
+          height: $size;
+          width: $size;
+        }
+
+        input[type='checkbox']:checked + .ld-checkbox-icon {
+          svg {
+            height: calc($size * 0.5);
+            width: calc($size * 0.9);
+          }
+        }
+      }
+
+      .ld-label-content {
+        font-size: $fontSize;
+        line-height: calc($fontSize + 6px);
+      }
+
+      .ld-checkbox-hint {
+        font-size: calc($fontSize - 2px);
+        line-height: calc($fontSize - 2px + 6px);
+      }
+
+      &:not(.ld-checkbox--label-to-left) {
+        .ld-checkbox-hint {
+          padding-left: calc($size + 8px + 8px);
+        }
+      }
+    }
+
+    // --------- x-small
+
+    &.ld-checkbox--x-small {
+      @include checkboxsize(var(--checkbox-s), var(--text-body-s));
+    }
+
+    // --------- small
+
+    &.ld-checkbox--small {
+      @include checkboxsize(var(--checkbox-m), var(--text-body-m));
+    }
+
+    // --------- large
+
+    &.ld-checkbox--large {
+      @include checkboxsize(var(--checkbox-l), var(--text-body-l));
+    }
+
+    &:not(.ld-checkbox--disabled):not(.ld-checkbox--readonly):hover {
+      label {
+        background-color: var(--shade-05);
+        border-radius: 8px;
+      }
+    }
+
+    &.ld-checkbox--focused {
+      label {
+        background-color: var(--shade-05);
+        border-radius: 8px;
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 8px;
+        }
+      }
+    }
+
+    @mixin checkboxiconcolor($color) {
+      background-color: $color;
+      border-color: $color;
+    }
+
+    // ---------- primary
+
+    &.text-primary {
+      input[type='checkbox']:checked + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--primary));
+        &:hover {
+          @include checkboxiconcolor(var(--primary-d-1));
+        }
+      }
+
+      input[type='checkbox']:checked:focus + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--focus));
+      }
+
+      input[type='checkbox']:checked:active + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--primary-d-2));
+      }
+
+      &.ld-checkbox--hovered {
+        input[type='checkbox']:checked + .ld-checkbox-icon {
+          @include checkboxiconcolor(var(--primary-d-1));
+        }
+      }
+
+      &.ld-checkbox--focused {
+        label {
+          &:after {
+            border: 2px solid var(--focus);
+          }
+        }
+      }
+    }
+
+    // ---------- error
+
+    &.text-error {
+      input[type='checkbox']:checked + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--error));
+        &:hover {
+          @include checkboxiconcolor(var(--error-d-1));
+        }
+      }
+
+      input[type='checkbox']:checked:focus + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--focus));
+      }
+
+      input[type='checkbox']:checked:active + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--error-d-2));
+      }
+
+      &.ld-checkbox--hovered {
+        input[type='checkbox']:checked + .ld-checkbox-icon {
+          @include checkboxiconcolor(var(--error-d-1));
+        }
+      }
+
+      &.ld-checkbox--focused {
+        label {
+          &:after {
+            border: 2px solid var(--focus);
+          }
+        }
+      }
+    }
+
+    &.ld-checkbox--disabled,
+    &.ld-checkbox--readonly {
+      input[type='checkbox'] + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--grey-l-5));
+        svg {
+          opacity: 0;
+        }
+      }
+
+      input[type='checkbox']:checked + .ld-checkbox-icon {
+        @include checkboxiconcolor(var(--grey-l-5));
+        color: var(--grey-l-2);
+        svg {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.ld-checkbox--disabled {
+      .ld-label-content {
+        color: var(--grey-l-2);
+      }
+    }
+
+    &.ld-checkbox--readonly {
+      .ld-label-content {
+        color: var(--grey-d-3);
+      }
+    }
+  }
+}

package/dist/scss/_chip.scss

@@ -1,81 +1,181 @@
+@use "sass:list";
+
+:root {
+  --chip-s: 24px;
+  --chip-m: 32px;
+  --chip-l: 40px;
+  --chip-border-radius: 24px;
+}
+
+$sizearray: (
+  'x-small': (
+    // font size
+    var(--font-size),
+    // height
+    var(--chip-s),
+    // padding
+    8px,
+    // close button size
+    16px
+  ),
+  'small': (
+    var(--text-body-s),
+    var(--chip-m),
+    8px,
+    16px
+  ),
+  'large': (
+    var(--text-body-m),
+    var(--chip-l),
+    10px,
+    20px
+  )
+);
+
 body {
-  .v-chip {
-    .v-chip__close .v-icon {
-      font-size: 16px !important;
-    }
-    .v-chip__content {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      height: 100%;
+  .ld-chip {
+    font-family: var(--medium);
+    position: relative;
+    border-radius: var(--chip-border-radius) !important;
+    box-sizing: border-box;
+
+    @each $size, $values in $sizearray {
+      &.v-btn--size-#{$size} {
+        $f: list.nth($values, 1);
+        $h: list.nth($values, 2);
+        $p: list.nth($values, 3);
+        $icon: list.nth($values, 4);
+
+        font-size: $f !important;
+        height: $h;
+        padding: 0 $p !important;
+
+        .ld-chip-close {
+          width: $icon;
+          height: $icon;
 
-      svg {
-        flex-shrink: 0;
+          svg {
+            width: calc($icon - 6px);
+            height: calc($icon - 6px);
+          }
+        }
+
+        &.ld-chip--focused {
+          &:after {
+            height: calc($h + 8px);
+          }
+        }
       }
     }
-  }
-  .v-chip.v-chip--density-compact {
-    height: var(--chip-height);
-
-    &.text-grey {
-      border: 1px solid var(--grey);
-      color: var(--grey) !important;
-      .v-icon {
-        color: var(--grey) !important;
-      }
-      svg {
-        color: var(--grey) !important;
+
+    &.ld-chip--focused {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        width: calc(100% + 10px);
+        border-radius: 20px;
+        border: 2px solid var(--focus);
+        opacity: 1;
       }
     }
-    &.text-primary {
-      border: 1px solid var(--primary-l-2);
-      color: var(--primary-l-2) !important;
-      .v-icon {
-        color: var(--primary-l-2) !important;
-      }
-      svg {
-        color: var(--primary-l-2) !important;
-      }
 
-      &.--active {
-        background-color: var(--primary-l-2) !important;
-        color: var(--white) !important;
+    @mixin chipflat($colorname, $color) {
+      &.bg-#{$colorname} {
+        border: 1px solid $color;
+        background-color: $color;
+        color: var(--white);
+
+        svg {
+          color: var(--white);
+        }
       }
     }
 
-    &.v-chip--badge {
-      border-radius: 0 !important;
-    }
-  }
+    @mixin chipoutlined(
+      $colorname,
+      $borderColor,
+      $color,
+      $bgHover,
+      $borderHover,
+      $bgActive,
+      $borderActive
+    ) {
+      &.v-btn--variant-outlined.text-#{$colorname} {
+        border: 1px solid $borderColor;
+        color: $color;
 
-  .v-chip--variant-tonal {
-    background-color: var(--primary-l-2);
-    color: var(--white);
-    .v-chip__underlay {
-      display: none;
-    }
-    .v-chip__close {
-      opacity: 0.6;
-    }
-  }
+        svg {
+          color: $color;
+        }
 
-  .v-chip.small-chip {
-    font-size: var(--font-size);
+        &:hover {
+          background-color: $bgHover !important;
+          border-color: $borderHover !important;
+        }
 
-    .v-btn {
-      transform: translateX(6px);
-    }
-  }
-  .v-chip.small-chip--clickable {
-    cursor: pointer;
+        &:active {
+          background-color: $bgActive !important;
+          border-color: $borderActive !important;
+        }
+
+        &[disabled] {
+          background-color: var(--grey-l-6) !important;
+          border-color: var(--grey-l-6) !important;
+          color: var(--grey-l-2) !important;
 
-    .v-chip__underlay,
-    .v-chip__overlay {
-      display: none;
+          svg {
+            color: var(--grey-l-2) !important;
+          }
+        }
+      }
     }
-  }
 
-  .v-chip.v-chip--badge {
-    font-size: var(--font-size);
+    // ------- primary
+
+    @include chipflat('primary', var(--primary));
+
+    @include chipoutlined(
+      'primary',
+      // default border color
+      var(--primary-l-3),
+      // default color
+      var(--primary),
+      // hover bg color
+      var(--primary-l-6),
+      // hover border color
+      var(--primary-l-2),
+      // active bg color
+      var(--primary-l-5),
+      // active border color
+      var(--primary-l-1),
+    );
+
+    // ------- grey
+
+    @include chipflat('grey', var(--grey));
+
+    @include chipoutlined(
+      'grey',
+      // default border color
+      var(--grey),
+      // default color
+      var(--grey-d-3),
+      // hover bg color
+      var(--grey-l-6),
+      // hover border color
+      var(--grey-l-5),
+      // active bg color
+      var(--grey-l-4),
+      // active border color
+      var(--grey-l-4),
+    );
+
+    .ld-chip-close {
+      display: flex;
+      align-items: center;
+    }
   }
 }