@akad/design-system 0.2.0-beta.8 → 1.0.0-alpha.1

package/scss/core/components/atoms/option.scss

@@ -0,0 +1,78 @@
+.ds-option {
+  $self: &;
+
+  // CSS vars (light mode default)
+  --option__fill: var(--color__neutral--80);
+  --option__fill--disabled: var(--color__neutral--50);
+  --option__background: var(--color__neutral--00);
+
+  align-items: center;
+  display: flex;
+  font-family: var(--font__family--base);
+  justify-content: flex-start;
+
+  &__text-container {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing--quark;
+    margin-left: $spacing--nano;
+    user-select: none;
+  }
+
+  &__label {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    font-size: $font__size--sm;
+    font-weight: $font__weight--bold;
+    gap: $spacing--quark;
+  }
+
+  &__detail {
+    cursor: pointer;
+    font-size: $font__size--xs;
+    font-weight: $font__weight--regular;
+  }
+
+  &__text-container--disabled {
+    color: var(--option__fill--disabled);
+    cursor: not-allowed;
+  }
+
+  .ds-option__icon.ds-icon {
+    color: var(--option__fill);
+  }
+
+  &--disabled {
+    color: var(--option__fill--disabled);
+    cursor: not-allowed;
+
+    .ds-option__icon.ds-icon {
+      color: var(--option__fill--disabled);
+    }
+  }
+
+  input {
+    /* The native appearance is hidden */
+    appearance: none;
+    opacity: 0;
+
+    // necessary to make input clickable
+
+    padding: $spacing--xxs;
+    position: absolute;
+
+    &:focus {
+      & + i.ds-icon {
+        box-shadow: inset 0 0 0 $border__width--thin var(--option__fill);
+      }
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-option {
+  --option__fill: var(--color__neutral--20);
+  --option__fill--disabled: var(--color__neutral--60);
+  --option__background: var(--color__neutral--90);
+}

package/scss/core/components/atoms/paragraph.scss

@@ -0,0 +1,44 @@
+// Paragraph component - p HTML tag + .ds-paragraph classes
+p,
+.ds-paragraph {
+  font-family: var(--font__family--base);
+  font-size: $font__size--sm;
+  line-height: 150%;
+  margin: 0;
+
+  @include mobile {
+    font-size: $font__size--xs;
+  }
+
+  b,
+  strong {
+    font-weight: $font__weight--bold;
+  }
+
+  a {
+    color: var(--color__info);
+    display: inline;
+    text-decoration: none;
+
+    &:visited {
+      color: var(--color__info--dark);
+    }
+
+    &:hover {
+      color: var(--color__info--light);
+      text-decoration: underline;
+    }
+  }
+
+  &--large {
+    font-size: $font__size--md;
+
+    @include mobile {
+      font-size: $font__size--sm;
+    }
+  }
+
+  &--small {
+    font-size: $font__size--xs;
+  }
+}

package/scss/core/components/atoms/progress.scss

@@ -0,0 +1,32 @@
+.ds-progress {
+  width: 100%;
+
+  &__container {
+    background-color: var(--color__neutral--30);
+    border-radius: $border__radius--lg;
+    width: 100%;
+  }
+
+  &__progress {
+    border-radius: $border__radius--lg;
+    padding: $spacing__inset--quark 0;
+    transition: 0.2s ease all;
+    width: 100%;
+  }
+
+  &__progress--danger {
+    background-color: var(--color__danger);
+  }
+
+  &__progress--success {
+    background-color: var(--color__success);
+  }
+
+  &__progress--success-dark {
+    background-color: var(--color__success--dark);
+  }
+
+  &__progress--warning {
+    background-color: var(--color__warning);
+  }
+}

package/scss/core/components/atoms/select.scss

@@ -0,0 +1,253 @@
+.ds-select {
+  // CSS vars (Select-specific - not shared with Input)
+  --select__background: var(--background__color);
+  --select__border--color: var(--color__neutral--90);
+  --select__text--color: var(--color__neutral--100);
+  --select__border-color--disable: var(--color__neutral--50);
+  --select__text-color--disable: var(--color__neutral--50);
+  --box-shadow-color: var(--select__border--color);
+
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font__family--highlight);
+  position: relative;
+  width: 100%;
+
+  &__label {
+    align-items: center;
+    background: var(--select__background);
+    color: var(--select__text--color);
+    display: flex;
+    font-family: inherit;
+    gap: 8px;
+    left: 12px;
+    padding: 0 $spacing__inset--quark;
+    pointer-events: none;
+    position: absolute;
+    transition: 0.15s cubic-bezier(0.4, 0, 1, 1);
+    user-select: none;
+    z-index: 1;
+
+    &--not-animated {
+      top: -8px !important;
+    }
+
+    &--has-value {
+      top: -10px !important;
+    }
+  }
+
+  &__label--hidden {
+    opacity: 0;
+    transition: 0.15s cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  &__feedback {
+    font-size: $font__size--xs;
+  }
+
+  &__feedback-container {
+    align-items: center;
+    display: flex;
+    margin-top: $spacing--quark;
+  }
+
+  &__tooltip {
+    display: inherit;
+  }
+
+  &--disabled {
+    color: var(--select__text-color--disable);
+
+    .ds-select__label {
+      color: var(--select__text-color--disable);
+    }
+
+    &::before {
+      border-color: var(--select__border-color--disable) transparent transparent
+        transparent !important;
+    }
+  }
+
+  select {
+    appearance: none;
+    background: var(--select__background);
+    border: none;
+    border-radius: $border__radius--sm;
+    box-shadow: 0 0 0 $border__width--hairline var(--box-shadow-color);
+    color: var(--select__text--color);
+    font-family: inherit;
+    font-weight: $font__weight--regular;
+    outline: none;
+    overflow: hidden;
+    padding: $spacing--xxxs;
+    width: 100%;
+
+    option {
+      background: var(--select__background);
+      color: var(--select__text--color);
+      font-family: inherit;
+    }
+
+    &:disabled {
+      color: var(--select__text-color--disable);
+      cursor: not-allowed;
+
+      --box-shadow-color: var(--select__border-color--disable);
+    }
+  }
+
+  &::before {
+    border: 6px solid;
+    border-color: var(--select__border--color) transparent transparent
+      transparent;
+    content: '';
+    height: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 12px;
+    top: 18px;
+    width: 0;
+  }
+
+  &--active {
+    select {
+      box-shadow: 0 0 0 $border__width--thin var(--box-shadow-color);
+    }
+
+    &::before {
+      top: 12px !important;
+      transform: rotate(180deg);
+    }
+  }
+
+  &--sm {
+    .ds-select__label {
+      font-size: $font__size--xxs;
+      top: 14px;
+    }
+
+    .ds-select__icon {
+      font-size: $font__size--xs;
+    }
+
+    select {
+      font-size: $font__size--xxs;
+      height: $spacing--sm;
+      padding: 12px $spacing--xxxs 14px;
+    }
+  }
+
+  &--md {
+    .ds-select__label {
+      font-size: $font__size--xs;
+      height: 16px;
+      top: 16px;
+    }
+
+    .ds-select__icon {
+      font-size: $font__size--md;
+    }
+
+    select {
+      font-size: $font__size--xs;
+      height: $spacing--md;
+      padding: 14px $spacing--xxxs;
+    }
+
+    &::before {
+      border: 6px solid;
+      border-color: var(--select__border--color) transparent transparent
+        transparent;
+      content: '';
+      height: 0;
+      position: absolute;
+      right: 12px;
+      top: 20px;
+      width: 0;
+    }
+  }
+
+  &--lg {
+    .ds-select__label {
+      font-size: $font__size--sm;
+      top: 18px;
+    }
+
+    .ds-select__icon {
+      font-size: $font__size--lg;
+    }
+
+    &.ds-select--active {
+      &::before {
+        top: $spacing--xxxs !important;
+        transform: rotate(180deg);
+      }
+    }
+
+    select {
+      font-size: $font__size--sm;
+      height: $spacing--lg;
+    }
+
+    &::before {
+      border: 6px solid;
+      border-color: var(--select__border--color) transparent transparent
+        transparent;
+      content: '';
+      height: 0;
+      position: absolute;
+      right: 12px;
+      top: $spacing--xxs;
+      width: 0;
+    }
+  }
+
+  &--success {
+    .ds-select {
+      &__label {
+        color: var(--color__success--dark);
+      }
+
+      &__feedback {
+        color: var(--color__success--dark);
+      }
+
+      &__icon {
+        color: var(--color__success--dark);
+      }
+    }
+
+    select {
+      --box-shadow-color: var(--color__success--dark);
+    }
+  }
+
+  &--error {
+    .ds-select {
+      &__label {
+        color: var(--color__danger--dark);
+      }
+
+      &__feedback {
+        color: var(--color__danger--dark);
+      }
+
+      &__icon {
+        color: var(--color__danger--dark);
+      }
+    }
+
+    select {
+      --box-shadow-color: var(--color__danger--dark);
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-select {
+  --select__border--color: var(--color__neutral--00);
+  --select__text--color: var(--color__neutral--00);
+  --select__border-color--disable: var(--color__neutral--70);
+  --select__text-color--disable: var(--color__neutral--70);
+}

package/scss/core/components/atoms/subtitle.scss

@@ -0,0 +1,21 @@
+// Subtitle component
+.ds-subtitle {
+  font-family: var(--font__family--base);
+  line-height: 150%;
+
+  &--large {
+    font-size: $font__size--lg;
+
+    @include mobile {
+      font-size: $font__size--sm;
+    }
+  }
+
+  &--small {
+    font-size: $font__size--md;
+
+    @include mobile {
+      font-size: $font__size--xs;
+    }
+  }
+}