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

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

@@ -0,0 +1,79 @@
+$prefix: 'ds-grid' !default;
+$columns: 12 !default;
+$column-gap: $spacing--xxxs !default;
+$column-gap-sm: $spacing--xxs !default;
+$row-gap: 0;
+$row-gap-sm: 0;
+
+// The Grid Container.
+.#{$prefix} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  // Reverse order rows
+  &--reverse {
+    flex-direction: column-reverse;
+  }
+
+  @each $breakpoint, $width in $grid-breakpoints {
+    $min: device-min($breakpoint, $grid-breakpoints);
+    $label: if($min, $breakpoint + '-reverse', 'reverse');
+
+    @include device-up($breakpoint, $grid-breakpoints) {
+      &--#{$label} {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+}
+
+// The row
+.#{$prefix}__row {
+  display: grid;
+  gap: $row-gap $column-gap;
+  grid-template-columns: repeat($columns, 1fr);
+
+  &--auto.#{$prefix}__row {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+
+  &--no-gap.#{$prefix}__row {
+    gap: 0;
+  }
+
+  // Reverse order column
+  @each $breakpoint, $width in $grid-breakpoints {
+    $min: device-min($breakpoint, $grid-breakpoints);
+    $label: if($min, $breakpoint + '-reverse', 'reverse');
+
+    @include device-up($breakpoint, $grid-breakpoints) {
+      &--#{$label} {
+        @for $i from 1 through $columns {
+          .#{$prefix}__col:nth-child(#{$i}) {
+            order: $columns - $i + 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+@for $i from 1 through $columns {
+  .#{$prefix}__col-#{$i} {
+    @include grid-col($i);
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $min: device-min($breakpoint, $grid-breakpoints);
+  $label: if($min, 'col--' + $breakpoint, 'col');
+
+  @include device-up($breakpoint, $grid-breakpoints) {
+    @for $i from 1 through $columns {
+      .#{$prefix}__#{$label}-#{$i} {
+        @include grid-col($i);
+      }
+    }
+  }
+}

package/scss/core/components/bosons/spacer.scss

@@ -0,0 +1,45 @@
+.ds-spacer {
+  &__vertical {
+    @each $modifier in ('quark', 'nano', 'xxxs', 'xxs', 'xs', 'sm', 'none') {
+      &--#{$modifier} {
+        @if $modifier == 'quark' {
+          height: $spacing--quark;
+        } @else if $modifier == 'nano' {
+          height: $spacing--nano;
+        } @else if $modifier == 'xxxs' {
+          height: $spacing--xxxs;
+        } @else if $modifier == 'xxs' {
+          height: $spacing--xxs;
+        } @else if $modifier == 'xs' {
+          height: $spacing--xs;
+        } @else if $modifier == 'sm' {
+          height: $spacing--sm;
+        } @else if $modifier == 'none' {
+          height: 0;
+        }
+      }
+    }
+  }
+
+  &__horizontal {
+    @each $modifier in ('quark', 'nano', 'xxxs', 'xxs', 'xs', 'sm', 'none') {
+      &--#{$modifier} {
+        @if $modifier == 'quark' {
+          width: $spacing--quark;
+        } @else if $modifier == 'nano' {
+          width: $spacing--nano;
+        } @else if $modifier == 'xxxs' {
+          width: $spacing--xxxs;
+        } @else if $modifier == 'xxs' {
+          width: $spacing--xxs;
+        } @else if $modifier == 'xs' {
+          width: $spacing--xs;
+        } @else if $modifier == 'sm' {
+          width: $spacing--sm;
+        } @else if $modifier == 'none' {
+          width: 0;
+        }
+      }
+    }
+  }
+}

package/scss/core/components/bosons/wrapper.scss

@@ -0,0 +1,32 @@
+$sides: ('top', 'right', 'bottom', 'left');
+
+.ds-wrapper {
+  display: flex;
+
+  @each $size, $value in $spacing__inset {
+    &--#{$size} {
+      padding: $value;
+    }
+
+    @each $side in $sides {
+      &__#{$side}--#{$size} {
+        padding-#{$side}: $value !important;
+      }
+    }
+  }
+
+  @each $display, $size in $breakpoint {
+    @media (max-width: #{$size}) {
+      @each $size, $value in $spacing__inset {
+        @each $side in $sides {
+          &__#{$display}-#{$side}--#{$size} {
+            padding-#{$side}: $value !important;
+          }
+        }
+        &--#{$display}-#{$size} {
+          padding: $value;
+        }
+      }
+    }
+  }
+}

package/scss/core/components/index.scss

@@ -0,0 +1,49 @@
+// Components index (flat structure - lowercase/kebab-case)
+
+// Bosons (Layout components)
+@import 'bosons/container';
+@import 'bosons/flex-layout';
+@import 'bosons/grid';
+@import 'bosons/grid-layout';
+@import 'bosons/spacer';
+@import 'bosons/wrapper';
+
+// Atoms
+@import 'atoms/button';
+@import 'atoms/card';
+@import 'atoms/caption';
+@import 'atoms/checkbox';
+@import 'atoms/heading';
+@import 'atoms/horizontal-rule';
+@import 'atoms/icon';
+@import 'atoms/input';
+@import 'atoms/loading';
+@import 'atoms/option';
+@import 'atoms/paragraph';
+@import 'atoms/progress';
+@import 'atoms/select';
+@import 'atoms/subtitle';
+@import 'atoms/textarea';
+@import 'atoms/tooltip';
+
+// Molecules
+@import 'molecules/accordion';
+@import 'molecules/active-tags';
+@import 'molecules/carousel';
+@import 'molecules/editable-select';
+@import 'molecules/indicator';
+@import 'molecules/inline-editable';
+@import 'molecules/modal';
+@import 'molecules/notification';
+@import 'molecules/password-confirmation';
+@import 'molecules/stepper';
+@import 'molecules/table';
+@import 'molecules/tabs';
+@import 'molecules/theme-provider';
+
+// Organisms
+@import 'organisms/notification-list';
+
+// Templates
+@import 'templates/split-layout';
+@import 'templates/two-columns';

package/scss/core/components/molecules/accordion.scss

@@ -0,0 +1,93 @@
+.ds-accordion {
+  // CSS vars (light mode default)
+  --accordion-background-color: var(--background__color);
+  --accordion-background-color--hover: var(--color__neutral--10);
+  --accordion-title-color: var(--color__neutral--100);
+  --accordion-content-color: var(--color__neutral--100);
+  --accordion-border-color: var(--color__neutral--40);
+
+  border: $border__width--hairline solid var(--accordion-border-color);
+  border-radius: $spacing--quark;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.ds-accordion-item {
+  $self: &;
+
+  &:not(:last-child) {
+    border-bottom: $border__width--hairline solid var(--accordion-border-color);
+  }
+
+  &:first-child {
+    .ds-accordion-item__button {
+      border-radius: $spacing--quark $spacing--quark 0 0;
+    }
+  }
+
+  &:last-child {
+    .ds-accordion-item__button {
+      border-radius: 0 0 $spacing--quark $spacing--quark;
+    }
+  }
+
+  &__button {
+    align-items: center;
+    background-color: var(--accordion-background-color);
+    border: 0;
+    color: var(--accordion-title-color);
+    cursor: pointer;
+    display: flex;
+    gap: $spacing--nano;
+    justify-content: space-between;
+    padding: $spacing--xxxs;
+    user-select: none;
+    width: 100%;
+
+    &:focus {
+      outline-color: var(--button-background-color__primary--hover);
+    }
+
+    &:hover {
+      background-color: var(--accordion-background-color--hover);
+    }
+
+    .ds-paragraph {
+      text-align: left;
+      width: 100%;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    width: 100%;
+  }
+
+  &--active {
+    outline: none;
+
+    .ds-accordion-item__button {
+      outline: none;
+
+      .ds-accordion-item__icon {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  &__content {
+    color: var(--accordion-content-color);
+    padding: $spacing--xxxs;
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-accordion {
+  --accordion-background-color: var(--background__color);
+  --accordion-background-color--hover: var(--color__neutral--80);
+  --accordion-title-color: var(--color__neutral--00);
+  --accordion-content-color: var(--color__neutral--00);
+  --accordion-border-color: var(--color__neutral--40);
+}

package/scss/core/components/molecules/active-tags.scss

@@ -0,0 +1,58 @@
+/* active-tags.css */
+.active-tags {
+  display: flex;
+  gap: 18px;
+
+  &__title {
+    align-items: center;
+    background-color: var(--color__primary);
+    border-radius: $border__radius--sm 0 0 $border__radius--sm;
+    color: var(--color__neutral--00);
+    display: flex;
+    font-weight: $font__weight--bold;
+    height: 40px;
+    justify-content: center;
+    min-width: 96px;
+    padding: 0 10px;
+    position: relative;
+
+    &::after {
+      border-bottom: 20px solid transparent;
+      border-left: 13px solid var(--color__primary);
+      border-top: 20px solid transparent;
+      content: '';
+      display: block;
+      height: 0;
+      position: absolute;
+      right: -13px;
+      top: 0;
+      width: 0;
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing--nano;
+  }
+
+  &__item {
+    align-items: center;
+    background-color: var(--color__primary--lighter);
+    border-radius: $border__radius--sm;
+    color: var(--color__neutral--90);
+    display: flex;
+    gap: $spacing--quark;
+    height: 40px;
+    padding: 0 $spacing--nano;
+
+    p {
+      font-weight: $font__weight--bold;
+    }
+
+    &--no-close {
+      background-color: var(--color__neutral--70);
+      color: var(--color__neutral--00);
+    }
+  }
+}

package/scss/core/components/molecules/carousel.scss

@@ -0,0 +1,67 @@
+.ds-carousel {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  justify-content: center;
+  max-height: 550px;
+  padding-block: 60px;
+
+  &__content {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__dots {
+    display: flex;
+    justify-content: center;
+    margin-top: auto;
+
+    &-wrapper {
+      display: flex;
+      gap: 24px;
+      justify-content: center;
+    }
+  }
+
+  &__image-wrapper {
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__image {
+    left: 50%;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity 1s ease-in-out;
+
+    &.active {
+      opacity: 1;
+      pointer-events: auto;
+      z-index: 1;
+    }
+
+    &.inactive {
+      opacity: 0;
+      z-index: 0;
+    }
+  }
+}
+
+.dot {
+  background-color: var(--color__neutral--30);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 16px;
+  transition: all 0.3s ease-in-out;
+  width: 16px;
+
+  &--active {
+    background-color: var(--color__neutral--60);
+  }
+}

package/scss/core/components/molecules/editable-select.scss

@@ -0,0 +1,141 @@
+.ds-editable-select {
+  &__container {
+    position: relative;
+  }
+
+  &__input {
+    input {
+      font-family: inherit;
+      z-index: 8;
+    }
+
+    label {
+      font-family: inherit;
+      z-index: 9;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    right: 8px;
+    top: 13px;
+    z-index: 99;
+
+    &--small {
+      font-size: $font__size--sm;
+    }
+
+    &--medium {
+      font-size: $font__size--md;
+      top: 15px;
+    }
+
+    &--large {
+      font-size: $font__size--lg;
+      top: 18px;
+    }
+  }
+
+  &__loading {
+    position: absolute;
+    right: 30px;
+    width: 23px;
+    z-index: 99;
+
+    &--small {
+      top: 20px;
+    }
+
+    &--medium {
+      top: 25px;
+    }
+
+    &--large {
+      top: 13px;
+    }
+  }
+
+  &__list {
+    background: var(--color__neutral--00);
+    border: 1px solid var(--color__neutral--60);
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: block;
+    font-family: var(--font__family--highlight);
+    max-height: 360px;
+    overflow: scroll;
+    padding: 2px 0;
+    position: absolute;
+    width: 100%;
+    z-index: 9;
+
+    &--option {
+      cursor: pointer;
+      padding: 8px 16px;
+
+      &.not-found {
+        cursor: auto;
+      }
+    }
+
+    &--small {
+      top: $spacing--sm;
+    }
+
+    &--medium {
+      top: $spacing--md;
+    }
+
+    &--large {
+      top: $spacing--lg;
+    }
+  }
+
+  &__option {
+    background: none;
+    border: none;
+    border-radius: 4px;
+    color: var(--color__neutral--90);
+    cursor: pointer;
+    display: block;
+    font-family: var(--font__family--highlight);
+    line-height: normal;
+    margin: 0 4px;
+    padding: 16px 4px;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      background-color: var(--color__info);
+      color: var(--color__neutral--00);
+    }
+
+    &--not-found {
+      cursor: auto;
+
+      &--small {
+        font-size: $font__size--xxs;
+      }
+
+      &--medium {
+        font-size: $font__size--xs;
+      }
+
+      &--large {
+        font-size: $font__size--sm;
+      }
+    }
+
+    &--small {
+      font-size: $font__size--xxs;
+    }
+
+    &--medium {
+      font-size: $font__size--xs;
+    }
+
+    &--large {
+      font-size: $font__size--sm;
+    }
+  }
+}

package/scss/core/components/molecules/indicator.scss

@@ -0,0 +1,37 @@
+// === INDICATOR TOKENS (colocated with component) ===
+$indicator__background: var(--color__neutral--30) !default;
+$indicator__background--active: var(--color__neutral--90) !default;
+$indicator__background--older: var(--color__neutral--70) !default;
+$indicator__radius: $border__radius--sm !default;
+$indicator__gap: $spacing--quark !default;
+$indicator__heigth: 12px !default;
+
+// === INDICATOR COMPONENT ===
+.ds-indicator {
+  align-items: center;
+  display: flex;
+  gap: $indicator__gap;
+  height: $indicator__heigth;
+  width: 100%;
+
+  &__step {
+    background-color: $indicator__background;
+    border-radius: $indicator__radius;
+    height: 100%;
+    margin: 0;
+    outline: none;
+    width: 100%;
+
+    &--default {
+      background-color: $indicator__background;
+    }
+
+    &--active {
+      background-color: $indicator__background--active;
+    }
+
+    &--older {
+      background-color: $indicator__background--older;
+    }
+  }
+}

package/scss/core/components/molecules/inline-editable.scss

@@ -0,0 +1,23 @@
+.ds-inline-editable {
+  .ds-flex-layout {
+    height: $spacing--xs;
+  }
+
+  .ds-input {
+    margin-bottom: 0;
+
+    &__input {
+      background-color: transparent;
+      box-shadow: $shadow__level--1;
+      caret-color: var(--color__primary);
+      height: $spacing--xs;
+      padding: $spacing__inset--quark;
+      width: $spacing--xl;
+    }
+  }
+
+  .ds-icon {
+    color: var(--text__color);
+    cursor: pointer;
+  }
+}

package/scss/core/components/molecules/modal.scss

@@ -0,0 +1,70 @@
+.ds-modal-overlay {
+  background-color: var(--color__neutral--80);
+  height: 100vh;
+  inset: 0;
+  opacity: $opacity--heavier;
+  position: fixed;
+  width: 100%;
+  z-index: 9998;
+}
+
+.ds-modal {
+  align-items: center;
+  background-color: var(--color__neutral--00);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 550px;
+  padding: $spacing--xxs $spacing--xxs;
+  position: fixed;
+  right: 50%;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 100%;
+  z-index: 9999;
+
+  &--squared {
+    border-radius: 0;
+  }
+
+  &--rounded {
+    border-radius: $border__radius--sm;
+  }
+
+  &--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;
+    }
+  }
+
+  &__closeBtn {
+    align-self: flex-end;
+    background: none;
+    border: 0;
+    color: var(--color__neutral--80);
+    cursor: pointer;
+    display: grid;
+    height: $spacing--xs;
+    outline: none;
+    place-items: center;
+    width: $spacing--xs;
+  }
+
+  &__cta {
+    align-self: flex-end;
+    display: flex;
+    gap: $spacing--xs;
+  }
+}