pixel-react 1.13.43 → 1.13.44

package/lib/styles/Button.scss

@@ -1,182 +0,0 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts';
-
-.ff-button {
-  background-color: var(--primary-button-text-color);
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  text-decoration: none;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  gap: 4px;
-  justify-content: center;
-  align-items: center;
-  @extend .fontXs;
-  border: 2px solid transparent;
-
-  &--transparent {
-    background-color: transparent;
-  }
-
-  &--primary,
-  &--delete,
-  &--danger,
-  &--secondary {
-    position: relative;
-    cursor: pointer;
-    border-radius: 4px;
-    z-index: 1;
-    border: none;
-    overflow: hidden;
-
-    &:before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 4px;
-      padding: 0.6px;
-
-      background: var(--primary-button-border);
-      mask:
-        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
-        linear-gradient(var(--primary-button-text-color) 0 0);
-      mask-composite: exclude;
-      -webkit-mask:
-        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
-        linear-gradient(var(--primary-button-text-color) 0 0);
-      -webkit-mask-composite: destination-out;
-      z-index: -1;
-    }
-
-    &:hover {
-      background: var(--primary-button-hover);
-    }
-
-    &:disabled {
-      opacity: 50%;
-      cursor: no-drop;
-
-      &:before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: 4px;
-        padding: 0.6px;
-        -webkit-mask-composite: destination-out;
-        mask-composite: exclude;
-        z-index: -1;
-      }
-    }
-  }
-
-  &--primary {
-    background: var(--primary-button-color);
-
-    &:before {
-      background: var(--primary-button-border);
-    }
-
-    &:hover {
-      background: var(--primary-button-hover);
-    }
-  }
-
-  &--delete {
-    background: var(--delete-button-color);
-    color: var(--primary-button-text-color);
-
-    &:before {
-      background: var(--delete-button-border);
-    }
-
-    &:hover {
-      background: var(--delete-button-hover);
-    }
-  }
-
-  &--warning {
-    background: var(--warning-button-color);
-    border: var(--warning-button-border);
-  }
-
-  &--secondary {
-    &:before {
-      background: var(--primary-button-border);
-    }
-
-    &:hover {
-      background: var(--secondary-button-hover);
-    }
-  }
-
-  &--danger {
-    color: var(--status-rejected-text-color);
-
-    &:before {
-      background: var(--status-rejected-text-color);
-    }
-
-    &:hover {
-      background: var(--danger-button-hover);
-    }
-  }
-
-  &--tertiary {
-    border: none;
-    background: var(--tertiary-button-color);
-
-    &:hover {
-      background: var(--tertiary-button-hover);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: no-drop;
-    }
-  }
-
-  &--small {
-    @extend .fontXs;
-    font-weight: 500;
-    padding: 4.5px 8px;
-    line-height: 15px;
-  }
-
-  &--medium {
-    @extend .fontXs;
-    font-weight: 500;
-    padding: 6px 12px;
-  }
-
-  &--large {
-    @extend .fontMd;
-    padding: 8px 16px;
-  }
-
-  &-primary--text {
-    color: var(--primary-button-text-color);
-  }
-
-  &-secondary--text,
-  &-tertiary--text {
-    background: var(--secondary-button-color-text);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-}
-
-.ff-button-icon {
-  cursor: pointer;
-}
-
-.ff-button-choose-file-text {
-  color: var(--dotted-border-color);
-}
-
-.ff-button-choose-file {
-  display: flex;
-  justify-content: space-between;
-}

package/lib/styles/Carousel.scss

@@ -1,126 +0,0 @@
-.ff-carousel {
-  position: relative;
-  overflow: hidden;
-  width: 800px;
-  height: var(--ff-carousel-height, 450px);
-  margin: auto;
-}
-
-.ff-carousel-track {
-  display: flex;
-  transition: transform 0.5s ease-in-out;
-  width: 100%;
-  height: 100%;
-}
-
-.ff-carousel-slide {
-  min-width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ff-carousel-slide img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.ff-carousel-slide video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.ff-carousel-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  transform: translateY(-50%);
-  z-index: 10;
-}
-
-.ff-left-control,
-.ff-right-control {
-  display: flex;
-  align-items: center;
-}
-
-.ff-carousel-icons {
-  cursor: pointer;
-  margin: 15px;
-}
-
-.ff-slide_header {
-  position: absolute;
-  width: 100%;
-  height: 50px;
-  z-index: 10;
-}
-
-.ff-slide-name {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  background-color: var(--base-bg-color);
-  padding: 6px 12px;
-  color: var(--dotted-border-color);
-  font-size: 14px;
-  border-radius: 30px;
-  max-width: 400px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  z-index: 15;
-}
-
-.ff-collapse_icon {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 15;
-}
-
-.ff-carousel-bottom-text {
-  position: absolute;
-  bottom: 10px;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 10;
-}
-
-.ff-left-text,
-.ff-right-text {
-  max-width: 130px;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  padding: 6px 10px;
-  border-radius: 30px;
-  margin: 10px;
-  color: var(--primary-icon-color);
-}
-
-.ff-left-text {
-  background: transparent;
-}
-
-.ff-right-text {
-  background: var(--dotted-border-color);
-}
-
-.ff-time-text {
-  font-size: 14px;
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-}

package/lib/styles/ChatModal.scss

@@ -1,117 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-dynamic-icon-container {
-  position: fixed;
-}
-
-.ff-dynamic-icon {
-  position: fixed;
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 9999999;
-  transition: transform 0.3s ease;
-}
-
-.ff-dynamic-icon:hover {
-  background-color: var(--chatbot-icon-hover-color);
-  border-radius: 50%;
-}
-
-.ff-chat-icon-hover {
-  position: fixed;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, transform 0.4s ease;
-  z-index: 999;
-}
-
-.ff-dynamic-icon-container:hover .ff-chat-icon-hover {
-  opacity: 1;
-  visibility: visible;
-}
-
-.ff-dynamic-modal {
-  background-color: var(--prompt-bg-color);
-  border-radius: 20px;
-  box-shadow: 0px 6px 15px var(--arrows-button-border-color);
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  transform: scale(0.5);
-  transform-origin: bottom right;
-  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
-  z-index: 9999999;
-
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    right: 20px;
-    border-style: solid;
-    border-width: 12px 12px 0 12px;
-    border-color: var(--prompt-bg-color) transparent transparent transparent;
-    z-index: 999;
-  }
-
-  &.open {
-    transform: scale(1);
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  &-header {
-    background-color: var(--brand-color);
-    color: var(--tooltip-text-color);
-    text-align: center;
-    border-radius: 20px 20px 0 0;
-
-    .header-container {
-      @include mixins.horizontal-space-between();
-      height: 32px;
-      padding: 2px 5px;
-
-      .header-left {
-        @include mixins.center-vertical();
-        flex-basis: 50%;
-
-        span {
-          padding-right: 4px;
-        }
-      }
-
-      .header-right {
-        @include mixins.center-vertical();
-        justify-content: space-around;
-        flex-basis: 14%;
-
-        .action {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  &-body {
-    flex: 1;
-    overflow-y: auto;
-    background: var(--prompt-bg-color);
-  }
-
-  &-footer {
-    background: var(--prompt-bg-color);
-    text-align: right;
-    border-radius: 0px 0px 20px 20px;
-  }
-}
-
-.ff-content-box {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px;
-  text-align: justify;
-}

package/lib/styles/Checkbox.scss

@@ -1,216 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-checkbox--overlay {
-  @include mixins.center-content();
-  cursor: pointer;
-  position: relative;
-  gap: 4px;
-
-  .ff-checkbox-input {
-    display: none;
-  }
-
-  .ff-checkbox-custom {
-    @include mixins.box(16px, 1px solid var(--checkbox-border-color));
-    box-sizing: border-box;
-    border-radius: 2px;
-    gap: 4px;
-    position: relative;
-    @include mixins.center-content;
-    @include mixins.transition(border-color, background-color);
-    .ff-tick-icon {
-      padding: 2px !important;
-    }
-    &::before {
-      content: '';
-      width: 9px;
-      height: 2px;
-      background-color: var(--checkbox-partial-color);
-      border-radius: 2px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) rotate(180deg);
-      opacity: 0;
-      @include mixins.transition(border-color, background-color);
-    }
-
-    &::after {
-      content: '';
-      @include mixins.box(16px, 4px solid var(--checkbox-hover-color));
-      border-radius: 4px;
-      position: absolute;
-      opacity: 0;
-      z-index: -1;
-      @include mixins.transition(border-color, background-color);
-    }
-    &:hover {
-      border: 1px solid var(--brand-color);
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-  .ff-checkbox-hover-shadow {
-      border: 1px solid var(--brand-color);
-      &::after {
-        content: '';
-        @include mixins.box(16px, 2px solid var(--checkbox-hover-box-shadow-color));
-        border-radius: 4px;
-        position: absolute;
-        opacity: 1;
-        z-index: -1;
-        box-sizing: content-box;
-        @include mixins.transition(border-color, background-color);
-      }
-     
-  }
-  .ff-checkbox-input:checked + .ff-checkbox-custom {
-    background: var(--brand-color);
-    background-color: var(--brand-color);
-    border: 1px solid var(--brand-color);
-
-    &.ff-checkbox-checked {
-      &--total {
-        background-color: var(--brand-color);
-        border-color: var(--brand-color);
-      }
-      &--closed {
-        background-color: var(--ff-card-passed-status-bg-color);
-        border-color: var(--ff-card-passed-status-bg-color);
-      }
-      &--passed {
-        background-color: var(--ff-card-passed-status-bg-color);
-        border-color: var(--ff-card-passed-status-bg-color);
-      }
-      &--open {
-        background-color: var(--ff-card-failed-status-bg-color);
-        border-color: var(--ff-card-failed-status-bg-color);
-      }
-      &--failed {
-        background-color: var(--ff-card-failed-status-bg-color);
-        border-color: var(--ff-card-failed-status-bg-color);
-      }
-      &--warning {
-        background-color: var(--ff-card-warning-status-bg-color);
-        border-color: var(--ff-card-warning-status-bg-color);
-      }
-      &--skipped {
-        background-color: var(--ff-card-skipped-status-bg-color);
-        border-color: var(--ff-card-skipped-status-bg-color);
-      }
-      &--flaky {
-        background-color: var(--ff-card-flaky-status-bg-color);
-        border-color: var(--ff-card-flaky-status-bg-color);
-      }
-    }
-  }
-
-  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
-    background: var(--brand-color);
-    &.ff-checkbox-checked {
-      &--total {
-        background: var(--brand-color);
-      }
-      &--closed {
-        background: var(--ff-card-passed-status-bg-color);
-      }
-      &--passed {
-        background: var(--ff-card-passed-status-bg-color);
-      }
-      &--open {
-        background: var(--ff-card-failed-status-bg-color);
-      }
-      &--failed {
-        background: var(--ff-card-failed-status-bg-color);
-      }
-      &--warning {
-        background: var(--ff-card-warning-status-bg-color);
-      }
-      &--skipped {
-        background: var(--ff-card-skipped-status-bg-color);
-      }
-      &--flaky {
-        background: var(--ff-card-flaky-status-bg-color);
-      }
-    }
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  .ff-checkbox-input:disabled + .ff-checkbox-custom {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border: 1px solid var(--checkbox-border-color);
-    &::after {
-      opacity: 0;
-    }
-  }
-  .ff-storybook-checkbox--partial {
-    background-color: var(--brand-color);
-    border: none;
-    &::before {
-      opacity: 1;
-    }
-
-    &:hover {
-      background-color: var(--brand-color);
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  .ff-checkbox {
-    &--total {
-      border-color: var(--brand-color);
-      &:hover {
-        border: 1px solid var(--brand-color);
-      }
-    }
-    &--closed {
-      border-color: var(--ff-card-passed-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-passed-status-bg-color);
-      }
-    }
-    &--passed {
-      border-color: var(--ff-card-passed-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-passed-status-bg-color);
-      }
-    }
-    &--open {
-      border-color: var(--ff-card-failed-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-failed-status-bg-color);
-      }
-    }
-    &--failed {
-      border-color: var(--ff-card-failed-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-failed-status-bg-color);
-      }
-    }
-    &--warning {
-      border-color: var(--ff-card-warning-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-warning-status-bg-color);
-      }
-    }
-    &--skipped {
-      border-color: var(--ff-card-skipped-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-skipped-status-bg-color);
-      }
-    }
-    &--flaky {
-      border-color: var(--ff-card-flaky-status-bg-color);
-      &:hover {
-        border: 1px solid var(--ff-card-flaky-status-bg-color);
-      }
-    }
-  }
-}

package/lib/styles/Chip.scss

@@ -1,89 +0,0 @@
-@use '../../assets/styles/fonts' as *;
-
-@mixin chip-variant-background($color) {
-  background-color: $color;
-  color: var(--text-color);
-}
-
-.ff-chip-wrapper {
-  display: inline-flex;
-  margin: 5px;
-  justify-content: center;
-  align-items: center;
-
-  .ff-default-chip-style {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    overflow: hidden;
-    white-space: nowrap;
-    gap: 5px;
-    height: 18px;
-    border-radius: 25px;
-    padding: 1px 6px;
-    line-height: 15px;
-    border: none;
-    transition: transform 0.4s ease-in-out;
-    box-shadow: 1px 1px 3px 0px var(--ff-chips-shadow-color) inset,
-      -1px -1px 2px 0px var(--ff-chip-bg) inset,
-      1px -1px 2px 0px var(--ff-chips-shadow-color-two) inset,
-      -1px -1px 2px 0px var(--ff-chips-blur-color),
-      1px 1px 2px 0px var(--ff-chip-bg-two);
-    .ff-chip-paragraph {
-      line-height: inherit !important;
-    }
-    &--primary {
-      @include chip-variant-background(var(--ff-chips-fill-color));
-      color: var(--text-color);
-    }
-
-    &--success {
-      @include chip-variant-background(var(--ff-success));
-    }
-
-    &--error {
-      @include chip-variant-background(var(--ff-error-light));
-    }
-    &--warning {
-      @include chip-variant-background(var(--ff-warning));
-    }
-    &--custom {
-      @extend .fontSm;
-      background: #610b861a; //TODO: add color code name
-      color: #610b86; //TODO: add color code name
-      padding: 2px 8px;
-      border-radius: 12px;
-      cursor: pointer;
-      white-space: nowrap;
-      box-shadow: none;
-      transition: background-color 0.3s ease, color 0.3s ease;
-      &:hover {
-        background-color: #610b86; //TODO: add color code name
-        color: #fdfaff; //TODO: add color code name
-      }
-    }
-    &--public {
-      @include chip-variant-background(var(--public-chip-bg-color));
-      color: var(--license_header_text_color);
-    }
-
-    &--partial-public {
-      @include chip-variant-background(var(--partial-public-chip-bg-color));
-      color: var(--license_header_text_color);
-    }
-
-    &--private {
-      @include chip-variant-background(var(--private-chip-bg-color));
-      color: var(--license_header_text_color);
-    }
-
-    &--disabled {
-      @include chip-variant-background(var(--disabled-chip-bg-color));
-      color: var(--table-column-text-color);
-    }
-    &--count {
-      @include chip-variant-background(var(--impact-list-chip-bg-color));
-      color: var(--ff-chip-text-color);
-    }
-  }
-}