@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/grid/_rows.scss

@@ -0,0 +1,54 @@
+$gap: 4px,
+8px,
+12px,
+16px,
+24px,
+32px,
+40px,
+48px,
+54px,
+62px;
+
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  justify-self: stretch;
+  height: 100%;
+  gap: 24px;
+
+  @include mobile {
+    gap: 16px;
+  }
+
+  @for $i from 1 through length($gap) {
+    $item: nth($gap, $i);
+    &.has-gap-#{$i} {
+      gap: $item;
+    }
+  }
+
+  &.is-aligned-end {
+    justify-content: flex-end;
+  }
+
+  &.is-gapless {
+    gap: 0;
+  }
+
+  .is-divider {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .row {
+    display: block;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    &.is-narrow {
+      flex-grow: 0;
+    }
+  }
+}

package/framework/src/grid/_tiles.scss

@@ -0,0 +1,78 @@
+@use "sass:math";
+
+.tile {
+    align-items: stretch;
+    display: block;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: min-content;
+
+    &.is-ancestor {
+        margin-left: -7.5px;
+        margin-right: -7.5px;
+        margin-top: -7.5px;
+
+        &:last-child {
+            margin-bottom: -7.5px;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 7.5px;
+        }
+    }
+
+    &.is-child {
+        margin: 0 !important;
+    }
+
+    &.is-parent {
+        padding: 7.5px;
+
+        &.is-multiline {
+            > .tile.is-child {
+                > *:last-child {
+                    margin-bottom: 20px;
+                }
+            }
+        }
+    }
+
+    &.is-vertical {
+        flex-direction: column;
+
+        & > .tile.is-child:not(:last-child) {
+            margin-bottom: 15px !important;
+        }
+    }
+
+    &:not(.is-child) {
+        display: flex;
+    }
+
+    @include mobile {
+        @for $i from 1 through 12 {
+            &.is-#{$i}-mobile {
+                flex: none;
+                width: math.div($i, 12) * 100%;
+            }
+        }
+
+        &.is-vertical-mobile {
+            flex-direction: column;
+        }
+    }
+
+    @include tablet {
+        &:not(.is-child) {
+            display: flex;
+        }
+
+        @for $i from 1 through 12 {
+            &.is-#{$i} {
+                flex: none;
+                width: math.div($i, 12) * 100%;
+            }
+        }
+    }
+}

package/framework/src/layout/_all.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import "main";
+@import "section";
+@import "hero";

package/framework/src/layout/_hero.scss

@@ -0,0 +1,146 @@
+$hero-padding-y: 20px;
+$hero-padding-x: $hero-padding-y;
+$hero-padding-small-y: $hero-padding-y;
+$hero-padding-small-x: $hero-padding-y;
+$hero-padding-medium-y: 40px;
+$hero-padding-medium-x: $hero-padding-y;
+$hero-padding-large-y: 60px;
+$hero-padding-large-x: $hero-padding-y;
+
+$hero-padding-desktop-y: 30px;
+$hero-padding-desktop-x: $hero-padding-desktop-y;
+$hero-padding-desktop-small-y: $hero-padding-desktop-y;
+$hero-padding-desktop-small-x: $hero-padding-desktop-y;
+$hero-padding-desktop-medium-y: 60px;
+$hero-padding-desktop-medium-x: $hero-padding-desktop-y;
+$hero-padding-desktop-large-y: 90px;
+$hero-padding-desktop-large-x: $hero-padding-desktop-y;
+
+$overlap: 30px;
+$overlap-desktop: 30px;
+
+.hero {
+  align-items: stretch;
+  background-color: getColor('background');
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+
+  .hero-body {
+    flex-grow: 1;
+    flex-shrink: 0;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 20px;
+
+    @include desktop {
+      padding: 30px 20px;
+    }
+
+    > .container {
+      flex: 1;
+      flex-basis: 100%;
+    }
+
+    .title {
+      font-size: 24px;
+
+      @include desktop {
+        font-size: 36px;
+      }
+    }
+  }
+
+  &.is-overlapped {
+    .hero-body {
+      padding-bottom: 50px;
+    }
+
+    + .section {
+      @include mobile {
+        margin-left: -$hero-padding-y;
+        margin-right: -$hero-padding-y;
+
+        .box {
+          box-shadow: none;
+//@todo need confirmation
+          border-radius: 24px 24px 0 0;
+          overflow: hidden;
+        }
+      }
+
+      > .container {
+        margin-top: -$hero-padding-y - $overlap;
+
+        @include desktop {
+          margin-top: -$hero-padding-desktop-y - $overlap-desktop;
+        }
+      }
+
+      &.is-small {
+        > .container {
+          margin-top: -$hero-padding-small-y - $overlap;
+
+          @include desktop {
+            margin-top: -$hero-padding-desktop-small-y  - $overlap-desktop;
+          }
+        }
+      }
+
+      &.is-medium {
+        > .container {
+          margin-top: -$hero-padding-medium-y - $overlap;
+
+          @include desktop {
+            margin-top: -$hero-padding-desktop-medium-y  - $overlap-desktop;
+          }
+        }
+      }
+
+      &.is-large {
+        > .container {
+          margin-top: -$hero-padding-large-y - $overlap;
+
+          @include desktop {
+            margin-top: -$hero-padding-desktop-large-y - $overlap-desktop;
+          }
+        }
+      }
+    }
+  }
+
+  &.has-background {
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  &.has-background {
+    .hero-body {
+      text-align: center;
+      padding: 100px 20px;
+
+      @include desktop {
+        text-align: left;
+        padding-top: 80px;
+        padding-bottom: 80px;
+      }
+    }
+
+    &.is-overlapped {
+      .hero-body {
+        padding: 30px 20px 60px;
+
+        @include desktop {
+          padding: 60px 20px;
+        }
+      }
+    }
+  }
+
+  &.has-pattern-dark {
+    @include pattern-dark(105%, 50%, 35%);
+  }
+}

package/framework/src/layout/_main.scss

@@ -0,0 +1,36 @@
+body > header,
+body > footer,
+.main-content {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+    flex-shrink: 0;
+    position: relative;
+
+    &.is-fullwidth {
+        @include fullhd {
+            max-width: 100%;
+        }
+    }
+}
+
+.main-content {
+    flex-grow: 1;
+    max-width: 1500px;
+
+    &::before {
+        content: ' ';
+        background-color: transparent;
+        transition: background-color 250ms ease-in-out;
+    }
+
+    &.has-overlay {
+        &::before {
+            @include overlay;
+
+            position: fixed;
+            background-color: rgba(#000, 0.86);
+            z-index: zindex('small');
+        }
+    }
+}

package/framework/src/layout/_section.scss

@@ -0,0 +1,46 @@
+.section {
+  padding: $spacing-6 $spacing-4;
+
+  @include desktop {
+    padding: $spacing-8 $spacing-5;
+  }
+
+  &.has-background {
+    background-size: cover;
+    background-position: center;
+  }
+
+  &.has-overlap > .container {
+    margin-top: -$spacing-6 - $spacing-4;
+
+    @include desktop {
+      margin-top: -$spacing-8 - $spacing-4;
+    }
+  }
+
+  &.is-info {
+    background-color: getColor('info');
+    color: getColor('background');
+  }
+
+  &.has-overlay {
+    position: relative;
+    z-index: zindex('void');
+    color: getColor('background');
+
+    &::before {
+      @include overlay;
+      content: '';
+      z-index: zindex('subzero');
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  &.has-pattern-light {
+    @include pattern-light(70%, 180px, -30px);
+  }
+
+  &.has-pattern-dark {
+    @include pattern-dark(120%, 260px, -30%);
+  }
+}

package/framework/src/theming/_all.scss

@@ -0,0 +1,3 @@
+@import "common_partials";
+@import "links_partial";
+@import "buttons_partial";

package/framework/src/theming/buttons_partial.scss

@@ -0,0 +1,32 @@
+$noDisabled: ":not(:disabled):not([aria-disabled=true]):not(.is-loading)";
+
+/*
+Colors for buttons
+  @string slug name used in classname (You can use your brand name)
+  @color-background The name of the color in the color map for the background
+  @color-text The name of the color in the color map for the text
+  */
+$button-colors: (
+  'accent':['conversion', 'accent', 'background'],
+  'primary': ['primary', 'main', 'background'],
+  'secondary': ['secondary', 'main-fade', 'font'],
+  'ghost': ['ghost', 'transparent', 'font']
+) !default;
+
+%buttons-states {
+  #{$hoverSelector} {
+    filter: brightness(0.8);
+    &.is-primary {
+      filter: brightness(1.2);
+    }
+  }
+  &:active:not(:disabled) {
+    filter: brightness(0.7);
+  }
+
+  &:focus-visible,
+  &:focus:focus-visible {
+    outline: 2px solid getColor('font') !important;
+    outline-offset: 2px;
+  }
+}

package/framework/src/theming/common_partials.scss

@@ -0,0 +1,10 @@
+@import "../base/_color.scss";
+
+:root {
+  --radius: 8px;
+  --radius-medium: 8px;
+  --radius-small: 4px;
+  --radius-large: 16px;
+  --border: 1px solid #{getColor('stroke')};
+  --border-active: 2px solid #{getColor('main')};
+}

package/framework/src/theming/links_partial.scss

@@ -0,0 +1,20 @@
+$link-colors: 'info' !default;
+
+%link-over {
+  &:hover {
+    filter: brightness(0.8);
+  }
+}
+
+%link-states {
+  @extend %link-over;
+  &:active {
+    filter: brightness(0.9);
+  }
+  &:focus-visible,
+  &:focus:focus-visible {
+    outline: 2px solid currentColor;
+    border-radius: $radius-small;
+    padding: 0 4px;
+  }
+}

package/framework/src/trilogy-core.scss

@@ -0,0 +1,16 @@
+@charset "utf-8";
+
+@import "utilities/functions";
+@import "utilities/initial-variables";
+@import "utilities/derived-variables";
+@import "utilities/mixins";
+@import "base/reset";
+@import "base/generic";
+@import "base/fonts";
+@import "grid/columns";
+@import "grid/rows";
+@import "layout/main";
+@import "layout/section";
+@import "elements/box";
+@import "elements/paragraph";
+@import "elements/title";

package/framework/src/trilogy-mangled.scss

@@ -0,0 +1,14 @@
+@charset "utf-8";
+
+@import "utilities/all";
+
+/* All Base Without elements */
+@import "base/fonts";
+@import "base/helpers";
+@import "base/loading";
+@import "base/elements";
+
+@import "elements";
+@import "components";
+@import "grid/all";
+@import "layout/all";

package/framework/src/trilogy-namespaced.scss

@@ -0,0 +1,14 @@
+@import './styles/framework/src/utilities/tools';
+
+@import './styles/themes/common/src/utilities/pre';
+@import './styles/framework/src/utilities/pre';
+
+@import './styles/framework/src/utilities/post';
+@import './styles/themes/common/src/utilities/post';
+
+@import './styles/framework/src/all';
+
+// Fonts
+@import './styles/dist/fonts/css/all.scss';
+
+@import './styles/themes/common/src/_all';

package/framework/src/trilogy.scss

@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@import "utilities/all";
+@import "base/all";
+@import "elements";
+@import "components";
+@import "grid/all";
+@import "layout/all";

package/framework/src/utilities/_a11y.scss

@@ -0,0 +1,13 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+}

package/framework/src/utilities/_all.scss

@@ -0,0 +1,13 @@
+@charset "utf-8";
+
+@import "initial-variables";
+@import "functions";
+@import "derived-variables";
+@import '../theming/links_partial';
+@import '../theming/buttons_partial';
+@import "mixins";
+@import "controls";
+@import "background";
+@import "animations";
+@import "spacing";
+@import "a11y";

package/framework/src/utilities/_animations.scss

@@ -0,0 +1,71 @@
+[class*="animate"] {
+    animation: $animation-duration $animation-timing-function;
+}
+
+@keyframes spinAround {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes from-right {
+    0% {
+        transform: scaleX(0);
+    }
+
+    0%,
+    100% {
+        transform-origin: 100% 100%;
+    }
+}
+
+@keyframes from-top {
+    0% {
+        transform: scaleY(0);
+    }
+
+    0%,
+    100% {
+        transform-origin: 0% 0%;
+    }
+}
+
+.animate-from-right {
+    animation-name: from-right;
+}
+
+.animate-from-top {
+    animation-name: from-top;
+}
+
+// animation for skeletons
+@keyframes placeHolderShimmer {
+    0% {
+        background-position: -46.8px 0;
+    }
+
+    100% {
+        background-position: 46.8px 0;
+    }
+}
+
+// @TODO: Replace all raw values
+@mixin animated-background {
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background: #f6f7f8;
+    background: linear-gradient(to right, #e1e1e1 8%, #ddd 18%, #e1e1e1 33%) !important;
+    background-size: 800px 104px;
+    position: relative;
+}
+
+@mixin disable-animation {
+    animation: none;
+}

package/framework/src/utilities/_background.scss

@@ -0,0 +1,21 @@
+.is-inverted {
+  color: getColor('background');
+}
+
+.is-inverted {
+  .box, .section, .view, .hero {
+    &:not(.is-inverted) {
+      color: getColor('font');
+    }
+  }
+}
+
+.has-background {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+
+  .box-content {
+    background-color: transparent;
+  }
+}

package/framework/src/utilities/_controls.scss

@@ -0,0 +1,56 @@
+$control-border-width: 1px !default;
+
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
+$control-padding-horizontal: 16px;
+
+@mixin control {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  align-items: center;
+  border: $control-border-width solid transparent;
+  border-radius: var(--radius-small);
+  display: inline-flex;
+  font-size: $size-normal;
+  height: 46px;
+  justify-content: flex-start;
+  line-height: 1.4;
+  padding-bottom: $control-padding-vertical;
+  padding-left: $control-padding-horizontal;
+  padding-right: $control-padding-horizontal;
+  padding-top: $control-padding-vertical;
+  position: relative;
+  vertical-align: top;
+
+  // bug fix pour iOS qui zoom sur le champ si la police ne fait pas 16px
+  @supports (-webkit-overflow-scrolling: touch) {
+    font-size: $text-16;
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+
+    // répétition nécessaire : bug fix pour iOS qui zoom sur le champ si la police ne fait pas 16px
+    @supports (-webkit-overflow-scrolling: touch) {
+      font-size: $text-16;
+    }
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
+}
+
+@mixin control-small {
+  border-radius: var(--radius-small);
+  font-size: $size-small;
+}
+
+@mixin control-medium {
+  font-size: $size-medium;
+}
+
+@mixin control-large {
+  font-size: $size-large;
+}

package/framework/src/utilities/_derived-variables.scss

@@ -0,0 +1 @@
+@import './initial-variables';