@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/_all.scss

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

package/framework/src/base/_all.scss

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

package/framework/src/base/_color.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+
+@function getColor( $name ) {
+  @return var(--color-#{nth(map-get($colors,$name),1)})
+}
+
+@function getColorValue( $name ) {
+  @return #{nth(map-get($colors,$name),2)}
+}
+
+@function getColorBrandName( $name ) {
+  @return #{nth(map-get($colors,$name),1)}
+}
+
+@function getVariantColor($name, $n:1)  {
+  @return #{nth(map-get($colors,$name),$n+3)}
+};
+
+:root {
+  @each $name, $color in $colors {
+    --color-#{nth($color,1)}: #{nth($color,2)};
+  }
+
+  // Colors
+  @each $name, $color in $colors {
+    $colorname: nth($color, 1);
+    $bgcolorval: nth($color, 2);
+    $colorval: nth($color, 3);
+    .has-background-#{$colorname} {
+      background-color: var(--color-#{$colorname}) !important;
+      color: var(--color-#{$colorval});
+    }
+  }
+}
+
+.is-hovered {
+  background-color: var(--color-hovered);
+}
+
+@function invertColor ($colorName, $context:'') {
+  $invertcolormap: ('tertiary': 'grey-dark', 'grey-dark': 'grey-light', 'grey-light': 'grey-dark');
+  $defaultInvert: white;
+
+  @if ($context == 'dark') {
+    $invertcolormap: ('tertiary':'var(--color-success)');
+    $defaultInvert: black;
+  }
+
+  @if ($context == 'accordion') {
+    $defaultInvert: 'grey-lighter'
+  }
+
+  $result: map.get($invertcolormap, $colorName);
+  @if ($result) {
+    @return $result
+  }
+  @return $defaultInvert
+}

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-sans-serif;
+}
+
+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,68 @@
+$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('grey-lighter');
+    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');
+        }
+    }
+}
+
+.body-wrap {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    min-height: 100vh;
+}
+
+.header {
+    z-index: zindex('large');
+}