aril 0.0.3 → 0.0.4

package/theme/styles/theme/base/components/panel/_fieldset.scss

@@ -0,0 +1,47 @@
+.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 {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}

package/theme/styles/theme/base/components/panel/_panel.scss

@@ -0,0 +1,63 @@
+.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;
+    }
+
+    .p-panel-icons-end {
+        order: 2;
+        margin-left: auto;
+    }    
+
+    .p-panel-icons-start {
+        order: 0;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-panel-icons-center {
+        order: 2;
+        width:100%;
+        text-align:center;
+    }
+}

package/theme/styles/theme/base/components/panel/_scrollpanel.scss

@@ -0,0 +1,6 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+    }
+}

package/theme/styles/theme/base/components/panel/_splitter.scss

@@ -0,0 +1,19 @@
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}

package/theme/styles/theme/base/components/panel/_tabview.scss

@@ -0,0 +1,82 @@
+.p-tabview {
+    .p-tabview-nav-content {
+        scroll-padding-inline: $buttonIconOnlyWidth;
+    }
+
+    .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-left-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    .p-tabview-right-icon {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-tabview-close {
+        margin-left: $inlineSpacing;
+    }
+
+    .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/theme/styles/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/theme/styles/theme/dark/_extensions.scss

@@ -0,0 +1,120 @@
+@mixin focused-ring($ring-color) {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
+}
+
+@layer primevue {
+    .p-button-label {
+        font-weight: 500;
+    }
+    
+    .p-accordion {
+        .p-accordion-header {
+            .p-accordion-header-link {
+                transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+            }
+        }
+    }
+    
+    .p-tabview {
+        .p-tabview-nav {
+            li {
+                .p-tabview-nav-link {
+                    transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+                }
+            }
+        }
+    }
+    
+    .p-carousel {
+        .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+            background-color: $primaryColor;
+        }
+    }
+    
+    .p-galleria {
+        .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+            background-color: $primaryColor;
+        }
+    }
+    
+    .p-button {
+        &:focus {
+            @include focused-ring(rgba($buttonBg, .7));
+        }
+    
+        &.p-button-secondary:enabled:focus {
+            @include focused-ring(rgba($secondaryButtonBg, .7));
+        }
+    
+        &.p-button-success:enabled:focus {
+            @include focused-ring(rgba($successButtonBg, .7));
+        }
+    
+        &.p-button-info:enabled:focus {
+            @include focused-ring(rgba($infoButtonBg, .7));
+        }
+    
+        &.p-button-warning:enabled:focus {
+            @include focused-ring(rgba($warningButtonBg, .7));
+        }
+    
+        &.p-button-help:enabled:focus {
+            @include focused-ring(rgba($helpButtonBg, .7));
+        }
+    
+        &.p-button-danger:enabled:focus {
+            @include focused-ring(rgba($dangerButtonBg, .7));
+        }
+    }
+    
+    .p-datatable {
+        .p-datatable-tbody {
+            > tr {
+                &.p-datatable-dragpoint-top > td {
+                    box-shadow: inset 0 2px 0 0 $primaryColor;
+                }
+    
+                &.p-datatable-dragpoint-bottom > td {
+                    box-shadow: inset 0 -2px 0 0 $primaryColor;
+                }
+            }
+        }
+    }
+    
+    .p-speeddial-item {
+        &.p-focus > .p-speeddial-action {
+            @include focused-ring(rgba($buttonBg, .7));
+        }
+    }
+
+    .p-toast-message {
+        backdrop-filter: blur(10px);
+    }
+
+    .p-message {
+        .p-message-close {
+            &:hover {
+                background: rgba(255,255,255,.1);
+            }        
+        }
+    }
+
+    .p-toast {
+        .p-toast-message {
+            .p-toast-icon-close {
+                &:hover {
+                    background: rgba(255,255,255,.1);
+                }
+            }
+        }
+    }
+
+    .p-inline-message-text {
+        font-weight: 500;
+    }
+
+    .p-picklist-buttons .p-button,
+    .p-orderlist-controls .p-button {
+        transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+    }
+}