@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/_all.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/base/_all.scss

@@ -0,0 +1,9 @@
+@charset "utf-8";
+
+@import "color";
+@import "reset";
+@import "generic";
+@import "fonts";
+@import "helpers";
+@import "loading";
+@import "elements";

package/framework/src/base/_color.scss

@@ -0,0 +1,7 @@
+@use "sass:map";
+
+:root {
+  @each $name, $color in $colors {
+    --color-#{nth($color,2)}: #{nth($color,1)};
+  }
+}

package/framework/src/base/_elements.scss

@@ -0,0 +1,34 @@
+html {
+    @extend .html-wrap;
+}
+
+body {
+    @extend .main-wrap;
+    @extend .body-wrap;
+    @extend .reset-wrap;
+    font-family: $family-primary;
+}
+
+header {
+    @extend .header;
+}
+
+/**
+To be used when standalone namespaced builds are used
+*/
+.trilogy-root {
+    text-size-adjust: 100%;
+    font-family: $body-family;
+    box-sizing: border-box;
+    color: getColor('font');
+    font-size: 10px;
+    font-weight: $body-weight;
+    line-height: $body-line-height;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: $body-rendering;
+
+    > * {
+        font-size: $text-16;
+    }
+}

package/framework/src/base/_fonts.scss

@@ -0,0 +1,2 @@
+$weight-bold:600;
+

package/framework/src/base/_generic.scss

@@ -0,0 +1,76 @@
+$body-size: 10px;
+$body-rendering: optimizeLegibility !default;
+$body-family: $family-primary !default;
+$body-weight: $weight-normal !default;
+$body-line-height: 1.5 !default;
+
+.html-wrap {
+    margin: 0;
+    padding: 0;
+    background-color: getColor('background');
+    font-size: $body-size;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    min-width: 300px;
+    text-rendering: $body-rendering;
+    text-size-adjust: 100%;
+    overflow-x: inherit;
+    overflow-y: inherit;
+    min-height: 100vh;
+}
+
+.main-wrap {
+    margin: 0;
+    padding: 0;
+    color: getColor('font');
+    font-weight: $body-weight;
+    line-height: $body-line-height;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    font-family: $body-family;
+    box-sizing: border-box;
+
+    * {
+        &,
+        &::before,
+        &::after {
+            box-sizing: inherit;
+        }
+    }
+
+    &::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');
+        }
+    }
+  [disabled], [aria-disabled="true"] {
+    @include disabledRules;
+  }
+}
+
+.body-wrap {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    min-height: 100vh;
+}
+
+.header {
+    z-index: zindex('large');
+}
+
+*::before,
+*::after {
+  box-sizing: inherit;
+}