royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: add formitem, formheading and tabbat (WIP) to all themes
Date Sat, 10 Nov 2018 15:01:42 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new d2f83dc  add formitem, formheading and tabbat (WIP) to all themes
d2f83dc is described below

commit d2f83dca02b0345e324f9b8dfe2d36583f9bfb6d
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sat Nov 10 16:01:34 2018 +0100

    add formitem, formheading and tabbat (WIP) to all themes
---
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 .../src/main/resources/defaults.css                | 46 ++++++++++++++++++++++
 .../src/main/sass/defaults.sass                    |  3 ++
 48 files changed, 1176 insertions(+)

diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index cfb2f0c..7cde60a 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #8a1e88;
 }
 
+.jewel.formheading {
+  color: #9f239d;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #d43bd1 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 013b1e9..ce63a24 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #0f88d1;
 }
 
+.jewel.formheading {
+  color: #1198e9;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #54b7f3 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index b2e42eb..4c8f415 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #638c29;
 }
 
+.jewel.formheading {
+  color: #71a02f;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #98cc50 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 1b9b752..5d13730 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #277b32;
 }
 
+.jewel.formheading {
+  color: #2e8e39;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #45c354 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 9c49f82..68a12b9 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #c16c07;
 }
 
+.jewel.formheading {
+  color: #d97a08;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f8a036 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 903f2f5..96ad8ac 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #ad0e15;
 }
 
+.jewel.formheading {
+  color: #c51017;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #ee343b !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 0add38e..0caf5f0 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #1e4e80;
 }
 
+.jewel.formheading {
+  color: #225b95;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #3481d0 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 4389517..823053b 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #e28f08;
 }
 
+.jewel.formheading {
+  color: #f69d0e;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f9bb58 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index b2ea221..1f4db50 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #be390e;
 }
 
+.jewel.formheading {
+  color: #d64010;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f16c42 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 166e715..b00aadc 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #1a6b65;
 }
 
+.jewel.formheading {
+  color: #1f7f78;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #2ebcb2 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 348d3fa..ca5edc6 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #3c1a55;
 }
 
+.jewel.formheading {
+  color: #4a2069;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #7432a4 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 6aaaa5d..b73e22c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -400,6 +400,36 @@ j|Card {
   border: 1px solid #999207;
 }
 
+.jewel.formheading {
+  color: #b1a909;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -661,6 +691,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #737373 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f4e813 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(#7f7f7f, #737373);
   border: 1px solid #333333;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 6f4301a..6e532f0 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #8a1e88;
 }
 
+.jewel.formheading {
+  color: #9f239d;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #d43bd1 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 1f3528f..4b7999f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #0f88d1;
 }
 
+.jewel.formheading {
+  color: #1198e9;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #54b7f3 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 1a91daf..bad993b 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #638c29;
 }
 
+.jewel.formheading {
+  color: #71a02f;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #98cc50 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index a625b40..428f15a 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #277b32;
 }
 
+.jewel.formheading {
+  color: #2e8e39;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #45c354 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 779f8f0..3446172 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #c16c07;
 }
 
+.jewel.formheading {
+  color: #d97a08;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f8a036 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 4ebeeab..7e88de6 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #ad0e15;
 }
 
+.jewel.formheading {
+  color: #c51017;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #ee343b !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 4998f59..ec4b308 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #1e4e80;
 }
 
+.jewel.formheading {
+  color: #225b95;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #3481d0 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 106bfda..4ca581e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #e28f08;
 }
 
+.jewel.formheading {
+  color: #f69d0e;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f9bb58 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index f21fa13..f2ab249 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #be390e;
 }
 
+.jewel.formheading {
+  color: #d64010;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f16c42 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index b2f0aa9..5764402 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #1a6b65;
 }
 
+.jewel.formheading {
+  color: #1f7f78;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #2ebcb2 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 5c5a436..625d5ae 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #3c1a55;
 }
 
+.jewel.formheading {
+  color: #4a2069;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #7432a4 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index dd0a566..f0869ab 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -399,6 +399,36 @@ j|Card {
   border: 1px solid #999207;
 }
 
+.jewel.formheading {
+  color: #b1a909;
+  font-size: 1.4em !important;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+  width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+  width: 10px;
+}
+
+j|FormHeading {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+  width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+  color: #EC1C24;
+  font-size: 1.6em !important;
+  width: 10px;
+}
+
+j|FormItem {
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
+}
+
 .fonticon.dark {
   color: #676767;
 }
@@ -660,6 +690,22 @@ j|Card {
     border-radius: 0px;
   }
 }
+.jewel.tabbarbutton {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+  background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #FFFFFF;
+  background: #f4e813 !important;
+}
+
 .jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
index 6e54f7c..987991c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
@@ -37,6 +37,8 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/divider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formheading"
+@import "../../../../JewelTheme/src/main/sass/components-primary/formitem"
 @import "../../../../JewelTheme/src/main/sass/components-primary/icons"
 @import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
 @import "../../../../JewelTheme/src/main/sass/components-primary/label"
@@ -46,6 +48,7 @@
 @import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
 @import "../../../../JewelTheme/src/main/sass/components-primary/slider"
 @import "../../../../JewelTheme/src/main/sass/components-primary/snackbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tabbar"
 @import "../../../../JewelTheme/src/main/sass/components-primary/table"
 @import "../../../../JewelTheme/src/main/sass/components-primary/text"
 @import "../../../../JewelTheme/src/main/sass/components-primary/textinput"


Mime
View raw message