@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/components/_prompt.scss

@@ -0,0 +1,125 @@
+$height-prompt-item: 64px;
+
+.prompt {
+    box-shadow: 0 0 0 1px var(--color-stroke);
+    border-radius: var(--radius-small);
+    overflow: hidden;
+    * {
+        margin-bottom: 0px !important;
+    }
+    &:focus-within {
+        box-shadow: 0 0 0 2px currentColor;
+    }
+    &-textarea {
+        textarea {
+            outline: none !important;
+            border: 0px !important;
+            background-color: initial !important;
+            min-height: 20px !important;
+            max-height: 180px !important;
+            transition: height 0.1s ease;
+            padding: 16px !important;
+            height: auto;
+            resize: none;
+        } 
+    }
+    &-files {
+        padding: 16px 16px 0px 16px !important;
+        margin:0 !important;
+        &-img {
+            border-radius: 8px;
+        }
+        &-file {
+            width: $height-prompt-item;
+            height: $height-prompt-item;
+            position: relative;
+        }
+        &-file-name {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 59%;  
+        }
+        &-doc {
+            width: fit-content;
+            max-width: 264px;
+            &-preview {
+                width: 40px;
+                height: 40px; 
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: none;
+                .box-content {
+                    margin: 0px !important;
+                }
+            }
+            &-card-content {
+                padding:8px !important
+            }
+        }
+        &-delete {
+            background-color: getColor('main-fade');
+            border-radius: 100px;
+            height: 20px;
+            width: 20px;
+        }
+        &-delete-img {
+            position: absolute;
+            top: 2px;
+            right: 2px;
+        }
+    }
+    &-toolbar {
+        display: flex;
+        gap: 16px;
+        padding: 0px 16px 16px 16px;
+        align-items: center;
+        &-tools {
+            display: flex;
+            gap: 16px;
+            align-items: end;
+            margin-right: auto;
+        }
+        &-tool {
+            height: 36px;
+            select {
+                height: 36px;
+                border-width: 0px !important;
+                max-width: 180px;
+                &:focus {
+                    padding-left: 16px !important;
+                }
+                @include mobile {
+                    max-width: 110px;
+                }
+            }
+            .field .control::after {
+                right: 0px !important;
+            }
+            &.active {
+                background-color: getColor('main') !important;
+                .icon i {
+                    background-color: getColor('background');
+                }
+            }
+        }
+        &-tool.icon_only {
+            width: 36px !important;
+        }
+        &-microphone {
+            border-radius: 100px;
+        }
+        &-tool-submit.streaming {
+            padding: 0;
+        }
+
+    }
+
+    &-stop_streaming {
+        background-color: getColor('background');
+        height: 16px;
+        width: 16px;
+        border-radius: 3px;
+    }
+}

package/framework/src/components/_radio.scss

@@ -0,0 +1,82 @@
+@include checkbox-and-radio('radio');
+
+.radios {
+  width: 100%;
+  column-gap: $spacing-5;
+  row-gap: $spacing-3;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  @include tablet {
+    flex-direction: row;
+
+    &.is-vertical-desktop {
+      flex-direction: column;
+    }
+  }
+
+  @include mobile {
+    &.is-horizontal-mobile {
+      flex-direction: row;
+    }
+  }
+
+  &.is-centered,
+  &.has-text-centered,
+  .has-text-centered & {
+    justify-content: center;
+  }
+}
+
+.radio,
+.radio-tile {
+  input:checked ~ label.radio-label {
+    cursor: default;
+
+    &:after {
+      content: '';
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  label.radio-label {
+    &:before,
+    &:after {
+      border-radius: 9999px;
+    }
+  }
+}
+
+.radio {
+  input:checked ~ label.radio-label {
+    &:after {
+      left: 3px;
+    }
+  }
+
+  input:not(:disabled):not(:checked) ~ label.radio-label:hover {
+    &:before {
+      @include hoverRules()
+    }
+  }
+
+}
+
+.radio-tile {
+  input:checked ~ label.radio-label {
+    &:after {
+      top: 18px;
+      left: 18px;
+    }
+  }
+
+  input:checked:disabled ~ label.radio-label {
+    &:after {
+      background-color: getColor('neutral');
+      top: 19px;
+      left: 19px;
+    }
+  }
+}

package/framework/src/components/_range.scss

@@ -0,0 +1,85 @@
+.range-container {
+  @mixin appearence {
+    appearance: none;
+    height: 5px;
+  }
+
+  @mixin slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    pointer-events: auto;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+    outline: none;
+    border: none;
+  }
+
+  .range {
+    width: 100%;
+    position: relative;
+    margin-top: 18px;
+    margin-bottom: 20px;
+
+    .range-track {
+      width: 100%;
+      height: 8px;
+      border-radius: var(--radius);
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      @include mobile {
+        height: 4px;
+        border-radius: var(--radius-small);
+      }
+    }
+
+    .range-cursor {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      width: 100%;
+      outline: none;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      background-color: transparent;
+      pointer-events: none;
+
+      &::-webkit-slider-runnable-track {
+        @include appearence;
+      }
+
+      &::-moz-range-track {
+        @include appearence;
+      }
+
+      &::-ms-track {
+        @include appearence;
+      }
+
+      &::-webkit-slider-thumb {
+        @include slider-thumb;
+        margin-top: -8px;
+      }
+
+      &::-moz-range-thumb {
+        @include slider-thumb;
+      }
+
+      &::-ms-thumb {
+        @include slider-thumb;
+      }
+    }
+  }
+
+  .range-values {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 14px;
+    font-weight: bold;
+  }
+}

package/framework/src/components/_scroll-view.scss

@@ -0,0 +1,19 @@
+.scroll-view {
+  overflow: auto;
+
+  &.scroll-horizontal {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    &.scroll-snap {
+      scroll-snap-type: x mandatory;
+      >.div {
+        scroll-snap-align: start;
+      }
+    }
+  }
+
+  &.scroll-vertical {
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}

package/framework/src/components/_segmented-control.scss

@@ -0,0 +1,62 @@
+.segmented-control {
+  border-radius: 6px;
+  padding: $spacing-1;
+  background-color: getColor('background');
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+  border: 1px solid getColor('neutral');
+
+
+  &.justified-start {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  &.justified-end {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  @include mobile {
+    display: flex;
+    margin: 24px auto;
+    width: 100%;
+  }
+
+  .segmented-control-item {
+    padding: $spacing-3 $spacing-4;
+    border-radius: var(--radius-small);
+    font-size: 16px;
+    text-align: center;
+    border: 2px solid transparent;
+    color: getColor('font');
+    background-color: getColor('background');
+
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
+
+    @include mobile {
+      flex: 1 1 0;
+      width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &:hover:not([disabled], [aria-disabled=true], .is-active) {
+      cursor: pointer;
+      @include hoverRules()
+    }
+
+    &.is-active {
+      background-color: getColor('main');
+      color: invertColor('main');
+    }
+
+    &:disabled{
+      border-color: transparent !important;
+    }
+  }
+}

package/framework/src/components/_select.scss

@@ -0,0 +1,131 @@
+$status-select: (
+  'success', 'error'
+);
+
+.select {
+  position: relative;
+  input { cursor: pointer }
+
+  select {
+    width: 100%;
+    @include input;
+    padding-right: 40px;
+    text-overflow: ellipsis;
+
+    &:focus {
+      padding-left: 15px !important;
+    }
+
+    // to prevent user agent style
+    &:disabled {
+      opacity: 1 !important;
+    }
+
+    @each $name in $status-select {
+      $color: getColor($name);
+      $color-invert: invertColor($name);
+      $brandName: getColorBrandName($name);
+  
+      &.is-#{$brandName} {
+        border: 1px solid $color;
+      }
+    }
+  }
+
+  .has-icons-left {
+    select {
+      padding-left: 45px;
+
+      &:focus {
+        padding-left: 44px !important;
+      }
+    }
+  }
+
+  &-options {
+    box-shadow: 0 0 8px #0000001a;
+    border-radius: 4px;
+    overflow: hidden;
+    position: absolute;
+    z-index: 1001;
+    left: 0;
+    right: 0;
+    margin-top: 8px;
+  }
+
+
+  .field {
+    margin-bottom: 0 !important;
+      .control {
+        position: relative;
+        &:after {
+          @include arrow();
+          right: 12px;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          transition: transform 0.3s;
+          min-width: 20px;
+          min-height: 20px;
+          mask-size: 20px;
+          pointer-events: none;
+        }
+      }
+
+      &.focus .control {
+          &:after {
+            transform:  rotate(180deg) translate(50%, 50%);
+          }
+      }
+  }
+
+
+  &-trilogy_modal_open {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+  }
+
+  .select-options {
+    background-color: getColor('background');
+
+    li.option {
+      padding: $spacing-3 $spacing-4;
+      cursor: pointer;
+      display: flex;
+      gap: $spacing-2;
+      @include hover;
+
+      &.is-disabled {
+        color: getColor('disabled');
+        background-color: getColor('disabled-fade');
+        cursor: not-allowed;
+      }
+
+      &[data-selected="true"] {
+        font-weight: $weight-black;
+
+        &:after {
+          content: "" !important;
+          mask-image: url('./assets/icons/all/check.svg') !important;
+          background-color: getColor('main') !important;
+          mask-size: 18px !important;
+          right: 18px !important;
+          height: 18px !important;
+          width: 18px !important;
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  &-options-top {
+    top: auto;
+    bottom: 100%;
+    overflow-y: scroll;
+  }
+}
+
+

package/framework/src/components/_stepper.scss

@@ -0,0 +1,217 @@
+@use "sass:math";
+
+.stepper-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  min-height: 44px;
+  gap: $spacing-4;
+
+  @include touch {
+    gap : $spacing-2;
+  }
+}
+
+.stepper-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:before {
+    content: "";
+    display: block;
+    height: 4px;
+    border-radius: var(--radius-small);
+    background-size: 200% !important;
+    background-color: getColor('neutral');
+  }
+
+  &.is-error {
+
+    &:before {
+      background-color: getColor('error') !important;
+
+    }
+    &.is-current{
+      &:before{
+        animation: progress 1s;
+      }
+
+    }
+
+    .step-bars {
+      background: getColor('error') !important;
+    }
+
+    color: getColor('font');
+
+    .step-label {
+
+      &::before {
+        content: "";
+        mask-image: url('./assets/icons/all/times.svg') !important;
+        background-color: getColor('error') !important;
+        border-width: 0;
+        mask-size: 20px;
+        width: 20px;
+        height: 20px;
+        align-self: baseline;
+        margin-top: 2px;
+      }
+
+      .icon {
+        display: none;
+      }
+    }
+  }
+
+  &.is-done {
+
+    &:before {
+      background-color: getColor('font');
+    }
+
+    .step-bars {
+      background: getColor('font');
+      transition: background-color 1s ease-in-out;
+    }
+
+    .step-label {
+      &::before {
+        content: "";
+        mask-image: url('./assets/icons/all/check-circle.svg');
+        background-color: getColor('success');
+        border-width: 0;
+        min-width: 20px;
+        mask-size: 20px;
+        height: 20px;
+        align-self: baseline;
+        margin-top: 2px;
+      }
+    }
+  }
+
+  &.is-current,
+  &.is-active {
+
+    &:before {
+      background-color: getColor('main');
+      animation: progress 1s;
+    }
+
+    .step-bars {
+      background: getColor('main');
+    }
+
+    .step-label {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 22px;
+      width: max-content;
+
+      .icon [class^=tri-], .icon [class*=" tri-"] {
+        height: 22px;
+        width: 22px;
+        margin: 0 4px 0 -4px;
+      }
+
+      @include tablet-only {
+        width: 90% !important;
+      }
+
+      @include mobile {
+        font-size: 18px;
+        width: 90%;
+      }
+    }
+  }
+}
+
+.step-bars {
+  height: 4px;
+  background: getColor('disabled');
+  border-radius: var(--radius-small);
+  display: none;
+}
+
+.step-label {
+  display: flex;
+  align-items: center;
+  color: getColor('font');
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  padding-top: $spacing-2;
+  gap: $spacing-1;
+  .icon {
+    font-size: 20px;
+    height: auto;
+  }
+
+  @include touch {
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
+}
+
+@include desktop {
+  .step-count {
+    display: none;
+  }
+}
+
+@include mobile {
+  .step-count {
+    position: absolute;
+    top: 23px;
+    right: 8px;
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 600;
+  }
+
+  .stepper-item:not(.is-current) {
+    display: flex;
+
+    .step-label {
+      display: none;
+    }
+  }
+}
+
+@include tablet-only {
+  .step-count {
+    position: absolute;
+    top: 24px;
+    right: 8px;
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 600;
+  }
+
+  .stepper-item:not(.is-current) {
+    display: flex;
+
+    .step-label {
+      display: none;
+    }
+  }
+}
+
+
+@keyframes progress {
+  0%, 100% {
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral') 50%, getColor('neutral') 100%);
+  }
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+