@ascentgl/ads-ui 0.0.1

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

@@ -0,0 +1,188 @@
+@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',
+);

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

@@ -0,0 +1,105 @@
+@import '../abstracts/mixins';
+@import '../abstracts/variables';
+
+.text-xxs {
+  font-size: 0.625rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+}
+
+.text-6xl {
+  font-size: 4rem;
+}
+
+.bg-primary {
+  @include background-color(primary);
+}
+
+.bg-success {
+  @include background-color(success);
+}
+
+.bg-warn {
+  @include background-color(error);
+}
+
+.bg-white {
+  @include background-color(white);
+}
+
+.bg-primary:hover,
+.bg-primary:focus {
+  @include background-color(secondary);
+}
+
+.bg-success:hover,
+.bg-success:focus {
+  @include background-color(success-hover);
+}
+
+.bg-warn:hover,
+.bg-warn:focus {
+  @include background-color(error-hover);
+}
+
+.primary {
+  @include color(primary);
+}
+
+.secondary {
+  @include color(secondary);
+}
+
+.dark {
+  @include color(dark);
+}
+
+.black {
+  @include color(black);
+}
+
+.warn {
+  @include color(error);
+}
+
+.medium {
+  @include color(medium);
+}
+
+.full-width {
+  width: 100%;
+}

package/src/assets/sass/ads-ui/main.scss

@@ -0,0 +1,9 @@
+@import 'abstracts/functions';
+@import 'abstracts/mixins';
+@import 'abstracts/variables';
+@import 'base/reset';
+@import 'base/typography';
+@import 'overrides/angular-material';
+@import 'themes/ads-palette';
+@import 'base/utilities';
+@import 'overrides/ag-grid';

package/src/assets/sass/ads-ui/overrides/_ag-grid.scss

@@ -0,0 +1,2 @@
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-quartz.css';

package/src/assets/sass/ads-ui/overrides/_angular-material.scss

@@ -0,0 +1,10 @@
+@import 'angular-material/html';
+@import 'angular-material/dropdown';
+@import 'angular-material/snackbar';
+@import 'angular-material/modal';
+@import 'angular-material/datetimepicker';
+@import 'angular-material/tabs';
+@import 'angular-material/tooltip';
+@import 'angular-material/expansion-panel';
+@import 'angular-material/search-dropdown-modal';
+@import 'angular-material/mat-list';

package/src/assets/sass/ads-ui/overrides/angular-material/_bottom-sheet.scss

@@ -0,0 +1,10 @@
+.mat-bottom-sheet-container {
+  border-radius: 0 !important;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
+  overflow: hidden !important;
+}
+
+.cdk-overlay-dark-backdrop {
+  background-color: color(medium) !important;
+  opacity: 0.5 !important;
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_datetimepicker.scss

@@ -0,0 +1,250 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+@import '../../abstracts/mixins';
+
+mat-datetimepicker-content.ads-datetimepicker-calendar {
+  border-radius: 5px;
+  background-color: color(white);
+
+  --mdc-filled-text-field-label-text-color: #{color(medium)} !important;
+
+  &.hidden {
+    display: none;
+  }
+
+  .mat-datetimepicker-calendar-table-header {
+    color: color(medium);
+  }
+
+  mat-datetimepicker-calendar {
+    height: auto;
+    width: 265px;
+    margin: 12px;
+
+    &.year {
+      .mat-datetimepicker-calendar-header {
+        .mat-datetimepicker-calendar-period-button {
+          display: none;
+        }
+
+        .header.line-1 .sub-line-1 .mat-datetimepicker-calendar-header-year:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.month .mat-datetimepicker-calendar-header {
+      .header.line-2 .mat-datetimepicker-calendar-header-date {
+        pointer-events: none;
+      }
+    }
+
+    &:not(.month) .mat-datetimepicker-calendar-header {
+      .header.line-2 {
+        .mat-datetimepicker-calendar-header-date:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.clock .mat-datetimepicker-calendar-header {
+      .header.line-1 .sub-line-2 {
+        display: none;
+      }
+
+      .header.line-2 {
+        .mat-datetimepicker-calendar-header-hours,
+        .mat-datetimepicker-calendar-header-minutes {
+          &.active {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .mat-datetimepicker-calendar-header {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+
+      .header {
+        color: var(--mdc-filled-text-field-label-text-color);
+        display: flex;
+
+        &.line-1 {
+          justify-content: space-between;
+
+          .sub-line-1 {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+
+            .mat-datetimepicker-calendar-header-year {
+              opacity: 1;
+              font-weight: font-weight(regular);
+              line-height: 21px;
+              display: flex;
+              gap: 4px;
+
+              &:hover {
+                opacity: 1;
+              }
+
+              .arrow-down {
+                display: flex;
+                align-items: center;
+                margin: 2px 0 0 15px;
+                svg {
+                  fill: color(medium);
+                }
+              }
+
+              .month-shortcut {
+                padding: 0;
+                text-transform: uppercase;
+                height: auto;
+                font-size: font-size(text-base);
+                line-height: 21px;
+                font-weight: font-weight(regular);
+              }
+            }
+          }
+
+          .sub-line-2 {
+            display: flex;
+
+            > div {
+              width: auto;
+              height: auto;
+              padding: 0;
+              display: flex;
+              align-items: center;
+              opacity: 1;
+
+              &:hover {
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        &.line-2 {
+          justify-content: flex-end;
+          gap: 6px;
+          font-size: inherit;
+          line-height: inherit;
+
+          .mat-datetimepicker-calendar-header-date {
+            opacity: 1;
+          }
+
+          .mat-datetimepicker-calendar-header-time {
+            opacity: 1;
+            padding: 0;
+
+            .mat-datetimepicker-calendar-header-hours,
+            .mat-datetimepicker-calendar-header-minutes {
+              cursor: pointer;
+              opacity: 1;
+
+              &:hover {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .mat-datetimepicker-calendar-content {
+      padding: 0;
+
+      .mat-month-content {
+        display: none;
+      }
+
+      .mat-datetimepicker-calendar-table {
+        thead th {
+          padding: 16px 0 10px 0;
+          color: var(--mdc-filled-text-field-label-text-color);
+          opacity: 1;
+        }
+
+        tbody {
+          .mat-datetimepicker-calendar-body-label {
+            visibility: hidden;
+          }
+
+          .mat-datetimepicker-calendar-body-cell {
+            > * {
+              color: color(dark);
+            }
+
+            &:hover {
+              .mat-datetimepicker-calendar-body-cell-content {
+                color: color(white);
+                background-color: color(secondary-hover);
+              }
+            }
+
+            &:focus,
+            &:active {
+              .mat-datetimepicker-calendar-body-cell-content {
+                color: color(white);
+                background-color: color(secondary-pressed);
+              }
+            }
+
+            &.mat-datetimepicker-calendar-body-active {
+              &:not(:hover) {
+                .mat-datetimepicker-calendar-body-cell-content {
+                  background-color: color(white);
+                  color: color(secondary-hover);
+                }
+              }
+
+              .mat-datetimepicker-calendar-body-cell-content {
+                border: solid 1.5px color(secondary-hover);
+              }
+            }
+          }
+
+          .mat-datetimepicker-calendar-body-cell-content {
+            font-weight: font-weight(regular);
+            font-size: 16px;
+            line-height: 21px;
+          }
+        }
+      }
+
+      mat-datetimepicker-clock {
+        margin: 0;
+
+        .mat-datetimepicker-clock {
+          background-color: color(light-30);
+
+          .mat-datetimepicker-clock-cell {
+            font-weight: font-weight(regular);
+            font-size: font-size(text-base);
+            line-height: 21px;
+            color: color(dark);
+
+            &.mat-datetimepicker-clock-cell-selected {
+              border: solid 1.5px color(select-hover);
+            }
+
+            &:hover {
+              color: color(white);
+              background-color: color(secondary-hover);
+            }
+
+            &:active {
+              color: color(white);
+              background-color: color(secondary-pressed);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_dropdown.scss

@@ -0,0 +1,32 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+
+.mat-mdc-select-panel,
+.mat-mdc-autocomplete-panel {
+  --mat-autocomplete-background-color: #{color(white)};
+  --mat-select-panel-background-color: #{color(white)};
+  --mat-option-label-text-color: #{color(dark)};
+  &.ads-dropdown-panel {
+    padding: 0;
+
+    &.fit-content {
+      min-width: fit-content;
+    }
+
+    &:not(.clickable) mat-option {
+      cursor: default;
+    }
+  }
+}
+
+.mat-mdc-autocomplete-panel.loading {
+  display: none;
+}
+
+.no-results-hr {
+  margin: 0;
+}
+
+.empty-container {
+  height: 22px;
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_expansion-panel.scss

@@ -0,0 +1,19 @@
+//.mat-expansion-panel .mat-expansion-panel-header,
+//.mat-expansion-panel-header.mat-expanded {
+//  padding: 16px 8px;
+//}
+//
+//mat-expansion-panel {
+//  --mat-expansion-container-shape: 10px;
+//  box-shadow:
+//    0 100px 80px 0 rgba(166, 150, 194, 0.07),
+//    0 41.778px 33.422px 0 rgba(166, 150, 194, 0.05),
+//    0 22.336px 17.869px 0 rgba(166, 150, 194, 0.04),
+//    0 12.522px 10.017px 0 rgba(166, 150, 194, 0.04),
+//    0 6.65px 5.32px 0 rgba(166, 150, 194, 0.03),
+//    0 2.767px 2.214px 0 rgba(166, 150, 194, 0.02) !important;
+//}
+//
+//.mat-expansion-panel-content .mat-expansion-panel-body {
+//  padding: 0 8px 16px;
+//}

package/src/assets/sass/ads-ui/overrides/angular-material/_html.scss

@@ -0,0 +1,18 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+
+html {
+  --mdc-filled-text-field-container-color: #{color(white)} !important;
+  --mat-form-field-state-layer-color: #{color(white)} !important;
+  --mat-form-field-container-vertical-padding: 0 !important;
+  --mat-form-field-filled-with-label-container-padding-top: 0 !important;
+  --mat-form-field-filled-with-label-container-padding-bottom: 4px !important;
+  --mdc-filled-text-field-input-text-placeholder-color: #{color(medium)} !important;
+  --mdc-filled-text-field-error-hover-label-text-color: #{color(error)} !important;
+
+  --mdc-filled-text-field-disabled-container-color: #{color(muted)} !important;
+  --mdc-filled-text-field-disabled-input-text-color: #{color(medium)} !important;
+  --mdc-filled-text-field-disabled-label-text-color: #{color(medium)} !important;
+
+  --mat-form-field-container-height: 48px !important;
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_mat-list.scss

@@ -0,0 +1,45 @@
+mat-list.ads-mat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+
+  &.with-controls {
+    gap: 0;
+
+    &.single-control {
+      mat-list-item {
+        .mat-mdc-list-item-unscoped-content {
+          grid-template-columns: min-content minmax(260px, 450px);
+        }
+      }
+    }
+
+    mat-list-item {
+      .mat-mdc-list-item-unscoped-content {
+        align-items: flex-start;
+        grid-template-columns: min-content minmax(260px, 450px) minmax(200px, 400px);
+      }
+    }
+  }
+
+  mat-list-item {
+    --mdc-list-list-item-one-line-container-height: auto;
+
+    min-height: 54px;
+
+    &:hover {
+      .mat-mdc-list-item-unscoped-content {
+        color: color(medium);
+      }
+    }
+
+    .mat-mdc-list-item-unscoped-content {
+      color: color(medium);
+      display: grid;
+      grid-template-columns: min-content 1fr;
+      white-space: normal;
+      grid-column-gap: 28px;
+    }
+  }
+}