@swisspost/design-system-styles-primeng 9.0.0-next.8 → 9.0.0

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

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 
 class StylesPrimengModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StylesPrimengModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StylesPrimengModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StylesPrimengModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: StylesPrimengModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: StylesPrimengModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: StylesPrimengModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StylesPrimengModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: StylesPrimengModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

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

@@ -1 +1 @@
-{"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,EAAA;gHAAnB,mBAAmB,EAAA,CAAA,CAAA,EAAA;gHAAnB,mBAAmB,EAAA,CAAA,CAAA,EAAA;;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,CAAA;;;ACND;;AAEG;;ACFH;;AAEG;;;;"}
+{"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;8GAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAnB,mBAAmB,EAAA,CAAA,CAAA;+GAAnB,mBAAmB,EAAA,CAAA,CAAA;;2FAAnB,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles-primeng",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0",
   "description": "Swiss Post styles for PrimeNg datatable.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -18,12 +18,12 @@
     "linkDirectory": true
   },
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "primeng": "^17.18.0"
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "primeng": "^19.0.0"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "9.0.0-next.8",
+    "@swisspost/design-system-styles": "9.0.0",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
@@ -44,8 +44,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/swisspost-design-system-styles-primeng.mjs",
-      "esm": "./esm2022/swisspost-design-system-styles-primeng.mjs",
       "default": "./fesm2022/swisspost-design-system-styles-primeng.mjs"
     }
   }

package/primeng-theme/_icons.scss

@@ -1,16 +1,44 @@
 @use '@swisspost/design-system-styles/core' as post;
 
 @mixin custom-icon($icon) {
-  @include post.icon($icon);
-  display: inline-block;
-  height: 1rem;
-  width: 1rem;
+  display: block;
+  position: relative;
+  height: var(--p-icon-size);
+  width: var(--p-icon-size);
 
-  > * {
+  &::after {
+    content: '';
+    display: block;
+    height: calc(1.5 * var(--p-icon-size));
+    width: calc(1.5 * var(--p-icon-size));
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    @include post.icon($icon);
+  }
+
+  .p-icon {
     display: none;
   }
 }
 
+anglerighticon {
+  @include custom-icon(2111);
+}
+
+angledoublerighticon {
+  @include custom-icon(2395);
+}
+
+anglelefticon {
+  @include custom-icon(2110);
+}
+
+angledoublelefticon {
+  @include custom-icon(2396);
+}
+
 plusicon {
   @include custom-icon(2040);
 }
@@ -55,6 +83,6 @@ timesicon {
   @include custom-icon(2043);
 }
 
-.p-datatable-reorderablerow-handle {
+.p-datatable-reorderable-row-handle {
   @include custom-icon(2070);
 }

package/primeng-theme/_primitive.scss

@@ -0,0 +1,6 @@
+@use './mixins/mode';
+
+:root {
+  --p-border-radius-none: 1px;
+  --p-border-radius-rounded: 4px;
+}

package/primeng-theme/_semantic.scss

@@ -0,0 +1,132 @@
+@use './mixins/mode';
+
+p-table,
+.p-datatable-filter-overlay {
+  --p-transition-duration: 250ms;
+  --p-focus-ring-width: 2px;
+  --p-focus-ring-style: solid;
+  --p-focus-ring-color: var(--post-focus-color);
+  --p-focus-ring-offset: 2px;
+  --p-focus-ring-shadow: none;
+  --p-disabled-opacity: 0.6;
+  --p-icon-size: 1rem;
+  --p-anchor-gutter: 0;
+  --p-form-field-padding-x: 1rem;
+  --p-form-field-padding-y: 0.5rem;
+  --p-form-field-sm-font-size: 0.875rem;
+  --p-form-field-sm-padding-x: 1rem;
+  --p-form-field-sm-padding-y: 0.25rem;
+  --p-form-field-lg-font-size: 1.125rem;
+  --p-form-field-lg-padding-x: 1rem;
+  --p-form-field-lg-padding-y: 0.75rem;
+  --p-form-field-border-radius: var(--p-border-radius-none);
+  --p-form-field-focus-ring-width: var(--p-focus-ring-width);
+  --p-form-field-focus-ring-style: var(--p-focus-ring-style);
+  --p-form-field-focus-ring-color: var(--p-focus-ring-color);
+  --p-form-field-focus-ring-offset: var(--p-focus-ring-offset);
+  --p-form-field-focus-ring-shadow: var(--p-focus-ring-shadow);
+  --p-form-field-transition-duration: var(--p-transition-duration);
+  --p-list-padding: 0.5rem 0;
+  --p-list-gap: 0;
+  --p-list-header-padding: 0.5rem 0.75rem 0.375rem 0.75rem;
+  --p-list-option-padding: 0.5rem 1rem;
+  --p-list-option-border-radius: var(--p-border-radius-none);
+  --p-list-option-group-padding: 0.5rem 1rem;
+  --p-list-option-group-font-weight: 400;
+  --p-content-border-radius: var(--p-border-radius-rounded);
+  --p-mask-transition-duration: 0.15s;
+  --p-navigation-list-padding: 0.125rem 0;
+  --p-navigation-list-gap: 0;
+  --p-navigation-item-padding: 0.5rem 0.75rem;
+  --p-navigation-item-border-radius: 0;
+  --p-navigation-item-gap: 0.5rem;
+  --p-navigation-submenu-label-padding: 0.5rem 0.75rem;
+  --p-navigation-submenu-label-font-weight: 700;
+  --p-navigation-submenu-icon-size: 0.875rem;
+  --p-primary-color: var(--post-gray-80);
+  --p-primary-contrast-color: var(--post-white);
+  --p-primary-hover-color: var(--post-gray-60);
+  --p-primary-active-color: var(--post-gray-60);
+  --p-highlight-background: var(--post-yellow);
+  --p-highlight-focus-background: var(--post-yellow);
+  --p-highlight-color: var(--post-black);
+  --p-highlight-focus-color: var(--post-black);
+  --p-mask-background: rgba(0, 0, 0, 0.4);
+  --p-mask-color: var(--post-gray-20);
+  --p-form-field-background: var(--post-white);
+  --p-form-field-disabled-background: var(--post-gray-20);
+  --p-form-field-filled-background: var(--post-gray-10);
+  --p-form-field-filled-hover-background: var(--post-gray-10);
+  --p-form-field-filled-focus-background: var(--post-gray-10);
+  --p-form-field-border-color: var(--post-gray-80);
+  --p-form-field-hover-border-color: var(--post-black);
+  --p-form-field-focus-border-color: var(--post-gray-80);
+  --p-form-field-invalid-border-color: var(--post-error);
+  --p-form-field-color: var(--post-black);
+  --p-form-field-disabled-color: var(--post-gray-60);
+  --p-form-field-placeholder-color: var(--post-gray-60);
+  --p-form-field-invalid-placeholder-color: var(--post-error);
+  --p-form-field-float-label-color: var(--post-gray-60);
+  --p-form-field-float-label-focus-color: var(--p-primary-color);
+  --p-form-field-float-label-active-color: var(--post-gray-60);
+  --p-form-field-float-label-invalid-color: var(--p-form-field-invalid-placeholder-color);
+  --p-form-field-icon-color: var(--post-black);
+  --p-form-field-shadow: none;
+  --p-text-color: var(--post-black);
+  --p-text-hover-color: var(--post-gray-80);
+  --p-text-muted-color: var(--p-text-color);
+  --p-text-hover-muted-color: var(--p-text-hover-color);
+  --p-content-background: var(--post-white);
+  --p-content-hover-background: var(--post-gray-20);
+  --p-content-border-color: var(--post-gray-20);
+  --p-content-color: var(--p-text-color);
+  --p-content-hover-color: var(--p-text-color);
+  --p-list-option-focus-background: var(--post-gray-10);
+  --p-list-option-selected-background: var(--p-highlight-background);
+  --p-list-option-selected-focus-background: var(--p-highlight-focus-background);
+  --p-list-option-color: var(--post-black);
+  --p-list-option-focus-color: var(--post-gray-80);
+  --p-list-option-selected-color: var(--p-highlight-color);
+  --p-list-option-selected-focus-color: var(--p-highlight-focus-color);
+  --p-list-option-icon-color: var(--post-gray-60);
+  --p-list-option-icon-focus-color: var(--post-gray-60);
+  --p-list-option-group-background: transparent;
+  --p-list-option-group-color: var(--p-black);
+  --p-navigation-item-focus-background: var(--p-primary-color);
+  --p-navigation-item-active-background: var(--post-gray-20);
+  --p-navigation-item-color: var(--p-text-color);
+  --p-navigation-item-focus-color: var(--p-primary-contrast-color);
+  --p-navigation-item-active-color: var(--p-text-hover-color);
+  --p-navigation-item-icon-color: var(--p-text-muted-color);
+  --p-navigation-item-icon-focus-color: var(--p-primary-contrast-color);
+  --p-navigation-item-icon-active-color: var(--p-text-hover-muted-color);
+  --p-navigation-submenu-label-background: transparent;
+  --p-navigation-submenu-label-color: var(--p-text-color);
+  --p-navigation-submenu-icon-color: var(--p-text-muted-color);
+  --p-navigation-submenu-icon-focus-color: var(--p-primary-contrast-color);
+  --p-navigation-submenu-icon-active-color: var(--p-text-hover-muted-color);
+}
+@include mode.dark {
+  p-table,
+  .p-datatable-filter-overlay {
+    --p-primary-color: var(--post-white);
+    --p-primary-contrast-color: var(--post-black);
+    --p-primary-hover-color: var(--post-yellow);
+    --p-primary-active-color: var(--post-yellow);
+    --p-mask-background: rgba(0, 0, 0, 0.6);
+    --p-mask-color: var(--post-gray-20);
+    --p-form-field-border-color: var(--post-gray-10);
+    --p-text-color: var(--post-white);
+    --p-text-hover-color: var(--post-white);
+    --p-content-background: var(--post-gray-10);
+    --p-content-hover-background: var(--p-highlight-background);
+    --p-content-hover-color: var(--p-highlight-color);
+    --p-content-border-color: var(--post-gray-20);
+    --p-list-option-focus-background: var(--post-gray-80);
+    --p-list-option-focus-color: var(--post-gray-10);
+    --p-list-option-icon-color: var(--post-gray-20);
+    --p-list-option-icon-focus-color: var(--post-gray-20);
+    --p-navigation-item-active-background: var(--post-gray-60);
+    --p-navigation-item-active-color: var(--p-text-color);
+  }
+}

package/primeng-theme/components/_button.scss

@@ -0,0 +1,199 @@
+p-table,
+.p-datatable-filter-overlay {
+  --p-button-border-radius: var(--p-border-radius-rounded);
+  --p-button-rounded-border-radius: var(--p-border-radius-rounded);
+  --p-button-gap: 0.5rem;
+  --p-button-padding-x: var(--p-form-field-padding-x);
+  --p-button-padding-y: var(--p-form-field-padding-y);
+  --p-button-icon-only-width: 2.5rem;
+  --p-button-sm-font-size: var(--p-form-field-sm-font-size);
+  --p-button-sm-padding-x: var(--p-form-field-sm-padding-x);
+  --p-button-sm-padding-y: var(--p-form-field-sm-padding-y);
+  --p-button-sm-icon-only-width: 2rem;
+  --p-button-lg-font-size: var(--p-form-field-lg-font-size);
+  --p-button-lg-padding-x: var(--p-form-field-lg-padding-x);
+  --p-button-lg-padding-y: var(--p-form-field-lg-padding-y);
+  --p-button-lg-icon-only-width: 3rem;
+  --p-button-label-font-weight: 700;
+  --p-button-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  --p-button-focus-ring-width: var(--p-focus-ring-width);
+  --p-button-focus-ring-style: var(--p-focus-ring-style);
+  --p-button-focus-ring-offset: var(--p-focus-ring-offset);
+  --p-button-badge-size: 1rem;
+  --p-button-transition-duration: var(--p-form-field-transition-duration);
+  --p-button-primary-background: var(--p-primary-color);
+  --p-button-primary-hover-background: var(--p-primary-hover-color);
+  --p-button-primary-active-background: var(--p-primary-active-color);
+  --p-button-primary-border-color: var(--p-primary-color);
+  --p-button-primary-hover-border-color: var(--p-primary-hover-color);
+  --p-button-primary-active-border-color: var(--p-primary-active-color);
+  --p-button-primary-color: var(--p-primary-contrast-color);
+  --p-button-primary-hover-color: var(--p-primary-contrast-color);
+  --p-button-primary-active-color: var(--p-primary-contrast-color);
+  --p-button-primary-focus-ring-color: var(--post-focus-color);
+  --p-button-primary-focus-ring-shadow: none;
+  --p-button-secondary-background: var(--p-button-primary-background);
+  --p-button-secondary-hover-background: var(--p-button-primary-hover-background);
+  --p-button-secondary-active-background: var(--p-button-primary-active-background);
+  --p-button-secondary-border-color: var(--p-button-primary-border-color);
+  --p-button-secondary-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-secondary-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-secondary-color: var(--p-button-primary-color);
+  --p-button-secondary-hover-color: var(--p-button-primary-hover-color);
+  --p-button-secondary-active-color: var(--p-button-primary-active-color);
+  --p-button-secondary-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-secondary-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-info-background: var(--p-button-primary-background);
+  --p-button-info-hover-background: var(--p-button-primary-hover-background);
+  --p-button-info-active-background: var(--p-button-primary-active-background);
+  --p-button-info-border-color: var(--p-button-primary-border-color);
+  --p-button-info-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-info-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-info-color: var(--p-button-primary-color);
+  --p-button-info-hover-color: var(--p-button-primary-hover-color);
+  --p-button-info-active-color: var(--p-button-primary-active-color);
+  --p-button-info-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-info-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-success-background: var(--p-button-primary-background);
+  --p-button-success-hover-background: var(--p-button-primary-hover-background);
+  --p-button-success-active-background: var(--p-button-primary-active-background);
+  --p-button-success-border-color: var(--p-button-primary-border-color);
+  --p-button-success-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-success-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-success-color: var(--p-button-primary-color);
+  --p-button-success-hover-color: var(--p-button-primary-hover-color);
+  --p-button-success-active-color: var(--p-button-primary-active-color);
+  --p-button-success-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-success-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-warn-background: var(--p-button-primary-background);
+  --p-button-warn-hover-background: var(--p-button-primary-hover-background);
+  --p-button-warn-active-background: var(--p-button-primary-active-background);
+  --p-button-warn-border-color: var(--p-button-primary-border-color);
+  --p-button-warn-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-warn-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-warn-color: var(--p-button-primary-color);
+  --p-button-warn-hover-color: var(--p-button-primary-hover-color);
+  --p-button-warn-active-color: var(--p-button-primary-active-color);
+  --p-button-warn-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-warn-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-help-background: var(--p-button-primary-background);
+  --p-button-help-hover-background: var(--p-button-primary-hover-background);
+  --p-button-help-active-background: var(--p-button-primary-active-background);
+  --p-button-help-border-color: var(--p-button-primary-border-color);
+  --p-button-help-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-help-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-help-color: var(--p-button-primary-color);
+  --p-button-help-hover-color: var(--p-button-primary-hover-color);
+  --p-button-help-active-color: var(--p-button-primary-active-color);
+  --p-button-help-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-help-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-danger-background: var(--p-button-primary-background);
+  --p-button-danger-hover-background: var(--p-button-primary-hover-background);
+  --p-button-danger-active-background: var(--p-button-primary-active-background);
+  --p-button-danger-border-color: var(--p-button-primary-border-color);
+  --p-button-danger-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-danger-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-danger-color: var(--p-button-primary-color);
+  --p-button-danger-hover-color: var(--p-button-primary-hover-color);
+  --p-button-danger-active-color: var(--p-button-primary-active-color);
+  --p-button-danger-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-danger-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-contrast-background: var(--p-button-primary-background);
+  --p-button-contrast-hover-background: var(--p-button-primary-hover-background);
+  --p-button-contrast-active-background: var(--p-button-primary-active-background);
+  --p-button-contrast-border-color: var(--p-button-primary-border-color);
+  --p-button-contrast-hover-border-color: var(--p-button-primary-hover-border-color);
+  --p-button-contrast-active-border-color: var(--p-button-primary-active-border-color);
+  --p-button-contrast-color: var(--p-button-primary-color);
+  --p-button-contrast-hover-color: var(--p-button-primary-hover-color);
+  --p-button-contrast-active-color: var(--p-button-primary-active-color);
+  --p-button-contrast-focus-ring-color: var(--p-button-primary-focus-ring-color);
+  --p-button-contrast-focus-ring-shadow: var(--p-button-primary-focus-ring-shadow);
+  --p-button-outlined-primary-hover-background: var(--p-primary-hover-color);
+  --p-button-outlined-primary-hover-border-color: var(--p-primary-hover-color);
+  --p-button-outlined-primary-hover-color: var(--p-primary-contrast-color);
+  --p-button-outlined-primary-active-background: var(--p-primary-active-color);
+  --p-button-outlined-primary-border-color: var(--p-primary-color);
+  --p-button-outlined-primary-color: var(--p-primary-color);
+  --p-button-outlined-secondary-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-secondary-active-background: var(
+    --p-button-outlined-primary-active-background
+  );
+  --p-button-outlined-secondary-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-secondary-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-success-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-success-active-background: var(--p-button-outlined-primary-active-background);
+  --p-button-outlined-success-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-success-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-info-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-info-active-background: var(--p-button-outlined-primary-active-background);
+  --p-button-outlined-info-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-info-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-warn-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-warn-active-background: var(--p-button-outlined-primary-active-background);
+  --p-button-outlined-warn-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-warn-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-help-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-help-active-background: var(--p-button-outlined-primary-active-background);
+  --p-button-outlined-help-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-help-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-danger-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-danger-active-background: var(--p-button-outlined-primary-active-background);
+  --p-button-outlined-danger-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-danger-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-contrast-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-contrast-active-background: var(
+    --p-button-outlined-primary-active-background
+  );
+  --p-button-outlined-contrast-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-contrast-color: var(--p-button-outlined-primary-color);
+  --p-button-outlined-plain-hover-background: var(--p-button-outlined-primary-hover-background);
+  --p-button-outlined-plain-active-background: var(--p-button-outlined-primary-active-background);
+  --p-button-outlined-plain-border-color: var(--p-button-outlined-primary-border-color);
+  --p-button-outlined-plain-color: var(--p-button-outlined-primary-color);
+  --p-button-text-primary-hover-background: var(--p-primary-hover-color);
+  --p-button-text-primary-active-background: var(--p-primary-active-color);
+  --p-button-text-primary-color: var(--p-primary-color);
+  --p-button-text-primary-hover-color: var(--p-primary-contrast-color);
+  --p-button-text-secondary-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-secondary-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-secondary-color: var(--p-button-text-primary-color);
+  --p-button-text-success-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-success-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-success-color: var(--p-button-text-primary-color);
+  --p-button-text-info-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-info-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-info-color: var(--p-button-text-primary-color);
+  --p-button-text-warn-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-warn-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-warn-color: var(--p-button-text-primary-color);
+  --p-button-text-help-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-help-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-help-color: var(--p-button-text-primary-color);
+  --p-button-text-danger-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-danger-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-danger-color: var(--p-button-text-primary-color);
+  --p-button-text-contrast-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-contrast-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-contrast-color: var(--p-button-text-primary-color);
+  --p-button-text-plain-hover-background: var(--p-button-text-primary-hover-background);
+  --p-button-text-plain-active-background: var(--p-button-text-primary-active-background);
+  --p-button-text-plain-color: var(--p-button-text-primary-color);
+  --p-button-link-color: var(--p-primary-color);
+  --p-button-link-hover-color: var(--p-primary-hover-color);
+  --p-button-link-active-color: var(--p-primary-active-color);
+}
+
+.p-button-text:not(:disabled):hover {
+  color: var(--p-button-text-primary-hover-color) !important;
+}
+
+.p-button-outlined:not(:disabled):hover {
+  border-color: var(--p-button-outlined-primary-hover-border-color) !important;
+  color: var(--p-button-outlined-primary-hover-color) !important;
+}
+
+.p-button-icon-only.p-button-rounded {
+  border-radius: var(--p-button-rounded-border-radius) !important;
+}

package/primeng-theme/components/_checkbox.scss

@@ -0,0 +1,57 @@
+@use '../mixins/mode';
+
+p-table,
+.p-datatable-filter-overlay {
+  --p-checkbox-border-radius: var(--p-border-radius-none);
+  --p-checkbox-width: 1.375rem;
+  --p-checkbox-height: 1.375rem;
+  --p-checkbox-background: var(--p-form-field-background);
+  --p-checkbox-checked-background: var(--p-form-field-background);
+  --p-checkbox-checked-hover-background: var(--p-form-field-background);
+  --p-checkbox-disabled-background: var(--p-form-field-background);
+  --p-checkbox-filled-background: var(--p-form-field-background);
+  --p-checkbox-border-color: var(--p-form-field-border-color);
+  --p-checkbox-hover-border-color: var(--p-form-field-hover-border-color);
+  --p-checkbox-focus-border-color: var(--p-form-field-border-color);
+  --p-checkbox-checked-border-color: var(--p-form-field-border-color);
+  --p-checkbox-checked-hover-border-color: var(--p-form-field-hover-border-color);
+  --p-checkbox-checked-focus-border-color: var(--p-form-field-border-color);
+  --p-checkbox-checked-disabled-border-color: var(--p-form-field-disabled-color);
+  --p-checkbox-invalid-border-color: var(--p-form-field-invalid-border-color);
+  --p-checkbox-shadow: var(--p-form-field-shadow);
+  --p-checkbox-focus-ring-width: var(--p-focus-ring-width);
+  --p-checkbox-focus-ring-style: var(--p-focus-ring-style);
+  --p-checkbox-focus-ring-color: var(--p-focus-ring-color);
+  --p-checkbox-focus-ring-offset: var(--p-focus-ring-offset);
+  --p-checkbox-focus-ring-shadow: var(--p-focus-ring-shadow);
+  --p-checkbox-transition-duration: var(--p-form-field-transition-duration);
+  --p-checkbox-sm-width: 1rem;
+  --p-checkbox-sm-height: 1rem;
+  --p-checkbox-lg-width: 1.5rem;
+  --p-checkbox-lg-height: 1.5rem;
+  --p-checkbox-icon-size: 0.875rem;
+  --p-checkbox-icon-color: var(--p-form-field-border-color);
+  --p-checkbox-icon-checked-color: var(--p-form-field-border-color);
+  --p-checkbox-icon-checked-hover-color: var(--p-form-field-hover-border-color);
+  --p-checkbox-icon-disabled-color: var(--p-form-field-disabled-color);
+  --p-checkbox-icon-sm-size: 0.75rem;
+  --p-checkbox-icon-lg-size: 1rem;
+}
+
+@include mode.dark {
+  p-table,
+  .p-datatable-filter-overlay {
+    --p-checkbox-background: transparent;
+    --p-checkbox-hover-background: var(--p-checkbox-background);
+    --p-checkbox-checked-background: var(--p-checkbox-background);
+    --p-checkbox-checked-hover-background: var(--p-checkbox-background);
+
+    --p-checkbox-border-color: var(--post-gray-80);
+    --p-checkbox-hover-border-color: var(--p-checkbox-border-color);
+    --p-checkbox-checked-border-color: var(--p-checkbox-border-color);
+    --p-checkbox-icon-checked-color: var(--p-checkbox-border-color);
+
+    --p-checkbox-icon-checked-hover-color: var(--post-white);
+    --p-checkbox-checked-hover-border-color: var(--post-white);
+  }
+}

package/primeng-theme/components/_datatable.scss

@@ -0,0 +1,133 @@
+@use '../mixins/mode';
+
+p-table,
+.p-datatable-filter-overlay {
+  --p-datatable-transition-duration: var(--p-transition-duration);
+  --p-datatable-header-background: var(--p-content-background);
+  --p-datatable-header-border-color: var(--p-datatable-border-color);
+  --p-datatable-header-color: var(--p-content-color);
+  --p-datatable-header-border-width: 1px 0 1px 0;
+  --p-datatable-header-padding: 0.75rem 0.5rem;
+  --p-datatable-header-sm-padding: 0.5rem 0.5rem;
+  --p-datatable-header-lg-padding: 1rem 0.5rem;
+  --p-datatable-header-cell-background: var(--p-content-background);
+  --p-datatable-header-cell-background: var(--p-content-background);
+  --p-datatable-header-cell-hover-background: var(--p-content-hover-background);
+  --p-datatable-header-cell-selected-background: var(--p-highlight-background);
+  --p-datatable-header-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-header-cell-color: var(--p-content-color);
+  --p-datatable-header-cell-hover-color: var(--p-content-hover-color);
+  --p-datatable-header-cell-selected-color: var(--p-highlight-color);
+  --p-datatable-header-cell-gap: 0.5rem;
+  --p-datatable-header-cell-padding: 0.75rem 0.5rem;
+  --p-datatable-header-cell-focus-ring-width: var(--p-focus-ring-width);
+  --p-datatable-header-cell-focus-ring-style: var(--p-focus-ring-style);
+  --p-datatable-header-cell-focus-ring-color: var(--p-focus-ring-color);
+  --p-datatable-header-cell-focus-ring-offset: -1px;
+  --p-datatable-header-cell-focus-ring-shadow: var(--p-focus-ring-shadow);
+  --p-datatable-header-cell-sm-padding: 0.5rem 0.5rem;
+  --p-datatable-header-cell-lg-padding: 1rem 0.55rem;
+  --p-datatable-column-title-font-weight: 700;
+  --p-datatable-row-background: var(--p-content-background);
+  --p-datatable-row-hover-background: var(--p-content-hover-background);
+  --p-datatable-row-selected-background: var(--p-highlight-background);
+  --p-datatable-row-color: var(--p-content-color);
+  --p-datatable-row-hover-color: var(--p-content-hover-color);
+  --p-datatable-row-selected-color: var(--p-highlight-color);
+  --p-datatable-row-focus-ring-width: var(--p-focus-ring-width);
+  --p-datatable-row-focus-ring-style: var(--p-focus-ring-style);
+  --p-datatable-row-focus-ring-color: var(--p-focus-ring-color);
+  --p-datatable-row-focus-ring-offset: -1px;
+  --p-datatable-row-focus-ring-shadow: var(--p-focus-ring-shadow);
+  --p-datatable-body-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-body-cell-padding: 0.75rem 0.5rem;
+  --p-datatable-body-cell-sm-padding: 0.5rem 0.5rem;
+  --p-datatable-body-cell-lg-padding: 1rem 0.5rem;
+  --p-datatable-footer-cell-background: var(--p-content-background);
+  --p-datatable-footer-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-footer-cell-color: var(--p-content-color);
+  --p-datatable-footer-cell-padding: 0.75rem 0.5rem;
+  --p-datatable-footer-cell-sm-padding: 0.5rem 0.5rem;
+  --p-datatable-footer-cell-lg-padding: 1rem 0.5rem;
+  --p-datatable-column-footer-font-weight: 700;
+  --p-datatable-footer-background: var(--p-content-background);
+  --p-datatable-footer-border-color: var(--p-datatable-border-color);
+  --p-datatable-footer-color: var(--p-content-color);
+  --p-datatable-footer-border-width: 0 0 1px 0;
+  --p-datatable-footer-padding: 0.75rem 0.5rem;
+  --p-datatable-footer-sm-padding: 0.5rem 0.5rem;
+  --p-datatable-footer-lg-padding: 1rem 0.5rem;
+  --p-datatable-drop-point-color: var(--p-primary-color);
+  --p-datatable-column-resizer-width: 0.5rem;
+  --p-datatable-resize-indicator-width: 1px;
+  --p-datatable-resize-indicator-color: var(--p-primary-color);
+  --p-datatable-sort-icon-color: var(--p-text-muted-color);
+  --p-datatable-sort-icon-hover-color: var(--p-text-hover-muted-color);
+  --p-datatable-sort-icon-size: 0.875rem;
+  --p-datatable-loading-icon-size: 2rem;
+  --p-datatable-row-toggle-button-hover-background: var(--p-content-hover-background);
+  --p-datatable-row-toggle-button-selected-hover-background: var(--p-content-background);
+  --p-datatable-row-toggle-button-color: var(--p-text-muted-color);
+  --p-datatable-row-toggle-button-hover-color: var(--p-text-color);
+  --p-datatable-row-toggle-button-selected-hover-color: var(--p-primary-color);
+  --p-datatable-row-toggle-button-size: 1.75rem;
+  --p-datatable-row-toggle-button-border-radius: 50%;
+  --p-datatable-row-toggle-button-focus-ring-width: var(--p-focus-ring-width);
+  --p-datatable-row-toggle-button-focus-ring-style: var(--p-focus-ring-style);
+  --p-datatable-row-toggle-button-focus-ring-color: var(--p-focus-ring-color);
+  --p-datatable-row-toggle-button-focus-ring-offset: var(--p-focus-ring-offset);
+  --p-datatable-row-toggle-button-focus-ring-shadow: var(--p-focus-ring-shadow);
+  --p-datatable-filter-inline-gap: 0.5rem;
+  --p-datatable-filter-rule-border-color: var(--p-content-border-color);
+  --p-datatable-filter-constraint-list-padding: var(--p-list-padding);
+  --p-datatable-filter-constraint-list-gap: var(--p-list-gap);
+  --p-datatable-filter-constraint-focus-background: var(--p-list-option-focus-background);
+  --p-datatable-filter-constraint-selected-background: var(--p-list-option-selected-background);
+  --p-datatable-filter-constraint-selected-focus-background: var(
+    --p-list-option-selected-focus-background
+  );
+  --p-datatable-filter-constraint-color: var(--p-list-option-color);
+  --p-datatable-filter-constraint-focus-color: var(--p-list-option-focus-color);
+  --p-datatable-filter-constraint-selected-color: var(--p-list-option-selected-color);
+  --p-datatable-filter-constraint-selected-focus-color: var(--p-list-option-selected-focus-color);
+  --p-datatable-filter-constraint-separator-border-color: var(--p-content-border-color);
+  --p-datatable-filter-constraint-padding: var(--p-list-option-padding);
+  --p-datatable-filter-constraint-border-radius: var(--p-list-option-border-radius);
+  --p-datatable-paginator-top-border-color: var(--p-datatable-border-color);
+  --p-datatable-paginator-top-border-width: 0 0 1px 0;
+  --p-datatable-paginator-bottom-border-color: var(--p-datatable-border-color);
+  --p-datatable-paginator-bottom-border-width: 0 0 1px 0;
+  --p-datatable-border-color: var(--post-gray-10);
+  --p-datatable-row-striped-background: var(--post-light);
+  --p-datatable-body-cell-selected-border-color: var(--p-highlight-background);
+}
+
+@include mode.dark {
+  p-table,
+  .p-datatable-filter-overlay {
+    --p-datatable-border-color: var(--post-gray-20);
+    --p-datatable-row-striped-background: var(--post-gray-20);
+  }
+}
+
+p-columnfilter,
+p-sorticon {
+  margin-inline-start: 4px;
+}
+
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr > td {
+  --p-datatable-body-cell-border-color: var(--p-datatable-row-striped-background);
+}
+
+.p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody > tr:last-of-type > td {
+  border-bottom: 0;
+}
+
+.p-datatable-tfoot {
+  background: var(--p-datatable-footer-background);
+  color: var(--p-datatable-footer-color);
+  border-color: var(--p-datatable-footer-border-color);
+  border-style: solid;
+  border-width: 1px 0 0;
+  padding: var(--p-datatable-footer-padding);
+}