Demo upodate

public/themes/arya-blue/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #64B5F6;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #383838;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/arya-green/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #81C784;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #383838;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/arya-orange/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #FFD54F;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #383838;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/arya-purple/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #BA68C8;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #383838;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #383838;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/bootstrap4-dark/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #8dd0ff;
   --primary-color-text: #151515;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #f19ea6;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #3f4b5b;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #151515;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.9375rem;
 }
-.p-inputtext.p-input-filled {
-  background: #3f4b5b;
-}
 
 .p-float-label label {
   left: 0.75rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #f19ea6;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #3f4b5b;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #151515;

public/themes/bootstrap4-light/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: $shade600;
   --primary-color: #007bff;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #dc3545;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: rgba(0, 0, 0, 0.03);
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.9375rem;
 }
-.p-inputtext.p-input-filled {
-  background: rgba(0, 0, 0, 0.03);
-}
 
 .p-float-label label {
   left: 0.75rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #dc3545;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: rgba(0, 0, 0, 0.03);
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/luna-amber/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #888888;
   --primary-color: #FFE082;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #4b4b4b;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/luna-blue/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #888888;
   --primary-color: #81D4FA;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #4b4b4b;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/luna-green/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #888888;
   --primary-color: #C5E1A5;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #4b4b4b;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/luna-pink/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #888888;
   --primary-color: #F48FB1;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #4b4b4b;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #e57373;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #4b4b4b;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/nova-accent/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #848484;
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f4f4f4;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/nova-alt/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #848484;
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f4f4f4;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/nova-vue/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #848484;
   --primary-color: #41b883;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f4f4f4;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/nova/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #848484;
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f4f4f4;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #a80000;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/rhea/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: #6c757d;
   --primary-color: #7B95A3;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: e7a3a3;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f4f4f4;
-}
 
 .p-float-label label {
   left: 0.429rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: e7a3a3;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f4f4f4;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/saga-blue/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: $shade600;
   --primary-color: #2196F3;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #f44336;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f8f9fa;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f8f9fa;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #f44336;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f8f9fa;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/saga-green/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: $shade600;
   --primary-color: #4CAF50;
   --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #f44336;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f8f9fa;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f8f9fa;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #f44336;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f8f9fa;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

public/themes/saga-orange/theme.css

@@ -9,6 +9,7 @@
   --text-color-secondary: $shade600;
   --primary-color: #FFC107;
   --primary-color-text: #212529;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 * {
@@ -343,9 +344,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #f44336;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #f8f9fa;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +685,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #f8f9fa;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +941,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #f44336;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #f8f9fa;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/vela-blue/theme.css

@@ -343,9 +343,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +684,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #304562;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +940,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/vela-green/theme.css

@@ -343,9 +343,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +684,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #304562;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +940,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/vela-orange/theme.css

@@ -343,9 +343,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #212529;
@@ -687,9 +684,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #304562;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +940,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #212529;

public/themes/vela-purple/theme.css

@@ -343,9 +343,6 @@
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-checkbox .p-checkbox-box {
   border-color: #ffffff;
@@ -687,9 +684,6 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
-.p-inputtext.p-input-filled {
-  background: #304562;
-}
 
 .p-float-label label {
   left: 0.5rem;
@@ -946,9 +940,6 @@
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
   border-color: #ef9a9a;
 }
-.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
-  background-color: #304562;
-}
 
 .p-highlight .p-radiobutton .p-radiobutton-box {
   border-color: #ffffff;

src/assets/styles/app/_core.scss

@@ -23,7 +23,7 @@ body {
     overflow-x: hidden;
     overflow-y: auto;
     background-color: var(--surface-a);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: var(--font-family);
     font-weight: normal;
     color: var(--text-color);
     -webkit-font-smoothing: antialiased;

src/assets/styles/app/app.css

@@ -94,6 +94,9 @@ a {
     transform: none;
   }
 }
+pre[class*=language-]:before, pre[class*=language-]:after {
+  display: none !important;
+}
 pre[class*=language-] code {
   border-left: 10px solid var(--surface-d) !important;
   box-shadow: none !important;
@@ -414,6 +417,9 @@ p {
   background-color: var(--surface-b);
   color: var(--text-color);
   padding-bottom: 0;
+  display: flex;
+  align-items: top;
+  justify-content: space-between;
 }
 .layout-content .content-section.introduction .feature-intro h1 span {
   font-weight: 400;
@@ -666,7 +672,6 @@ p {
 .layout-config .layout-config-content-wrapper {
   position: relative;
   height: 100%;
-  padding: 0;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
   color: var(--text-color);
   background-color: var(--surface-e);
@@ -707,6 +712,25 @@ p {
 .layout-config .layout-config-content {
   overflow: auto;
   height: 100%;
+  padding: 2rem;
+}
+.layout-config .config-scale {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0 2rem 0;
+}
+.layout-config .config-scale .p-button {
+  margin-right: 0.5rem;
+  border: 0 none !important;
+}
+.layout-config .config-scale i {
+  margin-right: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-color-secondary);
+}
+.layout-config .config-scale i.scale-active {
+  font-size: 1.25rem;
+  color: #2196f3;
 }
 .layout-config .layout-config-close {
   position: absolute;
@@ -733,89 +757,33 @@ p {
   outline: 0 none;
   box-shadow: 0 0 0 0.2rem #BBDEFB;
 }
-.layout-config h3 {
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: var(--text-color);
-}
 .layout-config .p-grid > div {
-  padding: 1rem 0.5rem;
+  padding: 1rem;
   text-align: center;
 }
 .layout-config .p-grid > div span {
   display: block;
 }
-.layout-config p {
+.layout-config .p-grid > div button {
-  margin: 0 0 2rem 0;
+  position: relative;
-}
+  display: inline-flex;
-.layout-config .config-scale {
+  justify-content: center;
-  display: flex;
-  align-items: center;
-  margin: 1rem 0 2rem 0;
-}
-.layout-config .config-scale .p-button {
-  margin-right: 0.5rem;
-  border: 0 none !important;
-}
-.layout-config .config-scale i {
-  margin-right: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--text-color-secondary);
-}
-.layout-config .config-scale i.scale-active {
-  font-size: 1.25rem;
-  color: #2196f3;
-}
-.layout-config .free-themes {
-  padding: 2rem;
 }
 .layout-config .free-themes img {
   width: 50px;
   border-radius: 4px;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  transition: transform 0.2s;
 }
-.layout-config .free-themes span {
+.layout-config .free-themes img:hover {
-  font-size: 12px;
-}
-.layout-config .current-theme {
-  box-shadow: 0 0 0 0.2rem #BBDEFB;
-}
-.layout-config .p-grid button {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  transition: box-shadow 0.2s, transform 0.2s;
-}
-.layout-config .p-grid button i {
-  line-height: inherit;
-  font-size: 28px;
-  color: #41b783;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  margin-left: -18px;
-  margin-top: -18px;
-  padding: 0.18rem;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-}
-.layout-config .p-grid button:focus {
-  box-shadow: 0 0 0 0.2rem #BBDEFB;
-}
-.layout-config .p-grid button:hover {
   transform: scale(1.1);
 }
-.layout-config .premium-themes {
+.layout-config .free-themes span {
-  padding: 2rem;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
 }
 .layout-config .premium-themes img {
   width: 100%;
-  transition: box-shadow 0.2s, transform 0.2s;
+  transition: transform 0.2s;
 }
 .layout-config .premium-themes img:hover {
   transform: scale(1.1);
@@ -1076,6 +1044,12 @@ p {
   .layout-content .content-section.submenu ul li {
     width: 50%;
   }
+  .layout-content .content-section.introduction {
+    flex-direction: column;
+  }
+  .layout-content .content-section.introduction .app-inputstyleswitch {
+    margin-top: 1.5rem;
+  }
 
   .home .introduction > div {
     width: 100%;
@@ -1220,6 +1194,9 @@ a {
     transform: none;
   }
 }
+pre[class*=language-]:before, pre[class*=language-]:after {
+  display: none !important;
+}
 pre[class*=language-] code {
   border-left: 10px solid var(--surface-d) !important;
   box-shadow: none !important;

src/views/formlayout/FormLayoutDemo.vue

@@ -6,6 +6,7 @@
                 <p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
                 a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/inputtext/InputTextDoc.vue

@@ -48,16 +48,14 @@ import InputText from 'primevue/inputtext';
 
                 <h5>Outlined vs Filled</h5>
                 <p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
-                to the field. Appling <i>p-input-filled</i> to an element or wrapping the container with <i>p-input-filled</i> enables the filled style. If you prefer 
+                to the field. Appling <i>p-input-filled</i> to an ancestor of an input <i>p-input-filled</i> enables the filled style. If you prefer
-                to use filled inputs in the entire application, use a global container such as document body or the application container to apply the style class.</p>
+                to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
-
-<CodeHighlight>
-&lt;InputText type="text" class="p-input-filled" /&gt;
-</CodeHighlight>
 
 <CodeHighlight>
 &lt;div class="p-input-filled"&gt;
     &lt;InputText type="text" /&gt;
+    &lt;InputText type="text" /&gt;
+    &lt;InputText type="text" /&gt;
 &lt;/div&gt;
 </CodeHighlight>