platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,473 +0,0 @@
-.input {
-  display: flex;
-  height: 40px;
-  width: 100%;
-  // max-width: 432px;
-  min-width: 200px;
-  justify-content: flex-start;
-  padding: var(--spacing-none) var(--spacing-xl);
-  // align-items: center;
-  border-radius: var(--radius-sm);
-  gap: var(--spacing-xs);
-  border: 1px solid var(--colors-gray-neutral-400);
-  background: var(--colors-base-white);
-  // overflow: hidden;
-  position: relative;
-
-  &:hover {
-    border-color: var(--colors-gray-neutral-700);
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0%;
-    height: 2px;
-    transform: translateX(-50%);
-    background-color: var(--colors-gray-neutral-950);
-    transition: width 0.2s ease-in-out;
-  }
-
-  &__field {
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-
-    height: 100%;
-    width: 100%;
-    color: var(--colors-text-primary);
-    @extend .text-md-regular;
-    // background-color: #c0c0c0;
-
-    // &:focus {}
-
-    &::placeholder {
-      color: var(--colors-text-placeholder);
-      @extend .text-md-regular;
-    }
-  }
-
-  &.focus {
-    @extend .shadow-md;
-
-    &::after {
-      width: 100%;
-    }
-  }
-
-  &.active {
-    &::after {
-      width: 50%;
-    }
-  }
-
-  &--readonly,
-  &--disabled {
-    &,
-    &:hover {
-      border-color: var(--colors-gray-neutral-300);
-      box-shadow: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-
-    & .input__field {
-      &,
-      &::placeholder {
-        color: var(--colors-text-primary);
-      }
-    }
-  }
-
-  &--disabled {
-    & .input__field {
-      &,
-      &::placeholder {
-        color: var(--colors-gray-neutral-300);
-      }
-    }
-
-    & .input__icon span,
-    & .input__prefix--subtle-text,
-    & .input__prefix--solid-text {
-      color: var(--colors-gray-neutral-300);
-    }
-  }
-
-  &__icon {
-    // margin-right: var(--spacing-xs);
-    // margin-left: var(--spacing-xl);
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-
-    & span {
-      color: var(--colors-gray-neutral-700);
-      font-size: 20px;
-    }
-  }
-
-  &__feedback-icon {
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    // margin-left: var(--spacing-xs);
-    // margin-right: var(--spacing-xl);
-
-    span {
-      font-size: 20px;
-      position: relative;
-      z-index: 0;
-    }
-
-    &--success {
-      color: var(--colors-brand-600);
-
-      & span::after {
-        background-color: var(--colors-brand-100);
-      }
-    }
-
-    &--error {
-      color: var(--colors-error-600);
-
-      & span::after {
-        background-color: var(--colors-error-100);
-      }
-    }
-
-    &--warning {
-      color: var(--colors-warning-600);
-
-      & span::after {
-        background-color: var(--colors-warning-100);
-      }
-
-      &-triangle {
-        color: var(--colors-warning-600);
-
-        & span::after {
-          width: 0 !important;
-          height: 0 !important;
-          transform: scale(1) !important;
-          border: 12px solid rgba(0, 0, 0, 0);
-          border-top: 0;
-          border-bottom: 20px solid var(--colors-warning-100);
-          border-radius: 0px !important;
-          left: -2px !important;
-          top: -1px !important;
-        }
-      }
-    }
-
-    &--ring {
-      & span::after {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        transform: scale(1.16);
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: var(--radius-full);
-        z-index: -1;
-      }
-    }
-  }
-
-  &__prefix,
-  &__suffix {
-    display: inline-flex;
-    height: 100%;
-    padding: var(--spacing-xxs) var(--spacing-xl);
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-xs);
-    mix-blend-mode: multiply;
-    margin-left: calc(-1 * var(--spacing-xl));
-    margin-right: var(--spacing-xl);
-    border: 0; // &-icon {}
-
-    &-label,
-    &-icon,
-    &-chevron {
-      color: var(--colors-text-primary);
-      @extend .text-md-regular;
-    }
-
-    .dropdown__label {
-      display: none;
-
-      &--selection {
-        display: inline-block;
-        @extend .text-sm-regular;
-        white-space: nowrap;
-
-        & ~ .input__prefix-label {
-          display: none;
-        }
-      }
-    }
-
-    &-chevron {
-      font-size: 30px !important;
-      transform: rotate(0);
-      transition: all 0.3s ease-in-out;
-    }
-
-    &.active {
-      background-color: var(--colors-gray-neutral-300);
-    }
-
-    &--solid {
-      background-color: var(--colors-gray-neutral-100);
-
-      &-text {
-        background-color: var(--colors-gray-neutral-100);
-
-        & .input__prefix-label {
-          color: var(--colors-text-quarterary);
-        }
-
-        // &:disabled {
-
-        //   & .input__prefix-label {
-        //     color: var(--colors-gray-neutral-300);
-        //   }
-        // }
-      }
-
-      &:hover {
-        background-color: var(--colors-gray-neutral-200);
-      }
-
-      &:focus {
-        background-color: transparent;
-        border: 4px solid var(--colors-base-black);
-        border-radius: 0;
-      }
-
-      &.active {
-        background-color: var(--colors-gray-neutral-300);
-        border: 0;
-      }
-
-      &:disabled {
-        background-color: var(--colors-gray-neutral-100);
-
-        & .input__prefix-label,
-        & .input__prefix-icon,
-        & .input__prefix-chevron {
-          color: var(--colors-gray-neutral-300);
-        }
-      }
-    }
-
-    &--subtle {
-      background-color: transparent;
-
-      &-text {
-        background-color: transparent;
-
-        & .input__prefix-label {
-          color: var(--colors-text-quarterary);
-        }
-
-        // &:disabled {
-        //   & .input__prefix-label {
-        //     color: var(--colors-text-quarterary);
-        //   }
-        // }
-      }
-
-      &:hover {
-        background-color: var(--colors-gray-neutral-50);
-      }
-
-      &:focus {
-        background-color: transparent;
-        border: 4px solid var(--colors-base-black);
-        // border-radius: 0;
-      }
-
-      &.active {
-        background-color: var(--colors-gray-neutral-200);
-        border: 0;
-      }
-
-      &:disabled {
-        & .input__prefix-label,
-        & .input__prefix-icon,
-        & .input__prefix-chevron {
-          color: var(--colors-gray-neutral-300);
-        }
-      }
-    }
-
-    &.selected {
-      background-color: var(--colors-gray-neutral-700);
-
-      & .input {
-        &__prefix-icon,
-        &__prefix-label,
-        &__prefix-chevron {
-          color: var(--colors-text-primary_on-brand);
-        }
-      }
-
-      .dropdown__label {
-        color: var(--colors-text-primary_on-brand);
-      }
-    }
-  }
-
-  &__dropdown {
-    &-list {
-      @extend .dropdown__list !optional;
-    }
-
-    &-btn.open + &-list {
-      z-index: 2;
-      opacity: 1;
-      padding-block: var(--spacing-md);
-      max-height: 376px;
-      pointer-events: auto;
-      overflow-y: auto;
-    }
-
-    &-btn.open & .input__prefix-chevron,
-    &-btn.open & .input__suffix-chevron {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__prefix {
-    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
-  }
-
-  &__suffix {
-    margin-right: calc(-1 * var(--spacing-xl));
-    margin-left: var(--spacing-xl);
-    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-  }
-
-  &__chevron {
-  }
-
-  &--lighter {
-    border: 0;
-
-    &:hover {
-      border: 1px solid var(--colors-gray-neutral-400);
-    }
-
-    &.focus {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-base-white);
-    }
-
-    &.active {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-gray-neutral-100);
-    }
-  }
-
-  &--darker {
-    border: 0;
-    background-color: var(--colors-gray-neutral-50);
-
-    &:hover {
-      border: 1px solid var(--colors-gray-neutral-400);
-    }
-
-    &.focus {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-base-white);
-    }
-
-    &.active {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-gray-neutral-100);
-    }
-  }
-
-  &--error {
-    &,
-    &:hover {
-      border-color: var(--colors-error-600);
-    }
-
-    &::after {
-      background-color: var(--colors-error-600);
-    }
-  }
-
-  &--lg {
-    height: 40px;
-
-    & .input__field {
-      &,
-      &::placeholder {
-        @extend .text-sm-regular;
-      }
-    }
-
-    &__feedback-icon {
-      span {
-        font-size: 20px;
-      }
-    }
-
-    & .input__prefix,
-    & .input__suffix {
-      &-icon {
-        font-size: 24px;
-      }
-
-      &-label {
-        @extend .text-md-regular;
-      }
-
-      &-chevron {
-        font-size: 20px;
-      }
-    }
-  }
-
-  &--md {
-    height: 32px;
-
-    & .input__field {
-      &,
-      &::placeholder {
-        @extend .text-sm-regular;
-      }
-    }
-
-    &__feedback-icon {
-      span {
-        font-size: 16px;
-      }
-    }
-
-    & .input__prefix,
-    & .input__suffix {
-      &-icon {
-        font-size: 20px;
-      }
-
-      &-label {
-        @extend .text-sm-regular;
-      }
-
-      &-chevron {
-        font-size: 16px;
-      }
-    }
-  }
-}

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

@@ -1,130 +0,0 @@
-.link {
-  display: inline-flex;
-  padding: var(--spacing-none);
-  align-items: center;
-  gap: 8px;
-  border-radius: var(--radius-xs);
-  @extend .text-md-regular;
-  cursor: pointer;
-
-  &__label {
-  }
-
-  &__icon {
-    display: inline-flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:hover {
-    & .link__label {
-      text-decoration: underline;
-    }
-  }
-
-  &--inline {
-    & .link__label {
-      text-decoration: underline;
-    }
-  }
-
-  &,
-  &--primary {
-    color: var(--link-primary);
-
-    &:hover {
-      color: var(--link-primary-hovered);
-    }
-
-    &.active {
-      color: var(--link-primary-pressed);
-    }
-
-    &:focus {
-      color: var(--link-primary-focused);
-      outline: 2px solid var(--border-black);
-      border-radius: var(--radius-xs);
-    }
-  }
-
-  &--neutral {
-    color: var(--link-neutral);
-
-    &:hover {
-      color: var(--link-neutral-hovered);
-    }
-
-    &.active {
-      color: var(--link-neutral-pressed);
-    }
-
-    &:focus {
-      color: var(--link-neutral-focused);
-      outline: 2px solid var(--border-black);
-      border-radius: var(--radius-xs);
-    }
-  }
-
-  &:visited {
-    color: var(--colors-purple-500) !important;
-  }
-
-  &--on-color {
-    color: var(--link-oncolor);
-
-    &:hover {
-      color: var(--link-oncolor-hovered);
-    }
-
-    &.active {
-      color: var(--link-oncolor-pressed);
-    }
-
-    &:visited {
-      color: var(--link-oncolor-visited) !important;
-    }
-
-    &:focus {
-      color: var(--link-oncolor-focused);
-      outline: 2px solid var(--border-white);
-      border-radius: var(--radius-xs);
-    }
-  }
-
-  &--disabled {
-    color: var(--link-oncolor-disabled);
-    &:hover {
-      color: var(--link-oncolor-disabled);
-      & .link__label {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // sizes
-
-  &--md {
-    @extend .text-md-regular;
-
-    & .link__icon {
-      // font-size: 20px !important;
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  &--sm {
-    @extend .text-sm-regular;
-
-    & .link__icon {
-      // font-size: 16px !important;
-      width: 16px;
-      height: 16px;
-    }
-  }
-}
-
-:is(html[lang="ar"], html[dir="rtl"]) .link {
-  flex-direction: row-reverse;
-}

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

@@ -1,130 +0,0 @@
-.list {
-  &--brand {
-    .list__item {
-      color: #1b8354;
-
-      // &-icon {
-      //     svg {
-      //         color: inherit;
-      //     }
-      // }
-    }
-
-    &>ul {
-      .list__item {
-        &::before {
-          background-color: #1b8354;
-        }
-      }
-    }
-  }
-
-  &--neutral {
-    .list__item {
-      color: #0d121c;
-
-      // &-icon {
-      //     svg {
-      //         color: #0D121C;
-
-      //         path {
-      //         stroke: #0D121C;
-
-      //         }
-      //     }
-      // }
-    }
-
-    &>ul {
-      .list__item {
-        &::before {
-          background-color: #0d121c;
-        }
-      }
-    }
-  }
-
-  &--on-color {
-    .list__item {
-      color: var(--Link-2-link-default_on-color, #fff);
-
-      // &-icon {
-      //     svg {
-      //         color: inherit;
-      //     }
-      // }
-    }
-
-    &>ul {
-      .list__item {
-        &::before {
-          background-color: #fff;
-        }
-      }
-    }
-  }
-
-  &--ordered {
-    list-style-type: decimal;
-    list-style-position: inside;
-
-    &>ol {
-      list-style-type: lower-alpha;
-      margin-left: 24px;
-    }
-  }
-
-  &--unordered {
-    list-style-type: decimal;
-
-    .list__item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      &::before {
-        content: "-";
-      }
-    }
-
-    &>ul {
-      list-style-type: disc;
-      margin-left: 18px;
-
-      .list__item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        &::before {
-          content: "";
-          width: 4px;
-          height: 4px;
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-
-  &--with-icon {
-    .list {
-      &__item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        &-icon {
-          display: flex;
-          width: 16px;
-          height: 16px;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-
-    &>ul {
-      margin-left: 24px;
-    }
-  }
-}