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

package/scss/core/components/atoms/caption.scss

@@ -0,0 +1,13 @@
+.ds-caption {
+  $self: &;
+
+  display: inline;
+  font-family: var(--font__family--base);
+  font-size: $font__size--xs;
+  line-height: 150%;
+
+  b,
+  strong {
+    font-weight: $font__weight--bold;
+  }
+}

package/scss/core/components/atoms/card.scss

@@ -0,0 +1,24 @@
+// Card component
+.ds-card {
+  // Defaults (uses theme globals - can be overridden with utilities)
+  background-color: var(--background__color);
+
+  // Propriedades CSS (ordem alfabética)
+  border-left-style: solid;
+  border-left-width: 0;
+  border-radius: $border__radius--sm;
+  color: var(--text__color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font__family--base);
+  font-size: $font__size--xs;
+  gap: $spacing--nano;
+  padding: $spacing--xxxs;
+  position: relative;
+
+  // NO utility classes here
+  // Use global utilities instead:
+  // - Background: .bg-color__primary, .bg-color__secondary, etc.
+  // - Border: .border-color__primary, .border-color__secondary, etc.
+  // - Elevation: .elevation-1, .elevation-2, .elevation-3, .elevation-4
+}

package/scss/core/components/atoms/checkbox.scss

@@ -0,0 +1,61 @@
+.ds-checkbox {
+  // CSS vars (light mode default)
+  --checkbox-color: var(--color__neutral--80);
+  --checkbox-color--disabled: var(--color__neutral--50);
+
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--font__family--base);
+  gap: $spacing--xxxs;
+  width: fit-content;
+
+  &--disabled {
+    color: var(--checkbox-color--disabled);
+    cursor: not-allowed;
+
+    .ds-checkbox__icon.ds-icon {
+      color: var(--checkbox-color--disabled);
+    }
+  }
+
+  input[type='checkbox'].ds-checkbox__input {
+    appearance: none;
+    opacity: 0;
+    position: absolute;
+
+    &:focus {
+      & + i.ds-icon {
+        box-shadow: inset 0 0 0 $border__width--thin var(--checkbox-color);
+      }
+    }
+  }
+
+  &__icon.ds-icon {
+    color: var(--checkbox-color);
+  }
+
+  &__label {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.5em;
+
+    &-title {
+      font-size: $font__size--sm;
+      font-weight: $font__weight--bold;
+    }
+
+    &-description {
+      font-size: $font__size--sm;
+      font-weight: $font__weight--regular;
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-checkbox {
+  --checkbox-color: var(--color__neutral--10);
+  --checkbox-color--disabled: var(--color__neutral--60);
+}

package/scss/core/components/atoms/heading.scss

@@ -0,0 +1,69 @@
+// Heading component - h1-h6 HTML tags + .ds-heading classes
+h1,
+.ds-heading,
+.ds-heading--1 {
+  font-family: var(--font__family--highlight);
+  font-size: $font__size--huge;
+  line-height: 125%;
+
+  @include mobile {
+    font-size: $font__size--xxxl;
+  }
+}
+
+h2,
+.ds-heading--2 {
+  font-family: var(--font__family--highlight);
+  font-size: $font__size--xxxl;
+  line-height: 125%;
+
+  @include mobile {
+    font-size: $font__size--xxl;
+  }
+}
+
+h3,
+.ds-heading--3 {
+  font-family: var(--font__family--highlight);
+  font-size: $font__size--xxl;
+  line-height: 125%;
+
+  @include mobile {
+    font-size: $font__size--xl;
+  }
+}
+
+h4,
+.ds-heading--4 {
+  font-family: var(--font__family--highlight);
+  font-size: $font__size--xl;
+  line-height: 150%;
+
+  @include mobile {
+    font-size: $font__size--lg;
+  }
+}
+
+h5,
+.ds-heading--5 {
+  font-family: var(--font__family--highlight);
+  font-size: $font__size--lg;
+  font-weight: $font__weight--semibold;
+  line-height: 150%;
+
+  @include mobile {
+    font-size: $font__size--md;
+  }
+}
+
+h6,
+.ds-heading--6 {
+  font-family: var(--font__family--highlight);
+  font-size: $font__size--md;
+  font-weight: $font__weight--medium;
+  line-height: 150%;
+
+  @include mobile {
+    font-size: $font__size--sm;
+  }
+}

package/scss/core/components/atoms/horizontal-rule.scss

@@ -0,0 +1,27 @@
+.ds-hr {
+  // CSS var (light mode default - same for dark mode)
+  --hr-border-color: var(--color__neutral--50);
+
+  border: 0;
+  border-color: var(--hr-border-color);
+  border-top-style: solid;
+  border-top-width: $border__width--thin;
+  margin: 0;
+  width: 100%;
+
+  &--small {
+    border-top-width: $border__width--hairline;
+  }
+
+  &--large {
+    border-top-width: $border__width--thick;
+  }
+
+  &--dotted {
+    border-top-style: dotted;
+  }
+
+  &--dashed {
+    border-top-style: dashed;
+  }
+}

package/scss/core/components/atoms/icon.scss

@@ -0,0 +1,49 @@
+// Icon component (structural only - uses global utilities for colors)
+.ds-icon {
+  // Propriedades CSS (ordem alfabética)
+  cursor: pointer;
+  display: inline-block;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  user-select: none;
+
+  // NO color classes here
+  // Use global utilities instead: .color__primary, .color__secondary, etc.
+
+  // Size variants (structural - keep)
+  &--xxs {
+    font-size: $font__size--xxs;
+  }
+
+  &--xs {
+    font-size: $font__size--xs;
+  }
+
+  &--sm {
+    font-size: $font__size--sm;
+  }
+
+  &--md {
+    font-size: $font__size--md;
+  }
+
+  &--lg {
+    font-size: $font__size--lg;
+  }
+
+  &--xl {
+    font-size: $font__size--xl;
+  }
+
+  &--xxl {
+    font-size: $font__size--xxl;
+  }
+
+  &--xxxl {
+    font-size: $font__size--xxxl;
+  }
+
+  &--huge {
+    font-size: $font__size--huge;
+  }
+}

package/scss/core/components/atoms/input.scss

@@ -0,0 +1,333 @@
+// === INPUT COMPONENT ===
+.ds-input {
+  // CSS vars (defaults - themes can override in light/dark mode)
+  --input__background: var(--background__color);
+  --input__border--color: var(--color__neutral--90);
+  --input__text--color: var(--color__neutral--100);
+  --input__border-color--disable: var(--color__neutral--50);
+  --input__text-color--disable: var(--color__neutral--50);
+  --box-shadow-color: var(--input__border--color);
+
+  $self: &;
+
+  &__label {
+    align-items: center;
+    background: var(--input__background);
+    color: var(--input__text--color);
+    display: flex;
+    gap: 8px;
+    left: 12px;
+    padding: 0 4px;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+  }
+
+  &__password-icon {
+    bottom: 8px;
+    position: absolute !important;
+    right: 8px;
+
+    &.ds-icon {
+      color: var(--input__text--color);
+    }
+  }
+
+  // Setting height to a "fixed" value.
+  // It's important to don't break password and tooltip icon placement
+  &__feedback {
+    height: $spacing--xxxs;
+    margin-top: $spacing--quark;
+  }
+
+  &__input {
+    appearance: none;
+    background: var(--input__background);
+    border: none;
+    border-radius: $border__radius--sm;
+    box-shadow: 0 0 0 $border__width--hairline var(--box-shadow-color);
+    box-sizing: border-box;
+    color: var(--input__text--color);
+    display: block;
+    font-family: var(--font__family--highlight);
+    padding: 0 $spacing__inset--xs;
+    position: relative;
+    width: 100%;
+
+    &:hover {
+      --box-shadow-color: var(--input__border--color);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $border__width--thin var(--box-shadow-color);
+      outline: none;
+    }
+
+    &:not(:placeholder-shown) {
+      --box-shadow-color: var(--input__border--color);
+    }
+
+    &:disabled {
+      color: var(--input__text-color--disable);
+      cursor: not-allowed;
+
+      --box-shadow-color: var(--input__border-color--disable);
+
+      ~ .ds-input__label {
+        color: var(--input__text-color--disable);
+      }
+
+      ~ .ds-input__tooltip .ds-input__icon {
+        color: var(--input__border-color--disable);
+      }
+    }
+  }
+
+  &--small {
+    .ds-input {
+      &__input {
+        font-size: $font__size--xxs;
+        height: $spacing--sm;
+      }
+
+      &__label {
+        font-size: $font__size--xxs;
+        height: $font__size--sm;
+        top: calc(($font__size--xxs / -2) - 3px);
+      }
+
+      &__tooltip {
+        .ds-tooltip__wrapper {
+          margin-right: -7px;
+        }
+      }
+
+      &__password-icon {
+        bottom: 20px;
+        font-size: $font__size--lg;
+        padding: $spacing__inset--nano;
+        position: absolute !important;
+        right: 0;
+      }
+
+      &__icon {
+        font-size: $font__size--sm;
+      }
+    }
+  }
+
+  &--medium {
+    .ds-input {
+      &__input {
+        font-size: $font__size--xs;
+        height: $spacing--md;
+      }
+
+      &__label {
+        font-size: $font__size--xs;
+        height: $font__size--md;
+        top: calc(($font__size--xs / -2) - 4px);
+      }
+
+      &__tooltip {
+        .ds-tooltip__wrapper {
+          margin-right: -3px;
+        }
+      }
+
+      &__password-icon {
+        bottom: 22px;
+        font-size: $font__size--xl;
+        padding: $spacing__inset--nano;
+        position: absolute !important;
+        right: 0;
+      }
+
+      &__icon {
+        font-size: $font__size--md;
+      }
+    }
+
+    &.ds-input--with-icon {
+      > .ds-input__icon {
+        top: 15px;
+      }
+    }
+  }
+
+  &--large {
+    .ds-input {
+      &__input {
+        font-size: $font__size--sm;
+        height: $spacing--lg;
+      }
+
+      &__label {
+        font-size: $font__size--sm;
+        height: $font__size--lg;
+        top: calc(($font__size--sm / -2) - 4px);
+      }
+
+      &__password-icon {
+        bottom: 18px;
+        font-size: $font__size--xl;
+        padding: $spacing__inset--xs $spacing__inset--nano;
+        position: absolute !important;
+        right: 0;
+      }
+
+      &__icon {
+        font-size: $font__size--lg;
+      }
+    }
+
+    &.ds-input--with-icon {
+      > .ds-input__icon {
+        top: 18px;
+      }
+    }
+  }
+
+  &--no-margin {
+    margin: 0;
+  }
+
+  &--animated {
+    .ds-input__label {
+      color: var(--input__text--color);
+      font-weight: $font__weight--regular;
+      transition: 0.2s ease all;
+    }
+
+    &.ds-input--small {
+      .ds-input {
+        &__label {
+          left: 8px;
+          top: 12px;
+        }
+
+        &__label--active {
+          font-size: $font__size--xxs;
+          left: 12px;
+          top: calc(($font__size--xxs / -2) - 3px);
+        }
+      }
+    }
+
+    &.ds-input--medium {
+      .ds-input {
+        &__label {
+          left: 12px;
+          top: 16px;
+        }
+
+        &__label--active {
+          font-size: $font__size--xs;
+          left: 12px;
+          top: calc(($font__size--xs / -2) - 4px);
+        }
+      }
+    }
+
+    &.ds-input--large {
+      .ds-input {
+        &__label {
+          left: 14px;
+          top: 18px;
+        }
+
+        &__label--active {
+          font-size: $font__size--sm;
+          left: 12px;
+          top: calc(($font__size--sm / -2) - 4px);
+        }
+      }
+    }
+  }
+
+  &--with-icon {
+    > .ds-input__icon {
+      cursor: default;
+      position: absolute;
+      right: 8px;
+      top: 13px;
+    }
+
+    .ds-input {
+      &__input {
+        padding-right: 36px; // @TODO
+      }
+    }
+  }
+
+  &--error,
+  &--success {
+    .ds-input {
+      &__feedback {
+        align-items: center;
+        display: flex;
+        font-size: $font__size--xxs;
+        gap: $spacing--quark;
+
+        .ds-icon {
+          font-size: $font__size--xs;
+        }
+      }
+    }
+  }
+
+  &--error {
+    .ds-input {
+      &__input {
+        --box-shadow-color: var(--color__danger--dark);
+      }
+
+      &__label,
+      &__feedback {
+        color: var(--color__danger--dark);
+      }
+
+      &__feedback,
+      &__tooltip {
+        .ds-icon {
+          color: var(--color__danger--dark);
+        }
+      }
+    }
+  }
+
+  &--success {
+    .ds-input {
+      &__input {
+        --box-shadow-color: var(--color__success--dark);
+      }
+
+      &__label,
+      &__feedback {
+        color: var(--color__success--dark);
+      }
+
+      &__feedback,
+      &__tooltip {
+        .ds-icon {
+          color: var(--color__success--dark);
+        }
+      }
+    }
+  }
+
+  display: flex;
+  flex-direction: column-reverse;
+  font-family: var(--font__family--highlight);
+  margin-bottom: $spacing--xxxs;
+  position: relative;
+  width: 100%;
+}
+
+// Dark mode
+[data-theme='dark'] .ds-input {
+  --input__border--color: var(--color__neutral--00);
+  --input__text--color: var(--color__neutral--00);
+  --input__border-color--disable: var(--color__neutral--70);
+  --input__text-color--disable: var(--color__neutral--70);
+}

package/scss/core/components/atoms/loading.scss

@@ -0,0 +1,120 @@
+.ds-loading {
+  align-items: center;
+  background: none;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+
+  &--absolute {
+    position: absolute;
+  }
+
+  &__background {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+
+    &--neutral-20 {
+      background-color: var(--color__neutral--20);
+    }
+
+    &--neutral-10 {
+      background-color: var(--color__neutral--10);
+    }
+
+    &--neutral-05 {
+      background-color: var(--color__neutral--05);
+    }
+
+    &--neutral-00 {
+      background-color: var(--color__neutral--00);
+    }
+
+    &--opacity {
+      opacity: $opacity--heavy;
+    }
+  }
+
+  &__dots {
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+    background-color: var(--color__primary);
+    border-radius: 5px;
+    color: var(--color__primary);
+    height: 8px;
+    position: relative;
+    width: 8px;
+
+    &::after,
+    &::before {
+      animation: dot-flashing 1s infinite alternate;
+      background-color: var(--color__primary);
+      border-radius: 5px;
+      color: var(--color__primary);
+      content: '';
+      display: inline-block;
+      height: 8px;
+      position: absolute;
+      top: 0;
+      width: 8px;
+    }
+
+    &::before {
+      animation-delay: 0s;
+      left: -15px;
+    }
+
+    &::after {
+      animation-delay: 1s;
+      left: 15px;
+    }
+
+    &--medium {
+      height: 10px;
+      width: 10px;
+
+      &::after,
+      &::before {
+        height: 10px;
+        width: 10px;
+      }
+    }
+
+    &--large {
+      border-radius: 10px;
+      height: 15px;
+      width: 15px;
+
+      &::after,
+      &::before {
+        border-radius: 10px;
+        height: 15px;
+        width: 15px;
+      }
+
+      &::before {
+        left: -20px;
+      }
+
+      &::after {
+        left: 20px;
+      }
+    }
+  }
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: var(--color__primary);
+  }
+
+  50%,
+  100% {
+    background-color: var(--color__primary--lighter);
+  }
+}