diff --git a/package.json b/package.json
index 9719e81a794..eb2cf558844 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primeng",
-  "version": "11.4.3",
+  "version": "11.4.4",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
diff --git a/src/app/components/package.json b/src/app/components/package.json
index 4c56cc6bfc2..01c5b1ae6d4 100644
--- a/src/app/components/package.json
+++ b/src/app/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "11.4.3",
+    "version": "11.4.4",
     "repository": {
       "type": "git",
       "url": "https://github.com/primefaces/primeng"
diff --git a/src/app/components/styleclass/ng-package.json b/src/app/components/styleclass/ng-package.json
new file mode 100644
index 00000000000..ab5467eb7e4
--- /dev/null
+++ b/src/app/components/styleclass/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
\ No newline at end of file
diff --git a/src/app/components/styleclass/public_api.ts b/src/app/components/styleclass/public_api.ts
new file mode 100644
index 00000000000..dfbaae85d0b
--- /dev/null
+++ b/src/app/components/styleclass/public_api.ts
@@ -0,0 +1 @@
+export * from './styleclass';
\ No newline at end of file
diff --git a/src/app/components/styleclass/styleclass.ts b/src/app/components/styleclass/styleclass.ts
new file mode 100644
index 00000000000..cf1e357bcc7
--- /dev/null
+++ b/src/app/components/styleclass/styleclass.ts
@@ -0,0 +1,196 @@
+import { CommonModule} from '@angular/common';
+import { NgModule, Directive, ElementRef, Input, Renderer2, OnDestroy, AfterViewInit } from '@angular/core';
+import { DomHandler } from 'primeng/dom';
+
+@Directive({
+    selector: '[pStyleClass]'
+})
+export class StyleClass implements AfterViewInit, OnDestroy {
+
+    constructor(public el: ElementRef, public renderer: Renderer2) {}
+
+    @Input('pStyleClass') selector: string;
+
+    @Input() enterClass: string;
+
+    @Input() enterActiveClass: string;
+
+    @Input() enterToClass: string;
+
+    @Input() leaveClass: string;
+
+    @Input() leaveActiveClass: string;
+
+    @Input() leaveToClass: string;
+
+    @Input() hideOnOutsideClick: boolean;
+
+    @Input() toggleClass: string;
+
+    eventListener: Function;
+
+    documentListener: Function;
+
+    target: HTMLElement;
+
+    enterListener: Function;
+
+    leaveListener: Function;
+
+    animating: boolean;
+
+    ngAfterViewInit() {
+        this.eventListener = this.renderer.listen(this.el.nativeElement, 'click', () => {
+            this.target = this.resolveTarget();
+
+            if (this.toggleClass) {
+                if (DomHandler.hasClass(this.target, this.toggleClass))
+                    DomHandler.removeClass(this.target, this.toggleClass);
+                else
+                    DomHandler.addClass(this.target, this.toggleClass);
+            }
+            else {
+                if (this.target.offsetParent === null)
+                    this.enter();
+                else
+                    this.leave();
+            }
+        });
+    }
+
+    enter() {
+        if (this.enterActiveClass) {
+            if (!this.animating) {
+                this.animating = true;
+
+                if (this.enterActiveClass === 'slidedown') {
+                    this.target.style.height = '0px';
+                    DomHandler.removeClass(this.target, 'hidden');
+                    this.target.style.maxHeight = this.target.scrollHeight + 'px';
+                    DomHandler.addClass(this.target, 'hidden');
+                    this.target.style.height = '';
+                }
+
+                DomHandler.addClass(this.target, this.enterActiveClass);
+                if (this.enterClass) {
+                    DomHandler.removeClass(this.target, this.enterClass);
+                }
+
+                this.enterListener = this.renderer.listen(this.target, 'animationend', () => {
+                    DomHandler.removeClass(this.target, this.enterActiveClass);
+                    if (this.enterToClass) {
+                        DomHandler.addClass(this.target, this.enterToClass);
+                    }
+                    this.enterListener();
+
+                    if (this.enterActiveClass === 'slidedown') {
+                        this.target.style.maxHeight = '';
+                    }
+                    this.animating = false;
+                });
+            }
+        }
+        else {
+            if (this.enterClass) {
+                DomHandler.removeClass(this.target, this.enterClass);
+            }
+
+            if (this.enterToClass) {
+                DomHandler.addClass(this.target, this.enterToClass);
+            }
+        }
+
+        if (this.hideOnOutsideClick) {
+            this.bindDocumentListener();
+        }
+    }
+
+    leave() {
+        if (this.leaveActiveClass) {
+            if (!this.animating) {
+                this.animating = true;
+                DomHandler.addClass(this.target, this.leaveActiveClass);
+                if (this.leaveClass) {
+                    DomHandler.removeClass(this.target, this.leaveClass);
+                }
+
+                this.leaveListener = this.renderer.listen(this.target, 'animationend', () => {
+                    DomHandler.removeClass(this.target, this.leaveActiveClass);
+                    if (this.leaveToClass) {
+                        DomHandler.addClass(this.target, this.leaveToClass);
+                    }
+                    this.leaveListener();
+                    this.animating = false;
+                });
+            }
+        }
+        else {
+            if (this.leaveClass) {
+                DomHandler.removeClass(this.target, this.leaveClass);
+            }
+
+            if (this.leaveToClass) {
+                DomHandler.addClass(this.target, this.leaveToClass);
+            }
+        }
+    }
+
+    resolveTarget() {
+        if (this.target) {
+            return this.target;
+        }
+
+        switch (this.selector) {
+            case '@next':
+                return this.el.nativeElement.nextElementSibling;
+
+            case '@prev':
+                return this.el.nativeElement.previousElementSibling;
+
+            case '@parent':
+                return this.el.nativeElement.parentElement;
+
+            case '@grandparent':
+                return this.el.nativeElement.parentElement.parentElement;
+
+            default:
+                return document.querySelector(this.selector);
+        }
+    }
+
+    bindDocumentListener() {
+        if (!this.documentListener) {
+            this.documentListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'click', event => {
+                if (getComputedStyle(this.target).getPropertyValue('position') === 'static') {
+                    this.unbindDocumentListener();
+                }
+                else  if (!this.el.nativeElement.isSameNode(event.target) && !this.el.nativeElement.contains(event.target) && !this.target.contains(event.target)) {
+                    this.leave();
+                    this.unbindDocumentListener();
+                }
+            });
+        }
+    }
+
+    unbindDocumentListener() {
+        if (this.documentListener) {
+            this.documentListener();
+            this.documentListener = null;
+        }
+    }
+
+    ngOnDestroy() {
+        this.target = null;
+        if (this.eventListener) {
+            this.eventListener();
+        }
+        this.unbindDocumentListener();
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [StyleClass],
+    declarations: [StyleClass]
+})
+export class StyleClassModule { }
diff --git a/src/app/showcase/app-routing.module.ts b/src/app/showcase/app-routing.module.ts
index b06b8f6d50b..376eb2912da 100755
--- a/src/app/showcase/app-routing.module.ts
+++ b/src/app/showcase/app-routing.module.ts
@@ -91,6 +91,7 @@ import { HomeComponent } from './components/home/home.component';
             {path: 'splitter', loadChildren: () => import('./components/splitter/splitterdemo.module').then(m => m.SplitterDemoModule)},
             {path: 'steps', loadChildren: () => import('./components/steps/stepsdemo.module').then(m => m.StepsDemoModule)},
             {path: 'support', loadChildren: () => import('./components/support/support.module').then(m => m.SupportModule)},
+            {path: 'styleclass', loadChildren: () => import('./components/styleclass/styleclassdemo.module').then(m => m.StyleClassDemoModule)},
             {path: 'tag', loadChildren: () => import('./components/tag/tagdemo.module').then(m => m.TagDemoModule)},
             {path: 'table', loadChildren: () => import('./components/table/tabledemo.module').then(m => m.TableDemoModule)},
             {path: 'tabmenu', loadChildren: () => import('./components/tabmenu/tabmenudemo.module').then(m => m.TabMenuDemoModule)},
diff --git a/src/app/showcase/app.menu.component.ts b/src/app/showcase/app.menu.component.ts
index e4d1e10987f..5e8f38b0c84 100644
--- a/src/app/showcase/app.menu.component.ts
+++ b/src/app/showcase/app.menu.component.ts
@@ -310,6 +310,7 @@ declare let gtag: Function;
                 <div class="menu-items">
                     <a [routerLink]=" ['/defer']" routerLinkActive="router-link-exact-active">Defer</a>
                     <a [routerLink]=" ['/focustrap']" routerLinkActive="router-link-exact-active">FocusTrap</a>
+                    <a [routerLink]=" ['/styleclass']" routerLinkActive="router-link-exact-active">StyleClass <span class="p-tag">New</span></a>
                     <a [routerLink]=" ['/ripple']" routerLinkActive="router-link-exact-active">Ripple</a>
                 </div>
 
diff --git a/src/app/showcase/components/styleclass/styleclassdemo-routing.module.ts b/src/app/showcase/components/styleclass/styleclassdemo-routing.module.ts
new file mode 100755
index 00000000000..d3c93a43930
--- /dev/null
+++ b/src/app/showcase/components/styleclass/styleclassdemo-routing.module.ts
@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router'
+import {StyleClassDemo} from './styleclassdemo';
+
+@NgModule({
+	imports: [
+		RouterModule.forChild([
+			{path:'',component: StyleClassDemo}
+		])
+	],
+	exports: [
+		RouterModule
+	]
+})
+export class StyleClassDemoRoutingModule {}
diff --git a/src/app/showcase/components/styleclass/styleclassdemo.html b/src/app/showcase/components/styleclass/styleclassdemo.html
new file mode 100755
index 00000000000..1393ff8abe8
--- /dev/null
+++ b/src/app/showcase/components/styleclass/styleclassdemo.html
@@ -0,0 +1,217 @@
+<div class="content-section introduction">
+    <div class="feature-intro">
+        <h1>StyleClass</h1>
+        <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
+    </div>
+</div>
+
+<div class="content-section implementation">
+    <div class="card">
+        <h5>ToggleClass</h5>
+        <button pButton label="Toggle p-disabled" pStyleClass="@next" toggleClass="p-disabled"></button>
+        <input type="text" pInputText class="p-d-block p-mt-3">
+
+        <h5>Animations</h5>
+        <button pButton label="Show" class="p-mr-2" pStyleClass=".box" enterClass="p-d-none" enterActiveClass="my-fadein"></button>
+        <button pButton label="Hide" pStyleClass=".box" leaveActiveClass="my-fadeout" leaveToClass="p-d-none"></button>
+        <div class="box p-d-none">Content</div>
+    </div>
+</div>
+
+<div class="content-section documentation">
+    <p-tabView>
+        <p-tabPanel header="Documentation">
+            <h5>Import</h5>
+<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
+import &#123;StyleClassModulde&#125; from 'primeng/styleclass';
+</app-code>
+
+            <h5>Getting Started</h5>
+            <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>
+
+            <p><b>ToggleClass</b></p>
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;button pButton label="Toggle" pStyleClass="@next" toggleClass="p-disabled"&gt;&lt;/button&gt;
+&lt;input type="text" pInputText class="p-d-block p-mt-3"&gt;
+</app-code>
+
+            <p><b>Enter/Leave Animation</b></p>
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;button pButton label="Show" class="p-mr-2" pStyleClass=".box" enterClass="p-d-none" enterActiveClass="my-fadein"&gt;&lt;/button&gt;
+&lt;button pButton label="Hide" pStyleClass=".box" leaveActiveClass="my-fadeout" leaveToClass="p-d-none"&gt;&lt;/button&gt;
+&lt;div class="box p-d-none"&gt;Content&lt;/div&gt;
+</app-code>
+
+            <h5>Target</h5>
+            <p>Target element is defined with the <i>pStyleClass</i> attribute that can either be a valid css query or one of the keywords below.</p>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>@next</td>
+                            <td>Next element.</td>
+                        </tr>
+                        <tr>
+                            <td>@prev</td>
+                            <td>Previous element.</td>
+                        </tr>
+                        <tr>
+                            <td>@parent</td>
+                            <td>Parent element.</td>
+                        </tr>
+                        <tr>
+                            <td>@grandparent</td>
+                            <td>Parent element of the parent.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h5>Properties</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Type</th>
+                            <th>Default</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>pStyleClass</td>
+                            <td>string</td>
+                            <td>selector</td>
+                            <td>Selector to define the target element.</td>
+                        </tr>
+                        <tr>
+                            <td>enterClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Class to add when item begins to get displayed.</td>
+                        </tr>
+                        <tr>
+                            <td>enterActiveClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Class to add during enter animation.</td>
+                        </tr>
+                        <tr>
+                            <td>enterToClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Class to add when enter animation is completed.</td>
+                        </tr>
+                        <tr>
+                            <td>leaveClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Class to add when item begins to get hidden.</td>
+                        </tr>
+                        <tr>
+                            <td>leaveActiveClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Class to add during leave animation</td>
+                        </tr>
+                        <tr>
+                            <td>leaveToClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Class to add when leave animation is completed.</td>
+                        </tr>
+                        <tr>
+                            <td>hideOnOutsideClick</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Whether to trigger leave animation when outside of the element is clicked.</td>
+                        </tr>
+                        <tr>
+                            <td>toggleClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Adds or removes a class when no enter-leave animation is required.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h5>Events</h5>
+            <p>Directive has no events.</p>
+
+            <h5>Dependencies</h5>
+            <p>None.</p>
+        </p-tabPanel>
+
+        <p-tabPanel header="Source">
+            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/styleclass" class="btn-viewsource" target="_blank">
+                <span>View on GitHub</span>
+            </a>
+
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;h5&gt;ToggleClass&lt;/h5&gt;
+&lt;button pButton label="Toggle" pStyleClass="@next" toggleClass="p-disabled"&gt;&lt;/button&gt;
+&lt;input type="text" pInputText class="p-d-block p-mt-3"&gt;
+
+&lt;h5&gt;Animations&lt;/h5&gt;
+&lt;button pButton label="Show" class="p-mr-2" pStyleClass=".box" enterClass="p-d-none" enterActiveClass="my-fadein"&gt;&lt;/button&gt;
+&lt;button pButton label="Hide" pStyleClass=".box" leaveActiveClass="my-fadeout" leaveToClass="p-d-none"&gt;&lt;/button&gt;
+&lt;div class="box p-d-none"&gt;Content&lt;/div&gt;
+</app-code>
+
+<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
+import &#123;Component&#125; from '@angular/core';
+
+@Component(&#123;
+    templateUrl: './styleclassdemo.html',
+    styles:[`
+        .box &#123;
+            background-color: var(--green-500);
+            color: #ffffff;
+            width: 100px;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            border-radius: 4px;
+            margin-top: 1rem;
+            font-weight: bold;
+            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+        &#125;
+
+        @keyframes my-fadein &#123;
+            0%   &#123; opacity: 0; &#125;
+            100% &#123; opacity: 1; &#125;
+        &#125;
+
+        @keyframes my-fadeout &#123;
+            0%   &#123; opacity: 1; &#125;
+            100% &#123; opacity: 0; &#125;
+        &#125;
+
+        .my-fadein &#123;
+            animation: my-fadein 150ms linear;
+        &#125;
+        
+        .my-fadeout &#123;
+            animation: my-fadeout 150ms linear;
+        &#125;
+    `],
+&#125;)
+export class StyleClassDemo &#123;
+    
+&#125;
+</app-code>
+
+        </p-tabPanel>
+    </p-tabView>
+</div>
\ No newline at end of file
diff --git a/src/app/showcase/components/styleclass/styleclassdemo.module.ts b/src/app/showcase/components/styleclass/styleclassdemo.module.ts
new file mode 100755
index 00000000000..7b951f7127d
--- /dev/null
+++ b/src/app/showcase/components/styleclass/styleclassdemo.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { StyleClassDemoRoutingModule } from './styleclassdemo-routing.module';
+import { StyleClassDemo } from './styleclassdemo';
+import { StyleClassModule } from 'primeng/styleclass';
+import { AppCodeModule } from '../../app.code.component';
+import { TabViewModule } from 'primeng/tabview';
+import {AppDemoActionsModule} from '../../app.demoactions.component';
+
+@NgModule({
+	imports: [
+		CommonModule,
+		StyleClassDemoRoutingModule,
+        FormsModule,
+        ButtonModule,
+		InputTextModule,
+		StyleClassModule,
+		AppCodeModule,
+		TabViewModule,
+		AppDemoActionsModule
+	],
+	declarations: [
+		StyleClassDemo
+	]
+})
+export class StyleClassDemoModule {}
diff --git a/src/app/showcase/components/styleclass/styleclassdemo.ts b/src/app/showcase/components/styleclass/styleclassdemo.ts
new file mode 100755
index 00000000000..ea0f3e84bcb
--- /dev/null
+++ b/src/app/showcase/components/styleclass/styleclassdemo.ts
@@ -0,0 +1,43 @@
+import {Component} from '@angular/core';
+
+@Component({
+    templateUrl: './styleclassdemo.html',
+    styles:[`
+        .box {
+            background-color: var(--green-500);
+            color: #ffffff;
+            width: 100px;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            border-radius: 4px;
+            margin-top: 1rem;
+            font-weight: bold;
+            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+        }
+
+        @keyframes my-fadein {
+            0%   { opacity: 0; }
+            100% { opacity: 1; }
+        }
+
+        @keyframes my-fadeout {
+            0%   { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        .my-fadein {
+            animation: my-fadein 150ms linear;
+        }
+        
+        .my-fadeout {
+            animation: my-fadeout 150ms linear;
+        }
+    `],
+})
+export class StyleClassDemo {
+    
+}
\ No newline at end of file
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index 5db75267ac9..24fec288791 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#1e1e1e;
+  --surface-border:#383838;
 }
 
 * {
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index 63fa84c3e85..0a3728d6976 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#1e1e1e;
+  --surface-border:#383838;
 }
 
 * {
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index ceb90227c1c..1d9b5177ef3 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#1e1e1e;
+  --surface-border:#383838;
 }
 
 * {
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index ae6405bfd77..cd96f25da82 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#1e1e1e;
+  --surface-border:#383838;
 }
 
 * {
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index bd6f0915ea0..4b50d448816 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #20262e;
   --content-padding:1.25rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#20262e;
+  --surface-section:#20262e;
+  --surface-card:#2a323d;
+  --surface-overlay:#2a323d;
+  --surface-border:#3f4b5b;
 }
 
 * {
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index 7ac6e4dcfdf..9115c59da18 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #20262e;
   --content-padding:1.25rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#20262e;
+  --surface-section:#20262e;
+  --surface-card:#2a323d;
+  --surface-overlay:#2a323d;
+  --surface-border:#3f4b5b;
 }
 
 * {
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index 8d71a26b91f..54c659d52dd 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212529;
   --content-padding:1.25rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#efefef;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dee2e6;
 }
 
 * {
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index 6d7f8ae5bd0..d8454663126 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212529;
   --content-padding:1.25rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#efefef;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dee2e6;
 }
 
 * {
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index 6b9b4dc93e5..a11a5479d81 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #11100f;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:2px;
+  --surface-ground:#faf9f8;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#edebe9;
 }
 
 * {
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 141736dee01..87b2ba80d8d 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #191919;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#191919;
+  --surface-section:#191919;
+  --surface-card:#323232;
+  --surface-overlay:#323232;
+  --surface-border:#4b4b4b;
 }
 
 * {
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index 87c2bb4fe92..b4bee745838 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #191919;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#191919;
+  --surface-section:#191919;
+  --surface-card:#323232;
+  --surface-overlay:#323232;
+  --surface-border:#4b4b4b;
 }
 
 * {
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index 1794eccd1df..c89b375538f 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #191919;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#191919;
+  --surface-section:#191919;
+  --surface-card:#323232;
+  --surface-overlay:#323232;
+  --surface-border:#4b4b4b;
 }
 
 * {
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index 7e96bed8aa3..22785317beb 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #191919;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#191919;
+  --surface-section:#191919;
+  --surface-card:#323232;
+  --surface-overlay:#323232;
+  --surface-border:#4b4b4b;
 }
 
 * {
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index 9e753cce10f..18f75e93177 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#262626;
+  --surface-border:#hsla(0,0%,100%,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index 2edd874c557..2ae7e8731e5 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#262626;
+  --surface-border:#hsla(0,0%,100%,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index b932e41a1c9..3480dd88b97 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#fafafa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#rgba(0,0,0,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index 116db297cf0..caceef538e6 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#fafafa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#rgba(0,0,0,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 41fec09ad64..ffa11ea385c 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#262626;
+  --surface-border:#hsla(0,0%,100%,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index 839e4588546..2b05f5f077c 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #121212;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#121212;
+  --surface-section:#121212;
+  --surface-card:#1e1e1e;
+  --surface-overlay:#262626;
+  --surface-border:#hsla(0,0%,100%,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index dfc0d4211b2..f5ab35dbcd7 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#fafafa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#rgba(0,0,0,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index be28915ce03..a31c37fbb72 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:4px;
+  --surface-ground:#fafafa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#rgba(0,0,0,.12);
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 88a937cb3ff..c58862847df 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #111618;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f4f4f4;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#c8c8c8;
 }
 
 * {
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index 162cbd46f59..b9027da2421 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #111618;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f4f4f4;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#c8c8c8;
 }
 
 * {
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index 9d85c781fc4..90d592b3b79 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #111618;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f4f4f4;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#c8c8c8;
 }
 
 * {
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index fe898d8e60b..e0fc0fc2a71 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #111618;
   --content-padding:0.571rem 1rem;
   --inline-spacing:0.5rem;
+  --border-radius:2px;
+  --surface-ground:#f4f4f4;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dadada;
 }
 
 * {
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index cd852701967..b56c2339e85 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f8f9fa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dee2e6;
 }
 
 * {
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index f9772ce92a3..099561ddaf1 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f8f9fa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dee2e6;
 }
 
 * {
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index 84c6541584f..d3cc3c4592b 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f8f9fa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dee2e6;
 }
 
 * {
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index e71783b5904..23ea95f60c5 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #212121;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#f8f9fa;
+  --surface-section:#ffffff;
+  --surface-card:#ffffff;
+  --surface-overlay:#ffffff;
+  --surface-border:#dee2e6;
 }
 
 * {
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index 9aa52045a62..56151aad246 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #17212f;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#17212f;
+  --surface-section:#17212f;
+  --surface-card:#1f2d40;
+  --surface-overlay:#1f2d40;
+  --surface-border:#304562;
 }
 
 * {
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index 3922118b363..30c9725cc5c 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #17212f;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#17212f;
+  --surface-section:#17212f;
+  --surface-card:#1f2d40;
+  --surface-overlay:#1f2d40;
+  --surface-border:#304562;
 }
 
 * {
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index a5ad3629062..d94f45d5f67 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #17212f;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#17212f;
+  --surface-section:#17212f;
+  --surface-card:#1f2d40;
+  --surface-overlay:#1f2d40;
+  --surface-border:#304562;
 }
 
 * {
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index 5436952bf59..3c7a420e59a 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -34,6 +34,12 @@
   --gray-900: #17212f;
   --content-padding:1rem;
   --inline-spacing:0.5rem;
+  --border-radius:3px;
+  --surface-ground:#17212f;
+  --surface-section:#17212f;
+  --surface-card:#1f2d40;
+  --surface-overlay:#1f2d40;
+  --surface-border:#304562;
 }
 
 * {