@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-alpha-prompt

package/framework/src/components/_price.scss

@@ -1,209 +1,184 @@
 $price-levels: (
-  ($text-64),
-  ($text-56),
-  ($text-44),
-  ($text-32),
-  ($text-28),
-  ($text-24),
-  ($text-20),
+  [$text-64, $text-44, $text-28, $text-16],
+  [$text-56, $text-32, $text-22, $text-16],
+  [$text-48, $text-28, $text-16, $text-16],
+  [$text-40, $text-24, $text-10, $text-10],
+  [$text-36, $text-20, $text-10, $text-10],
+  [$text-24, $text-20, $text-10, $text-10],
+  [$text-20, $text-20, $text-10, $text-10],
 );
 
+.price-container {
+  display: flex;
+  align-items: baseline;
+  column-gap: 12px;
+  flex-wrap: wrap;
+  --font-size: #{$text-64};
 
-.price {
-    display: inline-flex;
-    // flex-wrap: wrap;
-    &:not(.is-inlined){
-        font-size: 44px;
-    }
-
-
-    @each $price-level in $price-levels {
-        $i: index($price-levels, $price-level);
-        $font-size: nth($price-level , 1);
-
-        &.is-level-#{$i} {
-            font-size: $font-size;
-
-            @if $i > 4 {
-                .price-details {
-                    padding-left: 2px !important;
-                }
-            }
-          }
+  @each $price-level in $price-levels {
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
+    $strike-font-size: nth($price-level, 2);
 
-    // the details : cents + period
-
-    .price-details {
-        padding-left: $spacing-1;
-
-        .cents,
-        .centimes,
-        .periode,
-        .period {
-            line-height: 1;
-            display: block;
-        }
-
-        .cents,
-        .centimes {
-            font-weight: 600;
-            font-size: 0.475em;
-            vertical-align: top;
-            text-align: left;
-
-            sup {
-                font-weight: $weight-medium;
-                padding-left: 2px;
-                top: -0.3em;
-            }
-        }
+    &.is-level-#{$i} {
+      --font-size: #{$font-size};
+      --strike-font-size: #{$strike-font-size};
 
-        .period,
-        .periode {
-            font-size: 0.375em;
-            margin-top: 0;
-            padding-left: 0.1em;
-            text-align: left;
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px;
         }
+      }
     }
+  }
 
+  .overline {
+    width: 100%;
+    flex: none;
+    margin: 0;
+    font-size: calc(var(--font-size) * 0.4);
+    font-weight: 400;
+  }
 
-    }
+  .price {
+    font-size: var(--font-size);
 
-    // FIXME : le nom de cette classe devrait être préfixé de "price-"
-    .main,
-    .price-main {
-        font-weight: $weight-semibold;
-        line-height: 0.8;
-        margin-bottom: 0;
+    &.strike {
+      font-size: var(--strike-font-size);
     }
+  }
 
+}
 
+.price {
+  display: inline-flex;
+  font-weight: $weight-semibold;
+  line-height: 0.8;
+  margin-bottom: 0;
+  font-size: var(--font-size);
 
+  &.strike {
+    font-size: var(--strike-font-size);
+  }
 
 
-    // rendre les is-n deprecated dans 4 versions -  v1.18.11 -
+  @each $price-level in $price-levels {
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
+    $strike-font-size: nth($price-level, 2);
 
-    &.is-1 {
-        font-size: 56px;
-    }
+    &.is-level-#{$i} {
+      --font-size: #{$font-size};
+      --strike-font-size: #{$strike-font-size};
 
-    &.is-2 {
-        font-size: 44px;
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px;
+        }
+      }
     }
+  }
 
-    &.is-3 {
-        font-size: 32px;
-    }
 
-    &.is-4 {
-        font-size: 29px;
-    }
+  // the details : cents + period
 
-    &.is-5 {
-        font-size: 23px;
-    }
+  .price-details {
+    padding-left: $spacing-1;
 
-    &.is-6 {
-        font-size: 14px;
+    .cents,
+    .centimes,
+    .periode,
+    .period {
+      line-height: 1;
+      display: block;
     }
 
-    &.is-huge {
-        font-size: 62px;
-    }
+    .cents,
+    .centimes {
+      font-weight: 600;
+      font-size: 0.475em;
+      vertical-align: top;
+      text-align: left;
 
-    &.is-main-price {
-        color: getColor('alternate');
+      sup {
+        font-weight: $weight-medium;
+        padding-left: 2px;
+        top: -0.3em;
+      }
     }
 
-    &.is-inverted {
-        color: getColor('background');
+    .period,
+    .periode {
+      font-size: 0.375em;
+      margin-top: 0;
+      padding-left: 0.1em;
+      text-align: left;
+        font-weight: $weight-normal;
     }
+  }
 
-    &.has-suptitle {
-        display: flex;
-        flex-wrap: wrap;
+  &.is-inverted {
+    color: getColor('background');
+  }
 
-        .price-suptitle {
-            flex-basis: 100%;
-            font-size: 0.375em;
-        }
+  &.has-description {
+    .cents,
+    .centimes {
+      align-items: flex-start;
+      display: flex;
     }
 
-    &.has-description {
-        .cents,
-        .centimes {
-            align-items: flex-start;
-            display: flex;
-        }
-
-        .icon {
-            height: inherit;
-            width: inherit;
-        }
+    .icon {
+      height: inherit;
+      width: inherit;
     }
+  }
 
-    &.is-inlined {
-        .price-details {
-            display: inline-flex;
-            margin-left: 0;
-            padding-left: 0 !important;
-            .cents,
-            .centimes,
-            .periode,
-            .period {
-                font-size: inherit;
-                line-height: 0.8;
-                padding-left: 0;
-            }
-        }
-
-        &.is-striked {
-            &::before {
-                transform: rotate(-12deg);
-            }
-        }
+  &.is-inlined {
+    .price-details {
+      display: inline-flex;
+      margin-left: 0;
+      padding-left: 0 !important;
+
+      .cents,
+      .centimes,
+      .periode,
+      .period {
+        font-size: inherit;
+        line-height: 0.8;
+        padding-left: 0;
+      }
     }
 
-    &.is-striked {
-        position: relative;
-        color: getVariantColor('font', 2);
-
-        &::before {
-            position: absolute;
-            content: "";
-            left: 0;
-            top: 50%;
-            right: 0;
-            border-top: 2px solid;
-            border-color: getColor('font');
-            border-radius: 5px;
-            transform: rotate(-20deg);
-        }
-
-        &.is-main-price {
-            color: getVariantColor('alternate', 2);
-            &::before {
-                border-color: getColor('alternate');
-            }
-        }
+    &.strike {
+      &::before {
+        transform: rotate(-12deg);
+      }
+    }
+  }
 
-        &.is-inverted {
-            color: getVariantColor('background', 2);
+  &.strike {
+    position: relative;
+    color: getColor('font-placeholder');
 
-            &::before {
-                border-color: getColor('background');
-            }
-        }
+    &::before {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      right: 0;
+      border-top: 2px solid;
+      border-color: getColor('font-placeholder');
+      border-radius: 5px;
+      transform: rotate(-20deg);
+    }
 
-        &.has-suptitle {
-            display: inline-flex;
-            margin-top: 0.55em;
+    &.is-inverted {
+      color: getColor('background');
 
-            .price-suptitle {
-                position: absolute;
-                top: -1.4em;
-            }
-        }
+      &::before {
+        border-color: getColor('background');
+      }
     }
+  }
 }

package/framework/src/components/_product-tour.scss

@@ -1,5 +1,3 @@
-$product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-background defaults
-
 .product-tour {
     position: absolute;
     z-index: zindex('modal');
@@ -94,7 +92,7 @@ $product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-b
             top: 0;
             left: 0;
             background: white;
-            border-radius: 100%;
+            border-radius: 9999px;
             box-shadow: $shadow;
             transform: translate(-50%, -50%);
 
@@ -124,7 +122,7 @@ $product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-b
 
 .product-tour-target {
     &-active {
-        outline: 999em solid $product-tour-target-outline !important;
+        outline: 999em solid getColor('main') !important;
         outline-offset: 10px !important;
         z-index: zindex('modal');
     }

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;
+    }
+  }
+}