platformscode-new-react 0.0.3 → 0.0.4

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

@@ -0,0 +1,473 @@
+.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

@@ -0,0 +1,130 @@
+.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

@@ -0,0 +1,130 @@
+.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;
+    }
+  }
+}