@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/index.scss

@@ -0,0 +1,4 @@
+@import './variables';
+@import './theme-base/components';
+@import './extensions';
+@import './icons';

package/primeng-theme/theme-base/_colors.scss

@@ -0,0 +1,19 @@
+@use 'sass:meta';
+
+:root {
+  @if meta.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/primeng-theme/theme-base/_common.scss

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

package/primeng-theme/theme-base/_components.scss

@@ -0,0 +1,105 @@
+@import './mixins';
+@import './colors';
+
+@import './components/input/editor';
+
+@layer primeng {
+  @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/inputmask';
+  @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/togglebutton';
+  @import './components/input/treeselect';
+
+  //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';
+  @import './components/data/virtualscroller';
+
+  //Panel
+  @import './components/panel/accordion';
+  @import './components/panel/card';
+  @import './components/panel/divider';
+  @import './components/panel/fieldset';
+  @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/slidemenu';
+  @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/chip';
+  @import './components/misc/inplace';
+  @import './components/misc/progressbar';
+  @import './components/misc/scrolltop';
+  @import './components/misc/skeleton';
+  @import './components/misc/tag';
+  @import './components/misc/terminal';
+}

package/primeng-theme/theme-base/_mixins.scss

@@ -0,0 +1,340 @@
+@use 'sass:color';
+@use 'sass:list';
+
+@mixin icon-override($icon) {
+  &::before {
+    content: $icon;
+  }
+}
+
+@mixin focused() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+  @include focused();
+  border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+  border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+  padding: $menuitemPadding;
+  color: $menuitemTextColor;
+  border-radius: $menuitemBorderRadius;
+  transition: $listItemTransition;
+  user-select: none;
+
+  .p-menuitem-text {
+    color: $menuitemTextColor;
+  }
+
+  .p-menuitem-icon {
+    color: $menuitemIconColor;
+    margin-right: $inlineSpacing;
+  }
+
+  .p-submenu-icon {
+    color: $menuitemIconColor;
+  }
+
+  &:not(.p-disabled):hover {
+    background: $menuitemHoverBg;
+
+    .p-menuitem-text {
+      color: $menuitemTextHoverColor;
+    }
+
+    .p-menuitem-icon {
+      color: $menuitemIconHoverColor;
+    }
+
+    .p-submenu-icon {
+      color: $menuitemIconHoverColor;
+    }
+  }
+
+  &:focus {
+    @include focused-listitem();
+  }
+}
+
+@mixin menuitem {
+  > .p-menuitem-content {
+    color: $menuitemTextColor;
+    transition: $listItemTransition;
+    border-radius: $menuitemBorderRadius;
+
+    .p-menuitem-link {
+      color: $menuitemTextColor;
+      padding: $menuitemPadding;
+      user-select: none;
+
+      .p-menuitem-text {
+        color: $menuitemTextColor;
+      }
+
+      .p-menuitem-icon {
+        color: $menuitemIconColor;
+        margin-right: $inlineSpacing;
+      }
+
+      .p-submenu-icon {
+        color: $menuitemIconColor;
+      }
+    }
+  }
+
+  &.p-highlight {
+    > .p-menuitem-content {
+      color: $menuitemTextActiveColor;
+      background: $menuitemActiveBg;
+
+      .p-menuitem-link {
+        .p-menuitem-text {
+          color: $menuitemTextActiveColor;
+        }
+
+        .p-menuitem-icon,
+        .p-submenu-icon {
+          color: $menuitemIconActiveColor;
+        }
+      }
+    }
+
+    &.p-focus {
+      > .p-menuitem-content {
+        background: $menuitemActiveFocusBg;
+      }
+    }
+  }
+
+  &:not(.p-highlight):not(.p-disabled) {
+    &.p-focus {
+      > .p-menuitem-content {
+        color: $menuitemTextFocusColor;
+        background: $menuitemFocusBg;
+
+        .p-menuitem-link {
+          .p-menuitem-text {
+            color: $menuitemTextFocusColor;
+          }
+
+          .p-menuitem-icon,
+          .p-submenu-icon {
+            color: $menuitemIconFocusColor;
+          }
+        }
+      }
+    }
+
+    > .p-menuitem-content {
+      &:hover {
+        color: $menuitemTextHoverColor;
+        background: $menuitemHoverBg;
+
+        .p-menuitem-link {
+          .p-menuitem-text {
+            color: $menuitemTextHoverColor;
+          }
+
+          .p-menuitem-icon,
+          .p-submenu-icon {
+            color: $menuitemIconHoverColor;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin horizontal-rootmenuitem-link {
+  padding: $horizontalMenuRootMenuitemPadding;
+  color: $horizontalMenuRootMenuitemTextColor;
+  border-radius: $horizontalMenuRootMenuitemBorderRadius;
+  transition: $listItemTransition;
+  user-select: none;
+
+  .p-menuitem-text {
+    color: $horizontalMenuRootMenuitemTextColor;
+  }
+
+  .p-menuitem-icon {
+    color: $horizontalMenuRootMenuitemIconColor;
+    margin-right: $inlineSpacing;
+  }
+
+  .p-submenu-icon {
+    color: $horizontalMenuRootMenuitemIconColor;
+    margin-left: $inlineSpacing;
+  }
+
+  &:not(.p-disabled):hover {
+    background: $horizontalMenuRootMenuitemHoverBg;
+
+    .p-menuitem-text {
+      color: $horizontalMenuRootMenuitemTextHoverColor;
+    }
+
+    .p-menuitem-icon {
+      color: $horizontalMenuRootMenuitemIconHoverColor;
+    }
+
+    .p-submenu-icon {
+      color: $horizontalMenuRootMenuitemIconHoverColor;
+    }
+  }
+
+  &:focus {
+    @include focused-listitem();
+  }
+}
+
+@mixin horizontal-rootmenuitem {
+  > .p-menuitem-content {
+    color: $horizontalMenuRootMenuitemTextColor;
+    transition: $listItemTransition;
+    border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+    .p-menuitem-link {
+      padding: $horizontalMenuRootMenuitemPadding;
+      user-select: none;
+
+      .p-menuitem-text {
+        color: $horizontalMenuRootMenuitemTextColor;
+      }
+
+      .p-menuitem-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-right: $inlineSpacing;
+      }
+
+      .p-submenu-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-left: $inlineSpacing;
+      }
+    }
+  }
+
+  &:not(.p-highlight):not(.p-disabled) {
+    > .p-menuitem-content {
+      &:hover {
+        color: $horizontalMenuRootMenuitemTextHoverColor;
+        background: $horizontalMenuRootMenuitemHoverBg;
+
+        .p-menuitem-link {
+          .p-menuitem-text {
+            color: $horizontalMenuRootMenuitemTextHoverColor;
+          }
+
+          .p-menuitem-icon,
+          .p-submenu-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin placeholder {
+  ::placeholder {
+    @content;
+  }
+}
+
+@mixin scaledPadding($val, $scale) {
+  padding: list.nth($val, 1) * $scale list.nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+  font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+  .p-submenu-list {
+    .p-menuitem {
+      .p-menuitem-content {
+        .p-menuitem-link {
+          padding-left: $val * ($index + 1);
+        }
+      }
+      @if $index < $length {
+        @include nested-submenu-indents($val, $index + 2, $length);
+      }
+    }
+  }
+}
+
+@mixin action-icon($enabled: true) {
+  width: $actionIconWidth;
+  height: $actionIconHeight;
+  color: $actionIconColor;
+  border: $actionIconBorder;
+  background: $actionIconBg;
+  border-radius: $actionIconBorderRadius;
+  transition: $actionIconTransition;
+
+  &:enabled:hover {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+  }
+
+  &:focus-visible {
+    @include focused();
+  }
+}
+
+@function tint($color, $percentage) {
+  @return color.mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return color.mix(#000, $color, $percentage);
+}
+
+@mixin button-states {
+  // <button> and <a> tags support :enabled selector.
+
+  &:enabled,
+  &:not(button):not(a):not(.p-disabled) {
+    @content;
+  }
+}
+
+@mixin focused-inset() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: inset $focusShadow;
+}
+
+@mixin menuitem-badge {
+  background: $badgeBg;
+  color: $badgeTextColor;
+  font-size: $badgeFontSize;
+  font-weight: $badgeFontWeight;
+  min-width: $badgeMinWidth;
+  height: $badgeHeight;
+  line-height: $badgeHeight;
+  border-radius: $borderRadius;
+  margin-left: $inlineSpacing;
+  padding-left: $inlineSpacing;
+  padding-right: $inlineSpacing;
+}