@aziontech/theme 0.1.0

package/src/azion/extended-components/_button.scss

@@ -0,0 +1,134 @@
+//Custom Button
+
+.p-button {
+  font-weight: 500 !important;
+
+  &.p-button-outlined {
+    color: $textColor !important;
+
+    &:enabled:hover {
+      background-color: var(--surface-hover) !important;
+    }
+
+    &:enabled:active {
+      background-color: var(--surface-hover) !important;
+    }
+
+    &.p-button-plain {
+      color: $textColor !important;
+
+      &:enabled:hover {
+        color: $textColor !important;
+      }
+
+      &:enabled:active {
+        color: $textColor !important;
+      }
+    }
+  }
+
+  &.p-button-text {
+    color: $textColor !important;
+
+    &:enabled:hover {
+      color: $textColor !important;
+      background-color: var(--surface-hover);
+    }
+
+    &:enabled:active {
+      color: $textColor !important;
+      background-color: var(--surface-hover);
+    }
+
+    &.p-button-plain {
+      color: $textColor !important;
+      background-color: var(--surface-hover);
+
+      &:enabled:hover {
+        color: $textColor !important;
+      }
+
+      &:enabled:active {
+        color: $textColor !important;
+        background-color: var(--surface-hover);
+      }
+    }
+  }
+
+  &.p-button-icon-only:not(
+      .p-datepicker-trigger,
+      .p-inputnumber-button,
+      .table-button
+    ) {
+    width: 2rem !important;
+    height: 2rem !important;
+    .p-button-icon-left,
+    .p-button-icon-right {
+      margin: 0;
+    }
+  }
+
+  &.p-button-sm {
+    @include scaledFontSize($fontSize, $scaleSM);
+    @include scaledPadding($buttonPadding, $scaleSM);
+
+    .p-button-icon {
+      @include scaledFontSize($primeIconFontSize, $scaleSM);
+    }
+  }
+
+  &.p-button-lg {
+    @include scaledFontSize($fontSize, $scaleLG);
+    @include scaledPadding($buttonPadding, $scaleLG);
+
+    .p-button-icon {
+      @include scaledFontSize($primeIconFontSize, $scaleLG);
+    }
+  }
+
+  &.p-button-loading-label-only {
+    .p-button-loading-icon {
+      margin-right: 0;
+    }
+  }
+}
+
+.p-fluid {
+  .p-button {
+    width: 100%;
+  }
+
+  .p-button-icon-only {
+    width: $buttonIconOnlyWidth;
+  }
+
+  .p-buttonset {
+    display: flex;
+
+    .p-button {
+      flex: 1;
+    }
+  }
+}
+
+.p-button.p-button-link {
+  color: $linkButtonColor !important;
+  &:not(:disabled):focus {
+    box-shadow: none !important;
+  }
+  &:not(:disabled):focus-visible {
+    box-shadow: $linkButtonFocusShadow !important;
+  }
+}
+
+.p-inputgroup > .p-button {
+  &.p-button-icon-only {
+    color: initial;
+    width: initial;
+    height: initial !important;
+    .p-button-icon-left,
+    .p-button-icon-right {
+      margin: initial;
+    }
+  }
+}

package/src/azion/extended-components/_calendar.scss

@@ -0,0 +1,310 @@
+.p-calendar {
+  .p-button-icon-only {
+    color: $inputIconColor;
+    background: $inputBg;
+    border: $inputBorder;
+    border-left: none;
+
+    &:enabled:hover {
+      background: $secondaryButtonHoverBg;
+      color: $secondaryButtonTextHoverColor;
+      border-color: $secondaryButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+      box-shadow: $secondaryButtonFocusShadow;
+    }
+
+    &:enabled:active {
+      background: $secondaryButtonActiveBg;
+      color: $secondaryButtonTextActiveColor;
+      border-color: $secondaryButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+      background-color: transparent;
+      color: $secondaryButtonBg;
+      border: $outlinedButtonBorder;
+
+      &:enabled:hover {
+        background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+      }
+
+      &:enabled:active {
+        background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+      }
+    }
+  }
+}
+
+.p-datepicker {
+  padding: $calendarPadding;
+  max-width: 320px !important;
+  background: $calendarInlineBg;
+  color: $calendarTextColor;
+  border: $calendarBorder;
+  border-radius: $borderRadius;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: fit-content !important;
+
+  .p-datepicker-group-container {
+    width: fit-content !important;
+  }
+
+  &:not(.p-datepicker-inline) {
+      background: $calendarBg;
+      border: $calendarOverlayBorder;
+      box-shadow: $inputOverlayShadow;
+
+      .p-datepicker-header {
+          background: $calendarHeaderBg;
+          width: 100% !important;
+      }
+  }
+
+  .p-datepicker-header {
+      padding: 0 !important;
+      color: $calendarHeaderTextColor;
+      background: $calendarInlineHeaderBg;
+      font-weight: $calendarHeaderFontWeight;
+      margin: $inputListHeaderMargin;
+      border-bottom: $divider;
+      border-top-right-radius: $borderRadius;
+      border-top-left-radius: $borderRadius;
+
+      .p-datepicker-prev,
+      .p-datepicker-next {
+          @include action-icon();
+      }
+
+      .p-datepicker-title {
+          line-height: $actionIconHeight;
+
+          .p-datepicker-year,
+          .p-datepicker-month {
+              color: $calendarHeaderTextColor;
+              transition: $actionIconTransition;
+              font-weight: $calendarHeaderFontWeight;
+              padding: $calendarHeaderCellPadding;
+
+              &:enabled:hover {
+                  color: $calendarMonthYearHeaderHoverTextColor;
+              }
+          }
+
+          .p-datepicker-month {
+              margin-right: $inlineSpacing;
+          }
+      }
+  }
+
+  .p-datepicker-calendar-container {
+    padding: 0px !important;
+    width: fit-content !important;
+  }
+
+  table {
+      font-size: $fontSize;
+      margin: $calendarTableMargin;
+
+      th {
+          padding: 0 !important;
+
+          > span {
+              width: 32px !important;
+              height: 32px !important;
+              margin: 4px !important;
+          }
+      }
+
+      td {
+          padding: 0 !important;
+
+          > span {
+              width: 32px !important;
+              height: 32px !important;
+              margin: 4px !important;
+              border-radius: $calendarCellDateBorderRadius;
+              transition: $listItemTransition;
+              border: $calendarCellDateBorder;
+
+              &.p-highlight {
+                  color: var(--secondary-button-text-active-color);
+                  font-weight: 500 !important;
+                  background: var(--secondary-button-active-bg) !important;
+              }
+
+              &:focus {
+                  @include focused();
+              }
+          }
+
+          &.p-datepicker-today {
+              > span {
+                  background: var(--surface-500);
+                  color: var(--text-color);
+                  border-color: none;
+
+                  &.p-highlight {
+                    color: var(--primary-color-text);
+                    font-weight: 500;
+                    background: var(--primary-dark-color);
+                  }
+              }
+          }
+      }
+  }
+
+  .p-datepicker-buttonbar {
+      padding: $calendarButtonBarPadding;
+      border-top: $divider;
+
+      .p-button {
+          width: auto;
+      }
+  }
+
+  .p-timepicker {
+      border-top: $divider;
+      padding: 0;
+      width: 100% !important;
+
+      button {
+          @include action-icon();
+
+          &:last-child {
+              margin-top: .2em;
+          }
+      }
+
+      span {
+          font-size: 1rem !important;
+      }
+
+      > div {
+          padding: $calendarTimePickerElementPadding;
+      }
+  }
+
+  &.p-datepicker-timeonly {
+      .p-timepicker {
+          border-top: 0 none;
+      }
+  }
+
+  .p-monthpicker {
+      margin: $calendarTableMargin;
+
+      .p-monthpicker-month {
+          padding: $calendarCellDatePadding;
+          transition: $listItemTransition;
+          border-radius: $borderRadius;
+
+          &.p-highlight {
+              color: $highlightTextColor;
+              background: $highlightBg;
+          }
+      }
+  }
+
+  .p-yearpicker {
+      margin: $calendarTableMargin;
+
+      .p-yearpicker-year {
+          padding: $calendarCellDatePadding;
+          transition: $listItemTransition;
+          border-radius: $borderRadius;
+
+          &.p-highlight {
+              color: $highlightTextColor;
+              background: $highlightBg;
+          }
+      }
+  }
+
+  .p-datepicker-group {
+    width: 100% !important;
+  }
+
+  &.p-datepicker-multiple-month {
+      .p-datepicker-group {
+        width: 100% !important;
+          border-left: $divider;
+          padding-right: $calendarPadding;
+          padding-left: $calendarPadding;
+          padding-top: 0;
+          padding-bottom: 0;
+
+          &:first-child {
+              padding-left: 0;
+              border-left: 0 none;
+          }
+
+          &:last-child {
+              padding-right: 0;
+          }
+      }
+  }
+
+  &:not(.p-disabled) {
+      table {
+          td {
+              span:not(.p-highlight):not(.p-disabled) {
+                  &:hover {
+                      background: $calendarCellDateHoverBg;
+                  }
+
+                  &:focus {
+                      @include focused();
+                  }
+              }
+          }
+      }
+
+      .p-monthpicker {
+          .p-monthpicker-month {
+              &:not(.p-disabled) {
+                  &:not(.p-highlight):hover {
+                      background: $calendarCellDateHoverBg;
+                  }
+
+                  &:focus {
+                      @include focused();
+                  }
+              }
+          }
+      }
+
+      .p-yearpicker {
+          .p-yearpicker-year {
+              &:not(.p-disabled) {
+                  &:not(.p-highlight):hover {
+                      background: $calendarCellDateHoverBg;
+                  }
+
+                  &:focus {
+                      @include focused();
+                  }
+              }
+          }
+      }
+  }
+
+}
+
+@media screen and (max-width: $calendarBreakpoint) {
+  .p-datepicker {
+      table {
+          th, td {
+              padding: $calendarCellDatePaddingSM;
+          }
+      }
+  }
+}

package/src/azion/extended-components/_carousel.scss

@@ -0,0 +1,9 @@
+// Custom carousel
+
+.p-carousel-indicators {
+    .p-carousel-indicator {
+        &.p-highlight {
+            background: var(--carousel-indicator-highlight) !important;
+        }
+    }
+}

package/src/azion/extended-components/_checkbox.scss

@@ -0,0 +1,33 @@
+// Custom Checkbox
+.p-checkbox {
+  .p-checkbox-box {
+    border: 2px solid var(--surface-border) !important;
+
+    &.p-highlight {
+      border-color: #f3652b !important;
+      background: #f3652b !important;
+    }
+  }
+
+  &:not(.p-checkbox-disabled) {
+    .p-checkbox-box {
+      &:hover {
+        background: var(--gray-100) !important;
+        border-color: #f5793f !important;
+      }
+
+      &.p-focus {
+        @include focused-input();
+      }
+
+      &.p-highlight:hover {
+        border-color: #f5793f !important;
+        background: #f5793f !important;
+      }
+    }
+  }
+
+  &.p-invalid > .p-checkbox-box {
+    @include invalid-input();
+  }
+}

package/src/azion/extended-components/_datatable.scss

@@ -0,0 +1,130 @@
+.p-datatable {
+  border: var(--surface-border) 1px solid;
+  border-radius: $borderRadius;
+  font-size: 0.875rem !important;
+  text-wrap: nowrap !important;
+
+  .p-paginator {
+    border-width: 0px !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  .p-datatable-header {
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+  }
+
+  .p-datatable-tbody > .p-datatable-emptymessage:hover {
+    background: unset !important;
+  }
+
+  .p-datatable-tbody {
+    .p-frozen-column {
+      background: var(--table-body-row-even-bg);
+      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
+    }
+  }
+
+  .p-datatable-tbody > tr:hover,
+  .p-datatable-tbody > tr.bg-altered {
+    .p-frozen-column {
+      background: var(--table-body-row-hover-bg);
+    }
+  }
+
+  .p-datatable-tbody > tr > td {
+    box-sizing: inherit !important;
+    font-size: 0.875rem;
+  }
+
+  .p-datatable-thead > tr > th {
+    box-sizing: inherit !important;
+    font-size: 0.875rem;
+    text-wrap: nowrap !important;
+
+    .p-column-header-content {
+      vertical-align: center;
+    }
+  }
+
+  .p-sortable-column {
+    .p-sortable-column-icon {
+      opacity: 0 !important;
+    }
+  }
+
+  .p-sortable-column:hover {
+    .p-sortable-column-icon {
+      opacity: 1 !important;
+      color: $tableHeaderCellHighlightTextColor !important;
+    }
+  }
+
+  .p-sortable-column {
+    .p-sortable-column-icon {
+      opacity: 0;
+    }
+
+    &.p-highlight {
+      .p-sortable-column-icon {
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  .p-datatable-wrapper {
+    overscroll-behavior: revert !important;
+  }
+
+  .p-datatable-tbody > .p-datatable-emptymessage:hover {
+    background: unset !important;
+  }
+
+  &.p-datatable-gridlines {
+    border: none !important;
+    transition: border-color 0.2s background-color 0.2s;
+    .p-paginator-bottom {
+      border-color: var(--surface-border) !important;
+      border-bottom-left-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+    }
+  }
+}
+
+.p-overlaypanel:has(.hidden-columns-panel) {
+  box-shadow: none !important;
+}
+.hidden-columns-panel {
+  .p-listbox-item {
+    font-size: 0.875rem;
+    line-height: 0.875rem;
+    padding: 0.75rem 0.5rem !important;
+    color: var(--surface-700) !important;
+    background: transparent;
+    &::before {
+      font-family: primeicons;
+      content: "\e965" !important;
+      color: var(--surface-700);
+      margin-right: 0.5rem;
+      font-size: 0.875rem;
+      line-height: 0.875rem;
+    }
+    &:hover {
+      background: $inputListItemHoverBg !important;
+    }
+    &.p-highlight {
+      opacity: 1;
+      color: var(--text-color) !important;
+      background: transparent !important;
+      &::before {
+        font-family: primeicons;
+        content: "\e966" !important;
+        color: var(--text-color);
+      }
+      &:hover {
+        background: $inputListItemHoverBg !important;
+      }
+    }
+  }
+}

package/src/azion/extended-components/_dialog.scss

@@ -0,0 +1,45 @@
+// Custom Dialog
+.p-dialog {
+  margin-inline: 2rem !important;
+  .p-dialog-header {
+    justify-content: space-between;
+    font-size: 1.25rem !important;
+    min-height: 3.5rem !important;
+    font-weight: 500 !important;
+    padding-inline: 2rem !important;
+    border-bottom: 1px solid var(--surface-border) !important;
+  }
+  .p-dialog-footer {
+    height: 3.5rem !important;
+    padding-inline: 2rem !important;
+    display: flex !important;
+    flex-direction: row;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 0.75rem !important;
+    button {
+      margin: 0 !important;
+    }
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .p-dialog {
+    margin-inline: 0.75rem !important;
+    .p-dialog-header {
+      padding-inline: 0.75rem !important;
+    }
+    .p-dialog-content {
+      padding-inline: 0.75rem !important;
+    }
+    .p-dialog-footer {
+      button {
+        width: 100%;
+      }
+      height: auto !important ;
+      flex-direction: column;
+      padding-block: 0.75rem !important;
+      padding-inline: 0.75rem !important;
+    }
+  }
+}

package/src/azion/extended-components/_divider.scss

@@ -0,0 +1,37 @@
+.surface-card {
+  .p-divider-content {
+    background-color: var(--surface-card) !important;
+  }
+}
+
+.p-divider {
+  .p-divider-content {
+    background-color: $panelContentBg;
+  }
+
+  &.p-divider-horizontal {
+    margin: $dividerHorizontalMargin;
+    padding: $dividerHorizontalPadding;
+
+    &:before {
+      border-top: 1px solid var(--surface-border);
+    }
+
+    .p-divider-content {
+      padding: 0 $inlineSpacing;
+    }
+  }
+
+  &.p-divider-vertical {
+    margin: $dividerVerticalMargin;
+    padding: $dividerVerticalPadding;
+
+    &:before {
+      border-left: 1px solid var(--surface-border);
+    }
+
+    .p-divider-content {
+      padding: $inlineSpacing 0;
+    }
+  }
+}

package/src/azion/extended-components/_dropdown.scss

@@ -0,0 +1,10 @@
+.p-dropdown-panel {
+
+    .p-dropdown-items {
+
+        .p-dropdown-empty-message {
+            color: var(--text-color-empty);
+            font-size: 14px;
+        }
+    }
+}