@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/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/primeng-theme/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/primeng-theme/theme-base/components/panel/_scrollpanel.scss

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

package/primeng-theme/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/primeng-theme/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/primeng-theme/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/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/styles-primeng.module';