pixel-react 1.13.43 → 1.13.44

package/lib/styles/Textarea.scss

@@ -1,173 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-textarea-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  gap: 5px;
-
-  @extend .fontSm;
-
-  .msg-character-count {
-    @extend .font-size-8;
-    display: flex;
-    color: var(--text-area-default-color);
-    justify-content: flex-end;
-    height: 18px;
-  }
-  .ff-textarea-error-alignment {
-    display: flex;
-    color: var(--text-area-default-color);
-    justify-content: space-between;
-    padding-left: 10px;
-    height: 18px;
-  }
-  .ff-textarea-error-text {
-    color: var(--ff-error-light);
-  }
-  .ff-textarea-character-count {
-    @include mixins.center-vertical();
-  }
-  .ff-textarea {
-    padding: 8px;
-    gap: 0px;
-    border: 1px solid var(--default-icon-color);
-    border-radius: 4px;
-    outline: none;
-    @extend .fontSm;
-    line-height: 18px;
-    font-weight: 400;
-    overflow: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-
-    ::-webkit-scrollbar {
-      display: none;
-    }
-    &--resize {
-      resize: none;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      &:hover {
-        border-color: var(--default-icon-color);
-      }
-    }
-
-    &::placeholder {
-      opacity: 0;
-    }
-
-    &--danger {
-      border-color: var(--ff-error-light);
-    }
-
-    &--transparentBackground {
-      background: transparent;
-    }
-  }
-
-  .ff-textarea-label-container {
-    @extend .ff-textarea;
-    display: flex;
-    position: absolute;
-    border: none;
-    outline: none;
-    margin-top: 1px;
-    transition: all 0.3s ease-in-out;
-
-    .ff-textarea-label {
-      height: 10px;
-      width: auto;
-      background-color: var(--drawer-footer-bg);
-      color: var(--text-area-default-color);
-      &--danger {
-        color: var(--ff-error-light);
-      }
-    }
-
-    .required-asterisk {
-      color: var(--ff-error-light);
-    }
-  }
-
-  &:hover {
-    .ff-textarea-label {
-      color: var(--text-color);
-    }
-    .ff-textarea {
-      border-color: var(--toggle-strip-active);
-    }
-  }
-
-  &:focus-within {
-    .ff-textarea-label-container {
-      font-weight: 400;
-      line-height: 12px;
-      letter-spacing: 0.5px;
-      text-align: left;
-      top: -6px;
-      @extend .font-size-10;
-      background-color: transparent;
-      padding: 0px 2px;
-      margin-left: 7px;
-    }
-
-    .ff-textarea-label {
-      &--primary {
-        color: var(--brand-color);
-      }
-    }
-
-    .ff-textarea {
-      &--primary {
-        border-color: var(--brand-color);
-      }
-
-      &::placeholder {
-        opacity: 1;
-        margin-bottom: 1px;
-        @extend .font-size-10;
-      }
-    }
-  }
-
-  .ff-textarea-message {
-    @extend .font-size-8;
-    padding: 0px 4px;
-    margin-left: 8px;
-    line-height: 12px;
-    &--danger {
-      color: var(--ff-error-light);
-    }
-  }
-
-  &--float {
-    .ff-textarea-label-container {
-      letter-spacing: 0.5px;
-      top: -6px;
-      @extend .font-size-10;
-      background-color: transparent;
-      line-height: 12px;
-      padding: 0px 2px;
-      margin-left: 7px;
-    }
-  }
-
-  &--disabled {
-    &:hover {
-      .ff-textarea-label {
-        color: var(--text-area-default-color);
-      }
-      .ff-textarea {
-        border-color: var(--default-icon-color);
-      }
-    }
-    cursor: not-allowed;
-    .ff-textarea-label-container {
-      cursor: not-allowed;
-    }
-  }
-}

package/lib/styles/Theme.scss

@@ -1,21 +0,0 @@
-@use './BaseTheme' as base;
-@use './DarkTheme' as dark;
-@use './BlueTheme' as blueTheme;
-
-@mixin set-theme-variables($theme-map) {
-  @each $key, $value in $theme-map {
-    --#{$key}: #{$value};
-  }
-}
-
-.ff-light-theme {
-  @include set-theme-variables(base.$base-theme);
-}
-
-.ff-dark-theme {
-  @include set-theme-variables(dark.$dark-theme);
-}
-
-.ff-blue-theme {
-  @include set-theme-variables(blueTheme.$blue-theme);
-}

package/lib/styles/Toast.scss

@@ -1,121 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-toaster-overlay {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  pointer-events: none;
-  justify-content: flex-end;
-  align-items: flex-end;
-
-  .ff-toaster {
-    background-color: var(--drawer-footer-bg);
-    display: flex;
-    border-radius: 10px;
-    margin: 16px;
-    pointer-events: auto;
-    min-width: 320px;
-    max-width: 600px;
-    gap: 8px;
-    box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);
-    animation: slideInToasterBottomRight 0.5s forwards;
-
-    .ff-toaster-container {
-      padding: 8px;
-      display: flex;
-      border-radius: 10px;
-      gap: 8px;
-      width: 100%;
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: 8px;
-        padding: 1px;
-        -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box,
-          linear-gradient(var(--drawer-footer-bg) 0 0);
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        z-index: -1;
-      }
-
-      .ff-toaster-content {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        gap: 4px;
-        &__title {
-          max-width: 500px;
-          word-wrap: break-word;
-        }
-        &__message {
-          max-width: 500px;
-          word-wrap: break-word;
-        }
-        &__prompt {
-          margin-top: 4px;
-          display: flex;
-          gap: 10px;
-        }
-      }
-    }
-    &--success::before {
-      background: var(--toaster-success-border);
-    }
-    &--warning::before {
-      background: var(--toaster-warning-border);
-    }
-
-    &--info::before {
-      background: var(--toaster-info-border);
-    }
-
-    &--danger::before,
-    &--confirm::before {
-      background: var(--toaster-danger_confirm-border);
-    }
-
-    .ff-close-icon-wrapper {
-      box-sizing: border-box;
-      cursor: pointer;
-      height: fit-content;
-      width: fit-content;
-      border-radius: 8px;
-      padding: 8px;
-      background: var(--toast-close-icon-wrapper-bg);
-      margin-left: auto;
-    }
-  }
-
-  &.exiting {
-    animation: slideOutToasterBottomRight 0.5s forwards;
-  }
-}
-@keyframes slideOutToasterBottomRight {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-@keyframes slideInToasterBottomRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-// style related to buttons in storybook UI only
-.fireflink-stories-toaster-container {
-  .fireflink-stories-toaster-container-row {
-    display: flex;
-    gap: 5px;
-    margin: 15px;
-  }
-}

package/lib/styles/Toggle.scss

@@ -1,133 +0,0 @@
-@use "sass:map";
-$switch-sizes: (
-  small: (
-    button-size: 16px,
-    container-width: 24px,
-    container-height: 10px,
-    translate-x: 10px,
-  ),
-  medium: (
-    button-size: 20px,
-    container-width: 32px,
-    container-height: 14px,
-    translate-x: 14px,
-  ),
-  large: (
-    button-size: 24px,
-    container-width: 40px,
-    container-height: 16px,
-    translate-x: 16px,
-  ),
-);
-
-@mixin switch-size($size) {
-  $button-size: map.get(map.get($switch-sizes, $size), button-size);
-  $container-width: map.get(map.get($switch-sizes, $size), container-width);
-  $container-height: map.get(map.get($switch-sizes, $size), container-height);
-  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
-
-  width: $container-width;
-  height: $container-height;
-
-  .ff--switch-button {
-    width: $button-size;
-    height: $button-size;
-    transform: translateX(0);
-    &.checked {
-      transform: translateX($translate-x);
-    }
-  }
-}
-
-.ff--switch-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  .ff--switch-checkbox {
-    height: 0;
-    width: 0;
-    display: none;
-
-    &:checked {
-      + .ff--switch-label {
-        .ff--switch-button {
-          right: -1px;
-          border: 1px solid var(--brand-color);
-          background: var(--toggle-button-bg-color);
-          transition: all 0.3s;
-          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
-          .ff-checked-icon--primary {
-            svg {
-              path {
-                fill: var(--brand-color);
-              }
-            }
-          }
-        }
-
-        &--primary {
-          background: var(--brand-color);
-          transition: all 0.3s;
-        }
-
-        &:disabled {
-          cursor: default;
-          color: var(--disable-color);
-          background: var(--disable-color);
-        }
-      }
-    }
-    &:disabled {
-      cursor: no-drop;
-    }
-  }
-
-  .ff--switch-label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    border-radius: 8px;
-    position: relative;
-    background: var(--toggle-strip-color);
-    transition: all 0.3s;
-
-    &--disabled {
-      opacity: 0.5;
-      cursor: no-drop;
-    }
-
-    .ff--switch-button {
-      position: absolute;
-      left: 0;
-      border: 1px solid var(--toggle-strip-color);
-      display: flex;
-      background: var(--toggle-button-bg-color);
-      border-radius: 50%;
-      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
-      transition: all 0.3s;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-
-      .ff-unchecked-icon--primary {
-        svg {
-          path {
-            fill: var(--toggle-disable-icon-color);
-          }
-        }
-      }
-    }
-  }
-
-  .default--small {
-    @include switch-size(small);
-  }
-  .default--medium {
-    @include switch-size(medium);
-  }
-  .default--large {
-    @include switch-size(large);
-  }
-}

package/lib/styles/ToggleSwitch.scss

@@ -1,59 +0,0 @@
-/* Container Styling */
-.toggle-container {
-    display: flex;
-    background-color: var(--base-bg-color);
-    height: 24px;
-    border-radius: 6px;
-    padding: 4px 2px;
-    overflow: hidden;
-    width: fit-content;
-    box-shadow: 1px 1px 2px 0px var(--base-bg-color),
-    inset -1px -1px 2px var(--base-bg-color),
-    inset 1px -1px 2px var(--ff-toggle-switch-shadow-color),
-    inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-  }
-  
-  /* Button Styling */
-  .toggle-button {
-    padding: 4px 2px;
-    font-size: 10px;
-    font-weight: 500;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    background-color: var(--base-bg-color);
-    color: var(--ff-toggle-switch-off-color);
-    outline: none;
-    transition: all 0.3s ease;
-    min-width: 24px;
-    height: 20px;
-    text-align: center;
-    box-shadow: 
-    inset 1px 1px 2px 0 var(--base-bg-color),
-    1px 1px 3px 0 var(--ff-chips-blur-color),
-    -1px -1px 2px 0 var(--base-bg-color),
-    1px -1px 2px 0 var(--ff-chips-blur-color),
-    -1px 1px 2px 0 var(--ff-chips-blur-color)
-  }
-  
-  /* Active Button */
-  .toggle-button.active {
-    background-color: var(--ff-line-number-bg);
-    color: var(--base-bg-color);
-    box-shadow: 
-    inset -1px -1px 2px 0 var(--ff-chips-blur-color),
-    1px 1px 3px 0 var(--ff-chips-blur-color),
-    -1px -1px 2px 0 var(--base-bg-color),
-    -1px 1px 2px 0 var(--ff-chips-blur-color);
-  }
-  
-  /* Button Hover Effect */
-  .toggle-button:hover {
-    background-color: var(--hover-color);
-    color: var(--brand-color);
-  }
-  
-  

package/lib/styles/Tooltip.scss

@@ -1,28 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-tooltip-container {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.ff-tooltip {
-  @extend .fontSm;
-  position: fixed;
-  width: max-content;
-  max-width: 45vw;
-  word-wrap: break-word;
-  background-color: var(--tooltip-bg-color);
-  line-height: 18px;
-  color: var(--tooltip-text-color);
-  text-align: center;
-  border-radius: 5px;
-  padding: 4px 8px;
-  opacity: 0;
-  z-index: 9999999;
-
-  &--visible {
-    opacity: 1;
-    transition: opacity 0.3s;
-  }
-}

package/lib/styles/Typography.scss

@@ -1,99 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.typography-container {
-  .typography-header {
-    & div {
-      @extend .font2Xl;
-      font-weight: 600;
-    }
-    & span {
-      @extend .fontSm;
-      font-weight: 400;
-      color: var(--tooltip-bg-color); // need to change color #7A7A7A
-    }
-  }
-}
-.font-display {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.font-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
-}
-
-.font-left {
-  width: 60%;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-color);
-  padding: 10px;
-  gap: 10px;
-
-  .font-name {
-    @extend .fontLg;
-    font-weight: 600;
-  }
-
-  .font-sample {
-    @extend .font-size-80;
-    font-weight: 700;
-  }
-
-  .font-characters {
-    @extend .font2Xl;
-    font-weight: 400;
-    line-height: 36px;
-    letter-spacing: 0.16em;
-    white-space: pre;
-  }
-}
-
-.font-right {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 20px;
-  gap: 20px;
-
-  .font-right-section {
-    display: flex;
-    align-items: center;
-
-    .font-sample-large {
-      font-size: 40px;
-      margin-right: 10px;
-    }
-
-    // Apply specific font weight different sections
-    &.bold {
-      @extend .font2Xl;
-      font-weight: 700;
-    }
-    &.semi-bold {
-      @extend .font2Xl;
-      font-weight: 600;
-    }
-    &.regular {
-      @extend .font2Xl;
-      font-weight: 400;
-    }
-
-    .font-info {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-
-      // Specific styling for the font-size part
-      .font-size {
-        @extend .fontLg;
-        font-weight: 400;
-        color: var(--tooltip-bg-color);
-      }
-    }
-  }
-}

package/lib/styles/VariableDropdown.scss

@@ -1,26 +0,0 @@
-.ff-variable-dropdown {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--variable-dropdown-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  overflow: hidden;
-  overflow-y: auto;
-  &.absolute {
-    position: absolute;
-    top: 34px;
-  }
-  &.relative {
-    position: relative;
-  }
-}
-.ff-variable-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--hover-color);
-  }
-}