platformscode-new-react 0.0.2 → 0.0.4

package/src/assets/styles/components/_switch.scss

@@ -0,0 +1,192 @@
+.switch {
+  // margin: var(--spacing-md);
+  display: flex;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-none);
+  width: fit-content;
+  padding: 3px;
+  cursor: pointer;
+
+  &-main {
+    &__content {
+      &.disabled {
+        & > .switch__label,
+        & > div > .switch__label,
+        & > div > .switch__helper-text {
+          color: var(--colors-border-disabled);
+        }
+      }
+    }
+  }
+
+  .switch-wrapper {
+    position: relative;
+    display: inline-block;
+    min-width: 48px;
+    height: 24px;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+      border-radius: 34px;
+
+      &:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+        border-radius: 50%;
+      }
+    }
+
+    input:checked + .slider {
+      background-color: var(--colors-brand-600);
+    }
+
+    input:focus + .slider {
+      box-shadow: 0 0 1px var(--colors-brand-600);
+    }
+
+    input:checked + .slider:before {
+      -webkit-transform: translateX(16px);
+      -ms-transform: translateX(16px);
+      transform: translateX(24px);
+    }
+
+    .slider.round {
+      border-radius: 34px;
+    }
+
+    .slider.round:before {
+      border-radius: 50%;
+    }
+  }
+
+  &-icon {
+    display: none !important;
+    color: var(--colors-base-white);
+    font-size: 18px !important;
+    font-weight: bolder !important;
+  }
+
+  &.focus {
+    border-radius: var(--radius-sm);
+    outline: 2px solid var(--colors-base-black);
+  }
+
+  &-main {
+    &,
+    &__content {
+      display: flex;
+      column-gap: var(--spacing-xl);
+    }
+
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    max-width: 382px;
+    // min-width: 160px;
+  }
+
+  & input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  &__label {
+    @extend .text-md-medium;
+  }
+
+  &__helper-text {
+    color: var(--colors-text-tertiary);
+    @extend .text-sm-regular;
+    margin-block: var(--spacing-xs);
+  }
+
+  &__warning {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xl);
+    margin-left: var(--spacing-3xl);
+
+    color: var(--colors-text-error-primary);
+    @extend .text-sm-medium;
+
+    &-icon {
+      width: 24px;
+    }
+  }
+
+  &--brand {
+    & input:checked {
+      & ~ .switch__label,
+      & ~ div > .switch__label {
+        color: var(--colors-text-brand-secondary);
+      }
+    }
+
+    .switch-main {
+      &__content {
+        &.disabled {
+          & .switch-wrapper > .slider--active {
+            background-color: var(--colors-brand-200);
+          }
+
+          & > .switch__label,
+          & > div > .switch__label,
+          & > div > .switch__helper-text {
+            color: var(--colors-border-disabled);
+          }
+        }
+      }
+    }
+  }
+
+  &--readonly {
+    & .switch-slider {
+      background-color: transparent !important;
+
+      .switch-icon {
+        color: var(--colors-gray-neutral-600);
+      }
+    }
+  }
+}
+
+[dir="rtl"] .switch .switch-wrapper {
+  .slider {
+    &:before {
+      left: auto;
+      right: 4px;
+    }
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(-24px); // Adjust the translation value for RTL
+  }
+}
+
+[dir="rtl"] .switch .switch__warning {
+  margin-left: 0;
+  margin-right: var(--spacing-3xl);
+}

package/src/assets/styles/components/_tabs.scss

@@ -0,0 +1,231 @@
+.tabs {
+  &-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    &--horizontal {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 3px;
+      position: relative;
+      width: 100%;
+
+      &::-webkit-scrollbar {
+        height: 5px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+        padding: 1px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        height: 5px;
+        border-radius: 10px;
+        border: 1px solid transparent;
+        background-color: #ccc;
+        background-clip: content-box;
+        mix-blend-mode: multiply;
+      }
+
+      &.tabs-list--divider {
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          z-index: 0;
+          height: 3px;
+          width: 100%;
+          border-radius: var(--radius-full);
+          background-color: var(--colors-gray-neutral-300);
+        }
+      }
+
+      &.flush {
+        // & .tabs-list__item:first-child {}
+      }
+    }
+
+    &--vertical {
+      display: inline-flex;
+      align-items: start;
+      flex-direction: column;
+      gap: 3px;
+
+      & li {
+        width: 100%;
+      }
+
+      & .tabs-list__item {
+        justify-content: start !important;
+      }
+    }
+
+    &__item {
+      display: flex;
+      padding: var(--spacing-lg) var(--spacing-xl);
+      justify-content: center;
+      align-items: center;
+      gap: var(--spacing-xs);
+      border-radius: var(--radius-xs);
+      color: var(--colors-text-secondary);
+      position: relative;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--colors-gray-neutral-100);
+
+        & .tabs-list__label {
+          color: var(--colors-text-primary);
+        }
+      }
+
+      &:hover::after,
+      &:active::after,
+      &--active::after {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 1px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% - var(--spacing-xl) * 2);
+        height: 3px;
+        border-radius: var(--radius-full);
+        background-color: var(--colors-fg-quinary-400);
+        z-index: 1;
+      }
+
+      &:focus {
+        outline: 2px solid var(--colors-base-black);
+        position: relative;
+        color: var(--colors-text-secondary);
+
+        &::before {
+          content: "";
+          display: block;
+          background-color: transparent;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 1;
+          border: 1px solid var(--colors-base-white);
+          border-radius: var(--radius-md);
+        }
+      }
+
+      &:active {
+        background: var(--colors-gray-neutral-300);
+        outline: none;
+
+        & .tabs-list__icon {
+          color: var(--colors-text-primary);
+        }
+
+        & .tabs-list__label {
+          color: var(--colors-text-primary);
+        }
+
+        &::after {
+          background-color: var(--colors-text-primary);
+        }
+
+        &::before {
+          display: none;
+        }
+      }
+
+      &--active {
+        & .tabs-list__label {
+          @extend .text-sm-medium;
+        }
+
+        & .tabs-list__icon {
+          color: var(--colors-brand-600);
+        }
+
+        &::after {
+          background-color: var(--colors-brand-600);
+        }
+
+        &:active {
+          background-color: transparent;
+          outline: none;
+
+          & .tabs-list__icon {
+            color: var(--colors-brand-600);
+          }
+        }
+
+        &:hover {
+          background-color: transparent;
+          color: var(--colors-brand-600);
+
+          &::after {
+            background-color: var(--colors-brand-600);
+          }
+        }
+      }
+
+      &--md {
+        padding: var(--spacing-lg) var(--spacing-xl);
+      }
+
+      &--sm {
+        padding: var(--spacing-md) var(--spacing-lg);
+
+        &::after {
+          width: calc(100% - var(--spacing-lg) * 2);
+        }
+      }
+    }
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      color: var(--colors-text-secondary);
+      width: 16px;
+      height: 16px;
+    }
+
+    &__label {
+      @extend .text-sm-regular;
+    }
+
+    &--vertical &__item {
+      &:hover::after,
+      &:active::after,
+      &--active::after {
+        left: 1px;
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        transform: translateY(-50%);
+        height: calc(100% - var(--spacing-md) * 2);
+        min-height: 16px;
+        width: 3px;
+      }
+
+      &--md {
+        padding: var(--spacing-sm) var(--spacing-lg);
+      }
+
+      &--sm {
+        padding: var(--spacing-xxs) var(--spacing-sm);
+      }
+    }
+  }
+}
+
+[dir="rtl"] .tabs-list--vertical .tabs-list__item:hover::after,
+[dir="rtl"] .tabs-list--vertical .tabs-list__item:active::after,
+[dir="rtl"] .tabs-list--vertical .tabs-list__item--active::after {
+  right: 1px;
+  left: auto;
+}

package/src/assets/styles/components/_tag.scss

@@ -0,0 +1,191 @@
+.tags {
+  .flex-column {
+    align-items: flex-start;
+  }
+
+  .flex {
+    gap: 1rem;
+  }
+}
+
+.tag {
+  display: inline-flex;
+  height: 32px;
+  padding: var(--spacing-none) var(--spacing-lg);
+  // margin-block: 1rem; // to be enhanced
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-xs);
+  border-radius: var(--radius-xs);
+  @extend .text-md-medium;
+
+  &-icon {
+    display: flex;
+    padding: 1.875px 1.5px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  // sizes
+  &--lg {
+    height: 32px;
+    @extend .text-md-medium;
+
+    span.tag-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &--md {
+    height: 24px;
+    @extend .text-xs-medium;
+
+    span.tag-icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &--sm {
+    height: 20px;
+    @extend .text-2xs-semibold;
+
+    span.tag-icon {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  // types
+  &--rounded {
+    border-radius: var(--radius-full);
+  }
+
+  &--icon {
+    padding: 0;
+
+    &.tag--lg {
+      width: 32px;
+      height: 32px;
+    }
+
+    &.tag--md {
+      width: 24px;
+      height: 24px;
+    }
+
+    &.tag--sm {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  // variants
+  &--neutral {
+    color: var(--tag-text-neutral);
+    background: var(--tag-background-neutral-light);
+    border: 1px solid var(--border-neutral-secondary);
+
+    &-outlined {
+      border: 1px solid var(--tag-border-neutral);
+      background-color: transparent;
+      color: var(--tag-text-neutral);
+    }
+  }
+
+  &--success {
+    color: var(--tag-text-success);
+    background-color: var(--tag-background-success-light);
+    border: 1px solid var(--tag-border-success-light);
+
+    &-outlined {
+      border: 1px solid var(--tag-border-success);
+      background-color: transparent;
+      color: var(--tag-text-success);
+    }
+  }
+
+  &--error {
+    color: var(--tag-text-error);
+    background-color: var(--tag-background-error-light);
+    border: 1px solid var(--tag-border-error-light);
+
+    &-outlined {
+      border: 1px solid var(--tag-border-error);
+      background-color: transparent;
+      color: var(--tag-text-error);
+    }
+  }
+
+  &--warning {
+    color: var(--tag-text-warning);
+    background-color: var(--tag-background-warning-light);
+    border: 1px solid var(--tag-border-warning-light);
+
+    &-outlined {
+      border: 1px solid var(--tag-border-error);
+      background-color: transparent;
+      color: var(--tag-text-warning);
+    }
+  }
+
+  &--info {
+    color: var(--tag-text-info);
+    background-color: var(--tag-background-info-light);
+    border: 1px solid var(--tag-border-info-light);
+
+    &-outlined {
+      border: 1px solid var(--tag-border-info);
+      background-color: transparent;
+      color: var(--tag-text-info);
+    }
+  }
+
+  &--purple {
+    color: var(--colors-purple-700);
+    background-color: var(--colors-purple-50);
+    border: 1px solid var(--colors-purple-200);
+
+    &-outlined {
+      border: 1px solid var(--colors-purple-500);
+      background-color: transparent;
+      color: var(--colors-purple-700);
+    }
+  }
+
+  &--pink {
+    color: var(--colors-pink-700);
+    background-color: var(--colors-pink-50);
+    border: 1px solid var(--colors-pink-200);
+
+    &-outlined {
+      border: 1px solid var(--colors-pink-500);
+      background-color: transparent;
+      color: var(--colors-pink-700);
+    }
+  }
+
+  &--orange {
+    color: var(--colors-orange-700);
+    background-color: var(--colors-orange-50);
+    border: 1px solid var(--colors-orange-200);
+
+    &-outlined {
+      border: 1px solid var(--colors-orange-500);
+      background-color: transparent;
+      color: var(--colors-orange-700);
+    }
+  }
+
+  &--on-color {
+    color: var(--colors-base-white);
+    background-color: hsl(var(--colors-alpha-white) / 30%);
+
+    &-outlined {
+      border: 1px solid hsl(var(--colors-alpha-white) / 90%);
+      background-color: transparent;
+      color: hsl(var(--colors-alpha-white) / 90%);
+    }
+  }
+}