@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/theme-base/components/misc/_tag.scss

@@ -0,0 +1,40 @@
+@use 'sass:math';
+
+.p-tag {
+  background: $badgeBg;
+  color: $badgeTextColor;
+  font-size: $badgeFontSize;
+  font-weight: $badgeFontWeight;
+  padding: $tagPadding;
+  border-radius: $borderRadius;
+
+  &.p-tag-success {
+    background-color: $successButtonBg;
+    color: $successButtonTextColor;
+  }
+
+  &.p-tag-info {
+    background-color: $infoButtonBg;
+    color: $infoButtonTextColor;
+  }
+
+  &.p-tag-warning {
+    background-color: $warningButtonBg;
+    color: $warningButtonTextColor;
+  }
+
+  &.p-tag-danger {
+    background-color: $dangerButtonBg;
+    color: $dangerButtonTextColor;
+  }
+
+  .p-tag-icon {
+    margin-right: math.div($inlineSpacing, 2);
+    font-size: $badgeFontSize;
+  }
+
+  .p-icon {
+    width: $badgeFontSize;
+    height: $badgeFontSize;
+  }
+}

package/primeng-theme/theme-base/components/misc/_terminal.scss

@@ -0,0 +1,12 @@
+.p-terminal {
+  background: $panelContentBg;
+  color: $panelContentTextColor;
+  border: $panelContentBorder;
+  padding: $panelContentPadding;
+
+  .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $inputTextFontSize;
+  }
+}

package/primeng-theme/theme-base/components/multimedia/_galleria.scss

@@ -0,0 +1,155 @@
+.p-galleria {
+  .p-galleria-close {
+    margin: $galleriaCloseIconMargin;
+    background: $galleriaCloseIconBg;
+    color: $galleriaCloseIconColor;
+    width: $galleriaCloseIconWidth;
+    height: $galleriaCloseIconHeight;
+    transition: $actionIconTransition;
+    border-radius: $galleriaCloseIconBorderRadius;
+
+    .p-galleria-close-icon {
+      font-size: $galleriaCloseIconFontSize;
+    }
+
+    .p-icon-wrapper {
+      .p-icon {
+        width: $galleriaCloseIconFontSize;
+        height: $galleriaCloseIconFontSize;
+      }
+    }
+
+    &:hover {
+      background: $galleriaCloseIconHoverBg;
+      color: $galleriaCloseIconHoverColor;
+    }
+  }
+
+  .p-galleria-item-nav {
+    background: $galleriaItemNavigatorBg;
+    color: $galleriaItemNavigatorColor;
+    width: $galleriaItemNavigatorWidth;
+    height: $galleriaItemNavigatorHeight;
+    transition: $actionIconTransition;
+    border-radius: $galleriaItemNavigatorBorderRadius;
+    margin: $galleriaItemNavigatorMargin;
+
+    .p-galleria-item-prev-icon,
+    .p-galleria-item-next-icon {
+      font-size: $galleriaItemNavigatorFontSize;
+    }
+
+    .p-icon-wrapper {
+      .p-icon {
+        width: $galleriaCloseIconFontSize;
+        height: $galleriaCloseIconFontSize;
+      }
+    }
+
+    &:not(.p-disabled) {
+      &:hover {
+        background: $galleriaItemNavigatorHoverBg;
+        color: $galleriaItemNavigatorHoverColor;
+      }
+    }
+  }
+
+  .p-galleria-caption {
+    background: $galleriaCaptionBg;
+    color: $galleriaCaptionTextColor;
+    padding: $galleriaCaptionPadding;
+  }
+
+  .p-galleria-indicators {
+    padding: $galleriaIndicatorsPadding;
+
+    .p-galleria-indicator {
+      button {
+        background-color: $galleriaIndicatorBg;
+        width: $galleriaIndicatorWidth;
+        height: $galleriaIndicatorHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaIndicatorBorderRadius;
+
+        &:hover {
+          background: $galleriaIndicatorHoverBg;
+        }
+      }
+
+      &.p-highlight {
+        button {
+          background: $highlightBg;
+          color: $highlightTextColor;
+        }
+      }
+    }
+  }
+
+  &.p-galleria-indicators-bottom,
+  &.p-galleria-indicators-top {
+    .p-galleria-indicator {
+      margin-right: $inlineSpacing;
+    }
+  }
+
+  &.p-galleria-indicators-left,
+  &.p-galleria-indicators-right {
+    .p-galleria-indicator {
+      margin-bottom: $inlineSpacing;
+    }
+  }
+
+  &.p-galleria-indicator-onitem {
+    .p-galleria-indicators {
+      background: $galleriaIndicatorsBgOnItem;
+
+      .p-galleria-indicator {
+        button {
+          background: $galleriaIndicatorBgOnItem;
+
+          &:hover {
+            background: $galleriaIndicatorHoverBgOnItem;
+          }
+        }
+
+        &.p-highlight {
+          button {
+            background: $highlightBg;
+            color: $highlightTextColor;
+          }
+        }
+      }
+    }
+  }
+
+  .p-galleria-thumbnail-container {
+    background: $galleriaThumbnailContainerBg;
+    padding: $galleriaThumbnailContainerPadding;
+
+    .p-galleria-thumbnail-prev,
+    .p-galleria-thumbnail-next {
+      margin: $inlineSpacing;
+      background-color: $galleriaThumbnailNavigatorBg;
+      color: $galleriaThumbnailNavigatorColor;
+      width: $galleriaThumbnailNavigatorWidth;
+      height: $galleriaThumbnailNavigatorHeight;
+      transition: $actionIconTransition;
+      border-radius: $galleriaThumbnailNavigatorBorderRadius;
+
+      &:hover {
+        background: $galleriaThumbnailNavigatorHoverBg;
+        color: $galleriaThumbnailNavigatorHoverColor;
+      }
+    }
+
+    .p-galleria-thumbnail-item-content {
+      &:focus-visible {
+        @include focused();
+      }
+    }
+  }
+}
+
+.p-galleria-mask {
+  --maskbg: #{$galleriaMaskBg};
+}

package/primeng-theme/theme-base/components/multimedia/_image.scss

@@ -0,0 +1,49 @@
+.p-image-mask {
+  --maskbg: #{$imageMaskBg};
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: $imagePreviewIndicatorColor;
+  transition: $actionIconTransition;
+}
+
+.p-image-preview-container {
+  &:hover {
+    > .p-image-preview-indicator {
+      background-color: $imagePreviewIndicatorBg;
+    }
+  }
+}
+
+.p-image-toolbar {
+  padding: $imagePreviewToolbarPadding;
+}
+
+.p-image-action.p-link {
+  color: $imagePreviewActionIconColor;
+  background-color: $imagePreviewActionIconBg;
+  width: $imagePreviewActionIconWidth;
+  height: $imagePreviewActionIconHeight;
+  border-radius: $imagePreviewActionIconBorderRadius;
+  transition: $actionIconTransition;
+  margin-right: $inlineSpacing;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    color: $imagePreviewActionIconHoverColor;
+    background-color: $imagePreviewActionIconHoverBg;
+  }
+
+  i {
+    font-size: $imagePreviewActionIconFontSize;
+  }
+
+  .p-icon {
+    width: $imagePreviewActionIconFontSize;
+    height: $imagePreviewActionIconFontSize;
+  }
+}

package/primeng-theme/theme-base/components/overlay/_confirmpopup.scss

@@ -0,0 +1,72 @@
+@use 'sass:list';
+
+.p-confirm-popup {
+  background: $overlayContentBg;
+  color: $panelContentTextColor;
+  border: $overlayContentBorder;
+  border-radius: $borderRadius;
+  box-shadow: $overlayContainerShadow;
+
+  .p-confirm-popup-content {
+    padding: $panelContentPadding;
+  }
+
+  .p-confirm-popup-footer {
+    text-align: right;
+    padding: $panelFooterPadding;
+
+    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 (list.nth($overlayContentBorder, 2) == 'none') {
+      border-color: rgba($overlayContentBg, 0);
+      border-bottom-color: $overlayContentBg;
+    } @else {
+      border-color: rgba(list.nth($overlayContentBorder, 3), 0);
+      border-bottom-color: list.nth($overlayContentBorder, 3);
+    }
+  }
+
+  &.p-confirm-popup-flipped {
+    &::after {
+      border-top-color: $overlayContentBg;
+    }
+
+    &::before {
+      @if (list.nth($overlayContentBorder, 2) == 'none') {
+        border-top-color: $overlayContentBg;
+      } @else {
+        border-top-color: list.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/primeng-theme/theme-base/components/overlay/_dialog.scss

@@ -0,0 +1,69 @@
+.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-icon {
+        width: $primeIconFontSize * 2;
+        height: $primeIconFontSize * 2;
+      }
+    }
+
+    .p-confirm-dialog-message {
+      margin-left: $inlineSpacing * 2;
+    }
+  }
+}

package/primeng-theme/theme-base/components/overlay/_overlaypanel.scss

@@ -0,0 +1,64 @@
+@use 'sass:color';
+@use 'sass:list';
+@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;
+    border-color: rgba($overlayContentBg, 0);
+    border-bottom-color: $overlayContentBg;
+  }
+
+  &::before {
+    border: solid transparent;
+
+    @if (list.nth($overlayContentBorder, 2) == 'none') {
+      border-color: rgba($overlayContentBg, 0);
+      border-bottom-color: color.scale($overlayContentBg, $lightness: -5%);
+    } @else {
+      border-color: rgba(list.nth($overlayContentBorder, 3), 0);
+      border-bottom-color: color.scale(list.nth($overlayContentBorder, 3), $lightness: -5%);
+    }
+  }
+
+  &.p-overlaypanel-flipped {
+    &::after {
+      border-top-color: $overlayContentBg;
+    }
+
+    &::before {
+      @if (list.nth($overlayContentBorder, 2) == 'none') {
+        border-top-color: $overlayContentBg;
+      } @else {
+        border-top-color: list.nth($overlayContentBorder, 3);
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/overlay/_sidebar.scss

@@ -0,0 +1,27 @@
+.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;
+  }
+
+  .p-sidebar-footer {
+    padding: $panelHeaderPadding;
+  }
+}

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

@@ -0,0 +1,119 @@
+.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-accordiontab {
+    .p-accordion-tab {
+      margin-bottom: $accordionSpacing;
+    }
+
+    @if $accordionSpacing == 0 {
+      .p-accordion-header {
+        .p-accordion-header-link {
+          border-radius: 0;
+        }
+      }
+
+      .p-accordion-content {
+        border-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/primeng-theme/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/primeng-theme/theme-base/components/panel/_divider.scss

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