@aziontech/theme 0.1.0

package/src/azion/theme-base/components/overlay/_confirmpopup.scss

@@ -0,0 +1,72 @@
+.p-confirm-popup {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-confirm-popup-content {
+        padding: $confirmPopupContentPadding;
+    }
+
+    .p-confirm-popup-footer {
+        text-align: right;
+        padding: $confirmPopupFooterPadding;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: $overlayContentBg ;
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: nth($overlayContentBorder, 3);
+        }
+    }
+
+    &.p-confirm-popup-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+
+    .p-confirm-popup-icon {
+        font-size: $primeIconFontSize * 1.5;
+
+        &.p-icon {
+            width: $primeIconFontSize * 1.5;
+            height: $primeIconFontSize * 1.5;
+        }
+    }
+
+    .p-confirm-popup-message {
+        margin-left: $inlineSpacing * 2;
+    }
+}

package/src/azion/theme-base/components/overlay/_dialog.scss

@@ -0,0 +1,64 @@
+.p-dialog {
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+    border: $overlayContentBorder;
+
+    .p-dialog-header {
+        border-bottom: $dialogHeaderBorder;
+        background: $dialogHeaderBg;
+        color: $dialogHeaderTextColor;
+        padding: $dialogHeaderPadding;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dialog-title {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-dialog-header-icon {
+            @include action-icon();
+            margin-right: $inlineSpacing;
+            
+            &:last-child {
+                margin-right: 0;
+            }            
+        }
+    }
+
+    .p-dialog-content {
+        background: $overlayContentBg;
+        color: $panelContentTextColor;
+        padding: $dialogContentPadding;
+
+        &:last-of-type {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-dialog-footer {
+        border-top:  $dialogFooterBorder;
+        background: $overlayContentBg;
+        color: $panelFooterTextColor;
+        padding: $dialogFooterPadding;
+        text-align: right;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+        }
+    }
+
+    &.p-confirm-dialog {
+        .p-confirm-dialog-icon {
+            font-size: $primeIconFontSize * 2;
+        }
+
+        .p-confirm-dialog-message:not(:first-child) {
+            margin-left: $inlineSpacing * 2;
+        }
+    }
+}

package/src/azion/theme-base/components/overlay/_overlaypanel.scss

@@ -0,0 +1,38 @@
+@use 'sass:math';
+
+.p-overlaypanel {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-overlaypanel-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-overlaypanel-close {
+        background: $buttonBg;
+        color: $buttonTextColor;
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $actionIconBorderRadius;
+        position: absolute;
+        top: math.div(-1 * $actionIconWidth, 2);
+        right: math.div(-1 * $actionIconWidth, 2);
+
+        &:enabled:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+    }
+
+    &:before {
+        border: solid transparent;
+    }
+}

package/src/azion/theme-base/components/overlay/_sidebar.scss

@@ -0,0 +1,23 @@
+.p-sidebar {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $overlayContainerShadow;
+
+    .p-sidebar-header {
+        padding: $panelHeaderPadding;
+
+        .p-sidebar-close,
+        .p-sidebar-icon {
+            @include action-icon();
+        }
+
+        & + .p-sidebar-content {
+            padding-top: 0;
+        }
+    }
+
+    .p-sidebar-content {
+        padding: $panelContentPadding;
+    }
+}

package/src/azion/theme-base/components/overlay/_tooltip.scss

@@ -0,0 +1,33 @@
+.p-tooltip {
+    .p-tooltip-text {
+        background: $tooltipBg;
+        color: $tooltipTextColor;
+        padding: $tooltipPadding;
+        box-shadow: $inputOverlayShadow;
+        border-radius: $borderRadius;
+    }
+
+    &.p-tooltip-right {
+        .p-tooltip-arrow {
+            border-right-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-left {
+        .p-tooltip-arrow {
+            border-left-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-top {
+        .p-tooltip-arrow {
+            border-top-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-bottom {
+        .p-tooltip-arrow {
+            border-bottom-color: $tooltipBg;
+        }
+    }
+}

package/src/azion/theme-base/components/panel/_accordion.scss

@@ -0,0 +1,118 @@
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-accordion-toggle-icon {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &:not(.p-disabled) {
+            .p-accordion-header-link {
+                &:focus-visible {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-accordion-content {
+        padding: $accordionContentPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-accordion-tab {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-accordion-header {
+                .p-accordion-header-link {
+                    border-radius: 0;
+                }
+            }
+
+            .p-accordion-content {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-accordion-header-link {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-accordion-header:not(.p-highlight) {
+                    .p-accordion-header-link {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+                
+                .p-accordion-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}

package/src/azion/theme-base/components/panel/_card.scss

@@ -0,0 +1,30 @@
+.p-card {
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    box-shadow: $cardShadow;
+    border-radius: $borderRadius;
+
+    .p-card-body {
+        padding: $cardBodyPadding;
+    }
+
+    .p-card-title {
+        font-size: $cardTitleFontSize;
+        font-weight: $cardTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-card-subtitle {
+        font-weight: $cardSubTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+        color: $cardSubTitleColor;
+    }
+
+    .p-card-content {
+        padding: $cardContentPadding;
+    }
+
+    .p-card-footer {
+        padding: $cardFooterPadding;
+    }
+}

package/src/azion/theme-base/components/panel/_divider.scss

@@ -0,0 +1,40 @@
+.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: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}

package/src/azion/theme-base/components/panel/_fieldset.scss

@@ -0,0 +1,51 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus-visible {
+                    @include focused();
+                }
+
+                &:hover {
+                    color: $panelHeaderTextHoverColor;
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}

package/src/azion/theme-base/components/panel/_panel.scss

@@ -0,0 +1,47 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-top: 0 none;
+        
+        &:last-child {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+}

package/src/azion/theme-base/components/panel/_scrollpanel.scss

@@ -0,0 +1,11 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+        transition: $formElementTransition;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}

package/src/azion/theme-base/components/panel/_splitter.scss

@@ -0,0 +1,24 @@
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+        
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+            transition: $formElementTransition;
+            
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}

package/src/azion/theme-base/components/panel/_tabview.scss

@@ -0,0 +1,66 @@
+.p-tabview {
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                  background: $tabviewHeaderActiveBg;
+                  border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus-visible {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}

package/src/azion/theme-base/components/panel/_toolbar.scss

@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}

package/src/azion/theme-widget.scss

@@ -0,0 +1,9 @@
+@import './variables-widget';
+
+.azion {
+  @import './_fonts';
+  @import './theme-base/components.scss';
+  @import './_extensions';
+  @import './custom';
+  transition: background-color 0.3s ease, color 0.3s ease;
+}

package/src/azion/theme.scss

@@ -0,0 +1,9 @@
+@import './variables';
+
+.azion {
+  @import './_fonts';
+  @import './theme-base/components.scss';
+  @import './_extensions';
+  @import './custom';
+  transition: background-color 0.3s ease, color 0.3s ease;
+}