@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/theme-base/components/input/_chips.scss

@@ -0,0 +1,66 @@
+@use 'sass:list';
+@use 'sass:math';
+
+.p-chips {
+  &:not(.p-disabled):hover {
+    .p-chips-multiple-container {
+      border-color: $inputHoverBorderColor;
+    }
+  }
+
+  &:not(.p-disabled).p-focus {
+    .p-chips-multiple-container {
+      @include focused-input();
+    }
+  }
+
+  .p-chips-multiple-container {
+    padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
+    gap: $inlineSpacing;
+
+    .p-chips-token {
+      padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
+      margin-right: $inlineSpacing;
+      background: $chipBg;
+      color: $chipTextColor;
+      border-radius: $chipBorderRadius;
+
+      &.p-focus {
+        background: $chipFocusBg;
+        color: $chipFocusTextColor;
+      }
+
+      .p-chips-token-icon {
+        margin-left: $inlineSpacing;
+      }
+    }
+
+    .p-chips-input-token {
+      padding: math.div(list.nth($inputPadding, 1), 2) 0;
+
+      input {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-size: inherit;
+        color: $textColor;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
+  @include invalid-input();
+}
+
+p-chips.p-chips-clearable {
+  .p-inputtext {
+    padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+  }
+
+  .p-chips-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2);
+  }
+}

package/primeng-theme/theme-base/components/input/_colorpicker.scss

@@ -0,0 +1,19 @@
+.p-colorpicker-preview,
+.p-fluid .p-colorpicker-preview.p-inputtext {
+  width: $colorPickerPreviewWidth;
+  height: $colorPickerPreviewHeight;
+}
+
+.p-colorpicker-panel {
+  background: $colorPickerBg;
+  border: $colorPickerBorder;
+
+  .p-colorpicker-color-handle,
+  .p-colorpicker-hue-handle {
+    border-color: $colorPickerHandleColor;
+  }
+}
+
+.p-colorpicker-overlay-panel {
+  box-shadow: $inputOverlayShadow;
+}

package/primeng-theme/theme-base/components/input/_dropdown.scss

@@ -0,0 +1,149 @@
+@use 'sass:list';
+
+.p-dropdown {
+  background: $inputBg;
+  border: $inputBorder;
+  transition: $formElementTransition;
+  border-radius: $borderRadius;
+
+  &:not(.p-disabled):hover {
+    border-color: $inputHoverBorderColor;
+  }
+
+  &:not(.p-disabled).p-focus {
+    @include focused-input();
+  }
+
+  &.p-dropdown-clearable {
+    .p-dropdown-label {
+      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+    }
+  }
+
+  .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+
+    &.p-placeholder {
+      color: $inputPlaceholderTextColor;
+    }
+
+    &:focus,
+    &:enabled:focus {
+      outline: 0 none;
+      box-shadow: none;
+    }
+  }
+
+  .p-dropdown-trigger {
+    background: transparent;
+    color: $inputIconColor;
+    width: $inputGroupAddOnMinWidth;
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+  }
+
+  .p-dropdown-clear-icon {
+    color: $inputIconColor;
+    right: $inputGroupAddOnMinWidth;
+  }
+
+  &.p-invalid.p-component {
+    @include invalid-input();
+  }
+}
+
+.p-dropdown-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-dropdown-header {
+    padding: $inputListHeaderPadding;
+    border-bottom: $inputListHeaderBorder;
+    color: $inputListHeaderTextColor;
+    background: $inputOverlayHeaderBg;
+    margin: $inputListHeaderMargin;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-dropdown-filter {
+      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+      margin-right: -1 * (list.nth($inputPadding, 2) + $primeIconFontSize);
+    }
+
+    .p-dropdown-filter-icon {
+      right: list.nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
+
+  .p-dropdown-items {
+    padding: $inputListPadding;
+
+    .p-dropdown-item {
+      margin: $inputListItemMargin;
+      padding: $inputListItemPadding;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+
+      &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+          color: $inputListItemTextFocusColor;
+          background: $inputListItemFocusBg;
+        }
+
+        &:hover {
+          color: $inputListItemTextHoverColor;
+          background: $inputListItemHoverBg;
+        }
+      }
+    }
+
+    .p-dropdown-item-group {
+      margin: $submenuHeaderMargin;
+      padding: $submenuHeaderPadding;
+      color: $submenuHeaderTextColor;
+      background: $submenuHeaderBg;
+      font-weight: $submenuHeaderFontWeight;
+    }
+
+    .p-dropdown-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+    }
+  }
+}
+
+.p-input-filled {
+  .p-dropdown {
+    background: $inputFilledBg;
+
+    &:not(.p-disabled):hover {
+      background-color: $inputFilledHoverBg;
+    }
+
+    &:not(.p-disabled).p-focus {
+      background-color: $inputFilledFocusBg;
+
+      .p-inputtext {
+        background-color: transparent;
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_editor.scss

@@ -0,0 +1,122 @@
+.p-editor-container {
+  .p-editor-toolbar {
+    background: $editorToolbarBg;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    &.ql-snow {
+      border: $editorToolbarBorder;
+
+      .ql-stroke {
+        stroke: $editorToolbarIconColor;
+      }
+
+      .ql-fill {
+        fill: $editorToolbarIconColor;
+      }
+
+      .ql-picker {
+        .ql-picker-label {
+          border: 0 none;
+          color: $editorToolbarIconColor;
+
+          &:hover {
+            color: $editorToolbarIconHoverColor;
+
+            .ql-stroke {
+              stroke: $editorToolbarIconHoverColor;
+            }
+
+            .ql-fill {
+              fill: $editorToolbarIconHoverColor;
+            }
+          }
+        }
+
+        &.ql-expanded {
+          .ql-picker-label {
+            color: $editorToolbarIconHoverColor;
+
+            .ql-stroke {
+              stroke: $editorToolbarIconHoverColor;
+            }
+
+            .ql-fill {
+              fill: $editorToolbarIconHoverColor;
+            }
+          }
+
+          .ql-picker-options {
+            background: $inputOverlayBg;
+            border: $inputOverlayBorder;
+            box-shadow: $inputOverlayShadow;
+            border-radius: $borderRadius;
+            padding: $inputListPadding;
+
+            .ql-picker-item {
+              color: $inputListItemTextColor;
+
+              &:hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+              }
+            }
+          }
+
+          &:not(.ql-icon-picker) {
+            .ql-picker-item {
+              padding: $inputListItemPadding;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .p-editor-content {
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+
+    &.ql-snow {
+      border: $editorContentBorder;
+    }
+
+    .ql-editor {
+      background: $inputBg;
+      color: $inputTextColor;
+      border-bottom-right-radius: $borderRadius;
+      border-bottom-left-radius: $borderRadius;
+    }
+  }
+
+  .ql-snow.ql-toolbar button:hover,
+  .ql-snow.ql-toolbar button:focus {
+    color: $editorToolbarIconHoverColor;
+
+    .ql-stroke {
+      stroke: $editorToolbarIconHoverColor;
+    }
+
+    .ql-fill {
+      fill: $editorToolbarIconHoverColor;
+    }
+  }
+
+  .ql-snow.ql-toolbar button.ql-active,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+    color: $editorIconActiveColor;
+
+    .ql-stroke {
+      stroke: $editorIconActiveColor;
+    }
+
+    .ql-fill {
+      fill: $editorIconActiveColor;
+    }
+
+    .ql-picker-label {
+      color: $editorIconActiveColor;
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_inputgroup.scss

@@ -0,0 +1,75 @@
+.p-inputgroup-addon {
+  background: $inputGroupBg;
+  color: $inputGroupTextColor;
+  border-top: $inputBorder;
+  border-left: $inputBorder;
+  border-bottom: $inputBorder;
+  padding: $inputPadding;
+  min-width: $inputGroupAddOnMinWidth;
+
+  &:last-child {
+    border-right: $inputBorder;
+  }
+}
+
+.p-inputgroup {
+  > .p-component,
+  > .p-element,
+  > .p-inputwrapper > .p-component > .p-inputtext,
+  > .p-float-label > .p-component {
+    border-radius: 0;
+    margin: 0;
+
+    + .p-inputgroup-addon {
+      border-left: 0 none;
+    }
+
+    &:focus {
+      z-index: 1;
+
+      ~ label {
+        z-index: 1;
+      }
+    }
+  }
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-component,
+.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
+  border-top-left-radius: $borderRadius;
+  border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+  border-top-left-radius: $borderRadius;
+  border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child,
+.p-inputgroup > .p-inputwrapper:last-child > .p-component,
+.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
+  border-top-right-radius: $borderRadius;
+  border-bottom-right-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+  border-top-right-radius: $borderRadius;
+  border-bottom-right-radius: $borderRadius;
+}
+
+.p-fluid {
+  .p-inputgroup {
+    .p-button {
+      width: auto;
+
+      &.p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_inputmask.scss

@@ -0,0 +1,17 @@
+@use 'sass:list';
+@use 'sass:math';
+
+p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
+  @include invalid-input();
+}
+
+p-inputmask.p-inputmask-clearable {
+  .p-inputtext {
+    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-inputmask-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2);
+  }
+}

package/primeng-theme/theme-base/components/input/_inputnumber.scss

@@ -0,0 +1,28 @@
+@use 'sass:list';
+
+p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
+  @include invalid-input();
+}
+
+p-inputnumber.p-inputnumber-clearable {
+  .p-inputnumber-input {
+    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-inputnumber-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2);
+  }
+
+  .p-inputnumber-buttons-stacked {
+    .p-inputnumber-clear-icon {
+      right: $buttonIconOnlyWidth + list.nth($inputPadding, 2);
+    }
+  }
+
+  .p-inputnumber-buttons-horizontal {
+    .p-inputnumber-clear-icon {
+      right: $buttonIconOnlyWidth + list.nth($inputPadding, 2);
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_inputswitch.scss

@@ -0,0 +1,55 @@
+@use 'sass:math';
+
+.p-inputswitch {
+  width: $inputSwitchWidth;
+  height: $inputSwitchHeight;
+
+  .p-inputswitch-slider {
+    background: $inputSwitchSliderOffBg;
+    transition: $formElementTransition;
+    border-radius: $inputSwitchBorderRadius;
+
+    &::before {
+      background: $inputSwitchHandleOffBg;
+      width: $inputSwitchHandleWidth;
+      height: $inputSwitchHandleHeight;
+      left: $inputSwitchSliderPadding;
+      margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+      border-radius: $inputSwitchHandleBorderRadius;
+      transition-duration: $transitionDuration;
+    }
+  }
+
+  &.p-focus {
+    .p-inputswitch-slider {
+      @include focused();
+    }
+  }
+
+  &:not(.p-disabled):hover {
+    .p-inputswitch-slider {
+      background: $inputSwitchSliderOffHoverBg;
+    }
+  }
+
+  &.p-inputswitch-checked {
+    .p-inputswitch-slider {
+      background: $inputSwitchSliderOnBg;
+
+      &::before {
+        background: $inputSwitchHandleOnBg;
+        transform: translateX($inputSwitchHandleWidth);
+      }
+    }
+
+    &:not(.p-disabled):hover {
+      .p-inputswitch-slider {
+        background: $inputSwitchSliderOnHoverBg;
+      }
+    }
+  }
+}
+
+p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+  @include invalid-input();
+}

package/primeng-theme/theme-base/components/input/_inputtext.scss

@@ -0,0 +1,102 @@
+@use 'sass:list';
+
+.p-inputtext {
+  font-family: var(--font-family);
+  font-feature-settings: var(--font-feature-settings, normal);
+  font-size: $inputTextFontSize;
+  color: $inputTextColor;
+  background: $inputBg;
+  padding: $inputPadding;
+  border: $inputBorder;
+  transition: $formElementTransition;
+  appearance: none;
+  border-radius: $borderRadius;
+
+  &:enabled:hover {
+    border-color: $inputHoverBorderColor;
+  }
+
+  &:enabled:focus {
+    @include focused-input();
+  }
+
+  &.ng-dirty.ng-invalid {
+    @include invalid-input();
+  }
+
+  &.p-inputtext-sm {
+    @include scaledFontSize($inputTextFontSize, $scaleSM);
+    @include scaledPadding($inputPadding, $scaleSM);
+  }
+
+  &.p-inputtext-lg {
+    @include scaledFontSize($inputTextFontSize, $scaleLG);
+    @include scaledPadding($inputPadding, $scaleLG);
+  }
+}
+
+.p-float-label > label {
+  left: list.nth($inputPadding, 2);
+  color: $inputPlaceholderTextColor;
+  transition-duration: $transitionDuration;
+}
+
+.p-float-label > .ng-invalid.ng-dirty + label {
+  color: $inputErrorBorderColor;
+}
+
+.p-input-icon-left > .p-icon-wrapper.p-icon,
+.p-input-icon-left > i:first-of-type {
+  left: list.nth($inputPadding, 2);
+  color: $inputIconColor;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-left.p-float-label > label {
+  left: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-right > .p-icon-wrapper,
+.p-input-icon-right > i:last-of-type {
+  right: list.nth($inputPadding, 2);
+  color: $inputIconColor;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+@include placeholder {
+  color: $inputPlaceholderTextColor;
+}
+
+.p-input-filled {
+  .p-inputtext {
+    background-color: $inputFilledBg;
+
+    &:enabled:hover {
+      background-color: $inputFilledHoverBg;
+    }
+
+    &:enabled:focus {
+      background-color: $inputFilledFocusBg;
+    }
+  }
+}
+
+.p-inputtext-sm {
+  .p-inputtext {
+    @include scaledFontSize($inputTextFontSize, $scaleSM);
+    @include scaledPadding($inputPadding, $scaleSM);
+  }
+}
+
+.p-inputtext-lg {
+  .p-inputtext {
+    @include scaledFontSize($inputTextFontSize, $scaleLG);
+    @include scaledPadding($inputPadding, $scaleLG);
+  }
+}