azion-theme 1.3.5

package/src/azion-dark/_fonts.scss

@@ -0,0 +1,156 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-light.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-light.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-light.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-light.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-light.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-light.svg#roboto-light') format('svg');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('https://fonts.azion.com/roboto-mono/roboto-mono-regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('https://fonts.azion.com/roboto-mono/roboto-mono-light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-regular.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-regular.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-regular.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-regular.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-regular.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-regular.svg#Roboto-Regular') format('svg');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-italic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-italic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-italic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-italic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-italic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-italic.svg#roboto-italic') format('svg');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-medium.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-medium.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-medium.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-medium.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-medium.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-medium.svg#roboto-medium') format('svg');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.svg#roboto-mediumitalic') format('svg');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bold.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bold.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bolditalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bold') format('svg');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-black.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-black.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-black.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-black.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-black.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-black.svg#roboto-black') format('svg');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/src/azion-dark/_variables.scss

@@ -0,0 +1,112 @@
+// Theme Specific Variables
+$primaryColor: #f4f4f4;
+$primaryDarkColor: hsla(0, 0%, 96%, 0.5);
+$primaryDarkerColor: #f4f4f4;
+$primaryTextColor: #f4f4f4;
+
+$colors: (
+  'blue': #2196f3,
+  'green': #4caf50,
+  'yellow': #fbc02d,
+  'cyan': #00bcd4,
+  'pink': #e91e63,
+  'indigo': #3f51b5,
+  'teal': #009688,
+  'orange': #f57c00,
+  'bluegray': #607d8b,
+  'purple': #9c27b0,
+  'red': #ff4032,
+  'primary': $primaryColor
+);
+
+// Mandatory Designer Variables
+@import './variables/general';
+@import './variables/form';
+@import './variables/button';
+@import './variables/panel';
+@import './variables/_data';
+@import './variables/_overlay';
+@import './variables/_message';
+@import './variables/_menu';
+@import './variables/_media';
+@import './variables/_misc';
+
+:root.azion-dark {
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+
+  --green-50: #f4fcf7;
+  --green-100: #caf1d8;
+  --green-200: #a0e6ba;
+  --green-300: #76db9b;
+  --green-400: #4cd07d;
+  --green-500: #22c55e;
+  --green-600: #1da750;
+  --green-700: #188a42;
+  --green-800: #136c34;
+  --green-900: #0e4f26;
+
+  --red-50: #fff5f5;
+  --red-100: #ffd0ce;
+  --red-200: #ffaca7;
+  --red-300: #ff8780;
+  --red-400: #ff6259;
+  --red-500: #ff3d32;
+  --red-600: #d9342b;
+  --red-700: #b32b23;
+  --red-800: #8c221c;
+  --red-900: #661814;
+
+  --text-color: #ededed;
+  --text-color-secondary: #b5b5b5;
+  --text-color-link: #93c5fd;
+
+  --primary-color: #f4f4f4;
+  --primary-color-text: #1e1e1e;
+
+  --font-family: 'Roboto', sans-serif;
+
+  --surface-0: #0a0a0a;
+  --surface-50: #111111;
+  --surface-100: #171717;
+  --surface-200: #222222;
+  --surface-300: #282828;
+  --surface-400: #2e2e2e;
+  --surface-500: #353535;
+  --surface-600: #3e3e3e;
+  --surface-700: #4a4a4a;
+  --surface-800: #5e5e5e;
+  --surface-900: #7d7d7d;
+
+  --gray-50: #282828;
+  --gray-100: #363636;
+  --gray-200: #747474;
+  --gray-300: #939393;
+  --gray-400: #b2b2b2;
+  --gray-500: #9e9e9e;
+  --gray-600: #ebebeb;
+  --gray-700: #f5f5f5;
+  --gray-800: #fafafa;
+  --gray-900: #ffffff;
+
+  --content-padding: #{$panelContentPadding};
+  --inline-spacing: #{$inlineSpacing};
+  --border-radius: #{$borderRadius};
+  --surface-ground: #171717;
+  --surface-section: #171717;
+  --surface-card: #171717;
+  --surface-overlay: #ffffff;
+  --surface-border: #282828;
+  --surface-hover: #f5f5f516;
+  --focus-ring: #{$focusShadow};
+  --maskbg: #{$maskBg};
+  --highlight-bg: #{$highlightBg};
+  --highlight-text-color: #{$highlightTextColor};
+  --bg-selection: #FAB99E;
+
+  color-scheme: dark;
+}

package/src/azion-dark/custom/_focus.scss

@@ -0,0 +1,5 @@
+a {
+  &:focus-visible {
+    @include focused();
+  }
+}

package/src/azion-dark/custom/_scrollbehavior.scss

@@ -0,0 +1,6 @@
+/**
+ * Enable smooth scrolling on the whole document
+ */
+ html {
+	scroll-behavior: smooth;
+}

package/src/azion-dark/custom/_selection.scss

@@ -0,0 +1,4 @@
+::selection {
+  color: var(--primary-color-text);
+  background-color: var(--bg-selection);
+}

package/src/azion-dark/extended-components/_badge.scss

@@ -0,0 +1,53 @@
+// Custom badge
+.p-badge {
+  border: 1px solid var(--surface-border) !important;
+  border-radius: $borderRadius;
+  color: $badgeTextColor;
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  min-width: $badgeMinWidth;
+  height: $badgeHeight;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+
+  &.p-badge-secondary {
+    background-color: $secondaryButtonBg;
+    color: $secondaryButtonTextColor;
+  }
+
+  &.p-badge-success {
+    background-color: $successButtonBg;
+    color: $successButtonTextColor;
+  }
+
+  &.p-badge-info {
+    background-color: $infoButtonBg;
+    color: $infoButtonTextColor;
+  }
+
+  &.p-badge-warning {
+    background-color: $warningButtonBg;
+    color: $warningButtonTextColor;
+  }
+
+  &.p-badge-danger {
+    background-color: $dangerButtonBg;
+    color: $dangerButtonTextColor;
+    border: none !important;
+  }
+
+  &.p-badge-lg {
+    font-size: 1.5 * $badgeFontSize;
+    min-width: 1.5 * $badgeMinWidth;
+    height: 1.5 * $badgeHeight;
+    line-height: 1.5 * $badgeHeight;
+  }
+
+  &.p-badge-xl {
+    font-size: 2 * $badgeFontSize;
+    min-width: 2 * $badgeMinWidth;
+    height: 2 * $badgeHeight;
+    line-height: 2 * $badgeHeight;
+  }
+}

package/src/azion-dark/extended-components/_breadcumb.scss

@@ -0,0 +1,18 @@
+// Custom Breadcrumb
+.p-breadcrumb {
+  .p-breadcrumb-list {
+    font-weight: 500 !important;
+    text-wrap: nowrap !important;
+    .p-menuitem-link {
+      padding: 0.25rem 0.125rem !important;
+      transition: $formElementTransition !important;
+      font-size: 0.875rem !important;
+    }
+    .p-menuitem:last-of-type {
+      font-weight: 500 !important;
+    }
+    .p-menuitem:hover {
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+//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) {
+    color: $textColor !important;
+    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-dark/extended-components/_calendar.scss

@@ -0,0 +1,42 @@
+.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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+// Custom Checkbox
+.p-checkbox {
+  .p-checkbox-box {
+    border: 2px solid var(--surface-border) !important;
+    .p-checkbox-icon {
+      color: white !important;
+
+      &.p-icon {
+      }
+    }
+
+    &.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();
+  }
+}
+
+.p-input-filled {
+  .p-checkbox {
+    .p-checkbox-box {
+      &.p-highlight {
+      }
+    }
+
+    &:not(.p-checkbox-disabled) {
+      .p-checkbox-box {
+        &:hover {
+        }
+
+        &.p-highlight:hover {
+        }
+      }
+    }
+  }
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+  .p-highlight {
+    .p-checkbox {
+      .p-checkbox-box {
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+.p-datatable {
+  border: var(--surface-border) 1px solid;
+  border-radius: $borderRadius;
+  font-size: 0.875rem !important;
+  text-wrap: nowrap !important;
+
+  .p-datatable-header {
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+  }
+
+  .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-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;
+      }
+    }
+  }
+}