@aziontech/theme 0.1.0

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

@@ -0,0 +1,21 @@
+// Custom TabMenu
+.p-tabmenu {
+  .p-tabmenu-nav {
+    gap: 0.5rem !important;
+
+    .p-tabmenuitem {
+      .p-menuitem-link {
+        font-weight: 600 !important;
+        min-height: 2rem !important;
+        font-size: 0.875rem !important;
+        border-radius: $borderRadius !important;
+      }
+      &.p-highlight {
+        .p-menuitem-link {
+          color: var(--highlight-tab-menu-link) !important;
+          font-weight: 500 !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+// Custom TabView
+.p-tabview {
+  .p-tabview-nav {
+    gap: 0.5rem !important;
+    padding: 0 !important;
+
+    li {
+      .p-tabview-nav-link {
+        font-weight: 600 !important;
+        min-height: 2rem;
+        font-size: 0.875rem;
+        border-radius: $borderRadius;
+      }
+      &.p-highlight {
+        .p-tabview-nav-link {
+          color: var(--highlight-tabview-nav-link) !important;
+          font-weight: 700 !important;
+        }
+      }
+    }
+  }
+  .p-tabview-nav-btn.p-link {
+    background-color: var(--surface-section) !important;
+    color: $textColor !important;
+    width: 2rem;
+    &:enabled:hover {
+      background: var(--surface-hover) !important;
+      color: $buttonBg;
+      transition: all 150ms;
+    }
+  }
+  .p-tabview-panels {
+    height: 100%;
+    background: transparent !important;
+    padding: 0 !important;
+
+    .p-tabview-panel {
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+// Custom Tag
+@use "sass:math";
+
+.p-tag {
+  background: var(--p-tag-background) !important;
+  color: var(--p-tag-color) !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.01rem;
+  padding: $tagPadding;
+
+  .p-tag-icon {
+    margin-right: math.div($inlineSpacing, 2);
+    font-size: $badgeFontSize;
+
+    &.p-icon {
+      width: $badgeFontSize;
+      height: $badgeFontSize;
+    }
+  }
+
+  &.p-tag-info {
+    background-color: var(--surface-section) !important;
+    color: $textColor !important;
+    box-shadow: 0px 0px 0px 1px var(--surface-border) !important;
+  }
+
+  &.p-tag-success {
+    background-color: var(--p-tag-success-background) !important;
+    color: var(--p-tag-success-color) !important;
+  }
+
+  &.p-tag-warning {
+    background-color: var(--p-tag-warning-background) !important;
+    color: var(--p-tag-warning-color) !important;
+  }
+
+  &.p-tag-danger {
+    background-color: var(--p-tag-danger-background) !important;
+    color: var(--p-tag-danger-color) !important;
+  }
+
+  &.tag-close {
+    background-color: var(--p-tag-close-background) !important;
+    color: var(--p-tag-close-color) !important;
+  }
+}

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

@@ -0,0 +1,9 @@
+// Custom TabView
+.p-toast {
+  .p-toast-message {
+    .p-toast-message-content {
+      background: var(--surface-card) !important;
+      border-radius: $borderRadius !important;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.p-tooltip {
+  .p-tooltip-text {
+    box-shadow: none !important;
+    font-size: 0.875rem !important;
+    padding: 0.375rem 0.5rem !important;
+  }
+}

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

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

package/src/azion/extended-components/jsonform/_inputcheckbox.scss

@@ -0,0 +1,41 @@
+.azion-json-form {
+  .wrapper {
+    input.input[type="checkbox"] {
+      min-width: 20px !important;
+      max-width: 20px !important;
+      font-family: var(--font-family);
+      font-feature-settings: var(--font-feature-settings, normal);
+      font-size: $inputTextFontSize;
+      color: $inputTextColor;
+      background: $inputBg;
+      padding: 9px;
+      border: $inputBorder;
+      transition: $formElementTransition;
+      appearance: none;
+      border-radius: $borderRadius;
+      position: relative !important;
+
+      &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+      }
+
+      &:enabled:focus {
+        @include focused-input();
+      }
+
+      &:checked {
+        background-color: $inputHoverBorderColor;
+
+        &::before {
+          font-family: "primeicons";
+          content: "\f1f1";
+          display: block;
+          position: absolute;
+          top: -1px;
+          left: 2px;
+        }
+      }
+
+    }
+  }
+}

package/src/azion/extended-components/jsonform/_inputtext.scss

@@ -0,0 +1,26 @@
+.azion-json-form {
+  .wrapper {
+    .input {
+      min-width: 100%;
+      max-width: 320px;
+      font-family: var(--font-family);
+      font-feature-settings: var(--font-feature-settings, normal);
+      font-size: $inputTextFontSize;
+      color: $inputTextColor;
+      background: $inputBg;
+      padding: $inputPadding;
+      border: $inputBorder;
+      transition: $formElementTransition;
+      appearance: none;
+      border-radius: $borderRadius;
+
+      &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+      }
+
+      &:enabled:focus {
+        @include focused-input();
+      }
+    }
+  }
+}

package/src/azion/extended-components/jsonform/_label.scss

@@ -0,0 +1,185 @@
+.azion-json-form {
+  .control {
+    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+
+    .wrapper:has(+ .error) .input {
+      border: 1px solid var(--error-color) !important;
+      border-color: var(--error-color) !important;
+    }
+
+    .error {
+      font-size: 0.75rem !important;
+      line-height: 1.25 !important;
+      font-weight: 400 !important;
+      color: var(--error-color) !important;
+      min-height: 20px !important;
+
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+
+    .label {
+      font-size: 1rem !important;
+      line-height: 1.25rem !important;
+      font-weight: 500 !important;
+
+      &::first-letter {
+        text-transform: uppercase;
+      }
+
+      .asterisk {
+        color: #f57c00;
+        font-size: 0.875rem !important;
+        line-height: 1.25rem !important;
+        display: inline-block;
+        position: relative;
+
+        &:after {
+          content: "(Required)";
+          color: var(--text-color-secondary) !important;
+          font-size: 0.625rem !important;
+          line-height: 1.25rem !important;
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          left: 100%;
+          margin-left: 0.2rem;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .description {
+      min-height: 20px !important;
+      line-height: 1.25rem !important;
+      font-size: 0.75rem !important;
+      font-weight: 400 !important;
+      color: var(--text-color-secondary) !important;
+
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  .array-list {
+    max-width: 320px;
+    margin-top: 2rem !important;
+    display: block !important;
+
+    .array-list-legend {
+      width: 100%;
+      line-height: 1.25rem !important;
+      font-size: 0.75rem !important;
+      font-weight: 400 !important;
+      color: var(--text-color-secondary) !important;
+      display: flex !important;
+      gap: 0.5rem !important;
+      align-items: center !important;
+      border-top: 1px solid var(--surface-border) !important;
+      padding: 1rem 0 !important;
+
+      &::first-letter {
+        text-transform: uppercase;
+      }
+
+      button {
+        cursor: pointer;
+        position: relative;
+        font-size: 0.875rem;
+        padding: 0.301rem 0.65625rem;
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--surface-border);
+        border-radius: 6px;
+        transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+
+        &.array-list-add {
+          color: transparent !important;
+
+          &:hover {
+            background-color: var(--surface-hover) !important;
+          }
+
+          &::before {
+            content: '\f16e';
+            display: block;
+            position: absolute;
+            font-family: "primeicons";
+            color: var(--text-color) !important;
+            left: 7px;
+            top: 6px;
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+
+    .array-list-item-wrapper {
+      .array-list-item {
+        .array-list-item-toolbar {
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+          justify-content: flex-end;
+          max-width: 320px;
+          line-height: 1.25rem !important;
+          font-size: 0.75rem !important;
+          font-weight: 400 !important;
+          color: var(--text-color-secondary) !important;
+          margin-bottom: 1rem !important;
+          border-top: 1px solid var(--surface-border);
+          padding-top: 1rem !important;
+
+          .array-list-item-move-up,
+          .array-list-item-move-down,
+          .array-list-item-delete {
+            color: transparent !important;
+            position: relative;
+            cursor: pointer;
+            font-size: 0.875rem;
+            padding: 0.301rem 0.65625rem;
+            width: 32px;
+            height: 32px;
+            color: transparent !important;
+            border: 1px solid var(--surface-border);
+            border-radius: 6px;
+            transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+
+            &::before {
+              display: block;
+              position: absolute;
+              font-family: "primeicons";
+              color: var(--text-color) !important;
+              left: 7px;
+              top: 6px;
+              width: 16px;
+              height: 16px;
+            }
+
+            &:hover{
+              background-color: var(--surface-hover) !important;
+            }
+          }
+
+          .array-list-item-move-up::before {
+            content: '\f21c';
+          }
+
+          .array-list-item-move-down::before {
+            content: '\f223';
+          }
+
+          .array-list-item-delete::before {
+            content: '\f11e';
+          }
+        }
+      }
+    }
+  }
+}

package/src/azion/extended-components/jsonform/_select.scss

@@ -0,0 +1,34 @@
+.azion-json-form {
+  .wrapper {
+    .select::picker(select) {
+      background-color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+
+    .select {
+      min-width: 100%;
+      max-width: 320px;
+      height: 34px;
+      font-family: var(--font-family);
+      font-feature-settings: var(--font-feature-settings, normal);
+      font-size: $inputTextFontSize;
+      color: $inputTextColor;
+      background: $inputBg;
+      padding: $inputPadding;
+      border: $inputBorder;
+      transition: $formElementTransition;
+      border-radius: $borderRadius;
+      position: relative !important;
+
+      &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+      }
+
+      &:enabled:focus {
+        @include focused-input();
+      }
+    }
+  }
+}

package/src/azion/theme-base/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+                }
+                @else {
+                    --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+                }
+            }
+            
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            }
+        }
+    }
+}

package/src/azion/theme-base/_common.scss

@@ -0,0 +1,75 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+    
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}

package/src/azion/theme-base/_components.scss

@@ -0,0 +1,103 @@
+@import '_mixins';
+@import '_colors';
+
+@import './components/input/_editor';
+
+@layer primevue {
+    @import '_common';
+
+    //Input
+    @import './components/input/_autocomplete';
+    @import './components/input/_calendar';
+    @import './components/input/_cascadeselect';
+    @import './components/input/_checkbox';
+    @import './components/input/_chips';
+    @import './components/input/_colorpicker';
+    @import './components/input/_dropdown';
+    @import './components/input/_inputgroup';
+    @import './components/input/_inputnumber';
+    @import './components/input/_inputswitch';
+    @import './components/input/_inputtext';
+    @import './components/input/_listbox';
+    @import './components/input/_multiselect';
+    @import './components/input/_password';
+    @import './components/input/_radiobutton';
+    @import './components/input/_rating';
+    @import './components/input/_selectbutton';
+    @import './components/input/_slider';
+    @import './components/input/_treeselect';
+    @import './components/input/_togglebutton';
+
+    //Button
+    @import './components/button/_button';
+    @import './components/button/_speeddial';
+    @import './components/button/_splitbutton';
+
+    //Data
+    @import './components/data/_carousel';
+    @import './components/data/_datatable';
+    @import './components/data/_dataview';
+    @import './components/data/_filter';
+    @import './components/data/_orderlist';
+    @import './components/data/_organizationchart';
+    @import './components/data/_paginator';
+    @import './components/data/_picklist';
+    @import './components/data/_timeline';
+    @import './components/data/_tree';
+    @import './components/data/_treetable';
+
+    //Panel
+    @import './components/panel/_accordion';
+    @import './components/panel/_card';
+    @import './components/panel/_fieldset';
+    @import './components/panel/_divider';
+    @import './components/panel/_panel';
+    @import './components/panel/_scrollpanel';
+    @import './components/panel/_splitter';
+    @import './components/panel/_tabview';
+    @import './components/panel/_toolbar';
+
+    //Overlay
+    @import './components/overlay/_confirmpopup';
+    @import './components/overlay/_dialog';
+    @import './components/overlay/_overlaypanel';
+    @import './components/overlay/_sidebar';
+    @import './components/overlay/_tooltip';
+
+    //File
+    @import './components/file/_fileupload';
+
+    //Menu
+    @import './components/menu/_breadcrumb';
+    @import './components/menu/_contextmenu';
+    @import './components/menu/_dock';
+    @import './components/menu/_megamenu';
+    @import './components/menu/_menu';
+    @import './components/menu/_menubar';
+    @import './components/menu/_panelmenu';
+    @import './components/menu/_steps';
+    @import './components/menu/_tabmenu';
+    @import './components/menu/_tieredmenu';
+
+    //Messages
+    @import './components/messages/_inlinemessage';
+    @import './components/messages/_message';
+    @import './components/messages/toast';
+
+    //MultiMedia
+    @import './components/multimedia/_galleria';
+    @import './components/multimedia/_image';
+
+    //Misc
+    @import './components/misc/_avatar';
+    @import './components/misc/_badge';
+    @import './components/misc/_blockui';
+    @import './components/misc/_chip';
+    @import './components/misc/_inplace';
+    @import './components/misc/_progressbar';
+    @import './components/misc/_progressspinner';
+    @import './components/misc/_scrolltop';
+    @import './components/misc/_skeleton';
+    @import './components/misc/_tag';
+    @import './components/misc/_terminal';
+}