@ascentgl/ads-ui 2.19.5 → 20.0.1

package/src/assets/sass/ads-ui/abstracts/_variables.scss

@@ -1,125 +1,125 @@
-$box-shadow: 0 3px 6px 0 rgba(0, 73, 135, 16%);
-
-$colors: (
-  white: #ffffff,
-  muted-30: #fcfdff,
-  muted-50: #f9fbff,
-  muted: #f2f7ff,
-  light-30: #f1f3f9,
-  light-80: #dae0ee,
-  light: #ced6e8,
-  light-opacity-50: rgba(206, 214, 232, 0.5),
-  medium-30: #c6c8d0,
-  medium-50: #b2b6c6,
-  medium: #646c8d,
-  medium-opacity-50: rgba(100, 108, 141, 0.5),
-  dark-10: #666666,
-  dark-30: #5c5c5c,
-  dark-50: #525252,
-  dark-80: #474747,
-  dark-90: #333333,
-  dark: #292929,
-  black: #1e1e1e,
-
-  primary: #041f41,
-  primary-hover: #044986,
-  primary-pressed: #366d9e,
-
-  secondary: #017d93,
-  secondary-hover: #015a6a,
-  secondary-pressed: #013b46,
-
-  link: #0077b3,
-  link-hover: #005885,
-  link-pressed: #002638,
-
-  error: #bb1e1e,
-  error-hover: #ab1c1c,
-  error-pressed: #771313,
-
-  success: #238170,
-  success-hover: #19584c,
-  success-pressed: #10382e,
-
-  logo: #004987,
-);
-
-$colors-dark: (
-  white: #292929,
-  muted-30: #1e1e1e,
-  muted-50: #333333,
-  muted: #474747,
-  light-30: #525252,
-  light-80: #5c5c5c,
-  light: #666666,
-  light-opacity-50: rgba(102, 102, 102, 0.5),
-  medium-30: #fcfdff,
-  medium-50: #f9fbff,
-  medium: #f2f7ff,
-  medium-opacity-50: rgba(242, 247, 255, 0.5),
-  dark-10: #ced6e8,
-  dark-30: #dae0ee,
-  dark-50: #f1f3f9,
-  dark-80: #f2f7ff,
-  dark-90: #f9fbff,
-  dark: #ffffff,
-  black: #fcfdff,
-
-  primary: #66c5d4,
-  primary-hover: #33b1c6,
-  primary-pressed: #009fb8,
-
-  secondary: #eda1d9,
-  secondary-hover: #da3eb2,
-  secondary-pressed: #881a6c,
-
-  link: #52c5ff,
-  link-hover: #1fb4ff,
-  link-pressed: #007ab8,
-
-  error: #ff7070,
-  error-hover: #ff2929,
-  error-pressed: #cc0000,
-
-  success: #53d0b9,
-  success-hover: #2ca08b,
-  success-pressed: #248473,
-
-  logo: #ffffff,
-);
-
-$font-weights: (
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-);
-
-$font-sizes: (
-  text-xxs: 0.675rem,
-  text-xs: 0.75rem,
-  text-sm: 0.875rem,
-  text-base: 1rem,
-  text-lg: 1.125rem,
-  text-xl: 1.25rem,
-  text-2xl: 1.5rem,
-  text-3xl: 1.875rem,
-  text-4xl: 2.25rem,
-  text-5xl: 3rem,
-  text-6xl: 4rem,
-);
-
-$spacings: (
-  space-4: 4px,
-  space-8: 8px,
-  space-12: 12px,
-  space-16: 16px,
-  space-24: 24px,
-  space-32: 32px,
-  space-40: 40px,
-  space-48: 48px,
-  space-56: 56px,
-  space-64: 64px,
-  space-72: 72px,
-  space-80: 80px,
-);
+$box-shadow: 0 3px 6px 0 rgba(0, 73, 135, 16%);
+
+$colors: (
+  white: #ffffff,
+  muted-30: #fcfdff,
+  muted-50: #f9fbff,
+  muted: #f2f7ff,
+  light-30: #f1f3f9,
+  light-80: #dae0ee,
+  light: #ced6e8,
+  light-opacity-50: rgba(206, 214, 232, 0.5),
+  medium-30: #c6c8d0,
+  medium-50: #b2b6c6,
+  medium: #646c8d,
+  medium-opacity-50: rgba(100, 108, 141, 0.5),
+  dark-10: #666666,
+  dark-30: #5c5c5c,
+  dark-50: #525252,
+  dark-80: #474747,
+  dark-90: #333333,
+  dark: #292929,
+  black: #1e1e1e,
+
+  primary: #041f41,
+  primary-hover: #044986,
+  primary-pressed: #366d9e,
+
+  secondary: #017d93,
+  secondary-hover: #015a6a,
+  secondary-pressed: #013b46,
+  secondary-10: rgba(1, 125, 147, 0.1),
+  link: #0077b3,
+  link-hover: #005885,
+  link-pressed: #002638,
+
+  error: #bb1e1e,
+  error-hover: #ab1c1c,
+  error-pressed: #771313,
+
+  success: #238170,
+  success-hover: #19584c,
+  success-pressed: #10382e,
+
+  logo: #004987,
+);
+
+$colors-dark: (
+  white: #292929,
+  muted-30: #1e1e1e,
+  muted-50: #333333,
+  muted: #474747,
+  light-30: #525252,
+  light-80: #5c5c5c,
+  light: #666666,
+  light-opacity-50: rgba(102, 102, 102, 0.5),
+  medium-30: #fcfdff,
+  medium-50: #f9fbff,
+  medium: #f2f7ff,
+  medium-opacity-50: rgba(242, 247, 255, 0.5),
+  dark-10: #ced6e8,
+  dark-30: #dae0ee,
+  dark-50: #f1f3f9,
+  dark-80: #f2f7ff,
+  dark-90: #f9fbff,
+  dark: #ffffff,
+  black: #fcfdff,
+
+  primary: #66c5d4,
+  primary-hover: #33b1c6,
+  primary-pressed: #009fb8,
+
+  secondary: #cae5e8,
+  secondary-hover: #a2cbcf,
+  secondary-pressed: #99b9bc,
+  secondary-10: rgba(202, 229, 232, 0.1),
+  link: #52c5ff,
+  link-hover: #1fb4ff,
+  link-pressed: #007ab8,
+
+  error: #ff7070,
+  error-hover: #ff2929,
+  error-pressed: #cc0000,
+
+  success: #53d0b9,
+  success-hover: #2ca08b,
+  success-pressed: #248473,
+
+  logo: #ffffff,
+);
+
+$font-weights: (
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+);
+
+$font-sizes: (
+  text-xxs: 0.675rem,
+  text-xs: 0.75rem,
+  text-sm: 0.875rem,
+  text-base: 1rem,
+  text-lg: 1.125rem,
+  text-xl: 1.25rem,
+  text-2xl: 1.5rem,
+  text-3xl: 1.875rem,
+  text-4xl: 2.25rem,
+  text-5xl: 3rem,
+  text-6xl: 4rem,
+);
+
+$spacings: (
+  space-4: 4px,
+  space-8: 8px,
+  space-12: 12px,
+  space-16: 16px,
+  space-24: 24px,
+  space-32: 32px,
+  space-40: 40px,
+  space-48: 48px,
+  space-56: 56px,
+  space-64: 64px,
+  space-72: 72px,
+  space-80: 80px,
+);

package/src/assets/sass/ads-ui/base/_reset.scss

@@ -1,41 +1,19 @@
-@-moz-document url-prefix() {
-  html {
-    scrollbar-width: none; /* Disable scrollbar Firefox */
-  }
-}
-
-body {
-  overflow: scroll;
-  padding: 0;
-  margin: 0;
-  -ms-overflow-style: none; /* Disable scrollbar IE 10+ */
-  overflow-x: hidden;
-  scrollbar-width: none; /* Disable scrollbar Firefox */
-}
-
-body::-webkit-scrollbar {
-  width: 0; /* Remove scrollbar space */
-  background: transparent; /* make scrollbar invisible */
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: color(light-30);
-  border-radius: 100px;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 100px;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 8px;
-  background: color(dark-30);
-  border-radius: 100px;
-  opacity: 50%;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: color(dark-50);
-}
+@use '../abstracts/functions' as *;
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background: color(muted);
+  border: 1px solid color(light);
+  border-radius: 100px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color(medium-30);
+  border-color: color(medium-30);
+}

package/src/assets/sass/ads-ui/base/_typography.scss

@@ -1,188 +1,179 @@
-@use '@angular/material' as mat;
-
-@import '../abstracts/functions';
-@import '../abstracts/variables';
-
-@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@700&family=Roboto:wght@400;500;700&display=swap');
-
-.text-xxs,
-text-xxs-semibold {
-  font-size: 0.625rem;
-  line-height: 13px;
-
-  &.text-xxs-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-xs,
-.text-xs-semibold,
-.text-link-xs,
-.text-error-xs {
-  font-size: 0.75rem;
-  line-height: 16px;
-
-  &.text-xs-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-sm,
-.text-sm-semibold,
-.text-link-sm {
-  font-size: 0.875rem;
-  line-height: 18px;
-
-  &.text-sm-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-base,
-.text-base-semibold,
-.text-link-base,
-.text-error-base {
-  font-size: 1rem;
-  line-height: 21px;
-
-  &.text-base-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-lg,
-text-lg-semibold {
-  font-size: 1.125rem;
-  line-height: 23px;
-
-  &.text-lg-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-xl,
-.text-xl-semibold {
-  font-size: 1.25rem;
-  line-height: 26px;
-
-  &.text-xl-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-2xl,
-.text-2xl-semibold {
-  font-size: 1.5rem;
-  line-height: 31px;
-
-  &.text-2xl-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-3x,
-.text-3xl-semibold {
-  font-size: 1.875rem;
-  line-height: 39px;
-
-  &.text-3xl-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-4xl,
-.text-4xl-semibold {
-  font-size: 2.25rem;
-  line-height: 47px;
-
-  &.text-4xl-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-5xl,
-.text-5xl-semibold {
-  font-size: 3rem;
-  line-height: 62px;
-
-  &.text-5xl-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-.text-6xl,
-.text-6xl-semibold {
-  font-size: 4rem;
-  line-height: 83px;
-
-  &.text-6xl-semibold {
-    font-weight: font-weight(semibold);
-  }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: color(dark);
-  font-weight: font-weight(semibold);
-  font-style: normal;
-  margin: 0;
-}
-
-h1 {
-  line-height: 42px;
-  font-size: 32px;
-}
-
-h2 {
-  line-height: 31px;
-  font-size: 24px;
-}
-
-h3 {
-  line-height: 23px;
-  font-size: 18px;
-}
-
-h4 {
-  line-height: 24px;
-  font-size: 16px;
-}
-
-h5 {
-  line-height: 21px;
-  font-size: 14px;
-}
-
-h6 {
-  line-height: 16px;
-  font-size: 12px;
-}
-
-p,
-.text-base,
-.text-base-semibold {
-  font-style: normal;
-  font-weight: font-weight(regular);
-  margin: 0;
-  color: color(medium);
-}
-
-.text-error-base,
-.text-error-xs {
-  color: color(error);
-}
-
-.text-link-base,
-.text-link-sm,
-.text-link-xs {
-  color: color(link);
-  text-decoration-line: underline;
-}
-
-$ads-typography: mat.m2-define-typography-config(
-  $font-family: 'Roboto, Helvetica Neue, sans-serif',
-);
+@use '../abstracts/functions' as *;
+
+.text-xxs,
+text-xxs-semibold {
+  font-size: 0.625rem;
+  line-height: 13px;
+
+  &.text-xxs-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-xs,
+.text-xs-semibold,
+.text-link-xs,
+.text-error-xs {
+  font-size: 0.75rem;
+  line-height: 16px;
+
+  &.text-xs-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-sm,
+.text-sm-semibold,
+.text-link-sm {
+  font-size: 0.875rem;
+  line-height: 18px;
+
+  &.text-sm-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-base,
+.text-base-semibold,
+.text-link-base,
+.text-error-base {
+  font-size: 1rem;
+  line-height: 21px;
+
+  &.text-base-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-lg,
+text-lg-semibold {
+  font-size: 1.125rem;
+  line-height: 23px;
+
+  &.text-lg-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-xl,
+.text-xl-semibold {
+  font-size: 1.25rem;
+  line-height: 26px;
+
+  &.text-xl-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-2xl,
+.text-2xl-semibold {
+  font-size: 1.5rem;
+  line-height: 31px;
+
+  &.text-2xl-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-3x,
+.text-3xl-semibold {
+  font-size: 1.875rem;
+  line-height: 39px;
+
+  &.text-3xl-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-4xl,
+.text-4xl-semibold {
+  font-size: 2.25rem;
+  line-height: 47px;
+
+  &.text-4xl-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-5xl,
+.text-5xl-semibold {
+  font-size: 3rem;
+  line-height: 62px;
+
+  &.text-5xl-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+.text-6xl,
+.text-6xl-semibold {
+  font-size: 4rem;
+  line-height: 83px;
+
+  &.text-6xl-semibold {
+    font-weight: font-weight(semibold);
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: color(dark);
+  font-weight: font-weight(semibold);
+  font-style: normal;
+  margin: 0;
+}
+
+h1 {
+  line-height: 42px;
+  font-size: 32px;
+}
+
+h2 {
+  line-height: 31px;
+  font-size: 24px;
+}
+
+h3 {
+  line-height: 23px;
+  font-size: 18px;
+}
+
+h4 {
+  line-height: 24px;
+  font-size: 16px;
+}
+
+h5 {
+  line-height: 21px;
+  font-size: 14px;
+}
+
+h6 {
+  line-height: 16px;
+  font-size: 12px;
+}
+
+p,
+.text-base,
+.text-base-semibold {
+  font-style: normal;
+  font-weight: font-weight(regular);
+  margin: 0;
+  color: color(medium);
+}
+
+.text-error-base,
+.text-error-xs {
+  color: color(error);
+}
+
+.text-link-base,
+.text-link-sm,
+.text-link-xs {
+  color: color(link);
+  text-decoration-line: underline;
+}