@akad/design-system 1.1.1 → 1.1.3

package/scss/core/components/atoms/radio.scss

@@ -0,0 +1,140 @@
+@import 'radio-card';
+
+$radio__control-size: 20px !default;
+$radio__control-dot-size: 10px !default;
+$radio__control-color: var(--color__neutral--80) !default;
+
+.ds-radio {
+  --radio__control-color: #{$radio__control-color};
+
+  &__input {
+    appearance: none;
+    cursor: pointer;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__control {
+    border: $border__width--thin solid var(--radio__control-color);
+    border-radius: 50%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    height: $radio__control-size;
+    pointer-events: none;
+    position: relative;
+    width: $radio__control-size;
+    z-index: 0;
+  }
+
+  &__input:checked + &__control::after {
+    background-color: var(--radio__control-color);
+    border-radius: 50%;
+    content: '';
+    height: $radio__control-dot-size;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: $radio__control-dot-size;
+  }
+
+  &__text {
+    @include radio-card-text-block;
+  }
+
+  &__label,
+  &__description {
+    color: var(--color__neutral--80);
+    font-family: var(--font__family--base);
+    font-size: $font__size--sm;
+    font-style: normal;
+    line-height: 1.5;
+  }
+
+  &__label {
+    font-weight: $font__weight--bold;
+  }
+
+  &__description {
+    font-weight: $font__weight--regular;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  &--full-width {
+    flex: 1 1 0;
+    width: 100%;
+  }
+
+  &--default {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    gap: $spacing--xxxs;
+    position: relative;
+    width: fit-content;
+
+    .ds-radio__input {
+      height: $radio__control-size;
+      width: $radio__control-size;
+    }
+  }
+
+  &--card {
+    @include radio-card-wrapper;
+
+    &:has(.ds-radio__input:checked) {
+      @include radio-card-wrapper-checked;
+    }
+
+    &:has(.ds-radio__input:focus-visible) {
+      @include radio-card-wrapper-focus-visible;
+    }
+
+    &.ds-radio--disabled {
+      @include radio-card-wrapper-disabled;
+    }
+
+    &.ds-radio--full-width {
+      width: 100%;
+    }
+
+    .ds-radio__input {
+      @include radio-card-input-hidden;
+    }
+
+    .ds-radio__label,
+    .ds-radio__description {
+      @include radio-card-text-style;
+    }
+  }
+}
+
+[data-theme='dark'] .ds-radio {
+  --radio__control-color: var(--color__neutral--10);
+
+  .ds-radio__label,
+  .ds-radio__description {
+    color: var(--color__neutral--10);
+  }
+
+  &.ds-radio--card {
+    @include radio-card-dark-mode;
+
+    &:has(.ds-radio__input:checked) {
+      @include radio-card-dark-mode-checked;
+    }
+
+    &:has(.ds-radio__input:focus-visible) {
+      @include radio-card-dark-mode-focus-visible;
+    }
+  }
+}

package/scss/core/components/index.scss

@@ -13,6 +13,7 @@
 @import 'atoms/card';
 @import 'atoms/caption';
 @import 'atoms/checkbox';
+@import 'atoms/chip';
 @import 'atoms/heading';
 @import 'atoms/horizontal-rule';
 @import 'atoms/icon';
@@ -21,6 +22,7 @@
 @import 'atoms/option';
 @import 'atoms/paragraph';
 @import 'atoms/progress';
+@import 'atoms/radio';
 @import 'atoms/select';
 @import 'atoms/subtitle';
 @import 'atoms/textarea';

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

@@ -105,6 +105,10 @@
     text-align: left;
     width: 100%;
 
+    &--selected {
+      background-color: var(--color__neutral--30);
+    }
+
     &:hover {
       background-color: var(--color__info);
       color: var(--color__neutral--00);

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

@@ -112,3 +112,156 @@ $tabs__padding-title: $spacing__inset--xs !default;
   --tabs__color-title--active: var(--color__primary);
   --tabs__color-title--disabled: var(--color__neutral--50);
 }
+
+// === NAVIGATION VARIANT (ex‑TabBar: sublinhado, tablist WAI‑ARIA) ===
+$tabs-nav__indicator-height: 3px !default;
+$tabs-nav__padding-top: 16px !default;
+$tabs-nav__padding-bottom: 13px !default;
+$tabs-nav__padding-x: 24px !default;
+$tabs-nav__gap: 0 !default;
+$tabs-nav__panel-padding-top: $spacing__inset--sm !default;
+$tabs-nav__label-color: var(--color__neutral--70) !default;
+$tabs-nav__active-color: var(--color__primary) !default;
+
+.ds-tabs.ds-tabs--navigation {
+  --tabs-nav__track: var(--color__neutral--40);
+  --tabs-nav__label: #{$tabs-nav__label-color};
+  --tabs-nav__label--active: #{$tabs-nav__active-color};
+  --tabs-nav__indicator: #{$tabs-nav__active-color};
+
+  font-family: var(--font__family--base);
+  width: 100%;
+
+  .ds-tabs__header {
+    align-items: flex-end;
+    background-color: transparent;
+    border-bottom: 1px solid var(--tabs-nav__track);
+    display: flex;
+    flex-flow: row nowrap;
+    gap: $tabs-nav__gap;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .ds-tabs__tab {
+    background: transparent;
+    border: none;
+    border-top: none;
+    box-sizing: border-box;
+    color: var(--tabs-nav__label);
+    cursor: pointer;
+    flex: 0 0 auto;
+    flex-grow: 0;
+    font-family: var(--font__family--base);
+    font-size: $font__size--md;
+    font-style: normal;
+    font-weight: $font__weight--bold;
+    letter-spacing: 0;
+    line-height: 1.5;
+    margin: 0;
+    max-width: 100%;
+    padding: $tabs-nav__padding-top $tabs-nav__padding-x
+      calc($tabs-nav__padding-bottom + $tabs-nav__indicator-height);
+    position: relative;
+    text-align: center;
+    width: auto;
+
+    .ds-icon {
+      color: inherit;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--tabs-nav__label--active);
+      outline-offset: 4px;
+    }
+
+    &:hover:not(:disabled, .ds-tabs__tab--disabled) {
+      background: transparent;
+      border-top: none;
+      color: var(--tabs-nav__label--active);
+      padding-top: $tabs-nav__padding-top;
+    }
+
+    &-color--primary {
+      --tabs-nav__label--active: #{$tabs-nav__active-color};
+      --tabs-nav__indicator: #{$tabs-nav__active-color};
+    }
+
+    &-color--secondary {
+      --tabs-nav__label--active: var(--color__secondary);
+      --tabs-nav__indicator: var(--color__secondary);
+    }
+
+    &-color--neutral {
+      --tabs-nav__label--active: var(--color__neutral--70);
+      --tabs-nav__indicator: var(--color__neutral--50);
+    }
+
+    &-color--success {
+      --tabs-nav__label--active: var(--color__success);
+      --tabs-nav__indicator: var(--color__success);
+    }
+
+    &-color--warning {
+      --tabs-nav__label--active: var(--color__warning);
+      --tabs-nav__indicator: var(--color__warning);
+    }
+
+    &-color--danger {
+      --tabs-nav__label--active: var(--color__danger);
+      --tabs-nav__indicator: var(--color__danger);
+    }
+
+    &-color--info {
+      --tabs-nav__label--active: var(--color__info);
+      --tabs-nav__indicator: var(--color__info);
+    }
+
+    &--active {
+      background: transparent;
+      border-top: none;
+      color: var(--tabs-nav__label--active);
+      padding-top: $tabs-nav__padding-top;
+
+      &::after {
+        background-color: var(--tabs-nav__indicator);
+        bottom: -1px;
+        content: '';
+        height: $tabs-nav__indicator-height;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
+
+      .ds-icon {
+        color: inherit;
+      }
+    }
+
+    &--disabled,
+    &:disabled {
+      background: transparent !important;
+      border: none !important;
+      color: var(--color__neutral--50) !important;
+      cursor: not-allowed;
+      padding-top: $tabs-nav__padding-top !important;
+      pointer-events: none;
+    }
+  }
+
+  .ds-tabs__panel {
+    padding: $tabs-nav__panel-padding-top $tabs-nav__padding-x;
+    width: 100%;
+
+    .ds-wrapper {
+      display: block;
+    }
+  }
+}
+
+[data-theme='dark'] .ds-tabs.ds-tabs--navigation {
+  --tabs-nav__track: var(--color__neutral--60);
+  --tabs-nav__label: var(--color__neutral--20);
+  --tabs-nav__label--active: #{$tabs-nav__active-color};
+  --tabs-nav__indicator: #{$tabs-nav__active-color};
+}