@swisspost/design-system-styles-primeng 10.0.0-next.60 → 10.0.0-next.76

package/README.md

@@ -1,52 +1,36 @@
-# Design System Styles for PrimeNG
+# Swiss Post Styles PrimeNG
 
 ![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
 
-Swiss Post styles for PrimeNG datatable.
+Swiss Post theme for the PrimeNG Datatable component.
 
 ## Documentation
 
-The PrimeNG styles are documented in the Design System storybook.
-
-[Styles for PrimeNG Documentation](https://design-system.post.ch/?path=/docs/d2112bed-c611-4098-a1ad-e654f7d622e7--docs)
+- Technical docs: [Swiss Post Design System](https://design-system.post.ch/?path=/docs/d2112bed-c611-4098-a1ad-e654f7d622e7--docs)
 
 ## Installation
 
-To install the package in a project run:
+Install the Theme PrimeNG package
 
 ```bash
-npm install primeng @swisspost/design-system-styles-primeng
+npm install @swisspost/design-system-styles-primeng
 ```
 
-The PrimeNG theme and core styles are the necessary, as well as the Swiss Post styles.
-All three should be imported in the main style file of your Angular project, usually `src/styles.scss`.
-
-Be sure to assign a layer to the Design System styles to avoid interference.
-
-### With styles.css
+## Usage
 
-```scss
-@use '@swisspost/design-system-styles-primeng/primeng-theme';
-@use 'primeng/resources/primeng.css';
+To use the theme, simply import it from the package and add it in the `app.config.ts` file of your project.
 
-@layer design-system-styles, primeng;
+```javascript
+import { providePrimeNG } from 'primeng/config';
+import SwissPostPreset from '@swisspost/design-system-styles-primeng';
 
-// refer to the @swisspost/design-system-styles installation guidelines to know which bundle-name and extension to choose for your project
-@import '@swisspost/design-system-styles/<bundle-name>.<extension>' layer(design-system-styles);
+export const appConfig: ApplicationConfig = {
+    providers: [
+        providePrimeNG({
+            theme: {
+                preset: SwissPostPreset
+            }
+        })
+    ]
+};
 ```
-
-## Contribute
-
-[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)
-
-Considering supporting the Swiss Post Design System with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Learn how you can contribute to this project in the [header contribution guidelines](./CONTRIBUTING.md) and also take a look at the [general contribution guidelines](/CONTRIBUTING.md).
-
-For any questions regarding the pattern library, you can reach out on the [discussions page](https://github.com/swisspost/design-system/discussions).
-
-In order to keep our community open and inclusive, we expect you to read and follow our [Code of Conduct](/CODE_OF_CONDUCT.md).
-
-## License
-
-Software contained in this repository is published by the Swiss Post Ltd. under the [Apache 2.0 License](./LICENSE).
-
-© 2024 Swiss Post, Ltd.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { swissPostPreset } from './theme';

package/dist/index.js

@@ -0,0 +1 @@
+export { swissPostPreset } from './theme';

package/dist/theme.d.ts

@@ -0,0 +1 @@
+export declare const swissPostPreset: import("@primeuix/themes/types").Preset;

package/dist/theme.js

@@ -0,0 +1,300 @@
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+export const swissPostPreset = definePreset(Aura, {
+    semantic: {
+        focusRing: {
+            width: 'var(--post-focus-outline-width)',
+            style: 'var(--post-focus-border-style)',
+            color: 'var(--post-focus-outline-color)',
+            offset: 'var(--post-focus-outline-offset)',
+        },
+    },
+    components: {
+        select: {
+            root: {
+                background: 'var(--post-scheme-color-interactive-input-enabled-bg)',
+                disabledBackground: 'var(--post-scheme-color-interactive-input-disabled-bg)',
+                filledBackground: 'var(--post-scheme-color-interactive-input-enabled-bg)',
+                filledHoverBackground: 'var(--post-scheme-color-interactive-input-hover-bg)',
+                filledFocusBackground: 'var(--post-scheme-color-interactive-input-enabled-bg)',
+                borderColor: 'var(--post-scheme-color-interactive-input-enabled-border)',
+                focusBorderColor: 'var(--post-scheme-color-interactive-input-enabled-border)',
+                hoverBorderColor: 'var(--post-scheme-color-interactive-input-hover-border)',
+                color: 'var(--post-scheme-color-interactive-input-enabled-fg)',
+                disabledColor: 'var(--post-scheme-color-interactive-input-disabled-fg)',
+                borderRadius: 'var(--post-core-dimension-2)',
+            },
+            dropdown: {
+                width: 'var(--post-device-sizing-notification-5)',
+                color: 'var(--post-scheme-color-interactive-input-enabled-fg)',
+            },
+            option: {
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                focusColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                focusBackground: 'var(--post-scheme-color-palette-bg-2)',
+                selectedBackground: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                selectedFocusBackground: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                selectedColor: 'var(--post-scheme-color-palette-bg-1)',
+                selectedFocusColor: 'var(--post-scheme-color-palette-bg-1)',
+            },
+        },
+        button: {
+            root: {
+                borderRadius: 'var(--post-device-border-radius-round)',
+                label: {
+                    fontWeight: '700',
+                },
+            },
+        },
+        inputtext: {
+            root: {
+                background: 'var(--post-scheme-color-interactive-input-enabled-bg)',
+                disabledBackground: 'var(--post-scheme-color-interactive-input-disabled-bg)',
+                filledBackground: 'var(--post-scheme-color-interactive-input-enabled-bg)',
+                filledHoverBackground: 'var(--post-scheme-color-interactive-input-hover-bg)',
+                filledFocusBackground: 'var(--post-scheme-color-interactive-input-enabled-bg)',
+                borderColor: 'var(--post-scheme-color-interactive-input-enabled-border)',
+                focusBorderColor: 'var(--post-scheme-color-interactive-input-enabled-border)',
+                hoverBorderColor: 'var(--post-scheme-color-interactive-input-hover-border)',
+                color: 'var(--post-scheme-color-interactive-input-enabled-fg)',
+                disabledColor: 'var(--post-scheme-color-interactive-input-disabled-fg)',
+                borderRadius: 'var(--post-core-dimension-2)',
+            },
+        },
+        checkbox: {
+            root: {
+                borderRadius: 'var(--post-core-dimension-2)',
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                focusBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                hoverBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedHoverBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                background: 'transparent',
+                checkedBackground: 'transparent',
+                checkedHoverBackground: 'transparent',
+                disabledBackground: 'transparent',
+                filledBackground: 'transparent',
+                checkedDisabledBorderColor: 'var(--post-scheme-color-interactive-primary-disabled-fg4)',
+                width: 'var(--post-device-sizing-interactive-icon-size4)',
+                height: 'var(--post-device-sizing-interactive-icon-size4)',
+            },
+            icon: {
+                color: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedHoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                disabledColor: 'var(--post-scheme-color-interactive-primary-disabled-fg4)',
+            },
+        },
+        radiobutton: {
+            root: {
+                width: 'var(--post-device-sizing-interactive-icon-size4)',
+                height: 'var(--post-device-sizing-interactive-icon-size4)',
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                focusBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                hoverBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedHoverBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedDisabledBorderColor: 'var(--post-scheme-color-interactive-primary-disabled-fg4)',
+                background: 'transparent',
+                checkedBackground: 'transparent',
+                checkedHoverBackground: 'transparent',
+                disabledBackground: 'transparent',
+                filledBackground: 'transparent',
+            },
+            icon: {
+                size: 'var(--post-device-sizing-icon-8)',
+                checkedColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke)',
+                checkedHoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                disabledColor: 'var(--post-scheme-color-interactive-primary-disabled-fg4)',
+            },
+        },
+        datatable: {
+            header: {
+                background: 'var(--post-scheme-color-palette-bg-2)',
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            columnTitle: {
+                fontWeight: '700',
+            },
+            columnFooter: {
+                fontWeight: '700',
+            },
+            headerCell: {
+                background: 'var(--post-scheme-color-palette-bg-2)',
+                hoverBackground: 'var(--post-scheme-color-palette-bg-2)',
+                selectedBackground: 'var(--post-scheme-color-palette-bg-2)',
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                hoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                selectedColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                focusRing: {
+                    color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                    width: 'var(--post-focus-outline-width)',
+                },
+            },
+            row: {
+                background: 'var(--post-scheme-color-palette-bg-1)',
+                hoverBackground: 'var(--post-scheme-color-palette-bg-2)',
+                selectedBackground: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                hoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                selectedColor: 'var(--post-scheme-color-palette-bg-1)',
+                focusRing: {
+                    color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                    width: 'var(--post-focus-outline-width)',
+                },
+            },
+            bodyCell: {
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+                selectedBorderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+            },
+            footerCell: {
+                background: 'var(--post-scheme-color-palette-bg-1)',
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            footer: {
+                background: 'var(--post-scheme-color-palette-bg-2)',
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            dropPoint: {
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            resizeIndicator: {
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            sortIcon: {
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                hoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            rowToggleButton: {
+                hoverBackground: 'var(--post-scheme-color-palette-bg-2)',
+                selectedHoverBackground: 'var(--post-scheme-color-palette-bg-2)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                hoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                selectedHoverColor: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                focusRing: {
+                    color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                    width: 'var(--post-focus-outline-width)',
+                },
+            },
+            filter: {},
+            paginatorTop: {
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+            },
+            paginatorBottom: {
+                borderColor: 'var(--post-scheme-color-interactive-primary-enabled-stroke4)',
+            },
+        },
+        paginator: {
+            root: {
+                borderRadius: 'var(--post-device-border-radius-2)',
+                background: 'var(--post-scheme-color-palette-bg-1)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            currentPageReport: {
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+            },
+            navButton: {
+                selectedBackground: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                color: 'var(--post-scheme-color-interactive-primary-enabled-fg1)',
+                selectedColor: 'var(--post-scheme-color-interactive-primary-selected-fg3)',
+            },
+        },
+    },
+    // Overrides that are not doable with the components tokens
+    css: () => `
+    .p-datatable .p-datatable-tbody > tr > td,
+    .p-datatable .p-datatable-thead > tr > th,
+    .p-paginator-current {
+      font-size: var(--post-device-font-size-9);
+    }
+
+    .p-datatable.p-datatable-striped tbody.p-datatable-tbody > tr:nth-child(even) {
+      background-color: var(--post-scheme-color-palette-bg-2);
+    }
+
+    .p-datatable.p-datatable-striped tbody.p-datatable-tbody > tr:nth-child(odd) {
+      background-color: var(--post-scheme-color-palette-bg-1);
+    }
+
+    .p-datatable {
+      border: 1px solid var(--post-scheme-color-interactive-primary-enabled-stroke4);
+      border-radius: var(--post-device-border-radius-2);
+    }
+
+    .p-datatable .p-datatable-header {
+      border-start-start-radius: var(--post-device-border-radius-2);
+      border-start-end-radius: var(--post-device-border-radius-2);
+    }
+
+    .p-datatable:not(:has(.p-datatable-header)) .p-datatable-thead > tr:first-child > th:first-child {
+      border-start-start-radius: var(--post-device-border-radius-2);
+    }
+
+    .p-datatable:not(:has(.p-datatable-header)) .p-datatable-thead > tr:first-child > th:last-child {
+      border-start-end-radius: var(--post-device-border-radius-2);
+    }
+
+    .p-datatable:not(:has(p-paginator)) .p-datatable-tbody:last-child > tr:last-child > td {
+      border-color: transparent;
+    }
+
+    .p-datatable:not(:has(p-paginator)) .p-datatable-tbody:last-child > tr:last-child > td:first-child {
+      border-end-start-radius: var(--post-device-border-radius-2);
+    }
+
+    .p-datatable:not(:has(p-paginator)) .p-datatable-tbody:last-child > tr:last-child > td:last-child {
+      border-end-end-radius: var(--post-device-border-radius-2);
+    }
+
+    p-button .p-button,
+    p-button .p-button:not(:disabled):hover,
+    p-select.p-select,
+    input.p-inputtext,
+    p-checkbox .p-checkbox-box,
+    p-radiobutton .p-radiobutton-box {
+      border-width: var(--post-device-border-width-default);
+    }
+
+    p-button .p-button {
+      border-color: var(--post-scheme-color-interactive-button-primary-enabled-stroke);
+      background-color: var(--post-scheme-color-interactive-button-primary-enabled-bg);
+      color: var(--post-scheme-color-interactive-button-primary-enabled-fg);
+    }
+
+    p-button .p-button:not(:disabled):hover {
+      border-color: var(--post-scheme-color-interactive-button-primary-hover-stroke);
+      background-color: var(--post-scheme-color-interactive-button-primary-hover-bg);
+      color: var(--post-scheme-color-interactive-button-primary-hover-fg);
+    }
+
+    p-button .p-button-text.p-button-secondary,
+    p-button .p-button-text.p-button-info {
+      border-color: var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);
+      background-color: var(--post-scheme-color-interactive-button-tertiary-enabled-bg);
+      color: var(--post-scheme-color-interactive-button-tertiary-enabled-fg);
+    }
+
+    p-button .p-button-text.p-button-secondary:not(:disabled):hover,
+    p-button .p-button-text.p-button-info:not(:disabled):hover {
+      border-color: var(--post-scheme-color-interactive-button-tertiary-hover-stroke);
+      background-color: var(--post-scheme-color-interactive-button-tertiary-hover-bg);
+      color: var(--post-scheme-color-interactive-button-tertiary-hover-fg);
+    }
+
+    p-button .p-button-outlined {
+      border-color: var(--post-scheme-color-interactive-button-secondary-enabled-stroke);
+      background-color: var(--post-scheme-color-interactive-button-secondary-enabled-bg);
+      color: var(--post-scheme-color-interactive-button-secondary-enabled-fg);
+    }
+
+    p-button .p-button-outlined:not(:disabled):hover {
+      border-color: var(--post-scheme-color-interactive-button-secondary-hover-stroke);
+      background-color: var(--post-scheme-color-interactive-button-secondary-hover-bg);
+      color: var(--post-scheme-color-interactive-button-secondary-hover-fg);
+    }
+  `,
+});

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@swisspost/design-system-styles-primeng",
-  "version": "10.0.0-next.60",
-  "description": "Swiss Post styles for PrimeNG datatable.",
+  "version": "10.0.0-next.76",
+  "description": "The Swiss Post styles for PrimeNG datatable",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
@@ -12,37 +14,37 @@
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
+  "files": [
+    "dist",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
   "publishConfig": {
-    "directory": "../../dist/styles-primeng",
     "access": "public",
     "linkDirectory": true
   },
+  "private": false,
   "peerDependencies": {
-    "primeng": "^19.0.0"
+    "primeng": "^21.0.0"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "10.0.0-next.60",
+    "@primeuix/themes": "2.0.3",
+    "@swisspost/design-system-styles": "10.0.0-next.76",
     "tslib": "2.8.1"
   },
-  "sideEffects": false,
+  "devDependencies": {
+    "typescript": "5.9.3"
+  },
   "keywords": [
-    "scss",
+    "design-system",
     "primeng",
     "datatable",
     "angular",
-    "design-system",
     "ui",
     "frontend"
   ],
-  "module": "fesm2022/swisspost-design-system-styles-primeng.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/swisspost-design-system-styles-primeng.mjs"
-    }
+  "scripts": {
+    "build": "npx tsc"
   }
 }

package/fesm2022/swisspost-design-system-styles-primeng.mjs

@@ -1,27 +0,0 @@
-import * as i0 from '@angular/core';
-import { NgModule } from '@angular/core';
-
-class StylesPrimengModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: StylesPrimengModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: StylesPrimengModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: StylesPrimengModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: StylesPrimengModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [],
-                    exports: [],
-                }]
-        }] });
-
-/*
- * Public API Surface of styles-primeng
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { StylesPrimengModule };
-//# sourceMappingURL=swisspost-design-system-styles-primeng.mjs.map

package/fesm2022/swisspost-design-system-styles-primeng.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"swisspost-design-system-styles-primeng.mjs","sources":["../../../projects/styles-primeng/src/lib/styles-primeng.module.ts","../../../projects/styles-primeng/src/public-api.ts","../../../projects/styles-primeng/src/swisspost-design-system-styles-primeng.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\n@NgModule({\n  declarations: [],\n  imports: [],\n  exports: [],\n})\nexport class StylesPrimengModule {}\n","/*\n * Public API Surface of styles-primeng\n */\n\nexport * from './lib/styles-primeng.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAOa,mBAAmB,CAAA;+GAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAnB,mBAAmB,EAAA,CAAA,CAAA;gHAAnB,mBAAmB,EAAA,CAAA,CAAA;;4FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,EAAE;AAChB,oBAAA,OAAO,EAAE,EAAE;AACX,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACND;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@swisspost/design-system-styles-primeng" />
-export * from './public-api';

package/lib/styles-primeng.module.d.ts

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class StylesPrimengModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<StylesPrimengModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StylesPrimengModule, never, never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<StylesPrimengModule>;
-}

package/primeng-theme/_extensions.scss

@@ -1,164 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-@use '@swisspost/design-system-styles/tokens/utilities';
-@use '@swisspost/design-system-styles/functions/tokens';
-
-tokens.$default-map: utilities.$post-spacing;
-
-.p-datatable-wrapper {
-  overflow: initial;
-}
-
-.p-datatable {
-  .p-datatable-thead > tr > th {
-    gap: tokens.get('utility-gap-8');
-  }
-
-  .p-sortable-column {
-    &.p-highlight:hover {
-      color: post.$black;
-    }
-
-    p-sorticon {
-      display: inline-flex;
-      align-items: center;
-      height: 1.5rem;
-      transform: translateY(25%);
-    }
-
-    sortalticon,
-    sortamountupalticon,
-    sortamountdownicon {
-      height: 1.5rem;
-      width: 1.5rem;
-    }
-  }
-
-  p-columnfilter {
-    margin-inline: tokens.get('utility-gap-8');
-    height: 1.5rem;
-
-    .p-datatable-column-filter-button {
-      transform: translateY(-10px);
-    }
-
-    filtericon {
-      height: 1.25rem;
-      width: 1.25rem;
-    }
-  }
-
-  &.p-datatable-striped .p-datatable-tbody > tr {
-    > td {
-      border-width: 0;
-    }
-
-    &:nth-child(2n + 1) {
-      background: post.$light;
-      color: post.$black;
-    }
-  }
-}
-
-.p-inputtext {
-  border-radius: 0;
-}
-
-.p-dropdown {
-  &,
-  &-panel {
-    border-radius: 0;
-  }
-
-  .p-dropdown-items {
-    margin: 0;
-    padding: 0;
-  }
-
-  .p-dropdown-trigger chevrondownicon {
-    height: 1.5rem;
-    width: 1.5rem;
-  }
-}
-
-.p-paginator {
-  justify-content: flex-end;
-
-  .p-paginator-current {
-    border: 0;
-  }
-
-  .p-dropdown .p-dropdown-label {
-    padding-block: 0.35rem;
-  }
-
-  .p-paginator-first {
-    border-start-start-radius: post.$btn-border-radius;
-    border-end-start-radius: post.$btn-border-radius;
-  }
-
-  .p-paginator-last {
-    border-start-end-radius: post.$btn-border-radius;
-    border-end-end-radius: post.$btn-border-radius;
-  }
-
-  .p-paginator-element {
-    &:not(.p-highlight) {
-      background-color: #fff;
-
-      &:hover {
-        background-color: #faf9f8;
-      }
-
-      &:not(:hover) {
-        color: post.$gray-60;
-      }
-    }
-
-    &:not(.p-paginator-last) {
-      margin-inline-end: -1 * post.$btn-border-width;
-    }
-
-    &.p-disabled {
-      display: none;
-    }
-  }
-}
-
-.p-button {
-  gap: tokens.get('utility-gap-8');
-
-  &.p-button-text {
-    color: post.$dark;
-
-    &:hover {
-      color: post.$black;
-    }
-  }
-}
-
-.p-checkbox-box {
-  border-radius: 0;
-  color: post.$black;
-
-  checkicon,
-  timesicon {
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.p-sortable-column,
-.p-column-filter,
-.p-selectable-row,
-.p-link,
-.p-button,
-.p-inputwrapper.p-dropdown,
-.p-inputtext:not(.p-inputwrapper > .p-inputtext),
-.p-checkbox,
-.p-radiobutton {
-  @include post.focus-style {
-    box-shadow: none;
-    border-radius: post.$border-radius;
-  }
-}

package/primeng-theme/_icons.scss

@@ -1,61 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-@mixin custom-icon($icon) {
-  display: inline-block;
-  height: 1rem;
-  width: 1rem;
-
-  > * {
-    display: none;
-  }
-
-  @include post.mask-image($icon);
-}
-
-plusicon {
-  @include custom-icon('plus');
-}
-
-trashicon {
-  @include custom-icon('trash');
-}
-
-chevrondownicon {
-  @include custom-icon('chevrondown');
-}
-
-filtericon {
-  @include custom-icon('filter');
-}
-
-sortalticon {
-  @include custom-icon('updown');
-}
-
-sortamountupalticon {
-  @include custom-icon('chevronup');
-}
-
-sortamountdownicon {
-  @include custom-icon('chevrondown');
-}
-
-arrowupicon {
-  @include custom-icon('arrowup');
-}
-
-arrowdownicon {
-  @include custom-icon('arrowdown');
-}
-
-checkicon {
-  @include custom-icon('checkmark');
-}
-
-timesicon {
-  @include custom-icon('closex');
-}
-
-.p-datatable-reorderablerow-handle {
-  @include custom-icon('burger');
-}

package/primeng-theme/index.scss

@@ -1,2 +0,0 @@
-@import './extensions';
-@import './icons';

package/public-api.d.ts

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