@akad/design-system 0.2.0-beta.9 → 1.0.0-alpha.2

package/scss/core/components/atoms/textarea.scss

@@ -0,0 +1,340 @@
+// === TEXTAREA COMPONENT ===
+.ds-textarea {
+  // CSS vars (defaults - themes can override in light/dark mode)
+  --textarea__background: var(--background__color);
+  --textarea__border--color: var(--color__neutral--90);
+  --textarea__text--color: var(--color__neutral--100);
+  --textarea__border-color--disable: var(--color__neutral--50);
+  --textarea__text-color--disable: var(--color__neutral--50);
+  --box-shadow-color: var(--textarea__border--color);
+
+  $self: &;
+
+  display: flex;
+  flex-direction: column-reverse;
+  font-family: var(--font__family--base);
+  margin-bottom: $spacing--xxs;
+  position: relative;
+  width: 100%;
+
+  &__label {
+    background: var(--textarea__background);
+    color: var(--textarea__text--color);
+    left: 10px;
+    padding: 0 5px;
+    position: absolute;
+  }
+
+  &__count {
+    background: var(--textarea__background);
+    font-weight: $font__weight--regular;
+    position: absolute;
+    right: 16px;
+    top: -5px;
+  }
+
+  &__tooltip {
+    position: absolute !important;
+    right: 8px;
+  }
+
+  &__description {
+    font-size: $font__size--xxs;
+    gap: $spacing--quark;
+    margin: $spacing--quark $spacing--xxxs;
+  }
+
+  &__textarea {
+    background: var(--textarea__background);
+    border: 0;
+    border-radius: $border__radius--sm;
+    box-shadow: 0 0 0 $border__width--hairline var(--box-shadow-color);
+    box-sizing: border-box;
+    color: var(--textarea__text--color);
+    display: block;
+    font-family: var(--font__family--highlight);
+    padding: $spacing--xxxs;
+    position: relative;
+    width: 100%;
+
+    &:hover {
+      --box-shadow-color: var(--textarea__border--color);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $border__width--thin var(--box-shadow-color);
+      outline: none;
+    }
+
+    &:not(:placeholder-shown) {
+      --box-shadow-color: var(--textarea__border--color);
+    }
+
+    &:disabled {
+      color: var(--textarea__text-color--disable);
+      cursor: not-allowed;
+
+      --box-shadow-color: var(--textarea__border-color--disable);
+
+      ~ .ds-textarea__label {
+        color: var(--textarea__text-color--disable);
+      }
+
+      ~ .ds-textarea__count {
+        color: var(--textarea__text-color--disable);
+      }
+
+      ~ .ds-textarea__tooltip .ds-textarea__icon {
+        color: var(--textarea__border-color--disable);
+      }
+    }
+  }
+
+  &--small {
+    .ds-textarea {
+      &__textarea {
+        font-size: $font__size--xxs;
+        min-height: $spacing--sm;
+      }
+
+      &__label {
+        font-size: $font__size--xxs;
+        top: calc(($font__size--xxs / -2) - 2px);
+      }
+
+      &__count {
+        font-size: $font__size--xxs;
+        top: calc(($font__size--xxs / -2) - 2px);
+      }
+
+      &__tooltip {
+        bottom: 0;
+
+        .ds-tooltip__wrapper {
+          margin-right: -7px;
+        }
+      }
+
+      &__icon {
+        font-size: $font__size--sm;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  &--medium {
+    .ds-textarea {
+      &__textarea {
+        font-size: $font__size--xs;
+        min-height: $spacing--md;
+      }
+
+      &__label {
+        font-size: $font__size--xs;
+        top: calc(($font__size--xs / -2) - 2px);
+      }
+
+      &__count {
+        font-size: $font__size--xs;
+        top: calc(($font__size--xs / -2) - 2px);
+      }
+
+      &__tooltip {
+        bottom: 0;
+
+        .ds-tooltip__wrapper {
+          margin-right: -3px;
+        }
+      }
+
+      &__icon {
+        font-size: $font__size--md;
+        margin-top: 2px;
+      }
+    }
+  }
+
+  &--large {
+    .ds-textarea {
+      &__textarea {
+        font-size: $font__size--sm;
+        min-height: $spacing--lg;
+      }
+
+      &__label {
+        font-size: $font__size--sm;
+        top: calc(($font__size--sm / -2) - 2px);
+      }
+
+      &__count {
+        font-size: $font__size--sm;
+        top: calc(($font__size--sm / -2) - 2px);
+      }
+
+      &__tooltip {
+        bottom: 0;
+      }
+
+      &__icon {
+        font-size: $font__size--lg;
+      }
+    }
+  }
+
+  &--animated {
+    .ds-textarea__label {
+      background: var(--textarea__background);
+      color: var(--textarea__text--color);
+      font-weight: $font__weight--regular;
+      padding: 0 5px;
+      pointer-events: none;
+      position: absolute;
+      transition: 0.2s ease all;
+    }
+
+    &.ds-textarea--small {
+      .ds-textarea {
+        &__label {
+          left: 8px;
+          top: 15px;
+        }
+
+        &__label--active {
+          font-size: $font__size--xxs;
+          left: 10px;
+          top: calc(($font__size--xxs / -2) - 2px);
+        }
+
+        &__count {
+          font-size: $font__size--xxs;
+          top: calc(($font__size--xxs / -2) - 2px);
+        }
+
+        &__tooltip {
+          bottom: 0;
+        }
+      }
+    }
+
+    &.ds-textarea--medium {
+      .ds-textarea {
+        &__label {
+          left: 10px;
+          top: 18px;
+        }
+
+        &__label--active {
+          font-size: $font__size--xs;
+          left: 11px;
+          top: calc(($font__size--xs / -2) - 2px);
+        }
+
+        &__count {
+          font-size: $font__size--xs;
+          top: calc(($font__size--xs / -2) - 2px);
+        }
+
+        &__tooltip {
+          bottom: 0;
+        }
+      }
+    }
+
+    &.ds-textarea--large {
+      .ds-textarea {
+        &__label {
+          left: 14px;
+          top: 22px;
+        }
+
+        &__label--active {
+          font-size: $font__size--sm;
+          left: 10px;
+          top: calc(($font__size--sm / -2) - 2px);
+        }
+
+        &__count {
+          font-size: $font__size--sm;
+          top: calc(($font__size--sm / -2) - 2px);
+        }
+
+        &__tooltip {
+          bottom: 0;
+        }
+      }
+    }
+  }
+
+  &--with-icon {
+    .ds-textarea {
+      &__textarea {
+        padding-right: 36px; // @TODO
+      }
+    }
+  }
+
+  &--error,
+  &--success {
+    .ds-textarea {
+      &__feedback {
+        align-items: center;
+        display: flex;
+        font-size: $font__size--xxs;
+        gap: $spacing--quark;
+        margin-top: $spacing--quark;
+
+        .ds-icon {
+          font-size: $font__size--xs;
+        }
+      }
+    }
+  }
+
+  &--error {
+    .ds-textarea {
+      &__textarea {
+        --box-shadow-color: var(--color__danger--dark);
+      }
+
+      &__label,
+      &__count,
+      &__feedback {
+        color: var(--color__danger--dark);
+      }
+
+      &__feedback {
+        .ds-icon {
+          color: var(--color__danger--dark);
+        }
+      }
+    }
+  }
+
+  &--success {
+    .ds-textarea {
+      &__textarea {
+        --box-shadow-color: var(--color__success--dark);
+      }
+
+      &__label,
+      &__count,
+      &__feedback {
+        color: var(--color__success--dark);
+      }
+
+      &__feedback {
+        .ds-icon {
+          color: var(--color__success--dark);
+        }
+      }
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-textarea {
+  --textarea__border--color: var(--color__neutral--00);
+  --textarea__text--color: var(--color__neutral--00);
+  --textarea__border-color--disable: var(--color__neutral--70);
+  --textarea__text-color--disable: var(--color__neutral--70);
+}

package/scss/core/components/atoms/tooltip.scss

@@ -0,0 +1,197 @@
+$arrow__size: $spacing--nano;
+
+.wrapper-before,
+%wrapper-before {
+  content: '';
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.ds-tooltip {
+  $self: &;
+
+  // CSS vars (light mode default)
+  --tooltip-background-color: var(--color__neutral--00);
+  --tooltip-text-color: var(--color__neutral--90);
+
+  display: inline-block;
+  line-height: 1em;
+  pointer-events: all;
+  position: relative;
+  vertical-align: middle;
+
+  &--center {
+    .ds-tooltip__wrapper {
+      &::before {
+        left: calc(50% - 8px);
+      }
+    }
+  }
+
+  &--top {
+    .ds-tooltip__wrapper {
+      box-shadow:
+        0 10px 20px 0 rgba($shadow__color, $opacity--light),
+        0 3px 6px 0 rgba($shadow__color, $opacity--light);
+
+      &::before {
+        @extend %wrapper-before;
+
+        border-left: $arrow__size solid transparent;
+        border-right: $arrow__size solid transparent;
+        border-top: $arrow__size solid var(--tooltip-background-color);
+        bottom: -$arrow__size;
+      }
+    }
+
+    &.ds-tooltip--initial {
+      .ds-tooltip__wrapper {
+        &::before {
+          left: $arrow__size;
+        }
+      }
+    }
+
+    &.ds-tooltip--end {
+      .ds-tooltip__wrapper {
+        &::before {
+          right: $arrow__size;
+        }
+      }
+    }
+  }
+
+  &--bottom {
+    .ds-tooltip__wrapper {
+      box-shadow:
+        0 -6px 20px 0 rgba($shadow__color, $opacity--light),
+        0 -1px 6px 0 rgba($shadow__color, $opacity--light);
+
+      &::before {
+        @extend %wrapper-before;
+
+        border-bottom: $arrow__size solid var(--tooltip-background-color);
+        border-left: $arrow__size solid transparent;
+        border-right: $arrow__size solid transparent;
+        top: -$arrow__size;
+      }
+    }
+
+    &.ds-tooltip--initial {
+      .ds-tooltip__wrapper {
+        &::before {
+          left: $arrow__size;
+        }
+      }
+    }
+
+    &.ds-tooltip--end {
+      .ds-tooltip__wrapper {
+        &::before {
+          right: $arrow__size;
+        }
+      }
+    }
+  }
+
+  &--right {
+    .ds-tooltip__wrapper {
+      box-shadow:
+        -10px 2px 20px 0 rgba($shadow__color, $opacity--light),
+        -3px 1px 6px 0 rgba($shadow__color, $opacity--light);
+
+      &::before {
+        @extend %wrapper-before;
+
+        border-bottom: $arrow__size solid transparent;
+        border-right: $arrow__size solid var(--tooltip-background-color);
+        border-top: $arrow__size solid transparent;
+        left: -$arrow__size;
+        top: calc(50% - $arrow__size);
+      }
+    }
+
+    &.ds-tooltip--initial {
+      .ds-tooltip__wrapper {
+        &::before {
+          top: $arrow__size * 2;
+        }
+      }
+    }
+
+    &.ds-tooltip--end {
+      .ds-tooltip__wrapper {
+        &::before {
+          bottom: $arrow__size;
+          top: auto;
+        }
+      }
+    }
+  }
+
+  &--left {
+    .ds-tooltip__wrapper {
+      box-shadow:
+        10px 1px 20px 0 rgba($shadow__color, $opacity--light),
+        3px 1px 6px 0 rgba($shadow__color, $opacity--light);
+
+      &::before {
+        @extend %wrapper-before;
+
+        border-bottom: $arrow__size solid transparent;
+        border-left: $arrow__size solid var(--tooltip-background-color);
+        border-top: $arrow__size solid transparent;
+        left: unset;
+        right: -$arrow__size;
+        top: calc(50% - $arrow__size);
+      }
+    }
+
+    &.ds-tooltip--initial {
+      .ds-tooltip__wrapper {
+        &::before {
+          top: $arrow__size;
+        }
+      }
+    }
+
+    &.ds-tooltip--end {
+      .ds-tooltip__wrapper {
+        &::before {
+          bottom: $arrow__size;
+          top: auto;
+        }
+      }
+    }
+  }
+
+  &__wrapper {
+    align-items: center;
+    background-color: var(--tooltip-background-color);
+    border-radius: $border__radius--sm;
+    color: var(--tooltip-text-color);
+    font-family: var(--font__family--base);
+    font-size: $font__size--xs;
+    font-weight: normal;
+    line-height: 1.35em;
+    max-width: 280px;
+    min-height: 20px;
+    padding: $spacing--nano 12px 12px;
+    position: absolute;
+    text-align: center;
+    width: max-content;
+    z-index: 3;
+
+    b,
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-tooltip {
+  --tooltip-background-color: var(--color__neutral--90);
+  --tooltip-text-color: var(--color__neutral--10);
+}

package/scss/core/components/bosons/container.scss

@@ -0,0 +1,5 @@
+.ds-container {
+  margin: 0 auto;
+  max-width: 1128px;
+  padding: 0 $spacing--xxxs;
+}

package/scss/core/components/bosons/flex-layout.scss

@@ -0,0 +1,45 @@
+.ds-flex-layout {
+  &--gap-nano {
+    gap: $spacing--nano;
+  }
+
+  &--gap-quark {
+    gap: $spacing--quark;
+  }
+
+  &--gap-xxxs {
+    gap: $spacing--xxxs;
+  }
+
+  &--gap-xxs {
+    gap: $spacing--xxs;
+  }
+
+  &--gap-xs {
+    gap: $spacing--xs;
+  }
+
+  &--gap-sm {
+    gap: $spacing--sm;
+  }
+
+  &--gap-md {
+    gap: $spacing--md;
+  }
+
+  &--gap-lg {
+    gap: $spacing--lg;
+  }
+
+  &--gap-xl {
+    gap: $spacing--xl;
+  }
+
+  &--gap-xxl {
+    gap: $spacing--xxl;
+  }
+
+  &--gap-xxxl {
+    gap: $spacing--xxxl;
+  }
+}

package/scss/core/components/bosons/grid-layout.scss

@@ -0,0 +1,76 @@
+.ds-grid-layout {
+  display: grid;
+  gap: 0;
+
+  &__item {
+    position: relative;
+  }
+
+  &--h-start {
+    justify-content: start;
+  }
+
+  &--h-end {
+    justify-content: end;
+  }
+
+  &--h-center {
+    justify-content: center;
+  }
+
+  &--h-stretch {
+    grid-template-columns: auto;
+    justify-content: stretch;
+  }
+
+  &--h-space-around {
+    justify-content: space-around;
+  }
+
+  &--h-space-between {
+    justify-content: space-between;
+  }
+
+  &--h-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  &--v-start {
+    align-items: start;
+  }
+
+  &--v-end {
+    align-items: end;
+  }
+
+  &--v-center {
+    align-items: center;
+  }
+
+  &--v-stretch {
+    align-items: stretch;
+    grid-template-columns: auto;
+  }
+
+  &--v-space-around {
+    align-items: space-around;
+  }
+
+  &--v-space-between {
+    align-items: space-between;
+  }
+
+  &--v-space-evenly {
+    align-items: space-evenly;
+  }
+
+  /* gap */
+  @each $size, $value in $spacing__inset {
+    &__v-gap--#{$size} {
+      row-gap: $value;
+    }
+    &__h-gap--#{$size} {
+      column-gap: $value;
+    }
+  }
+}