@testgorilla/tgo-ui 3.14.11-beta.1 → 3.14.12

package/projects/tgo-canopy-ui/theme/_variables.scss

@@ -1,167 +1,167 @@
-/* global */
-$background-color: #f6f6f6;
-$font-family: "Open Sans", sans-serif;
-// TODO: Remove this varible already declared in typography.scss
-$font-size: 14px;
-
-//colors
-//teal colors
-$tgo-teal-60b: #1C443C;
-$tgo-teal-30b: #31766A;
-$tgo-teal-default: #46A997;
-$tgo-teal-30w: #7EC3B6;
-$tgo-teal-60w: #B5DDD5;
-$tgo-teal-secondary: #CBD6CB;
-$tgo-teal-90w: #ECF6F5;
-
-//petrol colors
-$tgo-petrol-60b: #102930;
-$tgo-petrol-30b: #1B4754;
-$tgo-petrol-default: #276678;
-$tgo-petrol-30w: #6894A0;
-$tgo-petrol-60w: #A9C2C9;
-$tgo-petrol-secondary: #C8D7DE;
-$tgo-petrol-90w: #E9F0F1;
-
-//error colors
-$tgo-error-60b: #513131;
-$tgo-error-30b: #8E5655;
-$tgo-error-60w: #E3C3C6;
-$tgo-error-secondary: #F0DAD9;
-$tgo-error-default: #cb7b7a;
-
-//warning colors
-$tgo-warning-secondary: #F0D6BB;
-$tgo-warning-default: #cca45f;
-
-//black colors - grayscale
-$tgo-black: #000000;
-$tgo-dark: #888888;
-$tgo-medium: #E0E0E0;
-$tgo-grey: #EDEDED;
-$tgo-light: #F6F6F6;
-$tgo-white: #ffffff;
-
-//box-shadow
-$box-shadow: #00000014;
-$box-shadow-rebrand: #24242414;
-
-$navigation-subtitle: #528593;
-
-// new colors
-$brand-60: #A90686;
-$brand-50: #D410AA;
-$brand-40: #FF54DA;
-$brand-30: #FFB3EE;
-$brand-20: #FFE6FA;
-$brand-10: #FFF2FC;
-
-$grayscale-50: #666666;
-$grayscale-40: #919191;
-$grayscale-30: #D3D3D3;
-$grayscale-20: #E9E9E9;
-$grayscale-10: #F4F4F4;
-
-$black: #242424;
-
-$accent-20: #FFF5ED;
-$accent-10: #FFFAF6;
-
-$informative-50: #1A47AA;
-$informative-40: #0165FC;
-$informative-30: #277CFD;
-$informative-20: #99C1FE;
-$informative-10: #D9E8FF;
-
-$success-50: #3C9A13;
-$success-40: #56C71A;
-$success-30: #80D63E;
-$success-20: #AAE47A;
-$success-10: #D4F2C3;
-
-$error-50: #E02800;
-$error-40: #FF3003;
-$error-30: #FF6E4F;
-$error-20: #FFAC9A;
-$error-10: #FFEAE6;
-
-$warning-50: #D07D00;
-$warning-40: #FF9A03;
-$warning-30: #FFC268;
-$warning-20: #FFE1B3;
-$warning-10: #FFF5E6;
-
-$ai-gradient-blue: #0165FC;
-$ai-gradient-pink: #D410AA;
-
-//resposive breakpoints
-$tgo-breakpoints: (
-  'small': 320px,
-  'medium': 600px,
-  'medium-large': 960px,
-  'large': 1024px,
-  'x-large': 1280px,
-) !default;
-
-$colors: (
-  'teal-60b': $tgo-teal-60b,
-  'teal-30b': $tgo-teal-30b,
-  'teal-default': $tgo-teal-default,
-  'teal-30w': $tgo-teal-30w,
-  'teal-60w': $tgo-teal-60w,
-  'teal-secondary': $tgo-teal-secondary,
-  'teal-90w': $tgo-teal-90w,
-
-  'petrol-60b': $tgo-petrol-60b,
-  'petrol-30b': $tgo-petrol-30b,
-  'petrol-default': $tgo-petrol-default,
-  'petrol-30w': $tgo-petrol-30w,
-  'petrol-60w': $tgo-petrol-60w,
-  'petrol-secondary': $tgo-petrol-secondary,
-  'petrol-90w': $tgo-petrol-90w,
-
-  'error-60b': $tgo-error-60b,
-  'error-30b': $tgo-error-30b,
-  'error-60w': $tgo-error-60w,
-  'error-secondary': $tgo-error-secondary,
-  'error-default': $tgo-error-default,
-
-  'warning-secondary': $tgo-warning-secondary,
-  'warning-default': $tgo-warning-default,
-
-  'black': $tgo-black,
-  'dark': $tgo-dark,
-  'medium': $tgo-medium,
-  'grey': $tgo-grey,
-  'light': $tgo-light,
-  'white': $tgo-white,
-
-  'box-shadow': $box-shadow,
-  'navigation-subtitle': $navigation-subtitle,
-);
-
-@each $colorName, $colorValue in $colors {
-  .bg-#{$colorName} {
-    background: $colorValue;
-  }
-}
-
-@each $colorName, $colorValue in $colors {
-  .bgc-#{$colorName} {
-    background-color: $colorValue;
-  }
-}
-
-$box-shadow-hover-state: 0px 4px 16px 0px #24242414;
-$box-shadow-notification: 0px 4px 16px 0px #2424240A;
-$box-shadow-page-card: 0px 4px 100px 0px #2424240A;
-$box-shadow-modal: 0px 4px 100px 0px #24242414;
-
-@mixin ai-gradient-background() {
-  background: linear-gradient(to right, $ai-gradient-pink 25%, $ai-gradient-blue 100%);
-}
-
-@mixin ai-gradient-border() {
-  background: linear-gradient(to left, white, white),
-  linear-gradient(to right, $ai-gradient-pink 25%, $ai-gradient-blue 100%);
-}
+/* global */
+$background-color: #f6f6f6;
+$font-family: "Open Sans", sans-serif;
+// TODO: Remove this varible already declared in typography.scss
+$font-size: 14px;
+
+//colors
+//teal colors
+$tgo-teal-60b: #1C443C;
+$tgo-teal-30b: #31766A;
+$tgo-teal-default: #46A997;
+$tgo-teal-30w: #7EC3B6;
+$tgo-teal-60w: #B5DDD5;
+$tgo-teal-secondary: #CBD6CB;
+$tgo-teal-90w: #ECF6F5;
+
+//petrol colors
+$tgo-petrol-60b: #102930;
+$tgo-petrol-30b: #1B4754;
+$tgo-petrol-default: #276678;
+$tgo-petrol-30w: #6894A0;
+$tgo-petrol-60w: #A9C2C9;
+$tgo-petrol-secondary: #C8D7DE;
+$tgo-petrol-90w: #E9F0F1;
+
+//error colors
+$tgo-error-60b: #513131;
+$tgo-error-30b: #8E5655;
+$tgo-error-60w: #E3C3C6;
+$tgo-error-secondary: #F0DAD9;
+$tgo-error-default: #cb7b7a;
+
+//warning colors
+$tgo-warning-secondary: #F0D6BB;
+$tgo-warning-default: #cca45f;
+
+//black colors - grayscale
+$tgo-black: #000000;
+$tgo-dark: #888888;
+$tgo-medium: #E0E0E0;
+$tgo-grey: #EDEDED;
+$tgo-light: #F6F6F6;
+$tgo-white: #ffffff;
+
+//box-shadow
+$box-shadow: #00000014;
+$box-shadow-rebrand: #24242414;
+
+$navigation-subtitle: #528593;
+
+// new colors
+$brand-60: #A90686;
+$brand-50: #D410AA;
+$brand-40: #FF54DA;
+$brand-30: #FFB3EE;
+$brand-20: #FFE6FA;
+$brand-10: #FFF2FC;
+
+$grayscale-50: #666666;
+$grayscale-40: #919191;
+$grayscale-30: #D3D3D3;
+$grayscale-20: #E9E9E9;
+$grayscale-10: #F4F4F4;
+
+$black: #242424;
+
+$accent-20: #FFF5ED;
+$accent-10: #FFFAF6;
+
+$informative-50: #1A47AA;
+$informative-40: #0165FC;
+$informative-30: #277CFD;
+$informative-20: #99C1FE;
+$informative-10: #D9E8FF;
+
+$success-50: #3C9A13;
+$success-40: #56C71A;
+$success-30: #80D63E;
+$success-20: #AAE47A;
+$success-10: #D4F2C3;
+
+$error-50: #E02800;
+$error-40: #FF3003;
+$error-30: #FF6E4F;
+$error-20: #FFAC9A;
+$error-10: #FFEAE6;
+
+$warning-50: #D07D00;
+$warning-40: #FF9A03;
+$warning-30: #FFC268;
+$warning-20: #FFE1B3;
+$warning-10: #FFF5E6;
+
+$ai-gradient-blue: #0165FC;
+$ai-gradient-pink: #D410AA;
+
+//resposive breakpoints
+$tgo-breakpoints: (
+  'small': 320px,
+  'medium': 600px,
+  'medium-large': 960px,
+  'large': 1024px,
+  'x-large': 1280px,
+) !default;
+
+$colors: (
+  'teal-60b': $tgo-teal-60b,
+  'teal-30b': $tgo-teal-30b,
+  'teal-default': $tgo-teal-default,
+  'teal-30w': $tgo-teal-30w,
+  'teal-60w': $tgo-teal-60w,
+  'teal-secondary': $tgo-teal-secondary,
+  'teal-90w': $tgo-teal-90w,
+
+  'petrol-60b': $tgo-petrol-60b,
+  'petrol-30b': $tgo-petrol-30b,
+  'petrol-default': $tgo-petrol-default,
+  'petrol-30w': $tgo-petrol-30w,
+  'petrol-60w': $tgo-petrol-60w,
+  'petrol-secondary': $tgo-petrol-secondary,
+  'petrol-90w': $tgo-petrol-90w,
+
+  'error-60b': $tgo-error-60b,
+  'error-30b': $tgo-error-30b,
+  'error-60w': $tgo-error-60w,
+  'error-secondary': $tgo-error-secondary,
+  'error-default': $tgo-error-default,
+
+  'warning-secondary': $tgo-warning-secondary,
+  'warning-default': $tgo-warning-default,
+
+  'black': $tgo-black,
+  'dark': $tgo-dark,
+  'medium': $tgo-medium,
+  'grey': $tgo-grey,
+  'light': $tgo-light,
+  'white': $tgo-white,
+
+  'box-shadow': $box-shadow,
+  'navigation-subtitle': $navigation-subtitle,
+);
+
+@each $colorName, $colorValue in $colors {
+  .bg-#{$colorName} {
+    background: $colorValue;
+  }
+}
+
+@each $colorName, $colorValue in $colors {
+  .bgc-#{$colorName} {
+    background-color: $colorValue;
+  }
+}
+
+$box-shadow-hover-state: 0px 4px 16px 0px #24242414;
+$box-shadow-notification: 0px 4px 16px 0px #2424240A;
+$box-shadow-page-card: 0px 4px 100px 0px #2424240A;
+$box-shadow-modal: 0px 4px 100px 0px #24242414;
+
+@mixin ai-gradient-background() {
+  background: linear-gradient(to right, $ai-gradient-pink 25%, $ai-gradient-blue 100%);
+}
+
+@mixin ai-gradient-border() {
+  background: linear-gradient(to left, white, white),
+  linear-gradient(to right, $ai-gradient-pink 25%, $ai-gradient-blue 100%);
+}

package/projects/tgo-canopy-ui/theme/line-clamp.scss

@@ -1,8 +1,8 @@
-@mixin line-clamp($count) {
-  overflow: hidden;
-  -webkit-line-clamp: $count;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  white-space: normal;
-}
+@mixin line-clamp($count) {
+  overflow: hidden;
+  -webkit-line-clamp: $count;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  white-space: normal;
+}

package/projects/tgo-canopy-ui/theme/theme.scss

@@ -1,68 +1,68 @@
-@use "palette.scss" as *;
-@use "core.scss" as *;
-@use "variables.scss" as *;
-@use "typography.scss" as *;
-@use "tooltip.scss" as *;
-@use "mat-menu.scss" as *;
-@use "mat-paginator.scss" as *;
-@use "font.scss" as *;
-@use "input.scss" as *;
-@use "button.scss" as *;
-@use "icon.scss" as *;
-@use "line-clamp.scss" as *;
-
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
-
-//TODO: MOVE TO THE CORRESPONDING COMPONENTS OR PARTIAL
-.hidden {
-  visibility: hidden;
-}
-
-*[theme="dark"], *[theme="light"] {
-  * {
-    font-family: "ModernGothic", sans-serif;
-    font-weight: 400;
-
-    .mat-mdc-elevation-specific.mat-elevation-z8  {
-      box-shadow: $box-shadow-modal!important;
-      border-radius: 10px;
-    }
-
-    .mat-mdc-menu-panel {
-      max-width: fit-content;
-    }
-  };
-}
-
-//custom scss for the angular material components
-.mat-mdc-card {
-  border-radius: 8px !important;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
-  padding: 32px 32px 16px 32px !important;
-  border-width: 0 !important;
-}
-
-/** Mat password strength */
-mat-password-strength-info {
-  .mat-mdc-card {
-    box-shadow: none !important;
-    place-content: stretch start !important;
-    padding: 15px 0 !important;
-
-    .mat-icon {
-      font-size: 20px;
-      position: relative;
-      top: 3px;
-      margin: 0 !important;
-    }
-  }
-}
-
-@keyframes focus-ring-animation-main {
-  0% {
-    outline-width: 4px;
-  }
-  100% {
-    outline-width: 2px;
-  }
-}
+@use "palette.scss" as *;
+@use "core.scss" as *;
+@use "variables.scss" as *;
+@use "typography.scss" as *;
+@use "tooltip.scss" as *;
+@use "mat-menu.scss" as *;
+@use "mat-paginator.scss" as *;
+@use "font.scss" as *;
+@use "input.scss" as *;
+@use "button.scss" as *;
+@use "icon.scss" as *;
+@use "line-clamp.scss" as *;
+
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+//TODO: MOVE TO THE CORRESPONDING COMPONENTS OR PARTIAL
+.hidden {
+  visibility: hidden;
+}
+
+*[theme="dark"], *[theme="light"] {
+  * {
+    font-family: "ModernGothic", sans-serif;
+    font-weight: 400;
+
+    .mat-mdc-elevation-specific.mat-elevation-z8  {
+      box-shadow: $box-shadow-modal!important;
+      border-radius: 10px;
+    }
+
+    .mat-mdc-menu-panel {
+      max-width: fit-content;
+    }
+  };
+}
+
+//custom scss for the angular material components
+.mat-mdc-card {
+  border-radius: 8px !important;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
+  padding: 32px 32px 16px 32px !important;
+  border-width: 0 !important;
+}
+
+/** Mat password strength */
+mat-password-strength-info {
+  .mat-mdc-card {
+    box-shadow: none !important;
+    place-content: stretch start !important;
+    padding: 15px 0 !important;
+
+    .mat-icon {
+      font-size: 20px;
+      position: relative;
+      top: 3px;
+      margin: 0 !important;
+    }
+  }
+}
+
+@keyframes focus-ring-animation-main {
+  0% {
+    outline-width: 4px;
+  }
+  100% {
+    outline-width: 2px;
+  }
+}