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

package/scss/core/components/molecules/notification.scss

@@ -0,0 +1,109 @@
+.ds-notification {
+  animation: enter 0.5s ease-in-out;
+  background-color: transparent;
+  border: 0;
+  border-left: $spacing--quark solid transparent;
+  color: var(--color__neutral--80);
+  font-family: var(--font__family--base);
+  font-size: $font__size--sm;
+  padding: 0;
+  position: relative;
+  width: 100%;
+
+  .ds-wrapper {
+    display: block;
+    line-height: 1.5em;
+  }
+
+  b,
+  strong {
+    font-weight: $font__weight--bold;
+  }
+
+  @keyframes enter {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  &--rounded {
+    border-radius: $border__radius--sm;
+  }
+
+  &--squared {
+    border-radius: 0;
+  }
+
+  &--info {
+    background-color: var(--color__info--lighter);
+    border-left: $spacing--quark solid var(--color__info);
+  }
+
+  &--success {
+    background-color: var(--color__success--lighter);
+    border-left: $spacing--quark solid var(--color__success);
+  }
+
+  &--warning {
+    background-color: var(--color__warning--lighter);
+    border-left: $spacing--quark solid var(--color__warning);
+  }
+
+  &--danger {
+    background-color: var(--color__danger--lighter);
+    border-left: $spacing--quark solid var(--color__danger);
+  }
+
+  &--elevation {
+    &-1 {
+      box-shadow: $shadow__level--1;
+    }
+
+    &-2 {
+      box-shadow: $shadow__level--2;
+    }
+
+    &-3 {
+      box-shadow: $shadow__level--3;
+    }
+
+    &-4 {
+      box-shadow: $shadow__level--4;
+    }
+  }
+
+  &__button {
+    cursor: pointer;
+  }
+
+  &__progress-bar {
+    bottom: 0;
+    height: $spacing--quark;
+    left: 0;
+    opacity: $opacity--heavy;
+    position: absolute;
+    transition: width 0.5s linear;
+
+    &--info {
+      background-color: var(--color__info);
+    }
+
+    &--success {
+      background-color: var(--color__success);
+    }
+
+    &--warning {
+      background-color: var(--color__warning);
+    }
+
+    &--danger {
+      background-color: var(--color__danger);
+    }
+  }
+}

package/scss/core/components/molecules/password-confirmation.scss

@@ -0,0 +1,16 @@
+.ds-password-confirmation {
+  &__list {
+    display: flex;
+
+    .ds-icon {
+      margin-top: $spacing--quark;
+    }
+  }
+
+  &__list--disc {
+    list-style: disc;
+    margin-left: $spacing--xxs;
+    margin-right: $spacing--xxs;
+    text-align: -webkit-match-parent;
+  }
+}

package/scss/core/components/molecules/stepper.scss

@@ -0,0 +1,84 @@
+.ds-stepper {
+  // CSS vars (light mode default)
+  --stepper__background--unselected: var(--color__neutral--00);
+  --stepper__button--hover: var(--color__primary);
+  --stepper__icon--hover: var(--color__neutral--00);
+
+  align-items: flex-start;
+  background-color: var(--background__color--backdrop);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font__family--base);
+  gap: $spacing--xxxs;
+  justify-content: center;
+  width: fit-content;
+
+  &__step-counter {
+    color: var(--color__neutral--70);
+    font-size: $font__size--sm;
+    font-weight: $font__weight--bold;
+  }
+
+  &__step {
+    align-items: center;
+    display: flex;
+    gap: $spacing--xs;
+    justify-content: center;
+  }
+
+  &__text {
+    align-items: center;
+    color: var(--text__color);
+    display: flex;
+    font-size: $font__size--lg;
+    font-weight: $font__weight--bold;
+    gap: $spacing--xxxs;
+    justify-content: center;
+  }
+
+  &__icon {
+    color: var(--text__color);
+  }
+
+  &__button {
+    background-color: var(--background__color--backdrop);
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  &__button--round {
+    background-color: var(--stepper__background--unselected);
+    border-radius: $border__radius--circular;
+    box-shadow: $shadow__level--1;
+    padding: $spacing__inset--nano;
+    transition: ease-in-out 0.3s;
+
+    &:hover {
+      background-color: var(--stepper__button--hover);
+
+      .ds-stepper__icon {
+        color: var(--stepper__icon--hover);
+      }
+    }
+  }
+
+  &__button--disabled {
+    background: var(--color__neutral--30);
+    cursor: not-allowed;
+    opacity: $opacity--medium;
+
+    &:hover {
+      background: var(--color__neutral--30);
+
+      .ds-stepper__icon {
+        color: var(--text__color);
+      }
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-stepper {
+  --stepper__background--unselected: var(--color__neutral--70);
+}

package/scss/core/components/molecules/table.scss

@@ -0,0 +1,95 @@
+.ds-table {
+  $self: &;
+
+  &__wrapper {
+    width: 100%;
+
+    @include mobile {
+      overflow: auto;
+    }
+  }
+
+  font-family: var(--font__family--base);
+  width: 100%;
+
+  &__head {
+    color: var(--text__color);
+    font-size: $font__size--sm;
+    font-weight: $font__weight--bold;
+  }
+
+  &__body {
+    border-radius: $border__radius--sm;
+    box-shadow: 0 0 0 1px var(--accordion-border-color);
+
+    .ds-table__row {
+      &:not(:last-child) {
+        border-bottom: $border__width--hairline solid
+          var(--accordion-border-color);
+      }
+
+      &:last-child {
+        border-radius: 0 0 $border__radius--sm $border__radius--sm;
+      }
+
+      &:hover {
+        background-color: var(--accordion-background-color--hover);
+      }
+
+      // .ds-table__cell {
+      //   &:last-child {
+      //     text-align: right;
+      //   }
+      // }
+    }
+  }
+
+  &__row {
+    td {
+      vertical-align: middle;
+    }
+
+    &:first-child {
+      td:first-child {
+        border-radius: $border__radius--sm 0 0;
+      }
+
+      td:last-child {
+        border-radius: 0 $border__radius--sm 0 0;
+      }
+    }
+
+    &:last-child {
+      td:first-child {
+        border-radius: 0 0 0 $border__radius--sm;
+      }
+
+      td:last-child {
+        border-radius: 0 0 $border__radius--sm;
+      }
+    }
+  }
+
+  &__cell {
+    align-items: center;
+    display: flex;
+    gap: $spacing--nano;
+    padding: $spacing__inset--nano;
+
+    &--align-left {
+      justify-content: flex-start;
+    }
+
+    &--align-center {
+      justify-content: center;
+    }
+
+    &--align-right {
+      justify-content: flex-end;
+    }
+
+    &:first-child {
+      text-align: left;
+    }
+  }
+}

package/scss/core/components/molecules/tabs.scss

@@ -0,0 +1,114 @@
+// === TABS TOKENS (only used multiple times) ===
+$tabs__padding-title: $spacing__inset--xs !default;
+
+// === TABS COMPONENT ===
+.ds-tabs {
+  // CSS vars (light mode default)
+  --tabs__background-header: var(--color__neutral--60);
+  --tabs__background-title: var(--color__neutral--20);
+  --tabs__background-title--active: var(--color__neutral--00);
+  --tabs__background-title--disabled: var(--color__neutral--30);
+  --tabs__color-title: var(--color__neutral--90);
+  --tabs__color-title--active: var(--color__primary);
+  --tabs__color-title--disabled: var(--color__neutral--50);
+
+  font-family: var(--font__family--base);
+  width: 100%;
+
+  &__header {
+    background-color: var(--tabs__background-header);
+    display: flex;
+    gap: 1px;
+    justify-content: space-between;
+  }
+
+  &__tab {
+    align-items: center;
+    background-color: var(--tabs__background-title);
+    color: var(--tabs__color-title);
+    display: flex;
+    flex-grow: 1;
+    font-size: $font__size--sm;
+    font-weight: $font__weight--semibold;
+    justify-content: center;
+    padding: $tabs__padding-title;
+
+    .ds-icon {
+      color: var(--tabs__color-title);
+    }
+
+    &-color--primary {
+      --tabs__color-title--active: var(--color__primary);
+    }
+
+    &-color--secondary {
+      --tabs__color-title--active: var(--color__secondary);
+    }
+
+    &-color--neutral {
+      --tabs__color-title--active: var(--color__neutral--50);
+    }
+
+    &-color--success {
+      --tabs__color-title--active: var(--color__success);
+    }
+
+    &-color--warning {
+      --tabs__color-title--active: var(--color__warning);
+    }
+
+    &-color--danger {
+      --tabs__color-title--active: var(--color__danger);
+    }
+
+    &-color--info {
+      --tabs__color-title--active: var(--color__info);
+    }
+
+    &--active,
+    &:hover {
+      background-color: var(--tabs__background-title--active);
+      border-top: 2px solid;
+      color: var(--tabs__color-title--active);
+      padding-top: calc($tabs__padding-title - 2px);
+
+      .ds-icon {
+        color: var(--tabs__color-title--active);
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &--disabled {
+      background-color: var(--tabs__background-title--disabled) !important;
+      border: none !important;
+      color: var(--tabs__color-title--disabled) !important;
+      cursor: not-allowed !important;
+      padding-top: $tabs__padding-title !important;
+
+      .ds-icon {
+        color: var(--tabs__color-title--disabled) !important;
+        cursor: not-allowed !important;
+      }
+    }
+  }
+
+  &__content {
+    .ds-wrapper {
+      display: block;
+    }
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-tabs {
+  --tabs__background-header: var(--color__neutral--40);
+  --tabs__background-title: var(--color__neutral--80);
+  --tabs__background-title--active: var(--color__neutral--100);
+  --tabs__background-title--disabled: var(--color__neutral--70);
+  --tabs__color-title: var(--color__neutral--10);
+  --tabs__color-title--active: var(--color__primary);
+  --tabs__color-title--disabled: var(--color__neutral--50);
+}

package/scss/core/components/molecules/theme-provider.scss

@@ -0,0 +1,6 @@
+.ds-theme {
+  background-color: var(--background__color--backdrop);
+  color: var(--text__color);
+  overflow-y: auto;
+  width: 100%;
+}

package/scss/core/components/organisms/notification-list.scss

@@ -0,0 +1,77 @@
+.ds-notification-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing--xxxs;
+  position: fixed;
+  width: 400px;
+
+  @include mobile {
+    width: 100%;
+  }
+
+  &--fluid {
+    width: 100%;
+  }
+
+  &--top-left {
+    left: $spacing--xxxs;
+    top: $spacing--xxxs;
+
+    @include mobile {
+      left: 0;
+      top: $spacing--nano;
+    }
+  }
+
+  &--top-center {
+    left: 50%;
+    top: $spacing--xxxs;
+    transform: translateX(-50%);
+
+    @include mobile {
+      left: 0;
+      top: $spacing--nano;
+    }
+  }
+
+  &--top-right {
+    right: $spacing--xxxs;
+    top: $spacing--xxxs;
+
+    @include mobile {
+      left: 0;
+      top: $spacing--nano;
+    }
+  }
+
+  &--bottom-left {
+    bottom: $spacing--xxxs;
+    left: $spacing--xxxs;
+
+    @include mobile {
+      bottom: $spacing--nano;
+      left: 0;
+    }
+  }
+
+  &--bottom-center {
+    bottom: $spacing--xxxs;
+    left: 50%;
+    transform: translateX(-50%);
+
+    @include mobile {
+      bottom: $spacing--nano;
+      left: 0;
+    }
+  }
+
+  &--bottom-right {
+    bottom: $spacing--xxxs;
+    right: $spacing--xxxs;
+
+    @include mobile {
+      bottom: $spacing--nano;
+      left: 0;
+    }
+  }
+}

package/scss/core/components/templates/split-layout.scss

@@ -0,0 +1,51 @@
+// SplitLayout component (structural only - uses global utilities for backgrounds)
+.ds-split-layout {
+  // Propriedades CSS (ordem alfabética)
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
+  width: 100%;
+
+  @include device-up('md') {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+  }
+
+  &__content {
+    // Propriedades CSS (ordem alfabética)
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    padding: 0 2rem;
+    text-align: center;
+
+    > * {
+      @include device-up('lg') {
+        max-width: 60%;
+      }
+    }
+
+    @include mobile {
+      padding: 2rem;
+    }
+
+    // KEEP: Component-specific mobile order classes
+    &--mobile-order-1 {
+      @include mobile {
+        order: 1;
+      }
+    }
+
+    &--mobile-order-2 {
+      @include mobile {
+        order: 2;
+      }
+    }
+
+    // NO background classes here
+    // Use global utilities instead: .bg-color__primary, .bg-color__secondary, etc.
+  }
+}

package/scss/core/components/templates/two-columns.scss

@@ -0,0 +1,30 @@
+.ds-two-columns {
+  &__main {
+    z-index: 0;
+  }
+
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  &__sidebar {
+    align-self: flex-start;
+    padding-top: 42px;
+    position: sticky;
+    top: 0;
+  }
+
+  &__sidebar > * {
+    margin-bottom: 16px;
+  }
+
+  &__sidebar > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.ds-theme {
+  overflow-y: unset !important;
+}

package/scss/core/functions/breakpoints.scss

@@ -0,0 +1,35 @@
+/**
+ * Breakpoint Function
+ */
+@use 'sass:map';
+
+@function breakpoint($key) {
+  @if map-has-key($breakpoint, $key) {
+    @return map.get($breakpoint, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $breakpoint.";
+  @return null;
+}
+
+// Minimum device breakpoint width. Smallest breakpoint will be a null value
+@function device-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return if(0 != $min, $min, null);
+}
+
+// Maximum device breakpoint width. Largest breakpoint will be a null value
+@function device-max(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $next: if(
+    list.index($breakpoint-names, $name) < list.length($breakpoint-names),
+    list.nth($breakpoint-names, list.index($breakpoint-names, $name) + 1),
+    null
+  );
+
+  @return if($next, device-min($next, $breakpoints) - 0.02px, null);
+}

package/scss/core/functions/fonts.scss

@@ -0,0 +1,17 @@
+@function font-weight($key) {
+  @if map-has-key($fontWeight, $key) {
+    @return map-get($fontWeight, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $fontWeight.";
+  @return null;
+}
+
+@function font-family($key) {
+  @if map-has-key($fontFamily, $key) {
+    @return map-get($fontFamily, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $fontFamily.";
+  @return null;
+}

package/scss/core/functions/index.scss

@@ -0,0 +1,5 @@
+// Structural functions (no theme dependency)
+@import 'breakpoints';
+@import 'fonts';
+@import 'spacings';
+@import 'tokens';

package/scss/core/functions/spacings.scss

@@ -0,0 +1,8 @@
+@function spacing($key) {
+  @if map-has-key($spacing, $key) {
+    @return map-get($spacing, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $spacing.";
+  @return null;
+}

package/scss/core/functions/tokens.scss

@@ -0,0 +1,14 @@
+// get token item in list
+@function get-token($list, $key) {
+  @if map-has-key($list, $key) {
+    @return map-get($list, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $list.";
+  @return null;
+}
+
+// merge token lists
+@function merge-token($list1, $list2) {
+  @return map-merge($list1, $list2);
+}