@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/base/_loading.scss

@@ -0,0 +1,109 @@
+@use "sass:math";
+
+@keyframes loading-pulse {
+    100% {
+        opacity: .1;
+    }
+}
+
+@mixin text-blocks() {
+    p.suptitle {
+        @content;
+    }
+}
+
+@mixin loading {
+    &.is-loading,
+    .is-loading & {
+        @content;
+    }
+}
+
+p.is-loading,
+.is-loading p {
+    @include text-tags {
+        visibility: hidden;
+    }
+}
+
+.is-loading {
+    @include unselectable;
+
+    &.is-checkradio[type="checkbox"] + label::before,
+    .is-checkradio[type="checkbox"] + label::before,
+    &.is-checkradio[type="checkbox"] + label::after,
+    .is-checkradio[type="checkbox"] + label::after {
+        visibility: hidden;
+    }
+  &::after {
+    @include spinner();
+    @include center(1em);
+    position: absolute !important;
+  }
+
+    &.field,
+    .field {
+        .icon {
+            display: none;
+        }
+
+        .input {
+            border: 0;
+            pointer-events: none;
+
+            &::placeholder {
+                color: transparent;
+            }
+        }
+    }
+
+    filter: grayscale(1);
+    cursor: default !important;
+    color: transparent !important;
+    pointer-events: none;
+
+    // make the text elements like subtle animated lines
+    @include text-tags {
+        display: inline;
+        border-radius: 9999px;
+        background: currentColor !important;
+        box-decoration-break: clone;
+        font-size: 70%;
+        letter-spacing: 2px;
+        -webkit-animation: loading-pulse 1.5s ease-out infinite alternate;
+        -moz-animation: none;
+        opacity: .2;
+    }
+
+    @include text-blocks {
+        display: block;
+    }
+
+    // we need the headings to have margins AND be inline
+    @include heading-tags {
+        display: table;
+    }
+
+    & & {
+        @include disable-animation;
+    }
+}
+
+// skeleton transitions
+//
+.is-loaded {
+    /**
+    The shape of the animation are designed so that the final state appears
+    as quick as possible. This should enhance the speed index
+    */
+    @include text-tags {
+        transition-duration: math.div($animation-duration, 2);
+        transition-timing-function: $animation-timing-function;
+        transition-property: font-size, letter-spacing;
+
+        /**
+        Animations are too slow on FF. We choose to disable it until they fix the problem
+        */
+        -moz-transition: none;
+    }
+}

package/framework/src/base/_reset.scss

@@ -0,0 +1,148 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+.reset-wrap {
+    p,
+    ol,
+    ul,
+    li,
+    dl,
+    dt,
+    dd,
+    blockquote,
+    figure,
+    fieldset,
+    legend,
+    textarea,
+    pre,
+    iframe,
+    hr,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        padding: 0;
+    }
+
+    // Headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: 100%;
+        font-weight: normal;
+    }
+
+    p:not(:last-child) {
+        margin-bottom: 10px;
+    }
+
+    a {
+        color: unset;
+        text-decoration: none;
+    }
+    
+  a.link {
+    color: getColor('font');
+    cursor: pointer;
+    text-decoration: none;
+
+    strong {
+      color: currentColor;
+    }
+  }
+
+    // List
+    ul {
+        list-style: none;
+    }
+
+    // Form
+    button,
+    input,
+    select,
+    textarea {
+        margin: 0;
+    }
+
+    // Media
+    img,
+    audio,
+    video {
+        height: auto;
+        max-width: 100%;
+    }
+
+    // Iframe
+    iframe {
+        border: 0;
+    }
+
+    // Table
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    td,
+    th {
+        padding: 0;
+        text-align: left;
+
+        &:not([align]) {
+            text-align: left;
+        }
+    }
+
+    span {
+        font-style: inherit;
+        font-weight: inherit;
+    }
+
+    strong {
+        color: inherit;
+        font-weight: $weight-bold;
+    }
+
+    sup {
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+        top: -.4em;
+        font-size: .7em;
+    }
+
+    small {
+        font-size: 0.875em;
+    }
+
+    code {
+        font-size: $size-7;
+        padding: 4px 8px;
+    }
+
+    code,
+    pre {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: auto;
+        font-family: $family-code;
+    }
+
+    pre {
+        @include overflow-touch;
+        font-size: 0.875em;
+        overflow-x: auto;
+        padding: 12.5px 15px;
+        white-space: pre;
+        word-wrap: normal;
+
+        code {
+            font-size: 1em;
+            padding: 0;
+        }
+    }
+}

package/framework/src/components/_accordion.scss

@@ -0,0 +1,144 @@
+.accordion#{$suffix} {
+  padding-left: 0;
+  padding-right: 0;
+
+  /* Chrome + Webkit */
+  details.accordion-item ::-webkit-details-marker {
+    display: none;
+    content: "";
+  }
+
+  details.accordion-item summary {
+    list-style-image: none;
+  }
+
+  .accordion-item {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: getColor('background');
+    font-size: $size-normal;
+    border: var(--border);
+    border-radius: var(--radius);
+    margin: 8px 0;
+    min-height: 56px;
+    max-height: max-content;
+    transition: margin 0.3s;
+
+    .accordion-header {
+      font-weight: bold;
+    }
+
+    .accordion-body {
+      padding: $spacing-4;
+      padding-top: 0 !important;
+      box-sizing: border-box;
+    }
+
+    &:has(summary:hover):not(.is-disabled)  {
+      @include hoverRules();
+    }
+
+    &:has(summary:focus-visible) {
+      outline: var(--border-active);
+      outline-offset: -2px;
+    }
+
+    .accordion-header:after {
+      max-width: $arrow-size;
+      max-height: $arrow-size;
+      position: absolute;
+      margin-top: 0;
+      right: 20px;
+    }
+
+    &[open]:not([aria-disabled="true"]) .accordion-header:after {
+      transform: rotate(180deg);
+    }
+
+    .accordion-header:after, &[aria-disabled="true"] .accordion-header:after {
+      @include arrow();
+      transition: transform 0.3s;
+    }
+
+    &[aria-disabled="true"] .accordion-body {
+      display: none !important;
+    }
+
+    .accordion-header {
+        border-radius: var(--radius);
+      transition: margin 300ms ease-out;
+
+      &:focus-visible{
+        outline: none;
+      }
+
+    }
+
+    &[open] .accordion-header {
+      margin-bottom: 4px;
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .accordion-header {
+      align-items: center;
+      display: flex;
+      position: relative;
+      height: auto;
+      cursor: pointer;
+      padding: $spacing-4 calc($spacing-4 * 2 + $arrow-size) $spacing-4 $spacing-4;
+
+      &.is-grouped {
+        > *:first-child {
+          flex-grow: 0;
+        }
+      }
+
+      .field:not(:last-child) {
+        margin-bottom: 0;
+      }
+
+      .accordion-title {
+        .title {
+          margin: 0;
+        }
+
+        @include mobile() {
+          flex-grow: 1;
+        }
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+
+      & + .accordion-body {
+        overflow-y: hidden;
+
+        .accordion-content {
+          border-radius: var(--radius);
+          margin-bottom: 10px;
+
+          @include mobile() {
+            padding: 15px;
+          }
+        }
+      }
+    }
+
+    .accordion-body {
+      .accordion-content,
+      p:last-child {
+        margin-bottom: 0 !important;
+        padding: 0 !important;
+      }
+    }
+  }
+}

package/framework/src/components/_autocomplete.scss

@@ -0,0 +1,38 @@
+@import "../utilities/spacing";
+
+.is-autocomplete-container {
+  position: relative;
+
+  .is-autocomplete {
+    .autocomplete-menu {
+      display: none;
+    }
+
+    &.is-active {
+      .autocomplete-menu {
+        display: block;
+        border: var(--border);
+        padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
+        border-radius: 4px;
+        max-height: 220px;
+        overflow-y: auto;
+        background-color: getColor('background');
+        z-index: 10000;
+      }
+
+      .autocomplete-item {
+        cursor: pointer;
+        padding: calc($spacing-1 - 0.25px) calc($spacing-1 + 1px);
+
+        &.is-active, &[data-autocomplete-item-hover] {
+          @include hoverRules();
+          margin-left: calc(2px - $spacing-3);
+          margin-right: calc(2px - $spacing-3);
+          border-top: 1px solid getColor('neutral-fade');
+          border-bottom: 1px solid getColor('neutral-fade');
+          padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
+        }
+      }
+    }
+  }
+}